#btn-menu-m,#btn-menu-m span{display:inline-block;transition:all .4s;box-sizing:border-box}
#btn-menu-m{position:fixed;width:30px;height:40px;top:20px;right:15px;z-index:120;display:none}
#btn-menu-m span{position:absolute;left:0;width:100%;height:2px;background-color:#222}
.main #btn-menu-m span{position:absolute;left:0;width:100%;height:2px;background-color:#fff}
.scrolled #btn-menu-m span { background-color:#fff}
#btn-menu-m.active span{background-color:#fff;height:1px}
#btn-menu-m span:nth-of-type(1) {top: 8px;}
#btn-menu-m span:nth-of-type(2) {top: 16px;width:25px}
#btn-menu-m span:nth-of-type(3) {bottom: 13px;}
#btn-menu-m.active span:nth-of-type(1) {-webkit-transform: translateY (16px) rotate (-45deg);transform: translateY(16px) rotate(-45deg); top: 0px;}
#btn-menu-m.active span:nth-of-type(2) { opacity: 0;}
#btn-menu-m.active span:nth-of-type(3){-webkit-transform:translateY(-23px) rotate(45deg);transform:translateY(-23px) rotate(45deg);bottom:0}

.main .logo{height:100%;width:215px;float:left;margin-left:20px;margin-top:20px;text-align:center;position:relative;float:left}
.main .logo a { display:block; width:210px; height:56px; line-height:56px; background-image:url(../img/logo.webp); background-position: center left; background-size:100%; background-repeat: no-repeat;}

@media screen and (max-width:640px) {
 .main .logo { margin-top:13px}
 .main .logo a { height:60px; width:180px}
}


.logo{height:100%;width:215px;float:left;margin-left:20px;margin-top:20px;text-align:center;position:relative;float:left}
.logo a {display:block; width:210px; height:56px; line-height:56px; background-image:url(../img/logo.png); background-position: center left; background-repeat: no-repeat;}


.scrolled .logo a {background-image:url(../img/logo_w.png);}

#logo-line .contact{height:100%;background-color:#9acd32;float:right}
#logo-line .contact ul {overflow: hidden; height: 100%; width: 200px;}
#logo-line .contact ul li{float:left;width:50%;height:100%}
.main #header-wrap { border-bottom:0}
#header-wrap{position:fixed;z-index:100;width:100%;height:120px;z-index:4;}
.scrolled #header-wrap{background-color:rgba(33,39,52,0.9);border-bottom:0;top:0;z-index:4}
.scrolled .select-nav-wrapper {margin: 0px auto 0 auto;}
.main #lnb > ul > li > a { color:#FFF; opacity:0.8; transition: 0.3s;}
.main #lnb > ul > li > a:hover { color:#FFF;opacity:1}


#header .lnb-line { position: absolute; right:200px; top:28px}
#header.fixed { position: fixed;width: 100%;}
#header .lnb-line:after{content:" ";visibility:hidden;display:block;height:0;clear:both}
#lnb { float:left;}
.lnb-line #menu-ctl{display:none;position:absolute;top:0;left:-30px;z-index:10}
.lnb-line #menu-ctl i { color:#fff}
#lnb * { box-sizing: border-box;}
#lnb>ul:after{content:" ";visibility:hidden;display:block;height:0;clear:both}
#lnb>ul>li{display:inline-block;float:left;margin-left:-1px;transition:all .5s;white-space:nowrap;padding-bottom:20px}


@media screen and (max-width: 1260px) {   
#lnb { display:none}
}


@media screen and (max-width: 920px) {  
   .lnb-line  #menu-ctl {display:block }
    #lnb>ul>li.hide{width:10px;overflow:hidden;opacity:.5;background-color:#888;padding:0 10px;box-sizing:border-box}
	#menu-ctl > a {display:inline-block;width:30px; line-height:80px; background:rgba(255, 255, 255, .3); font-size: 20px; text-align:center; }
}

