/* common */
.pc-view{display: block;}
.mo-view{display: none;}

/* landing */
#temperamentTest{position: relative; background:url('/resources/images/landing_bg.jpg') no-repeat; background-size: cover;}
#temperamentTest section > .inner{max-width: 1200px; width:100%;}
#temperamentTest .sec01{position: relative; padding:0 0 68px;}
#temperamentTest .sec01 .logo{text-align: center; padding:201px 0 0; margin:0;}
#temperamentTest .sec01 .logo img{width:830px;}

#temperamentTest .sec02{position: relative; font-family: 'cafeSsurround'; padding: 0 0 161px;}
#temperamentTest .sec02 .list__wrap01{padding:45px 0 0;}
#temperamentTest .sec02 .list__wrap01 li{position: relative; padding:78px 0 0;}
#temperamentTest .sec02 .list__wrap01 li:first-of-type{padding:0;}
#temperamentTest .sec02 .list__wrap01 li>*::before{content: ""; display: inline-block; position: absolute; top:8px; left: 0; width: 40px; height: 40px; background:url('/resources/images/list_img02.png') no-repeat; background-size: cover;}
#temperamentTest .sec02 .list__wrap01 li:first-of-type>*::before{background:url('/resources/images/list_img01.png') no-repeat; background-size: cover;}
#temperamentTest .sec02 .list__wrap01 li p{position: relative; color:#817f73; font-size:40px; line-height: 1.4; padding:0 0 0 60px; word-break: keep-all;}
#temperamentTest .sec02 .img__wrap{position: absolute; right:0; bottom:-161px;}

#temperamentTest .sec03{font-family: 'gmarketSans'; position: relative; width:100%; background:#ffdf40; padding:0 0 132px;}
#temperamentTest .sec03 .title__wrap{color:#3c3c3c; font-size: 40px; font-weight: 700; padding:124px 0 0;}
#temperamentTest .sec03 .input__wrap{position: relative; margin:26px 0 0;}
#temperamentTest .sec03 .input__wrap input{width:100%; height: 88px; background:#fff; color:#424242; font-size:28px; font-weight: 500; padding:0 300px 0  27px; border-radius: 13px;}
#temperamentTest .sec03 .input__wrap button{position: absolute; top: 0; right: 0; width: 261px; height: 88px; background: #3c3c3c; color: #fff; font-size:28px; font-weight: 700; text-align: center; border-radius: 13px; }


/* 개인정보 수집 및 이용 동의 작업 250207 */
.checkboxWrap{padding:18px 0 0;}
.checkboxWrap .checkbox__cont{display: flex; justify-content: space-between;}
.checkboxWrap .radio_wrap{display: flex; gap: 20px;}
.checkboxWrap .radio_wrap input[type=radio]{position: relative; top: -2px; margin: 0;}
.checkboxWrap .radio_wrap label{font-size: 16px; font-weight: 400; margin: 0;}
.checkboxWrap p{font-size: 18px; font-weight: 400; margin:0;}
.checkboxWrap #popBtn{font-size: 14px; line-height: 1;}

