@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #CF2E41;
    --black-color : #222;
    --white-color : #fff
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--main-color); color:#fff; }


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */

/* .questionnaire */
.questionnaire{ font-weight: 500; font-size: 16px; display: flex; justify-content: center; flex-direction: column; margin: 0 auto; max-width: 1024px; min-height: 100vh; width: 100%; padding: 30px; overflow: hidden; background-color: #FFF2CC; width: 100%; border: 18px solid #FF998E; }
@media screen and (max-width: 1340px) { 
    /* .questionnaire{ min-height: unset; } */
    .questionnaire{ border-width: 2vw; padding: 2em; font-size: 1.6vw;}
}

/* .step-list */
.step-list > li{ display: none; }
.step-list > li.show{ display: block; }

/* .questionnaire.cover  */
.questionnaire .space-div{ display: flex; align-items: flex-start; justify-content: space-between; }
.questionnaire .space-div.align-center{ margin-top: 2em; align-items: center; }
.questionnaire .space-div.align-end{ align-items: flex-end; }
.questionnaire .space-div .btn-wrap{ justify-content: flex-end; width: 100%; display: flex; align-items: center; gap: .5em; }
.questionnaire .space-div.right{ justify-content: flex-end; }
.questionnaire.cover .number-table{ width: 100%; max-width: 9em; text-align: center; border: 1px solid #222; }
.questionnaire.cover .number-table .table-title{ padding: .4em 1.1em; font-size: .9em; border-bottom: 1px solid #222; background-color: #C2C2C2; }
.questionnaire.cover .number-table .table-content{ font-size: .9em; background-color: #fff; padding: .5em 1.1em; }
.questionnaire .love-berry{ width: 9em; }
.questionnaire.cover .cover-section{ text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-grow: 1; }
.questionnaire.cover .cover-section .t1{ text-align: center; font-size: 1.5em;  }
.questionnaire.cover .cover-section .t1 b{ font-size: 1.25em; font-weight: 700; }
.questionnaire.cover .cover-section .t1 b.red{ color:#C40A09; }
.questionnaire.cover .cover-section h1{ font-family: 'Paperlogy'; font-weight: 700; margin: .2em auto; max-width: 80%; padding: .2em .3em; font-size: 7em; border-top: .05em solid #C40A09; border-bottom: .05em solid #C40A09; }
.questionnaire.cover .cover-section h1 .red{ color: #C40A09; }
.questionnaire.cover .cover-section .char{ width: 23em; margin-top: 3em; }
.questionnaire .space-div .logo{ width: 13em; }
.questionnaire .space-div .pn-btn{ font-size: 1.35em; padding: .5em .5em; width: 100%; max-width: 10em; border-radius: .3em; border: none; background-color: #C40A09; color: #fff; font-weight: 700; }
.questionnaire .space-div .pn-btn.prev-btn{ max-width: 7em; background-color: #7F7F7F; }
/* .questionnaire .content-section */
.questionnaire .content-section{ margin-top: 1.4em; flex-grow: 1; display: flex; justify-content: flex-start; flex-direction: column; }

/* .questionnaire.agree */
.questionnaire.agree .white-wrap{ margin-top: .5em; background-color: #fff; border-radius: .5em; overflow: hidden;  }
.questionnaire.agree .white-wrap .agree-title{ padding: 1em; text-align: center; font-weight: 700; font-size: 1.25em; background-color: #FEC169; }
.questionnaire.agree .white-wrap .content-arti{ padding: 0 2em 2em 2em; }
.questionnaire.agree .white-wrap .gray-bg{ word-break: keep-all; font-size: 1.1em; line-height: 1.5em; vertical-align: bottom; border-radius: 1.2em; padding: 1em; background-color: #F5F5F5; margin-top: 1em; }
.questionnaire.agree .white-wrap .title-div{ margin-top: 1em; font-weight: 700; font-size: 1.2em; }
.questionnaire.agree .white-wrap .title-div .icon{ width: 3.5em; }
.questionnaire.agree .white-wrap .collection-table{ border-top: 2px solid #222222; margin-top: .5em;  }
.questionnaire.agree .white-wrap .collection-table > li{ display: flex; background-color: #FFF2CC; border-bottom: 1px solid #D9D9D9; }
.questionnaire.agree .white-wrap .collection-table .box{ gap: .4em; padding:.5em 0; width: calc(100% / 5); text-align: center; font-size: 1em; display: flex; align-items: center; justify-content: center; flex-grow: 1;  }
.questionnaire.agree .white-wrap .collection-table .box:nth-child(1){ flex-grow: unset; width: 5em; flex-shrink: 0; }
.questionnaire.agree .white-wrap .collection-table .box + .box{ border-left: 1px solid #D9D9D9; }
.questionnaire.agree .white-wrap .collection-table .box .icon{ max-width: 4em; }
.questionnaire.agree .white-wrap .agree-div{ display: flex; align-items: center; justify-content: flex-end; gap: 1em; margin-top: .5em; }
.questionnaire.agree .white-wrap .agree-div p{ font-size: 1.15em; }
.questionnaire.agree .white-wrap .agree-div .bar{ width: 1px; height: 1.25em; background-color: #D9D9D9; }
.questionnaire.agree .white-wrap .agree-div input[type="radio"]{ display: none; }
.questionnaire.agree .white-wrap .agree-div input[type="radio"] + .text{ display: flex; align-items: center; gap: .5em; }
.questionnaire.agree .white-wrap .agree-div input[type="radio"] + .text::before{ content:''; display: block; border: 2px solid #D9D9D9; flex-shrink: 0; width: 1.5em; height: 1.5em; }
.questionnaire.agree .white-wrap .agree-div input[type="radio"]:checked + .text::before{ background-color: #C40A09; border-color: #C40A09; background-image: url('../img/agree/check-icon.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.questionnaire.agree .white-wrap .agree-div input[type="radio"] + .text img{ width: 1.5em; }
.questionnaire.agree .white-wrap .gray-list{ padding: .5em 0; border-top: 2px solid #222; margin-top: .5em; background-color: #F5F5F5; }
.questionnaire.agree .white-wrap .gray-list .dash{ padding: .5em 2em; position: relative; }
.questionnaire.agree .white-wrap .gray-list .dash::before{ content:'-'; position: absolute; padding: 0 2em; left: -1em; top: 0; }
.questionnaire.agree .white-wrap .gray-list2{ padding: .5em 0; padding-bottom: 0; border-top: 2px solid #222; margin-top: .5em; background-color: #F5F5F5; }
.questionnaire.agree .white-wrap .gray-list2 .dash{ border-bottom: 1px solid #D9D9D9; padding: .5em 1em; position: relative; display: flex; align-items: center; gap: 1em; }
.questionnaire.agree .white-wrap .gray-list2 .dash .img-wrap{ display: flex; justify-content: center; width: 5em; flex-shrink: 0; }
.questionnaire.agree .white-wrap .gray-list2 .dash .img-wrap .icon{ max-height: 3em; }
.questionnaire.agree .white-wrap .gray-list2 .dash .blue{ color: #2C54BD; font-size: 1.3em; }
.questionnaire.agree .white-wrap .gray-list2 .dash .underline{ text-decoration: underline; }
.questionnaire.agree .information-list{ background-color: #F5F5F5; margin-top: .5em; border-top: 2px solid #222; }
.questionnaire.agree .information-list > li{ display: flex; border-bottom: 1px solid #D9D9D9; }
.questionnaire.agree .information-list .box{ line-height: 1.5em; text-align: center; font-size: 1em; width: calc(100% / 4); display: flex; padding: 1em .5em; align-items: center; justify-content: center; gap: 1em; }
.questionnaire.agree .information-list .box + .box{ border-left: 1px solid #D9D9D9; }
.questionnaire.agree .information-list .box .icon{ width: 4.2em; }
.questionnaire.agree .information-list .box b{ font-weight: 700; }
.questionnaire.agree .information-list .box .blue{ color: #2C54BD; }
.questionnaire.agree .information-list .box .small{ font-size: .8em; line-height:.6em; color: #7F7F7F; }
.questionnaire.agree .center-text{ text-align: center; margin-top: 1em; line-height: 1.5em; font-size: 1.2em; }
.questionnaire.agree .center-text b{ font-weight: 700; }
.questionnaire.agree .center-text .red{ color: #C40A09; }
.questionnaire.agree .date{ text-align: center; margin-top: 1em; font-size: 1.2em;  }

.questionnaire.agree .parent-div{ margin-top: 1em; display: flex; align-items: center; justify-content: space-between; }
.questionnaire.agree .parent-div .check-div{ display: flex; align-items: center; gap: 2em; }
.questionnaire.agree .parent-div .check-div label{ display: flex; }
.questionnaire.agree .parent-div .check-div label input[type="radio"]{ display: none; }
.questionnaire.agree .parent-div .check-div label input[type="radio"] + .text{ font-size: 1.4em; display: flex; align-items: center; gap: .2em; }
.questionnaire.agree .parent-div .check-div label input[type="radio"] + .text::before{ content:''; display: block; width: 1em; height: 1em; background-color: #fff; border: 1px solid #D9D9D9; }
.questionnaire.agree .parent-div .check-div label input[type="radio"]:checked + .text::before{ background-image: url('../img/agree/check-icon.jpg'); background-size: cover; border-color: #C40A09; }
.questionnaire.agree .parent-div .check-div label input[type="radio"] + .text img{ max-height: 1.4em; }
.questionnaire.agree .parent-div .name-box{ display: flex; flex-direction: column; align-items: flex-end; }
.questionnaire.agree .parent-div .name-box .name-wrap{ display: flex; align-items: center; gap: .4em;  }
.questionnaire.agree .parent-div .name-box .name-wrap .inpt{ border: 1px solid #222; border-radius: .4em; padding: 1em; min-width: 18em; font-size: 1.2em; }
.questionnaire.agree .parent-div .name-box .name-wrap .inpt::placeholder{ color: #999; }
.questionnaire.agree .parent-div .label{ font-size: .9em; margin-top: .5em; display: flex; align-items: center; gap: .2em; }
.questionnaire.agree .parent-div .label .icon{ width: 2.5em; }

/* .questionnaire.entry */
.questionnaire.entry .table-list{ font-size: 1.05em; background-color: #fff; margin-top: 1em; }
.questionnaire.entry .table-list > li{ position: relative; position: relative; display: grid; grid-template-columns: 10% 10em 1fr 9% 9% 9% 9%; border-bottom: .1em solid #C2C2C2;  }
.questionnaire.entry .table-list.type2 + .space-div{ margin: 1em 0; }
.questionnaire.entry .table-list.type2 > li{ grid-template-columns: 8% 10em 1fr 9% 9% 9% 9% 9%; }
.questionnaire.entry .table-list > li .box{ display: flex; align-items: center; justify-content: center; padding: .5em .2em; }
.questionnaire.entry .table-list > li .box.red-bg{ background-color: rgba(254, 204, 190, 1); }
.questionnaire.entry .table-list > li .box1.content-bg{font-weight: 700; font-size: 1.2em; }
.questionnaire.entry .table-list > li .box3.content-bg{ font-weight: 700; padding: .5em 1em; justify-content: flex-start; text-align: left; }
.questionnaire.entry .table-list > li .box.title-bg{ background-color: #FEC169; text-align: center; }
.questionnaire.entry .table-list > li .box.title-bg + .box.title-bg{ border-left: .1em solid rgba(166, 130, 77, .4); }
.questionnaire.entry .table-list > li .box + .box{ border-left: .1em solid #C2C2C2; }
.questionnaire.entry .table-list > li .box b{ font-weight: 700; font-size: 1.2em; }
.questionnaire.entry .table-list > li .box .gray{ display: block; font-size: .8em; color: #664D2A; }
.questionnaire.entry .table-list img{ max-height: 3em; }
.questionnaire.entry .table-list input[type="radio"]{ display: none; }
.questionnaire.entry .table-list input[type="radio"] + .radio{ background-color: #fff; cursor: pointer; border-radius: 50%; width: 1.5em; height: 1.5em; border: .1em solid #D9D9D9;  }
.questionnaire.entry .table-list input[type="radio"]:checked + .radio{ background-image: url('../img/entry/page1/radio-check.png'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.questionnaire.entry .table-list .child{ position: relative; align-items: center; justify-content: center; display: flex; flex-direction: column; }
.questionnaire.entry .table-list .child .box2{ width: 100%; border-left: .1em solid #C2C2C2; }
.questionnaire.entry .table-list .child .box3{ width: 100%; flex-grow: 1; border-left: .1em solid #C2C2C2; }
.questionnaire.entry .table-list .child .box + .box{ border-top: .1em solid #C2C2C2; }
.questionnaire.entry .table-list .child + .box4{ border-left: .1em solid #C2C2C2; }
.questionnaire.entry .table-list .or{ position: absolute; background-color: #7F7F7F; border-radius: .2em; padding: .2em 1em; color: #fff; font-size: .8em; }

.questionnaire.entry .category-div{ font-size: 1.15em; display: flex; align-items: center; gap: .5em;  }
.questionnaire.entry .category-div label{ display: flex; align-items: center; gap: .5em; }
.questionnaire.entry .category-div span{ display: block; width: 4em; height: 1.5em; }
.questionnaire.entry .red-bg{ background-color: #FECCBE; }
.questionnaire.entry .green-bg{ background-color: #E4F0D5; }
.questionnaire.entry .blue-bg{ background-color: #B8E9FF; }
.questionnaire.entry.entry2 .table-list img{ max-height: 4em; }
.questionnaire.entry .info-div{ line-height: 1.5em; margin-top: .5em; }

.questionnaire.entry .bottom-info-div{ gap: 1em; margin-top:.2em; display: flex; justify-content: space-between; }
.questionnaire.entry .label{ font-size: 1.5em; margin-bottom: .2em; font-weight: 700; font-size: 1.25em; }
.questionnaire.entry .label.number{ text-align: right; }
/* .questionnaire.entry2 .total-div{ flex-grow: 1; } */
.questionnaire.entry .bottom-info-div .ipt{ margin-top: .2em; border: 1px solid #222; border-radius: .3em; padding: .6em .5em; text-align: center; font-size: 1.5em; font-weight: 700;  }
.questionnaire.entry .grow-box{ flex-grow: 1; }
.questionnaire.entry .bottom-info-div .grow-box .ipt{ font-weight: 400; text-align: left; }


.questionnaire.result-div .white-box{ background-color: #fff; padding: 2.5em;  }
.questionnaire.result-div .white-box + .white-box{ margin-top: 1em; }
.questionnaire.result-div .white-box .title{ font-weight: 700; font-size: 1.3em; }
.questionnaire.result-div .white-box .score-div{ display: flex; margin-top: .5em; }
.questionnaire.result-div .white-box .score-div .box{ flex-direction: column; text-align: center; width: calc(100% / 3); display: flex; flex-direction: column; }
.questionnaire.result-div .white-box .score-div .box1{ color: #fff; padding: .5em; font-size: 1.5em; text-align: center; font-weight: 700; }
.questionnaire.result-div .white-box .score-div .box2{ font-weight: 700; font-size: 1.5em; flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 1.2em .5em; }
.questionnaire.result-div .white-box .score-div .box2 .small{ font-weight: 400; font-size: .6em; line-height: .6em; color: #7F7F7F; }
.questionnaire.result-div .white-box .score-div .red-box .box1{ background-color: #FF7575; }
.questionnaire.result-div .white-box .score-div .orange-box .box1{ background-color: #FA9F54; }
.questionnaire.result-div .white-box .score-div .blue-box .box1{ background-color: #9DC3E6; }
.questionnaire.result-div .white-box .score-div .green-box .box1{ background-color: #A9D18E; }
.questionnaire.result-div .white-box .score-div .red-box .box2{ background-color: rgba(255, 117, 117, .2); }
.questionnaire.result-div .white-box .score-div .orange-box .box2{ background-color: rgba(250, 159, 84, .2); }
.questionnaire.result-div .white-box .score-div .blue-box .box2{ background-color: rgba(157, 195, 230, .2); }
.questionnaire.result-div .white-box .score-div .green-box .box2{ background-color: rgba(169, 209, 142, .2); }

.questionnaire.result-div .table-div{ margin-top: 2em; }
.questionnaire.result-div .table-div .table-title{ padding: .5em .5em; text-align: center; background-color: #A36329; color: #fff; max-width: 12em; font-size: 1.3em; }
.questionnaire.result-div .table-div.table2 .table-title{ max-width: 16em; }
.questionnaire.result-div .table-div .check-list > li{ display: flex; border-bottom: .07em solid #C2C2C2; }
.questionnaire.result-div .table-div .check-list > li:last-child{ border-bottom: unset; }
.questionnaire.result-div .table-div .check-list .box{ padding: .5em 1em;  }
.questionnaire.result-div .table-div .check-list .box.title-bg{ justify-content: center; background-color: #FEC169; font-size: 1.25em; text-align: center; }
.questionnaire.result-div .table-div .check-list .box.content-bg{ background-color: #fff; font-size: 1.2em; }
.questionnaire.result-div .table-div .check-list .box + .box{ border-left: .07em solid #C2C2C2; }
.questionnaire.result-div .table-div .check-list .box1{ display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 10%; }
.questionnaire.result-div .table-div .check-list .box2{ width: 15%; flex-shrink: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.questionnaire.result-div .table-div .check-list .box3{ width: 20%; flex-shrink: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.questionnaire.result-div .table-div .check-list .box4{ display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; }
.questionnaire.result-div .table-div .check-list .box5{ width: 20%; flex-shrink: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.questionnaire.result-div .table-div .check-list .box6{ display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; }
.questionnaire.result-div .table-div .check-list .icon{ max-width: 80%; }
.questionnaire.result-div .table-div .check-list .box.red-bg{ background-color: #FECCBE; }
.questionnaire.result-div .table-div .check-list .box.green-bg{ background-color: #E4F0D5; }
.questionnaire.result-div .table-div .check-list .box.blue-bg{ background-color: #B8E9FF; }
.questionnaire.result-div .table-div .check-list .box .red{ color: #C40A09; font-weight: 700; }

.questionnaire.result-div .formList{ display: flex; flex-wrap: wrap; width: calc(100% + .4em); margin-left: -.2em; }
.questionnaire.result-div .formList > li{ width: 100%; padding:.2em .2em; }
.questionnaire.result-div .formList > li.half-3{ width: calc(100% / 3); }
.questionnaire.result-div .formList .label{ font-weight: 700; font-size: 1em; }
.questionnaire.result-div .formList .iptBox{ margin-top: .5em;  }
.questionnaire.result-div .formList .iptBox .text-div{ font-weight: 700; font-size: 1em; padding: .5em; }
.questionnaire.result-div .formList .iptBox .ipt{ border-radius: .25em; padding: .8em 1em; border: .05em solid #222; font-size: 1em; }

.questionnaire.result-div .bar{ margin-top: 2em; height: .15em; background-color: #E6DAB8; }
.questionnaire.result-div .title-text{ margin-top: 1.5em; font-size: 1.5em; text-align: center; font-weight: 700; }
.questionnaire.result-div .card-list{ margin-top: 1.5em; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 1em; }
.questionnaire.result-div .card-list img{ max-width: 100%; }

.questionnaire.result-div .logo-list{  margin-top: 2em; display: grid; grid-template-columns: repeat(2,1fr); border: .25em solid #FEC169; border-bottom: none; }
.questionnaire.result-div .logo-list > li{ display: flex; align-items: center; justify-content: space-between; padding:.5em 2em; font-size: 1em; background-color: #fff; border-bottom: .25em solid #FEC169; }
.questionnaire.result-div .logo-list > li:nth-child(2){ border-left: .25em solid #FEC169; }
.questionnaire.result-div .logo-list > li:nth-child(4){ border-left: .25em solid #FEC169; }
.questionnaire.result-div .logo-list img{ max-height: 4em; }


.questionnaire .youtube-div{ height: 31em; border-radius: 1.5em; overflow: hidden; }
.questionnaire .content-section.center{ justify-content: center; }


.questionnaire.entry .grow-box .grow-box{ width: 100%; margin: 0 auto; max-width: 90%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column;  }