@charset "utf-8";
@import url(animated.css);/*애니메이션*/
@import url(common.css);/*공통*/
@import url(sub.css);/*서브*/

/*아이폰에서 input 라운드 없애기*/
input,button {border-radius:0;-webkit-appearance:none}

/*아이폰에서 input 라운드 없앴을때 크롬에서 체크박스가 사라지는 현상 대처하기*/
input[type="checkbox"] {-webkit-appearance:checkbox; -moz-appearance:checkbox;}
input[type="radio"] {-webkit-appearance:radio; -moz-appearance:radio;}`

/*마우스 드래그 배경색*/
::-moz-selection{background:#00aeef; color:#fff}
::selection {background:#00aeef; color:#fff}

#wrap {position:relative; background:#fff; overflow:hidden;}

.is_cont, .is_cont2, .cont {word-break: keep-all}

br {opacity:0}


/* --------------------------------------------------헤더 영역-------------------------------------------------- */
#header_wrap {position:fixed; top:0; left:0; width:100%; background:#080b1d; z-index:100;}

.header_top {position:relative; background:#00aeef; z-index:99}
.header_top .hd_cont {position:relative; max-width:1200px; height:45px; margin:0 auto; overflow:hidden}

.header_top .hd_lBox, .header_top .hd_rBox {padding-top:10px;}
.header_top .hd_lBox {float:left;}
.header_top .hd_rBox {float:right;}

.header_top .hd_lBox span {display:inline-block; vertical-align:middle}
.header_top .hd_lBox .txt {padding-top:3px;}
.header_top .hd_lBox span:after {content:""; display:inline-block; vertical-align:middle; width:1px; height:18px; margin:0 10px; background:#0f1a1b}
.header_top .hd_lBox span:last-child:after {display:none;} 

.header_top .hd_rBox .top_sns {float:left;}
.header_top .hd_rBox .top_sns:after {content:""; display:inline-block; vertical-align:middle; width:1px; height:18px; margin:0 12px; background:#0f1a1b}
.header_top .hd_rBox .top_sns li {display:inline-block; margin-left:10px;}
.header_top .hd_rBox .lang {float:left;}

#header {position:relative; max-width:1200px; height:80px; margin:0 auto;}
.tl_lang {display:none; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.tl_lang a {color:#fff; padding:4px 12px; border:2px solid #fff; border-radius:50px;}


@media screen and (max-width:1220px){
	.header_top .hd_cont {max-width:94%;}
	.header_top .hd_lBox img {height:15px}
	#header {max-width:100%; }

	.header_mob {position:relative; z-index:99; height:80px; background:#080b1d; max-width:100%; padding:0 3%; margin:0 auto;}

	.header_top .hd_rBox {display:none}
	.header_top .hd_lBox {float:none; text-align:center;}

	.tl_lang {display:block; left:3%}
}

@media screen and (max-width:768px){
	.header_top .hd_cont {height:42px}
	#header {height:60px}
}


/*로고*/
.logo {position:absolute; top:50%; left:0; transform:translateY(-50%);}


/*네비*/
.naviBox {text-align:right; margin-right:60px; line-height:85px;}
.naviBox .mu_1 {position:relative; display:inline-block; margin:0 -4px; }
/*.naviBox .mu_1 {display:inline-block; margin:0 -4px; text-align:center;}*/
.naviBox .mu_1 .tlt a {position:relative; display:block; font-size:18px; color:#fff; padding:0 35px}
.naviBox .mu_1:hover .tlt a {color:#00aeef; background:#fff}
.naviBox .mu_1.on .tlt a {color:#00aeef;}
.naviBox .mu_1 .tlt a:after {content:""; display:block; vertical-align:middle; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:15px; background:#d7d7d7;}
.naviBox .mu_1:last-child .tlt a:after {display:none;}

.naviBox .mu_1 .pc_tlt {display:block !important;}
.naviBox .mu_1 .mob_tlt {display:none !important;}

.naviBox .detail_list {display:none; position:absolute; top:80px; left:50%; transform:translateX(-50%); text-align:center; height:60px; line-height:65px; width:600px; /*width:100%;*/ z-index:10}
.naviBox .detail_list li {display:inline-block; margin:0 10px;}
.naviBox .detail_list li:last-child {margin-bottom:0}
.naviBox .detail_list a {color:#343434; font-size:15px; display:block;}
.naviBox .detail_list a:hover, .naviBox .detail_list .on a {color:#00aeef}

.top_navi_bg {position:absolute; top:125px; left:0; width:100%; background:#fff; z-index:0;}


@media screen and (max-width:1220px){
	.naviBox .mu_1 .pc_tlt {display:none !important;}
	.naviBox .mu_1 .mob_tlt {display:block !important;}
	
	.logo {left:50%; transform:translate(-50%,-50%)}
	.logo img {height:45px;}

	/*메뉴*/
	.head {position:fixed; top:125px; left:0; width:100%; height:100vh; transform: translate(0, -110%); background:#fff;  z-index: 20; transition: all 0.4s;}
	.head_active {transform: translateY(0%); transition: all 0.4s;}

	.navi {position:relative; width:100%; height:0; z-index:99; margin-top:-500%;}
	.head_active .navi {margin-top:0;}
	
	.naviBox {text-align:left; margin-right:0; line-height:60px;}

	.naviBox .mu_1, .naviBox .detail_list li {display:block; text-align:left;}
	.naviBox .mu_1 {border-bottom:1px solid #ddd}
	.naviBox .mu_1 .tlt a {color:#212121; padding:5px 25px;}
	.naviBox .mu_1 .tlt a:after {content:"\f2c2"; font-size:20px; width:auto; height:auto; background:none; font-family: LineAwesome; position:absolute; top:50%; right:25px; transform:translateY(-50%);}
	.naviBox .mu_1 .tlt.selected a:after, .naviBox .mu_1.on .tlt a:after  {content:"\f28e";}

	.naviBox .mu_1:last-child .tlt a:after {display:block;}

	.naviBox .detail_list {position:relative; top:inherit; left:inherit; transform:inherit; border-top: 1px solid #ddd; height:auto; line-height:1.2em; background:#f9f9f9}
	.naviBox .detail_list li {margin:0}
	
	.naviBox .mu_2 {border-bottom: 1px solid #ddd;}
	.naviBox .mu_2:last-child {border-bottom:0}
	.naviBox .mu_2 a {padding:16px 35px;}
	.naviBox .mu_2 a:before {content:"-"; display:inline-block; margin-right:5px;}
	.naviBox .mu_1 .tlt a {display:block; font-size:18px}
	.naviBox .detail_list a {display:block; font-size:16px}	
}

@media screen and (max-width:768px){
	.logo img {height:36px;}
	.head, .mob_naviBg {top:122px}
	
	.naviBox {line-height:50px;}
	.naviBox .mu_1 .tlt a {display:block; font-size:16px}
	.naviBox .detail_list a {display:block; font-size:14px}
}


@media screen and (max-width:480px){
	/*메뉴*/
	.head {width:100%;}
}


/*전체버튼*/
.all_mnBtn, .all_mn_closeBtn {cursor:pointer; width: 33px; height: 25px; position: absolute;}

.all_mnBtn {top: 50%; transform: translateY(-50%); right:0; z-index:9999; }
.all_mnBtn span, .all_mn_closeBtn span {position:absolute; top: 0; height: 3px;width: 33px; background:#fff;}

.all_mnBtn span:first-child {top: 0px;}
.all_mnBtn span:nth-child(2) {top: 11px;}
.all_mnBtn span:last-child {top: 22px;}

.all_mn_closeBtn {top:50px; right:50px}
.all_mn_closeBtn span {top:10px; background:#222}
.all_mn_closeBtn span:first-child {transform: rotate(45deg);}
.all_mn_closeBtn span:nth-child(2) {opacity:0}
.all_mn_closeBtn span:last-child {transform: rotate(-45deg);}

.all_mnBox {position:relative; width:100%;  z-index:101}
.all_mnBox .all_mnBox_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.5); z-index:100}

.all_mnBox .all_logo {margin-bottom:60px;}

.all_mnBox .all_mncontBox {position:fixed; top:0; left:50%; transform: translate(-50%, -100%); width:1200px; margin:0 auto; background: #fff; z-index:101;  transition: all 0.2s;}
.all_mnBox .all_mncontBox.active {transform: translate(-50%, 10%); transition: all 0.2s;}
.all_mnBox .all_mncont {position:relative; max-width:1200px; min-height:200px; margin:0 auto; padding:50px 0 20px;}

.all_mnUl1 {width:90%; margin:30px auto 0;}
.all_mnUl1 .all_mn_1 {display:inline-block; vertical-align:top; margin:0 1.5% 50px; width:22%; }
.all_mnUl1 .all_mn_1:nth-child(4n) {margin-right:0}
.all_mnUl1 .all_mn_1:last-child {margin-right:0}
.all_mnUl1 .all_mn_1 .tlt {margin-bottom:20px; font-size:25px; text-align:center; border-bottom:2px solid #ddd; padding-bottom:10px;}
.all_mnUl1 .all_mn_1 .tlt a {display:block;}

.all_mnUl2 .all_mn_2 {margin-bottom:7px;}
.all_mnUl2 .all_mn_2 a {font-size:16px; color:#939393}
.all_mnUl2 .all_mn_2 a:hover {color:#00aeef}
.all_mnUl2 .all_mn_2 a:before {content:"-"; display:inline-block; margin-right:5px;}

@media screen and (max-width:1220px){
	.all_mnBtn {display:none !important}
}

/*햄버거*/
.burger {display:none; width: 33px; height: 25px; position: absolute; top: 50%; transform: translateY(-50%); right:0; z-index: 9999; transition:all 0.3s ease-in-out;}
.burger span {position:absolute; top: 0; height: 3px;width: 33px; background:#fff; transition: all 0.3s;}

.burger span:first-child {top: 0px;}
.burger span:nth-child(2) {top: 11px;}
.burger span:last-child {top: 22px;}

.burger.active {cursor: pointer;}
.burger.active span {top:10px;}
.burger.active span:first-child {transform: rotate(45deg);}
.burger.active span:nth-child(2) {opacity:0}
.burger.active span:last-child {transform: rotate(-45deg);}

@media screen and (max-width:1220px){
	.burger {display:block; right:3%}
}


/* --------------------------------------------------컨텐츠 영역-------------------------------------------------- */
#container_wrap {position: relative;display: block; overflow: hidden;}

#contents {position: relative;display: block;margin: 0 auto; background: #fff;}
.is_cont {position: relative; max-width:1200px; margin: 0 auto; min-height: 400px; padding:120px 0; font-family:"GmarketSansLight"; font-weight:600;}
.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell {height: auto !important;}

@media screen and (max-width:1220px){
	.is_cont {max-width:94%}
}

@media screen and (max-width:768px){
	.is_cont {padding:80px 0}
	.no_txt {display:none}
}

@media screen and (max-width:480px){
	.is_cont {padding:50px 0}
}

/*서브이미지*/
.svis_wrap {position:relative; width:100%; height:425px; background:url(/share/img/sub/svis01.jpg) no-repeat 50% 0; background-size:cover; animation-name: zoominout;animation-duration: 3s; animation-iteration-count: 1; animation-timing-function: linear;}
.svis_area {position:relative; max-width:1200px; height:100%; margin:0 auto; color:#fff;}

.svis_wrap .txtBox {position:absolute; top:50%; left:50%;  transform:translate(-50%,-50%); width:100%; text-align:center}
.svis_wrap .txtBox .txt01 {position:absolute; bottom:140px; left:115px}
.svis_wrap .txtBox > div {animation-fill-mode: both !important; animation: fanfare2 0.8s; animation-delay:0.3s}


.svis01, .svis07 {background: url("/share/img/sub/sub_visual_bg01.jpg") no-repeat center top;}
.svis02 {background: url("/share/img/sub/sub_visual_bg02.jpg") no-repeat center top;}
.svis03 {background: url("/share/img/sub/sub_visual_bg03.jpg") no-repeat center top;}
.svis04 {background: url("/share/img/sub/sub_visual_bg04.jpg") no-repeat center top;}
.svis05 {background: url("/share/img/sub/sub_visual_bg05.jpg") no-repeat center top;}
.svis06 {background: url("/share/img/sub/sub_visual_bg06.jpg") no-repeat center top;}


@keyframes zoominout {
	0% {transform: scale3d(1.2, 1.2, 1);}
	100% {transform: scale3d(1, 1, 1);}
}


@media screen and (max-width:1220px){
	.svis_area {max-width:94%}
}

@media screen and (max-width:768px){
	.svis_wrap {height:55vw}

	.svis_wrap .txtBox {top:56%; left:50%;}

	.svis_wrap .txtBox .txt01 {bottom:14vw; left:10vw}
	.svis_wrap .txtBox .txt01 img {height:6vw}
	.svis_wrap .txtBox .txt02 img {height:42vw}
}

@media screen and (max-width:550px){
	.svis_wrap .txtBox {top:60%; left:50%;}
}

@media screen and (max-width:480px){
	.svis_wrap {height:65vw}
	
	.svis_wrap .txtBox {top:70%}

	.svis_wrap .txtBox .txt01 {left:5vw}
	.svis_wrap .txtBox .txt01 img {height:7vw}
	.svis_wrap .txtBox .txt02 img {height:44vw}
}


/*3차*/
.snb_3th {position:relative; max-width:1200px; margin:0 auto 70px; overflow:hidden; padding-bottom:1px}
.snb_3th li {float:left; text-align:center; width:14.28%; margin:0 -1px -1px 0}
.snb_3th li a, .snb_3th li button {display:block; color:#7f7f7f; background:#fff; line-height:55px; border:1px solid #d1d1d1;}
.snb_3th li a:hover, .snb_3th li.active a, .snb_3th li #bo_cate_on {color:#fff; background:#00aeef; border-color:#00aeef}

.wd_1 li{width:100% !important}
.wd_2 li{width:50% !important}
.wd_3 li{width:33.333% !important}
.wd_4 li{width:25% !important}
.wd_5 li{width:20% !important}
.wd_6 li{width:16.666% !important}
.wd_7 li{width:14.222% !important}
.wd_8 li{width:12.5% !important}
.wd_9 li{width:11.111% !important}
.wd_10 li{width:10% !important}


@media screen and (max-width:1220px){
	.snb_3th li {width:25%;}

	.wd_4 li{width:50% !important}
	.wd_5 li{width:33.333% !important}
	.wd_6 li{width:33.333% !important}
	.wd_10 li{width:20% !important}
}

@media screen and (max-width:768px){
	.snb_3th {margin:0 auto 50px;}
	.snb_3th li {width:33.333%;}
	.snb_3th li a, .snb_3th li button {line-height:45px;}
}

@media screen and (max-width:480px){
	.snb_3th {margin:0 auto 40px;}
	.snb_3th li a, .snb_3th li button {line-height:40px;}
}

/*이벤트 이미지확대*/
.sample_image {overflow: hidden;}
.sample_image img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
.sample_image:hover img {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
}


/*로케이션*/
.location {position:relative; width:100%; height:60px; border-bottom:1px solid #a6acb1; background:#d3dde5; z-index:20}
.location_cont {position:relative; max-width:1200px; margin:0 auto;}
.location_cont a {display:inline-block; color:#373737;}
.location_cont > div {position:relative; float:left; height:60px; border-left:1px solid #a6acb1}
.location_cont > div:last-child {border-right:1px solid rgba(0,0,0,0.15)}
.location_cont .depth01 > a {min-width:250px; font-size:19px;}
.location_cont .depth01 > a, .location_cont .home > a {display:block; height:100%; line-height:65px; padding:0 23px;}
.location_cont .home > a {position:relative; font-size:14px; width:65px; color:#373737; font-weight:700; text-align:center}
.location_cont .home > a i {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.location_cont .depth01 > a .txt {padding-right:30px;}
.location_cont .depth02 {display:none; position:absolute; top:60px; left:0; background:#d3dde5; border:1px solid rgba(0,0,0,0.15); border-top:0; width:100%;}
.location_cont .depth02 li a {display:block; padding:13px 23px;}
.location_cont .depth02 li:hover a {background:#009ddc; color:#fff}

.location_cont .sp_comm {position:absolute; right:20px; top:22px;}

.location_cont .dp_txt .off {display:block;}
.location_cont .dp_txt .on {display:none;}
.location_cont .dp_txt.active .off {display:none;}
.location_cont .dp_txt.active .on {display:block;}


@media screen and (max-width:768px){
	.location_cont {max-width:100%;}
	.location, .location_cont > div {height:50px;}
	.location_cont .depth01 > a {min-width:150px; font-size:15px;}
	.location_cont .depth01 > a, .location_cont .home > a {line-height:50px; padding:0 15px;}
	.location_cont .home > a {width:50px;}

	.location_cont .depth02 {top:50px;}

	.location_cont .sp_comm {right:15px; top:18px;}

	.location_cont .depth02 li a {padding:10px 15px}
}

@media screen and (max-width:480px){
	.location_cont .depth01 {width:49.8%}
	.location_cont .depth01 > a {font-size:14px; max-width:100%;}
	.location_cont .home > a {display:none}
}


@media screen and (max-width:1220px){
	/*영상 풀버전*/
	.video-container {margin: 0; padding-bottom: 57%;  max-width: 100%;  height: 0;  position: relative; overflow: hidden;} 
	.video-container iframe, 
	.video-container object,
	.video-container embed { margin: 0;  padding: 0;    width: 100%;   height: 100%; position: absolute; top: 0;  left:0;}
}



/* --------------------------------------------------탑으로 영역-------------------------------------------------- */
.gotop {position:fixed; bottom:80px; right:-100px; transition:all 0.3s; z-index:20}
.scroll_doc .gotop {right:40px;}

.gotop a {display:block; width:44px; height:44px; line-height:44px; text-align:center; background:#e8e8e8; border-radius:15px}

.mob_qBox {display:none}

@media screen and (max-width:1220px){
	.scroll_doc .gotop {right:20px;}
	.mob_qBox {display:block}
	.mob_qBox a {margin-bottom:5px;}
	.mob_qBox a img {height:20px;}

	.gotop a {width:40px; height:40px; line-height:40px;}
}

@media screen and (max-width:768px){
	.gotop {bottom:30px}
	.scroll_doc .gotop {right:5px;}
	.mob_qBox a img {height:18px;}

	.gotop a {width:37px; height:37px; line-height:37px;}
}


/* --------------------------------------------------후원로고 영역-------------------------------------------------- */
.host_logoBox {background:#ededed; padding:35px 0 20px;}
.host_logo_cont {position:relative; max-width:1200px; margin:0 auto; color:#21224d; overflow:hidden}

.host_logo_cont > div {display:inline-block; margin-bottom:10px;}
.host_logo_cont > div .tlt {margin-right:30px; font-size:18px;}
.host_logo_cont > div li {display:inline-block; margin-right:50px;}
.host_logo_cont > div li:last-child {margin-right:0}
.host_logo_cont > div .tlt, .host_logo_cont > div ul {display:inline-block}

/*.host_logo_cont .host_logo_l {margin-right:90px}*/


@media screen and (max-width:1220px){
	.host_logo_cont {max-width:94%}
	.host_logo_cont > div .tlt {margin-right:20px; font-size:16px;}
	.host_logo_cont > div li {margin-right:40px;}
	/*.host_logo_cont .host_logo_l {margin-right:70px}*/
	.host_logo_cont img {height:40px;}
}

@media screen and (max-width:1024px){
	.host_logo_cont > div li {margin-right:30px;}
	/*.host_logo_cont .host_logo_l {margin-right:50px}*/
	.host_logo_cont img {height:35px;}
}

@media screen and (max-width:768px){
	.host_logoBox {padding:20px 0 10px;}
	.host_logo_cont > div .tlt {margin-right:10px; font-size:14px;}
	.host_logo_cont > div li {margin-right:20px;}
	/*.host_logo_cont .host_logo_l {margin-right:30px}*/
	.host_logo_cont img {height:25px;}
}

@media screen and (max-width:480px){
	.host_logoBox {padding:15px 0 5px}
	.host_logo_cont > div .tlt {margin-right:5px; font-size:13px;}
	.host_logo_cont > div li {margin-right:5px;}
	/*.host_logo_cont .host_logo_l {margin-right:18px}*/
	.host_logo_cont img {height:22px;}
}

/* --------------------------------------------------푸터 영역-------------------------------------------------- */
#footer_wrap {background:#15161d; padding:30px 0 60px;}
#footer_wrap .ft_cont {position:relative; max-width:1200px; margin:0 auto; color:#b3b3b3; font-size:14px;}
#footer_wrap .ft_cont a {color:#b3b3b3;}
#footer_wrap .login {color:#15161d !important}

@media screen and (max-width:1220px){
	#footer_wrap .ft_cont {max-width:94%; line-height:1.5em;}
}

@media screen and (max-width:768px){
	#footer_wrap .ft_cont {font-size:12px}
}