@charset "utf-8";


/*=============================================================
							공통
=============================================================*/
#wrapper {position:relative; width:100%; overflow:hidden; min-width: 1500px;}


h2 {font-size:65px;}
h3 {font-size:35px;}
h4 {font-size:31px; line-height:42px;}
h5 {font-size:25px;}
h6 {font-size:21px; line-height:35px;}


/*=============================================================
							헤더
=============================================================*/
#header {position:fixed; top:0; left:0; width:100%; height:120px; box-sizing:border-box; z-index:9873; background:#fff;}
#header .headBox {position:relative; width:1480px; height:100%; margin:0 auto;}
#header h1 {position:absolute; top:25px; left:0; z-index: 1;}
#header h1 img {}


/*--- globList ---*/
#globList {width:100%; height:40px; box-sizing:border-box; border-bottom:2px solid #e31837; background:#000; }
#globList .headBox {width: 1390px;}
#globList #customer {float:left; height:100%; box-sizing:border-box; padding:0 20px; line-height:40px; text-align:center; color:#fff; font-size:14px; border:1px solid #e9e9e9; border-width:0 1px; font-family: 'NanumSquare'; font-weight:600}
#globList #customer span {color:#fff; padding-left:13px;}

ul.glob {float:right;}
ul.glob li {position:relative; float:left; padding:0 15px; font-size:13px; line-height:40px; cursor: pointer; color:#fff;}

/*ul.glob li:nth-of-type(2)::after {position:absolute; top:13px; left:0; width:1px; height:13px; background:#ddd; content:''; opacity:0.5; }*/
ul.glob li:last-of-type {padding:0; }
ul.glob li svg {display: block; margin-top: 12px; fill:#fff; width: 15px; height: 15px; cursor: pointer;}

ul.glob li.left_first { position:absolute; left:-45px; padding:0}

/*--- gnbList ---*/
#gnbList { position:relative; background:#fff;  border-bottom:1px solid #ddd; }

/*헤더1차메뉴*/
.gnb {position:relative;width:100%; box-sizing:border-box; /*padding-left:170px;*/ padding-left:250px;}

.gclive {background:url(../_img/icon/menual.png) no-repeat center left; padding-left:25px; background-size:20px; color: #fff;}
.member_c img, .c_academy img {width: 70px;}
.c_room img {width:70px}

.live_condition {/*position: absolute; right: 0; top: 27px;*/ margin-top:5px}
.live_condition span {/*width: 130px;*/ display: block;}
.live_condition span img {width: 100%;}
.live_condition span.off {}
.live_condition span.on {display: none;}

.gnb ul.gnb-depth1 {width:100%; text-align:center; font-size:0;}
.gnb ul.gnb-depth1>li {position:relative; display:inline-block; padding:30px 0; font-size:16px; width: 130px;}
.gnb ul.gnb-depth1>li::after {position:absolute; top:50%; margin-top:-8px; left:0; width:1px; height:16px; background:#e6e6e6; content:'';}
.gnb ul.gnb-depth1>li:first-of-type::after {display:none;}
.gnb ul.gnb-depth1>li>a {display:block; color:#272727; text-decoration:none;}
.gnb ul.gnb-depth1>li:hover>a {color:#e31837;}
.gnb ul.gnb-depth1>li:last-of-type {width:110px; padding-left:10px}


/*마우스 오버 2차 드롭메뉴*/
.gnb .gnb-depth2 {position:absolute; top:80px; left:0; width:100%; height:0; box-sizing:border-box; z-index:5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; overflow:hidden;}
.gnb .gnb-depth2.on {height:300px; display:block;}
.gnb .gnb-depth2::after {position:absolute; top:-1px; left:0; width:0; height:3px; background:#e31837; content:''; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.gnb .gnb-depth2 ul {width:100%; height:100%; padding:15px 0; overflow: hidden;}
.gnb .gnb-depth2 ul::after {position:absolute; top:0; right:0; width:1px; height:100%; background:#ddd; content:'';}
.gnb .gnb-depth2 ul li {text-align:center; font-size:13px; padding:7px 0; line-height:1.2;}
.gnb .gnb-depth2 ul li a {color:#2d2d2d;}
.gnb .gnb-depth2 ul li a:hover {color:#e31837;}

.gnb_bg {position:fixed; top:121px; left:0; width:100%; height:0; background:#fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; overflow: hidden;}
.gnb_bg.on {height:300px; border-bottom: 1px solid #dedede; box-sizing: border-box;}

.gnb ul.gnb-depth1>li:hover .gnb-depth2 {background:#fafafa; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.gnb ul.gnb-depth1>li:hover .gnb-depth2 li a {font-weight: 600}
.gnb ul.gnb-depth1>li:hover .gnb-depth2::after {width:100%;}
.gnb ul.gnb-depth1>li:first-of-type .gnb-depth2{border-left:1px solid #ddd;}

/*좌측 메뉴설명배너*/
.top_banner_wrap {position: absolute; top: 35px; left: 50%; margin-left: -740px;}
.top_banner_wrap .top_banner {display: none;}
.top_banner_wrap .top_banner h6 {font-size: 25px; padding-bottom: 15px;  color:#f2f2f2; font-family: 'GmarketSans', sans-serif; font-weight: 800; position: relative;}
.top_banner_wrap .top_banner h6 span {font-size: 29px; color:#e31837; position: absolute; bottom: 0; left: 0; font-weight: 800}
.top_banner_wrap .top_banner img {padding:6px 0 10px 0;}
.top_banner_wrap .top_banner p {font-size: 13px;}
.top_banner_wrap .top_banner#tbn01 {display: block;}


/*우측롤링배너*/
.top_banner-slider {position: absolute; top: 0; left: 50%; margin-left: 450px; box-sizing: border-box;}
.top_banner-slider .item {background: #fafafa; width:500px; height: 300px; display: block; }
.top_banner-slider .item span {display: block; padding: 50px 30px;}
.top_banner-slider .item img {width: auto !important;}
.top_banner-slider .item p { font-family: 'Black Han Sans', sans-serif; font-size: 85px; font-style: italic; font-weight: 400; opacity: .05; color: #000; position: absolute; bottom: 9px; left: 120px; letter-spacing: -1px;}
.top_banner-slider .owl-dots {position:absolute; bottom:100px; left:28px; margin-top:0; text-align: center;}
.top_banner-slider .owl-dots button span {display: block; width:8px; height:8px; background: #555; box-sizing:border-box; opacity:1; cursor:pointer; margin:0 3px; border-radius: 30px }
.top_banner-slider .owl-dots button.active span {background:#e31837; width: 20px}




/*헤더검색*/
#top_search {position: fixed; top: 120px; background: #fff; left: 0; box-shadow: 0 10px 5px rgba(0,0,0,0.2); z-index: 5; padding:80px 0 100px 0; width: 100%; border-top: 1px solid #ddd; display: none;}
#top_search .search_wrap {width: 830px; overflow: hidden; margin: 0 auto;}
#top_search .search_wrap #form {position: relative; width: 100%; overflow: hidden; box-sizing: border-box; padding-right: 50px; border-bottom:  4px solid #000;}
#top_search .search_wrap #form input[type='text'] {width: 100%;  height: 50px; box-sizing: border-box;padding: 5px 0; font-size: 19px; border: 0;}
#top_search .search_wrap #form button {position: absolute; right: 0; top: 0; width: 40px; height: 50px; border: 0; background: none;}
#top_search .search_wrap #form button svg {width: 30px; height: 30px;}

#top_search .search_wrap  #rcmd_word {position: relative; box-sizing: border-box; padding-left: 100px; width: 100%; margin: 15px 0;}
#top_search .search_wrap  #rcmd_word span {position: absolute; top: 0; left: 0; display: block; border-radius: 30px; background: #cf2f38; color: #fff; font-size: 14px; text-align: center; padding: 5px 30px;}
#top_search .search_wrap  #rcmd_word a {padding: 5px 7px; font-size: 14px; color:#555; display: block; float: left;}

#top_search #close_search {position: absolute; bottom: 30px; right: 30px;}
#top_search #close_search svg {width: 50px; height: 50px; fill:#999; cursor: pointer; opacity: .2;}




/*=============================================================
							콘텐츠 
=============================================================*/
#container {position:relative; width:100%; margin-top:120px;}
#container .contents {position:relative; width:1200px; height:100%; /*overflow:hidden;*/ margin:0 auto;}

#subContainer {width:100%; overflow:hidden; margin-top: 120px}
#subContainer .contents {position: relative; width: 1200px; margin: 0 auto; height: 100%;}

#sub_mainContents {position: relative; width: 100%;}
.sub_section {width: 100%; padding: 70px 0; position: relative; overflow: hidden;}


/*서브비주얼*/
.sub_visual {position: relative; width: 100%; height: 270px; overflow: hidden;}
.sub_visual #visual_txt {position: absolute; top: 90px; left: 0; width: 100%; z-index: 1}
.sub_visual #visual_txt h2 {text-align: center; line-height: 1; color: #fff; font-weight: 400; font-family: 'Black Han Sans', sans-serif;}
.sub_visual #visual_txt p {text-align: center; color: #fff; font-size: 16px; padding-top:12px; opacity: .8; font-weight: 400}
.sub_visual #background_pic {position: relative; width: 100%; height: 100%; overflow: hidden;}
.sub_visual #background_pic img {position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; transition: .3s; transform:scale(1.2,1.2);}
.sub_visual #background_pic.active img {transform: scale(1,1); transition: 1.5s;}


/*드롭다운메뉴*/
#sub_locationDrop {position:relative; width:330px; height:50px; background:#000; border-radius: 40px; z-index:73; margin:-25px auto 0 auto; box-sizing: border-box; padding: 0 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}
#sub_locationDrop #home {float:left; width:50px; height:100%;}
#sub_locationDrop #home a {display:block; width:100%; height:100%; background:url(../_img/icon/home.png) no-repeat center; background-size:15px; text-indent:-9999px;}

#sub_locationDrop ul.dropdown-menu {float:left; height:100%; }
#sub_locationDrop ul.dropdown-menu>li {position:relative; float:left; width: 130px; height:100%; box-sizing:border-box;  line-height:50px; box-sizing:border-box;}
#sub_locationDrop ul.dropdown-menu li span {position:relative; display:block; width:100%; height:100%; color:#fff; font-size:14px; box-sizing:border-box; padding:0 20px; cursor:pointer;}
#sub_locationDrop ul.dropdown-menu li::before {position: absolute; top: 20px; left: 0; width: 1px; height: 12px; background:rgba(255,255,255,0.2); content: '';}
#sub_locationDrop ul.dropdown-menu li span::after {position:absolute; right:15px; top:50%; margin-top:-2px; width:7px; height:10px; background-image:url(../_img/icon/select_box_bg-down.png); background-size:100%; opacity: .5; background-repeat:no-repeat; content:'';}
#sub_locationDrop ul.dropdown-menu li.on span::after {background-image:url(../_img/icon/select_box_bg-up.png);}
#sub_locationDrop ul.dropdown-menu li a {display:block; width:100%; height:100%; color:#636363; font-size:17px; box-sizing:border-box; padding:0 20px; text-decoration:none;}
#sub_locationDrop ul.dropdown-menu li ul {display:none; position:absolute; left:0; top:100%; width:100%; background:#fafafa; border:1px solid #e0e0e0; box-sizing:border-box; padding:10px 0}
#sub_locationDrop ul.dropdown-menu li ul li {float:none; width:100% !important; border-left:0; line-height: 1.5;}
#sub_locationDrop ul.dropdown-menu li ul li:hover {background:none;}
#sub_locationDrop ul.dropdown-menu li ul li:hover a {color:#3368ba;}
#sub_locationDrop ul.dropdown-menu li ul li a { color: #333; font-size:14px; padding: 5px 20px;}
#sub_locationDrop ul.dropdown-menu li ul li ul { left: 100%; top: 0;}

#sub_locationDrop ul.dropdown-menu>li:first-of-type span {color:#8b8b8b;}




/*=============================================================
							푸터 
=============================================================*/
#footer { width:100%; box-sizing:border-box; padding:30px 0; background:#303030; }
#footer .footBox {position:relative; width:1200px; margin:0 auto;}

/**/
#company_info {width: 100%; box-sizing: border-box; padding-left: 250px;}
#company_info h1 {position: absolute; left: 0; top: 50%; margin-top: -15px;}
#company_info ul.fnb {width:100%; overflow:hidden; margin-bottom:20px; box-sizing: border-box;}
#company_info ul.fnb li {position:relative; font-size:15px; float:left; padding:0 10px;}
#company_info ul.fnb li::after {position:absolute; top:4px; left:0; width:1px; height:13px; background:rgba(255,255,255,0.3); content:'';}
#company_info ul.fnb li:first-of-type {padding-left:0;}
#company_info ul.fnb li:first-of-type::after {display:none;}
#company_info ul.fnb li a {color:#acacac;}

#company_info ul.fnb.login {position: absolute; top: 0; right: 0; width: auto; color: #fff;}
#company_info ul.fnb.login li a {color: #fff !important}

#company_info p {font-size:15px; color:#acacac; line-height:28px; }
#company_info p.Copy { opacity:0.5; }

/**/
.family_site {position:absolute; right:0; top:50%; margin-top:-10px; width:190px; height:45px; box-sizing:border-box; border:1px solid #363638; background:#9397a0;}
.family_site span.tit {display:block; line-height:43px; color:#fff; font-size:14px; font-family:'NotoSans',sans-serif;  padding:0 15px; }
.family_site span.icon {display:block; line-height:43px; position:absolute; right:0; top:0; width:25%; text-align:center; background:url(../_img/icon/down-arrow.png) no-repeat center right 18px, #c21a2b; background-size:12px; text-indent:-9999px; cursor:pointer;  }

.family_site ul {position:absolute; left:-1px; bottom:44px; width:190px; background:#242426; border:1px solid #363638; box-sizing:border-box; border-bottom:0; display:none;}
.family_site ul li {width:100%; border-top:1px solid #363638; box-sizing:border-box;  font-size:12px; padding:10px 15px;}
.family_site ul li:first-of-type {border-top:0;}
.family_site ul li a {color:#aaa;}



