@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1450px;	position:relative;	margin-left:auto;	margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1470px) {	
.inner {width:94%;}
.s-inner {width:94%;}
}

/* header */
#header{width: 100%;  z-index: 100; height: 160px; position: relative;}

#header .h-top{height: 100px; display: flex; justify-content: space-between; max-width: 1400px; margin: 0 auto;}
#header .hd_bx {line-height:100px}

#header #logo {height: 100px;}
#header #logo img { vertical-align:middle;}

#header #top-sns {position: relative; z-index: 999;}
#header #top-sns a {vertical-align:middle; display:inline-block; margin:0 5px; width:40px; height:31px;}
#header #top-sns a img{width: 100%;}

#header #login_pc a{font-size: 1em; margin-left: 20px; position: relative; color: #212121;}
#header #login_pc a:first-child::after{width: 1px; height: 10px; background-color: #ddd; content: ''; top: 3px; right: -13px; position: absolute; cursor: auto;}


#header #gnb_pc{position: absolute;  left:0; width: 100%;  z-index: 101;  border-top: 1px solid #eaeaea; line-height: 52px;}
#header #gnb_pc .gnb_dp1_wrap{height: 65px;}
#header #gnb_pc > ul{display: flex; align-items: center; justify-content:space-between;margin: 0 auto; width: 1400px;}
#header #gnb_pc > ul > li{position: relative;}
#header #gnb_pc > ul > li > div{}
#header #gnb_pc > ul > li > div span {color: #000;  font-size: 18px; font-weight: 400; line-height: 1em;}
#header #gnb_pc > ul > li > ul{display: none; position:absolute; background-color: #2384c7; width: 180px; left: 50%; transform: translateX(-50%);}
#header #gnb_pc > ul > li > ul > li{text-align: center;}
#header #gnb_pc > ul > li > ul > li > a{font-size: 16px; color: #fff; line-height: 38px; border-bottom: 1px solid rgba(255,255,255,0.1); height: 100%; display: block; width: 100%;}
#header #gnb_pc > ul > li > ul > li:last-child > a{border-bottom: 0;}


#header.scroll {height:70px; }
#header.scroll .hd_bx { line-height:70px;  }


#menuToggle { position:absolute; right:3%; top:29px; width:30px; height:22px; cursor:pointer; z-index:102; display: none;}
#menuToggle.on{position: fixed; top: 38px; display: block; z-index: 1002; right: 38px;}
#menuToggle span {display:block; position:absolute; left:0; height:2px; background:#000; transition:0.5s all; -webkit-transition:0.5s all;}
#menuToggle span.t {top:0; width:100%}
#menuToggle span.m {top:50%; margin-top:-1px; width:50%}
#menuToggle span.b {bottom:0; width:75%;}

#menuToggle.on span.t{width: 100%; background-color:#fff; transform: translateY(10px) rotate(45deg);}
#menuToggle.on span.m{width: 0;}
#menuToggle.on span.b{width: 100%; background-color:#fff; transform: translateY(-10px) rotate(-45deg);}

#header.scroll #menuToggle,
#header.menu_on #menuToggle  {top:24px; }
#header.scroll #menuToggle span,
#header.menu_on #menuToggle span  { background-color:#212121; }

#header.scroll #menuToggle.on span,
#header.menu_on #menuToggle.on span  { background-color:#000; }

