@charset "utf-8";
/********** common ***********/

.dp-none {display: none; !important}

/* layout */
.max-width { max-width:640px; margin:0 auto; padding:48px 0 64px 0; }

/* header */
/* progress-bar */
.header-wrap .progress-bar-wrap .progress { width:32px; height:4px; background:#DDDDDD; float:left; }
.header-wrap .progress-bar-wrap .progress.active { background:#333333 !important; }
/* explain */
.header-wrap > p { color:#666666; font-size:14px; }

/* title */
.tit01 { font-size:40px; color:#000000; }
.tit02 { font-size:28px; color:#000000; }
.tit01 .tit-line { display:inline; box-shadow: inset 0 -24px 0 #eeeeee; padding:0 4px; }
.tit02 .tit-line { display:inline; box-shadow: inset 0 -20px 0 #eeeeee; padding:0 4px; }
.form-index { font-size:18px; font-weight:900; color:#8E8E8E; }
.form-tit-line { font-weight:900; display:inline; box-shadow: inset 0 -16px 0 #eeeeee; padding:0 6px; padding-bottom:2px; }
.form-tit { font-size:20px; font-weight:900; margin-left:8px; margin-top:-1px; width:calc(100% - 42px); }
.form-tit-wrap > p { float:left; }

/* contents */
.contents-wrap .sec-tit-wrap { position:relative; }
.contents-wrap .sec-tit-wrap::after { content:''; display:table; clear:both; }
.contents-wrap .sec-tit-wrap .sec-hr { border-top:2px solid #999999 !important; width:100%; height:2px !important; position:absolute; top:50%; display:inline-block; z-index:-1; }
.contents-wrap .sec-tit-wrap .sec-tit-text > div , .contents-wrap .sec-tit-wrap h2 { float:left; background:#ffffff; }
.contents-wrap .sec-tit-wrap .sec-tit-text > div { background:#ffffff; padding-left:8px; margin-left:-8px; margin-top:4px; }
.contents-wrap .sec-tit-wrap p { background:#888888; color:#ffffff; padding:5px 16px; font-size:12px; line-height:12px; font-weight:900; border-radius:2px; }
.contents-wrap .sec-tit-wrap h2 { font-size:16px; color:#888888; padding:3px 8px; }

/******** layerpopup ********/
.layerpop-wrap { overflow-x: hidden; overflow-y: auto; position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); left:0px; top:0px; z-index: 99999; display:none; }
.layerpop-wrap .layerpop { position:fixed; overflow: hidden; width: 100%; max-width: 612px; top:50%; left:50%; transform: translate(-50%, -50%); border: 1px solid #B3B3B3; border-top: 3px solid #000; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.10); }
.layerpop-wrap .layerpop hr.bg-000000 { width: 112px; margin: auto; padding: 0px; }
.layerpop-wrap .layerpop.relative { position: relative; overflow: hidden; width: 100%; max-width: 612px; top:auto; left:auto; transform: inherit; margin: 20px auto; }
.layerpop-wrap .layerpop .layer-body { overflow: hidden; padding: 46px 40px; background-color: #fff; }
.layerpop-wrap .layerpop .btn.close { display: block; position: absolute; width: 32px; height: 32px; line-height: 0px; right: 13px; top: 15px; padding: 0px; border: 0px; background-color: transparent; }
.custom-alert { position:fixed; text-align:left;  z-index:99999; background-color:#fff; box-shadow:0 4px 8px 0 rgba(0,0,0,0.50); width:88%; max-width: 366px;  padding: 46px 40px; }
.custom-alert .title { position: relative; font-size:24px; font-weight:700; color:#000; margin-bottom:8px; line-height:26px; padding-bottom: 8px; margin-bottom: 48px; text-align: center; }
.custom-alert .title::after { position: absolute; content: ''; width: 112px; height: 1px; left: 50%; bottom: 0px; margin-left: -56px; background-color: #000;  }
.custom-alert .message { font-size:18px; color:#000000; line-height:20px; word-break:keep-all; text-align: center; }
.custom-alert .btn-wrap { margin-top: 64px; text-align: center; width: 100%;}
.custom-alert .btn { position: relative; text-align:center; width: 100%; height: 64px; line-height: 62px; max-width: 273px; font-size: 18px; font-weight: 700; color: #fff; text-align: center; border: 1px solid #323234; background-color: #323234; float: none; padding: 0; border-radius: 0px;}
.custom-alert .btn.black-line { color: #000000; border: 1px solid #000000; background-color: #fff; }
.custom-alert .btn.sm { width: 100%; height: 50px; line-height: 48px; font-size: 16px; }
.custom-alert .btn-wrap.grid2 { overflow: hidden; }
.custom-alert .btn-wrap.grid2 .btn { display: block; max-width: calc(50% - 8px); float: left; }
.custom-alert .btn-wrap.grid2 .btn + .btn { margin-left: 16px; }

.form-line { margin:32px 0; }

/* ifame video */
.contents-wrap .video .video-container { position: relative; width: 100%; height: auto; padding-top: 50%; }
.contents-wrap .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.contents-wrap .video .video-container .video-container-holder {z-index: 1000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; text-align: center;}
.contents-wrap .video .video-container .video-container-holder img {width: 28px; height: 28px; display: none; position: absolute; top: calc(50% - 14px); left: calc(50% - 14px);}
.contents-wrap .video .video-container .video-container-holder:hover {background: rgba(0, 0, 0, 0.5); cursor: pointer; }
.contents-wrap .video .video-container .video-container-holder:hover > img {display: block;}


/* radio */
.radio-item label span { margin-left:4px; }

/* checkbox */
.checkbox-item label span { margin-left:6px; }

/* text area */
.textarea-item textarea { border:1px solid #BFBFBF; border-radius:2px; color:#333333; font-size:14px; }
.textarea-item textarea:focus { border:1px solid #333333; }
.textarea-item textarea::placeholder { color:#999999; }

/* degree */
.degree-wrap .degree-tit { font-size:16px; font-weight:900; color:#333333; }
.degree-box { background:#F3F3F3; padding:16px 20px; display:flex; flex-wrap:wrap; justify-content:flex-start; border-radius:12px; }
.degree-box .degree-item { width:66px; text-align: center; margin:0 4px; }
.degree-box .degree-item .degree-label p { color:#666666; font-size:11px; line-height:14px; padding-top:4px; cursor:pointer; }
.degree-item input[type="radio"]:checked + label { color:#333333; }
.degree-item label:nth-child(2) { font-weight:900; }

/* button-wrap */
.btn-wrap { width:fit-content; margin:0 auto; display:block; }
.btn-wrap button { float:left; width:124px; height:48px; padding:12px 0; border-radius:2px; font-size:18px; transition:background 0.2s ease; }
/* next */
.btn-wrap button#next { background:#666666; color:#ffffff; }
.btn-wrap button#next:hover, .btn-wrap button#next:active { background:#333333; }
/* prev */
.btn-wrap button#prev { border:1px solid #666666; color:#666666; }
.btn-wrap button#prev:hover, .btn-wrap button#prev:active { border:1px solid #333333; color:#333333; }
/* complete */
.btn-wrap button#complete { background:#26849D; color:#ffffff; }
.btn-wrap button#complete:hover, .btn-wrap button#complete:active { background:#004E67; }

.has-padding { padding:0 40px; }
.clear::after { content:''; display:table; clear:both; }
.w100 { width:100%; }
@media all and (max-width:768px) {
    /******** layerpopup ********/
    .layerpop-wrap { overflow-x: hidden; overflow-y: auto; position:fixed; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); left:0px; top:0px; z-index: 99999; display:none; }
    .layerpop-wrap .layerpop { position:fixed; overflow: hidden; width: 100%; max-width: 612px; top:50%; left:50%; transform: translate(-50%, -50%); border: 1px solid #B3B3B3; border-top: 3px solid #000; box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.10); }
    .layerpop-wrap .layerpop hr.bg-000000 { width: 112px; margin: auto; padding: 0px; }
    .layerpop-wrap .layerpop.relative { position: relative; overflow: hidden; width: 100%; max-width: 612px; top:auto; left:auto; transform: inherit; margin: 20px auto; }
    .layerpop-wrap .layerpop .layer-body { overflow: hidden; padding: 46px 24px; background-color: #fff; }
    .layerpop-wrap .layerpop .btn.close { display: none; position: absolute; width: 32px; height: 32px; line-height: 0px; right: 13px; top: 15px; padding: 0px; border: 0px; background-color: transparent; }
    .custom-alert { position:fixed; text-align:left;  z-index:99999; background-color:#fff; box-shadow:0 4px 8px 0 rgba(0,0,0,0.50); width:88%; max-width: 366px;  padding: 46px 24px; }
    .custom-alert .title { position: relative; font-size:18px; font-weight:500; color:#000; line-height:26px; padding-bottom: 8px; margin-bottom: 48px; text-align: center; }
    .custom-alert .title::after { position: absolute; content: ''; width: 112px; height: 1px; left: 50%; bottom: 0px; margin-left: -56px; background-color: #000;  }
    .custom-alert .message { font-size:16px; color:#000000; line-height:20px; word-break:keep-all; text-align: center; }
    .custom-alert .btn-wrap { margin-top: 32px; text-align: center; }
    .custom-alert .btn { height: 46px; line-height: 44px; max-width: 273px; font-size: 14px; }
    .custom-alert .btn.sm { width: 100%; height: 46px; line-height: 44px; font-size: 14px; }
    .custom-alert .btn-wrap.grid2 .btn { display: block; max-width: calc(50% - 4px); float: left; }
    .custom-alert .btn-wrap.grid2 .btn + .btn { margin-left: 8px; }
}
@media all and (max-width:480px) {
  .has-padding { padding:0 20px; }
  .degree-box .degree-item { margin:0 2px; }
}
/*hover*/
@media all and (min-width:768px) {
    
}

/*hover*/
@media all and (min-width:1280px) {
	.custom-alert .btn:hover { border: 1px solid #494A4B; background-color: #494A4B; }
    .custom-alert .btn.black-line:hover { color: #ffffff; border: 1px solid #CA0336; background-color: #CA0336; }
}