@charset "UTF-8";

.pc_head{display: flex; justify-content: space-between; align-items: center; width: 100%; margin-left: 25px;}
.pc_head .pc_user{display: flex; gap: 0px 20px; align-items: center;}
.pc_head .lomy{display: flex; gap: 0px 6px; color: #fff;}
.pc_head .lomy a{color: #fff; font-size: 1.5rem; font-weight: 200;}
.pc_head .lomy span{color: #fff; font-size: 1.5rem; font-weight: 200;}
.pc_head .lang{display: flex; gap: 0px 10px;}
.pc_head .lang li{width: 45px; height: 45px; border: 1px solid #fff; border-radius: 50%; text-align: center; line-height: 45px; opacity: 0.6;}
.pc_head .lang li a{color: #fff; font-size: 1.5rem; font-weight: 300;}
.pc_head .lang li.on{opacity: 1;}
.pc_head .lang li.on a{border-bottom: 1px solid #fff;}
.pc_head .lang li:hover{opacity: 1}
.pc_head .lang li:hover a{font-weight: 600; border-bottom: 1px solid #fff;}


#header.active .pc_head .lomy{color: #000; font-weight: 300;}
#header.active .pc_head .lomy a{color: #000; font-weight: 300;}
#header.active .pc_head .lomy span{color: #000; font-weight: 300;}
#header.active .pc_head .lang li{border: 1px solid #000;}
#header.active .pc_head .lang li a{color: #000;}
#header.active .pc_head .lang li:hover a{border-bottom: 1px solid #000;}

.main_img img{width: 100%; height: 100%; object-fit: cover;}
.main_text{height: 100%; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto;}
.main_text .num{color: rgba(255,255,255,0.4); font-weight: bold; font-size: 2.2rem; margin: 0px;}
.main_text .num b{color: #fff;}
.main_text h2{font-size: 6.2rem; margin-top: 35px; font-weight: 800; color: #fff; margin-bottom: 20px;}
.main_text p{font-size: 2.6rem; color: #fff; font-weight: 500;}

.swiper_btn_wrap{position: absolute; bottom: 250px; left: 0; right: 0; margin: 0 auto; z-index: 10;}
.swiper_btn_wrap .swiper-pagination-bullet{margin: 0px 20px !important; background: #fff; opacity: 1; position: relative;}
.swiper_btn_wrap .swiper-pagination-bullet-active:before{content: ''; width: 35px; height: 35px; background: rgba(255,255,255,0.2); border-radius: 50%; position: absolute; left: -13px; top: -14px;}

.main1{padding: 280px 0; position: relative;}
.main1 h2{text-align: center; padding-bottom: 80px; margin-bottom: 35px; position: relative;}
.main1 h2:after{content: ''; width: 2px; height: 60px; background: #dbdbdb; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 0;}
.main1 h3{text-align: center; margin-top: 30px; font-size: 6.2rem; font-weight: 800;}
.main1 p{text-align: center; font-size: 2.4rem; margin-top: 10px;}
.main1 p b{color: var(--color);}
.main1 a{width: 230px; height: 60px; text-align: center; line-height: 58px; color: #fff; background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); display: block; border-radius: 30px; margin: 90px auto 0 auto; font-size: 2.0rem; font-weight: bold;transition: all 0.5s ease-in; border: 2px solid #fff;}
.main1 a span{color: #fff; margin-left: 15px; font-weight: bold;}
.main1 a:hover{background: linear-gradient(95deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); transition: all 0.5s ease-in; color: transparent;
    -webkit-background-clip: text; border: 2px solid var(--color)}
.main1 a:hover span{color: transparent;
    -webkit-background-clip: text;  transition: all 0.5s ease-in;}
.main1 .point1{position: absolute; top: 12%; left: 10%;}
.main1 .point2{position: absolute; top: 55%; left: 0;}
.main1 .point3{position: absolute; top: 25%; right: 0;}

.main2 .title{text-align: center; margin-bottom: 70px;}
.main2 .title h2{display: inline-block;  background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); color: transparent; font-size: 4.8rem; font-weight: 800;  -webkit-background-clip: text; margin-bottom: 15px;}
.main2 .title p{font-size: 2.2rem;}
.main2 .box_wrap{display: flex; gap: 40px 3%;}
.main2 .box_wrap a .img img{width: 100%; transition: 0.4s all;}
.main2 .box_wrap .text{margin-top: 20px; display: flex; align-items: center; justify-content: space-between; padding-left: 6px;}
.main2 .box_wrap .text h3{font-size: 2.8rem; font-weight: bold;}
.main2 .box_wrap a:hover h3{color: var(--color);}
.main2 .box_wrap a{width: 32%;}
.main2 .box_wrap a .img{border-radius: 10px; overflow: hidden; display: block;}
.main2 .box_wrap a:hover .img img{transform: scale(1.07);}
.main2 .box_wrap a:hover .arrow img{filter: opacity(0.5) drop-shadow(0 0 0 #228b22);}

#ft{background: #f1f1f1; text-align: left; padding: 55px 0px;}
#ft .foot_logo{display: inline-block; margin-bottom: 18px;}
#ft .ft_use{display: flex; gap: 0px 5px; margin-bottom: 15px;}
#ft .ft_use a{color: #494949; font-size: 1.5rem; font-weight: 500;}
#ft .ft_wrap{display: flex; justify-content: space-between;}
#ft .ft_info{display: flex; gap: 0px 7px; }
#ft .ft_info p{color: #b1b1b1; font-size: 1.5rem; line-height: 150%;}
#ft .ft_info a{color: #b1b1b1; font-size: 1.5rem; line-height: 150%;}
#ft .ft_info span{color: #b1b1b1; font-size: 1.5rem; line-height: 150%;}
#ft .ft_box2{text-align: right;}
#ft .ft_box2 .ft_call{color: #494949; font-size: 1.5rem;}
#ft .ft_box2 .ft_call b{font-size: 2.8rem; font-weight: 800;}
#ft .ft_box2 p{font-size: 1.4rem; color: #8f8f8f; margin-top: 10px; margin-bottom: 40px;}
#ft .ft_box2 .ft_sns a{font-size: 2.2rem;}
#ft .copyright span{font-size: 1.5rem; color: #b1b1b1;}


.stitle{font-size: 5.0rem; font-weight: 800; position: relative; padding-top: 20px;}
.stitle:after{content: ''; width: 50px; height: 4px;background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); position: absolute; left: 0; top: 0;}

.page1 .who{background: url("../img/bg1.png") no-repeat; background-position: 45% 92%; background-size: auto;}
.page1 .who .width2{display: flex; justify-content: space-between; gap: 25px 0px;}
.page1 .who .text{width: 45%; margin-top: 60px;}
.page1 .who .text p{font-size: 2.0rem; color: #494949; margin-top: 35px; line-height: 145%;}
.page1 .who .img{width: 50%;}
.page1 .who .img img{width: 100%;}
.page1 .age{padding-top: 200px; background: url("../img/bg2.png") no-repeat; background-position: 100% 62%; background-size: auto;}
.page1 .age .box_wrap{display: flex; gap: 40px 3%; margin-top: 90px;}
.page1 .age .box{width: 32%; text-align: center;}
.page1 .age .box h3{font-size: 2.4rem; margin-top: 25px; margin-bottom: 25px; font-weight: 800}
.page1 .age .box p{font-size: 1.8rem; line-height: 140%;}

.program .cart_wrap{margin-bottom: 135px;}
.program .cart_wrap:last-child{margin-bottom: 0px;}
.program .pro_wrap{margin-top: 70px; display: flex; gap: 50px 2%; flex-wrap: wrap;}
.program .pro_list{width: 32%;}
.program .pro_list .pro_img{border-radius: 12px; overflow: hidden; display: block;}
.program .pro_list .pro_img img{width: 100%; transition: 0.4s all;}
.program .pro_list .text{margin-top: 15px; display: flex; justify-content: space-between; align-items: center;}
.program .pro_list .text .pro_title{font-size: 2.4rem; font-weight: bold;}
.program .pro_list:hover .pro_img img{transform: scale(1.07);}
.program .pro_list:hover .text img{filter: opacity(0.5) drop-shadow(0 0 0 #228b22);}

@media all and (max-width: 1200px){
    .program .pro_list .text .pro_title{font-size: 2.2rem;}
    .program .pro_list .text a img{width: 42px;}
}
@media all and (max-width: 850px){
    .program .pro_list{width: 48%;}
}
@media all and (max-width: 650px){
    .program .pro_list{width: 100%;}
}

.program_view .pro_vtitle{margin-bottom: 40px;}
.program_view .pro_vtitle p{font-size: 2.4rem; margin-top: 10px;}
.programSwiper{overflow: initial !important; margin-bottom: 35px;}
.programSwiper .swiper-slide img{width: 100%;}
.programSwiper .program-prev{position: absolute; z-index: 11; top: 45%;font-family: 'SUIT-Regular';color: #fff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; left: 25px; cursor: pointer}
.programSwiper .program-next{position: absolute; z-index: 11; top: 45%;font-family: 'SUIT-Regular';color: #fff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; right: 31%; cursor: pointer;}
.program_content{display: flex; justify-content: space-between; gap: 30px 0px; align-items: flex-start;}
.program_content .program_info{width: 70%;}
.program_content .pinfo_box{padding: 40px 10px; border-bottom: 1px solid #ebebeb;}
.program_content .pinfo_box:last-child{border-bottom: 0px; padding-bottom: 0px;}
.program_content .pinfo_box h3{font-size: 2.8rem; font-weight: 800; margin-bottom: 25px;}
.program_content .pinfo_box p{font-size: 1.8rem; line-height: 140%;}
.program_content .pinfo_box li{display: flex; gap: 0px 8px; margin-top: 5px;}
.program_content .pinfo_box li span{line-height: 140%;}
.program_content .pinfo_box li b{line-height: 140%; color: #0d6570;}
.program_content .pinfo_box .text_wrap{padding-left: 20px;}
.program_content .tour_table{padding: 0px 40px 0px 20px; margin-top: 50px;}
.program_content .pinfo_box .tour_table:nth-child(2){margin-top: 0px;}
.program_content .tour_table h4{font-size: 2.4rem; font-weight: 600; margin-bottom: 30px;}
.program_content .tour_table h4 b{color: #0d6570; font-size: 1.8rem; margin-right: 5px;}
.program_content .tour_table table{margin-left: 15px; width: 100%; border-top: 1px solid #ebebeb; border-left: 1px solid #ebebeb;}
.program_content .tour_table table th{color: #494949; font-weight: bold; font-size: 1.8rem; padding: 14px 0px; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb;}
.program_content .tour_table table td{color: #494949; font-weight: 500; font-size: 1.8rem; padding: 14px 0px; border-bottom: 1px solid #ebebeb; border-right: 1px solid #ebebeb; text-align: center;}
.program_view .program_reservation{min-width: 350px; border-radius: 25px; box-shadow: 0px 0px 7px rgba(24,79,102,0.35); padding: 0 25px 40px 25px; max-width: 350px; position: sticky; top: 95px;}
.program_reservation{min-width: 350px; border-radius: 25px; box-shadow: 0px 0px 7px rgba(24,79,102,0.35); padding: 0 25px 40px 25px; max-width: 350px; }
.program_reservation .bar{width: 92%; margin: 0 auto; display: block;}
.program_reservation h2{text-align: center; margin: 15px 0 20px 0; font-size: 2.0rem; font-weight: 800; }
.program_reservation .input_box{margin-top: 18px; display: flex; align-items: center;}
.program_reservation .input_box .date{font-size: 2.0rem; font-weight: 500;  white-space: nowrap;}
.program_reservation .input_box input{width: 100%; border: 1px solid #ebebeb; height: 50px; font-size: 1.6rem; padding: 0px 10px;}
.program_reservation .input_box label{min-width: 70px; text-align: center;}
.program_reservation h6{margin-top: 5px; font-size: 1.7rem; color: #9f9f9f; margin-left: 80px;}
.program_reservation .price{margin-top: 160px; display: flex; justify-content: space-between; align-items: center;}
.program_reservation .price h5{font-size: 2.0rem; font-weight: 500;}
.program_reservation .price h4{font-size: 2.8rem; font-weight: bold;}
.program_reservation .price h4 b{color: var(--color);}
.program_reservation button{width: 100%; height: 60px; text-align: center; color: #fff; font-size: 2.0rem; font-weight: bold;  background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); border-radius: 30px; border: none; margin-top: 20px;}

.social_register{max-width: 1300px; width: 92% !important; padding-top: 160px; padding-bottom: 40px;}
.member_connect{margin-top: 0px; max-width: 1300px; width: 92% !important; margin: 0 auto; margin-bottom: 120px;}

.wrap-loading{display: none;}
.btn_submit{background: #000; border: #000;}

@media all and (max-width: 1200px){
    .program_view .program_reservation{min-width: 300px; max-width: 300px;}
}
@media all and (max-width: 1024px){
    .program_content{flex-direction: column-reverse;}
    .program_content .program_info{width: 100%;}
    .program_view .program_reservation{min-width: initial; max-width: initial; width: 100%; position: initial;}
    .program_reservation .price{margin-top: 70px;}
    .program_content .pinfo_box h3{font-size: 2.4rem;}
    .program_content .pinfo_box p{font-size: 1.7rem;}
    .program_reservation .input_box .date{font-size: 1.8rem;}
    .program_reservation .price h5{font-size: 1.8rem;}
    .program_reservation .price h4{font-size: 2.4rem;}
    .programSwiper .program-next{right: 15px; width: 30px; height: 30px;}
    .programSwiper .program-prev{left: 15px; width: 30px; height: 30px;}
    .program_reservation .input_box input{height: 42px;}
    .program_view .pro_vtitle p{font-size: 1.8rem;}
}
@media all and (max-width:768px){
    .program_content .tour_table table th{font-size: 1.6rem;}
    .program_content .tour_table table td{font-size: 1.6rem;}
}
@media all and (max-width:700px){
    .program_content .tour_table{overflow-x: scroll;}
    .program_content .tour_table table{width: 580px;}
}

input[type='date']::-webkit-calendar-picker-indicator {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: transparent;color: transparent;cursor: pointer;}
input[type='date']::before {content: attr(placeholder);width: 100%;height: 100%;}
input[type='date']:valid::before {display: none;}
input[type='date'] {position: relative;width: 100%;background: url('../img/day.png') no-repeat right 10px center;width: 22px;height: auto;background-color: #fff;}

.reservation .pro_vtitle{margin-bottom: 70px;}
.reservation_content{display: flex; justify-content: space-between; gap: 30px 0px; align-items: flex-start;}
.reservation_content .reservation_info{width: 70%;}
.reservation_info .reser{margin-top: 70px;}
.reservation_info .reser:first-child{margin-top: 0px}
.reservation_info .reser:nth-child(2){margin-top: 40px;}
.reservation_info .reser h2{font-size: 2.3rem; font-weight: bold; padding-bottom: 15px; border-bottom: 1px solid #ddd; margin-bottom: 20px;}
.reservation_info .reser h2 img{margin-right: 7px;}
.reservation_info .reser table{width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.reservation_info .reser table th{background: #eeeeee; padding: 16px 0px; font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.reservation_info .reser table td{padding: 16px 15px; font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; color: #666;}
.reservation_info .reser h3{font-size: 2.0rem; font-weight: bold; margin-bottom: 12px;}
.reservation_info .reser:nth-child(2) td{text-align: center;}
.reservation_info .result{margin-top: 45px; display: flex; justify-content: flex-end; align-items: center; gap: 0px 7px;}
.reservation_info .result h6{font-size: 2.4rem; font-weight: 500;}
.reservation_info .result h5{font-size: 3.2rem; font-weight: bold;}
.reservation_info .result h5 b{color: var(--color);}

.reservation .radio_box{display: flex; flex-wrap: wrap; gap: 10px 2%;}
.reservation .radio_box label{font-size: 1.5rem; color: #555; border: 2px solid #ebebeb; border-radius: 10px; width: 49%; height: 60px; font-weight: 500; text-align: center; line-height: 58px;}
.reservation .radio_box input[type=radio]{display: none;}
.reservation .radio_box input[type=radio]:checked + label{border: 2px solid #000;}
.program_reservation h3{font-size: 2.0rem; font-weight: 500; margin-bottom: 20px;}
.reservation .program_reservation .price{justify-content: flex-start; gap: 0px 5px; margin-top: 60px;}
.reservation .program_reservation .price h4{font-size: 2.0rem;}
.reservation .agree{margin-top: 20px; margin-bottom: 30px;}
.reservation .agree input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 6px;}
.reservation .agree input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.reservation .agree input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.reservation .agree label{font-size: 1.5rem; color: #555;}

@media all and (max-width: 1300px){
    .program_reservation{min-width: 300px; max-width: 300px;}
}
@media all and (max-width: 1100px){
    .reservation_content{flex-direction: column;}
    .reservation_content .reservation_info{width: 100%;}
    .program_reservation{min-width: initial; max-width: initial; width: 100%;}
}
@media all and (max-width:1024px){
    .reservation_info .result h6{font-size: 2.0rem;}
    .reservation_info .result h5{font-size: 2.6rem;}
    .program_reservation{margin-top: 60px;}

}
@media all and (max-width:700px){
    .program_content .tour_table{overflow-x: scroll;}
    .program_content .tour_table table{width: 580px;}
    .reservation .radio_box label{height: 50px; line-height: 48px;}
}



.page2 .qna{margin-bottom: 140px;}
.page2 .qna h2{margin-bottom: 55px;}
.page2 .menu {list-style: none; border-top: 4px solid var(--color);}
.page2 .menu li {border-top: 1px solid #dcdcdc;}
.page2 .menu li:first-child {border-top: 0;}
.page2 .menu li a {display: flex; font-size: 2.4rem; font-weight: 600; color: #262626; align-items: center; gap: 0px 6px; padding: 30px 40px; cursor: pointer;}
.page2 .menu li a span{font-weight: 800; color: var(--color)}
.page2 .menu li .text_wrap {display: none; background: #f7f7f7; padding: 30px 40px 30px 70px;}
.page2 .menu li .text{display: flex; gap: 0px 6px; align-items: baseline;}
.page2 .menu li .text span{font-size: 2.4rem; color: #6f6f6f; font-weight: 800;}
.page2 .menu li .text p{font-size: 1.8rem; color: #666; line-height: 140%;}
.page2 .contact > p{font-size: 2.2rem; font-weight: 500; margin-top: 15px;}
.page2 .contact .latest{margin-top: 50px;}
#side_menu{display: none;}

@media all and (max-width: 1200px){
    .page2 .menu li a{padding: 20px 20px; font-size: 2.0rem;}
    .page2 .menu li .text_wrap{padding: 20px;}
    .page2 .menu li .text span{font-size: 2.0rem;}
    .page2 .menu li .text p{font-size: 1.6rem;}
}
@media all and (max-width: 800px){
    #formmail-write .form-group1{flex-direction: column; gap: 20px 0px;}
    #formmail-write .form-group{padding-bottom: 20px;}
    #formmail-write .form-group1 .box{width: 100%;}
    .page2 .contact > p{font-size: 1.8rem;}
}

.page3 .root_daum_roughmap{width: 100% !important;}
.page3 .root_daum_roughmap .wrap_controllers{display: none;}
.page3 .con1{padding-bottom: 120px;}
.page3 .con1 h2{margin-bottom: 90px;}
.page3 .con1 .box_wrap{display: flex; gap: 30px 2%; justify-content: center;}
.page3 .con1 .box_wrap .box{width: 100%; max-width: 290px; text-align: center}
.page3 .con1 .box_wrap .box span{min-height: 50px; margin-bottom: 10px; display: block;}
.page3 .con1 .box_wrap .box h3{font-family: 'FuturaCyrillicMedium'; color: #5a5a5a; font-size: 2.0rem; margin-bottom: 15px;}
.page3 .con1 .box_wrap .box p{font-size: 1.8rem; color: #5a5a5a; font-weight: 300;}
.page3 .con2{padding-top: 120px;}
.page3 .con2 h2{margin-bottom: 90px;}
.page3 .con2 .box_wrap{display: flex; gap: 30px 2%; justify-content: center;}
.page3 .con2 .box_wrap .box{width: 20%; text-align: center}
.page3 .con2 .box_wrap .box span{min-height: 50px; margin-bottom: 10px; display: block;}
.page3 .con2 .box_wrap .box h3{font-family: 'FuturaCyrillicMedium'; color: #5a5a5a; font-size: 2.0rem; margin-bottom: 15px;}
.page3 .con2 .box_wrap .box p{font-size: 1.8rem; color: #5a5a5a; font-weight: 300;}

@media all and (max-width: 768px){
    .page3 .con1 .box_wrap{flex-wrap: wrap; justify-content: flex-start; gap: 55px 2%;}
    .page3 .con1 .box_wrap .box{width: 49%;}
    .page3 .con2 .box_wrap{flex-wrap: wrap; gap: 55px 2%; justify-content: flex-start;}
    .page3 .con2 .box_wrap .box{width: 32%;}
}

.mypage h2{margin-bottom: 50px;}
.mypage .my{margin-bottom: 100px;}
.mypage .my .table{border-top: 4px solid var(--color);}
.mypage .my .table li{display: flex;}
.mypage .my .table h3{padding: 18px 0px; background: #f5f5f5; text-align: center; font-weight: 500; color: #656565; min-width: 230px; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;}
.mypage .my .table h3 span{color: #a01a1a;}
.mypage .my .table .text{padding: 18px; border-bottom: 1px solid #d0d0d0; width: 100%; display: flex; gap: 0px 2%; align-items: center;}
.mypage .my .table .text h4{font-size: 1.8rem; font-weight: 500; color: #656565;}
.mypage .my .table .text input{height: 35px; border: 2px solid #e6e6e6; width: 200px; padding-left: 7px; color: #656565;}
.mypage .my .table .text p{color: var(--color); font-size: 1.5rem;}
.mypage .my .table .text .tel{display: flex; align-items: center; gap: 0px 5px;}
.mypage .my .table .text .tel input{width: 95px;}
.mypage .my .table .text input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 3px;}
.mypage .my .table .text input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.mypage .my .table .text input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}
.mypage .my .table .address{display: block;}
.mypage .my .table .address .addnum{width: 200px;}
.mypage .my .table .address button{padding: 0 25px; border: 2px solid #e6e6e6; border-radius: 30px; height: 35px; background: #fff; font-size: 1.8rem; color: #656565; margin-left: 20px;}
.mypage .my .table .address .add_info{margin-top: 10px; width: 100%;}

.mypage .change{width: 230px; height: 60px; text-align: center; border: none; border-radius: 30px; background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); text-align: center; color: #fff; font-size: 2.0rem; margin: 60px auto 0 auto; display: block; font-weight: bold;}

.mypage .like{margin-bottom: 100px;}
.mypage .like .table{border-top: 4px solid var(--color);}
.mypage .like .table li{display: flex;}
.mypage .like .table h3{padding: 18px 0px; background: #f5f5f5; text-align: center; font-weight: 500; color: #656565; min-width: 230px; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; font-size: 1.8rem;  display: flex; align-items: center; justify-content: center;}
.mypage .like .table h3 span{color: #a01a1a;}
.mypage .like .table .text{padding: 18px; border-bottom: 1px solid #d0d0d0; width: 100%; display: flex; gap: 10px 3%; align-items: center; flex-wrap: wrap;}
.mypage .like .table .text select{width: 200px; border: 2px solid #e6e6e6; height: 35px; color: #656565;}
.mypage .like .table .text input[type="radio"] {-webkit-appearance: none; /* 브라우저 기본 스타일 제거 */-moz-appearance: none;appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 50%; /* 모서리를 살짝 둥글게 */display: inline-block;vertical-align: middle;margin-right: 5px;position: relative; /* 체크 표시 위치를 잡기 위해 position 속성 추가 */}
.mypage .like .table .text type="radio"]:checked {background-color: var(--color) /* 선택된 상태의 배경 색 */border-color: var(--color); /* 선택된 상태의 테두리 색 */}
.mypage .like .table .text input[type="radio"]:checked::after {content: '✓'; /* 체크 표시 */color: white; /* 체크 표시 색상 */font-size: 14px; /* 체크 표시 크기 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 가운데 정렬 */line-height: 1; /* 체크 모양이 정렬될 때 필요한 값 */}
/* 선택된 라디오 버튼의 스타일 */
.mypage .like .table .text input[type="radio"]:checked {background-color: var(--color); /* 선택된 상태의 배경 색 */}
.mypage .like .table .text label{display: flex; align-items: center; gap: 0px 5px; font-size: 1.8rem; color: #656565; font-weight: 500;}

.mypage .purchase{margin-bottom: 100px;}
.mypage .purchase .table{border-top: 4px solid var(--color);}
.mypage .purchase .table li{display: flex;}
.mypage .purchase .table h3{padding: 18px 0px; background: #f5f5f5; text-align: center; font-weight: 500; color: #656565; min-width: 230px; border-right: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; font-size: 1.8rem; display: flex; align-items: center; justify-content: center;}
.mypage .purchase .table h3 span{color: #a01a1a;}
.mypage .purchase .table .text{padding: 18px; border-bottom: 1px solid #d0d0d0; width: 100%; display: flex; gap: 0px 2%; align-items: center;}
.mypage .purchase .table .text h4{font-size: 1.8rem; font-weight: 500; color: #656565;}
.mypage .purchase .pur_wrap{margin-bottom: 80px;}
.mypage .purchase .pur_wrap:last-child{margin-bottom: 0px;}
.mypage .purchase .pur_wrap h6{ font-size: 2.4rem; color: var(--color); font-weight: bold; margin-left: 15px; margin-bottom: 15px;}
.mypage .purchase .pur_wrap h6 span{font-size: 2.0rem; font-weight: bold; color: #d6d6d6; margin-left: 20px;}

@media all and (max-width: 900px){
    .mypage .my .table .text{flex-wrap: wrap; gap: 10px;}
}
@media all and (max-width: 768px){
    .mypage .my .table li{flex-direction: column;}
    .mypage .like .table li{flex-direction: column}
    .mypage .purchase .pur_wrap h6{font-size: 2.1rem;}
    .mypage .purchase .pur_wrap h6 span{font-size: 1.8rem;}
    .mypage .purchase .table li{flex-direction: column;}
}





@media all and (max-width: 1920px){
    .main_img img{width: initial;}
}
@media all and (max-width: 1600px){
    #header .logo img{width: 150px;}
    #header .head_menu .main_menu .dept1{margin-left: 40px;}
    #header .head_menu .main_menu .dept1 > a{font-size: 1.7rem;}
    .pc_head .lomy a, .pc_head .lomy span{font-size: 1.4rem;}
    .pc_head .lang li a{font-size: 1.3rem;}
    .pc_head .lang li{width: 40px; height: 40px; line-height: 40px;}
    .main1 .point1 img{width: 220px;}
    .main1 .point2 img{width: 300px;}
    .main1 .point3 img{width: 340px;}
}
@media all and (max-width: 1400px){
    .page1 .who{background-size: 800px; background-position: 18% 100%; }
}
@media all and (max-width: 1200px){
    .mobile_btn{display: flex; align-items: center; gap: 0px 8px;}
    .mobile_btn .lang{display: flex; gap: 0px 4px;}
    .mobile_btn .lang li{border: 1px solid #222; width: 36px; height: 36px; line-height: 34px; border-radius: 50%; text-align: center;}
    .mobile_btn .lang li a{font-size: 11px;}
    .main_text .num{font-size: 1.8rem;}
    .main_text h2{font-size: 5.0rem;}
    .main_text p{font-size: 2.2rem;}
    .Hfull{height: 650px;}
    .swiper_btn_wrap{bottom: 175px;}
    .main1 h2{padding-bottom: 60px; margin-bottom: 10px;}
    .main1 h2 img{width: 150px;}
    .main1 h2:after{width: 1px; height: 40px;}
    .main1 h3{margin-top: 20px; font-size: 4.8rem;}
    .main1 p{font-size: 2.0rem;}
    .main1 a{width: 210px; height: 50px; line-height: 50px; margin: 50px auto 0 auto;}
    .main1{padding: 200px 0;}
    .main2 .title h2{font-size: 4.2rem;}
    .main2 .title p{font-size: 1.8rem;}
    .main2 .box_wrap .text h3{font-size: 2.2rem;}
    .main2 .box_wrap a .arrow img{width: 42px;}
    .sub_visual{height: 350px; margin-top: 60px;}
    .sub_visual .sub_top_text h3{font-size: 1.6rem;}
    .sub_visual .sub_top_text h2{font-size: 3.2rem;}
    .sub_visual .sub_top_text{padding-bottom: 60px;}
}
@media all and (max-width: 1024px){
    .main1 .point1 img{width: 120px;}
    .main1 .point2 img{width: 180px;}
    .main1 .point3 img{width: 230px;}
    .stitle{font-size: 3.5rem;}
    .stitle:after{width: 32px; height: 3px;}
    .page1 .who .text p{font-size: 1.6rem; margin-top: 20px;}
}
@media all and (max-width: 900px){
    .page1 .age .box h3{font-size: 2.1rem; margin-bottom: 17px;}
    .page1 .age .box p{font-size: 1.6rem;}
}
@media all and (max-width: 850px){
    .main1 .point2{top: initial; bottom: 40px;}
    .main1 .point1{left: 7%; top: 8%;}
    .main1 .point3{top: 14%;}
    .main2 .box_wrap{flex-wrap: wrap;}
    .main2 .box_wrap a{width: 48%;}
    #ft .ft_wrap{flex-direction: column;}
    #ft .ft_box2{text-align: left; margin-top: 15px; margin-bottom: 15px;}
    #ft .ft_box2 p{margin-bottom: 10px;}
    #ft .ft_info{flex-direction: column;}
    #ft .ft_info span{display: none;}
    #ft .foot_logo img{width: 120px;}
}
@media all and (max-width: 768px){
    .Hfull{height: 580px;}
    .swiper_btn_wrap{bottom: 80px;}
    .main_text h2{font-size: 3.2rem;}
    .main_text p{font-size: 1.8rem;}
    .main1 h3{font-size: 3.0rem;}
    .main1 .point3 img{width: 130px;}
    .main1 .point2 img{width: 140px;}
    .main1 .point1 img{width: 80px;}
    .main2 .title h2{font-size: 3.2rem;}
    .main2 .title p{font-size: 1.6rem;}
    .sub_visual{height: 280px;}
    .page1 .who .width2{flex-direction: column-reverse;}
    .page1 .who .img{width: 100%;}
    .page1 .who .text{width: 100%; margin-top: 25px;}
    .page1 .who{background-position: -3% 94%; padding-bottom: 160px; background-size: 750px;}
    .page1 .age{padding-top: 30px;}
    .page1 .age .box_wrap{flex-wrap: wrap; }
    .page1 .age .box{width: 48%;}
    .stitle{font-size: 3.2rem;}
}
@media all and (max-width: 650px){
    .main2 .box_wrap a{width: 100%;}
    .page1 .age .box{width: 100%;}
}