/* 고객센터 공통 상단*/
.customerTop{text-align: center;color: #222222;padding: 79px 0 80px; background:url('/images/customer/bg.png')}
.customerTop h2{font-size:2.8rem;letter-spacing: -0.72px;margin-bottom:15px; font-weight:800;}
.customerTop p{font-size:1.6rem;letter-spacing: -0.32px; line-height:1.5}
.searchTop{text-align: center;color: #222222;padding-top:80px}
.searchTop h2{font-size:2.8rem;letter-spacing: -0.72px;margin-bottom:15px; font-weight:800;}

/* 고객센터 상단 링크 */
.customerLink{display:flex;justify-content: space-between;align-items: center;}
.customerLink li{width:18.7%;align-self: stretch;box-sizing: border-box;position:relative; height:240px;}
.customerLink li a{position:absolute; display:block;width:100%;color:#222;text-align: center;padding:36px 0; border:1px solid #ccc;border-radius: 8px; top:0;transition:0.3s ease;}
.customerLink li a:hover{top:-20px;transition:0.3s ease;}
.customerLink li a h3{font-size:2rem;letter-spacing: -1.2px;margin:20px 0 12px; font-weight:800;}
.customerLink li a p{font-size:1.4rem;letter-spacing: -0.7px;}
.customerLink li a span{font-size:5.1rem;}
.customerBtn{margin-bottom:40px !important;}

/* 고객센터 전화번호 */
.grayBg{background:#F9F9F9;padding:60px 0}
.grayBg section{display:flex;justify-content: space-between;align-items: center;}
.grayBg section .office em{display:block;font-size:1.6rem;color:#222222;letter-spacing: -0.8px;font-weight: 500;}
.grayBg section .office .officeTel{display:block;font-size:3.6rem;letter-spacing: -1.8px;color: #222222;line-height: 48px;margin-bottom:5px;font-weight: 900;}
.grayBg section .office .hoursOperation{display:block;font-size:1.4rem;letter-spacing: -0.7px;color:#FF4188;margin-bottom:38px}
.grayBg section .office p{font-size:2.4rem;letter-spacing: -1.2px;line-height: 36px; font-weight:700;}
.grayBg section .office p strong{color:#00B1FF; font-weight: 900;}
.grayBg section .classTel{width:66.1%;background:#fff}
.grayBg section .classTel ul{display: flex;flex-wrap: wrap;border: 1px solid #E1E1E1;padding:5px 23px 35px;border-radius: 8px;}
.grayBg section .classTel ul li{width: 25%;font-size:1.4rem;color:#222;letter-spacing: -0.56px;font-weight: bold;margin-top:30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.grayBg section .classTel ul li span{display:block;color:#00B1FF; margin-top:5px;}

/* 원격지원 */
.remoteService h4{font-size:2.4rem;letter-spacing: -1.8px;line-height:1.5;margin-bottom:45px; font-weight:900;}
.remoteService h4 strong{color:#00B1FF; font-weight:900;}
.remoteService button{font-size:1.6rem;color:#fff;letter-spacing: -0.8px;font-weight:bold;background: #00B1FF;padding:8px 16px;border-radius: 4px;cursor: pointer;}
.remoteServiceInfo{width:66.1%;}
.remoteServiceInfo ul{display:flex;justify-content: space-between;align-items: center;}
.remoteServiceInfo ul li{width:240px;border: 1px solid #CCCCCC;text-align: center;padding:43px 0 56px;border-radius: 50%; transition:0.3s ease; }
.remoteServiceInfo ul li:hover > span{color:#fff}
.remoteServiceInfo ul li:hover > strong{color:#fff}
.remoteServiceInfo ul li:hover > p{color:#fff}
.remoteServiceInfo ul li:hover{border:1px solid #00b1ff; background-color:#00B1FF}
.remoteServiceInfo ul li span{display:block;font-size:2.4rem;font-weight:900;letter-spacing: -0.96px;line-height: 24px;color:#00B1FF;margin-bottom:15px;}
.remoteServiceInfo ul li strong{display:block;letter-spacing: -0.96px;font-size:2.4rem;color:#222222;margin-bottom:20px}
.remoteServiceInfo ul li p{font-size:1.4rem;letter-spacing: -0.56px;color:#222;line-height:24px}

/* FAQ 탭 */
.faqLink{display:flex;justify-content: center; margin-bottom:60px}
.faqLink li{width:100%;max-width:100px;max-height: 47px;border: 1px solid #E1E1E1;background:#fff;text-align: center;transition: all 0.4s;border-radius: 4px;margin-right:10px;box-sizing: border-box;}
.faqLink li a{display:inline-block;width: 100%;font-size:1.4rem;line-height: 2.7rem;letter-spacing: -0.72px;color:#222;padding:10px 0;}
.faqLink li.on{border: 1px solid #222;background:#222}
.faqLink li.on a{color:#fff}
.faqLink li:hover{border: 1px solid #222;background:#222}
.faqLink li:hover a{color:#fff}

/* 검색 창 */
.customerTopSearch{position: relative;width:66.1%;margin:40px auto}
.customerTopSearch input[type="text"]{width:100%;border-bottom:1px solid #222;height:50px;padding:0 11px;font-size:2.4rem;letter-spacing: -1.2px;line-height: 21px;box-sizing: border-box;}
.customerTopSearch input[type="text"]:focus{outline:none}
.customerTopSearch button{position: absolute;right: 5px;top: 15%;background: none;cursor: pointer;padding: 10px 10px;}

/* FAQ 테이블 */
.tb1.answerTb tbody td{padding:0}
.tb1.answerTb tbody td .answerTop{width:100%;text-align: left;font-size:1.6rem;color:#222;padding:20px 0;overflow: hidden;}
.tb1.answerTb tbody td .answerTop > span{float:left;width:23%;font-size:1.4rem;text-align: center;}
.tb1.answerTb tbody td .answerTop > em{float:left;width:77%;}
.tb1.answerTb tbody td div > div{width:100%;text-align: left;font-size:1.6rem;color:#222;padding:20px 0;overflow: hidden;}
.tb1.answerTb tbody td div > div > span{float:left;width:23%;font-size:1.4rem;text-align: center;}
.tb1.answerTb tbody td div > div > div{float:left;width:77%;padding:0; line-height:1.5}
.tb1.answerTb tbody td .hiddenTd{display:none;background:#F9F9F9}
.tb1.answerTb tbody td .hiddenTd.active{display:block}
.tb1.answerTb tbody td .hiddenTd span{color:#00B1FF}

.ban tbody td:nth-child(2){font-weight: normal;}
.ban tbody td:nth-child(3){text-align: left;}
.ban tbody th, .ban tbody td{font-size:1.4rem !important}
.ban th:first-child{width:20%;}
.ban th:nth-child(2){width:60%;}
.ban th:nth-child(3){width:20%;}

/* 1:1 문의 */
.inquiryForm{width:100%}
.inquiryForm .row{margin-bottom:20px;}
/*.inquiryForm .row:first-child{display:flex;justify-content: space-between;}*/
.inquiryForm .row:last-child{display:flex;justify-content: space-between;}
.inquiryForm .row select{width:100%;font-size:1.4rem;border: 1px solid #CCCCCC;border-radius: 8px;padding:16px 20px}
.inquiryForm .row select:last-child{color:#999999}
.inquiryForm .row label{display:inline-block;width:100%}
.inquiryForm .row input[type="text"]{width:100%;font-size:1.4rem;color:#999999;border: 1px solid #CCCCCC;border-radius: 8px;padding:16px 20px;box-sizing: border-box;}
.inquiryForm .row textarea{width:100%;height:300px;font-size:1.4rem;color:#999999;line-height:170%;border: 1px solid #CCCCCC;border-radius: 8px;padding:16px 20px;box-sizing: border-box;resize: none;}
.inquiryForm .row span{display:inline-block;font-size:1.4rem;letter-spacing: -0.7px;color: #222222;margin-right:40px}
.inquiryForm .row .file{display:none}
.inquiryForm .row .inquiryFile{display:inline-block; width:auto;color:#fff;background:#222;padding:5px 10px;border-radius: 4px;margin-left:25px}
.inquiryForm .row .fileName{font-weight: normal;}
.inquiryForm .smsYn span{margin-right:20px}
.inquiryForm .smsYn label{width:auto}
.inquiryForm .smsYn label input{vertical-align: bottom;}
.fileNoti{display:inline-block;font-size:1.2rem;color:gray;margin:10px 0 10px}

/* 학습 프로그램  */
.softwareList{display:flex;justify-content: space-between;flex-wrap: wrap;}
.softwareList li{width:31%;margin-bottom:75px}
.softwareList li img{float:left;margin-right:30px}
.softwareList li div{float:left}
.softwareList li div h3{font-size:2rem;letter-spacing: -0.4px;color: #222222;line-height:21.6px;margin-bottom:10px}
.softwareList li div .softwareSummary{font-size:1.4rem;letter-spacing: -0.28px;color: #555555;line-height:21.6px;margin-bottom:10px}
.softwareList li div .linkArea a{display:inline-block;font-size:1.4rem;letter-spacing: -0.28px;line-height:21.6px;padding:5px 10px;background:#222;color:#fff;border-radius: 4px;margin-right:10px;}

/* 검색 패키지 부분 */
.packageArea li{display:flex;justify-content: space-between;align-items: center;padding-right:30px;border:1px solid #E1E1E1;border-radius: 8px;margin-bottom:20px;overflow: hidden;}
.packageArea li:last-child{margin:0}
.packageArea li .packageImg{width:299px;height:299px;background:#000}
.packageArea li .packageInfo{width:52%;color:#222;}
.packageArea li .packageInfo h4{font-size:2rem;letter-spacing: -1.2px;margin-bottom:5px; line-height:1.5;}
.packageArea li .packageInfo > span{display:inline-block;font-size:1.2rem;letter-spacing: -0.6px;margin-bottom:15px}
.packageArea li .packageInfo .iconArea{margin-bottom:30px}
.packageArea li .packageInfo .lectureIcon{font-size:1.2rem;color:#fff;background:#222;padding:3px 10px;margin-right:10px;border-radius: 4px;}
.packageArea li .packageInfo .lectureIcon:last-child{margin-right:0}
.packageArea li .packageInfo .pText{font-size:1.4rem;line-height: 2.4rem;letter-spacing: -0.56px;}
.packageArea li .packagePrice{display:flex;flex-direction: column;}
.packageArea li .packagePrice span{font-size:1.6rem;color:#FF0000;letter-spacing: -0.8px;font-weight: bold;}
.packageArea li .packagePrice strong{margin-bottom:20px}
.packageArea li .packagePrice strong span{font-size:2.8rem;color:#000;line-height:41px;}
.packageArea li .packagePrice strong em{font-size:1.6rem;}
.packageArea li .packagePrice button{width:180px;height:40px;font-size:1.4rem;font-weight: bold;letter-spacing: -0.7px;border:1px solid #E1E1E1;border-radius: 4px;background: #fff;margin-bottom:5px;cursor: pointer;}
.packageArea li .packagePrice button.active, .packageArea li .packagePrice button:hover{background:#222;color:#fff}
.packageArea li .packagePrice button:last-child{margin:0}
.searchFail{font-size: 2rem; color: #FF0000;text-align: center;}
.searchTotalNo{font-size:2.4rem;letter-spacing: -0.48px;line-height: 100%}
.classTotlaNo{font-size:2rem;letter-spacing: -0.4px;line-height: 21.6px;border-bottom:1px solid #ccc;padding-bottom:20px;margin-bottom:20px}
.classTotlaNo span{font-size:1.6rem;letter-spacing: -0.32px;line-height: 21.6px;}

/* 검색 부분 교수, 교재 */
.iconArea{margin-bottom:24px}
.iconArea span{background:#222;font-size:1.2rem;letter-spacing: -0.6px;color:#fff;padding:4px 8px;border-radius: 4px;margin-right:3px}
.iconArea span:last-child{margin-right:0}
.teacherList{display: flex;flex-wrap: wrap;}
.teacherList li{position: relative;width:280px;height:400px;margin-right:20px;margin-bottom:25px;background:url('/asset/images/teacher/list_bg-d022e562988726878e9608adcff426ca.png');border-radius: 8px;padding: 24px 16px;box-sizing: border-box;overflow:hidden}
.teacherList li a{display:inline-block;width:100%;height:100%}
.teacherList li:nth-child(4n){margin-right:0}
.teacherList li img{position: absolute;bottom:-100px;right:-70px;width:95%}
.teacherList li strong{display:inline-block;font-size:2.4rem;color:#222;letter-spacing: -0.48px;margin-bottom:10px;}
.teacherList li p{font-size:1.4rem;letter-spacing: -0.28px;color:#222}
.teachingAids{display:flex;justify-content: flex-start;flex-wrap: wrap;}
.teachingAids li{display:flex;flex-direction: column;width: 24%;border-radius: 5px;overflow:hidden;margin-bottom:20px; cursor:pointer;padding:0 0.5%}
.teachingAids li img{width:100%;}
.teachingAids li .hover-box{border-radius: 4px;overflow:hidden;}
.teachingAids li .hover-box:hover{position: relative;background:#999;}
.teachingAids li .hover-box .bt-area{display:none;position:absolute;top:0;left:0;background:#0a0a01b0;width:100%;height:100%;color:#000;z-index: 1;}
.teachingAids li .hover-box:hover .bt-area{display:block}
.teachingAids li .hover-box .bt-area .bt{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%;}
.teachingAids li .hover-box .bt-area .bt button{color:#222;width:180px;margin-bottom:10px;font-size:16px;background:#fff;padding:8.5px 0;border-radius: 4px;}
.teachingAids li .hover-box .bt-area .bt button:hover{background:#222;color:#fff}
.teachingAids li .hover-box .bt-area .bt button:last-child{margin:0px}
.teachingAids .bookTitle{font-size:1.6rem;margin-top:20px;letter-spacing: -0.64px;}
.teachingAids .bookPrice{font-size:2.8rem;letter-spacing: -1.12px;color:#222;font-weight: bold;line-height:4.1rem;margin-top:5px}
.teachingAids .bookPrice span{font-size:1.6rem;color:#ff0000;letter-spacing: -0.8px;padding-left:10px;}
.teachingAids .bookPrice2{font-size:1.6rem;text-decoration:line-through;line-height:2.4rem;letter-spacing: -0.64px;color:#999}

.filterStickyArea{border: 1px solid #e1e1e1;padding: 25px;}
.filterStickyArea .filterBt {position: relative;text-align: left;cursor: pointer;font-size: 1.4rem;padding: 0;}
.filterStickyArea .filterBt.on:after {content: '\25b2';}
.filterStickyArea .filterBt:after {position: absolute;top: 4px;right: 0;content: '\25bc';font-size: 12px;}
.filterStickyArea h4{font-size: 1.8rem;}
.filterWrap{display: none;justify-content: space-between;}
.filterWrap.on {display: flex;margin-top: 20px;}
.filterLine{width:18%}
.filterLine label{display:inline-block;margin-bottom:5px;font-size:1.2rem}
.filterLine .search{width: 100%;box-sizing: border-box;border: 1px solid #e1e1e1;padding: 10px;}

.lectureInfo{display: flex;gap: 20px;font-size:1.3rem;margin-top:7px;}
.lectureInfo em{color:#00B1FF;}
.lectureInfo span{color:#333}

.hightlight{
	margin: 0 !important;
	animation: bgTwinkle 1.5s step-end infinite;
}
@keyframes bgTwinkle {
	50%{
		color:#ff0000;
	}
}

@media (max-width:1200px) {
    .spaceBetween{flex-direction: column;}
    .grayBg{padding:30px 0}
    .grayBg section{flex-direction: column;}
    .grayBg section .office{text-align:center}
    .grayBg section .office .hoursOperation{margin-bottom:20px}
    .grayBg section .office p{margin-bottom:20px}
    .grayBg section .classTel{width:85%}
    .grayBg section .classTel ul li{width:25%}

    .remoteService{text-align: center;}
    .remoteService h4{margin-bottom:20px;}
    .remoteService h4 br{display:none}
    .remoteService h4 strong{margin:0 6px}
    .remoteService button{margin-bottom:40px}
    .remoteServiceInfo{width:95%}
    .remoteServiceInfo ul li strong{font-size:1.8rem}
	
	.searchTop h2{font-size:1.8rem}
	.searchTotalNo{font-size:1.6rem}
	.searchFail{font-size:1.6rem}
    .faqLink {flex-wrap: wrap;justify-content: flex-start}
    .faqLink li { margin-bottom: 10px; }
    .customerTopSearch input[type="text"]{font-size:2rem}
    .customerTopSearch #searchWord:focus{outline:none}
    .customerLink li a:hover{top:0;}
    
    .softwareList li{width:45%;margin-bottom:50px}
    .softwareList li img{margin-right:20px}
    .softwareList li div h3{font-size:1.8rem;}
    .softwareList li div .softwareSummary{font-size:1.3rem;}
    .softwareList li div .linkArea a{font-size:1.3rem;}

    .packageArea li{flex-direction: row; padding:20px}
    .packageArea li .packageInfo{width:52%}
    .packageArea li .packageInfo .iconArea{display: flex;flex-wrap: wrap;}
    .packageArea li .packageInfo .lectureIcon{margin-bottom:5px}
	.packageArea li .packageInfo h4{font-size:1.8rem;}
	.packageArea li .packageInfo .pText{display:none;}
	.packageArea li .packageInfo > span{margin-bottom:0;}
	.packageArea li .packageImg{display:none;}
	.packageArea li .packagePrice{flex-direction: row;}
	.packageArea li .packagePrice span{font-size:1.2rem; display:none;}
	
	.packageArea li .packagePrice strong{margin:0}
	.packageArea li .packagePrice strong span{display:inline-block;font-size:1.8rem; line-height:2; margin-bottom:0;}
	.packageArea li .packagePrice strong em{margin-right:20px}
	.packageArea li .packagePrice button{width:auto; margin-left:5px; box-sizing:border-box; height:auto; padding:8px;}
	.packageArea li .packagePrice button:last-child{margin-left:5px; margin-bottom:5px;}
	
	.filterWrap.on {display: block;margin-top: 20px;}
	.filterLine{width:auto}
	
}
@media (max-width:767px) {
    .customerTop h2{font-size:2.4rem}
    .customerTop{margin:0 -20px;}
    .customerTab li a{font-size: 1.3rem;}
    .customerTop p{ padding:0 20px;}
    .customerTop p br{display:none;}
    .customerLink{display:block;flex-wrap: wrap;flex-direction: row; width:max-content;}
   /* .customerLink li{width:49%; height:40px; margin-bottom:40px;}*/
    /*.customerLink li a{padding:5px 0}*/
    .customerLink li a img{margin-bottom:15px}
    .customerLink li a h3{font-size:1.4rem;margin:0; font-weight:700}
    .customerLink li a p{display:none}
    /*.customerLink{}*/
    .customerLink li{width:auto; height:20px; display:inline-block; }
    .customerLink li a{position:relative; border:none; margin-right:20px;padding:5px 0}
    
    .grayBg{margin:0 -20px;}
    .grayBg section .office .officeTel{font-size:3rem}
    .grayBg section .office p{font-size:2rem}
    .grayBg section .classTel ul li{width:50%}
    .remoteService h4{font-size:3rem}
    .remoteServiceInfo ul{flex-wrap: wrap;flex-direction: column;}
    .remoteServiceInfo ul li{width:100%;margin-bottom:20px; border-radius:4px; padding:15px; box-sizing:border-box;}
    .remoteServiceInfo ul li strong{margin-bottom:5px}

    .customerTopSearch input[type="text"]{font-size:1.5rem}
    /*.customerLink li a span{display:none;}*/
    .customerLink li a span{font-size:3.1rem}
    
    /* FAQ */
    .tb1.answerTb tbody td .answerTop > span{width: 30%;font-size:1.2rem;}
	.tb1.answerTb tbody td .answerTop > em{width: 70%;font-size:1.2rem}
	.tb1.answerTb tbody td .hiddenTd span{font-size:1.2rem}
	.tb1.answerTb tbody td div > div > div{font-size:1.2rem}
	
    .softwareList li{width:100%;margin-bottom:40px}
    .softwareList li img{margin-right:10px}
    .softwareList li div h3{font-size:1.7rem;}
    .softwareList li div .softwareSummary{font-size:1.2rem;}
    .softwareList li div .linkArea a{font-size:1.2rem;}
    .customerBtn{overflow-x:scroll; margin:0px 0 20px !important}
    .customerBtn::-webkit-scrollbar{display:none;}
    

	.ban tbody th, .ban tbody td{font-size:1.3rem !important;}
	.ban img{width:25px}
	.ban th:first-child{width:15%;}
	.ban th:nth-child(2){width:45%;}
	.ban th:nth-child(3){width:40%;}
	
	.packageArea li{flex-direction:column; padding:15px;}
	.packageArea li .packageInfo h4{font-size:1.6rem;}
	.packageArea li .packageInfo{width:100%;}
	.packageArea li .packagePrice{flex-direction:row; width:100%;}
	.packageArea li .packagePrice strong{text-align:left; margin-right:0; width:70%; font-size:1.4rem;}
	.packageArea li .packagePrice strong em{font-size:1.4rem;}
	.packageArea li .packagePrice button{font-size:1.2rem;}
	
	
	/* 강사, 교재 검색 반응형 추가 */
	.teacherList li{width:100%; background-size:cover; margin:0 0 20px;}
    .teacherList li:nth-child(even){margin-right:auto}
    .teacherList li:nth-child(3n){margin-right:auto}
    .teacherList li strong{font-size:2rem}
    .teacherList li img{bottom: -50px;right: -50px;width:270px;}
    .teachingAids{width:100%}
    .teachingAids li{padding:15px 10px;width:41%}
    .teachingAids li .hover-box .bt-area .bt button{width: 100px;padding: 3px 0;}
    .teachingAids .bookTitle{font-size:1.3rem}
    .teachingAids .bookPrice{font-size:1.5rem}
    .teachingAids .bookPrice span{font-size:1.2rem}
    .teachingAids .bookPrice2{font-size:1.2rem;}
	
	.lectureInfo{flex-direction: column;gap:5px}

}
@media (max-width:480px) {
    .grayBg section .classTel ul li{width:50%}
    .remoteServiceInfo ul li strong{font-size:2rem}
    .remoteServiceInfo ul li p{font-size:1.2rem}

    .faqLink{justify-content: space-between;}
    .faqLink li{width:49% !important;justify-content: space-between;max-width: none;margin-right: 0;}
   	/*.faqLink li{width:100%;margin-right:0 !important}*/

    .customerTop p{word-break: keep-all; font-size:1.4rem;}
    .customerTopSearch{width:100%}
    .customerTopSearch input[type="text"]{font-size:1.2rem}

    .softwareList li{width:100%;margin-bottom:40px}
    
    .teacherList li img{bottom: -50px;right: -50px;width:280px;}

}
@media (max-width:320px){
	.teacherList li img{bottom: -50px;right: -50px;width:240px;}
}