/* BASIC css start */
/* header */
.header { position: relative; margin-bottom:55px; color:#000; min-width:1200px; font-size:14px; z-index:50; background:#fff;}
/* bi */
.header .bi { position: absolute; top: 28px; left:0; z-index:10; }
/* util */
.header .util { box-sizing:border-box; padding-top:17px; height:43px; background:#ed1c24; font-size:0; text-align:right;}
.header .util p { float:left; font-size:12px; color:#fff;}
.header .util p span { font-weight:700;}
.header .util li { display:inline-block; position:relative; padding:0 20px;}
.header .util li a { color:#fff; font-size:12px; vertical-align:baseline; opacity:0.8;}
.header .util li a.on,
.header .util li a:hover { opacity:1;}
/* tooltip */
.header .tooltip { position: absolute; top:17px; left: 50%; margin-top: 5px; transition: all .2s; cursor: default; }

.header .tooltip span { position: relative; left: -50%; display: block; padding: 0 7px; height: 18px; line-height: 18px; color: #fff; font-size: 11px; border-radius: 9px; background: #f1454e; white-space:nowrap; text-align:left;}

.header .tooltip span:after { content: ""; position: absolute; top: -5px; left: 50%; display: block; margin-left: -5px; border-bottom: 5px solid #f1454e; border-right: 5px solid transparent; border-left: 5px solid transparent; }

.header .tooltip.join span {background:#000;}
.header .tooltip.join span:after {border-bottom-color:#000;}

/* join animation */
@-webkit-keyframes joinAnimation{
 0% {
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

@-moz-keyframes joinAnimation{
 0% {
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

@keyframes joinAnimation{
 0% {
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

.header .util .tooltip {
  -webkit-animation:joinAnimation 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation:joinAnimation 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;

  animation:joinAnimation 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* aside */
.header .aside { height:115px; z-index:1;}
.header .aside .top-banner { position:absolute; top:30px; right:15px; width:250px; height:64px;}
.header .aside .top-banner-slide {overflow:hidden;}
.header .aside .top-banner-slide .slidesjs-navigation {position:absolute; bottom:0; height:14px; text-indent:-9999px; border:1px solid #b7b7b7; background:url(/design/bigjoy/renewal2017/bg_arrow5.png) no-repeat;}
.header .aside .top-banner-slide .slidesjs-navigation:hover {border-color:#999; z-index:1;}
.header .aside .top-banner-slide .slidesjs-previous {right:-24px; width:14px; border-radius:2px 0 0 2px; background-position:5px 50%;}
.header .aside .top-banner-slide .slidesjs-next {right:-38px; width:13px; border-radius:0 2px 2px 0; background-position:-9px 50%;}
/* hdSchFrm */
.header .hd-search { position:absolute; left: 50%; top:50%; transform:translate(-50%,-50%); width:600px; height:45px; border:3px solid #ed1c24; margin-left:-25px; margin-top:5px; }
.header .hd-search fieldset { float: left; width: auto; }
.header .hd-search .MS_search_word_best,
.header .hd-search .btn-sch { float: left; width: auto; }
.header .hd-search .MS_search_word_best { border: 0px; width: 550px; height: 40px; padding-left:15px; font-size:18px; color:inherit; margin-top:4px;}
.header .hd-search a {height:30px; line-height:42px; position:absolute; right: 15px; font-size:20px;}
.header .hd-search #mulsearch_re {top: 35px;}
.hd-search img { vertical-align: middle; }

/* gnb */
.menus {position:absolute; top:158px; left:0; width:100%; background:#fff; height:54px; font-size:16px; color:#000; z-index:40; border-bottom: 4px solid #ff8594;}
.menus:after { content: ""; display: block; clear: both; }
.menus .btn-all-menu {position:absolute; top: 3px;; left:0; height:54px; line-height:52px; padding-left:24px; background:url(/design/bigjoy/renewal2017/bg_all_menu.png) no-repeat 0 50%; font-size:17px; }
.menus .btn-all-menu.open {background:url(/design/bigjoy/renewal2017/bg_all_menu_close.png) no-repeat 0 50%;}
.menus .gnb {margin-left:105px;}
.menus .gnb:after {content:''; display:block; clear:both;}
.menus .gnb > li {float:left;}
.menus .gnb > li > a {position:relative; display:block; padding:0 24px; height:54px; line-height:58px; transition:padding .2s; font-size:17px;}
.menus .gnb > li:hover > a:after {content:''; position:absolute; bottom:7px; left:50%; margin-left:-3px; border-top:4px solid #df1018; border-left:3px solid transparent; border-right:3px solid transparent;}
.menus .gnb > li:hover > a.no-sub:after {display:none;}
.menus-s {position:relative; left:0; width:100%; background:#ff8594; height:50px; font-size:16px; color:#fff; z-index:20;  border-bottom: 1px solid; }
.menus-s .aside-menu {position: relative; margin-left: auto !important; margin-right: auto !important; width: 1200px;}
.menus-s .aside-menu:after {content:''; position:absolute; top:50%; left:0; margin-top:-7px; border-left:1px solid #989898;}
.menus-s .aside-menu > li {float:left; margin-left: 40px;}
.menus-s .aside-menu > li > a {display:block; margin-left:10px; padding-left:14px; height:45px; line-height:52px; color:#fff; transition:padding .2s; min-width:0px; text-align:center; font-size:17px; }
.menus-s .aside-menu > li > .btn-yfl {position:relative; overflow:hidden;}
.menus-s .aside-menu > li > .btn-yfl:after {content:''; position:absolute; top:50%; left:0; margin-top:-7px; height:14px; border-left:1px solid #989898;}
.menus-s .aside-menu > li > .btn-yfl img {margin-top:12px;}
.menus-s .aside-menu > li > .btn-yfl:hover img {margin-top:-63px;}
.menus-s .aside-menu > li:first-child a {margin-left:0;}
.banner-open .menus {top: 253px;}

/* submenu */
.sub-menu {display:none; position:absolute; padding:13px 22px; background:rgba(255,255,255,0.99); overflow:hidden; z-index:1; box-shadow:0 4px 4px rgba(0,0,0,0.2); font-size:15px;}
.sub-menu .sub-menu-wrap {overflow:hidden;}
.sub-menu .sub-menu-wrap > div {position:relative; float:left;}
.sub-menu .sub-menu-wrap > div + div {margin-left:30px; padding-left:30px; padding-bottom:15px;}
.sub-menu .sub-menu-wrap > div + div:after {content:''; position:absolute; top:0; left:0; height:800px; border-left:1px dotted #aaa;}
.sub-menu .sub-menu-title {position:relative; margin-bottom:12px; padding-bottom:15px; font-weight:600;}
.sub-menu .sub-menu-title:after {content:''; position:absolute; bottom:0; left:0; width:15px; border-bottom:2px solid #df1018;}
.sub-menu ul li { font-weight:400; font-size:15px;}
.sub-menu ul li + li {margin-top:12px;}
.sub-menu ul li a {white-space: nowrap;}
.sub-menu ul li a:hover {color:#ed1c24}
.sub-menu ul + .sub-menu-title {margin-top:20px;}
li:hover .sub-menu {display:block;}

/* submenu */
.sub-menu-s {display:none; position:absolute; padding:13px 22px; background:#ff8594; overflow:hidden; z-index:1; box-shadow:0 4px 4px rgba(0,0,0,0.2); font-size:15px;}
.sub-menu-s .sub-menu-wrap {overflow:hidden;}
.sub-menu-s .sub-menu-wrap > div {position:relative; float:left;}
.sub-menu-s .sub-menu-wrap > div + div {margin-left:30px; padding-left:30px; padding-bottom:15px;}
.sub-menu-s .sub-menu-wrap > div + div:after {content:''; position:absolute; top:0; left:0; height:800px; border-left:1px dotted #aaa;}
.sub-menu-s .sub-menu-title {position:relative; margin-bottom:12px; padding-bottom:15px; font-weight:600;}
.sub-menu-s .sub-menu-title:after {content:''; position:absolute; bottom:0; left:0; width:15px; border-bottom:2px solid #df1018;}
.sub-menu-s ul li { font-weight:400; font-size:15px;}
.sub-menu-s ul li + li {margin-top:12px;}
.sub-menu-s ul li a {white-space: nowrap; color:#fff}
.sub-menu-s ul li a:hover {color:#000}
.sub-menu-s ul + .sub-menu-title {margin-top:20px;}
li:hover .sub-menu-s {display:block;}


/* fixed style */
.header.fixed .hd-search {/*position: fixed;*/ top:70px; left:50%; margin-left:410px; margin-top:0; width:330px; height:30px; }
.header.fixed .hd-search .MS_search_word_best { width: 300px; height:25px; } 
.header.fixed .hd-search a { line-height: 30px; }
.menus.fixed {position:fixed; top:0; /*height: 100px;*/}
.menus.fixed .aside-menu {margin-right:235px;}
.menus.fixed .aside-menu li {display:none;}
.menus.fixed .aside-menu li.aside-yfl,
.menus.fixed .aside-menu li.aside-yfl li {display:block;}
.menus.fixed .aside-menu > li > .btn-yfl:after {display:none;}
/*
.header.fixed .hd-search .MS_search_word_best {width:110px;}
.menus.fixed .aside-menu > li > a {margin-left:7px; padding-left:9px;}
*/


/* all menu style */
.all-menu {display:none; position:absolute; top:54px; left:50%; margin-left:-600px; width:1200px; box-sizing:border-box; padding:20px 50px; background:#fff; background:rgba(255,255,255,0.95); overflow:hidden; z-index:1; box-shadow:0 4px 4px rgba(0,0,0,0.2);  font-size:0;}
.all-menu:after {content:''; display:block; clear:both;}
.all-menu .all-menu-group {float:left; width: 13%; vertical-align: top;}
.all-menu .all-menu-group + .all-menu-group {margin-left: 1.5%;}
.all-menu .all-menu-group:after {content:''; display:block; clear:both;}
.all-menu .all-menu-group .all-menu-title {position:relative; display:block; padding:5px; font:16px/1 'Playfair Display', 'Roboto', 'Nanum Gothic', 'Noto Sans KR', Helvetica, serif; font-weight:700; margin-bottom:15px; background-color:#ed1c24; color:#fff; letter-spacing:2px;}
.all-menu .all-menu-sub-title {margin-bottom: 14px; font-weight:bold; font-size: 14px;}
.all-menu .all-menu-sub ul{margin-bottom:12px; overflow:hidden;}
.all-menu .all-menu-sub li + li {margin-top:9px;}
.all-menu .all-menu-sub li a {display:block; font-size:14px; font-weight: 300; color:#333;}
.all-menu .all-menu-sub li a:hover {color:#ed1c24}
.all-menu .height100 {min-height: 700px;}
.all-menu .height50 {min-height: 100px; margin-top:-170px;}
.clear { clear:both !important;}

/* top banner */
.top-app-banner {
    position: relative;
    display: none;
    height: 95px;
    text-align:center;
    overflow:hidden;
    background: url(/design/bigjoy/renewal2017/bg_top_banner.jpg) repeat-x;
}
.top-app-banner button {
    position:absolute;
    top:50%;
    left:50%;
    margin-top: -17px;
    margin-left:555px;
    width:35px;
    height:35px;
    padding:0;
    background: url(/design/bigjoy/renewal2017/btn_close_top.png) no-repeat;
    text-indent: -9999px;
}
.banner-open .top-app-banner {
    display: block;
}



/* BASIC css end */