@charset "utf-8";


/* layout */
html, body {  word-break:keep-all !important;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; overflow-x:clip;}
#wrap { position:relative; width:100%; min-width:320px; font-size:1.6rem;}
.inner {    width:1400px;   position:relative;  margin-left:auto;   margin-right:auto;}
.s-inner {  width:1430px;   position:relative;  margin-left:auto;   margin-right:auto;}


/* 타블렛 가로 */
@media all and (max-width:1399px) { 
.inner {width:94%;}
.s-inner {width:94%;}
}
@media all and (max-width:1199px) { 
}


/* header */
#header{position: relative; z-index: 100; top: 0; left: 0; width: 100%; height: 90px; background-color: #fff; transition: .2s ease-in-out; 
    border-bottom: 0px solid rgba(0,0,0,0.1);}
#header.on{background-color: #fff; border-bottom: 1px solid rgba(0,0,0,0.1);}
#header .inner{height: 100%; width: 1920px; display: flex; align-items: center; justify-content: space-between; max-width: 100%;}
#header .inner #logo{position: absolute; margin-left:50px; top:15px; border:0px solid red;}
#header .inner #logo a{width: 231px; height:55px;  background:url(/html/images/tlogo.jpg)no-repeat center center / 100%; display: block;}




#header #gnb_pc{width: 100%;}
#header #gnb_pc > ul{display: flex; justify-content: center; }
#header #gnb_pc > ul > li{position: relative;}
#header #gnb_pc > ul > li > div{}
#header #gnb_pc > ul > li > div > span{}
#header #gnb_pc > ul > li > div > span > a{display: block; padding: 0 50px; line-height: 90px; color: #212121; 
font-size: 2rem; transition: .2s ease-in-out; text-align: center; font-weight: 600;}
#header.on #gnb_pc > ul > li > div > span > a{color: #212121}
#header #gnb_pc > ul > li:hover > div > span > a{color: #0087b4}
#header #gnb_pc > ul > li > ul{display: none; position: absolute; left: 50%; transform: translateX(-50%); width: 220px;
text-align: center; background-color: #0087b4; padding: 20px 0; box-shadow:5px 5px 5px rgba(0,0,0,0.12);
border-top-left-radius:25px; border-bottom-right-radius:25px;} 
#header #gnb_pc > ul > li > ul > li{transform: skew(0.1deg)}
#header #gnb_pc > ul > li > ul > li > a{display: block; padding: 10px 0;  color: rgba(255,255,255,0.9); font-size: 1.6rem; font-weight: 500; word-break: keep-all;}
#header #gnb_pc > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under; color: #fff; font-weight: bold;}

@media all and (max-width:1280px){
    #header .inner #logo a{width: 168px;}
}

#Loginmenu{position:absolute; right:90px; top:35px;  height:18px; cursor:pointer; z-index:101;}
#Loginmenu ul{width:100%; }
#Loginmenu ul li{display:inline-block;}
#Loginmenu ul li a{color:#000;}

#menuToggle { position:absolute; right:40px; top:35px; width:24px; height:18px; cursor:pointer; z-index:101; }
#menuToggle.on{position: fixed; display: block; z-index: 1002}
#menuToggle span {display:block; position:absolute; right:0; height:2px; background:#212121; transition:0.5s all; -webkit-transition:0.5s all;}
.on #menuToggle span {background-color: #212121;}
#menuToggle span.t {top:0; width:100%}
#menuToggle span.m {top:50%; margin-top:-1px; width:100%}
#menuToggle span.b {bottom:0; width:100%;}

#menuToggle.on span.t{width: 100%; background-color:#212121; transform: translateY(10px) rotate(45deg);}
#menuToggle.on span.m{width: 0;}
#menuToggle.on span.b{width: 100%; background-color:#212121; transform: translateY(-6px) rotate(-45deg);}

@media all and (max-width:1800px){
    #header .inner #logo{margin-left: 3%;}
}
@media all and (max-width:1600px){
}
@media all and (max-width:1280px){
    #header{height: 70px;}
    #header .inner{width: 100%;}
    #header .inner #logo{margin-left: 3%;}
    #header .inner #logo a img{max-width: 170px;}
    #header #gnb_pc{display: none;}
    #header #menuToggle{right: 3%; top:28px;}
}
@media all and (max-width:1024px){
}
@media all and (max-width:768px){
/*  #header .inner #logo{margin-left: 0; position: absolute; left: 50%; transform: translateX(-50%);}*/
}
@media all and (max-width:480px){
    
}



