@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

*{font-family: 'Pretendard';}

body, div, ul, ol, h1, h2, h3, h4, p{margin: 0; padding: 0;}

header{padding: 0 5.4%; display: flex; justify-content: space-between; align-items: center;}
.subHeader{padding: 0 5.4%; display: flex; justify-content: space-between; align-items: center;}
footer{background-color: #484a4f;}
footer div{text-align: center;}

header div{display: flex;}
header div h1 a{display: block;}
header div h1 img{width: 100%; display: block;}
.subHeader button{border: none; background-color: transparent; padding: 0; color: #000000;}
.subHeader button img{width: 100%; display: block;}
header>a{display: block; position: relative; text-decoration: none; color: inherit; text-align: center; box-sizing: border-box;}
header>a::before{content: ''; display: block; position: absolute; left: 2px; top: -1px; background-image: url('../images/logo_naver.png'); background-repeat: no-repeat; background-position: center;}

.maxContainer h2{font-weight: 700; color: #000; text-align: center; word-break: keep-all;}
.maxContainer .title{font-weight: 700; color: #000; text-align: center; word-break: keep-all;}
.maxContainer h2 mark{color: #fa2f16; background-color: transparent;}

.maxContainer .mainContent{background-color: #EAF5FE; box-sizing: border-box; text-align: center;}
.maxContainer .mainContent p{margin: 0 auto; font-weight: 400; color: #383838;}

.customInfo{display: flex; justify-content: center; text-align: center;}
.customInfo li{flex: 1; display: block; font-weight: 600; color: #010101; position: relative;}
.customInfo li:last-of-type::before{content: ''; display: block; height: 100%; background-color: #d9e3eb; position: absolute;}
.customInfo li span{display: block; background-color: #FFF; box-sizing: border-box; font-weight: 500; color: #2e2e2e; margin: 0 auto;}

.mainContent+p{font-weight: 400; text-align: center; color: #808080;}
.mainContent+p mark{font-weight: 600; color: #ff0000; background-color: transparent; text-decoration: underline;}

.buttonBox button{font-weight: 600; color: #FFF; width: 100%; border: none;}
.buttonBox button:last-of-type{background-color: #3074ef;}
.buttonBox button:first-of-type{background-color: #ef0022;}

.infoBox,.noti{font-weight: 400; color: #787878;}
.infoBox li,.noti li{word-break: keep-all;}

.infoBox ul li{list-style: '-  '; list-style-position: outside;}
.noti li{list-style: none;}
.noti li:nth-of-type(n+4)::before{position: absolute; left: 0;}
.noti li:nth-of-type(4)::before{content: '¨ç';}
.noti li:nth-of-type(5)::before{content: '¨è';}

.noti li,.ref{position: relative;}
.ref::before{content: '\203B'; position: absolute; left: 0;}

.infoBox div button{border: none; background-color: transparent; color: #787878; font-weight: 400; padding: 0; cursor: pointer;}
.infoBox div button:not(.active)::before{content: '\005B  ¿­±â ¡å \005D';}
.infoBox div button.active::before{content: '\005B  ´Ý±â ¡ã \005D';}

.infoBox:has(button.active) ul{display: block;}
.infoBox:not(:has(button.active)) ul{display: none;}

footer div>a{display: block; font-weight: 400; color: #FFF;}
footer p{font-weight: 400; color: #c5c5c5;}
footer p a{color: inherit; text-decoration: none;}
footer p a:hover{text-decoration: underline;}

.listContent{color: #FFF; background-color: #0638b5; display: flex; justify-content: center; align-items: center;}
.listContent li{display: block; font-weight: 600;}
.listContent li:last-of-type::before{content: ''; display: inline-block; background-color: #FFF; vertical-align: top;}

.listBox .listItem{display: block; background-color: #FFF; cursor: pointer;}
.listBox .listItem>p{font-weight: 500; color: #000;}
.listBox .itemTop{background-image: url('../images/icon_more.png'); background-repeat: no-repeat; background-position: right center;}
.listBox .itemTop span{display: block; background-image: url('https://m.insvalley.com/img/smart/logo_N01.png'); background-position: center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px;}
.listBox .itemBottom{display: flex; justify-content: space-between; font-weight: 400; color: #000;}
.listBox .itemBottom div{color: #999;}
.listBox .itemBottom div span{color: #000;}

.buttonContent{position: relative;}
.buttonContent span{position: absolute; left: 50%; white-space: nowrap; transform: translate(-50%, -100%); display: block; font-weight: 400; color: #FFF; text-align: center; background-color: #000;}
.buttonContent span::after{content: ''; display: block; background-color: #000; clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; left: 50%; transform: translate(-50%, 0);}

.comment{display: flex; justify-content: center; align-items: center; text-align: center;}
.comment p{font-weight: 600; color: #383838;}
.comment p mark{color: #ef0022; background-color: transparent;}
.comment button{background-image: url('../images/icon_info.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; border: none; background-color: transparent; text-indent: -9999px; cursor: pointer;}
.comment b{display: block; font-weight: 600;}

.diagnoList>li{display: block; background-color: #FFF;}
.diagnoList>li>div{background-repeat: no-repeat; background-position: left center; font-weight: 400; color: #000;}
.diagnoList>li.iconFull>div{background-image: url('../images/icon_full.svg');}
.diagnoList>li.iconLess>div{background-image: url('../images/icon_less.svg');}
.diagnoList>li>div b{font-weight: 700;}
.diagnoList>li ol li{display: flex; align-items: center;}
.diagnoList>li ol li>span{font-weight: 600; color: #000;}
.diagnoList>li ol li div{flex: 1; position: relative; font-weight: 700; color: #FFF; background-color: #ebebec; overflow: hidden;}
.diagnoList>li ol li div span{position: absolute; z-index: 1;}
.diagnoList>li ol li div span.none{color: #5d5d5d;}
.diagnoList>li ol li div .graphBack{position: absolute; width: 50%; left: 0; top: 0; padding: 0; text-indent: -9999px;}
.diagnoList>li.iconFull ol li div .graphBack{background: linear-gradient(to left, #0c00ff, #5837ff); width: 100%;}
.diagnoList>li.iconLess ol li div .graphBack{background: linear-gradient(to left, #fd2509, #fc511d);}

.contnetBox.type1{background-color: #bfd5ff; display: flex; flex-direction: column; background-image: url('../images/resultCTA.png'); background-repeat: no-repeat; background-position: center; box-sizing: border-box;}
.contnetBox h3{font-weight: 600; color: #000; text-align: center;}
.contnetBox h4{font-weight: 500; color: #000; text-align: center; margin: 0 auto; word-break: keep-all;}
.contnetBox button{font-weight: 700; border: none; width: 100%; cursor: pointer;}
.contnetBox.type1 button{color: #033cd6; background-color: #FFF; margin-top: auto;}
.contnetBox.type2 button{color: #FFF; background-color: #3074ef;}

.diagnoInfo p{font-weight: 600; color: #383838;}
.diagnoInfo mark{background-color: transparent;}
.diagnoInfo mark.mRed{color: #fa2f16;}
.diagnoInfo mark.mBlue{color: #124ffe;}

.baseBox{margin: 0 auto; border-radius: 50%; background-color: #f1f1f1;}
.rectBox{width: 100%; height: 100%; clip-path: circle(50% at 50% 50%); position: relative;}
.rectContent{
    width: 100%; height: 100%; position: absolute; top: 50%;

    animation-name: upAni, horiAni;
    animation-duration: 1s, 5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: 1, infinite;

    background-image: url('../images/wave_back.png'); background-position: left top; background-repeat: repeat-x;
}
.centerBox{position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 50%; background: url('../images/wave_center.png') center / cover no-repeat; display: flex; justify-content: center; align-items: center;}
.centerBox p{font-family: 'Noto Sans KR'; font-weight: 400; color: #15189c;}
.centerBox p span{font-weight: 700;}

.subHeader div{position: relative; width: 100%;}
.subHeader div p{text-align: center; font-weight: 500;}
.subHeader div button{position: absolute; right: 0;}
.subHeader div button img{width: 100%; display: block;}

.insuTitle{display: flex; flex-direction: column; align-items: center; margin: 0 auto; text-align: center;}
.insuTitle img{display: block;}
.insuTitle p{font-weight: 500;}
.insuTitle span{font-weight: 400; color: #8c9099;}
.insuTitle span mark{font-weight: 700; color: #ef0022; background-color: transparent;}

.insuDetail li{list-style: none; display: flex; justify-content: space-between; font-weight: 500;}
.insuDetail p{color: #7084a2;}
.insuDetail span{color: #111;}

.insuCTA{background-image: url('../images/insuCTA.png'); background-repeat: no-repeat; background-position: center bottom;}
.insuCTA p{font-weight: 600; color: #000000; text-align: center;}

.closingBox{display: flex; margin: 0 auto;}
.closingBox li{list-style: none; flex: 1; text-align: center; font-weight: 600; color: #141414;}
.closingBox li.down{background-color: #e4efff;}
.closingBox li.up{background-color: #fcf4d2;}

.inputContainer input:focus{outline: none;}
.inputContainer h2{font-weight: 600; color: #000000;}
.inputContainer .inputContent{position: relative;}
.inputContainer .inputContent label{position: absolute; font-weight: 400; color: #323232;}
.inputContainer .inputContent input{width: 100%; box-sizing: border-box; border: none; background-color: transparent; font-weight: 500; color: #000; padding: 0;}
.inputContainer .inputContent input::placeholder{color: #bbb;}
.inputContainer .inputContent .userNum{display: flex; align-items: center;}
.inputContainer .inputContent .userNum span{background-color: #bbbbbb; display: block;}

.buttonBox button.deactive{background-color: #898989;}
.buttonBox button.active{background-color: #ef0022;}

.inputCheck{display: flex; align-items: center;}
.inputCheck input[type="checkbox"]{display: none;}
.inputCheck input:checked+label{background-image: url('../images/icon_check_blue.png');}
.inputCheck label{display: inline-block; position: relative; font-weight: 400; background-image: url('../images/icon_check_gray.png'); background-repeat: no-repeat; background-position: left center;}
.inputCheck a{display: block; background-image: url('../images/icon_more.png'); background-repeat: no-repeat; background-position: center; background-size: contain;}

.telecomBox span{display: block; font-weight: 600;}
.telecomBox .telecom{display: flex;}
.telecomBox .telecom li:not(:has(select)){flex: 1;}
.telecomBox .telecom li{list-style: none; text-align: center; cursor: pointer; font-weight: 400;}
.telecomBox .telecom li:not(.active){background-color: #FFF; color: #111;}
.telecomBox .telecom li.active{background-color: #000; color: #FFF; border: none;}
.telecomBox .telecom li select{width: 100%; text-align: center; text-align-last: center; -ms-text-align-last: center; -moz-text-align-last: center; border: none; background-color: transparent; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor: pointer; font-weight: 400;}
.telecomBox .telecom li select:focus{outline: none;}
.telecomBox .telecom li:not(.active) select{color: #111;}
.telecomBox .telecom li.active select{color: #FFF; background-color: #000;}

.inputBox{display: flex;}
.inputBox .inputContent{flex: 1;}
.inputBox button{font-weight: 400; color: #FFF; background-color: #333333; cursor: pointer; border: none;}

.inputContent>span{position: absolute; display: block; right: 0; top: 0; font-weight: 400; color: #333;}

.layer:not(.active){display: none;}
.layer{position: fixed; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.8); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.layer div{background-color: #FFF; box-sizing: border-box;}
.layer div p{font-weight: 300; word-break: keep-all;}
.layer div p mark{color: #fa2f16; background-color: transparent; font-weight: 500;}
.layer div button{border: none; font-weight: 700; width: 100%; background-color: #ef0022; color: #FFF; cursor: pointer;}

.floatingCTA:not(.active){display: none;}
.floatingCTA{position: fixed; left: 0; bottom: 0; width: 100%; z-index: 10;}
.floatingCTA button{width: 100%; font-weight: 600; border: none; color: #FFF; background-color: #ef0022;}

footer .floatingCTA{max-width: none;}
footer .buttonContent{max-width: none;}

@media screen and (max-width: 639px){
    .maxContainer{padding: 0 5.4%;}
    .inputContainer{padding: 0 5.4%;}

    header{padding-top: 8px; padding-bottom: 8px;}
    .subHeader{padding-top: 14px; padding-bottom: 14px;}
    .subHeader.underline{border-bottom: 0.5px solid #d9d9d9;}
    header div{height: 20px;}
    header div h1{width: 45px;}
    .subHeader button{width: 25px;}
    
    .maxContainer{padding-top: 35px;}
    .maxContainer h2{font-size: 28px; line-height: 32px; letter-spacing: -2px; margin-bottom: 23px;}
    .maxContainer .title{font-size: 28px; line-height: 32px; letter-spacing: -2px; padding: 0 8px;}    

    .maxContainer .mainContent{border: 0.5px solid #DCE4E8; padding: 27px; border-radius: 12px; margin-bottom: 30px; box-shadow: 0 2px 17px rgba(106, 106, 106, 0.25);}
    .maxContainer .mainContent p{width: 160px; margin-bottom: 23px; font-size: 15px; line-height: 18px; letter-spacing: -1px;}
    .maxContainer .mainContent img{width: 171px;}
    .customInfo li{font-size: 20px; letter-spacing: -1px;}
    .customInfo li:last-of-type{margin-left: 64px;}
    .customInfo li:last-of-type::before{width: 0.5px; left: -32px;}
    .customInfo li span{border: 1px solid #d9e3eb; width: 82px; font-size: 15px; padding: 5px 0; letter-spacing: -1px; border-radius: 40px; margin-bottom: 12px;}
    
    .mainContent+p{font-size: 14px; letter-spacing: -1px; margin-bottom: 30px;}
    
    .buttonBox{margin-bottom: 40px;}
    .buttonBox button{font-size: 21px; margin-bottom: 10px; padding: 16px 0; border-radius: 10px; letter-spacing: -1px;}
    
    .infoBox,.noti{font-size: 12px; line-height: 17px; letter-spacing: -1px;}

    .infoBox{border: 0.5px solid #e7e8e9; border-width: 0.5px 0; padding: 17px 0; margin-bottom: 30px;}
    .infoBox ul{padding-left: 8px; margin-top: 12px;}
    .noti{margin-bottom: 30px;}
    .noti li:nth-of-type(n+4){padding-left: 14px;}
    
    .noti li,.ref{padding-left: 10px;}
    
    .infoBox div button{font-size: 12px; line-height: 17px; letter-spacing: -1px; margin-left: 4px;}
    
    footer{padding-block: 23px 30px;}
    footer div>a{font-size: 14px; line-height: 17px; margin-bottom: 10px; letter-spacing: -1px;}
    footer p{font-size: 12px; line-height: 16px; letter-spacing: -1px;}

    .radL{border-radius: 10px;}

    .listContent{padding: 25px 20px; margin-bottom: 25px;}
    .listContent li{font-size: 16px; line-height: 20px; letter-spacing: -1px;}
    .listContent li small{font-size: 11px; line-height: 15px; margin-right: 8px;}
    .listContent li:last-of-type::before{width: 1px; height: 20px; margin-inline: 16px;}

    .listBox{margin-bottom: 40px;}
    .listBox .listItem:not(:last-of-type){margin-bottom: 20px;}
    .listBox .listItem{border: 1px solid #d0d0d0; padding: 18px 15px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);}
    .listBox .listItem>p{font-size: 14px; margin-bottom: 12px; line-height: 17px;}
    .listBox .itemTop{background-size: 9px; margin-bottom: 10px;}
    .listBox .itemTop span{width: 45px; height: 27px;}
    .listBox .itemBottom{font-size: 12px; line-height: 15px;}

    .buttonContent span{top: -10px; font-size: 14px; line-height: 18px; padding: 10px 30px; border-radius: 20px;}
    .buttonContent span::after{bottom: -6px; width: 20px; height: 6px;}

    .comment{gap: 4px; margin-bottom: 25px;}
    .comment p{font-size: 17px; line-height: 21px; letter-spacing: -1px;}
    .comment button{width: 16px; height: 16px;}

    .diagnoList{margin-bottom: 30px;}
    .diagnoList>li{border: 0.5px solid #d0d0d0; padding: 18px 15px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);}
    .diagnoList>li:not(:last-of-type){margin-bottom: 20px;}
    .diagnoList>li>div{padding-left: 25px; font-size: 14px; line-height: 18px; margin-bottom: 15px;}
    .diagnoList>li>div b{font-size: 17px; line-height: 18px;}
    .diagnoList>li ol li{gap: 7px;}
    .diagnoList>li ol li:not(:last-of-type){margin-bottom: 18px;}
    .diagnoList>li ol li>span{
        /* text-wrap: nowrap;  */
        font-size: 14px;
        /* line-height: 12px; */
        width: 100px;
        letter-spacing: -1px;
    }
    .diagnoList>li ol li div{height: 20px; border-radius: 10px; font-size: 10px; line-height: 20px; padding-inline: 10px;}

    .contnetBox{padding: 27px 15px;}
    .contnetBox.type1{height: 250px; background-size: 75px; margin-bottom: 20px;}
    .contnetBox.type2{box-shadow: 3px 0 17px rgba(186, 186, 186, 0.75); margin-bottom: 50px;}
    .contnetBox h3{font-size: 20px; line-height: 22px; margin-bottom: 20px;}
    .contnetBox h4{font-size: 18px; line-height: 22px; width: 200px; letter-spacing: -1px;}
    .contnetBox button{font-size: 17px; height: 41px; border-radius: 10px; margin-top: 15px; letter-spacing: -1px;}

    .diagnoInfo{margin-bottom: 23px;}
    .diagnoInfo p{font-size: 17px; letter-spacing: -1px;}

    .baseBox{
        width: 175px;
        height: 175px;
        margin-bottom: 25px;
    }
    .rectContent{background-size: 350px;}
    .centerBox{width: 110px; height: 110px;}
    .centerBox p{font-size: 20px;}
    .centerBox p span{font-size: 32px;}

    .subHeader div p{font-size: 17px; letter-spacing: -1px;}
    .subHeader div button{top: 2px; width: 16px; height: 16px;}

    .insuTitle{width: 225px; margin-bottom: 35px;}
    .insuTitle img{margin-bottom: 10px; width: 55px;}
    .insuTitle p{margin-bottom: 16px; font-size: 20px; line-height: 23px; letter-spacing: -1.2px;}
    .insuTitle span{font-size: 16px; line-height: 19px; letter-spacing: -1px;}
    .insuTitle span mark{font-size: 21px;}

    .insuDetail{border-top: 2px solid #000; border-bottom: 1px solid #d9d9d9; padding: 20px 0;}
    .insuDetail li{font-size: 13px;}
    .insuDetail li:not(:last-of-type){margin-bottom: 18px;}

    .insuCTA{padding: 40px 0 0; height: 165px; margin-bottom: 20px; background-size: 78px;}
    .insuCTA p{line-height: 22px; font-size: 16px;}

    .closingBox{gap: 8px; margin-bottom: 25px; max-width: 270px; margin-bottom: 60px;}
    .closingBox li{border-radius: 15px; padding: 45px 0; font-size: 14px; line-height: 17px; letter-spacing: -1px;}
    .closingBox li img{margin-top: 25px;}
    .closingBox li.down img{width: 80px;}
    .closingBox li.up img{width: 35px;}
    
    .inputContainer h2{font-size: 26px; line-height: 32px; margin-bottom: 28px;}
    .inputContainer .inputContent{border: 0.5px solid #b9b9b9; border-radius: 10px; padding: 32px 14px 16px; margin-bottom: 12px;}
    .inputContainer .inputContent label{left: 14px; top: 12px; font-size: 12px; letter-spacing: -1px;}
    .inputContainer .inputContent input{font-size: 17px; letter-spacing: -1px;}
    .inputContainer .inputContent .userNum input:first-of-type{padding-right: 8px;}
    .inputContainer .inputContent .userNum input:last-of-type{padding-left: 8px;}
    .inputContainer .inputContent .userNum span{width: 20px; height: 1px;}

    .inputCheck{gap: 6px; margin-bottom: 46px;}
    .inputCheck label{padding-left: 24px; font-size: 15px; line-height: 22px; letter-spacing: -1px; background-size: 18px;}
    .inputCheck a{width: 9px; height: 13px;}

    .telecomBox span{font-size: 20px; line-height: 32px; letter-spacing: -1px; margin-bottom: 12px;}
    .telecomBox .telecom{gap: 6px; margin-bottom: 22px;}
    .telecomBox .telecom li{border-radius: 4px; font-size: 14px; line-height: 19px; padding-block: 9px;}
    .telecomBox .telecom li:not(.active){border: 0.5px solid #b4b7c4;}
    .telecomBox .telecom li select{padding-inline: 8px; font-size: 14px; line-height: 19px;}

    .inputBox{gap: 6px; margin-bottom: 12px;}
    .inputBox .inputContent{margin-bottom: 0;}
    .inputBox button{font-size: 14px; border-radius: 10px; padding: 0 11px; letter-spacing: -1px;}

    .inputContent>span{font-size: 14px; line-height: 70px; padding: 0 14px;}
    .inputContent.timer{padding-right: 70px; margin-bottom: 50px;}

    .inputContainer{padding-top: 35px;}
    
    .layer{padding: 0 5.4%; box-sizing: border-box;}
    .layer div{border-radius: 10px; padding: 24px;}
    .layer div p{margin-bottom: 12px; font-size: 14px; letter-spacing: -1px; line-height: 20px;}
    .layer div button{font-size: 17px; height: 41px; border-radius: 10px; margin-top: 20px;}
    
    .floatingCTA button{font-size: 21px; padding: 16px 0; letter-spacing: -1px;}

    footer:has(.floatingCTA.active){margin-bottom: 57px;}
}

@media screen and (min-width: 640px){
    .maxContainer{padding: 0 3.3%;}
    .inputContainer{padding: 0 3.3%;}

    header{max-width: 920px; margin: 0 auto;}
    .subHeader:not(:has(div)){max-width: 920px; margin: 0 auto;}
    .subHeader div{max-width: 920px; margin: 0 auto;}
    footer div{max-width: 700px; margin: 0 auto;}
    .maxContainer{max-width: 640px; margin: 0 auto;}
    .inputContainer{max-width: 640px; margin: 0 auto;}

    header{padding-top: 16px; padding-bottom: 16px;}

    .subHeader{padding-top: 28px; padding-bottom: 28px;}
    .subHeader.underline{border-bottom: 1px solid #d9d9d9;}

    header div{height: 40px;}
    header div h1{width: 90px;}
    .subHeader button{width: 50px; cursor: pointer;}

    .maxContainer{padding-top: 70px;}
    .maxContainer h2{font-size: 56px; line-height: 65px; letter-spacing: -4px; margin-bottom: 46px; padding: 0 16px;}
    .maxContainer .title{font-size: 56px; line-height: 65px; letter-spacing: -4px; padding: 0 16px;}

    .maxContainer .mainContent{border: 1px solid #DCE4E8; padding: 54px; border-radius: 24px; margin-bottom: 60px; box-shadow: 0 4px 35px rgba(106, 106, 106, 0.25);}
    .maxContainer .mainContent p{width: 320px; margin-bottom: 46px; font-size: 30px; line-height: 37px; letter-spacing: -3px;}
    .maxContainer .mainContent img{width: 343px;}

    .customInfo li{font-size: 40px; letter-spacing: -3px;}
    .customInfo li:last-of-type{margin-left: 124px;}
    .customInfo li:last-of-type::before{width: 1px; left: -62px;}
    .customInfo li span{border: 2px solid #d9e3eb; width: 164px; font-size: 30px; padding: 10px 0; letter-spacing: -2px; border-radius: 80px; margin-bottom: 24px;}
    
    .mainContent+p{font-size: 28px; letter-spacing: -2px; margin-bottom: 60px;}

    .buttonBox{margin-bottom: 80px;}
    .buttonBox button{font-size: 42px; margin-bottom: 20px; padding: 33px 0; border-radius: 20px; letter-spacing: -3px; cursor: pointer;}
    
    .infoBox,.noti{font-size: 24px; line-height: 34px; letter-spacing: -2px;}

    .infoBox{border: 1px solid #e7e8e9; border-width: 1px 0; padding: 35px 0; margin-bottom: 60px;}
    .infoBox ul{padding-left: 16px; margin-top: 24px;}
    .noti{margin-bottom: 60px;}
    .noti li:nth-of-type(n+4){padding-left: 28px;}

    .noti li,.ref{padding-left: 20px;}

    .infoBox div button{font-size: 24px; line-height: 34px; letter-spacing: -2px; margin-left: 8px;}

    footer{padding-block: 46px 60px;}
    footer div>a{font-size: 28px; line-height: 34px; margin-bottom: 20px; letter-spacing: -3px;}
    footer p{font-size: 24px; line-height: 32px; letter-spacing: -2px;}

    .radL{border-radius: 20px;}

    .listContent{padding: 50px 40px; margin-bottom: 50px;}
    .listContent li{font-size: 32px; line-height: 40px; letter-spacing: -1px;}
    .listContent li small{font-size: 22px; line-height: 30px; margin-right: 20px;}
    .listContent li:last-of-type::before{width: 2px; height: 40px; margin-inline: 40px;}

    .listBox{margin-bottom: 80px;}
    .listBox .listItem:not(:last-of-type){margin-bottom: 40px;}
    .listBox .listItem{border: 1px solid #d0d0d0; padding: 36px 30px; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);}
    .listBox .listItem>p{font-size: 28px; line-height: 35px; margin-bottom: 24px;}
    .listBox .itemTop{background-size: 18px; margin-bottom: 20px;}
    .listBox .itemTop span{width: 90px; height: 45px;}
    .listBox .itemBottom{font-size: 24px; line-height: 30px;}

    .buttonContent span{top: -20px; font-size: 28px; font-weight: 400; line-height: 36px; padding: 20px 60px; border-radius: 40px;}
    .buttonContent span::after{width: 40px; height: 12px; bottom: -12px;}

    .comment{gap: 8px; margin-bottom: 50px;}
    .comment p{font-size: 32px; line-height: 43px; letter-spacing: -2px;}
    .comment button{width: 32px; height: 32px;}
    
    .diagnoList{margin-bottom: 60px;}
    .diagnoList>li{border: 1px solid #d0d0d0; padding: 36px 30px; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);}
    .diagnoList>li:not(:last-of-type){margin-bottom: 40px;}
    .diagnoList>li>div{padding-left: 50px; font-size: 24px; line-height: 35px; margin-bottom: 30px;}
    .diagnoList>li>div b{font-size: 28px; line-height: 35px;}
    .diagnoList>li ol li{gap: 14px;}
    .diagnoList>li ol li:not(:last-of-type){margin-bottom: 36px;}
    .diagnoList>li ol li>span{font-size: 22px; line-height: 23px; width: 154px; letter-spacing: -3px;}
    .diagnoList>li ol li div{height: 40px; border-radius: 20px; font-size: 20px; line-height: 40px; padding-inline: 20px;}

    .contnetBox{padding: 45px 30px;}
    .contnetBox.type1{height: 460px; margin-bottom: 40px;}
    .contnetBox.type2{box-shadow: 6px 0 35px rgba(186, 186, 186, 0.75); margin-bottom: 100px;}
    .contnetBox h3{font-size: 40px; line-height: 44px; margin-bottom: 40px;}
    .contnetBox h4{font-size: 36px; line-height: 44px; width: 400px; letter-spacing: -2px;}
    .contnetBox button{font-size: 35px; height: 82px; border-radius: 20px; margin-top: 30px; letter-spacing: -2px;}

    .diagnoInfo{margin-bottom: 46px;}
    .diagnoInfo p{font-size: 28px; line-height: 38px; letter-spacing: -2px;}

    .baseBox{width: 350px; height: 350px; margin-bottom: 50px;}
    .rectContent{background-size: 700px;}

    .centerBox{width: 220px; height: 220px;}
    .centerBox p{font-size: 40px;}
    .centerBox p span{font-size: 64px;}

    .subHeader div p{font-size: 34px; letter-spacing: -2px;}
    .subHeader div button{top: 4px; width: 32px; height: 32px;}

    .insuTitle{width: 450px; margin-bottom: 70px;}
    .insuTitle img{margin-bottom: 20px; width: 111px;}
    .insuTitle p{margin-bottom: 32px; font-size: 40px; line-height: 47px; letter-spacing: -3px;}
    .insuTitle span{font-size: 32px; line-height: 38px; letter-spacing: -1px;}
    .insuTitle span mark{font-size: 42px;}

    .insuDetail{border-top: 4px solid #000; border-bottom: 2px solid #d9d9d9; padding: 40px 0;}
    .insuDetail li{font-size: 26px;}
    .insuDetail li:not(:last-of-type){margin-bottom: 36px;}

    .insuCTA{padding: 80px 0 0; height: 330px; margin-bottom: 40px;}
    .insuCTA p{font-size: 33px; line-height: 44px;}

    .closingBox{gap: 16px; margin-bottom: 50px; max-width: 540px; margin-bottom: 125px;}
    .closingBox li{border-radius: 30px; padding: 90px 0; font-size: 28px; line-height: 35px; letter-spacing: -2px;}
    .closingBox li img{margin-top: 50px;}

    .inputContainer h2{font-size: 52px; line-height: 65px; margin-bottom: 57px;}
    .inputContainer .inputContent{border: 1px solid #b9b9b9; border-radius: 20px; padding: 64px 28px 32px; margin-bottom: 24px;}
    .inputContainer .inputContent label{left: 28px; top: 24px; font-size: 24px; letter-spacing: -2px;}
    .inputContainer .inputContent input{font-size: 34px; letter-spacing: -1px;}
    .inputContainer .inputContent .userNum input:first-of-type{padding-right: 16px;}
    .inputContainer .inputContent .userNum input:last-of-type{padding-left: 16px;}
    .inputContainer .inputContent .userNum span{width: 40px; height: 2px;}

    .inputCheck{gap: 12px; margin-bottom: 92px;}
    .inputCheck label{padding-left: 48px; font-size: 30px; line-height: 44px; letter-spacing: -2px;}
    .inputCheck a{width: 18px; height: 27px;}

    .telecomBox span{font-size: 40px; line-height: 65px; letter-spacing: -2px; margin-bottom: 24px;}
    .telecomBox .telecom{gap: 12px; margin-bottom: 45px;}
    .telecomBox .telecom li{border-radius: 8px; font-size: 28px; line-height: 38px; padding-block: 18px;}
    .telecomBox .telecom li:not(.active){border: 1px solid #b4b7c4;}
    .telecomBox .telecom li select{padding-inline: 16px; font-size: 28px; line-height: 38px;}

    .inputBox{gap: 11px; margin-bottom: 24px;}
    .inputBox .inputContent{margin-bottom: 0;}
    .inputBox button{font-size: 28px; border-radius: 20px; padding: 0 22px; letter-spacing: -3px;}

    .inputContent>span{font-size: 28px; line-height: 140px; padding: 0 28px;}
    .inputContent.timer{padding-right: 140px; margin-bottom: 100px;}

    .inputContainer{padding-top: 70px;}

    .layer div{border-radius: 20px; max-width: 920px; padding: 48px;}
    .layer div p{margin-bottom: 24px; font-size: 24px; letter-spacing: -2px; line-height: 34px;}
    .layer div button{font-size: 35px; height: 82px; border-radius: 20px;  margin-top: 40px;}

    .floatingCTA button{font-size: 42px; padding: 33px 0; letter-spacing: -3px;}

    footer:has(.floatingCTA.active){margin-bottom: 116px;}
}

@keyframes upAni{
    0%{top: 100%;}
    100%{top: 50%;}
}
@keyframes horiAni{
    0%{background-position: 0% top;}
    100%{background-position: 200% top;}
}