#header {position:relative; background:#fff; border-bottom:1px solid #eeeeee; box-sizing:border-box;}
#header.on {z-index:9998;}
#header .top_layout {position:relative; width:1280px; height:100%; margin:auto;}
#header .top_layout .logo {position:absolute; left:0; top:25px; z-index:999;}
#header .top_layout .logo a {display:block; width:170px; height:51px; background:url('/2021/images/t_logo2.png')no-repeat; font-size:0;}
#header .top_layout .counsel {cursor:pointer; position:absolute; right:-60px; top:25px; width:160px; height:40px; margin-top:5.5px; z-index:999; background:#fff; border:1px solid #e72226; box-sizing:border-box; border-radius:100px;}
#header .top_layout .counsel {font-size:18px; font-weight:300; color:#e72226; line-height:38px;}
#header .top_layout .btn {display:none;}

#gnb_layout {display:block; overflow:hidden; position:absolute; top:0; left:0; width:100%; min-height:90px; transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out;}
#gnb_layout:after {top:90px;}
#gnb_layout.open:after {position:absolute; top:90px; bottom:0; right:0; width:100%; height:auto; border-top:#eee; background:#fff; content:"";}
#gnb {position:absolute; top:0px; left:0; z-index:2; width:100%; height:90px;}
#gnb_layout.action {position:relative; background:#fff;}
#gnb_layout .layout {position:relative; width:100%; /*max-width:1165px;*/ height:100%; margin:0 auto;}
#gnb_layout .layout:after {display:block; visibility:hidden; clear:both; content:"";}
#gnb_layout .depth1 {display:inline-block; float:none; height:100%; z-index:14; margin-left:265px;}
#gnb_layout .depth1:after {display: block; content: ''; clear: both;}
#gnb_layout .depth1 > li {display:inline-block; float:left; position:relative; height:100%; /*margin:0 -2px;*/ vertical-align:top;}
#gnb_layout .depth1 > li > a {position:relative; display:block; height:100%; padding:0 24px; text-align:center;}
#gnb_layout .depth1 > li > a.current + .sub {opacity:1; display: block;}
#gnb_layout .depth1 > li > a span {display:inline-block; position:relative; z-index:1; height:100%; padding-top:25px; line-height:51px; font-size:20px; font-weight:500; color:#000; letter-spacing:-0.03em; vertical-align:middle; transition:all 0.3s; -webkit-transition:all 0.3s;}
#gnb_layout .depth1 > li > a:before {display:block; opacity:0; position:absolute; left:50%; bottom:0; width:0; height:4px; background:#b1fc22; content:''; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
#gnb_layout .depth1 > li > a.current:before {opacity:1; left:0; width:100%; }
#gnb_layout .depth1 > li .sub {display:none; position:absolute; top:90px; left:50%; z-index:100; width:650px; margin:0; text-align:left; transform: translateX(-50%); -webkit-transform:translateX(-50%);}
#gnb_layout .depth1 > li .sub .depth2 {position:relative; top:0; height:100% !important; width:100%; text-align:center;}
#gnb_layout .depth1 > li .sub .depth2 > li {display:inline-block; position:relative; margin:0 24px; text-align:left;}
#gnb_layout .depth1 > li .sub .depth2 > li > a {display:block; position:relative; vertical-align:top; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
#gnb_layout .depth1 > li .sub .depth2 > li > a span {display:inline-block; position:relative; height:60px; line-height:60px; color:#333; font-size:17px; vertical-align:top; transition: all 0.3s; -webkit-transition: all 0.3s;}
#gnb_layout .depth1 > li .sub .depth2 > li > a.on span,
#gnb_layout .depth1 > li .sub .depth2 > li > a:hover span,
#gnb_layout .depth1 > li .sub .depth2 > li > a:focus span {text-decoration:underline;}