#lnb>ul>li>a{display:block;width:100%;height:100%;padding:0 15px;text-align:center;font-size:17px;font-weight:500;color:#000;transition: 0.3s; font-weight:600}
#lnb>ul>li>a:hover {color:#37547f;}

.scrolled #lnb > ul > li > a { color:#fff; opacity:0.8}
.scrolled #lnb > ul > li > a:hover { opacity:1}
#lnb > ul > li > a:hover {opacity:1}
#lnb>ul>li>ul{position:absolute;width:100%;display:none;box-sizing:content-box;margin-left:-1px;z-index:2}
#lnb>ul>li>ul ul{position:absolute;width:100%;display:none;border:1px solid #525252;box-sizing:content-box;margin-top:-1px;top:0;left:100%;margin-left:0}
#lnb > ul li.on > ul { position: absolute;display: block;}
#lnb li { position: relative;}
#lnb>ul>li li{border-top:1px solid #525252;line-height:48px;height:50px;background-color:#333;padding:0;margin-top:-1px}
#lnb > ul > li li:first-child {border-top:0}
#lnb > ul > li li:nth-last-child(1) {height: 50px;line-height: 50px;}
#lnb>ul>li li>a{width:100%;height:100%;display:block;padding:0 20px;color:#fff;font-size:14px}
#lnb > ul > li li > a:hover {background-color:#39F; color:#fff;}
#lnb > ul > li > ul { width: 220px; top: 100%;left: 0px;}
#lnb > ul > li .d1 { display:none}
#lnb .arrow{position:absolute;width:30px;height:30px;font-size:14px;color:#fff;display:inline-block;right:0;top:50%;margin-top:-15px;text-align:center;line-height:30px;z-index:1}
#lnb ul ul .arrow {transform: rotate(-90deg);}
#login-box, #login-box2 {float: right; padding-left:50px; padding-right:208px}
#login-box3 { height: 50px;text-align:center;margin-bottom:10px;}

.main #login-box a, #login-box2 a, #login-box3 a { color: #fff; opacity:0.8}
.scrolled #login-box a, #login-box2 a, #login-box3 a { color:#f5f5f5}
#login-box a,#login-box2 a,#login-box3 a{display:inline-block;padding:0 10px;text-align:center;color:#555;font-size:12px}
#login-box2 {display:none;}
.main #container-box { border:0}
#container-box { width: 100%; border-bottom:1px solid #ddd; position:relative}

@media screen and (max-width: 768px) {
  #header .lnb-line { display: none;}
  #header-wrap {position: fixed;top:0;}
  #header-wrap #logo-line { margin: 0;}
  #logo-line .logo { display: inline-block;float: none;}
  #logo-line .contact { display: none;}
  #btn-menu-m { display: inline-block;}
  #top-bg-wrapper {}
  #login-box a,#login-box2 a,#login-box3 a{display:inline-block;padding:0 10px;text-align:center;color:#f1f1f1;font-size:12px}
}

#m-lnb-wrapper{position:fixed;top:0;right:-400px;z-index:110;max-width:400px;width:100%;height:100vh;overflow:auto;background-color:#000;opacity:.9;box-sizing:border-box;padding-top:60px;padding-left:2em;padding-right:1em;transition:all .5s}
#m-lnb-wrapper.on {right: 0px;}
#m-lnb > ul {font-size: 14px;}
#m-lnb > ul li > a {color: #fff;}
#m-lnb>ul>li>span{position:absolute;right:0;top:0;width:40px;height:50px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer}
#m-lnb > ul > li.on > span {transform: rotate(180deg);}
#m-lnb>ul>li li>span{position:absolute;right:0;top:0;width:40px;height:40px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer}
#m-lnb > ul > li li.on > span { transform: rotate(180deg);}
#m-lnb > ul li {position: relative;}
#m-lnb>ul>li>a{display:inline-block;padding:0 10px;font-size:16px}
#m-lnb > ul > li {line-height: 55px;border-bottom: 1px solid #333;}
#m-lnb > ul > li:nth-last-child(1) {border-bottom: 0;}
#m-lnb > ul > li ul {display: none;line-height: 40px;}
#m-lnb > ul > li li {border-top: 1px solid #474747;background-color: #222;}
#m-lnb > ul > li li li {border-top: 1px solid #959595; background-color: #777;}
#m-lnb>ul>li li>a{display:inline-block;padding:3px 15px 3px 20px;font-weight:300}
#m-lnb > ul > li li li > a { display: inline-block; padding: 0 10px 0 30px;}

