/* sub_top */
.sub_visual { position: relative; height: 400px; overflow: hidden; }
.sub_visual .bg { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; }
.sub_visual .bg { animation: suv_bg forwards linear 5s; }
@keyframes suv_bg {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.sub_visual.sub1 .bg { background: url(/image/sub/subcommon/subtop_bg1.jpg) no-repeat center/cover; }
.sub_visual.sub2 .bg { background: url(/image/sub/subcommon/subtop_bg2.jpg) no-repeat center/cover; }
.sub_visual.sub3 .bg { background: url(/image/sub/subcommon/subtop_bg3.jpg) no-repeat center/cover; }
.sub_visual.sub4 .bg { background: url(/image/sub/subcommon/subtop_bg4.jpg) no-repeat center/cover; }

.sub_visual .frame { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.sub_visual .txtbox { z-index: 3; position: relative; top: 100px; height: calc(100% - 100px); padding: 0 20px; }
.sub_visual .txtbox .texts { position: relative; top: 55%; transform: translateY(-50%); text-align: center; }
.sub_visual .txtbox .text1 { font-weight: 700; font-size: 60px; color: #fff; letter-spacing: -0.03em; }
.sub_visual.sub4 .txtbox .text1 { color: #000; }

.sub_visual.sub1 .frame { background-color: rgba(0, 0, 0, 0); }
.sub_visual.sub2 .frame { background-color: rgba(0, 0, 0, 0.3); }
.sub_visual.sub3 .frame { background-color: rgba(0, 0, 0, 0); }
.sub_visual.sub4 .frame { background-color: rgba(0, 0, 0, 0); }

@media (max-width: 1535px) {
    .sub_visual { height: 350px; }

    .sub_visual .txtbox { top: 90px; height: calc(100% - 90px); }
}
@media (max-width: 1279px) {
    .sub_visual { height: 310px; }

    .sub_visual .txtbox { top: 80px; height: calc(100% - 80px); }
}
@media (max-width: 1023px) {
    .sub_visual { height: 270px; }

    .sub_visual .txtbox { top: 70px; height: calc(100% - 70px); }
}
@media (max-width: 767px) {
    .sub_visual { height: 240px; }
    .sub_visual.sub1 .bg { background-position-x: 35%; }
    .sub_visual.sub4 .bg { background-position-x: 85%; }

    .sub_visual .txtbox { top: 60px; height: calc(100% - 60px); }
}


/* subtabs */
.subtabs { background-color: #fff; border-bottom: 2px solid #f7f7f7; }
.subtabs .tabscon { position: relative; display: none; flex-wrap: nowrap; font-weight: 500; font-size: 20px; color: #707070; }
.subtabs .tabscon.active { display: flex; }
.subtabs .tabscon * { font-weight: inherit; font-size: inherit; color: inherit; }
.subtabs .tabscon a { position: relative; padding: 20px 0; width: 100%; display: block; text-align: center; }
.subtabs .tabscon a.oon { color: #27407e; }
.subtabs .tabscon a.oon::after { display: block; content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px; width: 100%; height: 2px; background-color: #27407e; }
@media (max-width: 1535px) {
    .subtabs .tabscon { font-size: 18px; }
    .subtabs .tabscon a { padding: 16px 0; }
}
@media (max-width: 1279px) {
    .subtabs .tabscon { font-size: 16px; }
    .subtabs .tabscon a { padding: 15px 0; }
}
@media (max-width: 1023px) {
    .subtabs .tabscon { font-size: 15px; flex-wrap: wrap; }
    .subtabs .tabscon a { width: 50%; }
    .subtabs .tabscon.subtab1 a:nth-of-type(1) { width: 100%; }
    .subtabs .tabscon.subtab2 a:nth-of-type(1) { width: 100%; }
}
@media (max-width: 767px) {
    .subtabs .tabscon { font-weight: normal; font-size: 14px; }
}
@media (max-width: 460px) {
    .subtabs .tabscon { font-size: 13px; }
    .subtabs .tabscon a { padding: 13px 0; width: 100%; border-bottom: 1px solid #ddd; }
    .subtabs .tabscon a:last-of-type { border-bottom: none; }
}

/* sub_common */
.sub_sect { position: relative; padding: 90px 0; overflow: hidden; }
.sub_sect .sub_tit { padding-bottom: 55px; text-align: center; font-weight: 600; font-size: 36px; color: #000; }

/* sub1_1 */
.sub1_1 dl { display: flex; flex-wrap: nowrap; }
.sub1_1 dl dt { min-width: max-content; margin-right: 60px; }
.sub1_1 dl dt img { width: 460px; }
.sub1_1 dl dd .textbox .text1 { font-weight: 600; font-size: 30px; color: #27407e; line-height: 1.5; }
.sub1_1 dl dd .textbox .text2 { font-size: 20px; color: #7e7e7e; line-height: 1.5; }
.sub1_1 dl dd .textbox .text2 b { font-weight: 600; color: #000; }
.sub1_1 dl dd .textbox .text2 b span { color: #27407e; }
@media (max-width: 1535px) {
    .sub1_1 dl dt { margin-right: calc(35px + 1.5vw); }
    .sub1_1 dl dt img { width: calc(250px + 13vw); }
}
@media (max-width: 1279px) {
    .sub1_1 dl dt img { width: calc(220px + 10vw); }
}
@media (max-width: 767px) {
    .sub1_1 dl { display: block; text-align: center; }
    .sub1_1 dl dt { min-width: initial; margin-right: initial; }
    .sub1_1 dl dt img { width: 100%; max-width: 200px; }
    .sub1_1 dl dd { margin-top: 20px; }
}

/* sub1_2 */
.sub1_2 { overflow: hidden; }
.sub1_2 .bg { z-index: 1; position: absolute; left: 0; width: 100%; height: 100%; }
.sub1_2 .bg .img2 { position: absolute; top: 5vw; left: 0; width: 590px; }
.sub1_2 .bg .img3 { position: absolute; right: 0; bottom: 5vw; width: 640px; }
.sub1_2 .imgbox { z-index: 2; position: relative; text-align: center; }
@media (max-width: 1920px) {
    .sub1_2 .bg .img2 { width: calc(250px + 18vw); }
    .sub1_2 .bg .img3 { width: calc(250px + 20vw); }
}
@media (max-width: 1279px) {
    .sub1_2 .bg .img2 { width: calc(200px + 12vw); }
    .sub1_2 .bg .img3 { width: calc(200px + 14vw); }
}
@media (max-width: 767px) {
    .sub1_2 .bg .img2 { left: -5vw; width: calc(150px + 8vw); opacity: 0.6; }
    .sub1_2 .bg .img3 { right: -4vw; width: calc(150px + 10vw); opacity: 0.6; }
}

/* sub1_3 */
.sub1_3 dl { display: flex; flex-wrap: nowrap; align-items: center; }
.sub1_3 dl dt { min-width: max-content; margin-right: 20px; }
.sub1_3 dl dt img { display: inline-block; width: 60px; }
.sub1_3 dl dd .textbox .text1 { font-weight: 600; font-size: 22px; color: #27407e; line-height: 1.5; }
.sub1_3 dl dd .textbox .text2 { font-size: 20px; color: #7b7b7b; line-height: 1.5; }
.sub1_3 dl dd .textbox .text2 br { display: none; }

.sub1_3 .mapcont { margin-top: 30px; height: 550px; }
.sub1_3 .mapcont .root_daum_roughmap { width: 100%; height: 100%; }
.sub1_3 .mapcont .root_daum_roughmap .wrap_map { width: 100%; height: calc(100% - 32px); }

@media (max-width: 1535px) {
    .sub1_3 dl dt { margin-right: 18px; }
    .sub1_3 dl dt img { width: calc(35px + 1.5vw); }

    .sub1_3 .mapcont { height: calc(300px + 15vw); }
}
@media (max-width: 1023px) {
    .sub1_3 dl { display: block; text-align: center; }
    .sub1_3 dl dt { margin-right: initial; min-width: initial; width: 100%; }
    .sub1_3 dl dt img { width: 100%; max-width: 40px; }
    .sub1_3 dl dd { margin-top: 10px; }
    .sub1_3 dl dd .textbox .text2 br { display: inline-block; }

    .sub1_3 .mapcont { height: calc(250px + 12vw); }
}
@media (max-width: 767px) {
    .sub1_3 .mapcont { margin-top: 20px; height: calc(200px + 10vw); }
}

/* sub3 */
.sub3 article { position: relative; margin-top: 50px; }
.sub3 article.no_top { margin-top: initial; }
.sub3 article strong { display: block; margin-bottom: 20px; font-weight: 700; font-size: 30px; color: #27407e; letter-spacing: -0.03em; }
@media (max-width: 1535px) {
    .sub3 article strong { margin-bottom: 17px; }
}
@media (max-width: 1279px) {
    .sub3 article strong { margin-bottom: 15px; }
}
@media (max-width: 1023px) {
    .sub3 article strong { margin-bottom: 13px; }
}

/* sub3_1 */
.sub3_1 .contents1 { padding: 30px; font-size: 20px; color: #676767; line-height: 1.5; background-color: #f6f9ff; }
.sub3_1 .contents1 * { font-size: inherit; color: inherit; line-height: inherit; }
.sub3_1 .contents1 dl { display: flex; flex-wrap: nowrap; }
.sub3_1 .contents1 dl dt { min-width: max-content; margin-right: 10px; }
.sub3_1 .contents1 dl dt img { display: inline-block; width: 9px; }
.sub3_1 .contents1 dl dd b { font-weight: 600; color: #27407e; }
.sub3_1 .contents2 { font-weight: 500; font-size: 20px; color: #000; line-height: 1.5; }
.sub3_1 .contents2 * { font-weight: inherit; font-size: inherit; color: inherit; line-height: inherit; }
.sub3_1 .contents2 ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.sub3_1 .contents2 ul li { width: 23.7%; border-radius: 20px; overflow: hidden; text-align: center; border: 1px solid #d5d5d5; }
.sub3_1 .contents2 ul li .top { padding: 20px 10px; }
.sub3_1 .contents2 ul li .bottom { padding: 13px; background-color: #f1f1f1; }
 
@media (max-width: 1535px) {
    .sub3_1 .contents1 { padding: 25px; }
    .sub3_1 .contents1 dl dt { margin-right: 9px; }
    .sub3_1 .contents1 dl dt img { width: 8px; }
    .sub3_1 .contents2 ul li { border-radius: 17px; }
    .sub3_1 .contents2 ul li .top { padding: 17px 9px; }
    .sub3_1 .contents2 ul li .bottom { padding: 11px }
}
@media (max-width: 1279px) {
    .sub3_1 .contents1 { padding: 20px; }
    .sub3_1 .contents1 dl dt { margin-right: 8px; }
    .sub3_1 .contents1 dl dt img { width: 7px; }
    .sub3_1 .contents2 ul li { border-radius: 15px; }
    .sub3_1 .contents2 ul li .top { padding: 15px 8px; }
    .sub3_1 .contents2 ul li .bottom { padding: 10px }
}
@media (max-width: 1023px) {
    .sub3_1 .contents1 { padding: 15px; }
    .sub3_1 .contents2 ul li { border-radius: 12px; }
    .sub3_1 .contents2 ul li .top { padding: 14px 7px; }
    .sub3_1 .contents2 ul li .bottom { padding: 7px }
}
@media (max-width: 767px) {
    .sub3_1 .contents1 { padding: 13px; }
    .sub3_1 .contents2 ul { flex-wrap: wrap; }
    .sub3_1 .contents2 ul li { width: 48%; }
    .sub3_1 .contents2 ul li:nth-of-type(n + 3) { margin-top: 4%; }
}

/* sub3_2 */
.sub3_2 article { border: 1px solid #889ac3; }
.sub3_2 article .text1 { padding: 15px 20px; font-size: 25px; color: #fff; line-height: 1.45; background-color: #073190; }
.sub3_2 article .text1 b { font-weight: 700; }
.sub3_2 article .contents1 { padding: 30px; }
.sub3_2 article .contents1 .text2 { padding-bottom: 30px; text-align: center; font-weight: 700; font-size: 22px; color: #073190; line-height: 1.45; }
.sub3_2 article .contents1 dl { display: flex; flex-wrap: nowrap; align-items: center; padding: 25px; background-color: #f6f9ff; }
.sub3_2 article .contents1 dl dt { position: relative; min-width: 150px; width: 150px; text-align: center; font-weight: 700; font-size: 20px; color: #073190; line-height: 1; }
.sub3_2 article .contents1 dl dd { position: relative; display: flex; flex-wrap: nowrap; width: 100%; padding-left: 40px; }
.sub3_2 article .contents1 dl dd::after { display: block; content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 80%; background-color: #d2d2d2; }
.sub3_2 article .contents1 dl dd .descbox { position: relative; width: 50%; font-size: 18px; color: #676767; line-height: 1.65; }
.sub3_2 article .contents1 dl dd .descbox * { font-size: inherit; color: inherit; line-height: inherit; }
.sub3_2 article .contents1 dl dd .descbox div { display: flex; flex-wrap: nowrap; align-items: baseline; }
.sub3_2 article .contents1 dl dd .descbox div p { display: inline-block; }
.sub3_2 article .contents1 dl dd .descbox div p:first-of-type { margin-right: 9px; min-width: max-content; }
.sub3_2 article .contents1 dl dd .descbox div p:first-of-type span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: #aab7d6; }
.sub3_2 article .contents1 dl dd .descbox div p:last-of-type { width: 100%; }
.sub3_2 article .contents1 dl.ver2 { margin-top: 20px; background-color: #f5f5f5; }
.sub3_2 article .contents1 dl.ver2 dt { color: #000; }
.sub3_2 article .contents1 dl.ver2 dd .descbox { width: 100%; }
.sub3_2 article .contents1 dl.ver2 dd .descbox div p:first-of-type span { background-color: #b6b6b6; }
@media (max-width: 1535px) {
    .sub3_2 article .contents1 dl dt { width: 140px; min-width: 140px; }
    .sub3_2 article .contents1 dl dd { padding-left: 30px; }
}
@media (max-width: 1279px) {
    .sub3_2 article .contents1 dl dt { width: 120px; min-width: 120px; }
    .sub3_2 article .contents1 dl dd { padding-left: 20px; }
}
@media (max-width: 1023px) {
    .sub3_2 article .contents1 dl { display: block; }
    .sub3_2 article .contents1 dl dt { width: 100%; min-width: initial; }
    .sub3_2 article .contents1 dl dd { display: block; padding-left: initial; padding-top: 10px; margin-top: 10px; }
    .sub3_2 article .contents1 dl dd::after { top: 0; left: 50%; transform: translateY(0); transform: translateX(-50%); width: 100%; height: 1px; }
    .sub3_2 article .contents1 dl dd .descbox { width: 100%; }
    .sub3_2 article .contents1 dl dd .descbox div p:first-of-type { margin-right: 5px; }
    .sub3_2 article .contents1 dl dd .descbox div p:first-of-type span { width: 6px; height: 6px; }
}


/* sub3_3 */
.sub3_3 .contents1 { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.sub3_3 .contents1 li { width: 32.4%; padding: 20px; overflow: hidden; border: 1px solid #e2e2e2; text-align: center; border-radius: 20px; }
.sub3_3 .contents2 { display: flex; flex-wrap: nowrap; justify-content: space-between; text-align: center; font-weight: 500; font-size: 20px; color: #5c5c5c; }
.sub3_3 .contents2 * { font-weight: inherit; font-size: inherit; color: inherit; }
.sub3_3 .contents2 li { width: 24.3%; padding: 20px 10px; border: 1px solid #d3d3d3; }
.sub3_3 .contents2.ver2 li { width: 100%; }

.sub3_3 .desc1 { margin-top: 20px; font-size: 20px; color: #ff0000; letter-spacing: -0.03em; line-height: 1.45; }

.sub3_3 .imgbox { text-align: center; }

@media (max-width: 1535px) {
    .sub3_3 .contents1 li { border-radius: 17px; }
    .sub3_3 .contents2 li { padding: 18px 9px; }
}
@media (max-width: 1279px) {
    .sub3_3 .contents1 li { border-radius: 15px; }
    .sub3_3 .contents2 li { padding: 15px 8px; }
}
@media (max-width: 1023px) {
    .sub3_3 .contents1 li { border-radius: 13px; }
    .sub3_3 .contents2 li { padding: 13px 6px; }
}
@media (max-width: 767px) {
    .sub3_3 .contents1 { flex-wrap: wrap; }
    .sub3_3 .contents1 li { width: 48%; border-radius: 11px; }
    .sub3_3 .contents1 li:nth-of-type(n + 3) { margin-top: 4%; }
    .sub3_3 .contents2 { flex-wrap: wrap; }
    .sub3_3 .contents2 li { width: 49%; padding: 11px 5px; }
    .sub3_3 .contents2 li:nth-of-type(n + 3) { margin-top: 2%; }
}
@media (max-width: 460px) {
    .sub3_3 .contents1 { display: block; }
    .sub3_3 .contents1 li { width: 100%; }
    .sub3_3 .contents1 li:nth-of-type(n + 3) { margin-top: initial; }
    .sub3_3 .contents1 li:nth-of-type(n + 2) { margin-top: 20px; }
    .sub3_3 .contents2 { display: block; }
    .sub3_3 .contents2 li { width: 100%; }
    .sub3_3 .contents2 li:nth-of-type(n + 3) { margin-top: initial; }
    .sub3_3 .contents2 li:nth-of-type(n + 2) { margin-top: 10px; }
}