:root {
    /* Colors: */
    --w: #FFFFFF;
    --rg: #EEFBFF;
    --rb: #D3DDE8;
    --red: #F36173;
    --blue: #006891;
    --black: #3A4856;
    --yellow: #F9F871;
}
/* common */
.y{color:var(--yellow);}
.r{color:var(--red);}
section b{font-weight:800;}
/* header */
.header h1{height:6rem;background:var(--w);height:6rem;display:flex;justify-content: center;align-items: center;  }
.header h1 img{width:16rem;height:2.8rem;}

/* section1 */
.sec1{background-color:var(--black); background-image:url('../img/bg1.jpg');background-repeat: no-repeat;background-size:cover;background-position:30% center;background-attachment:fixed; }
.sec1 .inner{background-color:#3A4856CC;padding:5rem 1.4rem 10.8rem;color:var(--w); }
.sec1 h2{color:var(--w);font-size:2.9rem;font-weight:700;line-height:5rem;margin-bottom:6rem; }
.sec1 .list1{display:flex;flex-direction: column;align-items:center;gap: 1rem 0;margin-bottom:7rem;}
.sec1 .list1 li{font-size:2.7rem;font-weight:600;line-height:3.5rem; padding:1.4rem 2rem;background-color:var(--blue);border:1px solid var(--yellow);display:inline-block;border-radius:4rem; }
.sec1 h3{font-size:2rem;font-weight:700;line-height:2.7rem;margin-bottom:2.6rem; }
.sec1 h4{font-size:4rem;font-weight:700;letter-spacing:-2px;line-height:4.7rem;text-align:left; }
/* section2 */
.sec2{position: relative;}
.sec2 .slickList{position:relative;}
.sec2 .slick-dots{position:absolute;bottom:5.7rem;left:50%;transform:translateX(-50%);  }
.sec2 .slick-dots li{display:inline-block;padding:0 0.4rem; }
.sec2 .slick-dots button{display:inline-block; font-size:0;width:0.8rem;height:0.8rem;border-radius:50%;background-color:var(--w);opacity:0.5; }
.sec2 .slick-dots li.slick-active button{opacity:1;}
.sec2 .box{height:43rem;position:relative; }
.sec2 .box1{background:url('../img/sec2_bg1.png') no-repeat center/cover;}
.sec2 .box2{background:url('../img/sec2_bg2.png') no-repeat center/cover;}
.sec2 .box3{background:url('../img/sec2_bg3.png') no-repeat center/cover;}
.sec2 .box .inner{position:absolute;top:30%;left:50%;transform:translateX(-50%); width:100%;color:var(--w); }
.sec2 .box .subTitle{font-size:1.6rem;line-height:3.5rem;margin-bottom:1.4rem; }
.sec2 .box .title{font-size:2.2rem;line-height:3.8rem;letter-spacing:-1px; }
.sec2 .box .fiu{opacity: 0; transform: translateY(3rem);}
.sec2 .slick-active .fiu{animation: slideUp 1s forwards;}
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* 원래 위치로 돌아오게 설정 */
    }
}
.sec2 .slick-active .fiu2{animation-delay: 0.3s;}
.sec2 .slick-active .fiu3{animation-delay: 0.6s;}
.sec2 .slick-active .fiu4{animation-delay: 0.9s;}
.sec2 .menu{width:95%;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%, 50%);background-color:var(--w);border-radius:0.5rem;overflow:hidden;box-shadow: 0px 3px 6px #00000033;}
.sec2 .menu li{cursor: pointer;width:33.3%;font-size:1.2rem;font-weight:700;height:5rem;display:inline-flex;align-items:center;justify-content:center;border-right:1px solid var(--rb);  }
.sec2 .menu li:last-of-type{border-right:0;}
/* section3 */
.sec3{padding-top:11.6rem;}
.sec3 h2{font-size:2.1rem;font-weight:600;line-height:3.6rem;margin-bottom:3.6rem}
.sec3 .info{margin-bottom:5.3rem;}
.sec3 .info .title{font-size:1.5rem;margin-bottom:1.4rem;}
.sec3 .info .text{font-size:1.6rem;letter-spacing:-0.8px;font-weight:800;display:flex;justify-content:center;align-items:flex-end ; }
.sec3 .info .text span{display:inline-block;}
.sec3 .info .number{height:4.9rem;padding: 1rem 0.8rem 0;font-size:3rem;letter-spacing:-1.5px;box-shadow: 0px 3px 5px #0000001A; }
.sec3 .info .txt{padding-bottom:1rem;padding-left:0.5rem;}
/* section4 */
.sec4{background-color:var(--rg);padding:6rem 0 5rem; }
.sec4 .inner{padding:0 1.5rem;}
.sec4 .box{background-color:var(--w);box-shadow: 0px 5px 10px #0000000D;margin-bottom:2rem;}
.sec4 .box:last-of-type{margin-bottom:0;}
.sec4 .infoBox1 .box{padding:3rem 2rem 5rem;}
.sec4 .infoBox1 .box .title{letter-spacing:-2px;font-size:2rem;font-weight:800;padding-bottom:3rem;border-bottom:1px solid var(--rb); }
.sec4 .userInfo{padding:3.2rem 2rem 0;text-align:left;}
.sec4 .userInfo .input{padding-bottom:1.7rem;}
.sec4 .userInfo .input dt{font-size:1.6rem;font-weight:600;padding-bottom: 0.7rem;}
.sec4 .userInfo .input input{width:100%;background-color:var(--rb);padding:0.7rem 1.6rem;font-size:1.4rem; }
.sec4 .userInfo .agreeList{padding-bottom:2rem;}
.sec4 .userInfo .agreeList li{margin-bottom:1.3rem;}
.sec4 .userInfo .agreeList input{vertical-align:bottom;display:inline-block;width:2rem;height:2rem;border-radius:0.2rem;border:1px solid var(--rb);margin-right:1rem; }
.sec4 .userInfo .agreeList label{font-weight:600;font-size:1.6rem; }
.sec4 .userInfo .formBtn{display:inline-block;width:100%;background-color:var(--black);color:var(--w);font-size:1.6rem;font-weight:600;padding: 1.2rem 0;border-radius:2.3rem; }
.sec4 .reviewList{padding-top:2rem;}
.sec4 .reviewList .tableTit{display:flex;background-color:var(--rb);height:4.8rem;align-items:center; }
.sec4 .reviewList .tableTit li{width:33.3%;font-weight:800;font-size:1.4rem;letter-spacing:-1.4px; }
.sec4 .reviewList .ramReviews{height:31.3rem;overflow:hidden auto;}
.sec4 .reviewList .ramReviews li{display:flex;height:4rem;align-items:center;font-weight:600;font-size:1.4rem;letter-spacing:-1.4px;border-bottom:1px solid var(--rb);}
.sec4 .reviewList .ramReviews li span{display:inline-block;width:33.3%;}
.sec4 .infoBox2{padding-top:6.2rem;}
.sec4 .infoBox2 h2{color:var(--rb);font-size:1.2rem;font-weight:900;letter-spacing:4.2px;margin-bottom:1rem; }
.sec4 .infoBox2 h3{font-size:2.2rem;font-weight:600;line-height:3.4rem;margin-bottom:3.3rem;}
.sec4 .infoBox2 .box .imgArea{position: relative;width:100%;height:19.2rem; background:url('../img/se4bg1.png') no-repeat center / cover; }
.sec4 .infoBox2 .box2 .imgArea{background-image:url('../img/se4bg2.png');}
.sec4 .infoBox2 .box .imgArea::after{position:absolute;content: "";left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);transition:opacity .3s, background-color .3s; }
.sec4 .infoBox2 .box .imgArea:hover:after{opacity:0;}
.sec4 .infoBox2 .box .imgArea img{width:100%;}
.sec4 .infoBox2 .txtArea{padding:2.6rem 2rem;padding-right:0;text-align:left;}
.sec4 .infoBox2 .txtArea .subTit1,
.sec4 .infoBox2 .txtArea .subTit2{font-weight:800;font-size:1.8rem;letter-spacing:-0.9px;line-height:3rem;}
.sec4 .infoBox2 .txtArea .txt{padding-right:2rem;font-size:1.4rem;line-height:2.4rem;}

.sec4 form {
    text-align: center;
    padding-top: 2rem;
  }
  .sec4 form h2 {
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1;
  }
  .sec4 form h3 {
    color: #f2fd0d;
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }
  .sec4 form .infoArea {
    background-color: var(--w);
    padding: 3.5rem 2rem 2rem;
    text-align: left;
  }
  .sec4 form h4 {
    font-weight: 700;
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  .sec4 form .basicInfo label {
    font-size: 1.6rem;
    font-weight: 500;
  }
  .sec4 form .nameInput {
    padding: 1rem 0;
  }
  .sec4 form .nameInput input {
    width: 100%;
    height: 3rem;
    border: 1px solid var(--rb);
    border-radius: 0;
    padding: 1rem;
  }
  .sec4 form .phoneInput {
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  .sec4 form .phoneInput input {
    height: 100%;
    border: 1px solid var(--rb);
    border-radius: 0;
    width: 31%;
    padding: 0.2rem;
  }
  .sec4 form .privacyArea {
    text-align: center;
  }
  .sec4 form .privacyArea img {
    width: 13rem;
  }
  .sec4 form .privacyArea p {
    color: var(--blue);
    font-size: 1.4rem;
    font-weight: 500;
  }
  .sec4 form .policyArea {
    margin-top: 1rem;
    margin-bottom: 2rem;
    background-color: var(--rg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
  }
  .sec4 form .policyArea .agreeShow {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--black);
    width: 60%;
    height: 4rem;
    line-height: 4rem;
    cursor: pointer;
  }
  .sec4 form .policyArea .agree {
    display: none;
  }
  .sec4 form .policyArea .checkview {
    width: 2rem;
    height: 2rem;
    border: solid 1px var(--rb);
    border-radius: 50%;
    display: inline-block;
    vertical-align: text-bottom;
  }
  .sec4 form .policyArea .agree:checked + .checkview {
    background: url("../img/icon_check.png") no-repeat center;
    background-size: 70%;
  }
  .sec4 form .dataArea {
    margin-bottom: 1rem;
  }
  .sec4 form .radioList {
    display: flex;
  }
  .sec4 form .radioList label {
    cursor: pointer;
    height: 3rem;
    line-height: 3rem;
    border: 1px solid var(--rb);
    width: 50%;
    text-align: center;
    font-weight: 400;
    font-size: 1.2rem;
    white-space: nowrap;
  }
  .sec4 form .radioList label.on {
    background-color: var(--black);
    color:var(--w);
  }
  .sec4 form .radioList input {
    display: none;
  }
  .sec4 form .selectList{
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
  }
  .sec4 form .selectList select{
    border: 1px solid var(--rb);
    cursor: pointer;
    height: 3rem;
    line-height: 3rem;
    font-weight: 400;
    font-size: 1.2rem;
    width:49%;
  }
  .sec4 form .noFlex .radioList {
    flex-wrap: wrap;
  }
  .sec4 form .noFlex label {
    width: 33.3%;
  }
  .sec4 form .agreement {
    padding: 1rem;
    width: 100%;
    resize: vertical;
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  .sec4 form .sendBtn {
    cursor: pointer;
    display: inline-block;
    width: 100%;
    height: 5rem;
    background-color: var(--black);
    border: 0;
    color: var(--yellow);
    font-weight: 700;
    font-size: 2rem;
  }
  /* index용 */
  .sec4 form .nameInput input{font-size:1.4rem;}
  .sec4 form .phoneInput input{font-size:1.4rem;}
  .sec4 form .nameInput input{width: 100%;}
  .sec4 form .radioList{padding-top:1rem;}
  .sec4 form .noFlex label{width:32.6%;}
/* footer */
.footer{background-color:var(--black);text-align:center;}
.footer .inner{padding:0 1.5rem;}
.footer .logo{padding:2rem 0;border-bottom:1px solid var(--rg);margin-bottom:2rem;}
.footer .logo img{width:22rem;}
.footer .txt{font-size:1rem;color:var(--rg);padding-bottom:4.7rem; }
/* popup */
.modalArea{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:100;}
.modal{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;width:90%;height:min(90% ,180rem );padding:3rem;}
.modal .closeBtn{position:absolute;right:1rem;top:1rem;z-index:2;}
.modal .closeBtn svg{width:2rem;height:2rem;}
.modal .closeBtn svg line{stroke-width:0.5rem;stroke:var(--hl, #5900FF);}
.modal .scroll{overflow-x:hidden;overflow-y:auto;height:min(90% , 170rem );font-size:1.2rem;line-height:2.4rem;}
.modal h3{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem;padding-bottom:2rem; border-bottom:3px solid #000;}
.modal h4{font-size:2rem;font-weight:600;line-height:3.1rem;}
.modal ul li{font-size:2rem;line-height:3.2rem;}
.modal ol.numbering{counter-reset:list-number;}
.modal ol.numbering > li{counter-increment:list-number;position:relative;display:flex;}
.modal ol.numbering > li::before{content:counter(list-number)".\00a0"; ;text-align:right;}
.modal li.line1{text-indent:-1.7rem;padding-left:1.7rem;} /* * */
.modal .dot{text-indent:-1rem;padding-left:1rem;} /* . */
.modal .stick{text-indent:-1.3rem;padding-left:1.3rem;} /* - */
.modal .sign1{text-indent:-1.8rem;padding-left:1.8rem;}/* ※ */
.modal li.none{text-indent:0;padding-left:0;}
.modal li.none::before,
.modal li.line1::before,
.modal .dot::before{display:none;}
.modal .btnArea{padding-top:3rem;text-align:center;}
.modal .colseBtn2{width:15rem;height:6rem;border:0.1rem solid var(--line, #B9A6B3);font-size:2.4rem; }
.modal .box{border:0.1rem solid var(--line, #B9A6B3);padding:1.5rem;}
.modalLine h3{border-bottom:0.2rem solid var(--line);padding-bottom:2rem;text-align:left;margin-bottom:1.3rem;}
.modalLine h4{padding-bottom:1.3rem;border-bottom:0.1rem solid var(--line);margin-bottom:2rem;}
.modalLine h5{color:var(--hl);font-weight:600;margin-bottom:1.2rem;}
@media all and ( min-width:750px ) {
    /* section1 */
    .sec1 .list1{flex-direction: row;gap: 0 1rem;justify-content:center}
    
    /* section4 */
    .sec4 .infoBox1 .box{width:49%;margin-bottom:0;}
    .sec4 .infoBox1{display:flex;justify-content:space-between;}
    .sec4 .infoBox2 .box{display:flex; }
    .sec4 .infoBox2 .box .imgArea{width:40%;height:auto}
    .sec4 .infoBox2 .box .txtArea{width:60%;}    
    .sec4 .reviewList .ramReviews{height:69rem;}
}
@media all and ( min-width:1024px ) {
    .modal{padding:5rem;}
    /* section1 */
    .sec1 .inner{max-width:100%;}
    .sec1 h4{text-align:center;}
    /* section2 */
    .sec2 .box1{background-image: url('../img/sec2_bg1_pc.png');}
    .sec2 .box2{background-image: url('../img/sec2_bg2_pc.png');}
    .sec2 .box3{background-image: url('../img/sec2_bg3_pc.png');}
    .sec2 .menu{width:1024px;}
    /* section4 */
    .sec4 form .noFlex .radioList{flex-wrap:nowrap;}
}