@font-face {
    font-family: '온글잎\ 의연체';
    src: url(../fonts/온글잎\ 의연체.ttf);
}





.default{display:none!important;}

/* 셀프테스트 탑 : test_top */
/*
.test_top {
    position: relative;
    border-bottom: 2px solid #222;
    padding: 10px 0;
}
.test_top .txt {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding-left: 130px;
}
.test_top .per {
    display: inline-block;
}
.test_top .circular-bar {
    margin: 0px;
    margin-top: 5px;
}
.test_top .circular-bar .circular-bar-chart canvas {
    width: 110px;
    height: 110px;
}
.test_top .circular-bar label {
    top: 38px;
}
.test_top .circular-bar .circular-bar-chart h4,
.test_top .circular-bar .circular-bar-chart h3 {
    display: inline-block;
    color: #aaa;
    letter-spacing: -0.03em;
}
.test_top .circular-bar .circular-bar-chart h3 {
    font-weight: 500;
}
.test_top .circular-bar .circular-bar-chart h4 {
    font-weight: 400;
    margin-left: 1px;
}
*/
#header .header-nav-main nav > ul > .navLi5 a{font-weight:700!important;}
#online_self_color{background:#FEDAF4;}

#online_self_color li ,#online_self_colorResult li{list-style:none;}
.self_color_visual{
    max-width:100%; height:240px;
     background:url(../img/selftest_0001.png)center center no-repeat; margin-bottom:30px;}


