@charset "utf-8";
/* CSS Document ddddddd*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

html,body{height:100%;}
*{margin:0; padding:0; box-sizing:border-box;}
li{list-style:none;}
iframe{border:0;}
a{text-decoration:none; color:inherit; outline:0;}
img{image-rendering:auto;}
input, textarea, select{font-family:'Suit'; font-weight:400; border:0; outline:0; background:none;}
body{font-family:'Suit'; font-weight:400; line-height:1;}
.body_bg{background:url(../images/bg_1.png); background-size:24px; background-color:#e2eaff;}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder{color:transparent;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder{color:transparent;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder{color:transparent;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder{color:transparent;}

body::-webkit-scrollbar{width:4px; height:4px;}
body::-webkit-scrollbar-track{ background-color:rgba(0,0,0,0.1);}
body::-webkit-scrollbar-thumb{border-radius:3px; background-color:rgba(0,0,0,0.5);}
body::-webkit-scrollbar-button{width:0; height:0;}

/* 공통사항 */
.btn_center{display:flex; justify-content:center; padding-top:25px;}

.input_1{border:1px solid #4F7CFF; background-color:#fff; border-radius:12px; height:42px; text-align:center;}
.input_1::placeholder{color:#9FA0A0;}
.input_2{width:100%; border:1px solid #4F7CFF; background-color:#fff; border-radius:12px; height:34px; text-align:left; padding:0 15px;}
.input_2::placeholder{color:#9FA0A0;}
.select_1{border:1px solid #4F7CFF; background-color:#fff; border-radius:12px; height:34px; text-align:left; padding:0 15px;}

.btn_1{display:flex; justify-content:center; align-items:center; background-color:#aaa; color:#fff; width:120px; height:40px; font-size:19px; font-weight:600; border-radius:30px; transition:0.2s;}
.btn_1:hover{background-color:#555;}
.btn_1:active{background-color:#555;}

.btn_2{display:flex; justify-content:center; align-items:center; background-color:#f93b1d; color:#fff; width:120px; height:40px; font-size:19px; font-weight:600; border-radius:30px; transition:0.2s;}
.btn_2:hover{background-color:#2a3d71;}
.btn_2:active{background-color:#2a3d71;}

/** 라디오박스 **/
.radio_input{display:none;}
.radio_label{cursor:pointer; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.radio_bullet{width:20px; height:20px; background:url(../images/check_0.png) no-repeat center; background-size:86%; margin-right:12px; border:1px solid #9FA0A0; border-radius:8px; transition:0.2s;}
.radio_input:checked + .radio_bullet{background-image:url(../images/check_2.png);}

/** 체크박스 **/
.check_input{display:none;}
.check_label{cursor:pointer; display:flex;}
.check_bullet{width:18px; height:18px; background-color:#fff; background-size:cover; border:1px solid #666; border-radius:4px;}
.check_input:checked + .check_bullet{background-image:url(../images/check_2.png);}

/* 헤더 */
header{background-color:#fff; box-shadow:0 1px 6px 1px rgba(0,0,0,0.05); position:fixed; left:0; top:0; width:100%; height:50px; z-index:100;}
.header_logo{width:80px; display:block; margin:0 auto;}



/* 퀴즈 */
.test_container{padding:70px 3% 0 3%; height:calc(100% - 70px); margin:0 auto; max-width:1024px;}

.test_container::-webkit-scrollbar{width:4px; height:4px;}
.test_container::-webkit-scrollbar-track{ background-color:rgba(0,0,0,0.1);}
.test_container::-webkit-scrollbar-thumb{border-radius:3px; background-color:rgba(0,0,0,0.5);}
.test_container::-webkit-scrollbar-button{width:0; height:0;}

.pg_area{display:flex; justify-content:space-between; font-size:14px; font-weight:600; color:#666;}
.pg_page{color:#2a3d71; font-weight:700; margin-bottom:12px; padding:0 1px;}
.pg_box{overflow:hidden; background-color:#ddd; height:6px; border-radius:10px;}
.pg_bar{background-color:#444; height:100%; border-radius:8px;}

.test_wrap{padding:40px 0 0 0; height:calc(100% - 35px); overflow:auto;}

.q_wrap{display:flex; line-height:1.4; font-size:20px;}
.q_num{margin-right:10px; font-weight:900;}
.q_area{font-weight:600;}

.c_wrap{padding:10% 1% 0 1%; line-height:1.4; font-size:15px; display:flex;}
.c_area{width:20%; font-weight:500; cursor:pointer;}
.c_radio{display:none;}
.c_circle{width:30px; height:30px; border-radius:50%; background-color:#fff; border:2px solid #333; display:block; margin:0 auto;}
.c_num{width:28px; height:28px; border-radius:50%; display:flex; justify-content:center; align-items:center; background-color:#fff; border:1px solid #000; font-size:0.9em; box-shadow:0 1px 1px 1px rgba(0,0,0,0.25);}
.c_box{text-align:center; line-height:1.4; padding-top:10px;}
.c_radio:checked ~ .c_circle{background-color:#333; border-color:#333;}
.c_radio:checked ~ .c_num{background-color:#2a3d71; border-color:#2a3d71; color:#fff;}

.test_btns{display:flex; justify-content:space-between; position:fixed; left:0; bottom:0; width:100%; padding:0 3% 15px 3%;}

@media all and (min-width:640px){ 
    .pg_area{font-size:15px;}
    .pg_box{height:8px;}
    
    .q_wrap{font-size:21px;}
    .c_wrap{font-size:17px;}
    .c_circle{width:36px; height:36px;}
    .c_box{padding-top:15px;}
    .c_box div{display:inline;}
}
@media all and (min-width:1024px){ 
    .header_logo{width:100px;}
    
    .test_container{padding-top:80px; height:calc(100% - 90px);}
    
    .pg_area{font-size:16px;}
    
    .q_wrap{font-size:25px;}
    .c_wrap{font-size:22px; padding:11% 2% 0 2%;}
    .c_circle{width:40px; height:40px; border-width:3px;}
    .c_num{width:36px; height:36px;}
    .c_box{padding-top:20px;}
    
    .test_btns{left:calc(50% - 512px); width:1024px; padding:0 3% 20px 3%;}
    .btn_1, .btn_2{width:140px; height:46px; font-size:23px;}
}