@media all and (max-width:1599px){
	#header #gnb_pc > ul > li > div span { margin: 0 20px; }
	#header #gnb_pc > ul > li > ul > li > a{}
    #header #login{margin: 0 20px; }
	#header #top-sns{margin: 0 20px; }
}
@media all and (max-width:1420px){
    #header{ height: 80px;}
	#header #gnb_mo { position:fixed; height:100%; z-index:1001; right:0;  top:0; padding:70px 0px 2%; background:#2384c7; transition: .2s ease; color:#FFF; width:100%; max-width:320px; box-sizing:border-box;-webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0); -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0); transform: translateX(100%) rotate(0);}

	#header #gnb_mo.on{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }

	#header #gnb_mo .gnb_dp1 div {  padding:1rem 1rem; cursor:pointer; border-bottom: 1px solid rgba(255,255,255,0.1); font-size:16px; transform: skew(0.1deg)}
	#header #gnb_mo .gnb_dp1 > div > span { color:#FFF; font-weight:500 }

	#header #gnb_mo .smenu {display:none;  background-color: #fff; background-color: #f3f3f3;}
	#header #gnb_mo .smenu > li{border-bottom: 1px solid #e3e3e3;}
	#header #gnb_mo .smenu > li:last-child{border-bottom: 0;}
	#header #gnb_mo .smenu>li br{display:none;}
	#header #gnb_mo .smenu>li>a,
	#header #gnb_mo .smenu>li>span {display:block; padding: 0.5rem 0.5rem 0.5rem 1.5rem; color:#666; border-bottom: 1px solid rgba(255,255,255,0.075); font-size: 15px; transform: skew(0.1deg)}
	#header #gnb_mo .smenu>li>a:hover,
	#header #gnb_mo .smenu>li>span:hover{ color:#212121;}
    #header #login_mo{color:#FFF; font-weight:500;padding:0 1rem; cursor:pointer; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 16px; transform: skew(0.1deg); width: 100%; text-align: center;}
    #header #login_mo a{color: #fff; position: relative;font-size: 16px; margin-left: 20px;}
    #header #login_mo a:first-child::after{width: 1px; height: 10px; background-color: #ddd; content: ''; top: 3px; right: -13px; position: absolute; cursor: auto;}
}
@media all and (max-width:1420px){
	#header .hd_bx {line-height:75px}
	#header #logo {position: absolute; top:0; left:0; width:100%; text-align:center;   }
    #header #gnb_pc{display: none;}
    #header #login_pc{display: none;}

    #menuToggle{display: block;}
}
@media all and (min-width:1421px){
	#header #gnb_mo{display: none; background-color: #fff; width: 100%; position: fixed; top: 0; left: 0; z-index: 1001; padding: 120px 0;}
	#header #gnb_mo.on{display: block;}
	#header #gnb_mo > ul{max-width: 1600px; margin: 0 auto; display: flex;}
	#header #gnb_mo > ul > li{width: 20%; border-right: 1px solid #eee; padding: 0 30px;}
	#header #gnb_mo > ul > li:last-child{border-right: 0px;}
	#header #gnb_mo > ul > li > div{font-size: 18px; font-weight: 500; text-align: center;}
	#header #gnb_mo > ul > li > div > span{}
	#header #gnb_mo > ul > li > div > span > a{ color: #212121;}
	#header #gnb_mo > ul > li:hover > div > span > a{color: #0f3a5a;}
	#header #gnb_mo > ul > li > ul{text-align: center; margin-top: 15px;}
	#header #gnb_mo > ul > li > ul > li{}
	#header #gnb_mo > ul > li > ul > li > a{  color: #666; font-weight: 300; display: block; padding: 5px 0;}
	#header #gnb_mo > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
}
@media all and (max-width:1320px){
	#header{ height: 80px;}
	#header #gnb_mo { position:fixed; height:100%; z-index:1001; right:0;  top:0; padding:70px 0px 2%; background:#2384c7; transition: .2s ease;
					color:#FFF; width:100%; max-width:320px; box-sizing:border-box;
					-webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0); -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);
				   transform: translateX(100%) rotate(0);}

	#header #gnb_mo.on{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }

	#header #gnb_mo .gnb_dp1 div { cursor:pointer; border-bottom: 1px solid rgba(255,255,255,0.1);  transform: skew(0.1deg)}
	#header #gnb_mo .gnb_dp1 > div > span { color:#FFF; font-weight:500 }
	#header #gnb_mo .gnb_dp1 > div.on > span { color:#a98964; }

	#header #gnb_mo .smenu {display:none;  background-color: #fff; background-color: #f3f3f3;}
	#header #gnb_mo .smenu > li{border-bottom: 1px solid #e3e3e3;}
	#header #gnb_mo .smenu > li:last-child{border-bottom: 0;}
	#header #gnb_mo .smenu>li br{display:none;}
	#header #gnb_mo .smenu>li>a,
	#header #gnb_mo .smenu>li>span {display:block; padding:1rem 1rem 1rem 3rem; color:#666; border-bottom: 1px solid rgba(255,255,255,0.075); transform: skew(0.1deg)}
	#header #gnb_mo .smenu>li>a:hover,
	#header #gnb_mo .smenu>li>span:hover{ color:#212121;}
    #header #login_mo{color:#FFF; font-weight:500;padding:0 2rem; cursor:pointer; border-bottom: 1px solid rgba(255,255,255,0.1); transform: skew(0.1deg); width: 100%; text-align: center;}
    #header #login_mo a{color: #fff; position: relative;  margin-left: 20px;}
    #header #login_mo a:first-child::after{width: 1px; height: 10px; background-color: #ddd; content: ''; top: 3px; right: -13px; position: absolute; cursor: auto;}
}
@media all and (max-width:1024px){
    #header #logo a{height: 80px;}
    #header #logo a img{height: 60%;}
}