.pop__wrap .pop__box{width: 624px; background: #fff; position: absolute; left: 50%; top: 30%; transform: translate(-50%, -30%); padding: 0 0 40px 0; z-index: 999;}
.pop__wrap .pop__header{display: flex; align-items: center; justify-content: space-between; height: 70px; background: #3c3c3c; color: #fff; padding: 0 30px;}
.pop__wrap .pop__header h4{color:#fff; font-size:20px;}
.pop__wrap .pop__header .btn{padding: 0;}
.pop__wrap .pop__body{padding:25px 30px 0;}
.pop__wrap .pop__body .pop__inner{max-height: 260px; overflow-y: auto;}
.pop__wrap .pop__body li:first-of-type{margin:0;}
.pop__wrap .pop__body li{counter-increment: num01; color: #333333; margin: 27px 0 0 0;}
.pop__wrap .pop__body li .li__num{font-size:16px;}
.pop__wrap .pop__body li .li__num::before{content: counter(num01) "."; display: inline-block; font-size:16px; padding: 0 3px 0 0;}
.pop__wrap .pop__body li .li__txt{font-size:16px;}
.pop__wrap .pop__body p{font-size:16px; word-break: keep-all;}
.pop__wrap .pop__footer{text-align: center; margin: 39px 0 0;}
.pop__wrap .pop__footer .btn{min-width: 75px; background:#3c3c3c; color:#fff; font-size: 15px; padding: 9px 25px; border: none;}
/* 개인정보 수집 및 이용 동의 작업 250207 */



/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (min-width:768px) and (max-width:1024px) {
    /* landing */
    #temperamentTest{background: url(/resources/images/landing_bg_none.jpg) no-repeat;}
    #temperamentTest section > .inner{width:92%;}
    #temperamentTest .sec01{padding:0 0 108px;}
    #temperamentTest .sec01 .logo{padding:171px 0 0;}
    #temperamentTest .sec01 .logo img{width: 100%;}

    #temperamentTest .sec02{padding: 0 0 90px;}
    #temperamentTest .sec02 .list__wrap01 li>*::before{width:40px; height:40px;}
    #temperamentTest .sec02 .list__wrap01 li p{font-size:36px; padding:0 0 0 55px;}
    #temperamentTest .sec02 .img__wrap{display: none;}

    #temperamentTest .sec03{padding:0 0 102px;}
    #temperamentTest .sec03 .title__wrap{font-size: 46px; padding: 74px 0 0;}
    #temperamentTest .sec03 .input__wrap input{height: 88px; font-size:32px; padding: 0 300px 0 27px; border-radius: 8px;}
    #temperamentTest .sec03 .input__wrap button{width:251px; height: 88px; font-size:32px; border-radius: 8px;}
} 

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    /* common */
    .pc-view{display: none;}
    .mo-view{display: block;}

    /* landing */
    #temperamentTest{background: url(/resources/images/landing_bg_none.jpg) no-repeat;}
    #temperamentTest section > .inner{position: unset; width:92%;}
    #temperamentTest .sec01{padding:0 0 20px;}
    #temperamentTest .sec01 .logo{padding: 51px 0 0;}
    #temperamentTest .sec01 .logo img{width: 100%;}

    #temperamentTest .sec02{position: unset; padding:0 0 51px;}
    #temperamentTest .sec02 .list__wrap01 li{padding:16px 0 0;}
    #temperamentTest .sec02 .list__wrap01 li>*::before{top:3px; width:14px; height:14px;}
    #temperamentTest .sec02 .list__wrap01 li p{font-size:16px; padding:0 0 0 20px;}
    #temperamentTest .sec02 .img__wrap{right: 50%; bottom:0; transform: translateX(50%); z-index: 1;}
    #temperamentTest .sec02 .img__wrap img{width:160px;}

    #temperamentTest .sec03{padding:0 0 322px;}
    #temperamentTest .sec03 .title__wrap{font-size:26px; padding:64px 0 0;}
    #temperamentTest .sec03 .input__wrap{margin:16px 0 0;}
    #temperamentTest .sec03 .input__wrap input{height: 48px; font-size: 16px; padding: 0 120px 0 10px; border-radius: 4px;}
    #temperamentTest .sec03 .input__wrap button{width:100px; height: 48px; font-size:16px; border-radius: 4px;}

    /* 개인정보 수집 및 이용 동의 작업 250207 */
    .checkboxWrap p{font-size: 16px;}
    .checkboxWrap #popBtn{font-size: 11px;}
    .checkboxWrap .checkbox__cont{flex-direction: column; gap: 10px;}
    .checkboxWrap .radio_wrap label{font-size: 14px;}
    .pop__wrap .pop__box{width: 92%; margin:0 auto;}
    .pop__wrap .pop__header h4{font-size:16px;}
    .pop__wrap .pop__header .btn{padding: 0;}
    .pop__wrap .pop__body{padding:25px 30px 0;}
    .pop__wrap .pop__body li:first-of-type{margin:0;}
    .pop__wrap .pop__body li{counter-increment: num01; color: #333333; margin: 27px 0 0 0;}
    .pop__wrap .pop__body li .li__num{font-size:12px;}
    .pop__wrap .pop__body li .li__num::before{content: counter(num01) "."; display: inline-block; font-size:12px; padding: 0 3px 0 0;}
    .pop__wrap .pop__body li .li__txt{font-size:12px;}
    .pop__wrap .pop__body p{font-size:12px;}
    .pop__wrap .pop__footer{text-align: center; margin: 39px 0 0;}
    .pop__wrap .pop__footer .btn{min-width: 75px; background:#3c3c3c; color:#fff; font-size: 15px; padding: 9px 25px; border: none;}
    /* 개인정보 수집 및 이용 동의 작업 250207 */
}



/* landing */
#multiintTest{position: relative; background:url('/resources/images/multi_landing_bg.jpg') no-repeat; background-size: cover;}
#multiintTest section > .inner{max-width: 1200px; width:100%;}
#multiintTest .sec01{position: relative; padding:0 0 68px;}
#multiintTest .sec01 .logo{text-align: center; padding:201px 0 0; margin:0;}
#multiintTest .sec01 .logo img{width:830px;}

#multiintTest .sec02{position: relative; font-family: 'cafeSsurround'; padding: 0 0 161px;}
#multiintTest .sec02 .list__wrap01{padding:45px 0 0;}
#multiintTest .sec02 .list__wrap01 li{position: relative; padding:78px 0 0;}
#multiintTest .sec02 .list__wrap01 li:first-of-type{padding:0;}
#multiintTest .sec02 .list__wrap01 li>*::before{content: ""; display: inline-block; position: absolute; top:8px; left: 0; width: 40px; height: 40px; background:url('/resources/images/multi_list_img02.png') no-repeat; background-size: cover;}
#multiintTest .sec02 .list__wrap01 li:first-of-type>*::before{background:url('/resources/images/multi_list_img01.png') no-repeat; background-size: cover;}
#multiintTest .sec02 .list__wrap01 li:last-of-type>*::before{background:url('/resources/images/multi_list_img03.png') no-repeat; background-size: cover;}
#multiintTest .sec02 .list__wrap01 li p{position: relative; color:#3c3c3c; font-size:40px; line-height: 1.4; padding:0 0 0 60px; word-break: keep-all;}
#multiintTest .sec02 .img__wrap{position: absolute; right:0; bottom:-161px;}

#multiintTest .sec03{font-family: 'gmarketSans'; position: relative; width:100%; background:#91c0c1; padding:0 0 132px;}
#multiintTest .sec03 .title__wrap{color:#ffffff; font-size: 40px; font-weight: 700; padding:124px 0 0;}
#multiintTest .sec03 .input__wrap{position: relative; margin:26px 0 0;}
#multiintTest .sec03 .input__wrap input{width:100%; height: 88px; background:#fff; color:#424242; font-size:28px; font-weight: 500; padding:0 300px 0  27px; border-radius: 13px;}
#multiintTest .sec03 .input__wrap button{position: absolute; top: 0; right: 0; width: 261px; height: 88px; background: #3c3c3c; color: #fff; font-size:28px; font-weight: 700; text-align: center; border-radius: 13px; }




@media all and (min-width:768px) and (max-width:1024px) {
    /* landing */
    #multiintTest{background: url('/resources/images/multi_landing_bg_none.jpg') no-repeat;}
    #multiintTest section > .inner{width:92%;}
    #multiintTest .sec01{padding:0 0 108px;}
    #multiintTest .sec01 .logo{padding:171px 0 0}
    #multiintTest .sec01 .logo img{width: 100%;}

    #multiintTest .sec02{padding: 0 0 90px;}
    #multiintTest .sec02 .list__wrap01 li>*::before{width:40px; height:40px;}
    #multiintTest .sec02 .list__wrap01 li p{font-size:36px; padding:0 0 0 55px;}
    #multiintTest .sec02 .img__wrap{display: none;}

    #multiintTest .sec03{padding:0 0 102px;}
    #multiintTest .sec03 .title__wrap{font-size: 46px; padding: 74px 0 0;}
    #multiintTest .sec03 .input__wrap input{height: 88px; font-size:32px; padding: 0 300px 0 27px; border-radius: 8px;}
    #multiintTest .sec03 .input__wrap button{width:251px; height: 88px; font-size:32px; border-radius: 8px;}
}

@media all and (max-width:767px) {

    /* landing */
    #multiintTest{background: url('/resources/images/multi_landing_bg_none.jpg') no-repeat;}
    #multiintTest section > .inner{position: unset; width:92%;}
    #multiintTest .sec01{padding:0 0 20px;}
    #multiintTest .sec01 .logo{padding: 51px 0 0;}
    #multiintTest .sec01 .logo img{width: 100%;}

    #multiintTest .sec02{position: unset; padding:0 0 51px;}
    #multiintTest .sec02 .list__wrap01 li{padding:16px 0 0;}
    #multiintTest .sec02 .list__wrap01 li>*::before{top:3px; width:14px; height:14px;}
    #multiintTest .sec02 .list__wrap01 li p{font-size:16px; padding:0 0 0 20px;}
    #multiintTest .sec02 .img__wrap{right: 50%; bottom:0; transform: translateX(50%); z-index: 1;}
    #multiintTest .sec02 .img__wrap img{width:160px;}

    #multiintTest .sec03{padding:0 0 322px;}
    #multiintTest .sec03 .title__wrap{font-size:26px; padding:64px 0 0;}
    #multiintTest .sec03 .input__wrap{margin:16px 0 0;}
    #multiintTest .sec03 .input__wrap input{height: 48px; font-size: 16px; padding: 0 120px 0 10px; border-radius: 4px;}
    #multiintTest .sec03 .input__wrap button{width:100px; height: 48px; font-size:16px; border-radius: 4px;}
}