/*mmenu*/
#mmenu {position:fixed; opacity:0; height:100%; top:0; right:0; left:0; bottom:0; text-align:center; background:rgba(0,0,0,0.5); z-index:-1; visibility:hidden; transition:all .375s; overflow-y:scroll;}
#mmenu::before {content:''; position:fixed; top:0; bottom:0; left:0; right:-15px; transform-origin:0 0; transform:skew(-14deg) translateX(-120%); transition: all .275s .1s;}
#mmenu .m_wrap {position:absolute; width:100%;}
#mmenu .m_depth {padding:150px 120px 0 0; transform:skew(-14deg) translateX(0); text-align:right;}
#mmenu .m_depth > li {height:110px; transform:skew(14deg) translateX(0);}
#mmenu .m_depth > li p {font-size:3rem; font-weight:bold; /*color:#000;*/ color:#fff;}
#mmenu .m_depth > li p span {cursor:pointer;;}
#mmenu .m_sub {opacity:0;}
#mmenu .m_sub li {display:inline-block; margin-left:35px;}
#mmenu .m_sub li a {font-size:2.2rem; font-weight:500; /*color:#1a1a1a;*/color:#d3d3d3;}
#mmenu .m_depth li:hover .m_sub {opacity:1; transition:.5s;}

/*is-open*/
#header.is-open {background:transparent !important; border:0 !important;}
#header.is-open .top_layout .logo a {background:url('/2021/images/t_logo.png')no-repeat; background-size:cover;}

#header .top_layout .btn.is-open .ham {width:40px; margin:32px auto 0;}
#header .top_layout .btn.is-open .ham span {width:40px !important; background:#fff;}
#header .top_layout .btn.is-open .ham span:first-child {transform:rotate(405deg); margin-bottom:0; transition:1s;}
#header .top_layout .btn.is-open .ham span:nth-child(2) {opacity:0;}
#header .top_layout .btn.is-open .ham span:last-child {width:40px; transform:rotate(-45deg); margin-top:-12px; transition:1s;}

#mmenu.is-open {display:block; opacity:1;  z-index:100; visibility:visible;}
#mmenu.is-open::before {transform:skew(-14deg) translateX(0); /*background:#80e326;*/ background:#1f223b;}

/**************************RESPONS**************************/
@media all and (min-width:1280px) and (max-width:1439px) {
#header .top_layout .counsel {right:0;}	
/*#gnb {padding-left:129px;}*/
} 

@media all and (max-width:1279px) {
#header {position:fixed;} 
#header .top_layout {width:100%;}
#header .top_layout .logo {top:19.5px; left:10px;}
#header .top_layout .counsel {display:none;}
#header .top_layout .btn {display:block; position:absolute; width:70px; height:70px; top:10px; right:10px; z-index:999; border:1px solid #000; border-radius:100px; box-sizing:border-box; cursor:pointer;}
#header .top_layout .ham {width:36px; margin:23.5px auto 0;}
#header .top_layout .ham span {width:36px; height:3px; float:right; margin-bottom:6px; background:#000; transition:1s;}
#header .top_layout .ham span:last-child {width:26px; margin-bottom:0;}

#gnb_layout {display:none;}
}

@media all and (max-width:639px) {
#header {height:60px;}
#header .top_layout .logo {top:12px}
#header .top_layout .logo a {width:120px; height:36px; background-size:cover;}
#header .top_layout .btn {width:40px; height:40px; border:0;}
#header .top_layout .btn .ham {margin:9px auto 0;}

/*mmenu*/
#mmenu .m_depth {padding:120px 50px 0 0; transform:skew(-8deg) translateX(0);}
#mmenu .m_depth > li {height:100px; transform: skew(8deg) translateX(0);}
#mmenu .m_depth > li p {font-size:2.5rem;}
#mmenu .m_sub li {margin-left:25px;}
#mmenu .m_sub li a {font-size:1.7rem;}

/*is-open*/
#header .top_layout .btn.is-open .ham {margin:20px auto 0;}

#mmenu.is-open::before {transform:skew(-8deg) translateX(0);}
}