@charset "utf-8";

/* #content */
.img_box img {width: 100%;}
.block {display: block;}
.m_color {color: #0C82FE;}
.highlight{color:#FFD852;}
.show-mobile{display: none;}
.visually-hidden {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}
section .inner .title_text {font-weight: 700; font-size: 60px; letter-spacing: -0.02em; text-align: center; color: #000;}
section .inner .sub_text {font-weight: 700;font-size: 100px;line-height: 1.2;text-align: center;position: relative;}

section .inner .sub_explain p {font-weight: 300;font-size: 48px;line-height: 1.4;letter-spacing: -1px;text-align: center;color: #161718;margin-bottom: 1em;margin-top: 24px;}
section .inner .sub_explain p:last-of-type {margin-bottom: 0;}
section .inner .sub_explain p strong {font-weight: 500;}
section > .inner {padding: 90px 16.66%;box-sizing: border-box;}


.intro_banner {width: 100%; padding-top: calc(560/1920 *100%); position: relative;
    background-image: url(../images/img_intro_banner.png); background-size: cover; background-repeat: no-repeat; background-position: center; 
    background-color: rgba(0, 0, 0, 0.7); background-blend-mode: darken;}
.intro_banner .inner {width: 100%; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.intro_banner .inner > span {display: block; font-size: 46px; font-weight: 500; letter-spacing: -2.4px; color: #fff; margin-bottom: .2em;}
.intro_banner .inner strong {display: inline-block; color: #BDF1FF;background-clip: text; font-size: 100px; font-weight: bold;  letter-spacing: -6.75px; line-height: 1;}


.definition .inner {width: 100%;padding: 0;margin: 0 auto; }
.definition .top_section {padding: 0 16.6%;background: linear-gradient(135deg, #0080ff 0%, #0066ff 100%);min-height: 600px;max-height: 720px;position: relative;display: flex;justify-content: center;clip-path: ellipse(100% 100% at 50% 0%);overflow: hidden;}
.definition .top_section .text_box{display: flex; justify-content: center; align-items: center;}
.definition .top_section .text_box p{text-shadow:  4px 4px 10px rgba(0,0,0,0.25)}
.definition .main_heading{font-size: 90px;font-weight: 700;color:#fff;letter-spacing: -0.02em;}
.definition .main_heading .mark{background: #FFF4CE; color: #0C82FE; padding: 0 .1em;text-shadow:none; box-shadow:4px 4px 10px rgba(0,0,0,0.25); }
.definition .top_section .img_box{width: calc(800/1280* 100%);/* display: flex; *//* align-items: flex-end; */margin-left: -80px;/* justify-content: space-between; */}
.definition .main_text{font-size: 70px;line-height: 1.2; font-weight: 700; text-align: center; background-color: #fff; position: relative;z-index: 1;padding: 80px 20px 50px;text-align: center;}
.definition .top_section .img_box img{filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.25));}
.advantage {background: #F5F5F5;}
.advantage .venn-container{display: flex;justify-content: center;width: 900px;margin: 160px auto;position: relative;}
.advantage .venn-container::before{content:'';width: 88%;height: 130%;border-radius:300px;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 4px solid rgba(43, 77, 190, 0.50);}
.advantage .venn-container::after{content:'+';font-size:50px; font-weight:700;color: #2B4DBE;display: block;position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);}
.advantage .circle{width: 38%; border-radius:50%; position: relative;}
.advantage .circle .text_box{width: 120%;height: 120%;object-fit: cover;text-align: center;border-radius: 50%;letter-spacing: -0.02em;gap: 30px;display: flex;
    flex-direction: column;align-items: center;justify-content: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background:rgba(255, 200, 21, 0.60);}
.advantage .circle .text_box p:first-of-type{font-size: 70px;font-weight: 700;}
.advantage .circle .text_box p{font-size: 35px;line-height: 1.2;}
.advantage .circle.top .text_box p:first-of-type{color: #0C82FE;}
.advantage .circle.left .text_box{background:rgba(58, 122, 242, 0.84);color: #fff;}
.advantage .circle::after {content: ''; display: block; padding-bottom: 100%;}
.advantage .inner .sub_explain p{line-height:1.6;}
.advantage .sub_explain .mark{background:#FFE661; font-weight: 700;padding: 0 .2em;}

.material ul{display: grid;grid-template-columns: repeat(4, 1fr);gap: 26px;margin: 60px auto;padding: 34px 0;}
.material ul img{width:100%}
.material .inner .sub_explain p{line-height:1.6;}
.material .sub_explain .mark{background:#FFE661; font-weight: 700;padding: 0 .2em;}

.point{background: #F5F5F5;}
section.point .inner .sub_text{font-size: 85px;}
.point .inner ul.point_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;margin-top:55px;}
.point .inner ul.point_list li p {font-weight: 700;font-size: 35px;line-height: 1.3;letter-spacing: -1px;color: #fff;text-align: center;border-radius: 20px 20px 0 0;padding: 14px 0;}
.point .inner ul.point_list li:nth-child(1) p {background: #161718;}
.point .inner ul.point_list li:nth-child(2) p {background: #0C82FE;}
.point .inner ul.point_list li .img_box img {border-radius: 0 0 20px 20px;}
.point .inner .notice {font-weight: 300;font-size: 28px;line-height: 44px;letter-spacing: -1px;color: #505050;text-align: center;margin-top: 22px;}
.point .inner .sub_explain p{line-height:1.6;text-wrap: balance;word-break: keep-all;}
.point .sub_explain .mark{background:#FFE661; font-weight: 700;padding: 0 .2em;}

.case{background: #0C82FE;}
.case .inner{padding: 150px 0 0; }
section.case .inner .sub_text{color:#FFE661;font-size: 85px; }
section.case .inner .title_text{color:#fff; }
.case .swiper{ width: 100%;margin-top: 80px;}
.case .swiper img{width: 100%; cursor: pointer;}
.case .text_box{position: absolute;z-index:99;top: 40%;left: 50%;transform:translate(-50%, -50%);  pointer-events: none; }
.case .text_box p{font-size: 30px;font-weight: 600;text-align: center;color: #fff;text-shadow: 0 4px 4px rgba(0,0,0,.45);}
.case .img_popup {position: fixed;inset: 0;display: none;align-items: center;justify-content: center;background: rgba(0,0,0,0.6);z-index: 9999;}
.case .img_popup.is-active {display: flex;}
.case .img_popup__content {position: relative;max-width: 90vw;max-height: 90vh;}
.case .img_popup__content img {max-width: 100%;max-height: 100%;display: block;}
.case .img_popup__close {position: absolute;top: -36px;right: -36px;width: 36px;height: 36px;border-radius: 50%;background: rgba(255, 255, 255, 0.85);cursor: pointer;border: none;outline: none;
    display: flex;align-items: center;justify-content: center;}
.img_popup__close::before,.img_popup__close::after {content: "";position: absolute;width: 20px;height: 2px;background: #333;border-radius: 1px;}
.img_popup__close::before {transform: rotate(45deg);}
.img_popup__close::after {transform: rotate(-45deg);}

.abutment{background: #0C82FE;}
section.abutment .inner .sub_text{color:#FFE661;font-size: 85px; }
section.abutment .inner .title_text{color:#fff; }
.abutment .notice{font-size: 28px; letter-spacing: -0.02em; color: #fff;text-align: center; line-height: 1.5; font-weight: 300;}
.abutment .video_box{margin: 50px auto;max-width: 1280px;}


.reason{background: radial-gradient(54.56% 47.77% at 50% 39.97%, #269AFA 0%, #003283 100%);}
section.reason .inner .sub_text{color:#fff; }
section.reason .inner .title_text{color:#fff; }
.reason .main_text{position: relative;  max-width: calc(968/1280 * 100%); margin: 50px auto 0;}
.reason .main_text p{font-size: 45px;text-align: center;line-height: 1.3;letter-spacing: -0.02em;color: #fff;font-weight: 700;}
.reason .main_text p .highlight{color:#FFD852; }
.reason .img_box{margin: 0 auto; max-width: 800px;}

.oneday{background: #0C82FE;}
section.oneday .inner .sub_text .lower_text{font-size: .6em; }
section.oneday .inner .title_text{color:#fff; }
.diagram_wrap {max-width: 600px;  margin: 0 auto} 
.diagram {position: relative;width: 600px;height: 600px;}
.oneday .content_box{display: flex; align-items:center;}
/* 중앙 원 (378 -> 226.8) */
.center-circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 226.8px;height: 226.8px;background: #FFD852;border: 6px solid #0C82FE; /* 10 -> 6 */outline: 1.8px solid rgba(255, 216, 82, .79); /* 3 -> 1.8 */border-radius: 50%;z-index: 3;display: flex;flex-direction: column;justify-content: center;align-items: center;box-shadow: 1.2px 2.4px 2.4px rgba(0,0,0,0.05);}
.center-circle.flip { animation: flip 0.6s ease; }

@keyframes flip {
0%   { transform: translate(-50%, -50%) rotateY(0deg); }
100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

.center-text-small {font-size: 27px; color: #1C1C1C;margin-bottom: 5px;}
.center-text-large {font-size: 42px;font-weight: 700;color: #1C1C1C;line-height: 1;}
/* 바깥 원들 (250 -> 150) */
.outer-circle {position: absolute;width: 150px;height: 150px;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 30px; font-weight: 700;color: #1C1C1C;z-index: 2;box-shadow: 1.2px 2.4px 2.4px rgba(0,0,0,0.05);text-align: center;line-height: 1.2;}
.circle-1 {top: 42px;left: 49.2px; background: #F0F7FF;}
.circle-2 {top: 42px;right: 49.2px;background: #A4D0FF;}
.circle-3 {bottom: 42px;right: 49.2px;background: #5CABFF;}
.circle-4 {bottom: 42px;left: 49.2px;background: #0150A2;color: #fff;}
.diagram_wrap svg {position: absolute;top: 0; left: 0;width: 100%; height: 100%;z-index: 0;}
.triangle {position: absolute;width: 0; height: 0;border-left: 16px solid transparent;border-right: 16px solid transparent;border-bottom: 30px solid #fff;z-index: 1;filter: drop-shadow(0 1.2px 2.4px rgba(0,0,0,0.2));transform: translate(-50%, -50%);}

.oneday .inner .notice {font-weight: 300;font-size: 28px;line-height: 1.6;letter-spacing: -1px;color: #161718;text-align: center;margin-top: 40px;}
.oneday  .main_text{text-align: center; margin: 24px 0 48px;}
.oneday  .main_text p{font-size: 45px; color: #fff; letter-spacing: -1px; background:#0066DB; display: inline-block; padding: 0 24px;}
.oneday .benefit_list{width: max-content; margin: 24px auto;}
.oneday .benefit_item .icon{display: inline-block;margin-right: 30px; width:40px; height: 33px; background: url(../images/icon_check.svg) no-repeat 50% 50%; }
.oneday .benefit_item .text{font-size: 50px; color: #fff; line-height: 1.6;}
.oneday .benefit_item .text strong{color: #FFD852; }

.sleep{background: #EAF2FF;}
.sleep .inner{background: url(../images/img_sleep_bg.png) no-repeat left bottom;background-size: 50% auto;}
.sleep .sub_text .mark{display: inline-block;color: #fff;background: linear-gradient(93deg, #47D7FF -3.04%, #0077F4 74.48%), #D9D9D9;padding: 0 24px;line-height: 1.5;}
.sleep .benefit_list{margin-top: 140px;display: flex;flex-direction: column;gap: 18px;margin-left: auto;width: fit-content;}
.sleep .benefit_list .benefit_item{font-size: 50px; letter-spacing:-0.02em; background: #FFFFFF;border: 1px solid #41cffe; border-radius: 300px; padding: 12px 40px;}
.sleep .benefit_list .benefit_item strong{color: #FF8419;}

.slogan .inner{padding: 60px 16.6%;}
.slogan .inner .title_text{color: #FF8419;}
.slogan .inner .sub_text{font-size: 80px;line-height: 1em;}
.slogan .inner .notice{font-size: 25px; line-height: 1.6; font-weight: 300; letter-spacing: -0.04em;color: #161718; text-align: center; margin-top: 60px;}


.global .img_grid_box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; width:  calc(1183/1280 * 100%); margin: 0 auto;}
section.global .inner .sub_text{font-size: 85px; }
section.global .inner .title_text{font-size: 50px; }
.global .direct_list{margin:60px auto;display: flex;flex-direction: column;gap: 15px;width: calc(840/1280 * 100%);align-items: stretch;}
.global .direct_item{display: flex;border-radius: 20px;overflow: hidden;height: 80px;}
.global .direct_item .name{font-size: 40px;font-weight: 700;color: #fff;background:#0C82FE;display: flex;justify-content: center;align-items: center;width: 45%;}
.global .direct_item .desc{font-size: 38px;background:#D6EAFF;display: flex;justify-content: flex-start;align-items: center;width: 55%;padding-left: 30px;}

.promotion{background: #EAF2FF;}
section.promotion .inner {padding: 80px 0;}
section.promotion .inner .sub_text {font-size: 85px;}
section.promotion .inner .sub_text .mark{color: #1925DE; background: linear-gradient(to top, #ffd852 30%, transparent 30%); display: inline-block;}
.promotion .benefit_list{width: calc(1012/1280* 100%);margin: 70px auto;max-width: 1084px;}
.promotion .benefit_item {position: relative;margin-bottom:40px;display: flex;}
.promotion .benefit_item:last-of-type{margin-bottom:0;}
.promotion .benefit_item .box{display: block;font-size: 60px;font-weight:  700;background: #A4D0FF;width: 100%;padding: 24px 40px 24px 200px;border-radius: 200px 20px 20px 220px;box-sizing: border-box;margin-left: auto;color: #003283;}
.promotion .benefit_item .icon{display: block;width: 150px;height: 150px;display: block;background: url(../images/icon_promotion_01.svg) no-repeat 50% 50%;position:absolute;left: 50p;top: 50%;transform: translate(0 , -50%);background-size:contain;}
.promotion .benefit_item:nth-of-type(2) .icon{background-image: url(../images/icon_promotion_02.svg);}
.promotion .benefit_item:nth-of-type(3) .icon{background-image: url(../images/icon_promotion_03.svg);}
.promotion .form_box form{position: relative;margin: 0 auto;background: url(../images/img_form_bg.png) no-repeat 50% bottom;background-size: contain;}
.promotion .promotion_footer{display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 60px;}
.promotion .promotion_footer p{flex-shrink:0;font-size: 80px; font-weight: 700;letter-spacing: -1px;}
.promotion .promotion_footer .img_box{max-width: 700px;}

.promotion .form_box form{margin-top: auto;width: 800px;padding: 200px 300px 60px 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.form_box form .table{width: 80%;box-sizing: border-box;}
.form_box form .table li{margin-bottom:12px;width: 100%;}
.form_box form .table li:last-of-type{margin-bottom:0;}
.form_box form .table input{width: 100%;font-size: 34px;border: 3px solid #3A7AF2;border-radius: 12px;height: 100px;box-sizing: border-box;padding: 0 32px;}
.form_box form .agree_box {margin: 20px 0 40px;width: 80%;padding: 40px 32px;border: 8px solid #3A7AF2;border-radius: 12px;box-sizing: border-box;}
.form_box form .agree_box ul li {margin-bottom: 14px;}
.form_box form .agree_box ul li:first-of-type{border-bottom: 1px solid #ddd;padding-bottom: 16px;}
.form_box form .agree_box ul li:last-child {margin-bottom: 0;}
.form_box form .agree_box ul li > div:first-of-type {position: relative;}
.form_box form .agree_box input[type="checkbox"] {appearance: none; position: absolute; top: 50%; left: 0; transform: translateY(-50%); margin: 0;}
.form_box form .agree_box input[name="allcheck"] + label {font-size: 20px;font-weight: 500;letter-spacing: -1px;}
.form_box form .agree_box label {display: inline-block;width: auto;height: 100%;vertical-align: middle;margin-left: 35px;}
.form_box form .agree_box input[class="agree"]::after {content:''; display: inline-block; width: 26px; height: 26px; 
    border-radius: 4px; border: 1px solid #A6A6A6; box-sizing: border-box; background-color: #fff; vertical-align: middle;
    background-image: url(../images/icon_chk.png); background-repeat: no-repeat; background-position: center; background-size: 14px 11px;}
.form_box form .agree_box input[class="agree"]:checked::after {border-color: #0C82FE; background-color: #0C82FE;}
.form_box form .agree_box label .btn_agree {display: inline-block;font-size: 20px;line-height: 1.6;color: #161718;}
.form_box form .agree_box label .btn_agree i {font-style: normal; display: inline-block; font-size: 16px; font-weight: 400; letter-spacing: -1px;
    border-radius: 50px; border: 1px solid #AAADB0; background: #FFF; padding: 0 12px; height: 34px; line-height: 34px; margin-left: 6px;}
.form_box form .agree_box .privacy {display: inline-block; background: #fff; border: 1.5px solid #A6A6A6; box-shadow: 0px 2px 1px 0px rgba(44, 39, 56, 0.04); border-radius: 50px; 
    padding: 7px 20px; color: #272727; font-size: 17px; text-align: center; margin-left: 16px; vertical-align: middle;}
.form_box form .terms{position: fixed;inset: 0;display: none;align-items: center;justify-content: center;background: rgba(0,0,0,0.6);z-index: 9999;justify-content: center;align-items: center;}
.form_box form .terms .terms_content{position: relative;max-width: 100vw;max-height: 90vh;}
.form_box form .terms p{width: 100%;height: 360px;overflow-y: scroll;border-radius: 10px;padding: 25px 3%;margin: 14px 0;font-weight: 300;font-size: 15px;
    line-height: normal;color: #454545;background: #F9F9F9;border: 1px solid #D5D5D5;z-index: 1;display: block;box-sizing: border-box;}
.form_box form .terms.on {display: block;}
.form_box form .table_btn{width: 90%;border-radius: 20px;background:#0060F6;font-size: 68px;font-weight: 700;padding: 18px 0;box-sizing: border-box;color: #fff;margin: 0 auto;display: block;}
.terms .terms_popup__close {position: absolute;top: -36px;right: -36px;width: 36px;height: 36px;border-radius: 50%;background: rgba(255, 255, 255, 0.85);
    cursor: pointer;border: none;outline: none;display: flex;align-items: center;justify-content: center;/* transform: translate(-50%, -50%); */}
.terms .terms_popup__close::before,.terms_popup__close::after {content: "";position: absolute;width: 20px;height: 2px;background: #333;border-radius: 1px;}
.terms .terms_popup__close::before {transform: rotate(45deg);}
.terms .terms_popup__close::after {transform: rotate(-45deg);}
/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    section > .inner {padding: 150px 12%;}

    .definition .top_section{padding: 40px 5% 0;}
    .intro_banner .inner strong {font-size: 80px;}
    .intro_banner .inner p {font-size: 20px;}

    .material ul{min-width:800px;}
    .point .inner ul li p {font-size: 32px;}
    .point .inner .notice {font-size: 16px; line-height: 1.2em;}

    
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    section > .inner {padding: 150px 8%;}
    .definition .top_section{min-height:400px}

    .promotion .form_box form{width: 640px;padding: 200px 200px 60px 200px;}
    .form_box form .table_btn{font-size: 40px;width: 90%;}
    .form_box form .agree_box{width: 90%;padding: 18px 24px;margin: 20px 0;}
    .form_box form .table{width:90%;}
    .form_box form .table input{height: 72px; font-size: 24px;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    section > .inner {padding: 150px 6%;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width: 1024px) {
    /* content */
    section .inner .title_text {font-size: 48px;text-wrap: balance;word-break: keep-all;}
    section .inner .sub_text {font-size: 64px;}
    section .inner .sub_text::before {width: 32px; height: 2px; margin-left: -16px;}
    section .inner .sub_explain p {font-size: 32px;line-height: 22px;}
    section > .inner {padding: 80px 5%;}
    
    .intro_banner .inner > span {font-size: 34px;}
    .intro_banner .inner strong { font-size: 68px;}

    .definition .main_heading{font-size: 64px}
    .definition .main_text{font-size: 48px;}

    .advantage .venn-container{width:700px;margin: 100px auto;}
    .advantage .circle .text_box p:first-of-type{font-size:54px;}
    .advantage .circle .text_box p{font-size: 28px}

    section.point .inner .sub_text{font-size: 64px}

    section.case .inner .sub_text{font-size:64px;}
    .case .text_box p{font-size: 20px;}

    .slogan .inner{padding: 80px 5%}
    .slogan .inner .sub_text{font-size: 52px;}

    .oneday .benefit_item .text{font-size: 36px;}
    .oneday .benefit_item .icon{width: 24px; height: 32px; background-size: contain;}
    .oneday .inner .notice{font-size: 16px;}
    .diagram_wrap  { width: 80%; }
    .oneday .content_box{flex-direction:column;}
    section.global .inner .sub_text{font-size: 64px;}

    .global .direct_list{margin: 24px auto;}
    .global .direct_item{height: 60px;}
    .global .direct_item .name{font-size: 24px;}
    .global .direct_item .desc{font-size: 24px;}

    section.promotion .inner .sub_text{font-size: 64px;}

    .point .inner .sub_explain p .block {display: inline;}
    .point .inner .sub_explain p i {display: block;}
    .point .inner ul.point_list {gap: 16px;}
    .point .inner ul.point_list li p {font-size: 24px;padding: 12px 0;border-radius: 10px 10px 0 0;}
    .point .inner ul li .img_box img {border-radius: 0 0 10px 10px;}
    .point .inner .notice {font-size: 14px; line-height: 1em; margin-top: 16px;}

    .material ul{min-width:100%;grid-template-columns: repeat(2, 1fr);}
    section.abutment .inner .sub_text{font-size: 64px;}
    .abutment .notice{font-size: 14px;}

    .reason .main_text{max-width: 100%;}

    .sleep .inner{background-position:center; background-size:100% auto;}
    .sleep .benefit_list{width: 100%;margin-top: 100%;}
    .sleep .benefit_list .benefit_item{font-size: 36px;text-align:center}
    
    .promotion .benefit_list{margin: 40px auto;width: 90%;padding: 0 5%;box-sizing: border-box;}
    .promotion .benefit_item{margin-bottom: 24px;}
    .promotion .benefit_item .box{font-size: 36px;padding: 14px 60px 14px 120px;border-radius: 200px 18px 18px 200px;}
    .promotion .benefit_item .icon{width: 90px;height: 90px;}


    .promotion .form_box form{width:100%; padding:140px 0 40px ;}
    .form_box form .agree_box{width: 50%;}
    .form_box form .table{width:50%;}
    .form_box form .table_btn{width: 50%;}
    .form_box form .table input{font-size: 20px;}
    .form_box form .table_btn{font-size: 24px;border-radius: 12px;}
    .promotion .promotion_footer p{font-size: 64px;}
    .form_box form .agree_box label .btn_agree{font-size: 14px;}
    .form_box form .agree_box input[class="agree"]::after{width: 20px; height: 20px;}
    .form_box form .agree_box label{margin-left: 30px;}
    .form_box form .agree_box label .btn_agree i{font-size:12px; height:20px; line-height:18px }
    .form_box form .table li{margin-bottom:10px;}
    .form_box form .agree_box ul li:first-of-type{padding-bottom: 8px;}
    .form_box form .agree_box ul li{margin-bottom:8px;}

}
@media screen and (max-width:821px) {
    .promotion .form_box form{
        padding-bottom: 5%;
        padding: 120px 0 5%;
    }
}
/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width: 768px) {
    .wrap { min-width: 375px; }
    .show-mobile{display: block;}
    /* content */
    section .inner .title_text {font-size: 20px;line-height: 1.4;}
    section .inner .sub_text {font-size: 30px;}
    section.oneday .inner .sub_text .lower_text{font-size: 1em;}
    section .inner .sub_text::before {width: 32px; height: 2px; margin-left: -16px;}
    section .inner .sub_explain p {font-size: 18px;line-height: 22px;letter-spacing: -0.06em;}
    section > .inner {padding: 60px 5%;}

    .intro_banner {background-position: right bottom;padding-top: calc(166/375 * 100%);background-image: url(../images/img_intro_banner_mo.png);}
    .intro_banner .inner > span {font-size: 23px;letter-spacing: -1px;}
    .intro_banner .inner > span i {display: block;}
    .intro_banner .inner strong {font-size: 42px; letter-spacing: -1px; line-height: 50px;}
    .intro_banner .inner p {font-size: 14px;}

    .definition .top_section{min-height: 260px;padding: 0 5%;max-height: 260px;}
    .definition .main_heading{font-size: 28px;}

    .definition .inner .img_box {width: 60%;margin-left: -40px;}

    .definition .main_text{font-size: 23px;padding: 32px 5% 60px;}


    .advantage .venn-container {width: 100%;margin: 60px auto;}
    .advantage .circle .text_box{gap:12px}
    .advantage .circle .text_box p:first-of-type{font-size: 25px;}
    .advantage .circle .text_box p{font-size: 15px;}
    .advantage .venn-container::after{font-size: 24px;}

    .material ul{min-width: 90%;gap: 20px;margin: 24px auto;padding: 12px 0;}

    section.point > .inner {padding: 60px 0;}
    section.point .inner .sub_text{font-size: 30px;}
    .point .point_img_box .img_box{width:100%}
    .point .point_img_box .img_box img{width: 120%}
    .point .point_img_box .img_box:first-of-type img{transform: translateX(-14px);}
    .point .point_img_box .img_box:last-of-type img{transform: translateX(14px);}

    .case .inner{padding: 60px 0 0;}
    section.case .inner .sub_text{font-size: 30px;}
    .case .img_popup__close{top: -48px;right: 2%;}
    .case .swiper{margin-top:32px;}
    .case .text_box p{font-size: 16px;}

    section.abutment .inner .sub_text{font-size: 30px;}
    .abutment .notice{font-size: 9px;text-align:left;}
    
    .reason .main_text p{font-size: 20px;}
    .reason .main_text{margin-top:24px;}
    .reason .main_text .bracket{width: 12px;height: 48px;border-width: 3px;}
    .sleep .inner{background-position: center 45%;padding-bottom: 0;background-image: url(../images/img_sleep_bg_mo.png);}
    .sleep .benefit_list .benefit_item{font-size: 20px;padding: 12px 0;}
    .sleep .benefit_list{gap: 8px;margin-top: 50%;}
    .sleep .sub_text .mark{padding: 0 8px}
    .slogan .inner{padding: 30px 5%;background: #EAF2FF;}
    .slogan .inner .sub_text{font-size: 30px;}
    .slogan .inner .notice{font-size: 11px;margin-top: 32px;}

    .oneday .main_text p{font-size: 17px;padding: 4px 8px;}
    .oneday .benefit_item .text{font-size: 20px;}
    .oneday .benefit_item .icon{width: 13px; height: 12px;margin-right:12px;}
    .oneday .inner .notice{font-size: 9px;}
    .diagram_wrap { width: 100%;display: flex;justify-content: center;}
    .diagram {width: 300px;height: 300px;}
    .center-circle {width: 113.4px;height: 113.4px;border: 3px solid #0C82FE;outline: 0.9px solid rgba(255, 216, 82, .79);box-shadow: 0.6px 1.2px 1.2px rgba(0,0,0,0.05);}
    .center-text-small { font-size: 13.5px;margin-bottom: 2.5px;}
    .center-text-large { font-size: 21px; }
    .outer-circle {width: 75px;height: 75px;font-size: 15px;box-shadow: 0.6px 1.2px 1.2px rgba(0,0,0,0.05);}
    .circle-1, .circle-2 { top: 21px; }
    .circle-3, .circle-4 { bottom: 21px; }
    .circle-1, .circle-4 { left: 24.6px; }
    .circle-2, .circle-3 { right: 24.6px; }
    /* 삼각형 크기 조절 */
    .triangle {border-left: 5.4px solid transparent;border-right: 5.4px solid transparent;border-bottom: 9px solid #fff;filter: drop-shadow(0 0.6px 1.2px rgba(0,0,0,0.2));}

    section.global > .inner{padding: 30px 0;}
    section.global .inner .sub_text{font-size: 30px;}
    section.global .inner .title_text{font-size: 17px;}
    .global .direct_list{width: 90%;}
    .global .direct_item{height: 30px;border-radius:8px}
    .global .direct_item .name{font-size: 16px;}
    .global .direct_item .desc{font-size: 16px;padding-left: 14px;}
    .global .img_grid_box{width: 100%; gap: 5px}

    section.promotion .inner{padding: 30px 0;}
    section.promotion .inner .sub_text{font-size: 30px;}
    .promotion .benefit_list{margin: 24px auto 0;width: 100%;}
    .promotion .benefit_item{width: 100%;}
    .promotion .benefit_item .box{font-size: 18px;padding: 12px 24px 12px 80px;}
    .promotion .benefit_item .icon{width: 60px;height: 60px;}
    .form_box form .table li{margin-bottom:8px;}
    .form_box form .table input{height: 30px;font-size:15px;border-radius:6px;border-width: 2px;padding: 0 14px;}
    
    .promotion .promotion_footer{gap: 8px;margin-top: 24px;}
    .promotion .promotion_footer p{font-size: 28px;}
    .promotion .promotion_footer .img_box{width: 50%;}
    
    .point .inner .sub_explain p i {display: inline;}
    .point .inner .sub_explain p .block {display: block;}
    .point .inner ul.point_list {grid-template-columns: repeat(1, 1fr);gap: 20px;margin-top: 30px;padding: 0 5%;}
    .point .inner .notice {margin-top: 20px; line-height: 1.5em;}
    .point .inner .notice i {display: block;}


    .abutment .inner ul {flex-direction: column; gap: 20px; margin-top: 10px;}
    .abutment .inner ul li {width: 100%;}
}
@media(max-width: 580px){
    .form_box form .table{width: 65%;}
    .form_box form .agree_box{width: 65%;padding: 8px 12px;border-width: 2px;border-radius: 6px;margin: 8px 0;}
    .form_box form .agree_box label .btn_agree{font-size: 9px;line-height: 20px;}
    .form_box form .agree_box label .btn_agree i{font-size: 8px;height: 16px;line-height: 16px;}
    .form_box form .agree_box input[name="allcheck"] + label{font-size: 9px}  
    .form_box form .agree_box li:first-of-type label .btn_agree{font-size: 13px;}
    .form_box form .table_btn{font-size:25px;padding: 6px 0;width: 70%;}
    .form_box form .agree_box ul li:first-of-type{margin-bottom:4px; padding-bottom: 4px;}
}