.menu_bg{width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);position: fixed; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: 999; transition: .4s ease;}
.menu_bg.on{visibility: visible; opacity: 1;}

@media all and (min-width:1025px){
    #header #gnb_mo{display: none; background-color: #fff; width: 100%; position: fixed; top: 0; left: 0; z-index: 1001; padding: 70px 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: 25%; 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: 2rem; 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; display: block !important}
    #header #gnb_mo > ul > li > ul > li{}
    #header #gnb_mo > ul > li > ul > li > a{ font-size: 1.7rem; 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;}
#Loginmenu_mo{display:none;}

}


@media all and (max-width:1024px){
    #header #gnb_mo { position:fixed; height:100%; z-index:1001; right:0;  top:0; padding:60px 0px 2%; background:#fff; 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 { color:#000 !important; font-weight:700;  padding:1.6rem 1.6rem; 
	cursor:pointer; background:url('/html/images/arrow_mo.jpg')right;  border-bottom: 1px solid rgba(0,0,0,0.075); font-size: 1.8rem;  }
    #header #gnb_mo .gnb_dp1 > div > span a { color:#212121; }
    #header #gnb_mo .gnb_dp1 > div.on > span a { color:#002d65; }

    #header #gnb_mo .smenu {display:none;  background-color: #fff; background-color: rgba(9,71,158,0.9);}
    #header #gnb_mo .smenu > li{border-bottom: 1px solid rgba(255,255,255,0.1);}
    #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:#fff; font-size: 1.5rem; }
    #header #gnb_mo .smenu>li>a:hover,
 #header #gnb_mo .smenu>li>span:hover{ color:#07c2f8;}
#Loginmenu{display:none;}
#Loginmenu_mo{display:block;}
#Loginmenu_mo ul{width:95%; margin:0 auto; padding-bottom:10%; }
#Loginmenu_mo ul li{display:inline-block; float:left; width:48%; margin:1%;  border:1px solid #efefef; text-align:Center;  }
#Loginmenu_mo ul li a{color:#fff;display:block; background:#0066cc; padding:10px 0px;  border:2px solid #0066cc;}
#Loginmenu_mo ul li a:hover{color:#005ebc; font-weight:700; display:block; background:#f1f2f4; border:2px solid #0066cc;}

}


/* footer */
#footer {width:100%; clear:both; position:relative; margin:0 auto;  padding: 0px;  }
#footer .inner{ position:relative;  text-align:Center; padding:25px 0px; width:100%; border-radius:0px; background:#fff;
bordeR-top:1px solid #cccccc; bordeR-bottom:1px solid #cccccc; 
}
#footer .inner a{color:rgba(0,0,0,0.8);font-size:16px; }
#footer .inner a:hover{color:#0085b2; font-weight:700;}
#footer .inner span{font-size:11px; padding:0px 15px;}
#footer .copy{width:100%; padding:25px 0px; text-align:Center; font-size:15px; line-height:27px;}
#footer .copy span{ padding:0px 15px;}
#footer .copyinfo{display:inline-block;font-size:17px;  padding:10px 30px; border-radius:20px; background:rgba(0,0,0,0.1); color:#000; }

 .exhonme{ position:absolute; right:0px; top:0px; border: 0px solid red; border-top-right-radius:25px; border-bottom-right-radius:25px;
 background:#0066ff; color:#fff; padding:23px 20px;font-weight:600;
 }
 .exhonme a{ color:#fff;  }

@media all and (max-width:1024px){
#footer .copy span{ padding:0px;}
}


@media all and (max-width:980px) { 

#footer .inner a{font-size:14px;}
#footer .inner span{font-size:11px; padding:0px 5px;}
}


@media all and (max-width:768px){
    #footer{padding: 40px 0 55px;}
    #footer .inner .f_logo{text-align: center; margin-bottom: 15px;}
    #footer .inner .flex{flex-direction: column;}
    #footer .inner .flex .f_menu{order: -1; display: flex; justify-content: center;}
    #footer .inner .flex .f_menu li{margin: 0 10px;}
    #footer .inner .flex .info{text-align: center; margin-top: 15px;}
    #footer .inner .flex .info span{font-size: 1.5rem;}

#footer .copyinfo{width:80%; margin:0 auto; display:inline-block; font-size:14px;  padding:5px; border-radius:20px; background:rgba(0,0,0,0.1); color:#000; }
#footer .copy{font-size:14px; line-height:25px; }



}