.self_color_area h1{font-family:'온글잎\ 의연체'!important; font-weight:500; 
text-align:center; color:#FF8181; margin-bottom:24px; font-size:4.5rem; line-height:3.4rem;}

.self_color_area .self_txt{font-family:'온글잎\ 의연체'!important; 
    width: 76.25%; margin:0 auto; text-align:center;
    font-size:2.8rem; line-height:2.7rem; color:#3A3A3A; margin-bottom:105px;}

.test_go{display:flex; justify-content: space-between;}

.test_go>div{width:430px; margin-bottom:53px;}
.testStart{width:410px;;height:115px;background:url(../img/testStart_arrow.svg)left no-repeat; background-color:#FF8181;
 border-radius:100px;margin-bottom:24px;}
.testStart a{display:block;width:410px;height:115px; text-align:center; font-family:'온글잎\ 의연체'!important; color:#fff;
line-height:121px; font-size:4.5rem; padding-left:30px;}


.testStartAI{width:410px;;height:115px;background:url(../img/testStartAI_arrow.svg)left no-repeat; background-color:#FF81C0;
    border-radius:100px;margin-bottom:24px;}
.testStartAI a{display:block;width:410px;height:115px; text-align:center; font-family:'온글잎\ 의연체'!important; color:#fff;
        line-height:121px; font-size:4.5rem; padding-left:30px;}

.test_txt{font-size:1.8rem; line-height:2.5rem; color:#3A3A3A}

.self_color_area h2{text-align:center;font-family:'온글잎\ 의연체'!important; font-weight:500; 
    margin-bottom:92px; font-size:4.5rem; line-height:3.4rem; }

.selfInput_name{width:410px; height:115px; margin:0 auto; font-family:'온글잎\ 의연체'!important;  margin-bottom:83px;}
.selfInput_name input{border:none;width:410px; height:115px; text-align:center; border-radius:100px; font-size:4.5rem; color:#3A3A3A }

.testNext{width:160px; margin:0 auto;height:57px; background:#FF8181;border-radius: 100px; margin-bottom:200px; }
.testNext a{display:block;width:160px;height:57px;font-size:2.8rem; line-height:57px;
    font-family:'온글잎\ 의연체'!important; color:#fff; text-align:center; }


.test_wrap {justify-content: center;display: flex;margin-bottom: 100px;align-items: end;}    
.testAssi{
   font-family:'온글잎\ 의연체'!important;
    font-size:3.2rem;line-height:3.4rem; color:#3A3A3A  }

    .test_wrap img{width:150px;}
.skin_self{width:66.42%; margin:0 auto; display:flex; justify-content: space-between;}
.skin_self_wrap p{font-family:'온글잎\ 의연체'!important;font-size:3.8rem; color:#3A3A3A; 
    padding-bottom:50px;}
.skin_self_wrap input[type="radio"]{display:none;}
.skin_self_wrap input[type="radio"] +label{display:block; width:70px; height:70px; 
    background:#fff; border-radius:100px; margin:0 auto 40px auto;
cursor:pointer;}
    .skin_self_wrap input[type="radio"]:checked +label{position:relative;width:70px; height:70px; background:#fff; }
    .skin_self_wrap input[type="radio"]:checked +label:after{
        content:''; border-radius:100px;top:15px; left:14px;
        position:absolute; width:60%; height:60%; background:#FF8181; }


    .testNext.next_100{margin-bottom:100px;}





    .pagination_self ul{display:flex; padding:0; width:63.74%; margin:0 auto 57px; }
.pagination_self li{width:50px; height:50px; 
    border:5px solid #C4C4C4;background:#E5E5E5; border-radius:100px;}

    .pagination_self li.active{background:#F4B5B5; border:5px solid #FF8181;}

    .pagination_self li+li{margin-left:24px;}

.test_loading{margin:350px 0 466px 0;}


/*AI자가진단*/

.ai_area{margin-top:130px;}
.ai_area_wrap{display:flex; margin-bottom:295px;}
.ai_text{margin-right:45px;}
.ai_text> div >  h2{font-family:'온글잎\ 의연체'!important;color:#FF8181; 
    font-size:4.5rem; margin-bottom:10px; padding-left:38px;}
.ai_text> div > p{font-size:1.8rem; color:#3A3A3A;line-height:2.9rem; padding-left:38px;}
.ai_sample_upload>p{font-family:'온글잎\ 의연체'!important;font-size:3.6rem; color:#3A3A3A;line-height:4rem;}

.ai_file_sample{display:flex;}
.ai_file_sample>div:first-child{margin-right:62px;}

.aiFile-upload{position:relative;}


.aiFile-edit input {display: none;}


.aiFile-edit input+ label {display: inline-block;text-align:center;color:#fff;line-height:48px;width: 300px;height: 48px;
    font-family:'온글잎\ 의연체'!important;font-size:2.8rem;font-weight:400;margin-bottom: 15px; 
    border-radius:100px;  background: #FD81C0;  cursor: pointer;}



.picture_guide{margin-bottom:56px;}
.picture_guide h3{font-family:'온글잎\ 의연체'!important;color:#FF8181; font-size:4.5rem; padding-top:30px;}
.ai_attention{font-family:'온글잎\ 의연체'!important; color:#3A3A3A; font-size:3.6rem; line-height:4rem;margin-bottom:0;}

.aiFile-preview {background:#fff;
    width: 300px;height: 300px; margin-bottom:20px;
    position: relative; border: 14px solid #fff;
}



.aiFile-preview> div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}


/* 진단 결과 */

.result_share{display:flex; justify-content: space-between; margin:20px 0 80px; }
.result_share button{display:block; width:310px; height:48px;border-radius:100px;
     color:#fff;border:none; font-size:3.2rem;font-family:'온글잎\ 의연체'!important; }
.ai_share button{ background:#FF8181; }
.ai_share button:first-child{margin-bottom:20px;}
.ai_share button span{margin-left:10px;}
.report_more button{background:#3A3A3A;}




.self_Result_product{background:#DFDAD4; padding-bottom:87px;}

.self_Result_product .recomm_title{padding-top:100px;}

.self_Result_product .recomm_title h5{font-weight:700;}
.type_more {width:420px; height:78px; margin:60px auto 0 auto; background:#FF8181;border-radius:100px;font-size:3.2rem;
    font-family:'온글잎\ 의연체'!important; line-height:78px; text-align:center;  }
.type_more a{display:inline-block; color:#fff;}
.online_share_Modal{display:none;}
.online_shareResult_Modal{display:none;}

.modal_nw{display:block;}
.modal_nw .c_wrp .sns_box .sns_area{opacity:1;}

/*----------------------------------------------------------------------------

                    온라인 자가진단 미디어 쿼리

---------------------------------------------------------------------------------*/
@media (max-width:1200px){
    .self_color_visual{max-width:400px; margin:20px auto 0 auto; width:100%; height:125px;background-size:cover!important;}

.self_color_area h1{font-size:3.5rem; margin:7px 0 0 0;}
.self_color_area .self_txt{font-size:2.4rem;width:78.4%; margin-bottom:33px;}
.test_go{display:block;}
.test_go>div{width:100%;margin-bottom: 60px}
.testStart ,.testStartAI {width: 262px;height: 74px;background-size:30%!important;
    margin:0 auto 24px auto;}

.testStart a ,.testStartAI a{width: 262px;height: 74px;line-height: 74px;font-size: 2.8rem;padding-left: 30px;}

.test_txt{font-size:1.6rem; text-align: center;}



.test_wrap.test_wrap_mobile{display:block; text-align:center;}
.test_wrap img{max-width:120px;}
.testAssi{font-size:1.6rem; line-height:1.8rem;}
.test_wrap.test_wrap_mobile .testAssi{font-size:3.2rem; line-height:3.2rem; margin-top:18px;}
.color_2{padding-top:60px;}
.self_color_area h2{margin-bottom:75px;}

.selfInput_name{width: 292px;height: 82px;}
.selfInput_name input {width: 292px;height: 82px;}

.testNext {width: 158px;height: 48px;line-height: 48px; margin-bottom:168px;}
.testNext a {width: 158px;height: 48px;line-height: 48px;}

.skin_self{width:100%;}
.skin_self_wrap p {text-align: center; padding-bottom:0; line-height:3.4rem;}


.skin_self_wrap input[type="radio"] +label {width: 60px;height: 60px;}
.skin_self_wrap input[type="radio"]:checked +label { width: 60px;height: 60px;}
.skin_self_wrap input[type="radio"]:checked +label:after {top: 12px;left: 12px;}

.pagination_self ul {width: 100%;justify-content: center;}
.pagination_self li { width: 27px;height: 27px;}
.pagination_self li+li { margin-left: 1.2%;}


.test_loading{margin: 114px 0 300px 0;}

/* AI 진단  */

.ai_area {margin-top: 33px;}
.ai_area_wrap{display:block; margin-bottom:60px;}
.ai_text {display:flex; margin-right:0; margin-bottom:35px;}
.ai_text>div>h2{font-size:3rem; padding-left:0;}
.ai_text>div>p{font-size: 1.3rem;line-height: 1.7rem; padding-left:0;}

.ai_sample_upload>p {font-size: 2.2rem;line-height: 2.4rem;}
.ai_file_sample{display:block;}
.ai_file_sample>div:first-child{margin-right:0;}
.aiFile-preview{margin:0 auto 20px auto;}
.aiFile-edit{text-align:center;}
.ai_sample_upload>p{text-align:center; font-size: 2.4rem;}

.ai_share button{margin-bottom:20px;}

.result_share{display:block;margin: 60px 0 80px;}

.type_more {width: 310px; height: 48px;margin: 40px auto 0 auto;font-size: 3.2rem;
    line-height: 48px; }


.self_Result_product .recomm_title{padding:40px 0 30px;}
.recomm_title h5{margin-bottom:0;}

.picture_guide h3{font-size:3rem; padding-top:30px;}
.ai_attention{font-size:2.4rem; line-height:3rem;margin-bottom:0;}

}