@charset "utf-8";

#header { width: 100%;min-width:320px; background-color: #fff; border-bottom: 1px solid #ddd; position: relative;  z-index: 998;}
#header.stiky {background-color: #fff; border-bottom: 1px solid #cecece; position: fixed;}
#header #logo {position: absolute; top: 0; left: 15px; display: inline-block; line-height: 90px; vertical-align: middle;}
#header #logo a img:nth-child(2) {display: none;}
#header #gnb {	max-width: 1600px;margin: 0 auto;  display: flex; justify-content:flex-end;align-items:center;}
/* gnb - depth1 */
#header #gnb .dep1_wrap {display: inline-block;}
#header #gnb .dep1_wrap .dep1_con  {float: left; position: relative;}
#header #gnb .dep1_wrap .dep1_con .dep1 {display: block; height: 90px; line-height: 90px; padding: 0 10px; position: relative;  font-size: 18px; font-weight: 500;  color: #000; transition:0.25s;}
#header #gnb .dep1_wrap .dep1_con:hover .dep1,
#header #gnb .dep1_wrap .dep1_con .dep1:focus,
#header #gnb .dep1_wrap .dep1_con.active .dep1 {color: #306cb7;}
/* gnb - depth2 */
#header #gnb .dep2_wrap {display: none; position: absolute; top: 100%; left: 50%; width: 150px; margin-left: -75px; height: auto; padding: 15px 0; text-align:center; border: 1px solid #ddd; border-top: 2px solid #603de3; background-color: #fff; font-size: 0; z-index: 99; }
#header #gnb .dep2_wrap .dep2_con { padding: 0 15px; vertical-align: top;}
#header #gnb .dep2_wrap .dep2_con .dep2 {display: inline-block; line-height: 20px; margin-bottom: 5px; font-size: 14px; 	 color: #666; font-weight: 400; border-bottom: 1px solid transparent; transition:0.5s; }
#header #gnb .dep2_wrap .dep2_con:hover .dep2,
#header #gnb .dep2_wrap .dep2_con .dep2:focus,
#header #gnb .dep2_wrap .dep2_con.active .dep2 { color: #603de3; border-color: #603de3;}

#header .utils { position: static; margin-left: 15px;}
#header .utils a {display: inline-block; padding:0 15px; height: 34px; line-height: 35px; color: #fff;   background-position: 20px 50%; background-color: #00b0f0; background-repeat: no-repeat;  border-radius:100px; font-size: 14px; font-weight: 500; text-align: center; position: relative; transition:.25s;}
#header .utils a.member {background-color: #603de3; padding-left: 10px; background-image: url('../images/common/login_w.png');}
#header .utils a:hover {box-shadow:0 0 15px rgba(0,0,0,.2)}

/* 검색 */
#hd_sch_wrap {margin-left: 10px;		}
#hd_sch_wrap .input_box {position: relative;}
#hd_sch_wrap .input_box p {position: relative;}
#hd_sch_wrap input[type=text]{width: 360px; height: 45px; line-height: 45px;background-color: #fcfcfc; border: 1px solid #efeeee; border-radius:50px; font-size: 16px; color: #666; padding: 0 50px 0 25px;}
#hd_sch_wrap .btn_sch {padding: 0; background-color: transparent; border: none; position: absolute; top: 0; right: 15px; height: 45px;}
#hd_sch_wrap .m_btn {display: none;}

