/* 맞춤 교육과정 진단받기 */
.fitStep {display: none; position: relative; height: 1080px; background: #000; color: #fff; text-align: center;}
.fitStep:after {content:''; position: absolute; top: 82px; right: 4%; width: 374px; height: 847px; background: url('/img/event/fit_img01.png') no-repeat center;}
.fitStep#fitStep04:after {right: 0;}
.fit-inner {position: absolute; top: 0; left: 0; right: 5%; width: 100%; height: 1006px; background: url('/img/event/bg_fit.png') no-repeat center;}
.fitCont {position: absolute; top: 237px; left: 268px; right: 268px; bottom: 228px; padding-top: 30px;}

.fitCont h3 {position: relative; padding: 0 30px;}
.fitCont h3 span {line-height: 1;}
.fitLogo {display: none; padding: 22px 0 18px; font-family: 'EsaManru', 'MalgunGothic', '맑은고딕', 'Dotum', 'Gulim', 'Arial', sans-serif !important; font-weight: 500; font-size: 25px; color: #08cee8; letter-spacing: 0.1em;}
.fitStep p {font-size: 22px;}
.fitStep h2, .fitStep h4 {font-weight: 500; line-height: 1;}
.fitStep h2 {padding-top: 13px; padding-bottom: 5px; font-size: 70px; word-break: keep-all;}
.fitStep h3 {font-weight: 500; font-size: 55px; line-height: 1; word-break: keep-all;}
.fitStep h4 {font-size: 37px;}
.fitStep input[type='radio'], .fitStep input[type='checkbox'] {display: none;}
.fitStep .icon-list {display: flex; flex-wrap: wrap; width: 787px; padding: 38px 0; margin: 0 auto;}
.fitStep .icon-list > li {width: 20%;}
.fitStep .icon-list > li p {font-weight: 500; font-size: 15px;}
.fitStep .icon-list > li input {display: none;}
.fitStep .icon-list > li .img-wrap {width: 93px; height: 93px; margin: 0 auto 5px; border-radius: 5px; border: 3px solid #efefef; background-repeat: no-repeat; background-position: center; transition: all 0.1s;}
.fitStep .icon-list > li:hover .img-wrap {border-color: #66ffff;}
.fitStep .icon-list > li label {display: block;}
.fitStep .icon-list > li input:checked + label .img-wrap {border-color: #e93436;}
.fitStep .icon-list > li:nth-child(1) .img-wrap {background-image: url('/img/event/fit_q01_01_w.png');}
.fitStep .icon-list > li:nth-child(2) .img-wrap {background-image: url('/img/event/fit_q01_02_w.png');}
.fitStep .icon-list > li:nth-child(3) .img-wrap {background-image: url('/img/event/fit_q01_03_w.png');}
.fitStep .icon-list > li:nth-child(4) .img-wrap {background-image: url('/img/event/fit_q01_04_w.png');}
.fitStep .icon-list > li:nth-child(5) .img-wrap {background-image: url('/img/event/fit_q01_05_w.png');}

.fitStep .icon-list > li:nth-child(1):hover .img-wrap, 
.fitStep .icon-list > li:nth-child(1) input:checked + label .img-wrap {background-image: url('/img/event/fit_q01_01.png');}
.fitStep .icon-list > li:nth-child(2):hover .img-wrap, 
.fitStep .icon-list > li:nth-child(2) input:checked + label .img-wrap {background-image: url('/img/event/fit_q01_02.png');}
.fitStep .icon-list > li:nth-child(3):hover .img-wrap, 
.fitStep .icon-list > li:nth-child(3) input:checked + label .img-wrap {background-image: url('/img/event/fit_q01_03.png');}
.fitStep .icon-list > li:nth-child(4):hover .img-wrap, 
.fitStep .icon-list > li:nth-child(4) input:checked + label .img-wrap {background-image: url('/img/event/fit_q01_04.png');}
.fitStep .icon-list > li:nth-child(5):hover .img-wrap, 
.fitStep .icon-list > li:nth-child(5) input:checked + label .img-wrap {background-image: url('/img/event/fit_q01_05.png');}

.fitList {display: flex; flex-wrap: wrap; margin: 0 auto;}
.fitList > li label{display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 3px solid #efefef; background: #efefef; font-weight: 500; font-size: 20px; color: #222;}
.fitList > li:hover label {border-color: #66ffff; background: linear-gradient(33deg, rgba(97,255,255,1) 0%, rgba(41,129,226,1) 100%);}
.fitList > li input:checked + label {border-color: #e93436; background: linear-gradient(33deg, rgba(97,255,255,1) 0%, rgba(41,129,226,1) 100%);}

.col2List {width: 100%; max-width: 680px; padding-top: 35px;}
.col2List > li {width: 50%; padding: 0 12px 18px;}
.col2List > li label {height: 70px;}
.col3List {width: 870px; padding-top: 5px;}
.col3List > li {width: 33.33%; padding: 0 5px 10px;}
.col3List > li label {height: 47px;}
#fitStep04 .fitList {padding-top: 35px;}
#fitStep04 .fitList > li {width: 33.33%; padding: 0 5px 10px;}
#fitStep04 .fitList > li label {height: 80px;}
.col5List {width: 837px; padding-top: 30px;}
.col5List > li {width: 25%; padding: 0 5px 10px;}
.col5List > li label {height: 57px;}

.fitTextarea {position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 25%; }
.fitTextarea:before {content:''; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: url('/img/event/fit_icon_memo.png') no-repeat 20% 13px; pointer-events: none;}
.fitTextarea:after {content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; mix-blend-mode: overlay; pointer-events: none;}
.fitTextarea textarea {position: relative; z-index: 1; background: none; font-weight: 500; font-size: 20px; color: #fff;}
.fitTextarea textarea::placeholder {font-size: 20px; color: #fff;}

.fit-page {display: flex; align-items: center; font-size: 23px; color: #08cee8;}
.fit-page .en-tit {position: absolute; bottom: 125px; left: 50%; transform: translateX(-50%); padding: 0 45px 0; letter-spacing: 0.2em; line-height: 1;}
#fitStep03 .fit-page .en-tit, #fitStep05 .fit-page .en-tit {bottom: 13px;} 
#fitStep03 .fit-page button, #fitStep05 .fit-page button {bottom: 5px;}
#fitStep06 .fit-page .en-tit {bottom: 103px;}
#fitStep06 .fit-page button {bottom: 96px;}

.fit-page button {position: absolute; left: 50%; bottom: 120px; z-index: 1; transform: translateX(-50%); padding: 9px 14px; background: #08cee8; border-radius: 22px; font-weight: 500; font-size: 16px; color: #071e3b; transition: all 0.2s;}
.fit-page button:hover {background: #e93436; color: #fff;}
.fit-prev {margin-left: -11%;}
.fit-next {margin-left: 10%;}

.fitCont .tuitionTel select, .fitCont .tuitionTel input {text-align: center;}
.fitCont .tuitionTel select {border: none; background: none; color: #fff;}
.fitCont .tuitionTel select option {color: #909aaa;}

.fitPrivacy {width: 100%; max-width: 462px; margin: 0 auto; padding: 37px 0 70px;}
.input-area li {margin-bottom: 15px; display: flex; align-items: center; height: 55px; border-radius: 7px; border: 3px solid #66ffff; background: linear-gradient(33deg, rgba(97,255,255,1) 0%, rgba(41,129,226,1) 100%); font-weight: 500; font-size: 20px; color: #222;}
.input-area li label {width: 100%; max-width: 174px; padding-left: 23px; text-align: left; cursor: auto;}
.input-area li input {background: none; color: #fff;}
.input-area li input:-webkit-autofill{-webkit-text-fill-color: #fff;/*자동완성*/ caret-color: white;/* 깜빡이는 커서 */}
.input-area li input::placeholder {font-size: 20px; color: #fff;}

.fitAgree {display: flex; justify-content: space-between; padding-top: 3px;}
.fitAgree input[type='checkbox'] {display: block; width: 20px; height: 20px; border: 2px solid #fff; background: none;}
.fitAgree input[type='checkbox']:checked:before {content:''; position: absolute; left: 3px; right: 3px; top: 3px; bottom: 3px; background: #fff;}
.fitAgree input[type='checkbox'] + label {padding-left: 8px;}
.fitAgree .left-wrap {display: flex; font-size: 15px;}
.fitAgree a {font-size: 15px; color: #dee1e6;}
.fitAgree a:after {content:''; display: inline-block; width: 5px; height: 5px; margin-left: 10px; border-right: 2px solid #8a9bab; border-bottom: 2px solid #8a9bab; transform: rotate(-45deg); vertical-align: middle;}
.fitAgree input[type='checkbox'] + label {color: #dee1e6;}
.fitPrivacy .fitNote {padding-top: 10px; font-size: 13px; color: #909aaa; text-align: left;}


.btn-detail {display: inline-block; position: relative; min-width: 200px; height: 60px; padding: 5px; border: 1px solid #ddd;}
.btn-detail:before {content:''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: #08cee8;}
.btn-detail span {display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1; width: 100%; height: 100%; color: #fff; font-weight: 300; font-size: 14px;}
.btn-detail:hover span:before {background: #08cee8;}
.btn-detail span:after {content:''; position: absolute; z-index: -1; top: 0; right: 103%; width: 120%; height: 100%; background-color: #0d0d0d; transform: skew(-10deg); transition: all .3s ease-out;}
.btn-detail:hover span:after{right: -3%;}
.color-wh{color:#fff;}

textarea {
    padding: 0;
    resize: none;
    width: 100%;
    border: none;
}

.input-area li input {
    background: none;
    color: #fff;
    resize: none;
    border: none;
	padding: 8px;
}


@media all and (max-width: 1080px) {

	.fitWrap .fitStep {height: auto;}
	.fit-inner {position: inherit; bottom: 0; height: auto; background: #040e33 url('/img/event/bg_fit_mo.jpg') no-repeat center; padding:60px 0;}
	.fitCont {position: relative; top: auto; left: auto; right: auto; bottom: auto; padding: 18px 25px 78px;}
	.fitCont:before {content:''; position: absolute; top: 13px; bottom: 63px; left: 13px; right: 13px; background: rgba(255, 255, 255, .4); mix-blend-mode: overlay; pointer-events: none;}
	.fitLogo {display: block;}
	.fitTextarea {position: inherit;}
	.fitTextarea:after {background: rgba(255, 255, 255, 0.1); mix-blend-mode: unset;}
	.fitStep p {font-size: 15px;}

	.fit-page {position: absolute;}
	.fit-page .en-tit {position: initial; transform: none;}
	.fitStep:after {display:none}
	#fitWrapper .fitStep .fit-page {display: flex; justify-content: center; left: 0; right: 0; bottom: 15px; transform: none;}
	.input-area li {margin-bottom: 10px;}
	.fitAgree .left-wrap {display: flex; align-items: center; font-size: 12px;}
	.fitAgree input[type='checkbox'] + label {padding-left: 5px;}
	.fitAgree a {font-size: 12px;}
	.fitAgree a:after {margin-left: 5px;}
	.fitAgree input[type='checkbox'] {width: 13px; height: 13px;}
	
	#fitWrapper .fit-page button {bottom: auto; padding: 5px 9px; font-size: 13px;}
	.fit-prev {margin-left: -85px;}
	.fit-next {margin-left: 73px;}

	.fitLogo {padding: 11px 0 9px; font-size: 13px;}
	.fitStep h2 {padding: 5px 0 0; font-size: 40px;}
	.fitStep h3 {font-size: 30px;}
	.fitStep h2 br {display: block;}
	.fitStep h4 {font-size: 18px;}
	.fitStep h2 + p {display: none;}
	.fitStep .icon-list, .fitList, #fitStep04 .fitList {justify-content: center; width: calc(100% + 10px); padding: 15px 0 12px; margin: -10px -5px 0;}
	.fitStep .icon-list > li {width: 50%;}
	.fitStep .icon-list > li label {padding: 22px 0; margin: 10px 5px 0; border-radius: 3px; border: 2px solid #efefef; background: #efefef;}
	.fitStep .icon-list > li input:checked + label, .fitList > li input:checked + label {border-color: #e93436;}
	.fitStep .icon-list > li input:checked + label {background: linear-gradient(33deg, rgba(97,255,255,1) 0%, rgba(41,129,226,1) 100%);}
	.fitStep .icon-list .img-wrap {display: none;}
	#fitStep01 .icon-list > li:last-child {width: 100%;}
	.fitStep .icon-list > li p {font-weight: 700; font-size: 13px; color: #0b141a;}
	.fitCont .btn-detail{width: 100%; max-width: 462px; min-width: auto; height: auto; padding: 11px 0; background: #08cee8; border: none;}
	.fitCont .btn-detail span {background: #08cee8;}
	.fitCont .btn-detail span:before {background: none;}
	.fitCont .btn-detail:hover span:before {background: inherit;}
	.fitCont .btn-detail span:after {background: inherit;}

	.fitCont h3 {font-size: 25px;}
	.fitCont h3 button {width: 30px; height: 30px;}

	.col2List {padding-top: 35px; max-width: none;}
	.col2List > li {padding: 0;}
	.fitList > li label {padding: 22px 0; margin: 10px 5px 0; border-radius: 3px; border: 2px solid #efefef; background: #efefef; font-weight: 700; font-size: 13px; color: #0b141a;}
	.fit-page .en-tit {padding: 5px 20px 0;}
	.fitTextarea {padding: 0;}
	.fitTextarea:before {content: none;}
	.fitTextarea:after {content: none;}
	.fitTextarea textarea {padding: 12px 10px; border-radius: 3px; border: 2px solid #66ffff; background: linear-gradient(33deg, rgba(97,255,255,1) 0%, rgba(41,129,226,1) 100%); font-weight: 700; font-size: 13px; color: #0b141a;}
	.fitTextarea textarea::placeholder {font-weight: 500; font-size: 13px; color: #0b141a;}
	.fitCont .col3List > li, #fitStep04 .fitList > li {width: 50%; padding: 0;}

	.col5List > li {padding: 0; width: 33.33%;}
	.input-area li {font-size: 13px;}
	.input-area li label {max-width: 100px;}
	.input-area li input, .input-area li select {width: calc(100% - 100px); font-size: 13px;}
	.input-area li .tuitionTel input, .input-area li .tuitionTel select {width: 28%;}
	.input-area li input::placeholder {font-size: 13px;}
	.fitPrivacy {padding: 35px 0 18px;}




}