.select-nav{background-color:#fee;display:inline-block;float:left}
.select-nav:after{content:" ";visibility:hidden;display:block;height:0;clear:both}
.select-nav .select{float:left;width:220px;height:70px;position:relative;box-sizing:border-box;border-left:1px solid #ddd;border-right:1px solid #ddd;margin-left:-1px}
.select-nav .select:first-child { border:0}
.select-nav .select .down{position:absolute;width:25px;height:25px;display:inline-block;top:20px;right:5px;line-height:25px;text-align:center;color:#ddd;font-size:20px;transition:all .5s}
.select-nav .select.on .down {transform: rotate(180deg)}
.select-nav .select.d1 { margin-left: 0;}
.select-nav .select button{width:100%;height:100%;background-color:#fff;border:0;text-align:left;padding-left:25px;outline:0;font-size:15px}
.select-nav .select button .t1 { font-weight:500; font-size:15px}
.select-nav .d3 button { font-weight:bold}
.select-nav .select > ul{display:none;position:absolute;top:100%;left:-1px;width:100%;border:1px solid #ddd;background-color:#fff;box-sizing:content-box}
.select-nav .select ul li{min-height:55px;line-height:55px;padding-left:25px;border-bottom:1px solid #ddd}
.select-nav .select ul li a{color:#555;display:block;font-size:14px}
.select-nav .select ul li a:hover {color:#000}
.select-nav .select ul ul { display:none;}
.select-nav .select ul li li {border-top: 1px solid #333;border-bottom: 0;}
.select-nav .select ul li li:hover { background-color:#999}
.select-nav .select ul li:nth-last-child(1) { border-bottom: 0;}
.select-nav-wrapper{position:relative;z-index:3;background-color:#fff;max-width:1400px;margin:120px auto 0 auto}
.select-nav-wrapper:after{content:" ";visibility:hidden;display:block;height:0;clear:both}
.select-nav-wrapper .home{width:60px;height:70px;text-align:center;font-size:30px;display:inline-block;line-height:65px;border-right:1px solid #ddd;float:left}
.select-nav-wrapper .link{background-color:#f08080;width:50px;height:50px;text-align:center;font-size:30px;display:inline-block;line-height:50px;float:right}
.d2 .t2 {display:none;}

@media screen and (max-width: 1120px) {

  #login-box2 {display:inline-block;}
}



@media screen and (max-width: 1120px) {

  #login-box2 {display:inline-block;}
}

@media screen and (max-width: 768px) {
  .select-nav-wrapper {margin: 84px auto 0 auto;}		
  .select-nav-wrapper .home { display: none;}
  .select-nav-wrapper .link {display: none; }
  .select-nav .select.d3 {display: none;}
  .select-nav { width: 100%;}
  .select-nav .select {width: 50%;border-right: 0}
  .select-nav .select ul ul { display:block;}
  .d2 .t2 {display: inline;}
  .d2 .t2 .fa { color: #555; font-weight:bold;}
  .share-area { display:none}
  #header-wrap { height:85px }
    #login-box { display:none;}
}

@media screen and (max-width: 640px) {
	.select-nav-wrapper {margin: 84px auto 0 auto;}	
	.logo { margin-top:12px}
    .logo a { background-image: url(../img/sub_logo_m.png); background-repeat:no-repeat; width:180px; height:60px}
	.scrolled .logo a {  background-image: url(../img/logo_m.png); width:180px; height:60px}
	#btn-menu-m { top:23px}
}