@media all and (max-width:670px){
    #header #logo a img{height: 50%;}
    #header #top-sns a {vertical-align:middle; display:inline-block; margin:0 2px; width:28px;}
}
@media all and (max-width:500px){
    #header #logo a{height: 80px;}
    #header #logo a img{height: 42%;}
    #header #top-sns{margin: 5px;}
}
@media all and (max-width:400px){
    #header #logo a img{height: 38%;}
    #header #top-sns a {width:25px;margin:0 1px;}
}


/*footer*/

#footer .f-link { overflow: hidden; background:#fff; line-height: 90px; text-align: center; font-family: 'S-CoreDream'; border-top: 1px solid #eee;}
#footer .f-link li { display: inline-block; *zoom:1; *display: inline; width: 250px; max-width: 24%; position: relative;  }
#footer .f-link li::after { content:''; width: 1px; height: 20px; background: #d7d7d7; position: absolute; right: 0; top: 50%; margin-top: -10px; }
#footer .f-link li:first-child::before { content:''; width: 1px; height: 20px; background: #d7d7d7; position: absolute; left: 0; top: 50%; margin-top: -10px; }
#footer .f-link li a { color:#393939; font-size: 1em; font-weight: 500;  }

#footer .f-info { overflow: hidden; background:#2e2e2e; text-align: center; padding: 2% 0; }
#footer .f-info ul { margin: 2em 0 1em; color:#a1a1a1; }
#footer .f-info h1 img { max-width: 30%; }
#footer .f-info ul li { display: inline-block; *zoom:1; *display: inline; margin: 0 10px; font-size: 0.93em; line-height: 1.8em; }
#footer .f-info p.copy { color:#636363; font-size: 0.75em; }


@media all and (max-width: 1580px){
#footer .f-link { line-height: 5em; }
}

@media all and (max-width: 767px){
#footer .f-info { padding: 4% 2%; }
#footer .f-info h1 img { max-width: 35%; }
#footer .f-info ul { margin: 0.5em 0 0.5em; }
#footer .f-info ul li  { margin: 0 0.5em; }
#footer .f-link li a {font-size: 0.8em;}
#footer .f-link {line-height: 3em;}
#footer .f-info ul li{font-size: 0.7em;}
#footer .f-info p.copy{font-size: 0.6em;}
}

@media all and (max-width: 480px){
   #footer .f-link li::after { height: 12px; margin-top: -6px; }
   #footer .f-link li:first-child::before,
   #footer .f-link li:last-child::after { display: none;  }
   #footer .f-info h1 img { max-width: 30%; }
   #footer .f-link li a {font-size: 0.5em;}
   #footer .f-info ul li{font-size: 0.5em;}
#footer .f-info p.copy{font-size: 0.4em;}
}
