.wrap1280{ width: 90%; height: 100%; max-width: 1280px; margin: 0 auto; position: relative; }
.wrap1600{ width: 90%; height: 100%; max-width: 1600px; margin: 0 auto; position: relative; }
body{ width: 100%; overflow-x: hidden; }

/*Header*/
header{ width: 100%; padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 999; transition-duration: 0.4s; }
header nav.__pc{ width: 90%; max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
header nav.__pc img{ width: 100%; transition-duration: 0.4s; transform-origin: 0 0;}
header nav.__pc img:last-of-type{ display: none; }
header nav.__pc .gnb{ display: flex; color: #1f1f1f; }
header nav.__pc .gnb > li{ position: relative;  }
header nav.__pc .gnb > li::after{ content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background-color: #1f1f1f; position: absolute; right: -4.5px; top: 50%; transform: translateY(-50%); }
header nav.__pc .gnb > li:last-of-type:after{ display: none; }
header nav.__pc .gnb > li > a{ font-family: 'Jalnan'; font-size: 20px; padding: 20px 65px; }
header nav.__pc .gnb .sub_menu{ width: 100%; position: absolute; top: calc(100% + 20px); left: 0; text-align: center; padding: 20px 0; background-color: rgba(255,255,255,0.8); border-radius: 15px; display: none; }
header nav.__pc .gnb .sub_menu li{ transition-duration: 0.2s; }
header nav.__pc .gnb .sub_menu li a{ display: block; padding: 7px 0; width: 100%; }

header .ham{ width: 30px; height: 16px; position: relative; display: none; cursor: pointer; }
header .ham span{ display: block; width: 100%; height: 4px; background-color: #1f1f1f; position: absolute; border-radius: 10px; transition-duration: 0.4s; }
header .ham span:nth-of-type(1){ top: 0; }
header .ham span:nth-of-type(2){ top: 50%; }
header .ham span:nth-of-type(3){ top: 100%; }

header .ham.on span:nth-of-type(1){ transform: rotate(45deg); top: 50%; }
header .ham.on span:nth-of-type(2){ transform: translateX(-100%); opacity: 0; }
header .ham.on span:nth-of-type(3){ transform: rotate(-45deg); top: 50%; }

header.on.bg{ background-color: #fff; }

header.on{ background-color: rgba(255,255,255,0.8); padding: 10px 0; border-bottom: 1px solid #eee; }
header.on nav img{ width: 60px; }
header.on nav .gnb .sub_menu{ background-color: #fff; }


/*모바일*/
.__mob{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: none; background-color: #fff; z-index: 990; padding-top: 100px; box-sizing: border-box; transition-duration: 0.4s; transform: translateY(-100%); }
.__mob .mob_menu{ width: 90%; margin: 0 auto; }
.__mob .mob_menu > li{ margin-bottom: 20px; }
.__mob .mob_menu > li > span{ display: block; width: 100%; padding: 10px 0; box-sizing: border-box; position: relative; font-size: 20px; font-family: 'Jalnan'; border-bottom: 1px solid #eee; }
.__mob .mob_menu > li > span i{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition-duration: 0.4s; }
.__mob .mob_menu > li .sub_menu li{ padding-top: 10px; font-size: 15px; }

.__mob .mob_menu > li .sub_menu{ display: none; }

.__mob .mob_menu > li.on > span i{ transform: rotate(180deg) translateY(50%); }

.__mob.on{ transform: translateY(0); }

@media screen and (min-width: 781px){
    header.on:hover{ background-color: #fff; }
    header nav.__pc .gnb .sub_menu li:hover{ color: #f18900; }
}

@media screen and (max-width: 1600px){
    header nav.__pc{ max-width: 1280px; }
    header nav.__pc .head_logo{ margin-left: 0; }
}

@media screen and (max-width: 1440px){
    header nav.__pc .head_logo{ width: 70px; }
    header nav.__pc .gnb > li > a{ font-size: 18px; padding: 15px 50px; }
}

@media screen and (max-width: 1280px){
    header{ padding: 10px 0; }
    header nav.__pc .head_logo{ width: 40px; }
    header nav.__pc .gnb > li > a{ font-size: 16px; padding: 10px 40px; }
    header nav.__pc .gnb .sub_menu{ padding: 15px 0; }
    header nav.__pc .gnb .sub_menu li a{ font-size: 15px; }
}

@media screen and (max-width: 1000px){
    header{ padding: 10px 0; }
    header nav.__pc .head_logo{ width: 30px; }
    header nav.__pc .gnb .sub_menu{ padding: 10px 0; top: calc(100% + 10px); }
    header nav.__pc .gnb > li > a{ font-size: 16px; padding: 10px 30px; }
    header nav.__pc .gnb > li::after{ width: 6px; height: 6px; right: -3px; }
}

@media screen and (max-width: 780px){
    header{ padding: 10px 0; }
    header nav.__pc .gnb{ display: none; }
    header .ham{ display: block; }

    .__mob{ display: block; }
}

@media screen and (max-width: 500px){
    header{ padding: 5px 0; }
    header.on{ padding: 5px 0; }
    header .ham span{ height: 3px; }
    header nav.__pc .head_logo{ width: 30px; }

    .__mob{ padding-top: 70px; }
    .__mob .mob_menu > li{ margin-bottom: 15px; }
    .__mob .mob_menu > li > a{ font-size: 16px; }
    .__mob .mob_menu > li > a i{ font-size: 24px; }
    .__mob .mob_menu > li .sub_menu li{ font-size: 14px; }
}




/* SubTab Menu */
.subtabWrap{ width: 100%; position: absolute; top: 0; left: 0; z-index: 10; border-bottom: #cccccc 1px solid; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }
.subtabWrap .subtab{ width: 90%; max-width: 1280px; margin: 0 auto; display: flex; }
.subtabWrap .subtab > li{ position: relative; flex-shrink: 0; display: flex; align-items: center; box-sizing: border-box; }
.subtabWrap .subtab > li:first-of-type{ color: #023f97; width: 57px; }
.subtabWrap .subtab > li::after{ content: ''; display: block; position: absolute; top: 50%; right: 0; background-color: #ccc; width: 1px; height: 40px; transform: translateY(-50%); z-index: 11; }
.subtabWrap .subtab > li:last-of-type::after{ display: none; }
.subtabWrap .subtab > li:first-of-type > a{ display: flex; justify-content: center; width: 100%; font-size: 20px; align-items: center; padding: 20px 0; }

.subtabWrap .subtab li.tabmenu{ padding: 0 30px; width: 240px; box-sizing: border-box; justify-content: space-between; cursor: pointer; transition-duration: 0.2s; background-color: rgba(255,255,255,0.7); }

.subtabWrap .subtab li.tabmenu span{ color: #777; letter-spacing: -0.03em; font-size: 18px; transition-duration: 0.2s; }
.subtabWrap .subtab li.tabmenu em{ color: #ccc; font-size: 12px; }

.subtabWrap .subtab li.tabmenu.on{ background-color: #023f97; }
.subtabWrap .subtab li.tabmenu.on span{ color: #ccc; }

.subtabWrap .subtab > li .sitemap{ width: 100%; position: absolute; top: calc(100% + 1px); left: 0; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); display: none; }
.subtabWrap .subtab > li .sitemap > li{ background-color: #fff; border-bottom: 1px solid #ccc; width: 100%; color: #1f1f1f; letter-spacing: -0.03em; transition-duration: 0.4s; }
.subtabWrap .subtab > li .sitemap > li:last-of-type{ border-bottom: none; }
.subtabWrap .subtab > li .sitemap > li > a{ display: block; padding: 15px 30px; box-sizing: border-box; width: 100%; word-break: keep-all; }
.subtabWrap .subtab > li .sitemap > li.on{ background-color: #023f97; color: #ccc; }

@media screen and (min-width: 821px){
    .subtabWrap .subtab li.tabmenu:hover{ background-color: #023f97; }
    .subtabWrap .subtab li.tabmenu:hover span{ color: #ccc; }

    .subtabWrap .subtab > li .sitemap > li:hover{ background-color: #023f97; color: #ccc; }
}

@media screen and (max-width: 1280px){
    .subtabWrap .subtab > li:first-of-type > a{ padding: 15px 0; }
    .subtabWrap .subtab > li::after{ height: 30px; }
    .subtabWrap .subtab li.tabmenu{ width: 200px; padding: 0 20px; }
    .subtabWrap .subtab li.tabmenu span{ font-size: 16px; }
    .subtabWrap .subtab > li .sitemap > li > a{ padding: 15px 20px; }
}

@media screen and (max-width: 820px){
    .subtabWrap .subtab > li:first-of-type{ width: 45px; }
    .subtabWrap .subtab > li:first-of-type > a{ padding: 10px 0; font-size: 18px; }
    .subtabWrap .subtab > li::after{ height: 20px; }
    .subtabWrap .subtab li.tabmenu{ width: 180px; }
    .subtabWrap .subtab li.tabmenu span{ font-size: 14px; }
    .subtabWrap .subtab li.tabmenu em{ font-size: 10px; }
    .subtabWrap .subtab > li .sitemap > li > a{ font-size: 14px; padding: 10px 20px; }
    
}

@media screen and (max-width: 500px){
    .subtabWrap .subtab > li:first-of-type{ width: 30px; }
    .subtabWrap .subtab > li:first-of-type > a{ font-size: 16px; }
    .subtabWrap .subtab li.tabmenu{ width: 125px; padding: 0 7px; }
    .subtabWrap .subtab > li .sitemap > li > a{ padding: 10px 7px; }
    
}



/*Footer*/
footer{ width: 100%; padding: 60px 0; color: #555; position: relative; z-index: 1; box-sizing: border-box; }
footer .wrap1280{ display: flex; }
footer .foot_logo{ flex-shrink: 0; }
footer .foot_text{ width: 100%; font-size: 18px; box-sizing: border-box; padding-left: 67px; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.025em; }
footer .foot_text > ul{ display: flex; flex-wrap: wrap; }
footer .foot_text > ul li{ line-height: calc(27 / 18); margin-right: 25px; word-break: keep-all; }
footer .foot_text > ul li span{ font-weight: 700; margin-right: 5px; }
footer .foot_text p{ margin-top: 25px; }

@media screen and (max-width: 1800px){
    footer{ padding: 80px 0; }
}

@media screen and (max-width: 1400px){
    footer{ padding: 40px 0; }
    footer .foot_text{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    footer .foot_logo{ display: flex; align-items: center; justify-content: center; }
    footer .foot_text{ font-size: 14px; padding-left: 30px; margin-top: 20px; }
    footer .foot_text > ul li{ margin-right: 20px; }
}

@media screen and (max-width: 500px){
    footer .wrap1280{ display: block; }
    footer .foot_logo{ margin: 0 auto; margin-bottom: 20px; }
    footer .foot_text{ padding-left: 0; text-align: center; margin-top: 0; }
    footer .foot_text > ul{ justify-content: center; }

}

@media screen and (max-width: 400px){
    footer{ padding: 20px 0; }
    footer .foot_logo{ width: 15%; margin-bottom: 15px; }
    footer .foot_text p{ margin-top: 15px; }
}