@charset "utf-8";

@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Escoredream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; font-display: swap; }

@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Suit'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root{
    --font-color : #2f2f2f;
}


/* start */
.fortune{position: relative; min-height: 940px;}
.fortune *{font-family: 'Suit';}
/* .fortune + .fortune{margin-top: 30px;} */
.fortune.start{background: url(/img/fortune/test_bg.jpg) no-repeat center / cover;}
.fortune.start .inner{min-height: 940px; max-width: 1920px; margin: 0 auto; position: relative;}
.fortune.start h2{position: absolute; top: 222px; left: 464px; font-family: 'Escoredream'; font-weight: 200; font-size: 92px; letter-spacing: -0.08em;}
.fortune.start .txt{position: absolute; top: 593px; left: 984px; font-size: 22px; letter-spacing: -0.02em; line-height: 1.5;}
.fortune.start .txt .start_btn{padding: 15px 30px; background: #93887D; border-radius: 10px; text-align: center; display: inline-block; color: #FFF; border: 2px solid #FFF; margin-top: 30px; font-size: 26px; font-weight: 600; transition: all 0.3s;}
.fortune.start .txt .start_btn:hover{color: #000; background: #FFF;}

/* test */
.fortune.test{min-height: 1400px; display: flex; align-items: center; justify-content: center;}
.fortune.test .inner{width: 100%; max-width: 1195px;}
.fortune.test .title{text-align: center;}
.fortune.test .title .step .txt{font-size: 18px; letter-spacing: -0.02em; font-weight: 500; color: var(--font-color);}
.fortune.test .title .step .txt span{color: #93887d;}
.fortune.test .title .step .progress{margin: 15px auto 0; width: 375px; position: relative; height: 1px;}
.fortune.test .title .step .progress:before{content: ''; display: block; width: 107%; height: 100%; background: #93887d; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.fortune.test .title .step .progress .dot{width: 8px; height: 8px; border-radius: 50%; background: #93887d; position: absolute; top: 50%; transform: translate(-4px,-50%);}
.fortune.test02 .title .step .progress .dot{left: calc(100% / 7);}
.fortune.test03 .title .step .progress .dot{left: calc((100% / 7) * 2);}
.fortune.test04 .title .step .progress .dot{left: calc((100% / 7) * 3);}
.fortune.test05 .title .step .progress .dot{left: calc((100% / 7) * 4);}
.fortune.test06 .title .step .progress .dot{left: calc((100% / 7) * 5);}
.fortune.test07 .title .step .progress .dot{left: calc((100% / 7) * 6);}
.fortune.test08 .title .step .progress .dot{left: 100%;}
.fortune.test .title .ques{margin-top: 40px; font-size: 30px; letter-spacing: -0.02em; font-weight: 500; color: var(--font-color);}
.fortune.test .title .ques p + p{margin-top: 15px;}
.fortune.test .img{margin-top: 67px; text-align: center;}
.fortune.test .img img{width: 726px;}
.fortune.test .line{margin: 65px 0;}
.fortune.test .select{display: flex; flex-direction: column; align-items: center; gap: 15px 37px; justify-content: center;}
.fortune.test .select button{font-size: 20px; letter-spacing: -0.02em; color: var(--font-color); font-weight: 300; width: 378px; height: 57px; background: #e1dcd6; border: 1px solid #93887d; border-radius: 50px; display: block; transition: all 0.3s;}
.fortune.test .select button:hover,
.fortune.test .select button.on{color: #FFF; background: #93887d;}
.fortune.test .back{display: inline-flex; align-items: center; gap: 13px; font-size: 24px; letter-spacing: -0.02em; color: var(--font-color); font-weight: 300; background: none; border: none; margin-top: 30px;}
.fortune.test .back img{width: 32px;}
.fortune.test01 .img img{width: 1064px;}
.fortune.test01 .select{display: grid; grid-template-columns: repeat(3, 283px);}
.fortune.test01 .select button{width: auto;}

/* complete */
.fortune.complete{background: url(/img/fortune/com_bg.jpg) no-repeat center / cover; display: flex; justify-content: center; align-items: center; text-align: center; padding: 100px 0;}
.fortune.complete .title{font-size: 20px; letter-spacing: -0.02em; font-weight: 700; color: var(--font-color); width: 270px; line-height: 60px; background: rgba(255, 255, 255, 0.8); position: relative; margin: 0 auto;}
.fortune.complete .title::before,
.fortune.complete .title::after{content: ''; display: block; width: 105%; height: 1px; background: #93887d; position: absolute; left: 50%; transform: translateX(-50%); top: -10px;}
.fortune.complete .title::after{top: initial; bottom: -10px;}
.fortune.complete .title span{color: #757575;}
.fortune.complete .form_wrap{margin-top: 95px; width: 1140px; border-radius: 36px; background: #FFF;padding: 64px 0;}
.fortune.complete .form{display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 0;}
.fortune.complete .form dl{width: 45%; display: flex; align-items: center; justify-content: center; gap: 27px;}
.fortune.complete .form dl:nth-child(n+3){width: 31%;}
.fortune.complete .form dl dt{font-size: 20px; letter-spacing: -0.02em; font-weight: 700; color: var(--font-color);}
.fortune.complete .form dl dd.radio{display: flex; align-items: center; gap: 10px;}
.fortune.complete .form dl dd.radio span input{display: none;}
.fortune.complete .form dl dd.radio span label{font-size: 20px; letter-spacing: -0.02em; color: var(--font-color); width: 120px; height: 50px; border-radius: 50px; border: 1px solid #474747; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;}
.fortune.complete .form dl dd.radio span input:checked + label{background: #c2b097;}
.fortune.complete .form dl dd.radio span label i{display: block; aspect-ratio: 14/16; width: 14px; background: url(/img/fortune/radio_chk.svg) no-repeat center / contain;}
.fortune.complete .form dl dd select{font-size: 18px; letter-spacing: -0.02em; color: var(--font-color); width: 210px; height: 48px; border-radius: 10px; border: 1px solid #474747; background: #FFF url(/img/fortune/sel_ic.svg) no-repeat right 16px center / 16px; padding: 0 16px; appearance: none; outline: none !important;}
.fortune.complete .btn_wrap{margin-top: 60px; display: flex; justify-content: center;	gap: 15px;}
.fortune.complete button{font-size: 20px; color: #FFF; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: 285px; height: 63px; background: #93887d; border-radius: 12px; border: none;}
.fortune.complete .kakao_btn img{width: 28px;}
.fortune.complete .test_wrp .forms{padding: 0 !important; margin-top: 60px !important;}

/* result */
.fortune.result{background: url(/img/fortune/result_bg.jpg) no-repeat center / cover; display: flex; justify-content: center; align-items: center; text-align: center; min-height: 1010px;}
.fortune.result .inner{width: 753px; padding: 90px 0; text-align: center; background: rgba(255, 255, 255, 0.8);}
.fortune.result .tp_txt{font-size: 20px; letter-spacing: -0.02em; font-weight: 700; color: var(--font-color); padding: 30px 45px; border-top: 1px solid #93887d; border-bottom: 1px solid #93887d; display: inline-block;}
.fortune.result .tp_txt span{color: #757575;}
.fortune.result .title{margin-top: 55px; font-size: 50px; letter-spacing: 0.02em; font-weight: 700;}
.fortune.result .title span{color: #73706c;}
.fortune.result p{margin-top: 50px; font-size: 20px; font-weight: 300; line-height: 1.6;}
.fortune.result p strong{color: #73706c; font-size: 22px; font-weight: 700;}