/* notice popup */
/**.notice_popup, .notice_popup_bg {display:none !important;}  rmsidtest 팝업 우선 숨김 20250210 */
.notice_popup_bg {z-index: 1000; position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: rgba(0, 0, 0, 0.77); backdrop-filter: blur(1.5px);}
@supports (-webkit-backdrop-filter: none) {
    .notice_popup_bg { -webkit-backdrop-filter: blur(1.5px); }
}

.notice_popup {z-index: 1001; position: fixed; left: 50%; transform: translateX(-50%); top: 22%;}
.notice_popup img { max-width:100%; }
.notice_popup .close_btn_top {z-index: 1001; position: absolute; right: -17px; top: -17px;
    width: 35px; height: 35px; background: url(../images/btn_round_close.png) center no-repeat; background-size: contain;}
.notice_popup .mySwiper {width: 480px; height: 480px; border-radius: 12px 12px 0 0; overflow: hidden;}
.notice_popup .mySwiper .swiper-wrapper .swiper-slide a {display: block; width: 100%; height: 100%; border-radius: 12px 12px 0 0; overflow: hidden;}
.notice_popup .mySwiper .swiper-wrapper .swiper-slide a img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px 12px 0 0;}

.notice_popup .swiper-horizontal>.swiper-pagination-bullets,
.notice_popup .swiper-pagination-bullets.swiper-pagination-horizontal,
.notice_popup.swiper-pagination-custom, .swiper-pagination-fraction {width: auto; top: 20px; right: 18px; bottom: 520px;}
.notice_popup .swiper-pagination {width: auto; top: 20px; right: 18px; text-align: right;}
.notice_popup .swiper-pagination-bullet, .notice_popup .swiper-pagination-bullet-active {background: #fff !important;}
.notice_popup .swiper-pagination-bullet {width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,12px));
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,12px));}

