.header { position:absolute; padding-top: 22px; box-sizing:border-box; z-index:99; transition:all 0.3s; }
.header .container { max-width:1660px; transition:all 0.3s; }
.header .tnb { text-align: right; font-size:0; padding-bottom: 12px; box-sizing:border-box; height:27px; transition:all 0.3s; }
.header .tnb li { display:inline-block; text-align: center; }
.header .tnb li:before { content:""; display:inline-block; width:1px; height:8px; background:#fff; vertical-align: 0; margin: 0 7px; }
.header .tnb li:first-child:before { display:none; }
.header .tnb li a { font-size:1.3rem; color:#fff; font-weight: 500; }
.header .innerBox { border: 1px solid #9d9fad; box-sizing:border-box; display:table; width:100%; position:relative; transition:all 0.3s; }
.header .innerBox .m_logo,
.header .innerBox .gnb,
.header .innerBox .toggle { display:table-cell; text-align: center; vertical-align: middle; box-sizing:border-box; }
.header .innerBox .m_logo { width:285px; }
.header .innerBox .m_logo a { display:inline-block; width:206px; height:27px; background-image:url(../../../img/m_logo.png); background-position: center center; background-repeat: no-repeat; transition:all 0.3s; }
.header .innerBox .gnb { width:calc(100% - 285px - 114px); text-align: left; padding-left: 10rem; }
.header .innerBox .gnb  .de1_ul { display:inline-block; }
.header .innerBox .gnb .de1_ul .de1_li { float: left; text-align: center; box-sizing:border-box; }
.header .innerBox .gnb .de1_ul .de1_li .de1_a { display:block; font-size:1.8rem; color:#fff; font-weight: 500; transition:all 0.5s; padding: 3.5rem 4.1rem; box-sizing:border-box; position:relative; }
.header .innerBox .gnb .de1_ul .de1_li .de1_a:before,
.header .innerBox .gnb .de1_ul .de1_li .de1_a:after { content:""; display:inline-block; width:4px; height:4px; background:#336791; position:absolute; bottom:0; opacity:0; transition:all 0.5s; }
.header .innerBox .gnb .de1_ul .de1_li .de1_a:before { left:50%; }
.header .innerBox .gnb .de1_ul .de1_li .de1_a:after { right:50%; }
.header .innerBox .gnb .de1_ul .de1_li .de2_ul { position:absolute; background:#eaeaea; left:-1px; top:91px; width: calc(100% + 2px); height:auto; text-align:left; padding-left: calc(285px + 10rem + 4.1rem); padding-right: calc(114px + 28rem); box-sizing:border-box; padding-top: 1rem; padding-bottom: 3rem; /*opacity:0; z-index:-1; transition: all 0.3s;*/ display:none; }
.header .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li { display:inline-block; padding: 0.7rem 1rem 0.7rem 3rem; box-sizing:border-box; border-left: 1px solid #aaa; width:33.33%; float: left; margin-top: 2rem; }
.header .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li:first-child {  }
.header .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:1.6rem; color:#3a3a3a; font-weight: 400; }
.header .innerBox .toggle { width:114px; }
.header .innerBox .toggle a { display:inline-block; width:34px; text-align: right; font-size:0; }
.header .innerBox .toggle a .bar { display:inline-block; background:#fff; height:3px; width:34px; margin-top: 9px; }
.header .innerBox .toggle a .bar01 { margin-top: 0; }
.header .innerBox .toggle a .bar02 { width:25px;  }

.header.active .innerBox { background:#fff; }
.header.active .innerBox .m_logo a { background-image:url(../../../img/m_logo-color.png); }
.header.active .innerBox .de1_ul .de1_li .de1_a { color:#3a3a3a; }

.header.fixed { position:fixed; padding-top: 0; }
.header.fixed .container { max-width:100%; }
.header.fixed .tnb { opacity:0; height:0; padding-bottom: 0; overflow:hidden; }
.header.fixed .innerBox { background:#fff; }
.header.fixed .innerBox .m_logo a { background-image:url(../../../img/m_logo-color.png); }
.header.fixed .innerBox .gnb .de1_ul .de1_li .de1_a { color:#3a3a3a; }
.header.fixed .innerBox .gnb .de1_ul .de1_li .de1_a { padding-top: 2rem; padding-bottom: 2rem; }
.header.fixed .innerBox .gnb .de1_ul .de1_li .de2_ul { top:61px; }
.header.fixed .innerBox .toggle a .bar { background:#336791; }


.header .innerBox .de1_ul .de1_li:hover .de1_a { color:#336791; }
.header .innerBox .de1_ul .de1_li:hover .de1_a:before,
.header .innerBox .de1_ul .de1_li:hover .de1_a:after { width:50%; opacity:1; }
/*.header .innerBox .de1_ul .de1_li:hover .de2_ul { opacity:1; z-index:2; }*/
.header .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a:hover { color:#336791; }



.all_gnb { position:fixed; width:100% ;height:0; left:0; top:0; background:#0c2e4a; z-index:11; overflow:hidden; transition:all 0.5s; }
.all_gnb .inner { padding: 5rem; box-sizing:border-box; position:relative; }
.all_gnb .inner .all_logo {  }
.all_gnb .inner .close_btn { position:absolute; right:3.5rem; top:5rem; display:inline-block; }
.all_gnb .inner .close_btn .close_inner { display:inline-block; position:relative; width:32px; height:32px; }
.all_gnb .inner .close_btn .close_inner:before,
.all_gnb .inner .close_btn .close_inner:after { content:""; display:inline-block; width:2px; height:42px; background:#fff; position:absolute; left:0; top:0; }
.all_gnb .inner .close_btn .close_inner:before { transform:rotateZ(45deg); }
.all_gnb .inner .close_btn .close_inner:after { transform:rotateZ(-45deg); }
.all_gnb .inner .de1_ul { margin-top: 3rem; }
.all_gnb .inner .de1_ul .de1_li { width:100%; display:flex; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding: 3rem 2rem; box-sizing:border-box; }
.all_gnb .inner .de1_ul .de1_li .de1_a { display:inline-block; width:300px; font-size:2rem; color:#fff; }
.all_gnb .inner .de1_ul .de1_li .de2_ul { display:flex; width:calc(100% - 304px); }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li { flex-direction: row; flex-grow:1; }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de2_a { font-size:1.6rem; color:#fff; position:relative; padding-left: 13px; box-sizing:border-box; }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de2_a:before { content:""; display:inline-block; width:7px; height:2px; background:rgba(255, 255, 255, 0.5); position:absolute; left:0; top:50%; margin-top: -1px; }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de3_ul { margin-top: 15px; }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de3_ul .de3_li { padding-left: 13px; box-sizing:border-box; margin-top: 5px; }
.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de3_ul .de3_li .de3_a { font-size:1.4rem; color:rgba(255, 255, 255, 0.5); }


.all_gnb.show { top:0; height:100%; }
body.show { overflow:hidden; }




.header.sub_header { background:#fff; position:static; padding-top: 0; }
.header.sub_header .container { width:100%; max-width:100%; position:relative; }

.header.sub_header .tnb { padding-bottom: 0; position:absolute; right:114px; top:50%; z-index:3; margin-top: -9px; }
.header.sub_header .tnb li:before {background:#3a3a3a; }
.header.sub_header .tnb li a { color:#3a3a3a; }

.header.sub_header .innerBox { border: 0; }
.header.sub_header .innerBox { background:#fff; }
.header.sub_header .innerBox .m_logo a { background-image:url(../../../img/m_logo-color.png); }
.header.sub_header .innerBox .gnb .de1_ul .de1_li .de1_a { color:#3a3a3a; }

.header.sub_header  .innerBox .gnb {  }
.header.sub_header  .innerBox .gnb .de1_ul {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de1_a { padding: 3.4rem 4.1rem; }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de2_a {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de3_ul {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de3_ul .de3_li {  }
.header.sub_header  .innerBox .gnb .de1_ul .de1_li .de2_ul .de2_li .de3_ul .de3_li .de3_a {  }

.header.sub_header .innerBox .toggle a .bar { background:#336791;  }


.header.sub_header.fixed { position:fixed; border-bottom: 1px solid #dadada; }
.header.sub_header.fixed .innerBox .gnb .de1_ul .de1_li .de1_a { padding-top: 2rem; padding-bottom: 2rem; }



.sub_head { background-size:cover; background-position:center center; background-repeat:no-repeat; }
.sub_head.bg10 { background-image:url(../../../img/contents/sub_head01.png); }
.sub_head.bg20 { background-image:url(../../../img/contents/sub_head02.png); }
.sub_head.bg30 { background-image:url(../../../img/contents/sub_head03.png); }
.sub_head.bg40 { background-image:url(../../../img/contents/sub_head04.png); }
.sub_head.bg50 { background-image:url(../../../img/contents/sub_head05.png); }
.sub_head.bg60 { background-image:url(../../../img/contents/sub_head06.png); }
.sub_head.bg70 { background-image:url(../../../img/contents/sub_head07.png); }
.sub_head .container { display:table; height:400px; }
.sub_head .table-cell { vertical-align: middle; display:table-cell; text-align: center; }
.sub_head .table-cell .hd_tit { font-size:6rem; color:#fff; font-weight: 400; }
.sub_head .table-cell .hd_txt { font-size:1.8rem; color:#e5e5e5; margin-top: 1.8rem; }



.sub_foot { background:url(../../../img/contents/sub_foot.png) center center no-repeat; background-size:cover; }
.sub_foot .container { text-align: center; display:table; }
.sub_foot .table-cell { height:415px; display:table-cell; vertical-align: middle; }
.sub_foot .table-cell .tit { font-size:1.8rem; color:#fff; font-weight: 600; }
.sub_foot .table-cell .txt { font-size:2.6rem; color:#fff; line-height: 4.2rem; margin: 3.2rem 0 3rem; font-weight: 400; }
.sub_foot .table-cell .cs_btn { display:inline-block; width:230px; height:60px; background:#336791; font-weight: 600; text-align: center; line-height: 60px; font-size:1.8rem; color:#fff; }


/*
.all_gnb { top:0; height:100%; display:block; }
*/

@media (max-width:1660px){

	.header .container { padding-left: 0 !important; padding-right: 0 !important; }

	.header .tnb { padding-right: 1rem; }

}

@media (max-width:1470px){

	.header .innerBox .gnb { display:none; }
	.header .innerBox .m_logo,
	.header .innerBox .gnb,
	.header .innerBox .toggle { padding: 2rem 4rem; }
	.header .innerBox .m_logo,
	.header .innerBox .toggle { width:50%; }
	.header .innerBox .m_logo { text-align:left; }
	.header .innerBox .toggle { text-align:right; }

}

@media (max-width:1200px){

	.all_gnb .inner .de1_ul .de1_li .de1_a { width:250px; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul { width: calc(100% - 254px); }
 
}

@media (max-width:992px){

	.all_gnb .inner { height:100%; overflow-y:scroll; }
	.all_gnb .inner .de1_ul .de1_li { display:block; }
	.all_gnb .inner .de1_ul .de1_li .de1_a { display:block; width:100%; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul { width:100%; margin-top: 2rem; }


	.sub_head .container { height:300px; }

}

@media (max-width:768px){

	.header.sub_header .tnb { display:none; }

	.all_gnb .inner .de1_ul .de1_li { padding: 0 2rem; transition:all 0.3s; }
	.all_gnb .inner .de1_ul .de1_li.active { padding-bottom: 4rem; }
	.all_gnb .inner .de1_ul .de1_li .de1_a { position:relative; padding: 3rem 0; box-sizing:border-box; transition:all 0.3s; }
	.all_gnb .inner .de1_ul .de1_li .de1_a.active { padding-bottom: 2rem; }
	.header .innerBox .de1_ul .de1_li:hover .de1_a { color:#fff; }
	.all_gnb .inner .de1_ul .de1_li .de1_a:after { content:"\f107"; font-family: "Font Awesome 5 Free"; font-weight: 600; position:absolute; right:0; opacity:0.7 !important; width:auto !important; transition:0.3s; }
	.all_gnb .inner .de1_ul .de1_li .de1_a.active:after { content:"\f106"; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul { display:block; display:none; margin-top: 0; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li { margin-top: 2rem; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li:first-child  { margin-top: 0; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li a { display:block; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de3_ul { margin-top: 10px; }
	.all_gnb .inner .de1_ul .de1_li .de2_ul .de2_li .de3_ul .de3_li .de3_a { padding: 5px; }


	.sub_head .table-cell .hd_tit { font-size:4rem; }
	.sub_head .container { height:230px; }

	.sub_foot .table-cell .txt br { display:none; }

}

@media (max-width:479px){

	.header .innerBox .m_logo,
	.header .innerBox .gnb, .header .innerBox .toggle { padding: 2rem 1rem; }

}











