@charset "utf-8";
@import url("fonts.css");
@import url("xeicon.css");

*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box;font-family:'Pretendard';color:#000;line-height:1.2;}
a {font-family:inherit; text-decoration:none; color:inherit; outline:none;}
span{font-family:inherit;color:inherit;}
i{font-style:normal;color:inherit;}
button {border:0; box-shadow:none; cursor:pointer; background:transparent;}
input, textarea, select, button {font-family:inherit; font-size:inherit; color:inherit; appearance:none; -webkit-appearance:none; outline:none;}
input[type="text"]:disabled {background:#EBEBEB; opacity:1; color:#666;}
input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="email"],
input[type="button"],input[type="submit"],input[type="reset"] {width:100%; height:45px; padding:0 15px; border:solid 1px #D9D9D9; border-radius:6px;}
textarea {width:100%; height:90px; line-height:1.5em;  font-size: 15px; padding:14px; border:solid 1px #D9D9D9; resize:none; border-radius:6px;}
select {width:100%; height:45px; padding:0 25px 0 15px; border:1px solid #D9D9D9; background:#fff url('../images/input_select.svg') right 14px top 50% no-repeat; background-size:14px; border-radius:6px;} 
select::-ms-expand {display:none; background-color:transparent; border:0;}
input[type="checkbox"], input[type="radio"] {display:none;}
input[type="radio"] + label, input[type="checkbox"] + label {position:relative;	margin-right:15px; cursor:pointer; display: flex; align-items: center; color:#666;} 
input[type="checkbox"] + label:before, input[type="radio"] + label:before {content:''; display:inline-block; width:24px; height:24px; margin:0 10px 0 0; text-align:center; line-height:24px; background:#e0e0e0; border-radius:50%; vertical-align:middle; cursor:pointer;}
input[type="checkbox"] + label:before {content:'\e929'; font-family:'xeicon'; font-size:22px; color:#fff; line-height:24px; font-weight:500;}
input[type="checkbox"]:checked + label:before {background:#ff1b2f;}
input[type="radio"] + label:before {background:#fff; border:8px solid #e0e0e0; box-sizing:border-box;}
input[type="radio"]:checked + label:before {background:#fff; border:8px solid #ff1b2f; box-sizing:border-box;}
input[type="radio"] + label .num {font-size: 20px; padding-right: 4px; font-weight: 300;line-height: 1.4;}
input[type="text"] + input[type="text"] {margin-top:6px;}
select + input[type="text"] {margin-top:6px;}
::-webkit-input-placeholder {color:#AEAEAE; font-weight:300;}
::-moz-placeholder {color:#AEAEAE; font-weight:300;}
:-ms-input-placeholder {color:#AEAEAE; font-weight:300;}

.mt20 {margin-top:20px;}

.btn {width: 100%; height: 60px; font-size: 20px; font-weight: 500; border-radius: 10px; color:#fff;}
.btn-blk {background-color: #000;}
.btn-gray {background-color: #999;}
.btn-primary{background-color:#F11B1B;}
.btn-green{background-color:#07aa81;}
.btn-addr {flex-basis: 135px; flex-shrink: 0; width: 135px; height: 45px; padding-left:18px;  border-radius: 5px; font-size: 14px; background: url(../images/ico_search.svg) no-repeat left 16px top 50% /18px; border:1px solid #111; box-sizing: border-box; }

/* 250425 장유진 추가 */
.main-wrap{position:relative;background:url('../images/img_bg_activelife.png') no-repeat center bottom/cover;padding:25px 0 0;text-align:center;}
.main-wrap:after{content:'';position:absolute;top:0;left:0;width:100%;height:650px;background:rgb(217,191,243);z-index:-1;}
.main-text-wrap{padding:65px 0;}
.main-text-wrap h1{font-size:48px;font-weight:700;letter-spacing: -1.2px;}
.main-text-wrap h1 span{position: relative;z-index:1;}
/* .main-text-wrap h1 span::after{content: "";width: 180px;height: 12px;background: #fff;position: absolute;display: inline-block;left: -8px;bottom: 8px;border-radius:10px;z-index: -1;} */
.main-text-wrap p{margin-top:10px;font-size:16px;color:#222;font-weight:500;}
.main-info-wrap{margin-top:-50px;padding-top:50px;background:#fff;border-radius:30px 30px 0 0;text-align:center;}
.main-info{font-size:18px;color:#434343;line-height:1.5;}
.main-info .text-line{position: relative;font-weight:600;z-index:1;}
.main-info .text-line::after{content: "";width: 100%;height: 8px;background: #BFFF0F;position: absolute;display: inline-block;left: 0;bottom: 6px;border-radius:10px;z-index: -1;}
.main-info-wrap .btns{display:flex;justify-content: space-between; margin:45px auto 0;max-width:360px;z-index:2;}
.main-info-wrap .btns a{flex:1;display:block;width:100%;max-width:360px;height:68px;line-height:68px;border-radius:10px;font-size:20px;color:#fff;font-weight:600;text-align:center;}
.main-info-wrap .btns a + a{margin-left:10px;}
.main-info-wrap .btn-primary:before{content:'';display:inline-block;width:24px;height:24px;background:url('../images/ico_test.svg') no-repeat 0 0;vertical-align: text-bottom;margin-right:5px;}
.main-info-wrap .btn-secondary{background:#000;}
.main-footer{padding:45px 0;font-size:14px;color:#777;text-align:center;line-height:1.5;}
.main-footer strong{color:#333;font-weight:600;}
.main-footer span{margin-left:10px;}
.main-footer span:before{content:'|';padding-right:10px;}

.sub-top-wrap {position: relative;width: 100%;height: 80px;}
.sub-top-wrap:after {content: "";display: block;position: absolute;top: 0;left: 0;right: 0;width: 100%; height: 200px;background-color: rgba(255, 217, 215, 0.8);z-index: -1;}
.sub-top {position:relative;max-width:768px;margin:0 auto;padding: 30px 0 0;text-align:center;}
.sub-top h3{font-size:22px;}
.sub-top h3 span{color:#F11B1B;}
.sub-wrap{background: #fff;border-radius: 30px 30px 0 0;padding: 30px;margin: 0 auto;}
.sub-cont{max-width:768px;margin:0 auto;}
.sub-wrap .btns{display: flex; gap: 10px;margin:45px 0;}
.btn-test{max-width:780px;margin:0 auto;}

#questionView{max-width: 768px;margin: 0 auto;}
#questionView img{width:100%;}
#questionView div + div{margin-top:50px;}

/* 회원정보 */
.info-box {background:#F8F8F8; border:1px solid #D9D9D9; border-radius: 5px; padding:15px 20px;}
.info-box p {font-size: 15px; color:#555;}
.info-tit {font-size: 18px; font-weight: 600; padding:30px 0 10px;}
.imp {display: inline-block; font-size: 13px; color:#EA0029; padding-bottom:8px;}
.info-box-2 {padding:18px 15px; border-radius: 5px; border:1px solid #D9D9D9;}
.info-box-2 p {font-size: 15px; color:#555;line-height:1.3;}
.checkbox-pd {padding-top:16px;}
.small-label {font-size: 16px; font-weight: 500; color:#222; padding-bottom:8px;}
.radio-one-row {display: flex; gap: 15px;}
.info-detail-list {display: flex; flex-direction:column; gap:14px;}
.input-one-row {display: flex; gap: 5px;}
.input-one-row + input {margin-top:6px;}

.dim{display:none;position:fixed;top: 0;left: 0;right: 0; bottom: 0;background-color: rgba(0, 0, 0, 0.5);z-index:99;}
.add-layer{display:none;position:fixed;top:50%;left:50%;transform: translate(-50%,-50%);width:100%;max-width:900px;max-height:920px;height:90%;background:#fff;border-radius:25px;z-index:100;}
.add-layer .contents-inner{margin:45px 0 0;padding:0 45px;height: calc(100% - 90px);overflow-y: auto;}
.add-layer .contents-inner .input-form{height:auto;overflow: initial;}
.add-layer .btns{padding:45px 0;}

.test-agree-wrap{margin:35px 0;}
.test-agree-wrap .tit {display: flex;align-items: center;justify-content: space-between;padding-bottom:10px;}
.test-agree-wrap .tit h3 {font-size: 20px; font-weight: 500; }
.checkbox-text {font-size: 15px;}
.agree_wrap .agree{position: relative; font-size: 17px;padding: 8px;line-height: 20px;border-bottom: 1px solid #d6d6d6;}
.agree_wrap:first-child .agree{border-top: 1px solid #d6d6d6;}
.agree_wrap .agree span{cursor: pointer;}
.agree_wrap .agree .agree_q{display: inline-block;width: 80%;font-size: 15px;margin-left: 5px;color: #333;}
.agree_wrap .agree .agree_bt:before{content:'\e941';font-family:'xeicon';position: absolute;top: 13px;right: 15px;width: 17px;height: 10px;font-weight:bold;color:#EA0029;transition: 0.3s;}
.agree_wrap .agree.on .agree_bt:before{content:'\e944';}
.agree_wrap .agree_cont{display: none;font-size: 14px;line-height:1.4;padding: 15px;color: #666;border-bottom: 1px solid #d6d6d6;background-color: #f7f7f7;}
.agree_wrap .agree_cont b{font-family: 'Nanum Square Bold';color: #444;}
.agree_wrap .agree_cont a{color: #2b69c6;}
.agree_wrap .table03 {width:100%;margin-top:10px; border-top:1px solid #999; background: #fff;}
.agree_wrap .table03 tr td {text-align: left; padding: 0 5px; height: 30px; border-bottom: 1px solid #bbb; font-size: 14px;}
.agree_wrap .table03 tr th {background: #ddd; padding: 0 5px; height: 30px; border-bottom: 1px solid #bbb; font-size: 14px;}
.agree input[type="checkbox"] + label:before {border-radius:0;}
.agree input[type="checkbox"] + label{display:inline-block;margin-right:0;}

@media all and (max-width:800px) {
	.add-layer{top:auto;bottom:0;transform: translateX(-50%);border-radius:30px 30px 0 0;}
	.add-layer .contents-inner{margin:35px 0 0;padding:0 15px;height:calc(100% - 15px);}
	.add-layer .input-form dt:first-child {margin: 20px 0 0;}
}
/*--250425 장유진 추가 */


#ac_test_01{width: 100%;}
#ac_test_01 img{width: 100%;}
#ac_test_01 ul{width:100%;display:flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap; margin: 0 auto; padding: 55px 40px 0;  background:url("../images/acti_test_01_bg.jpg"); border-radius: 2.5vw;}
#ac_test_01 ul li{position:relative;width: 115px;padding-bottom:50px;}
#ac_test_01 ul li img{ border-radius: 20px;}
/*#ac_test_01 ul::after{content: ""; display: block; clear: both;}
/* #ac_test_01 ul li.on img{border: 4px solid red;} */
#ac_test_01 ul li.on:after {content: '';position: absolute;top: 0;left: 0;width: 107px;height: 107px;border: 4px solid red;border-radius: 20px;}

#ac_test_02{width: 100%;margin-top:100px;}
#ac_test_02 img{width: 100%;}
#ac_test_02 ul{width: 100%; margin: 0 auto; padding: 3.4vw 1.25vw 0 2.5vw;  background:url("../images/acti_test_01_bg.jpg"); border-radius: 2.5vw;}
#ac_test_02 ul li{ float: left; width: 25%; padding: 0 1.25vw 3.4vw 0;}
#ac_test_02 ul li img{ border-radius: 20px;}
#ac_test_02 ul::after{content: ""; display: block; clear: both;}
#ac_test_02 ul li.on img{border: 4px solid red;}

.flip { position: relative; perspective: 1100px;}
.card { position: relative;/*transition: .4s; transform-style: preserve-3d;*/} 
.front, .back {position:relative; width: 100%;  height: 100%; /*backface-visibility: hidden;*/}
.front {z-index: 1;}
.back {position: absolute; top:0; left:0; padding: 0 1.25vw 3.4vw 0;}
/* .back {transform: rotateY(180deg);} */
/* .flip.turn .card {transform: rotateY(180deg);} */
.flip .card.check .back::after{ display: block;  content:""; position: absolute; left:0; top:0; right:1.25vw; bottom:3.4vw; background: url("../images/q2_check.png") no-repeat; background-size: 100%;}  
.flip .card.wrong .back::after{ display: block;  content:""; position: absolute; left:0; top:0; right:1.25vw; bottom:3.4vw; background: url("../images/q2_wrong.png") no-repeat; background-size: 100%;}  
.flip.turn .front {z-index: 1;}
.flip.turn .back { z-index: 2;}

#ac_test_03{width: 100%;margin-top:100px;}
#ac_test_03 img{width: 100%;}
#ac_test_03 ul{display:flex;}
#ac_test_03 ul li{ flex:1;position: relative;}
#ac_test_03 ul li + li{margin-left:15px;}
/*#ac_test_03 ul li:nth-of-type(2){ float:none; clear: both; margin: 0 auto; width: 25vw;}*/
/* #ac_test_03 ul li:last-of-type{ float: right; width: 25vw; margin-right: 0;} */
#ac_test_03 ul::after{content: ""; display: block; clear: both;}
#ac_test_03 ul li.ok::after{content: ""; display: block; position: absolute; top:0; width: 100%; bottom:0; background: url(../images/q3_check.png) no-repeat center; background-size: 100%; z-index: 100;}
#ac_test_03 ul li.no::after{content: ""; display: block; position: absolute; top:0; width: 100%; bottom:0; background: url(../images/q3_wrong.png) no-repeat center; background-size: 100%; z-index: 100;}

#ac_test_04{width: 100%;}
#ac_test_04 img{width: 100%;}
#ac_test_04 table{width:100%; margin: 0 auto; border-spacing: 0;}
#ac_test_04 th{ border-bottom: 2px solid #868686;}
#ac_test_04 td{ border-bottom: 1px solid #868686; vertical-align: middle; position: relative;}
#ac_test_04 td img{vertical-align: middle;}
#ac_test_04 td.check::after{content: ""; display: block; position: absolute; top:0; width: 100%; bottom:0; background: url(../images/q4_check.png) no-repeat center; background-size: 100%; z-index: 100;}

.popup-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); display:flex; align-items: center; justify-content:center; z-index: 1000;}
.popup-content{ background: #fff; padding: 20px; border-radius: 5px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);}
.close-popup{margin-top: 15px; padding: 5px 10px; background:#007BFF; color: #686464; border: none; border-radius: 3px; cursor: pointer;}

.name, .name_result{position: relative; width: 100%; height:112px; background-color: #bef0ff; text-align: left;}
.name_box{ position: absolute; left:10px; right:10px; top:20px; bottom:20px; border-radius: 20px; overflow: hidden; background-color: #fff;}
.name_box span{ display: inline-block; width: 160px; height: 72px; background-color:#0090ff; text-align: center; line-height: 72px; color:#fff; font-size: 24px; font-weight: bold;}
.name_box input{ width: calc( 100% - 540px); height: 56px; border: none; -webkit-appearance: none; font-size: 22px; display: inline-block;}
.name_box input:last-of-type{ width: 180px;}
.name_result .student{ font-size: 22px; display: inline-block; line-height: 72px; width: calc( 100% - 540px);}
.name_result .year{ font-size: 22px; display: inline-block; line-height: 72px; width: 180px;}
#result h1{ font-size: 24px; font-weight: bold; color:#808b8f; margin: 50px auto 40px auto;}
#result h1 span{color:#000;}
#result .grade{margin-bottom: 40px;}
#result .answer-check{ width: 100%; box-sizing: border-box; padding: 0 5px;}
#result .answer-check::after{ content: ""; display: block; clear: both;}
#result .answer-check li{position: relative; box-sizing: border-box; width: 48%; height:60px; margin: 0 5px 20px 5px; float: left; text-align: right; line-height: 60px; padding-right: 20px; color:#888888; font-size: 24px;}
#result .answer-check li.q_01{ border-radius: 30px; background-color: #e5eee7;}
#result .answer-check li.q_02{ border-radius: 30px; background-color: #fff3e7;}
#result .answer-check li.q_03{ border-radius: 30px; background-color: #e5f4ff;}
#result .answer-check li.q_04{ border-radius: 30px; background-color: #fce4d6;}
#result .answer-check li.q_01 div{ position: absolute; left:0; height:60px; color: #fff; font-size: 24px; width: 160px; background-color: #077b1e; border-radius: 30px; text-align: center; line-height: 60px;}
#result .answer-check li.q_02 div{ position: absolute; left:0; height:60px; color: #fff; font-size: 24px; width: 160px; background-color: #ff8400; border-radius: 30px; text-align: center; line-height: 60px;}
#result .answer-check li.q_03 div{ position: absolute; left:0; height:60px; color: #fff; font-size: 24px; width: 160px; background-color: #0090ff; border-radius: 30px; text-align: center; line-height: 60px;}
#result .answer-check li.q_04 div{ position: absolute; left:0; height:60px; color: #fff; font-size: 24px; width: 160px; background-color: red; border-radius: 30px; text-align: center; line-height: 60px;}
li.q_01 .color{font-size: 30px; color:#69aa0d; font-weight: bold;}
li.q_02 .color{font-size: 30px; color:#fd9500; font-weight: bold;}
li.q_03 .color{font-size: 30px; color:#0090ff; font-weight: bold;}
li.q_04 .color{font-size: 30px; color:red; font-weight: bold;}
#result{margin-top: 20px; font-size: 18px; text-align: center;}
#result .cont{color:#535353; font-size: 20px; padding:50px 0;line-height:1.3;text-align:left;}
#result .recommend{ box-sizing: border-box; margin: 0 5px; padding: 20px; background-color: #fef5ff; border: 2px solid #e5c2e9; border-radius: 20px; text-align: left; font-size: 24px; line-height: 1.3;}
#result .recommend+span{ width: 100%; display: block; margin:10px 0 50px 0; font-size: 18px; color:#888; text-align: left; padding-left: 20px;}
#result h2{ font-size: 24px; color:#333;margin-bottom:10px;}
#result .recommend p{line-height:1.3;}
.purple{color:#ad30bd;}
.analyze{display: block; width:100%; max-width: 780px; height:72px; color:#fff; font-size: 24px; font-weight: bold; text-align: center; background-color: #f15151; border: none; border-bottom: 4px solid #ca2424; border-radius: 20px; margin: 20px auto 40px auto;}
#score{ width: 100%; text-align: right; font-size: 30px; border-top:1px #333 solid; border-bottom:1px #333 solid; padding: 20px 50px 20px 0;}
.btn_box{ width: 100%;display:flex; justify-content: center; text-align: center; margin: 20px 0 100px 0;}
.btn_box button + button{margin-left:10px;}
.restart{ display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #0090ff; border: none; /*border-bottom: 4px solid #055898;*/ border-radius: 10px;}
.submit{ display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #f15151; border: none; /*border-bottom: 4px solid #ca2424;*/ border-radius: 10px;}
.btn_auto_start{display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #077b1e; border: none; /*border-bottom: 4px solid #065515;*/ border-radius: 10px;}
.btn_start{display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #ff8400; border: none; /*border-bottom: 4px solid #cc6a00;*/ border-radius: 10px;}
.restart_02{display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #0090ff; border: none; /*border-bottom: 4px solid #055898;*/ border-radius: 10px;}
.submit_02{ display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #f15151; border: none; /*border-bottom: 4px solid #ca2424;*/ border-radius: 10px;}
.submit_03, .submit_04{ display: block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #f15151; border: none; /*border-bottom: 4px solid #ca2424;*/ border-radius: 10px; margin: 20px auto 100px auto;}
.reset{ display: inline-block; width: 160px; height:68px; color:#fff; font-size: 20px; font-weight: bold; text-align: center; background-color: #0090ff; border: none; /*border-bottom: 4px solid #055898;*/ border-radius: 10px; margin: 20px auto 100px auto;}

#ac_test_05{width: 100%;margin-top:100px;}
#ac_test_05 img{width: 100%;}
#ac_test_05 ul{padding: 4.8vw 0 4.8vw 4.3vw;}
#ac_test_05 li { font-size: 80px; font-weight: bold; padding-bottom: 4.8vw; line-height: 120px;}
#ac_test_05 li input{ width: 120px; height: 120px; padding:0; border: 2px solid #5d9cb0; font-size: 80px; text-align: center; overflow: hidden; color:#007BFF; font-weight: bold;}
#ac_test_05 li div{ display: inline-block; width: 120px; height: 120px; border: 2px solid #5d9cb0; font-size: 80px; vertical-align: top; text-align: center; overflow: hidden;}

/* 250820 메인 개선 */
.mo-mode{display:none;}
.main-info-wrap{padding-top:64px;}
.main-info{max-width:700px;margin:0 auto;font-size:18px;color:rgb(119, 119, 119);line-height:1.5;}
.main-info h2{position: relative;display:inline-block;font-size:24px;color:#222222;font-weight:500;margin-bottom:15px;line-height:1.5;z-index:1;}
.main-info h2::after{content: "";width: calc(100% + 8px);height: 12px;background: rgb(191,255,15);position: absolute;display: inline-block;left: -4px;bottom: 4px;border-radius:10px;z-index: -1;}
.main-info > div{color:#777;line-height:1.5;}
.main-test-info{margin-top:75px;}
.main-test-info ul{display:flex;justify-content: space-between;align-items:flex-start;gap:14px;}
.main-test-info li{flex:1;position:relative;}
.main-test-info li:before{content:'';position:absolute;top:-15%;left:50%;transform: translateX(-50%);width:84px;height:84px;background-repeat:no-repeat;background-position:0 0;background-size:100%;}
.main-test-info li.target:before{background-image: url('../images/ico_test_target.svg');}
.main-test-info li.time:before{background-image: url('../images/ico_test_time.svg');}
.main-test-info li.method:before{background-image: url('../images/ico_test_method.svg');}
.main-test-info li span{display:block;text-align:center;}
.main-test-info li .tit{width:100%;height:132px;padding-top:65px;border-radius:30px 30px 0 0;font-size:24px;font-weight:600;}
.main-test-info li .txt{width:100%;height:108px;line-height:108px;font-size:20px;font-weight:500;border-radius:0 0  30px 30px;color:#222222;}
.main-test-info li.target .tit{background:rgb(231,209,244);color:rgb(144,102,169);}
.main-test-info li.target .txt{background:rgb(244,239,255);}
.main-test-info li.time .tit{background:rgb(197,232,242);color:rgb(42,128,150);}
.main-test-info li.time .txt{background:rgb(222,244,250);}
.main-test-info li.method .tit{background:rgb(200,231,158);color:rgb(88,149,4);}
.main-test-info li.method .txt{background:rgb(230,244,210);}
.main-test-area{margin-top:14px;padding:0 65px;width:100%;height:210px;background:rgb(255,237,235);border-radius:30px;}
.main-test-tit{display:inline-block;width:224px;height:60px;line-height:60px;background:rgb(255,206,202);font-size:24px;color:rgb(187,68,58);font-weight:700;margin:0 auto;border-radius:0 0 30px 30px;}
.main-test-area ul{display:flex;justify-content: space-between;align-items:center;}
.main-test-area li{flex:1;text-align:center;font-size:18px;color:#222;font-weight:500;}
.main-test-area li span{display:block;}
.main-test-result{margin-top:48px;padding:0 43px;border:1px solid rgb(195,195,195);border-radius:30px;}
.main-test-result .img-wrap{margin:20px 0 30px;}
.main-test-result img{width:100%;}
.tip-txt{margin-top:20px;font-size:14px;color:#777777;}
.main-info-wrap .btns{display:flex;justify-content: space-between;position:fixed;bottom:20px;left:50%;transform: translateX(-50%);width:360px}
.main-info-wrap .btns a{flex:1;display:block;width:100%;max-width:360px;height:68px;line-height:68px;border-radius:20px;font-size:20px;color:#fff;font-weight:600;text-align:center;}
.main-info-wrap .btns a + a{margin-left:10px;}
.main-info-wrap .btn-primary:before{content:'';display:inline-block;width:24px;height:24px;background:url('../images/ico_test.svg') no-repeat 0 0;vertical-align: text-bottom;margin-right:5px;}
.main-info-wrap .btn-secondary{background:#000;}
.btn-primary{background-color:#F11B1B;}
.main-footer{padding:45px 0 120px;}

@media screen and (min-width:1921px) {
	.main-wrap{background-size:1920px auto;}	
}

@media screen and (max-width:768px) {
    .sub-wrap{border-radius: 20px 20px 0 0;padding: 30px 15px}
    .btn_box button {width:30.83vw !important;max-width:160px !important;height:60px !important;font-size:20px !important;}
    .btn_box button + button{margin-left:5px;}

    #ac_test_01 ul{padding: 3.4vw 1.25vw 0 4.5vw;}
    #ac_test_01 ul li{width: 16.97vw; padding: 0 3.25vw 3.4vw 0;}
    #ac_test_01 ul li.on:after {width: 12.77vw;height: 12.77vw;border-radius: 1.95vw;}
    #ac_test_01 ul li img,
    #ac_test_02 ul li img{border-radius:10px;}
    #ac_test_05 li { font-size: 11.42vw; line-height: 16.63vw;}
    #ac_test_05 li input{ width: 16.63vw; height: 16.63vw; font-size: 11.42vw;}
    #ac_test_05 li div{width: 16.63vw; height: 16.63vw; font-size: 11.42vw;}

    #result .answer-check li{width:100%;}
    #result .grade img{width:200px;}
    #result .recommend{font-size:20px;}
    #result .cont{padding:35px 0;}
    #result .answer-check li{margin: 0 0 20px;}
}


@media screen and (max-width:640px) {
    .db640{display:block;}
    .main-wrap{background-image:url('../images/bg_main_m.png');background-size:430px auto;} 
    .main-text-wrap{padding:45px 0;}
    .main-info-wrap{border-radius:20px 20px 0 0;}
    .main-info-wrap .btns{bottom:0;padding:20px;background:#fff;}
    .main-footer span{margin-left:0;}
    .main-footer span:before{content:none;padding-right:0;}

    /* 250820 메인 개선 */
    .pc-mode{display:none;}
	.mo-mode{display:block;}
	.dn640{display:none;}

	.main-info{max-width:360px;font-size:16px;}
	.main-test-info li:before{width:52px;height:52px;}
	.main-test-info li .tit{padding-top:51px;height:94px;border-radius:20px 20px 0 0;font-size:18px;}
	.main-test-info li .txt{height:84px;line-height:84px;font-size:18px;border-radius:0 0 20px 20px;}
	.main-test-area, .main-test-result{border-radius:20px;}
	.main-test-tit{width:160px;height:36px;line-height:36px;border-radius:0 0 20px 20px;font-size:18px;}
	.main-test-area{height:170px;padding:0;}
	.main-test-area ul{margin-top:14px;}
	.main-test-area li{font-size:16px;}
	.main-test-area li img{width:64px;}
	.main-test-result{margin-top:14px;padding:0 23px;}
	.main-test-result .img-wrap{margin:14px 0;}
}
@media screen and (max-width:414px) {
    .btn_box button {font-size:17px !important;}
    #ac_test_01 ul li.on:after {width: 12vw;height: 12vw;}
}