@charset "UTF-8";

body {color:#202020; line-height:1.2;}

.pageOutWrap {width:100%; max-width:800px; margin:0 auto;}

.contentWrap {width:100%; max-width:800px; margin:0 auto; box-sizing: border-box; padding-left:40px; padding-right:40px;}

.footer {display:flex; justify-content:center; align-items:center; width:800px; height:60px; font-size:20px; color:#ffffff; font-family:NotoSansM; letter-spacing: 20px; margin:0 auto; background-color:#1a2b46;}

.buttonWrap {text-align:center;}

/*
    *** 공통 레이아웃
*/

.cl_button {
    display: inline-block;
    width: 410px;
    height: 100px;
    line-height: 100px;
    font-size: 35px;
    font-family: NotoSansM;
    color: #ffffff !important;
    text-align: center;
    vertical-align: middle;
    margin-bottom:30px;
    border-radius: 60px;
    box-shadow: 14px 14px 18px rgba(0,0,0,0.21);
    cursor:pointer;
    background-color:#c18862;
}
.cl_button:last-child {margin-bottom:0;}
.cl_button .buttonIcon {vertical-align: 10px;}

.cl_button.red {background-color:#a62626;}





/*헤더*/
.header {height:125px;}
.header .contentWrap {display:flex; justify-content: space-between; align-items: center; height:100%;}
.header .rightCell {font-size:22px; color:#202020; font-family:NotoSansL; text-align:right; line-height:1.2;}
.header .rightCell .bold {font-family:NotoSansB;}

.header.result .contentWrap {justify-content: center;}
.header.result .rightCell {display:none;}



/*인트로*/
.intro {padding-top:180px; padding-bottom:200px;}
.intro .mainText {font-size:70px; font-family:NotoSansB; text-align:center; margin-bottom:50px;}
.intro .infoText {font-size:35px; font-family:NotoSansL; text-align:center; margin-bottom:90px;}
.intro .infoText .bold {font-family:NotoSansM;}



/*질문페이지*/
.stepPage {padding-top:150px; padding-bottom:200px;}

.questionCell {text-align:center; margin-bottom:50px;}
.questionCell .qMark {width:47px; height:47px; line-height:47px; font-size:25px; color:#ffffff; font-family:DinM; text-align:center; vertical-align: middle; margin:0 auto; margin-bottom:10px; border-radius:50%; background-color:#c18862;}
.questionCell .qText {font-size:70px; font-family:NotoSansL; letter-spacing: -2px;}

.selectionArea {width:90%; margin:0 auto; margin-bottom:100px;}
.selectionArea .gridWrap {display:flex; justify-content: center; align-items: center; margin-bottom:50px;}
.selectionArea .gridWrap:last-child {margin-bottom:0;}
.selectionArea .gridWrap .gridCell {flex:1;}
.selectionArea .gridWrap.col2 {justify-content: space-between;}
.selectionArea .circleButton {display:flex; justify-content: center; align-items: center; width:240px; height:240px; font-size:40px; font-family:NotoSansM; margin:0 auto; border-radius:50%; cursor:pointer; background-color:#f4f4f4;}
.selectionArea .circleButton:hover {background-color:#e0e0e0;}
.selectionArea .circleButton.on {color:#ffffff; background-color:#666666;}

.selectionArea .circlePhotoButton {display:flex; flex-direction: column; justify-content: center; align-items: center; margin:0 auto; cursor:pointer;}
.selectionArea .circlePhotoButton:hover .imgWrap {border:solid 10px #e0e0e0;}
.selectionArea .circlePhotoButton.on .imgWrap {border:solid 10px #666666;}
.selectionArea .circlePhotoButton .imgWrap {width:240px; height:240px; font-size:0; margin-bottom:10px; border-radius:50%; box-sizing: border-box;}
.selectionArea .circlePhotoButton .imgWrap img {width:100%;}
.selectionArea .circlePhotoButton .text {font-size:40px; font-family:NotoSansM; text-align:center;}

.selectionArea2 {margin-bottom:100px;}
.selectionArea2 .roundRectButton {display:flex; justify-content:center; align-items:center; height:135px; font-size:40px; font-family:NotoSansM; letter-spacing: -2px; margin-bottom:30px; border-radius:70px; cursor: pointer; background-color:#f4f4f4;}
.selectionArea2 .roundRectButton:last-child {margin-bottom:0;}
.selectionArea2 .roundRectButton:hover {background-color:#e0e0e0;}
.selectionArea2 .roundRectButton.on {color:#ffffff; background-color:#666666;}
.selectionArea2 .imgCell {margin-bottom:60px;}
.selectionArea2 .imgCell img {width:100%;}

.stepPage .inputArea {margin-bottom:30px;}
.stepPage .inputArea input {width:100%; height:130px; font-size:40px; font-family:NotoSansM; padding:15px; border-radius:20px; box-sizing:border-box; background-color:#f4f4f4;}



/*결과페이지*/
.resultPage {padding-top:150px; padding-bottom:200px;}
.resultPage .resultTitle {text-align:center; margin-bottom:50px;}
.resultPage .resultTitle .subText {font-size:50px; font-family:NotoSansL; letter-spacing: -2px; margin-bottom:10px;}
.resultPage .resultTitle .subText .bold {font-family:NotoSansB;}
.resultPage .resultTitle .subText .quote {color:#c18862; font-family:NotoSansBlk; letter-spacing: -5px;}
.resultPage .resultTitle .typeText {font-size:70px; font-family:NotoSansB; letter-spacing: -4px;}

.resultPage .resultImgCell {text-align:center; margin-bottom:55px;}

.resultPage .resultContent {border:solid 2px #dddddd; padding:50px; box-sizing: border-box; margin-bottom:100px;}
.resultPage .resultContent .resultText {font-size:35px; font-family:NotoSansL; text-align:center; letter-spacing: -4px; margin-bottom:50px;}
.resultPage .resultContent .resultText .bold {font-family:NotoSansM;}
.resultPage .resultContent .imgCell {text-align:center; font-size:0;}




/*상담신청*/
.applyWrap {position:fixed; top:0; left:0; width:100%; height:100%; display:none; justify-content: center; align-items: center; background-color:rgba(0,0,0,0.6)}

.applyWrap .applyWin {position:relative; width:90%; max-width:800px;}
.applyWrap .applyWin .btnCloseApply {position:absolute; top:10px; right:10px; font-size:30px; color:#ffffff; cursor:pointer;}
.applyWrap .applyArea {width:100%; padding:50px 70px; box-sizing: border-box; background-color:#ea9a9b;}

.applyWrap .applyArea .titleCell {text-align:center; margin-bottom:30px;}
.applyWrap .applyArea .titleCell .decoText {font-size:15px; color:#ffffff; font-family:NotoSansT; letter-spacing: 12px;}
.applyWrap .applyArea .titleCell .title {font-size:40px; color:#ffffff; font-family:NotoSansB;}

.applyWrap .applyArea .inputWrap {display:flex; width:100%; height:65px; align-items: center; border:solid 1px #202020; margin-bottom:18px; background-color:#ffffff;}
.applyWrap .applyArea .inputWrap.noBottomMargin {margin-bottom:0;}
.applyWrap .applyArea .inputWrap .inputName {width:150px; height:25px; font-size:25px; color:#202020; font-family:NotoSansL; text-align:justify; line-height:1; padding:0 15px; box-sizing: border-box; border-right:solid 1px #202020;}
.applyWrap .applyArea .inputWrap .inputName:after { content:""; display:inline-block; width:100%; }
.applyWrap .applyArea .inputWrap input {flex:1; width:100%; font-size:20px; padding:0 10px; box-sizing: border-box;}

.applyWrap .applyArea .agreeChkCell {font-size:18px; color:#ffffff; font-family:NotoSansL; margin-top:10px; margin-bottom:35px;}
.applyWrap .applyArea .agreeChkCell label span.strong,
.applyWrap .applyArea .agreeChkCell a {color:#a62424;}
.applyWrap .applyArea .agreeChkCell label:first-child {margin-right:20px;}
.applyWrap .applyArea .btnShowPolicy {cursor:pointer;}

.applyWrap .applyArea .btnApply {display:flex; justify-content:center; align-items:center; height:100px; font-size:55px; color:#ffffff; font-family:NotoSansL; border-radius:55px; margin-bottom:35px; cursor:pointer; background-color:#a62424;}
.applyWrap .applyArea .btnApply .bold {font-family:NotoSansB;}

.applyWrap .applyArea .infoText {font-size:18px; color:#ffffff; font-family:NotoSansL; text-align:center;}

.applyWrap .footLine {display:flex; justify-content:center; align-items:center; width:100%; height:60px; font-size:20px; color:#ffffff; font-family:NotoSansM; letter-spacing: 20px; margin:0 auto; background-color:#1a2b46;}



/*개인정보보호정책 팝업*/
#policyPopup {position:fixed; display:none; justify-content: center; align-items: center; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:100;}
#policyPopup .win {width:90%; max-width:700px; font-size:16px; color:#333333; border-radius:10px; padding:20px; box-sizing: border-box; background-color:#ffffff;}
#policyPopup .win span {font-size:14px;}
#policyPopup .win button {display:block; width:100px; height:40px; font-size:14px; color:#ffffff; margin:0 auto; margin-top:20px; cursor:pointer; background-color:#333333;}





@media(max-width:800px){

    .contentWrap {padding-left:15px; padding-right:15px;}


    /*
        *** 공통 레이아웃
    */

    .cl_button {
        width: 250px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        border-radius: 30px;
        box-shadow: 7px 7px 9px rgba(0,0,0,0.21);
        margin-bottom:15px;
    }
    .cl_button .buttonIcon {width:20px; vertical-align: 5px;}



    /*헤더*/
    .header {height:60px;}
    .header .logoCell img {width:70px;}
    .header .rightCell {font-size:14px;}


    /*인트로*/
    .intro {padding-top:100px; padding-bottom:100px;}
    .intro .mainText {font-size:32px; margin-bottom:30px;}
    .intro .infoText {font-size:15px; margin-bottom:40px;}


    /*질문페이지*/
    .stepPage {padding-top:70px; padding-bottom:70px;}

    .questionCell {margin-bottom:30px;}
    .questionCell .qMark {width:30px; height:30px; line-height:30px; font-size:16px; margin-bottom:10px;}
    .questionCell .qText {font-size:32px;}

    .selectionArea {width:90%; margin-bottom:50px;}
    .selectionArea .gridWrap {margin-bottom:20px;}
    .selectionArea .circleButton {width:140px; height:140px; font-size:20px;}

    .selectionArea .circlePhotoButton .imgWrap {width:140px; height:140px;}
    .selectionArea .circlePhotoButton .text {font-size:20px;}

    .selectionArea2 {margin-bottom:50px;}
    .selectionArea2 .roundRectButton {height:50px; font-size:20px; margin-bottom:15px; border-radius:30px;}
    .selectionArea2 .imgCell {margin-bottom:30px;}

    .stepPage .inputArea {margin-bottom:15px;}
    .stepPage .inputArea input {height:50px; font-size:20px; padding:10px; border-radius:10px;}


    /*결과페이지*/
    .resultPage {padding-top:70px; padding-bottom:70px;}
    .resultPage .resultTitle { margin-bottom:30px;}
    .resultPage .resultTitle .subText {font-size:25px; letter-spacing: -2px; margin-bottom:5px;}
    .resultPage .resultTitle .subText .quote {letter-spacing: -3px;}
    .resultPage .resultTitle .typeText {font-size:35px; letter-spacing: -4px;}

    .resultPage .resultImgCell {margin-bottom:30px;}
    .resultPage .resultImgCell img {height:180px;}

    .resultPage .resultContent {border:solid 1px #dddddd; padding:20px 10px; margin-bottom:50px;}
    .resultPage .resultContent .resultText {font-size:18px; letter-spacing: -2px; margin-bottom:30px;}
    .resultPage .resultContent .imgCell img {width:80%;}



    /*상담신청*/
    .applyWrap .applyWin .btnCloseApply {top:5px; right:5px; font-size:25px;}
    .applyWrap .applyArea {padding:20px 15px;}

    .applyWrap .applyArea .titleCell {margin-bottom:30px;}
    .applyWrap .applyArea .titleCell .decoText {font-size:12px; letter-spacing: 12px; margin-bottom:10px;}
    .applyWrap .applyArea .titleCell .title {font-size:30px;}

    .applyWrap .applyArea .inputWrap {height:50px; margin-bottom:10px;}
    .applyWrap .applyArea .inputWrap .inputName {width:100px; height:20px; font-size:17px; padding:0 10px;}
    .applyWrap .applyArea .inputWrap input {font-size:17px; padding:0 10px;}

    .applyWrap .applyArea .agreeChkCell {font-size:15px; margin-top:10px; margin-bottom:20px;}
    .applyWrap .applyArea .agreeChkCell label:first-child {display:block; margin-right:10px; padding-bottom:10px;}

    .applyWrap .applyArea .btnApply {height:50px; font-size:24px; border-radius:35px; margin-bottom:25px;}

    .applyWrap .applyArea .infoText {font-size:13px;}

    .applyWrap .footLine {height:40px; font-size:12px; letter-spacing: 10px;}

}