/* ai-box */
.ai-box {padding:0 15px; background:url('/user/images/bg_ai.png') no-repeat center / cover; min-height:100vh; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center;}
.ai-box .ai-inner-box {backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);  width:100%; padding:40px; width:100%; max-width:1024px; margin:0 auto; border-radius:24px; border:1px solid #a88cd1; background:rgba(255,255,255,0.3); box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.05);}
.ai-box.sub {background-image:url('/user/images/bg_ai_sub.png');}
@media (max-width:991px){
.ai-box {padding:35px 15px;}
.ai-box .ai-inner-box {padding:24px 15px; border-radius:10px;}
}

/* ai-intro-box */
.ai-intro-box {padding:60px 0; width:100%;}
.ai-intro-box .intro-head h2 {text-align:center; font-size:42px; font-weight:700; color:#25005f;}
.ai-intro-box .intro-head p {text-align:center; margin:30px 0 0; font-size:28px; font-weight:600; color:#2d3552;}
.ai-intro-box .intro-body {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; /* margin-top:25%; */ margin-top:5%;}
.ai-intro-box .intro-body a {padding:24px 48px; border-radius:999px; background:#6a5cf9; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.20); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center;}
.ai-intro-box .intro-body a strong {width:100%; text-align:center; font-size:28px; font-weight:700; color:#fff;}
.ai-intro-box .intro-body a p {width:100%; text-align:center; margin:5px 0 0; font-size:24px; font-weight:600; color:#fff;}
@media (max-width:991px){
.ai-intro-box {padding:30px 0;}
.ai-intro-box .intro-head h2 {font-size:30px;}
.ai-intro-box .intro-head p {margin:15px 0 0; font-size:20px;}
.ai-intro-box .intro-body a {padding:20px 40px;}
.ai-intro-box .intro-body a strong {font-size:20px;}
.ai-intro-box .intro-body a p {font-size:16px;}
}
@media (max-width:500px){
.ai-intro-box .intro-head h2 {font-size:25px;}
.ai-intro-box .intro-head p {margin:10px 0 0; font-size:15px;}
.ai-intro-box .intro-body  {margin-top:15%;}
.ai-intro-box .intro-body a {padding:20px 40px;}
.ai-intro-box .intro-body a strong {font-size:15px;}
.ai-intro-box .intro-body a p {font-size:14px;}
}

/* ai-title-box */
.ai-title-box h2 {text-align:center; font-size:24px; font-weight:600; color:#6a5cf9;}
.ai-title-box p {text-align:center; margin:20px 0 0; font-size:16px; font-weight:600; line-height:1.3; color:#2d3552;} 
@media (max-width:991px){
.ai-title-box h2 {font-size:20px;}
.ai-title-box p {margin:15px 0 0;}
}
@media (max-width:500px){
.ai-title-box h2 {font-size:18px;}
.ai-title-box p {margin:10px 0 0; font-size:14px;}
}

/* ai-button-box */
.ai-button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.ai-button-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:12px 48px; border-radius:999px; font-size:16px; font-weight:600;}
.ai-button-box a.btn.shadow {box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.20);}
.ai-button-box a.btn-active {color:#fff; background:#6a5cf9;}
.ai-button-box a.btn-gray {background:#afaeb4; color:#fff;}

.ai-button-box button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:12px 48px; border-radius:999px; font-size:16px; font-weight:600;}
.ai-button-box button.btn.shadow {box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.20);}
.ai-button-box button.btn-active {color:#fff; background:#6a5cf9;}
.ai-button-box button.btn-gray {background:#afaeb4; color:#fff;}

@media (max-width:500px){
    .ai-button-box a.btn {font-size:14px;}
    .ai-button-box button.btn {font-size:14px;}
}

/* ai-question-box */
.ai-question-box {background:#fff; border-radius:12px; box-shadow:0 4px 10px 0 rgba(0,0,0,0.05); padding:40px;}
.ai-question-box .qest-head h3 {border-bottom:1px solid #afaeb4; padding:0 0 12px; font-size:18px; font-weight:600; color:#2d3552;}
.ai-question-box .qest-body {padding:24px 12px;}
@media (max-width:991px){
.ai-question-box {padding:25px;}   
.ai-question-box .qest-body {padding:24px 0;}
}
@media (max-width:500px){
.ai-question-box {padding:25px 15px;}
.ai-question-box .qest-head h3 {font-size:15px;}
}

/* ai-check-box */
.ai-check-box {position:relative; overflow:hidden; margin-top: .5rem!important;}
.ai-check-box input {cursor:pointer; position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;}
.ai-check-box label {display:flex; flex-wrap:wrap;}
.ai-check-box label p {flex:1; min-width:0; font-size:16px; line-height:1.5; color:#666; word-break:keep-all;}
.ai-check-box label:before {display:inline-block; content:""; width:24px; height:24px; margin-right:12px; background:url('/user/images/icon_ai_radio.png') no-repeat center / cover;}
.ai-check-box input:checked ~ label p {color:#333;}
.ai-check-box input:checked ~ label:before {background-image:url('/user/images/icon_ai_radio_on.png');}
@media (max-width:991px){
.ai-check-box label:before {width:20px; height:20px; margin-right:7px; margin-top:2px;}
}
@media (max-width:500px){
.ai-check-box label p {font-size:13px;}
.ai-check-box label:before {width:18px; height:18px; margin-right:5px; margin-top:0.5px;}
}

/* ai-table-box */
.ai-table-box {overflow-x:auto; white-space:nowrap;}
.ai-table-box table {table-layout:auto; width:100%;}
.ai-table-box table thead tr th {border:1px solid #d9d9d9; border-width:1px 0; background:rgba(217,217,217,0.5); padding:10px 5px; text-align:center; font-size:14px; color:#666;}
.ai-table-box table tbody tr td {border-bottom:1px solid #d9d9d9; padding:10px 5px; text-align:center; font-size:14px; color:#666;}
@media (max-width:500px){
.ai-table-box {margin:0 -15px;}
.ai-table-box table {padding:0 10px;}
.ai-table-box table thead tr th {font-size:13px;}
.ai-table-box table tbody tr td {font-size:13px;}
}

/* ai-mbti-box */
.ai-mbti-box ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
.ai-mbti-box ul li {width:calc(33.33% - 10px);}
.ai-mbti-box ul li .list-head strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:rgba(102, 102, 102, 0.50); padding:10px 0; font-size:20px; font-weight:600; color:#fff;}
.ai-mbti-box ul li .list-body .list-body-table strong {display:block; margin:10px 0 5px; font-size:16px; font-weight:600; color:#2d3552;}
.ai-mbti-box ul li .list-body .list-body-table table {min-height:54px; table-layout:fixed; width:100%; border-top:1px solid rgba(217, 217, 217, 0.50);}
.ai-mbti-box ul li .list-body .list-body-table table tr th {border-bottom:1px solid rgba(217, 217, 217, 0.50); background:rgba(217, 217, 217, 0.50); text-align:center; padding:5px 0; font-size:16px; font-weight:600; color:#666;}
.ai-mbti-box ul li .list-body .list-body-table table tr td {border-bottom:1px solid rgba(217, 217, 217, 0.50); font-size:16px; font-weight:600; color:#666; text-align:center; padding:5px 0;}
.ai-mbti-box ul li .list-body .list-body-info {margin:20px 0 0;}
.ai-mbti-box ul li .list-body .list-body-info strong {display:block; font-size:16px; color:#666; margin:0 0 12px;}
.ai-mbti-box ul li .list-body .list-body-info dl dd {margin:0 0 12px;}
.ai-mbti-box ul li .list-body .list-body-info dl dd:last-of-type {margin:0;}
.ai-mbti-box ul li .list-body .list-body-info dl dd b {display:block; font-size:16px; font-weight:600; line-height:1.3; color:#2d3552;}
.ai-mbti-box ul li .list-body .list-body-info dl dd p {font-size:14px; color:#2d3552; line-height:1.3; word-break:keep-all;}
.ai-mbti-box ul li .list-body .list-body-chart {border:1px solid #D9D9D9; border-width:1px 0; margin:10px 0 0;}
.ai-mbti-box ul li .list-body .list-body-form form {border-top:1px solid #d9d9d9;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group {display:flex; flex-wrap:wrap; border-bottom:1px solid #d9d9d9;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-title {width:150px; padding:13px 0; background:rgba(217,217,217,0.5); display:flex; flex-wrap:wrap; align-items:center;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-title p {width:100%; font-size:14px; font-weight:600; color:#666; text-align:center;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-content {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; padding:10px;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-content p {padding:0 10px; font-size:14px; font-weight:600; color:#666;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-content select {display:block; width:100%; background:transparent url('/user/images/icon_ai_select.png') no-repeat calc(100% - 10px) center / 24px; height:40px; border-radius:4px; border:1px solid #d9d9d9; font-size:14px; font-weight:600; color:#666; padding:0 40px 0 12px;}
.ai-mbti-box ul li .list-body .list-body-user {margin:15px 0 0;}
.ai-mbti-box ul li .list-body .list-body-user dl dd {margin:0 0 15px;}
.ai-mbti-box ul li .list-body .list-body-user dl dd:last-of-type {margin:0;}
.ai-mbti-box ul li .list-body .list-body-user dl dd b {display:block; font-size:16px; color:#666;}
.ai-mbti-box ul li .list-body .list-body-user dl dd p {font-size:16px; font-weight:600; color:#2d3552; margin:10px 0 0;}
.ai-mbti-box ul.half li {width:calc(50% - 10px);}
@media (max-width:991px){
.ai-mbti-box ul li .list-head strong {font-size:16px;}
.ai-mbti-box ul li .list-body .list-body-table strong {font-size:14px;}
.ai-mbti-box ul li .list-body .list-body-table table tr th {font-size:14px;}
.ai-mbti-box ul li .list-body .list-body-table table tr td {font-size:14px;}
.ai-mbti-box ul li .list-body .list-body-info strong {font-size:14px;}
.ai-mbti-box ul li .list-body .list-body-info dl dd b {font-size:14px;}
.ai-mbti-box ul li .list-body .list-body-info dl dd p {font-size:13px;}
}
@media (max-width:767px){
.ai-mbti-box ul li {width:100%; margin:0 0 40px;}
.ai-mbti-box ul li:last-of-type {margin:0;}
.ai-mbti-box ul li .list-body .list-body-table table {min-height:auto;}	 
.ai-mbti-box ul.half li {width:100%;}
}
@media (max-width:500px){
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-title {width:90px;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-title p {font-size:13px;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-content p {font-size:13px;}
.ai-mbti-box ul li .list-body .list-body-form form .form-group .form-content select {font-size:13px;}
.ai-mbti-box ul li .list-body .list-body-user dl dd b {font-size:15px;}
.ai-mbti-box ul li .list-body .list-body-user dl dd p {font-size:15px;}
}