@charset "UTF-8";

@import url('default.css');
@import url('common.css');

:root{--color_1:#5292FC; --color_1_deep:#226be3; --color_1_light:#7cadff; --color_2:#0065cd;}

input:focus{outline:none; box-shadow:none; border-bottom:1px solid #6d6d6d;}

div,p,strong,span{line-height:1.4; word-break: keep-all;}

#container{position:relative; background:url('../images/survey/container_bg.png') no-repeat center center / cover; padding-top:120px; padding-bottom:120px; min-height:100vh; z-index: auto;}
#container::before{position:absolute; display:block; width:130px; height:25px; top:40px; left:50%; margin-left:500px; content:''; background:url('../images/common/hwave_logo_blue.png') no-repeat center center / contain; opacity:0.8;}
@media screen and (max-width:1400px) {
    #container::before{margin-left:350px;}
}
@media screen and (max-width:1000px) {
    #container::before{width:100px; height:20px; left:auto; top:20px; right:5%; margin-left:0;}
}
@media screen and (max-width:640px) {
    #container{padding-top:80px;}
    #container::before{width:80px; height:16px;}
}


.box.white{padding:40px; border-radius:10px; background-color:#fff;}
.color_1{color:var(--color_1);}
.color_1_deep{color:var(--color_1_deep);}
.contents{position:relative; z-index: 100;}
.top_intro{text-align:center;}
.top_intro .subject{font-size:35px; font-weight:600; color:#000;}
.top_intro .desc{margin-top:20px; font-size:18px; color:#1d1d1d;}
.top_intro + .contents{margin-top:50px;}
.top_intro + form{margin-top:50px;}
@media screen and (max-width:1000px) {
    .box.white{padding:30px;}
    .top_intro{max-width:90%; margin-left:auto; margin-right:auto;}
    .top_intro .subject{font-size:28px;}
    .top_intro .desc{font-size:16px;}
    .top_intro + .contents{margin-top:30px;}
    .top_intro + form{margin-top:30px;}
}
@media screen and (max-width:640px) {
    .top_intro .subject{font-size:25px;}
    .top_intro .subject .company_name{display:block;}
    .top_intro .desc{margin-top:10px; font-size:15px;}
    /* .top_intro .desc br{display:none;} */
    .top_intro + .contents{margin-top:20px;}
    .top_intro + form{margin-top:20px;}
}


.btn_group{margin-top:40px; padding:0 20px;}
.btn_group .ul{display:flex; justify-content: center; align-items: center; gap:10px;}
.btn_group .li{}


/*버튼 스타일*/
.btn{padding:10px 30px; font-size:15px; font-weight:500; transition: 0.2s; border-radius:5px;}
.btn.type_1{background-color:var(--color_1); color:#fff;}
.btn.type_2{background-color:rgba(255,255,255,0.9); color:#222;}

.btn.type_1:hover{background-color:var(--color_1_deep); color:#fff;}
.btn.type_2:hover{background-color:rgba(255,255,255,1); color:#000;}
@media screen and (max-width:1000px) {
    .btn_group{margin-top:25px;}
}





.form_box .subject{/*margin-bottom:5px;*/ font-size:16px; line-height:1.3; color:#222; font-weight:500;}
.form_box .req{display:inline-block; margin-left:3px; font-size:13px; font-weight:600; color:#f55;}
.form_box .checkbox_group .desc{font-size:15px;}
.form_box .checkbox_group .input{display:none;}
.form_box .checkbox_group .label{font-size:16px; line-height:35px;}
.form_box .checkbox_group .input[type="checkbox"] + .label{position:relative; display:block; margin-top:0px; padding-left:27px;}
.form_box .checkbox_group .input[type="checkbox"] + .label::before{position:absolute; display:block; left:0; top:8px; width:18px; height:18px; content:''; border-radius:3px; border:1px solid #ccc; background-color:#fff;}
.form_box .checkbox_group .input[type="checkbox"] + .label::after{display:none; position:absolute; display:none; left:0; top:8px; width:18px; height:18px; content:''; border-radius:3px; border:1px solid var(--color_1); background:var(--color_1) url('../images/common/check_input_w.png') no-repeat center center / contain;}
/* .checkbox_group .input[type="checkbox"]:checked + .label{color:#F8ED8C;} */
.form_box .checkbox_group .input[type="checkbox"]:checked + .label::before{display:none;}
.form_box .checkbox_group .input[type="checkbox"]:checked + .label::after{display:block;}
.form_box .checkbox_group .desc + .check_list{margin-top:15px;}
@media screen and (max-width:1000px) {
    .form_box .checkbox_group .desc{font-size:14px;}
}



.form_box .radio_group .label{font-size:16px; line-height:35px;}
.form_box .radio_group .radio_wrap .radio_option{display:inline-block;}
.form_box .radio_group .radio_wrap .radio_option + .radio_option{margin-left:15px;}
.form_box .radio_group .input{display:none;}
.form_box .radio_group .input[type="radio"] + .label{position:relative; display:block; margin-top:0px; padding-left:27px;}
.form_box .radio_group .input[type="radio"] + .label::before{position:absolute; display:block; left:0; top:8px; width:18px; height:18px; content:''; border-radius:100%; border:1px solid #ccc; background-color:#fff;}
.form_box .radio_group .input[type="radio"] + .label::after{display:none; position:absolute; display:none; left:0; top:8px; width:18px; height:18px; content:''; border-radius:100%; border:1px solid var(--color_1); background:var(--color_1) url('../images/common/radio_input_w.png') no-repeat center center;}
.form_box .radio_group .input[type="radio"]:checked + .label::before{display:none;}
.form_box .radio_group .input[type="radio"]:checked + .label::after{display:block;}


.form_box .text_group .label{display:block; /*margin-bottom:5px;*/}
.form_box .text_group .input{width:100%; height:40px; padding:0 10px; line-height:40px; font-size:16px; border-radius:3px; box-sizing: border-box; border:1px solid #ddd;} 


@media screen and (max-width:640px) {
    .form_box .radio_group .radio_wrap .radio_option + .radio_option{margin-left:5px;}
}



.form_box .select_group .label{font-size:16px;}
.form_box .select_group .select_box{position:relative; width:100%;}
.form_box .select_group .select_box::before{position:absolute; display:block; right:10px; top:50%; width:14px; height:8px; transform: translateY(-50%); content:''; background:url('../images/common/arrow_black.png') no-repeat center center / contain; z-index: 50;}
.form_box .select_group .select_box .select{position:relative; width:100%; height:40px; padding:0 20px 0 10px; line-height:40px; font-size:16px; border-radius:3px; box-sizing: border-box; border:1px solid #ddd; background:none; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:#fff;} 



.form_box .textarea_group .label{font-size:16px;}
.form_box .textarea_group .textarea{position:relative; width:100%; padding:10px; border-radius:3px; box-sizing: border-box; border:1px solid #ddd;}




.form_box .ul .li{display:flex; /*justify-content: center;*/ align-items: center;}
.form_box .ul .li .subject{width:80px;}
.form_box .ul.single .li + .li{margin-top:15px;}
.form_box .ul.double{display:flex; flex-wrap: wrap; align-items: start; justify-content: start;}
.form_box .ul.double .li{width:calc((100% - 50px)/2); margin-right:50px;}
.form_box .ul.double .li:nth-child(even){margin-right:0;}
.form_box .ul.double .li:nth-child(+n+3){margin-top:30px;}
.form_box .ul.double .li.w100{width:100%; margin-right:0;}
@media screen and (max-width:1000px) {
    .form_box .ul.double .li{width:calc((100% - 20px)/2); margin-right:20px;}
}
@media screen and (max-width:640px) {
    .form_box .ul.double{flex-direction: column;}
    .form_box .ul.double .li{width:100%; margin-right:0;}
    .form_box .ul.double .li:nth-child(+n+2){margin-top:30px;}
}



/*step_1*/
.step_1 .contents > .box.white{max-width:800px; margin-left:auto; margin-right:auto; box-shadow: 0 0 10px rgba(0,0,0,0.05);}
.step_1 .checkbox_group .desc + .desc{margin-top:20px;}
@media screen and (max-width:480px) {
    .step_1 .top_intro .desc br{display:none;}
}



/*step_2*/
.step_2 .contents > .box.white{max-width:800px; margin-left:auto; margin-right:auto;}
.step_2 .form_box .ul .li.text_group{border-bottom:1px solid #ccc;}
.step_2 .form_box .ul .li.text_group .input{width:calc(100% - 80px); border-radius:0; border:none;}
.step_2 .form_box .ul .li.radio_group .radio_wrap{width:calc(100% - 80px);}
@media screen and (max-width:640px) {
    .step_2 .contents .form_box{max-width:90%; margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:20px;}
}




/*step_3*/
.step_3 .contents > .box.white{max-width:800px; margin-left:auto; margin-right:auto;}
.question_list .item + .item{margin-top:30px; padding-top:30px; border-top:1px solid #eee;}
.question_list .item .subject{font-size:18px;}
.question_list .item .subject .num{display:inline; font-weight:500;}
.question_list .item .subject .text{display:inline;}
.question_list .item .form_box{margin-top:20px;}
.question_list .radio_group{position:relative; display:flex; justify-content: space-between; align-items: center;}
.question_list .radio_group::before{position:absolute; display:block; width:100%; height:1px; left:0; top:50%; transform: translateY(-50%); content:''; background:#eee; z-index: 1;}
.question_list .radio_group .level_text{position:relative; padding:6px 15px; border-radius:30px; background-color:var(--color_1); color:#fff; font-weight:500; z-index: 10;}
.question_list .radio_group .radio_wrap{position:relative; z-index:10;}
.question_list .radio_group .input[type="radio"] + .label::before{display:none;}
.question_list .radio_group .input[type="radio"] + .label{width:30px; height:30px; padding-left:0; font-size:16px; line-height:32px; text-align:center; border-radius:100%; background-color:#f5f5f5;}
.question_list .radio_group .input[type="radio"]:checked + .label{color:#fff; background-color:var(--color_1_deep); font-weight:600; border-color:var(--color_1);}
.question_list .radio_group .input[type="radio"]:checked + .label::after{display:none;}
@media screen and (max-width:640px) {
    .step_3 .contents > .box.white{padding-left:20px; padding-right:20px;}
    .question_list .item .subject{font-size:17px;}
    
    .question_list .radio_group .level_text{width:45px; padding-left:0; padding-right:0; font-size:12px; line-height:1.2; text-align:center; border-radius:5px;}
    .question_list .item .form_box{margin-top:10px;}
    .form_box .radio_group .radio_wrap .radio_option + .radio_option{margin-left:10px;}
}
@media screen and (max-width:400px) {
    .form_box .radio_group .radio_wrap .radio_option + .radio_option{margin-left:5px;}
    .question_list .radio_group .input[type="radio"] + .label{width:25px; height:25px; font-size:15px; line-height:27px;}
}




/*step_4*/
.step_4 .top_intro{display:flex; height:calc(100vh - 240px); flex-direction: column; justify-content: center; align-items: center;}
@media screen and (max-width:1000px) {
    /* .step_4 .top_intro{height:calc(100vh - 180px);} */
}
@media screen and (max-width:640px) {
    .step_4 .top_intro{height:calc(100vh - 200px);}
    .step_4 .top_intro .desc br{display:block;}
}


/*step_error*/
.step_error .top_intro{display:flex; height:calc(100vh - 240px); flex-direction: column; justify-content: center; align-items: center;}
@media screen and (max-width:1000px) {
    /* .step_error .top_intro{height:calc(100vh - 180px);} */
}
@media screen and (max-width:640px) {
    .step_error .top_intro{height:calc(100vh - 200px);}
    .step_error .top_intro .desc br{display:block;}
}







.sign_bg{position:relative; min-height:100vh; background:url('../images/common/login_bg.jpg') no-repeat center center / cover;}
.sign_bg::after{position:absolute; display:block; width:100%; height:100%; left:0; top:0; content:''; background:rgba(0,0,0,0.5); z-index: 1;}

.login_page .con{position:relative; display:flex; justify-content: center; align-items: center; height:100vh; z-index: 50;}
.login_page .layout_group{display:flex; flex-direction: column; justify-content: center; align-items: center; max-width:400px; margin-left:auto; margin-right:auto; padding:60px 40px; background-color:#f9f9f9; border-radius:20px;}
.login_page .intro{text-align:center;}
.login_page .intro .desc{font-size:25px; /*color:var(--color_1);*/ color:#0065cd; font-weight:600; line-height:1.3;}
.login_page .intro .logo{width:130px; height:25px; margin:15px auto 0 auto; font-size:0; line-height:0; background:url('../images/common/hwave_logo_dark.png') no-repeat center center / contain; }
.login_page .form_box{width:300px; max-width:100%; margin-top:40px;}
.login_page .form_box .li + .li{margin-top:10px;}
.login_page .form_box .btn_group{padding:0;}
.login_page .form_box .anchor{display:block; width:100%; height:45px; padding:0; line-height:45px; font-size:15px; font-weight:600; text-align:center; background-color:#0065cd; color:#fff;}
@media screen and (max-width:640px) {
    .login_page .layout_group{max-width:90%; padding:40px 30px;}
    .login_page .intro .desc{font-size:18px;}
    .login_page .intro .logo{width:110px; height:21px;}
    .login_page .form_box{width:250px; margin-top:30px;}
}






/*ani_01*/
.ani_01{position:fixed; left:calc(50% + 20px); margin-left:-800px; top:120px; z-index:20; opacity: 0; transform: scale(0.96); animation:ani_01_show 1.3s cubic-bezier(0.33, 0, 0.2, 1) forwards; animation-delay: 0.1s;}
.ani_01 .a01_in{position:relative;}
.ani_01 .a01_in .circle01{position:absolute; display:block; width:250px; height:250px; left:0; top:0; border-radius:50%; border:45px solid rgba(133,206,176,0.15); z-index:10;}
.ani_01 .a01_in .circle02{position:absolute; display:block; width:140px; height:140px; left:-60px; top:-70px; background:url('../images/survey/ani01-circle02.png') center center no-repeat; z-index:20; animation:ani_01_1 10s linear infinite;}
.ani_01 .a01_in .circle03{position:absolute; display:block; width:240px; height:240px; left:100px; top:30px; background:url('../images/survey/ani01-circle03.png') center center no-repeat; z-index:20; opacity:0.5;}
@media screen and (max-width:1300px) {
    .ani_01{margin-left:-600px;}
    .ani_01 .a01_in .circle01{width:200px; height:200px; border-width:40px;}
    .ani_01 .a01_in .circle02{width:90px; height:90px; background-size:contain; animation:ani_01_1 10s linear infinite;}
    .ani_01 .a01_in .circle03{width:170px; height:170px; background-size:contain;}
}
@media screen and (max-width:1000px) {
    .ani_01{margin-left:-500px; top:80px; animation:ani_01_show_m 1.3s cubic-bezier(0.33, 0, 0.2, 1) forwards;}
}
@media screen and (max-width:768px) {
    .ani_01{margin-left:-300px;}
    .ani_01 .a01_in .circle01{width:150px; height:150px; border-width:30px;}
    .ani_01 .a01_in .circle02{width:70px; height:70px; animation:ani_01_2 8s linear infinite;}
    .ani_01 .a01_in .circle03{width:120px; height:120px;}
}
@media screen and (max-width:480px) {
    .ani_01{margin-left:-200px;}
    .ani_01 .a01_in .circle03{display:none;}
}

/*ani_02*/
.ani_02{position:fixed; right:0; bottom:0; z-index:20; animation-delay: 0.5s;}
.ani_02 .a02_in{position:relative;}
.ani_02 .a02_in .circle01{position:absolute; display:block; width:400px; height:400px; right:-170px; bottom:-15px; background:url('../images/survey/ani02-circle01.png') center center no-repeat; z-index:40; opacity:0; transform: scale(0.96); animation:ani_02_show 1s ease-out forwards, ani_02_bubble_1 7s ease-in-out infinite; animation-delay: 0.3s , 0s;}
.ani_02 .a02_in .circle02{position:absolute; display:block; width:360px; height:360px; right:45px; bottom:-150px; background:url('../images/survey/ani02-circle02.png') center center no-repeat; z-index:20; opacity:0; transform: scale(0.96); animation:ani_02_show 1s ease-out forwards, ani_02_bubble_2 9s ease-in-out infinite; animation-delay: 0.6s , 0s;}
.ani_02 .a02_in .circle03{position:absolute; display:block; width:200px; height:200px; right:135px; bottom:150px; background:url('../images/survey/ani02-circle03.png') center center no-repeat; z-index:30; opacity:0; transform: scale(0.96); animation:ani_02_show 1s ease-out forwards, ani_02_bubble_3 6.5s ease-in-out infinite; animation-delay: 0.9s , 0s;}
@media screen and (max-width:1300px) {
    .ani_02 .a02_in .circle01{width:300px; height:300px; right:-120px; background-size:contain;}
    .ani_02 .a02_in .circle02{width:260px; height:260px; right:40px; bottom:-100px; background-size:contain;}
    .ani_02 .a02_in .circle03{width:150px; height:150px; bottom:100px; background-size:contain;}
}
@media screen and (max-width:1000px) {
    .ani_02 .a02_in .circle01{width:300px; height:300px; right:-120px;}
    .ani_02 .a02_in .circle02{width:260px; height:260px; right:80px;}
    .ani_02 .a02_in .circle03{width:150px; height:150px; bottom:100px;}
}
@media screen and (max-width:768px) {
    .ani_02 .a02_in .circle01{width:200px; height:200px; right:-80px;}
    .ani_02 .a02_in .circle02{width:180px; height:180px; right:40px; bottom:-60px;}
    .ani_02 .a02_in .circle03{width:100px; height:100px; right:80px; bottom:80px;}
}

/*애니메이션*/
@keyframes ani_01_show {
    100% {opacity:1; top:80px; left:50%; transform: scale(1);}
}
@keyframes ani_01_show_m {
    100% {opacity:1; top:30px; left:50%; transform: scale(1);}
}
@keyframes ani_01_1 {
    25% { transform: rotate(180deg); left: 55px; top: 55px;}
    35% {transform: rotate(220deg); left: 110px; top: -20px;}
    45% {transform: rotate(270deg); left: 150px; top: -70px;}
    55% {transform: rotate(300deg); left: 100px; top: -30px;}
    65% {transform: rotate(360deg); left: 55px; top: 55px;}
    100% {transform: translate(0, 0);}
}
@keyframes ani_01_2 {
    25% { transform: rotate(180deg); left: 40px; top: 40px;}
    35% {transform: rotate(220deg); left: 80px; top: -30px;}
    45% {transform: rotate(270deg); left: 120px; top: -60px;}
    55% {transform: rotate(300deg); left: 90px; top: 0px;}
    65% {transform: rotate(360deg); left: 40px; top: 40px;}
    100% {transform: translate(0, 0);}
}
@keyframes ani_02_show {
    100% {opacity:1; transform: scale(1);}
}
@keyframes ani_02_bubble_1 {
    0%   { transform: translate(0px, 0px); }
    25%  { transform: translate(10px, -12px); }
    50%  { transform: translate(7px, 10px); }
    75%  { transform: translate(-12px, -8px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes ani_02_bubble_2 {
    0%   { transform: translate(0px, 0px); }
    20%  { transform: translate(-8px, 8px); }
    40%  { transform: translate(12px, -10px); }
    60%  { transform: translate(-6px, 6px); }
    80%  { transform: translate(8px, -8px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes ani_02_bubble_3 {
    0%   { transform: translate(0px, 0px); }
    30%  { transform: translate(8px, -8px); }
    60%  { transform: translate(-10px, 10px); }
    90%  { transform: translate(6px, -6px); }
    100% { transform: translate(0px, 0px); }
}