#wrap {padding-top: 5.5rem;min-height: 100vh;width: 100%;max-width:580px;margin: 0 auto;position: relative;}



/* 헤더 */
header {position: fixed;top: 0;left: 50%;width: 100%;z-index: 100;height: 5.5rem;padding: 0 1.5rem;max-width: 580px;background-color: #fff;transform: translateX(-50%);display: flex;justify-content: space-between;align-items: center;}
header .search {width: 3rem;height: 3rem;background: url(../img/search.png) no-repeat center / 2rem;}
header .open {width: 3rem;height: 3rem;background: url(../img/ham_open.png) no-repeat center / 2rem;}
header .logo { display: block; height: 3.8rem;width: fit-content;}
header .logo img {height: 100%;}
.open, .close, .search {cursor: pointer;}
nav .inner {transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1);overflow-y: scroll;position:fixed;z-index: 1000;top:0;left:-100%;width:70%;height:100%;background-color: #fff;}
nav .outer {background-color:rgba(0, 0, 0, .5);min-height: 100vh;position:fixed;width:100%;left:0;top:0;z-index: 999;display: none;}
nav.on .inner {display: block;left: 0;}
nav.on .outer {display: block;}
nav .nav_header {display: flex;align-items: center;padding: 1.8rem 2.2rem;}
nav .nav_header .close {width:1.8rem;height:1.8rem;margin-right: .5rem;filter: invert(1);background:url('../img/close.png') no-repeat center/contain;}



/* 하단 사업자 */
footer {background-color: #323232;width: 100%;padding: 3.5rem 1.5rem 8rem;display: flex;flex-direction: column;margin-top: 5rem;}
footer p {line-height: 1.6;font-size: 1.2rem;color: #c6c6c6;}
footer p b {font-weight: bold;color: #fff;line-height: inherit;font-size: inherit;}
footer span {display: flex;justify-content: right;}
footer .footerlogo {display: block;margin-bottom: .5rem;width: 8rem;}



/* 홈 */
.swiper1 .swiper-wrapper {height: fit-content;}
.swiper1 .swiper-wrapper .swiper-slide {display: flex;justify-content: center;align-items: center;}
.swiper1 .swiper-wrapper .swiper-slide img {display: block;width: 100%;padding: 0 2rem;}
.swiper2 {padding: 0 2rem !important;}
.swiper2 .swiper-wrapper {height: fit-content;margin-bottom: 2rem;}
.swiper2 .swiper-wrapper .swiper-slide {position: relative;display: flex;justify-content: center;align-items: center;}
.swiper2 .swiper-wrapper .swiper-slide img {display: block;height: 100%;width: 100%;object-fit: cover;}
.banner_wrap {padding: 1rem 2rem;}
.banner_wrap .banner {margin-bottom: 1rem;display: block;position: relative;}
.banner_wrap .banner img {
    width: 100%;display: block;height: 20rem;object-fit: cover;
}
.banner_wrap .banner .img{
    width: 100%;display: block;height: 20rem;object-fit: cover;
    background-color: #2e3438;
}
.banner_wrap .banner .img > p:nth-of-type(1){
    font-family: 'SB 어그로 M', sans-serif;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #c3c7cb;
    padding-top: 10%;
}
.banner_wrap .banner .img > p:nth-of-type(2){
    font-family: 'SB 어그로 M', sans-serif;
    text-align: center;
    font-size: 3rem;
    line-height: 1.4;
    color: #ffffff;
    margin-top: 1rem;
}
.banner_wrap .banner .img > p:nth-of-type(3){
    font-family: 'SB 어그로 M', sans-serif;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.4;
    color: #e3c599;
}
.banner_wrap .banner span {position: absolute;left: 0;bottom: 0;width: 100%;padding: 1.2rem 10rem 1.4rem 1.2rem;display: flex;flex-direction: column;justify-content: center;background: rgba(0, 0, 0, .8) url(../img/click-btn.png) no-repeat calc(100% - 1.1rem) / 8rem;}
.banner_wrap .banner span h3 {font-size: 1.6rem;color: #fff;font-weight: bold;line-height: 1.4;margin-bottom: .2rem;}
.banner_wrap .banner span p {font-size: 1.2rem;color: #fff;font-weight: 300;line-height: 1.2;}
.banner_wrap .banner:last-of-type {margin-bottom: 0;}



/* 검색 */
form {padding: 3rem 1.5rem 1rem;position: relative;}
form input[type="text"] {border: 1px solid #c4c4c4;border-radius: 10rem;padding: 1.2rem 5rem 1.2rem 1.5rem;color: #b9b9b9;width: 100%;min-height: 4rem;font-size: 1.4rem;display: flex;align-items: center;}
form input[type="text"]::placeholder {color: #b9b9b9;}
form input[type="submit"] {position: absolute;right: 1.8rem;top: calc(50% + 1rem);height: 3rem;width: 3rem;transform: translate(-50%, -50%);text-indent: -9999px;background: url(../img/search.png) no-repeat center / 2rem;}
.search_result .recommend {font-size: 1.8rem;font-weight: bold;line-height: 1.4;margin-bottom: 1.5rem;}
.search_result .noresult {font-size: 1.4rem;line-height: 1.4;color: #e2c498;margin-bottom: .1rem;}



/* 테스트페이지 */
.intro_wrap {opacity: 1;}
.intro_wrap.moveup {transition: 1s cubic-bezier(.23,.54,.23,1.05);opacity: 0;transform: translateY(-100%);}
.intro_wrap img {width: 100%;}
.secondImg {height: calc(100% - 5.5rem);background: radial-gradient(#fffdfd, #ffaba0);display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 1.5rem;}
.secondImg div {border: 1px solid #d4c5c3;border-radius: 1rem;font-size: 1.4rem;font-weight: bold;color: #f35960;width: 60%;height: 6rem;background-color: rgba(255, 255, 255, .7);display: flex;justify-content: center;align-items: center;max-width: 200px;}



.share_wrap {display: flex;flex-wrap: wrap;justify-content: center;gap: 1.5rem;max-width: 550px;margin: 3rem auto 4rem;}
.share_wrap .btn {width: 15rem;display: block;margin: 1rem auto;}
.share_wrap span {display:flex;justify-content:space-evenly;align-items: center;width: 100%;}
.share_wrap a {width: 40%;display: block;}
.share_wrap a img {width: 100%;}



/* test_wrap */
.test_wrap {padding: 2rem;}
.test_wrap .bar {display: block;width: 100%;height: 2rem;border-radius: 10rem;background-color: #f3f3f3;margin-bottom: 2rem;}
.test_wrap .bar .ing {background-color: #659968;position: relative;width: 5rem;height: 100%;display: block;border-radius: 10rem;transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);}
.test_wrap .bar .ing .deco {position: absolute;top: 50%;right:0;width: 4rem;height: 4rem;transform: translate(45%, -50%);background: url(../img/T001/deco.png) no-repeat center / contain;}
.slide_wrap {position: relative;}
.radio_wrap {left: 0;top: 0;width: 100%;height:fit-content;display: flex;justify-content: space-between;flex-direction: column;gap: 1.5rem;}
.radio_wrap h2 {font-size: 1.8rem;font-weight: bold;color: #232323;line-height: 1.2;text-align: center;min-height: 10rem;flex-direction: column;display: flex;justify-content: center;align-items: center;}
.radio_wrap h2 img {margin-top: 1rem;width: 100%;}
.radio_wrap li {list-style: none;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}
.radio_wrap input {position: absolute;}
#name {
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #666;
    width: 100%;
    border-radius: 1rem;
    padding: 1.8rem 1.5rem;
    box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, .1);
    border: 1px solid #ff577d;
}
.radio_wrap p {
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    color: #404040;
    margin: 1rem 0;
}
.radio_wrap button {
    background-color: #ff6990;
    border-radius: 10rem;
    padding: 2rem 1rem;
    font-size: 1.8rem;
    margin: 3rem auto 0;
    color: #fff;
    width: 80%;
}
.radio_wrap label {display: block;cursor: pointer;
font-size: 1.4rem;line-height: 1.2;color: #666;width: 100%;border-radius: 1rem;padding: 2rem;box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .1);border: 1px solid #d3d3d3;}
.radio_wrap input[type="radio"]:checked + label {border: 1px solid #954306;}
.resultImg {width: 100%;}



/* wait */
.wait {height: 100%;width: 100%;gap: 5rem;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.wait .wait_deco, .wait .wait_text {width: 75%;}
.wait h2 {font-size: 1.8rem;font-weight: bold;color: #232323;line-height: 1.2;margin-bottom: 2rem;text-align: center;display: flex;justify-content: center;align-items: center;}
.wait .icon {width: 10rem;height: 10rem;position: relative;margin-bottom: 2rem;}
.wait .icon img {position: absolute;left: 50%;top: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);object-fit: contain;display: block;}
.wait .icon .white {background-color: #fff;height: 100%;width: 100%;display: block;position: relative;animation: waitani 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);}
.wait .icon img.wait_front {z-index: 2;}
.wait .icon img.wait_back {z-index: -1;}
@keyframes waitani {0% {height: 100%;}100% {height: 0;}}



/* test_ing_onother_design : mbti 디자인 같이 생긴 놈 */
#test_ing_onother_design {background-color: #f7f8f8;   
}
#test_ing_onother_design li {padding: 2rem 1.5rem;}
#test_ing_onother_design li h2 {font-size: 1.8rem;font-weight: bold;color: #232323;text-align: center;line-height: 1.4;margin-bottom: 1.5rem;}
.radios {width: 100%;position: relative;display: flex;gap: 5%;padding: 0 1.5rem;justify-content: center;align-items: center;}
.radios span {display: block;display: flex;width: 100%;justify-content: space-between;align-items: center;flex-direction: column;}
.radios span p {font-size: 1.4rem;margin-top: 1rem;line-height: 1.4;height: 4rem;color: #444444;text-align: center;display: flex;align-items: center;}
.radios input {position: absolute;width: 0;height: 0;left: 0;top: 0;}
.radios label {cursor: pointer;position: relative;border-radius: 100%;width: 4rem;height: 4rem;border: 1px solid #3c3c3c;}
.radios input:checked + label {background-color: #eae8e8;}
#goresult {color: #fff;margin: 0 auto;cursor: pointer;font-size: 2rem;margin: 4rem auto;width: fit-content;border-radius: .5rem;padding: 1.5rem 5rem;background-color: #3e3a39;}



/* T007 전용 */
.T007_ing {min-height: 100vh;width: 100%;padding-bottom: 5rem;display: flex;flex-direction: column;align-items: center;gap: 2rem;background: url(../img/T007/loading-back.png) no-repeat center / cover;}
.T007_ing img {width: 100%;}
.T007_ing h2 {width: 100%;line-height: 1.4;font-size: 2.2rem;text-align: center;padding: 4rem 0 3rem;font-family: 'DungGeunMo', 'NanumSquareNeo';}
.T007_ing .bear {width: 80%;display: block;margin: 0 auto;padding-bottom:3rem;}
.T007_ing .infobox {width: 90%;display: block;margin: 0 auto;overflow: hidden;border: 2px solid #fff;border-radius: 1rem;}
.T007_ing form {display: flex;justify-content: space-evenly;width: 100%;padding: 1rem 1.5rem;}
.T007_ing form span {position: relative;width: 10rem;}
.T007_ing form span input[type="text"] {position: absolute;left: 50%;top: 100%;transform: translate(-50%, -100%);background-color: transparent;text-align: center;color: #232323;padding: 0 1rem;font-size: 1.8rem;border-radius: 0;outline: none;width: 100%;z-index: 2;border: none;font-family: 'DungGeunMo', 'NanumSquareNeo';}
.T007_ing form span input[type="text"]::placeholder {color: #c4c4c4;}
.T007_ing form span input[type="text"]:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* -webkit-text-fill-color: #fff; */
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
.T007_ing .gogoresult {width: 10rem;margin: 0 auto;font-size: 1.8rem;position: relative;text-align: center;padding: 3rem 0 1.5rem;font-family: 'DungGeunMo', 'NanumSquareNeo';background: url(../img/T007/namebox.png) no-repeat center / contain;}
.T007_ing .heart_flex {margin-top: 80%;display: flex;justify-content: center;align-items: center;gap: .5rem;}
.T007_ing .heart_flex img {width: 3.5rem;}
.T007_ing .heart_flex img.heart1 {animation: infinite 1s heart1 cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.T007_ing .heart_flex img.heart2 {animation: infinite 1s heart2 cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.T007_ing .heart_flex img.heart3 {animation: infinite 1s heart3 cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@keyframes heart1 {0% {transform: translate(0, .5rem);}70% {transform: translate(0, -.5rem);}100% {transform: translate(0, .5rem);}}
@keyframes heart2 {0% {transform: translate(0, -.5rem);}70% {transform: translate(0, .5rem);}100% {transform: translate(0, -.5rem);}}
@keyframes heart3 {0% {transform: translate(0, .5rem);}70% {transform: translate(0, -.5rem);}100% {transform: translate(0, .5rem);}}
.T007_wait {padding-bottom: 2rem;justify-content: space-between;}
.T007_wait .loadingBar {background-color: #e0e0e0;}
.T007_wait .loadingBar .inner {background: linear-gradient(to right, #95d2d8 0%, #e5bad5 100%);}
.T007_wait .flex {width: 100%;display: flex;flex-direction: column;align-items: center;gap: 1rem;}
.T007_wait .txt {width: 10rem;}
.T007_result {min-height: 100vh;width: 100%;padding: 2rem 1.5rem 5rem;background: url(../img/T007/loading-back.png) no-repeat center / cover;}
.T007_result .box {border: 1px solid #ddd;border-radius: 1rem;padding: 2rem 1.5rem;margin-bottom: 2rem;background-color: rgba(255, 255, 255, .5);}
.T007_result b {position: relative;font-size: 3rem;font-family: 'DungGeunMo', 'NanumSquareNeo';}
.T007_result b::after {content: "";height: 2rem;width: 2px;background-color: #febdde;position: absolute;left: 50%;top: calc(100% + .5rem);}
.T007_result .name {position: relative;margin: 0 auto;width: 90%;display: flex;justify-content: space-between;align-items: center;}
.T007_result .name::after {content: "";position: absolute;left: 0;top: calc(100% + 2.5rem);background-color: #febdde;width: calc(100% - 2.8rem);transform: translateX(1.5rem);height: 2px;}
.T007_result .num {position: relative;width: 90%;display: flex;justify-content: space-between;align-items: center;margin: 4rem auto 3rem;}
.T007_result .num::after {content: "";position: absolute;left: 0;top: calc(100% + 2.5rem);background-color: #febdde;width: calc(100% - 1.8rem);transform: translateX(1rem);height: 2px;}
.T007_result .box .name b.myname {color: #fd7ec2;}
.T007_result .box .name b.uname {color: #70d3f3;}
.T007_result .num .numel {color: #232323;font-size: 4rem;}
.T007_result .bears {width: 100%;display: flex;justify-content: space-evenly;}
.T007_result .redbear {width:20%;object-fit: contain;}
.T007_result .bluebear {width:20%;object-fit: contain;}
.T007_result .sum_wrap {width:30%;}
.T007_result .sum_wrap .sum {font-size:9rem;text-align: center;width: 100%;font-family: 'DungGeunMo', 'NanumSquareNeo';}
.T007_result .sum_wrap img {width:80%;display: block;margin: 0 auto;object-fit: contain;}
.T007_result .result {width: 100%;}



/* T012 */
#wrap.T012 {background-color: #ffe1f0;}
#wrap.T012 .bar {display: flex;justify-content: center;gap: .5rem;background-color: transparent;font-size: 2.4rem;font-weight: 800;margin: 3rem 0 0;color: #4d4d4d;}
#wrap.T012 .bar p {color: inherit;font-size: inherit;font-weight: inherit;}
#wrap.T012 .radio_wrap h2 {color: #2e302f;}
#wrap.T012 .radio_wrap label {background-color: #fff;}
#wrap.T012 .radio_wrap input[type="radio"]:checked + label {border: 1px solid #e79dc3;transition: .3 cubic-bezier(0.075, 0.82, 0.165, 1);transform: scale(1.01);}
.T012_bg {display: flex;justify-content: space-between;align-items: center;flex-direction: column;width: 100%;height: 100%;background:url(../img/T012/loading-bk.png) no-repeat center / cover;}
.T012_bg p {font-size: 1.7rem;font-weight: 800;letter-spacing: -1;transform: scaleX(1.05);text-align: center;line-height: 1.4;color: #6b385a;font-family: 'SB 어그로 B', 'NanumSquareNeo';}
.T012_result {width: 100%;background: url(../img/T012/loading-bk.png) no-repeat center / cover;}
.T012_result .dashed {font-size: 2.2rem;padding: 2rem 1.5rem;margin: 1.5rem;line-height: 1.6;border-radius: 1.5rem;border: 2px dashed #f6d1e5;font-family: 'EsaManru', 'NanumSquareNeo';background-color: rgba(255, 255, 255, .5);}
.T012_result .dashed pre {font-size: 1.4rem;line-height: 1.4;}
.T012_result .dashed p {color: #434443;font-size: inherit;text-align: center;line-height: inherit;font-family: 'EsaManru', 'NanumSquareNeo';}
.T012_result h2 {color: #ea4795;padding: 4rem 0 2rem;text-align: center;font-size: 3.6rem;font-family: '고령딸기체', sans-serif;}
.T012_result .type_flex {padding-bottom: 4rem;display: flex;flex-direction: column;}
.T012_result .type_flex .type_el {padding: 2rem 1.5rem;text-align: center;margin: 1rem 1.5rem;border-radius: 1.5rem;border: 2px solid #e2a3c8;background-color: rgba(255, 255, 255, .7);}
.T012_result .type_flex .type_el h3 {color: #333333;font-size: 3.6rem;margin: 1rem 0 2rem;font-family: '고령딸기체', sans-serif;}
.T012_result .type_flex .type_el pre {font-family: 'EsaManru', 'NanumSquareNeo';font-size: 1.9rem;color: #aa6392;font-weight: 300;line-height: 1.4;}



/* loadingBar */
.loadingBar {height: 2.5rem;margin-bottom: 2rem;border-radius: .5rem;width:calc(100% - 3rem);background-color: #fff0f9;}
.loadingBar .inner {position: relative;height: 100%;width: 20%;border-radius: .3rem;transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);background: linear-gradient(to right, #fde2eb 0%, #f493bc 30%, #ed5a66 100%);}
.loadingBar .inner img {position: absolute;right: 0;top: 0;height: 2rem;width: 2rem;transform: translate(50%, -100%);}



/* T013 */
.T013_bg {height: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
.T013_bg .wait_deco {width:70%;display: block;margin: 0 auto;}
.T013_bg span {width: 100%;padding: 1.5rem;}
.T013_bg span > p {font-size: 1.8rem;text-align: center;margin-bottom: 1rem;font-family: 'YangJin', 'NanumSquareNeo';}
.T013_bg span .loadingBar {width: 100%;}
.T013_bg span .loadingBar .inner {background: linear-gradient(to right, #f3f9a7 0%, #f1e486 30%, #eec759 100%);}



/* T011 */
.T011_bg {height: 100%;display: flex;align-items: center;flex-direction: column;background-color: #e0d8c1;justify-content: space-between;}
.T011_bg .loadingBar {background-color: #e0e0e0;}
.T011_bg .loadingBar .inner {background: #115132;}



/* T017 */
.T017_bg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #6a4a3a;
}
.T017_bg .loadingBar {
    height: 1.5rem;
    width: 70%;
    margin-bottom: 3rem;
    border-radius: 10rem;
}
.T017_bg .loadingBar .inner {
    background: #93643a;
    border-radius: 10rem;
}
.T017_bg .loadingBar .inner img {
    height: 5rem;
    width: 5rem;
    transform: translate(50%, -40%);
}
.T017_bg img {
    width: 55%;
    max-width: 300px;
}









/* saju */
.saju_start .intro {
    display: flex;flex-direction: column;align-items: center;justify-content: end;
    padding: 0 1.5rem 2rem;
    min-height: 20rem;
}
.saju_start .intro h2 {
    font-family: 'GongGothicMedium', sans-serif;
    text-align: center;
    font-size:3rem;
    line-height: 1.4;
    color: #6e2e00;
    margin-top: 1rem;
}
.saju_start .intro h3 {
    font-family: 'GongGothicMedium', sans-serif;
    text-align: center;
    font-size:1.8rem;
    line-height: 1.4;
    color: #e3c599;
}
.saju_start .intro h4 {
    font-family: 'GongGothicMedium', sans-serif;
    text-align: center;
    font-size:1.4rem;
    line-height: 1.4;
    color: #494949;
}
#signform {
    background-color: #fbfbfb;
    border: 1px solid #e3e3e3;
    padding: 0 1.5rem 3rem;
    border-radius: 1.5rem;
    margin: 1.5rem;
}
#signform h3 {
    font-family: 'GongGothicMedium', sans-serif;
    margin: 3rem 0 1.5rem;
    font-size: 1.8rem;
}
#signform .flex {
    display: flex;align-items: center;justify-content: space-between;
    margin: 3rem 0 0;
}
#signform .flex h3 {
    margin: 0;
}
#signform input[type=text] {color: #404040;}
#signform #submit {
    padding: 1.5rem;
    font-size: 1.8rem;
    text-align: center;
    margin-top: 2rem;
    border-radius: 10rem;
    color: #fff;
    display: block;width: 100%;
    background-color: #115132;
    font-family: 'GongGothicMedium', sans-serif;
}
#signform input[type='date'] {
    border: 1px solid #c4c4c4;
    border-radius: 10rem;
    padding: 1.2rem 5rem 1.2rem 1.5rem;
    color: #b9b9b9;
    width: 100%;
    min-height: 4rem;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}
#signform select {
    border: 1px solid #c4c4c4;
    border-radius: 10rem;
    padding: 1.2rem 5rem 1.2rem 1.5rem;
    color: #b9b9b9;
    width: 100%;
    min-height: 4rem;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    font-family: 'pretendard', sans-serif;
}
#signform select option {
    font-size: 1.4rem;
    font-family: 'pretendard', sans-serif;
}
#wait {
    padding-top: 5.5rem;min-height: 100vh;width: 100%;max-width:580px;margin: 0 auto;position: relative;

    font-family: 'GongGothicMedium', sans-serif;
    background-color: #6e2e00;
    display: flex;justify-content: center;align-items: center;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.4;
    color: #e3c599;
}







.switch_wrap label {font-size: 1.6rem;font-weight: 500;position: relative;}
.switch_wrap {display: flex;gap: 1rem;justify-content: end;}
.switch-field {
    margin: 1rem 0;
    justify-content: end;
    display: flex;
    flex-wrap: wrap;
}
.switch-field label:hover {cursor: pointer;}
.switch-field input:checked + label {background-color: #e3c599;box-shadow: none;font-weight: bold;color: #444;}
.switch-field input {position: absolute !important;clip: rect(0, 0, 0, 0);height: 1px;width: 1px;border: 0;overflow: hidden;}
.switch-field label {background-color: #f3f1f1;color: #ccc;font-size: 1.6rem;line-height: 1;text-align: center;padding: .5rem .8rem;margin-right: -1px;border: 1px solid #c4c4c4;}
.switch-field label:first-of-type {border-radius: .2rem 0 0 .2rem;}
.switch-field label:last-of-type {border-radius: 0 .2rem .2rem 0;}



/* saju_result */
.saju_result section {
    margin: 2rem 1.5rem;
}
.saju_result table {
    border: 1px solid #ccc;
    border-collapse: collapse;
}
.saju_result table td, .saju_result table th {
    font-family: 'pretendard', sans-serif;
    text-align: center;
    line-height: 1.4;
    padding: .2rem 0;
    font-size: 1.2rem;
}
.saju_result .title {
    line-height: 1.4;
    font-size: 1.8rem;
    color: #954306;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    font-family: 'GongGothicMedium', sans-serif;
    background: #fef6d3 url(../img/testapp_footerlogo.png) no-repeat calc(100% - 1.5rem) center / 8rem;
    border: 2px solid #954306;
    margin-bottom: 1rem;
    display: flex;justify-content: space-between;align-items: center;
}
.saju_result .title img {height: 2rem;}
.saju_result pre {
    padding: 1rem .5rem;
    line-height: 1.6;
    font-size: 1.6rem;
    color: #544e4e;
    margin-bottom: 4rem;
}
.saju_result pre font, .saju_result pre span, .saju_result pre p {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

/* saju_result - 내 사주 정보 */
#my_saju_info {
    margin-bottom: 2rem;
}
#my_saju_info > span {
    font-size: 1.4rem;
    display: block;
    margin: 1rem;
    line-height: 1.4;
    font-family: 'GongGothicMedium', sans-serif;
}






/* coffee */
.qnum {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    color: #867c79;
    margin-top: 5rem;
    margin-bottom: -4rem;
}
.loadingWrap-T022 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    width: calc(100% - 3rem);
}
.loadingWrap-T022 img {
    width: 8rem;
}
.loadingWrap-T022 p.brown {
    font-size: 1.7rem;
    font-weight: 600;
    color: #1c120f;
    text-align: center;
    margin-bottom: 1rem;
}
.loadingWrap-T022 p.gray {
    font-size: 1.5rem;
    font-weight: 500;
    color: #75706f;
    text-align: center;
}
.loadingWrap-T022 .loadingBar {
    width: 90%;
    height: 2rem;
    background-color: #efefef;
    border-radius: 5rem;
    position: relative;
}
.loadingWrap-T022 .loadingBar .loading {
    /* width: 10%; */
    height: 2rem;
    background-color: #d70608;
    border-radius: 5rem;
    position: absolute;
    left: 0;
    top: 0;
    animation: loading 2s forwards;
}
@keyframes loading {
    from {
        width: 10%;
    }
    to {
        width: 100%;
    }
}




/* superpower */
.power-Img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}
.power-Img img {
    height: 8rem;
}
.loadingWrap-T023 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    background-color: #f2f5f9;
}
.loadingWrap-T023 p.brown {
    font-size: 1.7rem;
    font-weight: 600;
    color: #63504b;
    text-align: center;
    margin-bottom: 1rem;
}
.loadingWrap-T023 p.gray {
    font-size: 1.5rem;
    font-weight: 500;
    color: #75706f;
    text-align: center;
}
.loadingWrap-T023 .loadingBar {
    width: 90%;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 5rem;
    position: relative;
}
.loadingWrap-T023 .loadingBar .loading {
    /* width: 10%; */
    height: 1.5rem;
    background-color: #2769e0;
    border-radius: 5rem;
    position: absolute;
    left: 0;
    top: 0;
    animation: loading 2s forwards;
}



/* consumption */
.loadingWrap-T024 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    background-color: #f2f5f9;
}
.loadingWrap-T024 p.blue {
    font-size: 1.7rem;
    font-weight: 500;
    color: #2e3b5f;
    text-align: center;
    margin-bottom: 1rem;
}
.loadingWrap-T024 p.gray {
    font-size: 1.5rem;
    font-weight: 500;
    color: #75706f;
    text-align: center;
}
.loadingWrap-T024 .loadingBar {
    width: 90%;
    height: 1.5rem;
    background-color: #fff;
    border-radius: 5rem;
    position: relative;
}
.loadingWrap-T024 .loadingBar .loading {
    /* width: 10%; */
    height: 1.5rem;
    background-color: #5d50ff;
    border-radius: 5rem;
    position: absolute;
    left: 0;
    top: 0;
    animation: loading 2s forwards;
}