.notice_popup .notice_bottom {background: #fff; border-radius: 0px 0px 12px 12px; padding: 12px; display: flex; justify-content: space-between; align-items: center;}
.notice_popup .notice_bottom input[type="checkbox"] {appearance: none; margin: 0; position: relative;}
.notice_popup .notice_bottom label {display: inline-block; width: 18px; height: 18px; border: 1px solid #5F6367; border-radius: 4px;
    vertical-align: middle; cursor: pointer; white-space: nowrap; position: relative; line-height: 18px;}
.notice_popup .notice_bottom label::after {content:''; width: 80%; height: 80%; background: url(../../theme01/common/images/btn_check_gray.png) center no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.notice_popup .notice_bottom label span {display: block; padding-left: 28px; position: absolute; top: 0; left: 0;
    font-size: 16px; line-height: 1.1; letter-spacing: -1px; color: #5F6367;}
.notice_popup .notice_bottom a {display: inline-block; font-size: 16px; line-height: 1; text-align: right; letter-spacing: -1px; color: #5F6367; position: relative; padding-right: 28px;}
.notice_popup .notice_bottom a::before {content: ''; display: inline-block; width: 20px; height: 1px; background: #5F6367; position: absolute; right: 0; top: 50%; margin-top: -0.5px; transform: rotate(45deg);}
.notice_popup .notice_bottom a::after {content: ''; display: inline-block; width: 20px; height: 1px; background: #5F6367; position: absolute; right: 0; top: 50%; margin-top: -0.5px; transform: rotate(-45deg);}

/* appointment */
.appointment input[type="checkbox"] {display: inline-block; appearance: none; position: absolute; vertical-align: middle; cursor: pointer;}
.appointment input[type="checkbox"] ~ label {display: inline-block; width: 20px; height: 20px; vertical-align: middle; cursor: pointer; white-space: nowrap; border-radius: 4px;}
.appointment input[class="agree"] ~ label::before {content:'';display: inline-block;line-height: normal;width: 100%;height: 100%;background: #fff;border-radius: 4px;text-align: center;}
.appointment input[class="agree"]:checked ~ label::before {
  content: '✓';
  font-size: 20px;
  color: #000;
  vertical-align:top;
  display: inline-block;
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
  font-weight: 600;
  }

.appointment {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    padding: 20px 0;
    box-sizing: border-box;
    background: rgba(100,24, 60, 0.9);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    transition: all .2s;
    min-width:375px;
    }
.appointment.off {display: none;}
.appointment .inner{width: 1186px;margin: 0 auto;}
.appointment .inner form {display: flex; align-items: center; justify-content: space-between; }
.appointment .inner form .tab_ver {width: calc(100% - 100px);display: flex;align-items: center;justify-content: center;gap: 30px;}
.appointment .inner form h3 {font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; color: var(--secondary-gold-200);}
.appointment .inner form ul {display: flex; align-items: center;}
.appointment .inner form ul.input_box {gap: 8px;}
/*.appointment .inner form ul.input_box li:nth-child(1) {width: 30%;}*/
/*.appointment .inner form ul.input_box li:nth-child(2) {width: 35%;}*/
/*.appointment .inner form ul.input_box li:nth-child(3) {width: 35%;}*/
.appointment .inner form ul.input_box input {
    background: #FFFFFF;
    border: none;
    padding: 16px;
    outline: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    color: var(--gray-color-1000);
    vertical-align: middle;
    box-sizing: border-box;
}
.appointment .inner form ul.input_box input::placeholder { font-weight: 400; color: var(--gray-color-1000); }
.appointment .inner form ul.input_box input.user_name {max-width: 190px;}
.appointment .inner form ul.input_box input.user_tel {max-width: 230px;}
.appointment ul.agree_box {justify-content: flex-end;flex-grow: 1;gap: 16px;}
.appointment ul.agree_box li {display: flex; align-items:center; gap: 6px;}
.appointment ul.agree_box li:first-child {/* min-width: 240px; */position: relative;}
.appointment ul.agree_box label {font-weight: 400;font-size: 14px;line-height: 20px;letter-spacing: -0.02em;color: #FFFFFF;}
.appointment ul.agree_box a {display:block;width: 16px; height: 16px;background: url(../common/images/white_from.png) no-repeat center;background-size: contain;}
.appointment ul.agree_box a img{display: none;}
.appointment ul.agree_box a .shortcut_icon{width: 16px;vertical-align: top;margin-top: -2px;}
.appointment ul.agree_box button {background:  var(--man-color-03);border-radius: 100px;padding: 0 26px;font-weight: 500;font-size: 18px;line-height: 44px;text-align: center;color:#fff;cursor: pointer;transform: skew(-0.1deg);}
.appointment .inner form li a {display: inline-block;}
.appointment .inner form ul.agree_box button {
    background:  var(--secondary-color);
    border-radius: 100px;
    padding: 0 30px;
    width: 180px;
    font-weight: 500;
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    color: var(--gray-color-1000);
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items:center;
    max-width: 180px;
    }
.appointment .inner form ul.agree_box button .arrow {
    display: block;
    width: 6px;
    height: 6px;
    border: 2px solid var(--gray-color-1000);
    border-top: 0;
    border-left: 0;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg) ;
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg) ;

    }
.appointment .inner form li a {display: inline-block;}
.appointment .inner .close_btn {display: none;}

.appointment .inner form .selectBox {position: relative;}
.appointment .inner form .selectBox .label {display: block; padding: 16px 5%; box-sizing: border-box; font-size: 16px; line-height: 18px; letter-spacing: -1px; color: var(--gray-color-1000);
    cursor: pointer; outline: none; background: #fff;border-radius: 6px; white-space: nowrap; position: relative;}
.appointment .inner form .selectBox  {min-width: 230px;}
.appointment .inner form .selectBox .label::after {content: ''; display: inline-block; width: 12px; height: 12px; vertical-align: middle; transform: rotate(0);
    background-image: url(../images/arrow_down_bk.png); background-repeat: no-repeat; background-position: center bottom; background-size: contain;
    position: absolute; right: 8px; top: 50%; margin-top: -8px; transition: all .2s;}
.appointment .inner form .selectBox .label.on::after {transform: rotate(540deg); background-position: center top;}
.appointment .inner form .selectBox .optionList {width: 100%; border-radius: 4px; border: 1px solid #E6E6E6; overflow: hidden;
    position: absolute; bottom: 56px; left: 0; z-index: 32; box-sizing: border-box; display: none;}
.appointment .inner form .selectBox .optionList .optionItem {width: 100%; padding: 11.5px 20px; box-sizing: border-box; background: #fff;
    font-weight: 300; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #000; text-align: center; cursor: pointer; transition: all .2s;}
.appointment .inner form .selectBox .optionList .optionItem:hover {background: #F5E4DB;}
.appointment .inner form .selectBox .optionList .optionItem:not(:last-child) {border-bottom: 1px solid #E6E6E6;}

.custom-checkbox {display: inline-flex;align-items: center;cursor: pointer;user-select: none;font-size: 16px;gap: 8px;}


.custom-checkbox .checkmark {width: 20px;height: 20px;background-color: #eee;border-radius: 4px;display: inline-block;position: relative;transition: all 0.2s;}
.custom-checkbox input[type="checkbox"]:checked + .checkmark{}
/* 체크됐을 때 표시되는 V자 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.appointment .inner form h3 {
  color: #fff;
}





/* visual */
.visual {width: 100%; overflow: hidden;}
.visual .swiper-container {width: 100%; height: 100%; position: relative; overflow: hidden;}
.visual .swiper-slide {position: relative;}
.visual .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 30%; left: 16.66%; width: auto; }
.visual .swiper-container ul.swiper-wrapper li img {width: 100%; height: 100%; object-fit: cover;}
.visual .arrow_wrap {position: absolute; left: 13.6%; bottom: 26%; z-index: 10;}
.visual .swiper-pagination {display: flex; flex-wrap: nowrap; align-items: center; gap: 20px;}
.visual .swiper-pagination ul {display: inline-flex;}
.visual .swiper-pagination ul li {display: flex; align-items: center; margin-right: 10px; display: none; gap: 6px; flex: 1;}
.visual .swiper-pagination ul li  span {font-family: "LEMON MILK", sans-serif;  font-size: clamp(1rem, 24px, 2.8rem); font-weight: 500; color: #fff; line-height: 1em;width: 15px;}
.visual .swiper-pagination ul li.on {display: flex;}
.visual .swiper-pagination .swiper-control{position: absolute; left: 120px;}
.visual #slideVisualCtr {position: absolute;top: 50%; left: 50%; transform: translate(5px, -50%);  width: 20px; height: 20px; background: url('../images/btn_wht_pause.png') center no-repeat; background-size: contain;
    text-indent: -9999em; vertical-align: inherit; border: none; cursor: pointer;}
.visual #slideVisualCtr.play {background-image: url('../images/btn_wht_play.png')}
.visual .swiper-container  .swiper-button-prev {color: #fff; left: auto; right: 10px;}
.visual .swiper-container  .swiper-button-next {color: #fff; right: auto; left: calc(100% + 40px);}
.visual .swiper-button-prev:after,
.visual .swiper-button-next:after {font-weight: 900; font-size: 24px;}
.visual .visual_text {position: absolute; top: 30%;  left: 16.66%; color: #fff;}
.visual .visual_text p:first-of-type {font-weight: 400; font-size: 26px; line-height: 39px; letter-spacing: -0.02em; margin-bottom: 20px;}
.visual .visual_text p strong {font-weight: 700; font-size: 70px; line-height: 91px; letter-spacing: -0.04em;}


/* #content */
#content {overflow: hidden;}


section {background: #fff; clear: both;}
section > span {font-weight: 400; font-size: 14px; }
section > span {font-weight: 700; font-size: 16px; line-height: 20px; color: #64183c; transform: skew(-0.1deg);}
section > span i {font-style: normal;}
section h3 a {display: inline-block; font-weight: 700; font-size: 34px; line-height: 43px; padding-bottom: 32px; color: #64183c; transform: skew(-0.1deg);}
section h3 a span {display: none; width: 12px; height: 13px; margin-left: 4px; background: url(../images/arrow_pp_right.png) top center no-repeat;
    background-size: contain; vertical-align: middle;}

.swiper-container{overflow: hidden; scroll-behavior: smooth;}
#content .swiper-button-next, #content .swiper-button-prev {color: #000 ; }
/* #content .swiper-button-next:active,#content .swiper-button-prev:active {opacity: 1 !important;} */
.swiper-pagination-bullet {background: #7435FF !important;}
.swiper-pagination-bullet-active {background: #7435FF !important;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 2px !important;}

#content a.btn_more{font-size: 14px; font-weight: 700; line-height: 1;letter-spacing: -0.02em; display: block; }
#content a.btn_more::after{content:''; display:inline-block; width: 14px; height: 14px;background: url(../images/arrow-right.svg) top center no-repeat; background-size: contain;vertical-align:middle;padding-left: 4px; }

.event .inner{padding: 140px 12.6%; position: relative;display: flex; justify-content: space-between; }
.event .swiper-container{width: 80%;}
.event .text_box_top{position: relative; padding-bottom: 40px;margin-bottom: 60px;}
.event .text_box h3{font-size: 45px; font-weight: 600; line-height: 1.3; color: var(--primary-color); margin-bottom: 20px;}
.event .text_box p{font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--gray-color-1000);letter-spacing: -0.02em;}
.event .swiper-wrapper .swiper-slide {box-sizing: border-box; position: relative;}
.event .swiper-wrapper .swiper-slide .event_txt{position: absolute; bottom: 10px; left: 30px;}
.event .swiper-wrapper .swiper-slide .event_txt p{color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.event .swiper-wrapper .swiper-slide .event_txt p:first-of-type{padding-bottom: 6px;}
.event .swiper-wrapper .swiper-slide .event_txt p strong{
    font-family: 'GmarketSansMedium', sans-serif;color: #FFF5BA; font-size: 70px; font-weight: 400; line-height:1;letter-spacing: -0.02em;}
.event .swiper-wrapper .swiper-slide .event_txt p span{font-size: 14px;}
.event .swiper-wrapper .swiper-slide .img_box img{width: 100%; transition: all .4s ease;border-radius: 0px 0px 80px 0px; }
.event .swiper-wrapper .swiper-slide-active .img_box img{border-radius: 80px 0px 0px 0px;}
.event .swiper-wrapper .swiper-slide-active + .swiper-slide .img_box img{border-radius: 0px 0px 0px 0px;}
.event .swiper-pagination {text-align:left;}
.event .swiper-pagination .swiper-pagination-bullet{background: #F6F6F6 !important; opacity: 1; width: 20%; border-radius:0; margin: 0 !important; height: 6px;}
.event .swiper-pagination .swiper-pagination-bullet-active{background: var(--primary-color)!important;}
.event .swiper-scrollbar {display: block; background: #F6F6F6;}
.event .swiper-scrollbar-drag {background: var(--primary-color);}

/* hover */
@media (hover:hover) {
    .event .swiper-wrapper .swiper-slide:hover .event_img img {transform: scale(1.2);}
    .swiper-button-next:hover, .swiper-button-prev:hover {opacity: 1 !important;}
}
.signature .swiper-container {width: 100%; max-height: 800px;position: relative;}
.signature .inner ul li {display: flex; align-items: stretch; justify-content: center;background: #FAFAFB;}
.signature .inner ul li div{width: 50%;box-sizing: border-box;}
.signature .inner ul li div.text_box{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;height: 100%;}
.signature .inner ul .img_box img {width: 100%;height: 100%;object-fit: cover;}
.signature .inner .text_box h3 {font-size: 24px; font-weight: 400;margin-bottom: 50px;}
.signature .inner .text_box h3 span{display: inline-block; color: var(--primary-color); font-size: 45px; font-weight: 600; line-height: 1;padding-bottom: 20px;}
.signature .inner ul .text_box {padding: 30px 8%; color: var(--gray-color-1000);}
.signature .inner ul .text_box p.sub-heading{font-size: 26px; line-height: 38px;margin-bottom: 20px;}
.signature .inner ul .text_box p.heading{font-size: 26px; line-height: 1;margin-bottom: 12px;color:var(--primary-color);}
.signature .inner ul .text_box p.name{color: #000; font-size: 40px; line-height: 1; letter-spacing: -0.02em;margin-bottom:50px;}
.signature .inner ul .text_box p.name strong{font-weight: 600; }
.signature .inner ul .text_box p.explain {color: var(--gray-color-700);font-size:19px; line-height: 1.3;}
.signature .inner ul .text_box .btn_more {margin-top: 60px;}
.signature .swiper-pagination {width: 350px;left: 30%; bottom: 0 !important;}
.signature .swiper-pagination-bullet {
    display: inline-block;
    opacity: 1;
    position: relative;
    z-index: 1;
    text-align: center; /* 텍스트를 가로로 가운데 정렬 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    margin-bottom: 72px !important;
    background: #927769!important;
    /*border:4px solid transparent;*/
    transition: background-color .4s ease;
}
.signature .swiper-pagination-bullet.swiper-pagination-bullet-active { border:4px solid #fff;background-color: var(--primary-color) !important;margin-left: -4px !important;}
.signature .swiper-pagination-bullet span {position: absolute; bottom:-50%; left:24px;transform: translateY(30%); line-height: 1; font-size: 35px; font-weight: 400;   font-family: "El Messiri", sans-serif;  color:#927769; transition: color 0.4s;}
.signature .swiper-pagination-bullet.swiper-pagination-bullet-active span{color: var(--primary-color)}
.signature .swiper-pagination::after{content: ''; width: 1px; height: 300px;  border-left: 2px dotted var(--primary-color);  display: block;position: absolute; top: -15px; left: 3px;}

.notice_popup .swiper-pagination-bullet {
    background-color: white !important; /* 기본 dot 색상 흰색 */
    opacity: 0.7; /* 살짝 투명하게 */
}

.notice_popup .swiper-pagination-bullet-active {
    background-color: white !important; /* 활성화된 dot도 흰색 */
    opacity: 1; /* 활성화된 dot은 불투명하게 */
}

.compare{padding: 120px 0 80px;background: linear-gradient(97deg, #E9F4FF -24.87%, #FFF7EA 52.73%, #E2FAF7 130.32%);}
.compare .inner{padding: 100px 12.6%; position: relative;}
.compare .marquee p{ font-family: "El Messiri", sans-serif; font-size: 160px; line-height: 180px; font-weight: 400; display: inline-block; padding-right:200px; position: relative;}
.compare .marquee p:nth-of-type(1n){color: rgba(239, 214, 200, 0.80);}
.compare .marquee p:nth-of-type(2n){color: #C5DBF1;}
.compare .marquee-section {overflow: hidden;white-space: nowrap;width: 100%;}
.compare .marquee-div {display: inline-block;}
.compare .marquee { display: inline-block; white-space: nowrap;}
.compare .marquee p::after{content: ''; display: inline-block;width: 100px; height: 100px; background: url(../images/lifting.svg) center center no-repeat; background-size: contain; position:absolute;  top: 50%; right: 0; transform: translate(-50%, -50%);}
.compare .inner .review_wrap{display: flex; flex-direction: row; justify-content: flex-start;  align-items: stretch; gap: 60px;width: 100%; margin-bottom: 20px;}
.compare .inner .review_wrap .swiper-container{width: 60%;}
.compare .inner .compare_box {display: flex; gap: 5px; text-align: center; width: 100%;}
.compare .inner .compare_box .img_box {position: relative; color: #fff; overflow: hidden; width: 50%;}
.compare .inner .compare_box .before.img_box{border-radius: 30px 0 0 30px;}
.compare .inner .compare_box .after.img_box{border-radius: 0 30px 30px 0;}
.compare .inner .compare_box .img_box img { width: 100%; height:100%; object-fit: cover; }
@media (min-width: 768px) {
    .compare .inner .compare_box .img_box { height:450px; }

}
@media (max-width: 768px) {
    .compare .inner .compare_box .img_box { height:252px; }
    .compare .inner .compare_box .before.img_box{border-radius: 15px 0 0 15px;}
    .compare .inner .compare_box .after.img_box{border-radius: 0 15px 15px 0;}
}

.compare .inner .compare_box .img_box > p {border-radius:100px; border: 1px solid rgba(255, 255, 255, 0.50); background: rgba(255, 255, 255, 0.10);backdrop-filter: blur(4px);
    padding: 8px 12px;  font-size: 12px;position: absolute; left: 50%; bottom: 20px; transform: translate(-50%, 0);}
.compare .inner .compare_box .img_box .dimmed {width: 100%; height: 100%;background: rgba(0, 0, 0, 0.70);
    backdrop-filter: blur(5px) saturate(2); -webkit-backdrop-filter: blur(5px); position: absolute; top: 0; left: 0;}
.compare .inner .compare_box .img_box .dimmed .text_box {height: 100%; display: flex; flex-direction: column; gap: 15px;justify-content: center; align-items: center;}
.compare .inner .compare_box .img_box .dimmed .text_box p {font-size: 16px; line-height: 1.4; font-weight: 400;}
.compare .inner .compare_box .img_box .dimmed .text_box .btn_login {display:block; color: #fff; font-size: 12px; padding: 0 2px; border-bottom: 1px solid #fff; line-height: 1;}
.compare .inner .text_box{position: relative;}
.compare .inner .text_box h3 {font-size: 24px; font-weight: 400;margin-bottom: 50px;}
.compare .inner .text_box .desc li{margin-bottom: 30px;}
.compare .inner .text_box h3 span{display: inline-block; color: var(--primary-color); font-size: 45px; font-weight: 600; line-height: 1;padding-bottom: 20px;}
.compare .inner .text_box .desc dl{display: flex; flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 20px; line-height: 1; letter-spacing: -1px; }
.compare .inner .text_box .desc dl dt {width: 70px; color: var(--primary-color); font-weight: 700; }
.compare .inner .text_box .desc dl dd{font-weight: 400;}
.compare .inner .swiper-control{position: absolute; left: 0; bottom: 0; margin-bottom: 25px;}
.compare .inner .swiper-button-prev, .compare .inner .swiper-button-next {color: var(--gray-color-1000); ;width: 50px; height: 50px; background: #fff; border: 1px solid #DCDEE3; border-radius: 100%;}
.compare .inner .swiper-button-prev{left: auto; }
.compare .inner .swiper-button-next {right: auto; left: calc(100% + 58px); }
.compare .swiper-button-prev:after, .compare .swiper-button-next:after {font-weight: 900;font-size: 14px;}
.compare  .inner .notice{color: var(--gray-color-400); font-size: 14px; line-height: 1.3; font-weight:400;}

.story{background-image: url(../images/img_story_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed;}
.story .inner{padding: 100px 12.6% 0;  position: relative; display: flex; justify-content: center; align-items: flex-end;}
.story .inner .story_box{position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 160px; box-sizing: border-box;}
.story .inner .story_box::before{content: '';position: absolute;left: 0;bottom: 0;display : block;width: 100%;height: 540px;border-radius: 0px 200px 0px 0px;
    background: rgba(255, 255, 255, 0.50);box-shadow: 0 20px 40px 0 rgba(57, 46, 73, 0.20), 0 -20px -40px 0  rgba(0, 0, 0, 0.5);backdrop-filter: blur(10px);border: 1px solid #FFF;border-bottom: none;}
.story .inner .story_box .text_box{z-index: 1; padding-top: 12%;}
.story .inner .story_box .text_box h3 span{display: inline-block; color: var(--primary-color); font-size: 45px; font-weight: 600; line-height: 1;padding-bottom: 20px;}
.story .inner .story_box .text_box h3 span.add_text{font-size: 35px; font-weight: 300; line-height: 1.5; letter-spacing: -1px;}
.story .inner .story_box .text_box p{color: var(--gray-color-1000); font-size: 18px; line-height: 1; letter-spacing: -1px;margin: 30px 0 60px; transform: skew(-0.1deg);}

.research .inner{padding-top: 140px; }
.research .text_box h3 {font-size: 24px; font-weight: 400;margin-bottom: 50px; text-align: center;}
.research .text_box h3 span{display: inline-block; color: var(--primary-color); font-size: 45px; font-weight: 600; line-height: 1;padding-bottom: 20px;}
.research .inner .img_box{position: relative;}
.research .inner .img_box::before{content:''; display: block; width: 100%; height: 190px; background:#3A0E23; position: absolute; bottom: 0; }
.research .inner .img_box ul{width: 100%; display :grid;  grid-template-columns: repeat(5, 1fr); gap: 10px;}
.research .inner .img_box ul li img{width: 100%;}

/* PC (해상도 1740px ~ 1860px) */
@media screen and (max-width: 1860px) {
}
/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width: 1540px) {
    /* appointment */
    .appointment {padding: 15px 0;}
    .appointment .inner form {/* gap: 32px; */justify-content: space-between;}
    .appointment .inner form .tab_ver {width: 95%;/* flex-direction: column; */justify-content: flex-start;gap: 10px;}
    .appointment .inner form h3 {width: 10%;font-weight: 500;font-size: 20px;line-height: 28px;letter-spacing: -0.02em;color: #FFFFFF;}
    .appointment .inner form ul {width: 100%;display: flex;align-items: center;}
    .appointment .inner form ul.input_box li {width: 40%;}
    .appointment .inner form ul.input_box liinput.user_name {width: 100%; max-width: 100%; box-sizing: border-box;}
    .appointment .inner form ul.input_box li input {box-sizing: border-box;}
    .appointment .inner form ul.input_box input.user_name {width: 100%;}
    .appointment .inner form ul.input_box input.user_tel {width: 100%;}
    .appointment .inner form ul.agree_box {gap: 16px;}
    .appointment .inner form .tab_ver ul{width: max-content;}

    .appointment .inner form ul.agree_box button {gap: 8px;/* display: block; */width: 100%;padding: 0 24px;}

    /* visual */

    /* content */
    .story .inner .story_box{padding: 0 60px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width: 1440px) {
    /* appointment */
    .appointment .inner form {gap: 32px;justify-content: space-between;}
    .appointment .inner form .tab_ver{justify-content: space-between;width: 90%;}
    .appointment .inner form .tab_ver ul.input_box{flex: 1;}
    .appointment .inner form ul.agree_box{justify-content:flex-end; gap:24px;}

    .appointment .inner form ul.input_box li input {box-sizing: border-box;}
    .appointment .inner form ul.input_box li{width: 100%;min-width: 160px;}
    .appointment .inner form ul.input_box input.user_name {width: 100%;/* max-width: 100%; */box-sizing: border-box;}
    .appointment .inner form ul.agree_box button {padding: 0 16px;}

    /* visual */
    .visual .visual_text p strong {font-size: 56px; line-height: 1.3;}
    .visual .visual_text p:first-of-type{font-size: 24px; margin-bottom: 10px;}
    /* content */
    .event .inner{padding: 140px 5%;}
    .event .swiper-container{width: 70%;}

    .signature .inner ul .text_box {padding: 30px 5%;}
    .signature .swiper-pagination {left: 20%;}

    .compare .inner{padding: 20px 5% 60px;}
    .compare .inner .text_box h3 {margin-bottom: 30px;}
    .compare .inner .review_wrap .swiper-container{width: 50%;}
    .compare .inner .text_box{padding-bottom:30px;}

    .story .inner{padding: 60px 5% 0;}
}
@media screen and (max-width: 1300px) {
        .appointment .inner{width: 90%;}
    .appointment .inner form h3{/* display: none; */}
    .appointment .inner form .tab_ver{width: 100%;gap: 16px;}

    .appointment .inner form ul.agree_box {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 두 개의 열 생성 */
        grid-template-rows: auto auto; /* 두 개의 행 */
        gap: 8px;
        width: 100%;
        /* max-width: 400px; */
    }

    .appointment .inner form ul.agree_box li:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        min-width: 200px;
    }
    .appointment .inner form ul.agree_box li:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        min-width: 200px;
    }
    .appointment .inner form ul.agree_box li:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
    }
    .appointment .inner form ul.agree_box label {font-weight: 400;font-size: 14px;line-height: 15px;vertical-align: middle;white-space: nowrap;}
    .appointment .inner form ul.agree_box label span {line-height: 20px;vertical-align: top;font-size: 12px;}
    .appointment .inner form ul.agree_box a .shortcut_icon{width: 16px; vertical-align:middle;}
    .appointment .inner form ul.agree_box a {font-size: 12px;line-height: 20px;vertical-align: top;}

    .appointment .inner form ul.input_box li{min-width: 130px;}
    .appointment .inner form ul.input_box li:nth-child(1) {width: 60%;}
    .appointment .inner form ul.input_box li:nth-child(2) {width: 100%;}
    .appointment .inner form ul.input_box li input {padding: 4px 5%;height: 40px;width: 100%;}
    .appointment .inner form ul.agree_box button {height: 44px;font-size: 16px;line-height: 20px;border-radius: 999px;/* padding: 6px; */letter-spacing: -0.02em;width: 80%;}
}
/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .pc_block{ display: none;}
    /* notice popup */
    .notice_popup {transform: translate(-50%, -25vh); top: 50vh;}
    .notice_popup .mySwiper {width: 400px; height: 400px;}

    .notice_popup .swiper-horizontal>.swiper-pagination-bullets,
    .notice_popup .swiper-pagination-bullets.swiper-pagination-horizontal,
    .notice_popup.swiper-pagination-custom, .swiper-pagination-fraction {width: auto; top: 16px; right: 16px; bottom: 520px;}
    .notice_popup .swiper-pagination {top: 16px; right: 16px;}
    .notice_popup .swiper-pagination-bullet {width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,10px));
        height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,10px));}

    .notice_popup .notice_bottom {padding: 8px 12px;}
    .notice_popup .notice_bottom label span {font-size: 12px; line-height: 16px; letter-spacing: 0; padding-left: 24px;}
    .notice_popup .notice_bottom label {width: 16px; height: 16px; line-height: 18px;}
    .notice_popup .notice_bottom a {font-size: 12px; padding-right: 14px;}
    .notice_popup .notice_bottom a::before {width: 11.5px;}
    .notice_popup .notice_bottom a::after {width: 11.5px;}

    .appointment .inner form ul.agree_box {flex-wrap: wrap; gap:12px;}
    .appointment .inner form ul.agree_box li:last-of-type {/* width: 50%; */}
    .appointment .inner form ul.agree_box li{width: auto;}
    .appointment .inner form h3{ display: none;}

    /* visual */
    .visual {}
    .visual .visual_text {top: 80px;left: 5%;}
    .visual .arrow_wrap {bottom: 20%;}
    .visual .visual_text p strong {font-size: 48px;}

    /* content */

    section > span {font-weight: 400; font-size: 14px;}
    section > span i {display: none;}
    section h3 a {font-size: 24px; line-height: 30px; padding-bottom: 32px;}
    section h3 a span {display: inline-block;}

    .event .inner{flex-direction: column;}
    .event .inner .text_box h3,.event .inner .text_box p{text-align: center;}
    #content .event .inner .btn_more{display : none; }
    .event .swiper-container{width: 100%;}
    .event .swiper-wrapper .swiper-slide .img_box img{border-radius:20px !important;}

    .signature .inner .text_box h3{text-align: center;}
    .signature .swiper-pagination{display: none;}
    .signature .inner ul li{display: block; position: relative;}
    .signature .inner ul li div{width: 100%;}
    .signature .inner ul .text_box{position: absolute; top: -25%; left: 5%;}

    .compare{padding: 60px 0 40px}
    .compare .marquee p{font-size: 100px;}
    .compare .text_box h3{text-align: center;}
    .compare .inner .review_wrap .swiper-container{width: 100%;}

    .story .inner .story_box{padding: 0 20px 0 60px;}
    .story .inner .story_box .text_box h3 span{ font-size: 35px; }
    .story .inner .story_box .text_box h3 span.add_text{font-size: 24px; }

    .research .inner{padding: 60px 5%; }
    .research .inner .img_box::before{content:none; }
    .research .inner .img_box ul{ grid-template-columns: repeat(3, 1fr); gap: 10px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }

    /* notice popup */
    #draggable {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        position: fixed;
        top: 22%;
        left:0;
        right:0;
        transform: none;
    }
    .notice_popup_bg {display: block;}
    .notice_popup {transform: translate(-50%, -20vh); top: 45vh;}
    .notice_popup .mySwiper {width: 100%;height:auto;aspect-ratio: 1 / 1; }

    .notice_popup .swiper-horizontal>.swiper-pagination-bullets,
    .notice_popup .swiper-pagination-bullets.swiper-pagination-horizontal,
    .notice_popup.swiper-pagination-custom, .swiper-pagination-fraction {top: 12px;}
    .notice_popup .swiper-pagination-bullet {width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
        height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));}

    .notice_popup .notice_bottom {padding: 8px;}
    .notice_popup .close_btn_top {right: -15px; top: -15px; width: 30px; height: 30px;}
    .notice_popup .notice_bottom {padding: 8px 12px;}
    .notice_popup .notice_bottom label {width: 16px; height: 16px; line-height: 18px;}
    .notice_popup .notice_bottom a {font-size: 12px; padding-right: 14px;}
    .notice_popup .notice_bottom a::before {width: 11.5px;}
    .notice_popup .notice_bottom a::after {width: 11.5px;}




    /* visual */
    .visual {}
    .visual .visual_text p:first-of-type{font-size: 14px; font-weight: 400;}
    .visual .visual_text p strong {font-size: 36px; }
    .visual .arrow_wrap ul li{border-radius: 100px;background: rgba(0, 0, 0, 0.20);width: 60px;height: 30px;justify-content: center;align-items: center;/* display: flex; */}
    .visual .swiper-pagination ul li  span{font-size: 12px;}
    .visual .swiper-pagination .swiper-control{display: none;}
    .visual .arrow_wrap {left: 5%;bottom: 10%;}
    /* .visual .swiper-container ul.swiper-wrapper li img {filter: contrast(105%);} */

    /* content */
    .event .inner{padding: 60px 0 60px 5%;}
    .event .text_box_top{margin-right:5%;}
    .event .text_box h3{font-size:32px; text-align: center;margin-bottom: 16px;}
    .event .text_box p{font-size: 18px;}

    .signature .swiper-container {max-height: 680px;}
    .signature .text_box h3{font-size:32px; text-align: center;}
    .signature .text_box p{font-size: 18px;}
    .signature .inner .text_box h3 {font-size: 18px; font-weight: 400;margin-bottom: 35px;}
    .signature .inner .text_box h3 span{ font-size: 32px; padding-bottom: 16px;}
    .signature .inner ul .text_box p.sub-heading {font-size: 20px; line-height: 1.3;margin-bottom: 24px;}
    .signature .inner ul .text_box p.name{font-size: 30px; margin-bottom:24px;}
    .signature .inner ul .text_box p.explain {font-size:14px; line-height: 1.3;}


    .compare{padding: 60px 0 40px}
    .compare .marquee p{font-size: 50px; line-height: 80px; padding-right: 100px;}
    .compare .marquee p{font-size: 50px; line-height: 80px; padding-right: 100px;}
    .compare .marquee p::after{width: 50px; height: 50px;}
    .compare .inner .text_box h3 {font-size: 18px;margin-bottom: 5px;}
    .compare .inner .text_box h3 span{ font-size: 32px;padding-bottom: 16px;}

    .story{ background-position: top left;}
    .story .inner{height: 530px;box-sizing: border-box;}
    .story .inner .story_box{ height: 380px;align-items: flex-end; }
    .story .inner .story_box::before{border-radius: 0px 80px 0px 0px; height:100%;}
    .story .inner .story_box .text_box h3 span{ font-size: 32px;padding-bottom: 16px;}
    .story .inner .story_box .text_box h3 span.add_text{font-size:18px; }
    .story .inner .story_box .text_box{padding-top:0; padding-bottom:12%;}
    .story .inner .story_box .img_box{width: 300px;}
    .story .inner .story_box .img_box img{width: 100%;}

    .research .inner .img_box ul{ grid-template-columns: repeat(2, 1fr); gap: 10px;}

}

@media (max-width: 480px) {
    .signature .inner ul .text_box{top: 0;}

    .story .inner .story_box{padding: 0 20px;}
    .story .inner .story_box .text_box{position: absolute;top: 30px;left:20px;padding-top: 0; width: 40%;}
    .story .inner .story_box .img_box{width: 300px;position: absolute;bottom: 0;right: -26%;}
}


.pr {
    position: relative;
}
@keyframes slideInOut {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    10% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.animated-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    animation: slideInOut 4s ease-in-out infinite;
}

@media screen and (max-width:767px) {
    /* appointment */
    input[type="checkbox"] + label {width: 14px; height: 14px;}
    input[class="agree"] + label::after {width: 14px; height: 14px;}
    input.agree:checked + label {border-color: #381187; background: #381187;}
    input.agree:checked + label::after {width: 14px; height: 14px;}

    .appointment {width: 100%;bottom: 0;/* display: none; */border-radius: 12px 12px 0 0;padding: 25px 5%;}
    .appointment.on {display: block;}
    .appointment input[type="checkbox"] + label {vertical-align: bottom;}
    .appointment .inner{width:100%;max-width: fit-content;}
    .appointment .inner form {flex-direction: column;align-items: flex-start;gap: 16px;/* padding-bottom: 35px; */}
    .appointment .inner form .tab_ver {/* width: 100%; */align-items: flex-start;gap: 12px;flex-direction: column;position: relative;}
    .appointment .inner form h3 {width: 100%; font-size: 18px; line-height: 26px; display: none;}
    .appointment .inner form ul {/* flex-direction: column; */}
    .appointment .inner form ul.input_box {width: 100%;}
    .appointment .inner form ul.input_box li{min-width:120px}
    .appointment .inner form ul.input_box li:nth-child(1){width: 80%;max-width: fit-content;}
    .appointment .inner form ul.agree_box {gap: 8px;}

    .appointment .inner form ul.agree_box li:nth-child(3) {width: 100%;}
    .appointment .inner form ul.agree_box label {font-weight: 400;font-size: 12px;line-height: 15px;vertical-align: middle;}
    .appointment .inner form ul.agree_box button {width: 100%;}
    .appointment .inner .close_btn {display:none;color: #fff;font-size: 16px;line-height: 20px;vertical-align: middle;/* margin-top: 16px; */text-decoration: underline;position: absolute;left:  50%;bottom: 16px;transform: translate(-50%, 0);}
    .appointment .inner .close_btn::before {content: none;display: inline-block;width: 18px;height: 18px;background: url(../images/btn_close_wht.png) center no-repeat;background-size: contain;vertical-align: middle;padding-right: 12px;}
    .appointment .inner form .selectBox .label {border-radius: 4px;padding: 4px 5%;}
    .appointment .inner form .selectBox .optionList {border-radius: 4px;bottom: 34px;}
    .appointment .inner form .selectBox .optionList .optionItem {padding: 8px 20px;}

}