
.lnb_right{position: absolute; width: 27%; max-width: 380px; display: flex; flex-wrap: wrap; right: 6rem; justify-content: space-between;}


/* 외국어 드롭다운*/
.dropBox{position: relative;}
.dropBox .dropbtn {background:none; width:100%; text-align:left; border:none; display:inline-block; height:auto; position:relative;  font-size:0.8em; font-weight:700; line-height:40px; padding: 0 50px 0 45px; border-radius: 500px; text-transform: uppercase; position: relative; z-index: 5;}
.dropBox .dropbtn:after,
.dropBox .dropbtn:before{ font-size: 1.2em; line-height:40px; position: absolute;}
.dropBox .dropbtnBg{background: var(--bgColor);}
.dropBox .dropbtn.dropbtnBg:before{content: '\ef5b'; font-weight: 900; }

.dropBox .dropbtn:after{font-family:var(--icon); content:'\e313'; right:15px; }
.dropBox .dropbtn:before{font-family: var(--icon);  content:'\e894'; position: absolute; left: 15px;  }


.dropBox .dropmenu {display: none; width:100%; position: absolute;  z-index: 5; border-width:0 1px 1px 1px; margin-top:-1px; border:0px;}
.dropBox .dropmenu a {display:block; color:inherit; font-size:0.75em !important; line-height:30px !Important; font-weight: 600;}
.dropBox .dropmenu.show {display:block;}

