@charset "UTF-8";

.hd_con{display: flex; align-items: center; justify-content: space-between;}
.hd_con .hd_lang{display: flex; align-items: center; color: #fff; margin-right: 20px;}
.hd_con .hd_lang img{margin-right: 10px;}
.hd_con .hd_lang span{margin: 0px 8px; color:rgba(255,255,255,0.4); }
.hd_con .hd_lang li a{color:rgba(255,255,255,0.4); }
.hd_con .hd_lang li a.on{color:#fff}
.hd_con .hd_log{color: #fff; display: flex; align-items: center; gap: 0px 8px; margin-right: 20px;}
.hd_con .hd_log li a{display: flex; align-items: center; gap: 0px 8px;}

.visual{height: 960px; background: url("../img/visual.png") no-repeat; background-size: cover; background-position: center; color: #fff;
}
.visual .width{height: 100%; display: flex; flex-direction: column; justify-content: center;}
.visual h2{font-size: 8.0rem; font-weight: 800; text-transform: uppercase; line-height: 100%; margin-bottom: 25px;}
.visual h2 .char{font-weight: 800}
.visual h2[data-animate="motion"] .char {
    display: inline-block;
    animation: slide-up 0.8s ease-out both;
    animation-delay: calc(0.03s * var(--char-index));
}

@keyframes slide-up {
    0% {
        transform: translateY(40px);
        opacity: 0;
        filter: blur(4px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

.visual p{font-size: 2.0rem; line-height: 135%; margin-bottom: 45px;}

.m1{position: relative;}
.m1 .m1_bg{width: 100%; display: block; position: absolute; top: -100px;}
.m1 .m1_bg img{width: 100%;}
.m1 .m_txt{text-align: center; margin-bottom: 175px;}
.m1 .m_txt img{margin-bottom: 35px;}
.m1 .m_txt h3{font-size: 2.6rem; font-weight: bold; color: #262626; line-height: 135%; margin-bottom: 15px;}
.m1 .m_txt h2{font-size: 1.8rem; font-weight: 500; color: #7a828e;}
.m1 .box{position: relative; width: 85%;}
.m1 .box > img{width: 100%; margin-bottom: 38px; position: relative; z-index: 2;}
.m1 .box h3{font-size: 2.4rem; font-weight: bold; color: #14579f; text-transform: uppercase; margin-bottom: 16px;}
.m1 .box h2{font-size: 7.2rem; color: #262626; font-weight: bold; text-transform: uppercase; margin-bottom: 20px;}
.m1 .box h2 span{font-size: 2.4rem; font-weight: 500;}
.m1 .box p{font-size: 3.2rem; font-weight: 500; color: #262626; margin-bottom: 35px;}
.m1 .box2{width: 80%; margin: 110px 0 110px auto}
.m1 .box2 .point{position: absolute; left: -22%; z-index: 0; top: 5%;}
.m1 .box a img{transition: 0.3s all;}
.m1 .box a:hover img{filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(95%);}

.m2{overflow: hidden;}
.m2 .m_txt{position: relative; margin-bottom: 45px;}
.m2 .m_txt h3{font-size: 2.4rem; font-weight: bold; color: var(--color); margin-bottom: 10px;}
.m2 .m_txt h2{font-size: 4.8rem; font-weight: bold; color: #303030;}
.m2 .m_txt a{position: absolute; bottom: 0; right: 0;}
.m2 .btn_wrap{border: 1px solid #f0f0f0; display: flex; align-items: center;justify-content: flex-start; width: 102px; margin-bottom: 45px;}
.m2 .btn_wrap .m2-prev{width: 34px; height: 34px; border-right: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #8a8a8; font-size: 2.0rem;}
.m2 .btn_wrap .m2-next{width: 34px; height: 34px; border-left:  1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #8a8a8; font-size: 2.0rem;}
.m2 .btn_wrap .control{width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 2.0rem; color: #8a8a8;}
.m2 .m_txt a img{transition: 0.3s all;}
.m2 .m_txt a:hover img{filter: brightness(0) saturate(100%) invert(27%) sepia(89%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(95%);}

.m3{background: url("../img/m3-bg.png")no-repeat; background-position: center; background-size: cover; background-attachment: fixed; text-align: center;}
.m3 h2{font-size: 3.2rem; font-weight: 600; color: #fff; margin-bottom: 25px; }

.m3 ul{display: flex; align-items: center; justify-content: center; gap: 15px 0; border-radius: 12px;background: rgba(255, 255, 255, 0.26);backdrop-filter: blur(6px); width: fit-content; margin: 28px auto 0 auto; padding: 16px 60px;}

.m3 ul li{display: flex; align-items: center; }
.m3 ul li a{font-size: 2.8rem; color: #fff; font-weight: 600;display: flex; align-items: center; gap: 0px 10px;}
.m3 ul li:first-child{padding-right: 25px; margin-right: 25px; position: relative;}
.m3 ul li:first-child:after{content: ''; width: 1px; height: 8px; background: rgba(255, 255, 255, 0.40); position: absolute; right: 0; top: 36%;}

@media (max-width: 600px){
	.m3 ul{
		flex-direction: column;  
		align-items: stretch; 
		justify-content: center;
		gap: 15px;   
		width: auto; 
		margin: 28px 15px 0;
		padding: 16px 20px; 
	}
		.m3 ul li{
		width: 80%;
		justify-content: left;
	}
	.m3 ul li a{
		display: flex;
		align-items: center;
		gap: 8px;
        font-size: 2.0rem;
	}
    .m3 ul li a svg{width: 24px;}
    .m3 ul li:first-child:after{display: none;}
    .m3 ul li:first-child{padding-right: 0px; margin-right: 0px;}
}

#ft{ background: #08121d; padding: 40px 0 20px 0; display: inline-block; }
#ft .ft_ser{display: flex; justify-content: flex-end; padding-bottom: 20px; color: #bbb; border-bottom: 1px solid #898989; gap: 0px 2%;}
#ft .copyright{padding-top: 20px; border-top: 1px solid #898989; color: #8a8a8a; font-size: 1.5rem;}
#ft .box_wrap{padding: 48px 0; max-width: 1200px; margin: 0 auto;display: flex; justify-content: space-between;}
#ft .box_wrap{color:#bbb; }
#ft .box_wrap dl{display: flex; align-items: flex-start; gap: 0px 7px;}
#ft .box_wrap dl dd{text-align: left; line-height: 135%;}

.p1 .p_txt{text-align: center; margin-bottom: 120px;}
.p1 .p_txt span{margin-bottom: 50px; display: block;}
.p1 .p_txt h2{font-size: 4.2rem; font-weight: bold; color: #262626; margin-bottom: 20px;}
.p1 .p_txt p{font-size: 1.9rem; color: #686868; line-height: 140%; margin-bottom: 50px;}
.p_btn{display: flex; justify-content: center; gap: 0px 6px;}
.p_btn a{width: 160px; height: 56px; border-radius: 5px; font-weight: 500; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;}
.p_btn a.sub{background: #14579f; color: #fff;}
.p_btn a.apply{border: 1px solid #14579f; color: #14579f; }
.player {
    padding-top: 56.25%;
    position: relative;
    max-width: 1200px; margin: 0 auto ; width: 100%;
}
.player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.playSwiper{width: 100%; max-width: 1200px;}
.swiper-button-next, .swiper-button-prev{color: #fff !important;}
.p1 .width2{border-top: 1px solid #999; margin-top: 45px; padding-top: 120px;}

.p1-1{position: relative; padding-bottom: 100px; border-bottom: 1px solid #d3d3d3;}
.p1-1 .p1-prev{position: absolute; left: -15%; top: 52%; cursor: pointer;}
.p1-1 .p1-next{position: absolute; right: -15%; top: 52%; cursor: pointer;}
.p_txt2{text-align: center; margin-bottom: 75px;}
.p_txt2 h3{font-size: 2.4rem; font-weight: bold; color: #14579f; margin-bottom: 5px;}
.p_txt2 h2{font-size: 4.2rem; font-weight: bold; color: #262626;}

.p1Swiper .pro_box:first-child{margin-top: 0px;}
.pro_box{display: flex; align-items: center; justify-content: space-between; gap: 20px 0; margin-top: 80px;}
.pro_box .text{width: 45%; }
.pro_box .text h3{font-size: 2.0rem; font-weight: bold; color: #14579f; margin-bottom: 15px;}
.pro_box .text h2{font-size: 3.6rem; font-weight: bold; color: #262626; margin-bottom: 35px;}
.pro_box .text ul li{font-size: 1.8rem; line-height: 150%; color: #686868;}
.pro_box .img{width: 50%;}
.pro_box .img img{width: 100%;}
.p1-2{margin-top: 120px;}
.speech-bubble {
    position: relative;
    background: #336ca8;
    color: white;
    padding: 14px 36px;
    border-radius: 30px;
    display: inline-block;
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 40px;
}
.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -18px; /* 말풍선 아래에 위치 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #336ca8; /* 화살표 색상 */
}
.p1-2 .box_wrap{text-align: center; margin-top: 120px;}
.p1-2 .box_wrap h2{font-size: 3.2rem; font-weight: bold; color: #262626; margin-bottom: 45px;}
.p1-2 .box_wrap ul{margin-bottom:110px;}
.p1-2 .box_wrap ul li{line-height: 170%; text-align: center; font-size: 2.4rem; font-weight: bold; color: #336ca8;}
.p1-2 .box_wrap p{ font-size: 2.6rem; line-height: 150%; margin-bottom: 110px; font-weight: bold; color: #c1d3e5;}
.p1-2 .box_wrap p b{font-weight: bold; color: #336ca8;}
.p1-2 .box_wrap .text{border: 1px solid #3c79bf; padding: 50px 0 40px 0; background: #f5f8fb; border-radius: 72px; position: relative;}
.p1-2 .box_wrap .text span{position: absolute; left: 0; right: 0; top: -60px;}
.p1-2 .box_wrap .text h4{font-size: 2.4rem; font-weight: 600;}
.p1-2 .box_wrap .text h4 b{font-weight: 600; color: var(--color2);}
.p1-3{margin-bottom: 120px; margin-top: 120px;}

.p2 .p_txt{text-align: center; margin-bottom: 80px;}
.p2 .p_txt span{margin-bottom: 30px; display: block;}
.p2 .p_txt h2{font-size: 4.2rem; font-weight: bold; color: #262626; margin-bottom: 50px;}
.p2 .p_txt p{font-size: 1.9rem; color: #686868; line-height: 140%; margin-bottom: 50px;}
.p2 .icon_wrap{display: flex; justify-content: space-around; margin-bottom: 100px;}
.p2 .icon_wrap .icon{text-align: center;}
.p2 .icon_wrap .icon p{font-size: 1.9rem; color: #686868; margin-top: 10px;}

.p2-1{padding-top: 120px; margin-top: 45px; border-top: 1px solid #999;}
.ptxt{font-size: 4.2rem;font-weight: bold; color: #262626; margin-bottom: 50px;}
.p2-1 .pbox span{width: 100%; display: block;}
.p2-1 .pbox span img{width: 100%;}
.p2-1 .pbox2{margin-top: 140px;}
.p2-1 .pbox2 .box_wrap{display: flex; gap: 45px 4%;}
.p2-1 .pbox2 .box_wrap .box{width: 48%; text-align: center;}
.p2-1 .pbox2 .box_wrap .box img{width: 100%;}
.p2-1 .pbox2 .box_wrap .box h3{font-size: 2.0rem; font-weight: bold; color: #3c79bf; margin-top: 30px; margin-bottom: 19px;}
.p2-1 .pbox2 .box_wrap .box h2{font-size: 2.8rem; font-weight: bold; color: #262626; margin-bottom: 10px;}
.p2-1 .pbox2 .box_wrap .box p{font-size: 1.6rem; color: #686868;}
.p2-1 .pbox3{margin-top: 120px;}
.p2-1 .pbox3 .box_wrap{display: flex; gap: 20px 2%;}
.p2-1 .pbox3 .box{width: 32%; text-align: center; border: 1px solid #dedede; padding: 85px 0; transition: 0.3s all;}
.p2-1 .pbox3 .box h2{font-size: 2.4rem; font-weight: bold; position: relative; padding-bottom: 20px; margin-top: 25px; margin-bottom: 21px;}
.p2-1 .pbox3 .box h2:after{content: ''; width: 39px; height: 1px; background: #dedede; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;}
.p2-1 .pbox3 .box p{font-size: 1.8rem; color: #686868; line-height: 140%;}
.p2-1 .pbox3 .box:hover{border: 1px solid #3c79bf; box-shadow: 0px 0px 9px rgba(60,121,191,0.18);}
.p2-1 .pbox4{ margin-top: 140px;}
.p2-1 .pbox4 .ptxt{display: flex; gap: 0px 25px; align-items: flex-end;}
.p2-1 .pbox4 .ptxt span{font-weight: 400; font-size: 2.8rem;}
.p2-1 .pbox4 img{width: 100%;}

.p3 .b_img img{width: 100%;}
.p3-1{padding-top: 120px; margin-top: 45px; border-top: 1px solid #999;}
.pbox .ptxt{text-align: center;}
.pbox .box_wrap{display: flex; justify-content: space-between; gap: 25px 4%;}
.pbox .box{text-align: center; width: 48%;}
.pbox .box h2{font-size: 2.4rem; font-weight: bold; color: #14579f; margin-bottom: 35px;}
.pbox .box img{width: 100%;}
.pbox .box .flow .text{background: #fff; padding: 40px 0 60px 0;}
.pbox .box:first-child .flow{border: 1px solid #dedede;}
.pbox .box:last-child .flow{border: 1px solid #3c79bf}
.pbox .box h3{font-size: 2.4rem; font-weight: bold; color: #14579f;}
.pbox .box ul li{font-size: 1.9rem; font-weight: 500; color: #686868; margin-top: 20px;}
.p3 .pbox3{margin-top: 120px;}
.p3 .pbox3 .ptxt{text-align: center;}
.p3 .pbox3 .box_wrap{display: flex; gap: 20px 2%;}
.p3 .pbox3 .box{width: 32%; text-align: center; border: 1px solid #dedede; padding: 85px 0; transition: 0.3s all;}
.p3 .pbox3 .box h2{font-size: 2.4rem; font-weight: bold; position: relative; padding-bottom: 20px; margin-top: 25px; margin-bottom: 21px;}
.p3 .pbox3 .box h2:after{content: ''; width: 39px; height: 1px; background: #dedede; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;}
.p3 .pbox3 .box p{font-size: 1.8rem; color: #686868; line-height: 140%;}
.p3 .pbox3 .box:hover{border: 1px solid #3c79bf; box-shadow: 0px 0px 9px rgba(60,121,191,0.18);}
.p3 .pbox4{margin-top: 70px;}
.p3 .pbox4 .pro_box{padding-bottom: 70px; border-bottom: 1px solid #e5e5e5; margin-top: 70px;}
.p3 .pbox4 .pro_box:nth-of-type(2){flex-direction: row-reverse;}
.p3 .pbox5{margin-top: 100px; margin-bottom: 200px;}
.p3 .pbox5 .ptxt{text-align: center;}
.p3 .pbox5 .img{max-width: 1080px; width: 100%; margin: 0 auto;}
.p3 .pbox5 .img img{width: 100%;}
.p3 .pbox6 .hp_txt{margin-bottom: 65px;}
.p3 .pbox6 .hp_txt h2{font-size: 3.2rem; font-weight: bold; color: #262626; text-align: center; margin-bottom: 32px}
.p3 .pbox6 .hp_txt p{font-size: 1.8rem; color: #686868; text-align: center;}
.p3 .pbox6 .pro_box{margin-bottom: 70px; padding-bottom: 70px; border-bottom: 1px solid #e5e5e5;}
.p3 .pbox6 .pro_box .img{text-align: center;}
.p3 .pbox6 .pro_box .img img{width: 70%;}
.p3 .pbox6 .pro_box h6{font-size: 2.4rem; color: #14579f; font-weight: 600}

.a1{padding: 150px 0;}
.a1 .a_txt{text-align: center; margin-bottom: 110px}
.a_txt h2{font-size: 4.2rem; font-weight: bold; color: #262626; margin-bottom: 30px;}
.a_txt p{font-size: 1.9rem; color: #686868; line-height: 145%;}
.a1 .icon_wrap{display: flex; justify-content: space-between; gap: 45px 2%;}
.a1 .icon_wrap .box{width: 25%; text-align: center;}
.a1 .icon_wrap .box h3{font-size: 1.9rem; color: #686868; margin-top: 18px; margin-bottom: 25px;}
.a1 .icon_wrap .box h2{font-size: 1.9rem; font-weight: 500;}
.a1-2{margin-bottom: 200px;}
.a1-2 .a_txt{text-align: center; margin-bottom: 45px;}
.a1-2 .a_txt h2{margin-bottom: 15px;}
.a1-2 .box_wrap1{display: flex; gap: 20px 3%; margin-bottom: 100px;}
.a1-2 .box_wrap1 .box{width: 33%; padding: 50px 0 80px 30px; background-image: url("../img/a1-bg1.png"); background-repeat: no-repeat; background-position: bottom right;}
.a1-2 .box_wrap1 .box h3{font-size: 1.8rem; font-weight: bold; color: rgba(255,255,255,0.6); margin-bottom: 5px;}
.a1-2 .box_wrap1 .box h4{font-size: 2.4rem; font-weight: bold; color: #fff; margin-bottom: 30px;}
.a1-2 .box_wrap1 .box p{font-size: 1.8rem; font-weight: 400; color: #fff;}
.a1-2 .box_wrap1 .box1{background-color: #0788cc; }
.a1-2 .box_wrap1 .box2{background-color: #67a0d7; }
.a1-2 .box_wrap1 .box3{background-color: #354a77; }
.a1-2 .box_wrap2{display: flex; gap: 55px 5%; flex-wrap: wrap;}
.a1-2 .box_wrap2 .box{width: 16%; text-align: center;}
.a1-2 .box_wrap2 .box p{margin-top: 18px; font-size: 1.9rem; color: #686868;}
.a2 .a_txt{text-align: center; margin-bottom: 95px;}
.a2 .a_txt img{width: 100%;}
.a2 .a_txt p{margin-top: 45px; line-height: 150%;}
.a2 .his_wrap{display: flex; gap: 15px 4%; margin-top: 70px;}
.a2 .his_wrap .year{width: 34%; border-top: 2px solid #16498b; padding-top: 25px;}
.a2 .his_wrap .year h2{font-size: 5.2rem; font-weight: 800; color: #16498b; margin-bottom: 18px;}
.a2 .his_wrap .year h3{font-size: 2.4rem; font-weight: 600; color: #aaaaaa;}
.a2 .his_wrap .text{width: 66%; border-top: 1px solid #e4e4e4;}
.a2 .his_wrap .text dl{padding: 18px 0; display: flex; border-bottom:  1px solid #e4e4e4;}
.a2 .his_wrap .text dl dt{min-width: 135px; padding-left: 5px; font-weight: 500; font-size: 2.0rem; color: #16498b;}
.a2 .his_wrap .text dl dd{font-size: 1.8rem; color: #494949; line-height: 170%;}
.a3{padding: 150px 0;}
.a3 .width{display: flex; gap:  85px 1%; flex-wrap: wrap;}
.a3 .box{width: 24%; text-align: center;}
.a3 .box img{width: 100%;}
.a3 .box p{font-size: 2.0rem; font-weight: 600; color: #b6b6b6; margin-top: 20px;}
.a4{padding-bottom: 150px;}
.a4 .a_txt{text-align: center; }
.a4 .root_daum_roughmap_landing{width: 100% !important;}
.a4 .root_daum_roughmap .cont .section.lst{display: none;}
.a4 .root_daum_roughmap .wrap_controllers{display: none;}
.a4 .map_info{width: 90%; margin: -55px auto 0 auto; position: relative; z-index: 9; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); padding: 36px 0px; display: flex; align-items: center; }
.a4 .map_info .mlogo{width: 26%; text-align: center;}
.a4 .map_info .minfo{width: 72%; padding-left: 40px; border-left: 1px solid #e0e0e0;}
.a4 .map_info .minfo ul li{display: flex; align-items: center; gap: 0px 4%;}
.a4 .map_info .minfo ul li span{display: flex; align-items: center; gap: 0px 5px; font-weight: bold;  color: #494949; white-space: nowrap;}
.a4 .map_info .minfo ul li p{color: #686868; white-space: nowrap;}
.a4 .map_info .minfo .two{margin-top: 18px; display: flex; align-items: center; gap: 18px 7%;}

.s1 .latest{max-width: 850px; margin: 0 auto; width: 92%;}

.my .my_top{display: flex; gap: 20px 2%; margin-bottom: 40px;}
.my .my_top .box1{width: 36%; background: #F7F7F7; border-radius: 8px; padding: 28px 28px 32px 28px;}
.my .my_top .box1 h2{font-size: 2.4rem; font-weight: 600; color: #111; line-height: 140%; margin-bottom: 94px;}
.my .my_top .box2{width: 62%; background: #F7F7F7; border-radius: 8px; padding: 28px;}
.my .my_top .box2 h6{color: #555; font-weight: 500; margin-bottom: 36px;}
.my .my_top .box2 h2{display: flex; justify-content: center; align-items: center; margin-bottom: 4px;}
.my .my_top .box2 h2 span{background: #081C4E; padding: 8px 20px; border-radius: 50px; margin-left: 20px; font-size: 2.4rem; color: #fff; font-weight: 600;}
.my .my_top .box2 h3{text-align: center; font-size: 1.8rem; font-weight: 500; color: #111; line-height: 144%; margin-bottom: 4px;}
.my .my_top .box2 h4{text-align: center; font-size: 1.8rem; font-weight: 500; color: #505050;}
.my .my_link{display: flex;}
.my .my_link li{width: 33.33333%; }
.my .my_link li a{width: 100%; padding: 20px 0; color: #999; line-height: 140%; display: flex; align-items: center; justify-content: center; font-size: 2.0rem; border-bottom: 2px solid #E5E5EC;}
.my .my_link li.on a{border-bottom: 2px solid #000; font-weight: 600; color: #111;}
.my .box_wrap{display: flex; gap: 20px 2%;}
.my .box_wrap .box1{width: 36%; padding: 48px 0 0 70px;}
.my .box_wrap .box1 h2{color: #505050; font-weight: 500; line-height: 144%; font-size: 1.8rem; margin-bottom: 12px;}
.my .box_wrap .box1 h3{font-size: 2.4rem; line-height: 140%; font-weight: 600; }
.my .box_wrap .box2{padding: 48px; width: 62%;}
.my .box_wrap .box2 .info_wrap{display: flex; gap: 50px 2%; flex-wrap: wrap; margin-bottom: 44px;}
.my .box_wrap .box2 .info_wrap dl{width: 49%;}
.my .box_wrap .box2 .info_wrap dl dt{font-size: 1.4rem; color: #505050; font-weight: 500; margin-bottom: 8px;}
.my .box_wrap .box2 .info_wrap dl dt span{color: #DC0000; font-size: 18px;}
.my .box_wrap .box2 .info_wrap dl dd{color: #111; font-size: 2.4rem; font-weight: 500; line-height: 140%;}
.my .box_wrap .box2 .my_btn{width: 100%; height: 52px; padding: 12px; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-weight: 600;}
.my .box_wrap .box2 .my_btn1{background: #111; color: #fff; margin-bottom: 12px;}
.my .box_wrap .box2 .my_btn2{background: #fff; border: 1px solid #E5E5EC; margin-bottom: 24px;}
.my .box_wrap .box2 .secession{color: #111; line-height: 150%; border-bottom: 1px solid #111; padding-bottom: 3px;}
.my .ap_wrap{ margin-top: 48px;}
.my .ap_wrap .ap_top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.my .ap_wrap .ap_top h6{color: #505050;}
.my .ap_wrap .ap_top form{border-bottom: 1px solid #E5E5EC; max-width: 320px; display: flex; align-items: center; justify-content: space-between;}
.my .ap_wrap .ap_top form input{width: 100%; padding: 16px 10px;}
.my .ap_wrap .ap_top form button{width: 60px; min-width: 60px; border: none; background: none;}
.my .ap_wrap table{width: 100%; border-top: 2px solid #111;}
.my .ap_wrap table th{background: #f9f9f9; padding: 20px 10px; border-bottom: 1px solid #E5E5EC; font-weight: 500;}
.my .ap_wrap table td{padding: 20px 10px; border-bottom: 1px solid #E5E5EC; color: #505050;}
.my .ap_wrap table td:first-child{text-align: center;}
.my .ap_wrap table td:last-child{text-align: center;}

.my .ap_wrap2{margin-top: 48px;}
.my .ap_wrap2 table{width: 100%; border-top: 2px solid #111;}
.my .ap_wrap2 table th{background: #f9f9f9; padding: 20px 10px; border-bottom: 1px solid #E5E5EC; font-weight: 500;}
.my .ap_wrap2 table td{padding: 20px 10px; border-bottom: 1px solid #E5E5EC; color: #505050; text-align: center; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1; /* 라인수 */-webkit-box-orient: vertical;}

.quick{position: fixed; right: 0; top: 35%; z-index: 9;}

.buy .width3{display: flex; align-items: flex-start; justify-content: space-between; gap: 25px 2%;}
.buy .left{width: 75%;}
.buy .left .plan{font-size: 2.4rem; font-weight: 600; color: #333; margin-bottom: 20px;}
.buy .left .label_wrap{display: flex; gap: 15px 1%;}
.buy .left .label_wrap input{display: none;}
.buy .left .label_wrap label{width: 100%; border: 1px solid #d9d9d9; padding: 45px 5px 40px 5px; text-align: center; box-shadow: 0 0 15px rgba(0,0,0,0.1); 
display: inline-block; }
.buy .left .label_wrap label h2{display: flex; align-items: center; justify-content: center; gap: 0px 3%;}
.buy .left .label_wrap label h2 span{background: #394971; border-radius: 30px; text-align: center; padding: 8px 15px; color: #fff; font-size: 1.8rem; font-weight: 600; color: #fff;}
.buy .left .label_wrap label h3{margin-top: 20px; font-size: 1.8rem; font-weight: 500; color: #333; margin-bottom: 5px;}
.buy .left .label_wrap label h4{ font-size: 1.8rem; font-weight: 500; color: #cbcbcb;}
.buy .left .label_wrap input:checked + label{border: 1px solid #5d6c92;}
.buy .inbox{margin-bottom: 50px;}
.buy .inbox2 h2 span{font-size: 1.5rem; font-weight: 200; color: #666; margin-left: 10px;}
.buy .inbox2 .intxt{display: flex; gap: 6px 0; margin-top: 10px;}
.buy .inbox2 .intxt h3{min-width: 110px; padding-top: 10px; font-size: 1.8rem; color: #333;}
.buy .inbox2 .intxt h3 span{color:#b60d0d;}
.buy .inbox2 .intxt input{width: 100%; height: 40px; border: 1px solid #e2e2e2; padding-left: 10px;}
.buy .inbox2 .intxt textarea{border: 1px solid #e2e2e2; width: 100%; padding: 10px; height: 75px; resize: none;}
.collapsible {  cursor: pointer; width: 100%; padding: 18px 35px; background: #f5f6f6; text-align: left; font-size: 1.8rem; font-weight: 600; color: #464646; border: none; margin-bottom: 10px;}
/* .collapsible.active,
.collapsible:hover {  background-color: #555;} */
.content {  padding: 0px 18px;  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;  background-color: #fff;}
.content .box{padding: 10px 0px 18px;}
.content .box p{color: #686868; line-height: 140%; }
.collapsible:after {  content: url('../img/down.png');  color: white;  font-weight: bold;  float: right;  margin-left: 5px;}
.collapsible.active:after {  content: url('../img/up.png');}
.buy .awrap{margin-top: 50px;}

.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.5);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 830px;    line-height: 25px;}
.pop-close {  position: absolute;  top: 12px;  right: 10px;  width: 30px;  height: 30px;  cursor: pointer; font-size:24px; color: #fff; z-index: 9;}
.pop-close i{font-size: 24px;}
#popup2 .pop-inner{background: #fff; border-radius: 10px; padding: 20px; max-width: 520px;}
#popup2 .pop-inner h2{font-size: 2.0rem; font-weight: bold; margin-bottom: 10px;}
#popup2 .pop-inner p{font-size: 1.6rem; color: #555; line-height: 160%;}
#popup2 .pop-close{color: #666;}
.buy .right{width: 25%; min-width: 265px; padding: 20px; border: 1px solid #e2e2e2; margin-top: 50px; position: sticky; top: 100px;}
.buy .right .rbox h2{font-weight: 600; color: #333; padding-bottom: 8px; border-bottom: 1px solid #e2e2e2;}
.buy .right .rbox dl{display: flex; margin-top: 12px; justify-content: space-between; color: #666;}
.buy .right .rbox{margin-bottom: 37px;}
.buy .right .rbox2 h2{font-weight: 600; color: #333; padding-bottom: 8px; border-bottom: 1px solid #e2e2e2;}
.buy .right .rbox2 .pay{display: flex; flex-direction: column; gap: 4px 0; margin-top: 14px; margin-bottom: 16px;}
.buy .right .rbox2 .pay label{color: #555;}
.buy .right .rbox2 .pay input[type="radio"] {-webkit-appearance: none; /* 브라우저 기본 스타일 제거 */-moz-appearance: none;appearance: none;width: 18px;height: 18px;border-radius: 50%; /* 모서리를 살짝 둥글게 */display: inline-block;vertical-align: middle;margin-right: 5px;position: relative; background: #eee;}
.buy .right .rbox2 .pay input[type="radio"]::after {content: '✓'; /* 체크 표시 */color: white; /* 체크 표시 색상 */font-size: 14px; /* 체크 표시 크기 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 가운데 정렬 */line-height: 1; /* 체크 모양이 정렬될 때 필요한 값 */}
/* 선택된 라디오 버튼의 스타일 */
.buy .right .rbox2 .pay input[type="radio"]:checked {background-color: #686868; color: #686868;}
.buy .right .rbox2 .pay label.on{color: #686868;}
.buy .right .rbox2 h3{color: #686868; line-height: 140%;}
.buy .right .rbox2 h4{color: #686868; line-height: 160%;}
.buy .right .rbox2 input{width: 100%; border: 1px solid #e2e2e2; height: 40px; padding-left: 10px;}
.buy .right .all_agree{ margin-top: 35px; display: flex; flex-direction: column; gap: 8px 0; padding-bottom: 30px; border-bottom: 1px solid #e2e2e2;}
.buy .right .all_agree label{font-size: 1.5rem; color: #686868;}
.buy .right .all_agree label input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 10px;}
.buy .right .all_agree label input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.buy .right .all_agree label input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.buy .right .all_agree label img{margin-right: 5px;}
.buy .right .result{display: flex; justify-content: space-between; align-items: center; padding: 18px 0;}
.buy .right .result dt{font-weight: 600; color: #333;}
.buy .right .result dd{font-weight: 700; color: #333; font-size: 2.4rem;}
.buy .right button{width: 100%; height: 45px; background: #08439a; font-weight: 600; color: #fff; border: none;}

.e_res{padding: 150px 0 120px 0;}
.e_res .res_wrap{max-width: 640px; width: 92%; margin: 0 auto;}
.e_res .res_wrap h2{text-align: center; margin-bottom: 50px;}
.e_res .res_wrap h3{color: #111; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.6px; margin-bottom: 24px;}
.e_res .res_wrap .input_box{margin-bottom: 24px;}
.e_res .res_wrap .input_box h4{color: #111; font-size: 1.8rem; letter-spacing: -0.45px; margin-bottom: 10px; font-weight: 600; }
.e_res .res_wrap .input_box h4 span{color: #DC0000;font-size: 1.4rem;}
.e_res .res_wrap .input_box input{height: 60px;border: 1px solid #E5E5EC; width: 100%; border-radius: 8px; padding-left: 10px; font-size: 1.5rem;}
.e_res .res_wrap .input_box input::placeholder{color: #999;}
.e_res .res_wrap .input_box .alert_p{font-size: 1.3rem; color: #e52528;  margin-top: 6px;}
.e_res .res_wrap .input_box .tel_box{display: flex; align-items: center; gap: 0px 2%;}
.e_res .res_wrap .input_box .tel_box button{min-width: 96px; height: 60px; border-radius: 8px;
    background: #07439B; border: none; color: #fff; font-size: 1.4rem; font-weight: 600;}
.e_res .res_wrap .input_box4{padding-bottom: 40px; border-bottom: 1px solid #E5E5EC; margin-bottom: 40px;}
.e_res .pri_wrap{margin-bottom: 40px;}
.e_res .pri_wrap .top{display: flex; gap: 0px 12px; margin-bottom: 20px;}
.e_res .pri_wrap input[type="checkbox"]{appearance: none;min-width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;}
.e_res .pri_wrap input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.e_res .pri_wrap input[type="checkbox"]::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.e_res .pri_wrap .top h4{font-size: 2.4rem; color: #111; font-weight: 600; margin-bottom: 8px;}
.e_res .pri_wrap .top p{color: #505050; line-height: 150%;}
.e_res .pri_wrap .box_wrap{border-radius: 12px; border: 1px solid #E5E5EC; padding: 40px 40px 20px 40px;}
.e_res .pri_wrap .box_wrap label{display: flex; align-items: center; position: relative; margin-bottom: 20px;}
.e_res .pri_wrap .box_wrap label input{margin-right: 10px;}
.e_res .pri_wrap .box_wrap label a{position: absolute; right: 0;}
.e_res .pri_wrap .box_wrap label p{font-size: 1.8rem; color: #505050; font-weight: 500;}
.e_res .pri_wrap .box_wrap label p .c1{color: #07439B; font-size: 1.8rem; font-weight: 500;}
.e_res .pri_wrap .box_wrap label p .c2{ font-size: 1.8rem; font-weight: 500;}
.e_res .pri_wrap .box_wrap div{padding-left: 40px;}
.e_res .submit{width: 100%; height: 60px; border-radius: 8px; background: #07439B; color: #fff; font-size: 1.8rem; font-weight: 600; border: none;}

.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.3);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 600px;  height: 50vh;  max-height: 600px;  padding: 50px 20px;  background: #fff;  border-radius: 20px;}
.pop-close {  position: absolute;  top: 5px;  right: 5px;  width: 30px;  height: 30px;  cursor: pointer;}
.pop-close i{font-size: 24px;}

#popup5 .pop-close{color: #444;}
#popup6 .pop-close{color: #444;}
#popup7 .pop-close{color: #444;}
#popup8 .pop-close{color: #444;}

@media all and (max-width: 1400px){}
@media all and (max-width: 1200px){
    .visual span img{width: 70px;}
    .visual h2{font-size: 6.0rem;}
    .visual p{font-size: 1.8rem;}
    .visual a img{width: 120px;}
    .m1 .m_txt img{width: 170px;}
    .m1 .m_txt h3{font-size: 2.2rem;}
    .m1 .m_txt h2{font-size: 1.6rem;}
    .m1 .m_txt{margin-bottom: 100px;}
    .m1 .box h3{font-size: 2.0rem; margin-bottom: 5px;}
    .m1 .box h2{font-size: 5.0rem;}
    .m1 .box h2 span{font-size: 2.0rem;}
    .m1 .box p{font-size: 2.4rem; margin-bottom: 20px;}
    .m1 .box a img{width: 120px;}
    .m1 .box2 .point img{width: 200px;}
    .m2 .m_txt h3{font-size: 2.0rem;}
    .m2 .m_txt h2{font-size: 3.6rem;}
    .m2 .m_txt a img{width: 120px;}
    .m3{background-attachment: initial;}
    .m3 h2{font-size: 2.6rem;}
    .m3{padding: 100px 0;}
}
@media all and (max-width: 1024px){
    .visual span img{width: 50px; margin-bottom: 10px;}
    .visual h2{font-size: 4.5rem;}
    .m1 .box p{font-size: 2.0rem;}
    .m1 .box h2{font-size: 3.6rem;}
    .visual{height: 720px;}
    .sub_visual .sub_top_text h2{font-size: 3.0rem;}
    .sub_visual .sub_top_text h3{font-size: 1.6rem;}
    .p1 .p_txt span {margin-bottom: 30px;}
    .p1 .p_txt span img{width: 200px;}
    .p1 .p_txt h2{font-size: 3.0rem;}
    .p1 .p_txt p{font-size: 1.6rem; margin-bottom: 30px;}
    .p1 .p_txt p br{display: none;}
    .p_txt2 h3{font-size: 2.0rem;}
    .p_txt2 h2{font-size: 3.6rem;}
    .pro_box .text h3{margin-bottom: 5px; font-size: 1.8rem;}
    .pro_box .text h2{font-size:2.8rem; margin-bottom: 15px;}
    .speech-bubble{font-size: 1.8rem;}
    .p1-2 .box_wrap h2{font-size: 2.6rem; margin-bottom: 20px;}
    .p1-2 .box_wrap ul li{font-size: 2.0rem;}
    .p1-2 .box_wrap .text span img{width: 40px;}
    .p1-2 .box_wrap .text{padding: 30px 5px 20px 5px;}
    .p1-2 .box_wrap ul{margin-bottom: 70px;}
    .p1-2 .box_wrap .text span{top: -45px;}
    .p1-2 .box_wrap .text h4{font-size: 1.6rem; }
    .p1-2 .box_wrap .text h4 br{display: none;}
    .p2 .p_txt span{margin-bottom: 30px;}
    .p2 .p_txt span img{width: 200px;}
    .p2 .p_txt h2{font-size: 3.0rem; margin-bottom: 30px;}
    .ptxt{font-size: 3.6rem;}
    .a_txt h2{font-size: 3.6rem;}
    .my .my_top .box2 h2 img{width: 260px;}
    .my .my_top .box2 h2 span{font-size: 2.0rem; padding: 5px 16px;}
    .my .ap_wrap2 .scroll{overflow-x: scroll;}
    .my .ap_wrap2 .scroll table{width: 830px;}
    .buy .left .label_wrap label h2 img{width: 160px;}
    .buy .left .label_wrap label h2 span{padding: 5px 12px; font-size: 1.5rem;}
    .buy .right{margin-top: 45px;}
}
@media all and (max-width: 900px){}
@media all and (max-width: 850px){
    .p2 .icon_wrap{flex-wrap: wrap; gap: 25px 0;}
    .p2 .icon_wrap .icon{width: 50%;}
    .p3 .pbox3 .box{padding: 50px 0;}
    .p3 .pbox3 .box_wrap{flex-wrap: wrap;}
    .p3 .pbox3 .box{width: 100%;}
    .a1-2 .box_wrap1{flex-wrap: wrap;}
    .a1-2 .box_wrap1 .box{width: 100%; padding: 30px 0 50px 20px;}
    .a4 .map_info .minfo{padding-left: 20px; border-left: 0px;}
    .a4 .map_info .mlogo{margin-left: 20px;}
    .buy .width3{flex-direction: column;}
    .buy .left{width: 100%;}
    .buy .right{margin-top: 30px; position: initial;}
    .buy .right{width: 100%;}
}
@media all and (max-width: 768px){
    .visual{height: 600px;}
    .visual h2{font-size: 2.8rem; letter-spacing: -0.08em}
    .quick a img{width: 36px;}
    #ft .box_wrap{flex-direction: column; gap: 20px 0; padding: 15px 0;}
    .m1 .m_txt h3{font-size: 2.0rem;}
    .m1 .box{width: 100%;}
    .m2 .m_txt h2{font-size: 3.0rem;}
    .m2 .m_txt a{position: initial; margin-top: 10px; display: block;}
    .p_btn a{width: 120px; height: 45px;}
    .p1 .p_txt{margin-bottom: 80px;}
    .pro_box{flex-direction: column;}
    .pro_box .img{width: 100%;}
    .pro_box .text{width: 100%;}
    .p1-3{margin-bottom: 80px; margin-top: 80px;}
    .p1-2{padding-bottom: 80px; margin-top: 80px;}
    .p1-1{padding-bottom: 80px;}
    .p2-1{padding-top: 80px;}
    .ptxt{font-size: 2.6rem; margin-bottom: 30px;}
    .p2-1 .pbox2 .box_wrap{flex-direction: column;}
    .p2-1 .pbox2 .box_wrap .box{width: 100%;}
    .p2-1 .pbox2 .box_wrap .box h3{font-size: 1.8rem; margin-bottom: 12px;}
    .p2-1 .pbox3 .box{padding: 50px 0;}
    .p2-1 .pbox3 .box_wrap{flex-wrap: wrap;}
    .p2-1 .pbox3 .box{width: 100%;}
    .p2-1 .pbox4 .ptxt span{font-size: 1.8rem;}
    .p2-1 .pbox4 .ptxt{flex-direction: column; align-items: flex-start;gap: 6px 0;}
    .p2 .p_txt h2{font-size: 2.8rem;}
    .p2 .p_txt p{font-size: 1.6rem;}
    .p2 .p_txt p br{display: none;}
    .pbox .box h2{font-size: 2.0rem; margin-bottom: 20px;}
    .pbox .box .flow .text{padding: 20px 0 35px 0;}
    .pbox .box h3{font-size: 2.0rem;}
    .pbox .box ul li{font-size: 1.6rem; margin-top: 10px;}
    .pbox .box_wrap{flex-wrap: wrap; gap: 45px 0;}
    .pbox .box{width: 100%;}
    .p3-1{padding-top: 80px;}
    .speech-bubble{font-size: 1.6rem; padding: 12px 20px;}
    .p1-2 .box_wrap h2{font-size: 2.0rem;}
    .p1-2 .box_wrap p{font-size: 2.0rem; margin-bottom: 70px;}
    .p3 .pbox4 .pro_box:nth-of-type(2){flex-direction: column;}
    .p3 .pbox6 .hp_txt h2{font-size: 2.4rem;}
    .p3 .pbox6 .pro_box .img img{width: 80%;}
    .p3-1 .pbox6 .pro_box .timg img{width: 60%;}
    .p3-1 .pbox6 .pro_box .timg{display: block; text-align: center;}
    .p3 .pbox5{margin-bottom: 120px;}
    .a1 .icon_wrap{flex-wrap: wrap;}
    .a1 .icon_wrap .box{width: 48%;}
    .a1 .icon_wrap .box h2{font-size: 1.7rem;}
    .a_txt h2{font-size: 2.6rem;}
    .a_txt p{font-size: 1.6rem;}
    .a1-2{margin-bottom: 120px;}
    .a2 .a_txt p br{display: none;}
    .a2 .his_wrap .year h2{font-size: 4.5rem; margin-bottom: 10px;}
    .a2 .his_wrap .year h3{font-size: 2.0rem;}
    .a2 .his_wrap .text dl dt{font-size: 1.7rem; min-width: 100px;}
    .a2 .his_wrap .text dl dd{font-size: 1.6rem;}
    .a3 .box p{font-size: 1.7rem; margin-top: 10px;}
    .a3 .box{width: 48%;}
    .a4 .map_info{flex-direction: column; gap: 15px 0; align-items: flex-start;}
    .a4 .map_info .mlogo{margin-bottom: 10px;}
    .a4 .map_info .minfo ul li{flex-direction: column; gap: 5px 0; align-items: flex-start;}
    .my .my_top{flex-direction: column;}
    .my .my_top .box1{width: 100%;  padding: 20px;}
    .my .my_top .box2{width: 100%; padding: 25px;}
    .my .my_top .box1 h2{margin-bottom: 40px;}
    .my .my_top .box2 h6{margin-bottom: 20px;}
    .my .my_link li a{padding: 10px 0; font-size: 1.8rem;}
    .my .box_wrap .box1{padding: 35px 0 0 0;}
    .my .box_wrap .box2{padding: 35px 0 0 0;}
    .my .ap_wrap .ap_top{flex-direction: column; align-items: flex-start;}
    .p3-1 .pbox6 .pro_box{flex-direction: column-reverse;}
    .p1-1 .p1-prev{display: none}
    .p1-1 .p1-next{display: none}
}
@media all and (max-width: 650px){
    .a1-2 .box_wrap2 .box{width: 20%;}
    .a1-2 .box_wrap2 .box p{font-size: 1.7rem; }
    .a2 .his_wrap{flex-direction: column;}
    .a2 .his_wrap .year{width: 100%;}
    .a2 .his_wrap .text{width: 100%;}
    .my .box_wrap .box1{display: none;}
    .my .box_wrap .box2{width: 100%;}
    .e_res .pri_wrap .top h4{font-size: 1.9rem; }
    .e_res .pri_wrap .box_wrap{padding: 20px 20px 10px 20px;}
    .e_res .pri_wrap .box_wrap label{margin-bottom: 13px;}
    .e_res .pri_wrap .box_wrap label p{font-size: 1.6rem;}
    .e_res .pri_wrap .box_wrap div{padding-left: 20px;}
}