/* 사이트맵 버튼 */
.open_sitemap{position: absolute; top:26px; right: 15px; }
.open_sitemap.active  {position: fixed; top: 15px; right: 15px; margin-right: 0; z-index: 999; }
.open_sitemap a{position:relative;display:block;width: 34px; height: 34px; transition:.25s;}
.open_sitemap a span{position:absolute;left:50%;top:50%;display:block;width:100%;height:2px;background-color:#000;margin:-1.5px 0 0 -17px;text-indent:-9999px; border-radius:10px;}
.open_sitemap span,
.open_sitemap span:before,
.open_sitemap span:after{content:"";left:0;position:absolute;display:block;width:100%;height:100%;background-color:#000;border-radius:10px;transition:.25s;-webkit-transition:.25s;}
.open_sitemap span:before{top:-8px;}
.open_sitemap span:after{bottom:-8px;}

.open_sitemap .active span{background-color:transparent;}
.open_sitemap .active span:before{background-color: #000;top:0;transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
.open_sitemap .active span:after{background-color: #000;bottom:0;transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}

/* 사이트맵 */
.sitemap {display: block; max-width: 400px; width: 100%; height: 100% !important; background-color: #fff; position: fixed; top: 0; right: -300%;z-index: 99; box-shadow:-1px 0px 5px rgba(0,0,0,.3); overflow-x:hidden;overflow-y:auto;}
.sitemap .sitemap_utils { position: absolute; top: 33px; left: 25px;}
.sitemap .sitemap_utils a {display: inline-block; padding: 10px 30px;  background-color: #00b0f0; background-position: 30px 50%; background-repeat: no-repeat;  border-radius:100px; font-size: 14px; color: #fff; font-weight: 500; position: relative; transition:.25s;}
.sitemap .sitemap_utils a.member {background-color: #603de3; padding: 10px 30px 10px 50px;  background-image: url('../images/common/login_w.png'); }
.sitemap .sitemap_utils a:hover {background-color: #000;}

.sitemap .dep1_wrap {width: 100%; padding:80px 20px 20px; }
.sitemap .dep1_wrap .dep1_con { padding: 0 5px;}
.sitemap .dep1_wrap .dep1_con .dep1 {display: block; height: 45px; padding-left: 10px; line-height: 45px;color: #333; border-bottom: 1px solid #dedede; font-size: 17px; font-weight: 600; position: relative; transition:0.25s;}
.sitemap .dep1_wrap .dep1_con:first-child .dep1 {border-top: 1px solid #dedede;}
.sitemap .dep1_wrap .dep1_con:hover .dep1,
.sitemap .dep1_wrap .dep1_con.active .dep1 {color: #306cb7;}
.sitemap .dep1_wrap .dep1_con .dep1_more:after,
.sitemap .dep1_wrap .dep1_con .dep1_more:before {content:''; display: block; position: absolute;}
.sitemap .dep1_wrap .dep1_con .dep1_more:after {width: 15px; height: 1px; background-color: #000 ; top: 15px; right: 0; margin-top: 7px;}
.sitemap .dep1_wrap .dep1_con .dep1_more:before {width: 1px; height: 15px; background-color: #000 ; top: 15px; right: 0; margin-right: 7px; transition:.25s}
.sitemap .dep1_wrap .dep1_con.active .dep1_more:before { transform:rotate(-90deg);}

.sitemap .dep2_wrap { display: none; padding: 10px 0; border-bottom: 1px solid #dedede;}
.sitemap .dep1_con.active .dep2_wrap {display: block;}
.sitemap .dep2_wrap .dep2_con { }
.sitemap .dep2_wrap .dep2_con .dep2 { display: block; font-size: 16px;padding:7px 0 7px 15px;  transition:0.5s; -webkit-transition:0.5s; position: relative; }
.sitemap .dep2_wrap .dep2_con:hover .dep2,
.sitemap .dep2_wrap .dep2_con.active .dep2 {color: #603de3; }
.sitemap .dep2_wrap .dep2_con .dep2_more:after,
.sitemap .dep2_wrap .dep2_con .dep2_more:before {content:''; display: block; position: absolute;}
.sitemap .dep2_wrap .dep2_con .dep2_more:after {width: 15px; height: 1px; background-color: #000 ; top: 5px; right: 0; margin-top: 7px;}
.sitemap .dep2_wrap .dep2_con .dep2_more:before {width: 1px; height: 15px; background-color: #000 ; top: 5px; right: 0; margin-right: 7px; transition:.25s}
.sitemap .dep2_wrap .dep2_con.active .dep2_more:before { transform:rotate(-90deg);}




/* footer */
#footer { border-top: 1px solid #cecece;}
#footer .f_menu {max-width:1200px; margin: 0 auto; font-size: 0;}
#footer .f_menu a {display: inline-block;  padding:25px 18px; line-height: 1; color: #000; transition:0.25s;  position: relative;}
#footer .f_menu a:first-child {padding-left: 0;}
#footer .f_menu a:hover,
#footer .f_menu a:focus {color: #603de3;} 
#footer .f_info_wrap { padding: 50px 0; background-color: #212121; color: #666;} 
#footer .f_info_wrap .f_info { display: flex; justify-content:space-between; align-items:center; padding-bottom: 30px; margin-bottom: 25px; border-bottom: 1px solid #545454;} 
#footer .f_info_wrap .f_info .f_logo {text-align: center;} 
#footer .f_info_wrap .address {}
#footer .f_info_wrap .address b {font-weight: normal; color: #fff;}

#footer #top_trigger{display:none;position:fixed;right: 50%; margin-right: -940px;bottom:50px;z-index:98; cursor: pointer;  transition:.5s;}
#footer #top_trigger:hover {transform:translateY(-10px);}


#body_wrap {min-height:600px;}
/* 반응형 */

@media all and (max-width:1880px){
	.open_sitemap {right: 15px;}
	#footer #top_trigger { right: 15px; margin-right: 0; }
}

@media all and (max-width:1320px){
	#header .utils {right: 65px;}
	#header #gnb {max-width:100%; padding-right: 50px;	}
}
@media all and (max-width:1200px){
	#header #logo {position: static; line-height: 70px; width:170px;}
	#header .utils,
	#header #gnb .dep1_wrap {display: none;}
	#header #gnb {padding: 0;}
	#hd_sch_wrap {position: absolute; top: 12px; right: 50px;}
	.open_sitemap {top: 15px;}
	.open_sitemap a span {width: 30px; height: 3px; margin: -2.5px 0 0 -15px;}

	
	#footer #top_trigger { width: 50px;}
}
@media all and (max-width:1024px){
	#footer .f_info_wrap { text-align: center;}
	#footer .f_info_wrap .f_info {display: block; }
	#footer .f_info_wrap .address {margin-bottom: 25px;}
	#footer .f_menu {text-align: center; padding:18px 0;}
	#footer .f_menu a {padding:  8px 10px 5px;}
	#footer .f_menu a:after {top: 30%; height: 55%;}
	#footer .f_info_wrap .f_info .f_logo .img img {width: 280px;}
}
@media all and (max-width:768px){
	
	
	#header .hd_sch_wrap {display: none;top: 16px; right: 50px;}
	#hd_sch_wrap {}
	#hd_sch_wrap .input_box {display: none;position: fixed; top: 0; left: 0; width: 100%; height: 70px; margin: 0;background-color: #fff; z-index: 999;}
	#hd_sch_wrap .input_box .input_box_in { position: absolute; top: 48.57%; left: 15px; width: calc(100% - 15px); transform:translateY(-50%);}
	#hd_sch_wrap .input_box p {width: calc(100% - 50px);}
	#hd_sch_wrap input[type=text] {width: 100%;}
	#hd_sch_wrap .m_btn {display: block;}
	#hd_sch_wrap .m_btn_sch { transform:translateY(10px); cursor: pointer;}
	#hd_sch_wrap .m_btn_close {position: absolute !important; width: auto !important; top: 15px; right: 15px; cursor: pointer;}
	.open_sitemap,
	.open_sitemap.active {top: 0; right: 0;}
	.open_sitemap a {width: 55px; height: 70px;}
	.sitemap .sitemap_utils {top: 20px;}
	.sitemap .dep1_wrap {padding: 70px 20px 20px;}
	
	#footer .f_menu {}
	#footer .f_bot .f_logo {width: 240px; padding: 0;}
	#footer #top_trigger {width: 40px; bottom: 30px;}
}
@media all and (max-width:486px){
	#footer .f_menu {}
	#footer .f_menu a {font-size: 12px;}
	#footer .f_menu a:nth-child(4):after {display: none;}
	#footer .f_bot .f_logo {width: 180px;}
	#footer .address,
	#footer .copyright  {font-size: 12px;}
	#footer #top_trigger { bottom: 15px; right: 10px;}
}