@charset "utf-8";

body {font-family:'Noto Sans KR', sans-serif; font-size:1em;}
h1, h2, h3, h4, h5, h6 {font-family:'Noto Sans KR', sans-serif;}

/*===================== Board & Gallery Paging =====================*/
.tbl_head01 {margin-bottom:45px;}
.pg_wrap {width:100%; text-align:center; margin:50px 0;}
.pg_wrap .pg_page, .pg_wrap .pg_current { font-size:15px; width:38px; height:38px; line-height:38px; border:0; font-weight:400; background-color:#fff; border-radius:0; margin:0 2px;}
.pg_wrap .pg_page {box-sizing:border-box; border:1px solid #bbb; color:#666;}
.pg_wrap .pg_current {background-color:#161c2c; border:1px solid #161c2c;}
.frm_input {box-shadow:none; border-radius:0;}

	@media screen and (max-width:799px){
		.pg_wrap {margin:30px 0;}
		.pg_wrap .pg_page, .pg_wrap .pg_current {font-size:80%; width:28px; height:28px; line-height:28px;}
	}

a.btn, .btn {font-size:15px; color:#333; font-weight:300; border:1px solid #e2e2e2; width:120px; height:31px; line-height:29px; border-radius:30px;}
a.btn:hover, .btn:hover {border:1px solid #161c2c; color:#161c2c;}
a.btn_b01, .btn_b01 {}
a.btn_admin, .btn_admin {border:1px solid #161c2c; background:#161c2c; color:#fff !important;}


.container {position:relative; width:1180px; margin:0 auto;}

	@media screen and (max-width:1199px){
		.container {width:100%; padding:0 2%;}
	}

	@media screen and (max-width:799px){
		.container {padding:0 4%;}
	}

/******** header ********/ 
.sec-header{position:absolute; top:0; left:0; width:100%; height:132px; z-index:998; padding-top:28px; background:#fff; box-shadow:1px 3px 6px rgb(0 0 0 / 8%); transition:all ease .5s;}
.sec-header.fixed {position:fixed;}
.sec-header.on{height:370px; /*box-shadow:0 0 200px 50px rgba(0,0,0,0.5);*/}  
.sub .sec-header.on{border-bottom:0;}
.sec-header.on:before{content:''; width:100%; height:1px; background:#e8e8e8; position:absolute; top:132px; left:0; z-index:9;} 
/*.sec-header.on #gnb{width:850px;}*/
.sec-header.on #gnb > ul > li > ul{opacity:1; display:block;}

.sub .sec-header{border-bottom:1px solid #e8e8e8}  
.sec-header.hd-down{position:fixed;} 
.sec-header.hd-down #nav-icon{z-index:9;} 
.sec-header.hd-down .gnb-btn{top:28px;}

.logo{position:relative; display:inline-block; margin-top:15px;}
.logo img {max-width:100%;}

	@media (max-width:1024px) {
		.logo {width:100px; top:5px;}
	}


.lang{position:absolute; top:9px; right:25px; display:flex; flex-direction:row; justify-content:space-between;}
/*
.lang span,
.lang a{display:block; margin-left:6px; line-height:1; position:relative; width:35px; height:23px; font-size:0; background-image:url('../img/common/lang_icon.png'); background-repeat:no-repeat;  border:1px solid #eee;}
.lang span.kor,
.lang a.kor {background-position:-1px 0;}
.lang span.eng,
.lang a.eng {background-position:-41px 0;}
.lang span.jpn,
.lang a.jpn {background-position:-81px 0;}

.hd-lang{position:absolute; top:43px; right:200px; display:flex; flex-direction:row; justify-content:space-between;}
.hd-lang span,
.hd-lang a{ display:block; margin-left:6px; line-height:1; position:relative; width:35px; height:23px; font-size:0; background-image:url('../img/common/lang_icon.png'); background-repeat:no-repeat; border:1px solid #eee; }
.hd-lang span.kor,
.hd-lang a.kor {background-position:-1px 0;}
.hd-lang span.eng,
.hd-lang a.eng {background-position:-41px 0;}
.hd-lang span.jpn,
.hd-lang a.jpn {background-position:-81px 0;}
*/
.lang {font-size:15px; font-weight:500;}
.lang .eng:before, .lang .jpn:before {content:'·'; margin:0 6px; color:#a8a8a8;}
.lang span {color:#555;}
.lang a {color:#a8a8a8; transition:all 0.3s;}
.lang a:hover {color:#555;}

	@media (max-width:1024px) {
		.lang {display:none;}
	}

.gnb-btn{display:none; position:absolute; right:100px; top:22.5px; }
.gnb-btn button{ width:80px; height:80px; background:#161c2c; border:0;}  
.gnb-btn:hover #nav-icon span:nth-child(1){width:50%;}
.gnb-btn:hover #nav-icon span:nth-child(6){width:0;}
.gnb-btn:hover #nav-icon.open span:nth-child(6){width:50%;}

#nav-icon {
	width:24px; height:24px; position:relative; margin:0 auto; 
	-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
	/* -webkit-transition:.5s ease-in-out; -moz-transition:.5s ease-in-out; -o-transition:.5s ease-in-out; transition:.5s ease-in-out; */
	cursor:pointer; }

#nav-icon span {
	display:block; position:absolute; height:2px; width:50%; background:#fff; opacity:1;
	-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg);
	-webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out;
}

#nav-icon span:nth-child(even) { left:50%; }
#nav-icon span:nth-child(odd) { left:0px; }
#nav-icon span:nth-child(1){ width:0; right:50%; left:auto;}
#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) { top:4px; }
#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) { top:12px; }
#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) { top:20px; } 

#nav-icon.open{width:50px; height:50px;}
#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) { -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) { -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); }
#nav-icon.open span:nth-child(1) { left:5px; top:9px; width:50%; right:auto; }
#nav-icon.open span:nth-child(2) { left:calc(50% - 3px); top:9px; }
#nav-icon.open span:nth-child(3) { left:-50%; opacity:0; }
#nav-icon.open span:nth-child(4) { left:100%; opacity:0; }
#nav-icon.open span:nth-child(5) { left:5px; top:26px; }
#nav-icon.open span:nth-child(6) { left:calc(50% - 3px); top:26px; }  
#nav-icon.open span{background:#444;}

.gnb-banner{background:url('http://kscf.co.kr/images/gnb-bg.jpg') center center / cover; width:400px; height:100%;   display:flex; align-items:center; padding:0 30px;} 
.gnb-family{ }
.gnb-family a{display:block; width:90%; padding:20px 0; margin:0 auto 20px;  color:#fff;     font-size:18px; background:url('http://kscf.co.kr/images/btn/link-icon-w.png') no-repeat center right 0; position:relative;}
.gnb-family a:after{content:''; width:0; height:2px; background:#fff; position:absolute; right:0; bottom:0; transition:all ease .5s;}
.gnb-family a:hover:after{width:100%; right:auto; left:0;}
/*
.gnb-family a:hover{background-color:#00bdc7; border-color:#00bdc7; transition:all ease .3s;}
*/

#gnb{position:relative; float:right; width:calc(100% - 300px); top:42px; background:none;}
#gnb > ul {display:flex; flex-direction:row; justify-content:space-between; width:100%;} 
#gnb > ul > li{float:left; width:20%; position:relative; text-transform:uppercase;} 
#gnb > ul > li > a{display:block; position:relative; font-size:21px; color:#111; font-weight:500; text-align:center; padding:15px 0 17px;}
#gnb > ul > li a span {position:relative; display:inline-block;}

#gnb > ul > li > ul{position:relative; top:0; padding:18px 5px; width:100%; transition:all ease .3s; opacity:0; display:none;}
#gnb > ul > li > ul > li {text-transform:capitalize;}
#gnb > ul > li > ul > li > a{display:block; font-size:16px; text-align:center; padding:8px 0;}  
/*#gnb > ul > li > ul > li > a:hover{color:#00bdc7;}*/

.gnb-all{position:fixed; top:0; right:-100%;  z-index:3; height:100%; width:100%; background:#fff;  overflow:hidden;   display:flex;  align-items:center;     transition:all ease .6s;} 
.gnb-all.open{  right:0;} 
.gnb-all > ul { width:90%; max-width:1200px; margin:0 auto; padding-top:80px;}
.gnb-all > ul > li{ padding:30px 0 30px 350px;  width:100%; position:relative; border-bottom:1px solid #e8e8e8;} 
.gnb-all > ul > li:last-child{border-bottom:0;}
.gnb-all > ul > li > h3{ color:#00bdc7; margin:0 0 10px; font-size:26px; position:absolute; left:0; top:27px; text-transform:uppercase;}  
.gnb-all > ul > li > ul{display:flex;}
.gnb-all > ul > li > ul > li > a{display:block; padding:5px 0; font-size:18px; color:#444; margin-right:50px; position:relative;}
.gnb-all > ul > li > ul > li > a:after{content:''; width:0; height:1px; background:#333; position:absolute; right:0; bottom:-5%; z-index:-1; transition:all ease .5s;}
.gnb-all > ul > li > ul > li > a:hover{ color:#000;}
.gnb-all > ul > li > ul > li > a:hover:after{width:100%; right:auto; left:0;}
.scr-none{overflow-y:hidden;}
.gnb-all .hd-lang{display:none;}
.gnb-all .logo{    position:absolute; z-index:4; left:50%; margin-left:-110.5px; top:50px;} 
.gnb-award{  position:absolute;  left:0;  top:100px; display:flex; justify-content:space-between;  width:500px;   height:260px; align-items:center; padding:20px 40px 20px 80px; z-index:2;}
.gnb-award p{padding:0 20px; font-family:'MaruBuri','Noto Sans KR',sans-serif;    font-size:22px; margin-top:-80px; line-height:1.2; opacity:0; transition:all ease .3s; color:#333;}
.gnb-award a{display:block; margin:10px 0 0;  color:#333;}
.gnb-award .swiper-container{width:133px;  opacity:0;  transition:all ease .6s; border:4px solid #ddd}
.gnb-award img{vertical-align:top; }
.gnb-award .swiper-button-next, 
.gnb-award .swiper-button-prev{background:none;  height:30px; width:30px; right:20px; left:auto; border:1px solid #ddd; text-align:center; line-height:30px; background:#fff; display:flex;  align-items:center; justify-content:center;}
.gnb-award .swiper-button-next{margin-top:60px;}
.gnb-award .swiper-button-prev{margin-bottom:0; margin-top:31px;} 
.gnb-award .swiper-button-next i, 
.gnb-award .swiper-button-prev i{font-size:12px;}
.sec-header.on .gnb-award p{opacity:1; }
.sec-header.on .swiper-container{opacity:1; }


	@media screen and (max-width:1700px){
		.gnb-award{display:none;}
	}

	@media screen and (max-width:1199px){
		#gnb {width:calc(100% - 200px);}
		#gnb > ul > li > a {font-size:20px;}
		#gnb > ul > li > ul > li > a {font-size:16px;}
	}

	@media screen and (max-width:1024px){
		/* header */
		.sec-header{padding:0; height:80px;}
		.gnb-btn{display:block; top:0; right:0;}
		.hd-lang{right:150px;}
		.gnb-banner{display:block; width:100%; height:auto; padding:0; background:#000;}
		.gnb-sns{display:block; overflow:hidden; width:90%; margin:0 auto;}
		.gnb-sns a{float:left; width:33.333%; padding:20px 0; color:#fff;}

		.sub-visual{margin:0 auto; width:90%;}
		#gnb{display:none;}
		.gnb-all{ max-width:400px; overflow-y:auto; display:block;}  
		.gnb-all.open{box-shadow:0 0 200px 0 rgba(0,0,0,0.5);}
		.hd-lang{display:block; font-size:15px; font-weight:500;}
		.hd-lang .eng:before, .hd-lang .jpn:before {content:'·'; margin:0 6px;}
		.hd-lang a {color:#a8a8a8;}
		.hd-lang span {color:#555;}
		.hd-lang a:active {color:#555;}
		.gnb-all .hd-lang{right:auto; margin-top:24px; margin-left:7%; display:flex;}
		.sec-header.hd-down .gnb-btn{top:0; right:0;}
		.gnb-all > ul > li{padding:0;}
		.gnb-all > ul > li:last-child{border-bottom:1px solid #e8e8e8;}
		.gnb-all > ul > li > h3{position:relative; top:auto; left:auto; padding:20px 10px; color:#333; font-size:16px; margin:0; cursor:pointer;}
		.gnb-all > ul > li:hover > h3 {color:#161c2c;}
		.gnb-all > ul > li > h3 > span.bul {display:block;position:absolute;top:20px;right:20px;background:#888;transition:all .5s;width:2px;height:20px;margin:0;}
		.gnb-all > ul > li:hover > h3 > span.bul {background:#161c2c; transition:all .5s;width:2px;}
		.gnb-all > ul > li > h3 > span.bul:after {content:"";display:block;position:absolute;top:0;width:20px;height:2px;margin:9px 0 0 -9px;background:#888;}
		.gnb-all > ul > li:hover > h3 > span.bul:after  {background:#161c2c;}
		.gnb-all > ul > li > h3.on {background:#161c2c; color:#fff;}
		.gnb-all > ul > li > h3.on > span.bul {background:#fff; transform:translateY(0) rotate(-450deg);}
		.gnb-all > ul > li > h3.on > span.bul:after {opacity:0;}
		.gnb-all > ul > li > ul{display:none; margin:10px;}
		.gnb-all > ul > li > ul > li > a{font-size:15px; margin-right:0; padding:8px 0;}
		.gnb-all > ul > li > ul > li > a:after {display:none;}
		.gnb-all .logo{  display:none;}

		
		#nav-icon.open{width:35px; height:35px;}
		#nav-icon.open span:nth-child(1){left:3px; top:11px;}
		#nav-icon.open span:nth-child(2){left:15px; top:11px;}
		#nav-icon.open span:nth-child(5),
		#nav-icon.open span:nth-child(6){top:23px;}
		#nav-icon.open span:nth-child(5){left:3px;}
		#nav-icon.open span:nth-child(6){left:15px;}
	}

	@media screen and (max-width:799px){ 
		/* header */
		.sec-header{height:70px;}
		
		.logo {width:85px;}
		.gnb-btn button{width:70px; height:70px;}
		.gnb-btn{}

		#top_btn{right:0; bottom:20px;}
		#top_btn p{font-size:10px;}
		.sec-centent{padding-top:70px}
	}
 
 
/************************ media size setting end ************************/


.contents {padding-top:132px;}
#sub {min-height:540px;}

	@media screen and (max-width:1024px){
		.contents {padding-top:80px;}
	}

	@media screen and (max-width:799px){
		.contents {padding-top:70px;}

		#sub {min-height:inherit;}
	}

#footer {clear:both; position:relative;}

#footer .sitemap {background:#f2f2f2; padding:32px 0 75px;}
#footer .sitemap .copy_logo {width:170px; display:inline-block; vertical-align:top; margin-top:25px;}
#footer .sitemap .sitemap_menu {width:calc(100% - 300px); display:inline-block; vertical-align:top; margin-top:38px;}
#footer .sitemap .sitemap_menu .menu_wrap {float:left; width:20%; padding:0 5px;}
#footer .sitemap .sitemap_menu .menu_wrap .tit {display:block; overflow:hidden; font-size:23px; font-weight:500; text-transform:uppercase; margin-bottom:10px;}
#footer .sitemap .sitemap_menu .menu_wrap ul li {font-size:17px; line-height:160%; padding-top:12px; letter-spacing:-0.02em; font-weight:300; text-transform:capitalize;}

	@media screen and (max-width:1199px) {
		#footer .sitemap .copy_logo {width:150px;}
		#footer .sitemap .sitemap_menu  {width:calc(100% - 280px);}
		#footer .sitemap .sitemap_menu .menu_wrap .tit {font-size:120%;}
		#footer .sitemap .sitemap_menu .menu_wrap ul li {font-size:95%; padding-top:6px;}
	}

	@media screen and (max-width:1024px) {
		#footer .sitemap {display:none;}
	}


#footer .sitemap .copy_lang{float:right; display:inline-block; width:120px; margin-top:45px; font-size:13px; font-weight:500;} 
#footer .sitemap .copy_lang .eng:before, #footer .sitemap .copy_lang .jpn:before {content:'·'; margin:0 3px; color:#a8a8a8;}
#footer .sitemap .copy_lang span {color:#555; text-transform:uppercase;}
#footer .sitemap .copy_lang a {color:#a8a8a8; text-transform:uppercase;}
#footer .sitemap .copy_lang a:hover {color:#555;}

#footer .copy_info {position:relative; background:#e5e5e5; padding:43px 0 47px; line-height:160%; font-size:16px; font-weight:300; word-break:keep-all;}
#footer .copy_info ul li {line-height:25px;}
#footer .copy_info ul.info_ul_1 li {display:inline-block; margin-right:30px;}
#footer .copy_info p {margin-top:20px; font-size:14px;}

	@media screen and (max-width:1199px) {
		#footer .copy_info {font-size:90%; line-height:140%;}
		#footer .copy_info p {font-size:90%;}
	}

	@media screen and (max-width:999px) {
		#footer .copy_info {padding:33px 0 37px;}
	}

	@media screen and (max-width:799px) {
		#footer .copy_info {font-size:85%;}
		#footer .copy_info ul li {line-height:140%;}
		#footer .copy_info ul.info_ul_1 li {margin-right:15px;}
		#footer .copy_info ul.info_ul_1 li:first-child {display:block; margin-right:0;}
		#footer .copy_info p {font-size:85%;}
	}

#footer .copy_info .admin {color:#fff; margin-left:10px;}


#top_button {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:50px;text-align:center;font-size:15px;z-index:8000;background-color:#000;background-image:url('../img/common/top.png');background-repeat:no-repeat;background-position:50% 50%;color:#000;display:none;border-radius:50%;opacity:0.5; cursor:pointer; border:0;}
#top_button:hover{color:#fff;opacity:1;background-color:#161c2c;}
#top_button span{font-size:0;}

	@media screen and (max-width:799px) {
		#top_button {bottom:10px; right:10px; width:45px;height:45px;}
	}