@charset "utf-8";

/* 스크롤 막기 */
.ofHidden{overflow:hidden !important;}

/* 화살표 CSS */
.arrow{position:relative;}
.arrow:before,
.arrow:after{content:''; display:block; position:absolute; width:1px; height:50%; right:45%; background:#fff;}
.arrow:before{transform:skew(135deg, 0deg);  top:45%;} 
.arrow:after{transform:skew(-135deg, 0deg);  top:0; }

.backImg > img{display:none !important;}

header{width:100%; height:auto; position:fixed; top:0; left:0; display:block; background:#fff; z-index:999; box-sizing:border-box; border-bottom: 1px solid rgba(0,0,0,.15); -webkit-transition:all .3s ease; transition: all .3s ease;}

/* -- PC Header -- */
header .pcHeader{max-width:1400px; height:80px; display:block; margin:0 auto; text-align:center;}
header .pcHeader .container{width:100%; height:100%; display:flex; align-items:center;}
	/* 로고 */
	header .pcHeader .homeLogo{display:flex; align-items:center; width:243px; height:auto; font-size:0;}
	/* 메뉴 */
	header .pcHeader .menu{flex:auto; display:flex; align-items:center; height:100%; padding: 0 99px;}
	header .pcHeader .menu > li{width:33.33%;}
	header .pcHeader .menu > li > a{font-size:19px; font-weight:600; color:#555555; letter-spacing:-1px; height:100%;}
	/* 공유하기 */
	header .pcHeader .share{display:flex; align-items:center; width:auto; height:33px; padding-left:135px;}
	header .pcHeader .share > li{width:33px; height:100%; display:block;margin-left:3px;}
	header .pcHeader .share > li > a{display:flex; align-items:center; width:100%; height:100%; border-radius:100%; background:#c6c6c6; font-size:0;}
	header .pcHeader .share > li > a > i{display:block; height:20px; background:url('../../images/ke/controls.png') no-repeat; text-align:center; margin:0 auto;}
	header .pcHeader .share > li.fb > a > i{width:11px; background-position: 0 0;}
	header .pcHeader .share > li.tw > a > i{width:17px; background-position: -15px 0;}
	header .pcHeader .share > li.url > a > i{width:20px; background-position: -36px 0;}
		/* ^ 마우스 오버 */
		header .pcHeader .share > li.fb:hover > a{background:#435e99;}
		header .pcHeader .share > li.tw:hover > a{background:#27a9e0;}
		header .pcHeader .share > li.url:hover > a{background:#797979;}


/* -- Mobile Header -- */
header .moHeader{display:none;}
header .moHeader > .container{display:flex; align-items:center; width:100%; background:#fff; padding:10px;}
header .moHeader li{display:flex; align-items:center; }
header .moHeader li > a{display:flex; align-items:center; font-size:0; width:auto; height:auto; }
	/* 로고 */
	header .moHeader .homeLogo{flex:auto;}
	header .moHeader .homeLogo > a > img{height:40px;}
	/* 버튼 */
	header .moHeader .homeBtn{display:flex; align-items:center; font-size:0;}
	header .moHeader .homeBtn > a.share{padding:6px 13px;}
	header .moHeader .homeBtn > a.menu{padding:7px 10px;}
	/* 전체메뉴 버튼 */
	header .moHeader .homeBtn .menu > i{width:25px; height:auto;}
	header .moHeader .homeBtn .menu > i:before,
	header .moHeader .homeBtn .menu > i:after{content:''; height:1px; display:block; background:#656565; -webkit-transition:all .3s ease; transition: all .3s ease;}
	header .moHeader .homeBtn .menu > i:before{width:100%;}
	header .moHeader .homeBtn .menu > i:after{width:50%;}
	header .moHeader .homeBtn .menu > i > b{width:75%; display:block; height:1px; background:#6a82d4; margin:6px 0; text-align:left; -webkit-transition:all 1s ease; transition: all 1s ease;}

	/* - 닫기 버튼 */
	header .moHeader .homeBtn .menuClose > i{width:25px; height:25px; position:relative; display:block; text-align:center; margin:0 auto;}
	header .moHeader .homeBtn .menuClose > i:before,
	header .moHeader .homeBtn .menuClose > i:after{ position:absolute; width:100%; top:50%; left:0;}
	header .moHeader .homeBtn .menuClose > i:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);}
	header .moHeader .homeBtn .menuClose > i:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
	header .moHeader .homeBtn .menuClose > i:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
	header .moHeader .homeBtn .menuClose > i > b{width:0; -webkit-transition:all .1s ease; transition: all .1s ease;}


/* -- menu list -- */
header .menuList{display:none; position:absolute; left:0; top:80px; width:100%; height:auto; background:#f9f9f9; border-bottom:3px solid #ddd;}
header .menuList .container{max-width:1400px; width:100%; height:100%; text-align:center; margin:0 auto; display:flex;}
header .menuList .container:before,
header .menuList .container:after{content:''; width:243px; display:block;}
header .menuList .mobileMenu{display:none;}
header .menuList .subMenu{flex:auto; padding:0 99px; display:flex; align-items:flex-start; }
header .menuList .subMenu > li{width:33.33%; height:100%; padding:20px 0; border-left:1px solid #ddd;}
header .menuList .subMenu > li:last-child{border-right:1px solid #ddd;}
	/* - 1 Depth */
	header .menuList .titMenu{display:none;}
	/* - 2 Depth */
	header .menuList .sub{display:flex; align-items:flex-start; flex-direction:column;}
	header .menuList .sub li{width:100%; display:block; margin:10px 0; padding:0 30px;}
	header .menuList .sub a{width:100%; display:flex; align-items:flex-start; text-align:left; letter-spacing:0; font-size:13px; line-height:1;}
	header .menuList .sub a > i{display:block; width:40px; color:#888; font-weight:300; flex:none;}
	header .menuList .sub a > span{display:block; color:#555;}
		/* ^ 마우스 오버 */
		header .menuList .sub a:hover > span{text-decoration:underline;}

/* -- 공유하기 (모바일) -- */
.sharePopupWrap{position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:999;}
.sharePopup{display:flex; align-items:center; width:100%; height:100%; background:rgba(0,0,0,.75);}
.sharePopup .container{ display:block; margin:0 auto; text-align:center; width:auto; height:auto; position:relative;}
.sharePopup ul{ display:block; margin:0 auto; text-align:center; width:auto; height:auto; padding:30px 50px 20px 50px; background:#fff;}
	/* 텍스트 */
	.sharePopup .txt{display:flex; align-items:center; flex-direction:column;}
	.sharePopup .txt h1{ font-weight:400; color:#444; font-size:21px; letter-spacing:-1px; line-height:1; margin-bottom:20px;}
	.sharePopup .txt h3{ font-weight:400; color:#444; font-size:14px; letter-spacing:-1px; margin-bottom:30px;}
	.sharePopup .share{display:flex; align-items:center; flex-wrap:wrap; margin:0 auto; text-align:center; width:124px;}
	.sharePopup .share a{width:57px; height:57px; display:block; font-size:0; margin-bottom:10px;}
	.sharePopup .share a.fb,
	.sharePopup .share a.kt{margin-right:10px;}
	/* - 닫기 버튼 */
	.popupClose{position:absolute; top:0; right:0; padding:15px;}
	.popupClose > i{width:20px; height:20px; position:relative; display:block; text-align:center; margin:0 auto;}
	.popupClose > i:before,
	.popupClose > i:after{ content:''; height:1px; display:block; background:#b8b8b8; position:absolute; width:100%; top:50%; left:0;}
	.popupClose > i:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);}
	.popupClose > i:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
	.popupClose > i:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}


/* -- footer -- */
footer{width:100%; height:auto; display:block; background:#45464b; padding:30px 0;}
footer .container{max-width:1400px; width:100%; height:100%; text-align:center; margin:0 auto; }
.footerBtn{display:flex; align-items:center;}
.footerBtn > li{display:flex; align-items:center;}
.footerBtn > li:first-child{flex:auto; text-align:left; font-size:0;}
.footerBtn > li > a{display:flex; align-items:center; height:100%; width:auto;}
.footerBtn > li:last-child > a{margin:0 auto; padding:8px 18px; background:#323438; color:#fff; border-radius:15px; font-size:15px; line-height:1; letter-spacing:-1px;}
.footerBtn > li:last-child > a:before{content:''; display:block; margin-right:6px; width:17px; height:17px; background:url('../../images/ke/controls.png') -58px 0 / auto no-repeat;}
	/* ^ 마우스 오버 */
	.footerBtn > li:last-child > a:hover{background:#5c76d0;}
footer p{font-size:14px; color:#fff; opacity:.45; line-height:1.6; text-align:left; margin-top:30px;}

/* 페이지 맨 위로  */
.scrollTop{width:auto; height:auto; display:none; margin:0 auto; position:fixed; bottom:0; right:10px; z-index:98;}
.scrollTop .container{width:40px; height:40px; text-align:right; margin:0 auto; display:block }

.scrollTop .container > b{width:20px; height:20px; display:block; padding:10px; background:#4e5e9c; float:right;}
.scrollTop .container > b > i{width:20px; height:20px; display:block; transform:rotate(-90deg);-webkit-transform:rotate(-90deg);}


/* 하단 푸터 텍스트 */
.footerTxt{text-align:center; margin:0 auto; padding:20px 0; font-size:12px; color:#fff; background:#54565d; display:flex; align-items:center; line-height:1; }
.footerTxt .container{width:auto; height:auto; text-align:center; margin:0 auto; display:block;}
.footerTxt .container > span{margin: 0 5px 0 0;}
.footerTxt .container > span:last-child{margin:0;}

/* ==== 1400px 이하 일때 (뷰포트 1400px 기준) ==== */ @media only screen and (max-width:1400px) {
	header .menuList .container,
	footer .container{max-width:90%; }

	/* -- PC Header -- */
	header .pcHeader .homeLogo,
	header .menuList .container:before,
	header .menuList .container:after{width:17.357vw; /* width:243px; */}
	header .pcHeader .menu,
	header .menuList .subMenu{padding:0 7.071vw; /* padding:0 99px; */}

	header .pcHeader{max-width:90%; height:5.714vw; /* height:80px; */}
	header .pcHeader .homeLogo > img{width:100%;}
	/* 공유하기 */
	header .pcHeader .share{height:2.357vw; padding-left:9.643vw; /* height:33px; padding-left:135px; */}
	header .pcHeader .share > li{width:2.357vw; /* width:33px; */}
	header .pcHeader .menu > li > a{font-size:1.143vw; /* font-size:16px; */ }
	/* -- menu list -- */
	header .menuList{top:5.714vw; /* top:80px; */}
	header .menuList .subMenu > li{padding:1.429vw 0; /* padding:20px 0; */}
		/* - 2 Depth */
		header .menuList .sub li{margin:0.714vw 0; padding:0 2.143vw; /* margin:10px 0; padding:0 30px; */}
		header .menuList .sub a{line-height:1.4; font-size:0.929vw; /* font-size:13px; */ }
		header .menuList .sub a > i{width:2.857vw; /* width:40px; */}

	/* -- footer -- */
	footer{padding:2.143vw 0; /* padding:30px 0; */}
	.footerBtn > li > a > img{width:13.357vw; /* width:187px; */}
	.footerBtn > li:last-child > a{padding:0.571vw 1.286vw; font-size:1.071vw; /* padding:8px 18px; font-size:15px; */}
	footer p{font-size:1vw; margin-top:2.143vw; /* font-size:14px; margin-top:30px; */}
}



/* ==== 1023px 이하 일때 ==== */ @media only screen and (max-width:1023px) {
*{outline:none;}
header .pcHeader {display:none;}
header .moHeader {display:block;}
header .menuList .container{max-width:100%; }

	/* -- menu list -- */
	header .menuList{background:#fff; border:none;}
	header .menuList .container{display:flex; align-items:flex-start;}
	header .menuList .container:before,
	header .menuList .container:after{display:none;}
	header .menuList .mobileMenu{display:flex; align-items:flex-start; flex-direction:column; height:100%; background:#4e5672; width:120px; padding:10px 0;}
		/* - 1 Depth */
		header .menuList .titMenu{display:block; width:100%; height:100%; flex:auto;}
		header .menuList .titMenu > li{width:100%; }
		header .menuList .titMenu > li.active{background:#fff;}
		header .menuList .titMenu > li.active > a{color:#555555;}
		header .menuList .titMenu > li > a{position:relative; display:flex; align-items:center; font-weight:500; color:#fff; line-height:1; width:auto; text-align:left; margin:0; padding:18px 10px; font-size:14px; }
		header .menuList .titMenu > li > a:after{content:''; position:absolute; bottom:0; width:auto; height:1px; background:rgba(255,255,255,.15); left:10px; right:10px; }
		header .menuList .titMenu > li > a > i{flex:auto; }
		header .menuList .titMenu > li > a > i > b{width:4px; height:8px; float:right; display:block; opacity:.4;}
		header .menuList .titMenu > li.active > a > i > b{opacity:1;}
		header .menuList .titMenu > li.active > a > i > b:before,
		header .menuList .titMenu > li.active > a > i > b:after{background:#ff7a04;}
		/* - 2 Depth */
		header .menuList .subMenu{padding:0; position:relative; height:100%;}
		header .menuList .subMenu > li{padding:0; border:none; width:100%; height:100%; display:none;}
		header .menuList .subMenu > li.active{display:block; overflow-y: auto;}
		header .menuList .sub{padding:21px 30px;}
		header .menuList .sub a{line-height:1; font-size:14px; padding:7px 0;}
		header .menuList .sub a > i{width:40px;}
		header .menuList .sub li{padding:0; margin:0 0 13px 0;}

	header .menuList .mobileMenu > a{display:flex; align-items:center; flex-direction:column; flex:none; width:100%;}
	header .menuList .mobileMenu > a > span{color:#fff; line-height:1.4; letter-spacing:-1px;}
	header .menuList .mobileMenu > a > .txt-01{font-size:12px;}
	header .menuList .mobileMenu > a > .txt-02{font-size:11px; opacity:.75;}
	header .menuList .mobileMenu > a > .img{margin:7px 0 3px 0; display:flex;}
	header .menuList .mobileMenu > a > .img > img{height:125px;}

footer{padding:0;}
footer .container{max-width:100%; padding:10px;}
.footerBtn > li > a > img{width:125px;}
.footerBtn > li:last-child > a{padding:7px 14px; font-size:12px; line-height:17px;}
.footerBtn > li:last-child > a:hover{background:#323438;}
.footerBtn > li:last-child > a:before{width:13px; height:13px; margin-right:5px; background:url('../../images/ke/moDownload.jpg') center center / contain no-repeat;}
footer p{font-size:11px; margin-top:14px;}
.footerTxt{flex-direction:column;}
.footerTxt .container > span{display:block; margin: 0 0 5px 0;}
}

/* ==== 770px 이하 일때 ==== */ @media only screen and (max-width:770px) {
header .moHeader .homeLogo > a > img{height:40px;}
header .moHeader > .container{padding:10px;}
header .moHeader .homeLogo > a > img{ height:40px;}
header .moHeader .homeBtn .menu > i{ width:25px; height:15px;}
header .moHeader .homeBtn .menu > i > b{ margin:6px 0;}
header .moHeader .homeBtn > a > img{ width:19px;}
}
/* ==== 767px 이하 일때 (뷰포트 375px 기준) ==== */ @media only screen and (max-width:767px) {

header .moHeader > .container{padding:2.667vw; /* padding:10px; */}
header .moHeader .homeLogo > a > img{height:10.667vw; /* height:40px; */}
header .moHeader .homeBtn .menu > i{width:6.667vw; /* width:25px; height:15px; */}
header .moHeader .homeBtn .menu > i > b{margin:1.600vw 0; /* margin:6px 0; */}
header .moHeader .homeBtn > a > img{width:5.067vw; /* width:19px; */}


header .menuList .mobileMenu{width:32vw; padding:2.667vw 0; /* width:120px; padding:10px 0; */}
header .menuList .titMenu > li > a{padding:4.800vw 2.667vw; font-size:3.733vw; /* padding:18px 10px; font-size:14px; */}
		header .menuList .titMenu > li > a:after{left:2.667vw; right:2.667vw; /* left:10px; right:10px; */ }
		header .menuList .titMenu > li > a > i > b{width:1.067vw; height:2.133vw; /* width:4px; height:8px; */}
		header .menuList .sub{padding:5.600vw; /* padding:21px 30px; */}
		header .menuList .sub a{font-size:3.733vw; padding:1.867vw 0; /* font-size:14px; padding:7px 0; */}
		header .menuList .sub a > i{width:10.667vw; /* width:40px; */}
		header .menuList .sub li{margin:0 0 3.467vw 0; /* margin:0 0 13px 0; */}

	header .menuList .mobileMenu > a > .txt-01{font-size:3.200vw; /* font-size:12px; */}
	header .menuList .mobileMenu > a > .txt-02{font-size:2.933vw; /* font-size:11px; */}
	header .menuList .mobileMenu > a > .img{margin:1.867vw 0 0.800vw 0; /* margin:7px 0 3px 0; */}
	header .menuList .mobileMenu > a > .img > img{height:33.333vw; /* height:125px; */}

/* -- 공유하기 (모바일) -- */
.sharePopup ul{ padding:8vw 13.333vw 5.333vw 13.333vw; /* padding:30px 50px 20px 50px; */}
	/* 텍스트 */
	.sharePopup .txt h1{ font-size:5.600vw; margin-bottom:5.333vw; /* font-size:21px; margin-bottom:20px; */}
	.sharePopup .txt h3{ font-size:3.733vw; margin-bottom:8vw; /* font-size:14px; margin-bottom:30px; */}
	.sharePopup .share{width:33.067vw; /* width:124px; */}
	.sharePopup .share a{width:15.200vw; height:15.200vw; margin-bottom:2.667vw; /* width:57px; height:57px; margin-bottom:10px; */}
	.sharePopup .share a > img{width:15.200vw; height:15.200vw; /* width:57px; height:57px; */}
	.sharePopup .share a.fb,
	.sharePopup .share a.kt{margin-right:2.667vw; /* margin-right:10px; */}
	/* - 닫기 버튼 */
	.popupClose{padding:4vw; /* padding:15px; */}
	.popupClose > i{width:5.333vw; height:5.333vw; /* width:20px; height:20px; */}

footer .container{padding:2.667vw; /* padding:10px; */}
.footerBtn > li > a > img{width:33.333vw; /*  width:125px; */}
.footerBtn > li:last-child > a{padding:1.867vw 3.733vw; font-size:3.200vw; /* padding:7px 14px; font-size:12px; line-height:17px; */ }
.footerBtn > li:last-child > a:before{width:3.467vw; height:3.467vw; margin-right:1.333vw; /* width:13px; height:13px; margin-right:5px; */}
footer p{font-size:2.933vw; margin-top:3.733vw; /* font-size:11px; margin-top:14px; */}


}