.dropBox .dropmenu ul{background:var(--main_color);  text-align: center; border-radius: 10px; overflow: hidden; }
.dropBox .dropmenu ul li{ cursor: pointer; color:#ffffff; text-align:center; line-height:32px;}
.dropBox .dropmenu ul li:hover a{background: var(--sub_color); color: #fff;}

.dropBox #dropdown2 ul{background: var(--bgColor); padding-top:20px; border-radius: 0 0 10px 10px;}
.dropBox #dropdown2 ul a{color: #000;}
.dropBox #dropdown2 ul li:hover a{background: var(--main_color); color: #fff;}

.dropBox #dropdown2.show{top:30px}

.btn_search{}
.btn_search a.ic_search{position: relative; width: 40px; height: 40px; text-indent: -9999px; display: flex; justify-content: center; align-items: center;}
.btn_search a.ic_search::before{font-family: var(--icon); text-indent: 0; font-size: 1.2em; content: '\e8b6'; font-weight: 900;}



@media all and (min-width:1280px) {	
    .mo{display:none}
	.hsec1 .container{display:flex; align-items:center; position:relative; margin:0 auto; padding: 0 2rem; max-width: var(--container);}

	/*header*/
	#header{ position:fixed; width:100%;z-index:10000;}
    .hsec1{background: #fff;}
    .hsec1 .container{position: relative;}
    .hsec1{height:9rem; transition:0.3s;}
	.hsec1 h1{position: relative;  max-width: 135px; } 
    .hsec1 h1 a{display:block}
	.hsec1 h1 .over{display:none}
    
    .lnb{}
	.lnb .close{display:none}
	.lnb ul{display:flex;  position:relative;z-index:10; max-width: 95%;}
	.lnb ul li{position:relative;width:18%;text-align:center}
	.lnb ul li > a{display:block;line-height:9rem; font-weight:bold; font-size:1em; padding:0 5rem; transition: all .5s;}
	.lnb ul li > a:hover{color:var(--main_color)}
	.lnb ul li > a::before{content: ''; width: 0; height: 3px; background: var(--main_color); position: absolute; bottom: 0; left: 50%; transition: all .5s; opacity: 0;}
	.lnb ul li > a:hover::before{width:100%; left:0; opacity: 1;}
	.lnb ul li:hover > a{color:var(--main_color)}
	.lnb ul li:hover .sub{background:var(--main_color)}
	.lnb ul li:hover .sub dd a {color:#fff}
    .lnb .sub{display:none;position:absolute;top:9rem;padding:2rem 0;width:100%;height:25rem; box-sizing: border-box;}
    .lnb .sub .dep_3{display: none;}
    .lnb .sub dl {}
	.lnb .sub dd > a{display:block;line-height:1.4;padding:1rem 1rem;font-size:0.85em; font-weight: 400;}
	.lnb .sub dd > a:hover{color:var(--main_color); font-weight: 600;}

    .btn_online{position: absolute; top: 3rem; right: 13rem; font-size: 0.85em;}
    .btn_online a{display: flex; gap:1rem; background: var(--sub_color); color:#fff; text-align: center; border-radius: 10rem; padding:.5rem 3rem; transition: .5s;}
    .btn_online a:hover{background: var(--main_color);}

	/* 3차메뉴 숨김 */
    .lnb .dep_3 dl { display:none; }

  
	.lnb_bg{display:none; position:absolute; left:0; width:100%; top:9rem; background:#fff; border-bottom:1px solid #ddd; height:25rem; z-index: 1;}

    .snb{background: #fff; border-radius: 10rem; padding:.5rem 2rem; display: flex; gap:2rem; align-items: center; position:absolute; top: 3.5rem; right:13rem; font-size:1.4rem }
    .snb h2{display: flex; gap:1.2rem}
    .snb h2 em{font-weight: bold;}
    .snb ul{display: flex; gap:1.5rem}
    .snb ul li a{display: block; font-weight: bold; }
    .snb_on a{color:var(--sub_color); position: relative; transition: .5s;}
    .snb_on a:hover{color:var(--main_color)}
    .snb_on a::before{content: ''; width: 100%; height: .4rem; background: var(--sub_color);  position: absolute; bottom: 0; left: 0;}

	/* scroll on */
	.scroll_on .hsec1{background: #fff;}
	.scroll_on .hsec1 h1 .out{display:none}
	.scroll_on .hsec1 h1 .over{display:block}
    .scroll_on .hsec1{background: #fff; border-bottom: 1px solid var(--bdColor);}
	.scroll_on .lnb li > a{color:#222}
    .scroll_on .dropbtn{color:#333}
    .white_dot ul li a span{background:#fff !important}

	.scroll_on2 .hsec1{background:#fff}
	.scroll_on2 .hsec1 h1 .out{display:none}
	.scroll_on2 .hsec1 h1 .over{display:block}
    .scroll_on2 .hsec1{background: #fff;}
	.scroll_on2 .lnb li > a{color:#222}
    .scroll_on2 .dropbtn{color:#333}
    .white_dot ul li a span{background:#fff !important}

    .scroll_on .hamburger-menu span,
    .scroll_on .hamburger-menu span::before,
    .scroll_on .hamburger-menu span::after{}
	
	/* lnb*/
	.lnb_on .hsec1{background:#fff}
	.lnb_on .hsec1 h1 .out{display:none}
	.lnb_on .hsec1 h1 .over{display:block}
    .lnb_on .hsec1{background:#fff}
	.lnb_on .lnb li > a{color:#222}
    
    .lnb_on .dropbtn{color:#333}
    .lnb_on .hamburger-menu span,
    .lnb_on .hamburger-menu span::before,
    .lnb_on .hamburger-menu span::after{background: #333 !important;}

    
    .header.drop {position: fixed !important; z-index:9; animation: dropHeader 0.5s;}
      
      @keyframes dropHeader {
        0% {
          top: -10rem;
        }
        100% {
          top: 0;
        }
      }

     

}

@media all and (min-width:1680px) {	
	.hsec1 h1{margin-right: 5rem;}
    .lnb ul li{width: 20%;}
}
/*mobile*/
@media all and (max-width:1279px) {
    .pc{display:none}
	
	/*header*/
	#header{position:fixed; left:0; top:0; width:100%; z-index:100; min-width: 320px; height: 50px; background:#fff}
	.hsec1{ }
	.hsec1 h1{text-align:left; max-width: 80px; position: absolute; left: 2.5rem; top: 1rem;} 
    .hsec1 h1 img{vertical-align:top}  
	.hsec1 h1 .out{display:none}
    .hsec1 h1 .over{display: block;}
    .lnb{position:fixed;width:70%;right:-80%;top:0;z-index:90;height:100%;background:#fff;transition:.3s;overflow:auto}
	
    .lnb.on {right:0;transition:.3s}
	.lnb .close{ width:5rem; height:5rem; padding:2rem; position: absolute; right: 0.5rem; top: 0rem; z-index: 10;}
    .lnb .close:before, .lnb .close:after {position: absolute; content:' ';height: 3rem;width: 2px;background-color:var(--dark); display: inline-block; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
    .lnb .close:before {transform: rotate(45deg);}
    .lnb .close:after {transform: rotate(-45deg);}
	
    .lnb ul{clear:both; padding:7rem 0 0 0; position: relative;}
    .lnb ul:before{content:'';  width: 80px; height: 31px; position: absolute; left: 2.5rem; top: 1rem; background: url(../images/common/logo.png) no-repeat center center ; background-size: 100%;}
	.lnb li{position:relative;height:auto}

	.lnb li > a{display:block; height:6.5rem; line-height:6.5rem; padding:0 2.5rem ; position: relative; font-weight: 500; ; border-bottom: 1px solid rgba(0,0,0,0.1);}
    .lnb li > a::before{font-family: var(--icon); content:'\e313'; font-size: 2.5rem; position: absolute; top:0; bottom: 0; width: 20px; height: 20px; margin: auto; right:2rem; line-height: 100%; transition: 0.2s; font-weight: normal;}

    .lnb li:last-child a:before{content:'\e7ef'; font-size: 2rem;}
    .lnb li.on > a{ color:var(--main_color); font-weight: 600;}
    .lnb li.on > a::before{transform: rotate(180deg); color: var(--main_color);}
	.lnb .sub{display:none;;height:auto}
	.lnb dl{padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.1);}
	.lnb dd > a{display:block;line-height:4.5rem;font-size:1.6rem;padding-left:3rem; font-weight: 600; }
    .lnb dd > a:hover{color:var(--main_color); font-weight: 600;}


    
	.body_bg.on{position:fixed;right:0;top:0;width:100%;height:100%;background:#000;opacity:0.6;z-index:80}

    .snb{display: flex; gap:1rem; align-items: center; position:absolute; top: 2rem; right:7rem; font-size:1.8rem }
    .snb h2{display: flex; gap:1.2rem}
    .snb h2 em{display: none;}
    .snb ul{display: flex; gap:1rem}
    .snb ul li a{display: block; font-weight: bold; }
    .snb_on a{color:var(--sub_color); position: relative; transition: .5s;}
    .snb_on a:hover{color:var(--main_color)}
    .snb_on a::before{content: ''; width: 100%; height: .4rem; background: var(--sub_color);  position: absolute; bottom: 0; left: 0;}

    .btn_online{position: absolute; top: 2rem; right: 7rem; font-size: 1.6rem;}
    .btn_online a{display: flex; gap:1rem; background: var(--sub_color); color:#fff; text-align: center; border-radius: 10rem; padding:.5rem 3rem; transition: .5s;}
    .btn_online a:hover{background: var(--main_color);}


    
    .hsec1 .lnb_open{position:absolute;right:2.5rem;top:1.1rem; width:3rem; height: 3rem;}
    .hsec1 .lnb_open .line{display: block; width: 100%; height: 3px; margin:4px 0; background:#333; transition: all 0.5s;}
    .mob_utill{display: flex !important; background: var(--main_color);}
    .mob_utill li{flex:1}
    .mob_utill li > a{color:#fff !important; padding:0 !important; text-align: center !important;}
    .mob_utill li > a::before{display: none !important;}

    /* scroll on */
	.scroll_on .hsec1{border-bottom:1px solid #ddd}
	.scroll_on .hsec1 h1 .out{display:none}
	.scroll_on .hsec1 h1 .over{display:block}
    .scroll_on .hsec1{background:#fff}

    .scroll_on .dropbtn{color:#333}
    .white_dot ul li a span{background:#fff !important}

    .scroll_on .hamburger-menu span,
    .scroll_on .hamburger-menu span::before,
    .scroll_on .hamburger-menu span::after{background: #333 !important;}
	
	/* lnb*/
	.lnb_on .hsec1{border-bottom:1px solid #ddd}
	.lnb_on .hsec1 h1 .out{display:none}
	.lnb_on .hsec1 h1 .over{display:block}
    .lnb_on .hsec1{background:#fff}
	.lnb_on .lnb li > a{color:#222}
    
    .lnb_on .dropbtn{color:#333}
    .lnb_on .hamburger-menu span,
    .lnb_on .hamburger-menu span::before,
    .lnb_on .hamburger-menu span::after{background: #333 !important;}

    
    .header.drop {position: fixed !important; z-index:9; animation: dropHeader 0.5s; border-bottom: 1px solid var(--bdColor);}
      
      @keyframes dropHeader {
        0% {
          top: -10rem;
        }
        100% {
          top: 0;
        }
      }

     
.lnb_right{top: 4px; right: calc(2.5rem + 50px); width: auto;}
.lnb_right .dropBox .dropbtn{padding: 0 25px 0 25px;}
.lnb_right .dropBox .dropbtn:before{left: 0;}
.lnb_right .dropBox .dropbtn:after{right: 0;}
.lnb_right .dropLag,
.lnb_right .btn_search{display: none;}
      

}




