@charset "utf-8";
@import url("fonts.css");

html, body{height: 100%;}
body{font-size:18px; color:#0c193c; overflow-x:hidden;position:relative; font-family:Noto Sans KR, '맑은 고딕',Malgun Gothic,'돋움',Dotum,Helvetica,Arial,sans-serif; margin: 0;}

/* layout */
h1{text-align: center; width: 100%; font-size: 30px;margin-top: 25px;}
.section{padding:1em; box-sizing:border-box; position:relative; top:0; left:0; right:0 ;bottom:0}
.section h2{text-align: center; font-weight: normal; font-size:18px;margin-top:15px;margin-bottom:30px;}
.infoGroup02,.infoGroup03,.infoGroup04,.infoGroup05,.infoGroup06{display:none}

h3{display: block;
    font-size: 1.17em;
    padding:1em;
    font-weight: bold;}

.progress02{padding:20px 0; background:#fff; box-sizing:border-box}
.progress02 ul{max-width:360px; margin:0 auto; width: 100%; padding: 0; text-align: center;}
.progress02 li{width:auto; margin-right:15px; top:-4px; box-sizing:border-box; display:inline-block; text-align:left; position:relative; text-indent:15px; font-family:"Nanum Square"; font-size:16px; font-weight:700}
.progress02 li:last-child{margin-right:0}
.progress02 li:before{content:'';width:10px; height:10px; display:block; background:#9e9e9e; border-radius:26px; position:absolute; text-align:center; line-height:26px; color:#fff; font-weight:700; top:-6px; text-indent:0}
.progress02 li.current{font-weight:700;margin-right:30px}
.progress02 li.current span{font-size:14px; top:-5px; padding-left:15px}
.progress02 li.current:before{background:#5185eb; width:26px;}
.progress02 li span{display: none;}
.page{display:none}

/* style */
.form{max-width:780px; margin:0 auto}
.textbox, .textbox02 {position: relative; width:100%; font-size:18px; display:inline-block; border:0px solid #a2afca; background:#fff; border-radius:5px;margin-right:1px; margin-bottom:5px; box-sizing:border-box}
.textbox:nth-child(2n){margin-right:0}
.textbox02 label{display:none;}
.textbox label {position: absolute;
  top: 1px;  /* input 요소의 border-top 설정값 만큼 */
  left: 1px;  /* input 요소의 border-left 설정값 만큼 */
  padding: 16px;  /* input 요소의 padding 값 만큼 */
  color: #2646a0;
  cursor: text;
}
 
.textbox02{}
.textbox02 ul{display:flex;justify-content: space-between;}
.textbox02 ul li{}
.textbox02 ul li input{}

button{position: relative;background: none;border: 0 none;cursor: pointer;font-family: inherit;margin: 0;font-size:18px;}
.textbox input[type=text],.textbox input[type=password],.textbox02 input[type=text],.textbox02 input[type=password]{border:1px solid #a2afca; width:100%;padding:1em; box-sizing:border-box;border-radius:5px;font-size: 18px;}
.textbox input[type=text],.textbox02 input[type=text]{padding:18px 20px}
.textbox input[type=text]:focus, .textbox input[type=password]:focus,.textbox02 input[type=text]:focus, .textbox02 input[type=password]:focus{outline:none; border:1px solid #5185eb}
::-webkit-input-placeholder{color:#2646a0;}
textarea:-moz-placeholder, input:-moz-placeholder{color:#2646a0;}

.selectbox{width:100%; font-size:18px;border:0px solid #e0e0e0;box-sizing:border-box;	border-radius:5px;position:relative; display:inline-block; margin-right:1px; margin-bottom:5px;}
.selectbox:nth-child(2n){margin-right:0}
.selectbox label{position:absolute; top:1px; left:1px; padding:19px 24px; background:#fff; border-radius:5px;color: #2646a0;margin: 0;border: 0;font-size: inherit;vertical-align: baseline;-webkit-text-size-adjust: none;}
select {width:100%;-webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; background:#fff url(../images/bg_select.png) no-repeat 95% 50%; /* 화살표 모양의 이미지 */padding: 19px;color:#0c193c;border-radius:5px;border:1px solid #a2afca;font-size: 18px;}
select::-ms-expand { display: none; }
select:active, select:focus{outline:none; border:1px solid #5185eb}

input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {color:#0c193c}
input[type="checkbox"] + label span.check {display:inline-block; width:22px; height:22px; margin:-1px 4px 0 0;vertical-align:middle;background:url(../images/check_radio_sheet.png) -22px top no-repeat; cursor:pointer; position:absolute}
input[type="checkbox"]:checked + label span.check {background:url(../images/check_radio_sheet.png) -44px top no-repeat;}
input[type="checkbox"] + label span.text{padding-left:30px; display:block; line-height:150%; min-height:22px; vertical-align:middle}
input[type="radio"] {display:none;}
input[type="radio"] + label {color:#0c193c;width:49%; display:inline-block}
input[type="radio"] + label span.radio {display:inline-block;width:22px;height:22px;margin:-1px 4px 0 0;vertical-align:middle;background:url(../images/check_radio_sheet.png) -66px top no-repeat;cursor:pointer; position:absolute}
input[type="radio"]:checked + label span.radio {background:url(../images/check_radio_sheet.png) -88px top no-repeat;}
input[type="radio"] + label span.text{padding-left:30px; display:block; line-height:150%; min-height:22px; vertical-align:middle;}
input[type="checkbox"] + label span.check, input[type="radio"] + label span.radio{line-height:120%; margin:2px 4px 0 0}

button.btn_next{display:none}
fieldset{border:0; margin:0; padding:0;}
legend{display: none;}
fieldset .block{width:100%;}

.descript{margin:10px 0; clear:both; line-height:150%; color:#555555; position:relative; padding-left:30px}
.descript:before{content:'i';color:#fff; position:relative; font-size:14px; background:#9e9e9e; margin-right:5px; width:18px; height:18px; text-align:center; border-radius:18px; display:inline-block; margin-left:-25px}

.blank{display:none}
.w_full{width:100%}

.buttonbox{text-align:center}
button.btn_login{text-align:center;background:#5185eb;color:#fff; padding:20px; width:300px; border-radius:5px}
button.btn_login:hover{background:#3e72d8}
button.btn_save{text-align:center;background:#0e2666;color:#fff; padding:20px; width:100%; border-radius:5px; margin-top:20px}
button.btn_save:hover{background:#071d57}
button.btn_login, button.btn_next, button.btn_prev{display:block; text-align:center;background:#5185eb;color:#fff; font-size:18px; padding:20px; width:100%; border-radius:5px; margin-top:20px}
button.btn_prev{background: #264b93; padding: 10px;}
button.btn_next:hover{background:#3e72d8}


.chooseBox{text-align: center;}
.chooseBox>div{width: 100%; display: inline-block;margin-bottom:10px;}
.chooseBox input[type="radio"] {display: none;}
.chooseBox input[type="radio"]:not(:disabled) ~ label {cursor: pointer;}
.chooseBox input[type="radio"]:disabled ~ label {color: #bcc2bf;border-color: #bcc2bf;box-shadow: none;cursor: not-allowed;}
.chooseBox label {box-sizing: border-box;width: 100% !important;height: 100%;display: block;background: white;border: 2px solid #20df80;border-radius: 20px;padding:0 10px;text-align: center;box-shadow: 0px 3px 10px -2px rgba(161,170,166,0.5);position: relative;}
.chooseBox input[type="radio"]:checked + label {background: #20df80;color: #ffffff;box-shadow: 0px 0px 20px rgba(0,255,128,0.75)}
.chooseBox input[type="radio"]:checked + label:after {color: #3d3f43;font-family: FontAwesome;border: 2px solid #1dc973;content: "";font-size: 24px;position: absolute;top: 10%;left: 90%;transform: translateX(-50%);height: 45px;width: 45px;line-height: 45px;text-align: center;border-radius: 50%;background: #fff url(../images/icon_chk.png) no-repeat center;box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.25);}
.chooseBox p {font-weight: 900;} 

.chooseBox label.control_04L,.chooseBox label.control_05L{border-color: #a2afca;}
.chooseBox input[type="radio"]#control_04:checked + label {background: #6fb6ff;border-color: #6fb6ff;box-shadow: 0px 0px 20px rgb(0 67 255 / 50%);}
.chooseBox input[type="radio"]#control_05:checked + label {background: #ff9cd3;border-color: #ff9cd3;box-shadow: 0px 0px 20px rgb(255 0 106 / 50%);}

.chooseBox input[type="radio"]#control_04:checked + label:after,.chooseBox input[type="radio"]#control_05:checked + label:after{border-color:#fff;}


.switch {position: relative;max-width:283px;margin:35px auto !important;}
.switch:before {content: "  ";position: absolute;left: 0;z-index: -1;width: 100%;height: 48px;background: #E8EAF2;border-radius: 30px;}
.switch_label {color: #3c3c3c !important; font-weight: bold;display: inline-block;width: calc(100%/3 - 33px) !important;padding: 14px !important;text-align: center;cursor: pointer;transition: color 200ms ease-out;position: inherit;z-index: 100; box-sizing: unset;}
.switch_label:hover {color: #000;}
.switch_indicator {width: 85px;height: 47px;position: absolute;top: 0;left: 0;border: 1px solid #CBD3D5;border-radius: 30px;transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);transform: translate3d(20px, 0, 0);}
.switch input.one:checked ~ .switch_indicator {background: #fff;transform: translate3d(0, 0, 0);}
.switch input.two:checked ~ .switch_indicator {background: #fff;transform: translate3d(98px, 0, 0);}
.switch input.three:checked ~ .switch_indicator {background: #fff;transform: translate3d(194px, 0, 0);}
.switch input[type=radio]:not(:checked), .switch input[type=radio]:checked {display: none;}

.ch_index,.ch_index02,.ch_index03{margin-top: 50px; border-top: 1px solid #ddd; padding-top: 30px; margin-bottom:50px;}
button.btn_add_ch,button.btn_add_ch02,button.btn_add_ch03,button.btn_del_ch,button.btn_del_ch02,button.btn_chk_ch,button.btn_chk_ch02{width: 180px; display: block; padding: 10px 0; font-size: 20px; margin: 20px auto; color: #333; font-weight: 600; background: #20df80; border-radius: 30px; text-align: center; color:#fff;}
button.btn_del_ch,button.btn_del_ch02{background:#e91e63;}
button.btn_chk_ch,button.btn_chk_ch02{background:#5582ff;}

.btn_chBox{text-align:center;;}
.btn_chBox button{display:inline-block !important;}
.infoGroup05 img{display: block; width: 100%; max-width:350px; margin:0 auto;}

.idBox{}
.idBox .btn_chk{width: 85px;background: #5185eb;border-radius: 0 5px 5px 0;color: #fff;padding: 17px 5px;position: absolute;right: 0;height: 59px;z-index:10;top:0;}
.idBox .textbox input[type=text]{width: calc(100% - 85px); border-radius: 5px 0 0 5px;}

.infoGroup00 .scroll{border: 2px solid #5185eb; padding: 25px; box-sizing: border-box; height: 350px; overflow-y: scroll; border-radius:8px 8px 0 0;}
.infoGroup00 .scroll ul{list-style: none;margin: 0; padding: 0;}
.infoGroup00 .scroll>ul>li{margin-bottom:35px;}
.infoGroup00 .scroll>ul>li>span{display: block; font-weight: bold;}
.infoGroup00 .scroll>ul>li>ul{margin: 0; padding: 0; background: #eaeaea; padding: 20px 20px 20px 40px; margin-top: 5px; }
.infoGroup00 .scroll>ul>li>ul>li{margin-bottom:10px;}
.infoGroup00 .scroll>ul>li>ul>li>ul{margin-left: 20px; margin-top:10px;}
.infoGroup00 .agree{background: #1b57cc; padding: 20px 15px;}
.infoGroup00 .agree label{color:#fff; height:auto; padding:0}
.infoGroup00 .agree .check{right: 0; top:-3px}
.infoGroup00 ul li span.ga{display: inline-block; margin-left: -25px; margin-right: 5px;}

label{display:none ;}
.agree label, .chooseBox label{display:block;}


.pw_on{display:block; width:30px; height:25px;position: absolute; right: 20px; top: 50%; text-indent: -9999px; background: url(../images/pw_on.png) no-repeat; background-size: 30px; margin-top: -15px;}
.pw_off{display:block; width:30px; height:25px;position: absolute; right: 20px; top: 50%; text-indent: -9999px; background: url(../images/pw_off.png) no-repeat; background-size: 30px; margin-top: -15px;}

 .infoGroup00.privacy .scroll{height:75vh}
    .infoGroup00.privacy h1{margin-bottom:20px;}
    .infoGroup00.privacy h1 p{font-size:15px; margin:0;}
    .infoGroup00.privacy .table{margin-top:15px;border-top: 1px solid #5471ef; border-bottom: 1px solid #5471ef; overflow-x: auto; width: 100%; white-space: nowrap;}
    .infoGroup00.privacy .table_face{overflow:hidden;width:100%;border-collapse:collapse}
    .infoGroup00.privacy .table_face th,.table_face td{padding:5px 13px;border-left:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;text-align:center;line-height:17px;font-size:15px;}
    .infoGroup00.privacy .table_face th:nth-child(1){border-left:0}
    .infoGroup00.privacy .table_face thead{background:#f5f7fe}
    .infoGroup00.privacy .table_face tbody{background:#fff}
    .infoGroup00.privacy .table_face .no{border-left:0;}
    .infoGroup00.privacy caption{display: none;}
    .infoGroup00.privacy .fsS{font-size:11px; margin-left:10px}
    .infoGroup00.privacy .scroll>ul>li>ul{margin-top:15px;}
    .infoGroup00.privacy .scroll>ul>li>span{margin-bottom:8px;}