.fp-viewing-section2 .header #gnb .wrap > ul > li > a span {color: #fff;}
.fp-viewing-section2 .header .hdWrap .srchBtn{color: #fff;}
.fp-viewing-section2 .header .hdWrap .user a{color: #fff;}
.fp-viewing-section2 .header .hdWrap .util .menuBtn .line{background: #fff;}

.fp-viewing-section3 .header #gnb .wrap > ul > li > a span {color: #fff;}
.fp-viewing-section3 .header .hdWrap .srchBtn{color: #fff;}
.fp-viewing-section3 .header .hdWrap .user a{color: #fff;}
.fp-viewing-section3 .header .hdWrap .util .menuBtn .line{background: #fff;}

.fp-viewing-section4 .header #gnb .wrap > ul > li > a span {color: #fff;}
.fp-viewing-section4 .header .hdWrap .srchBtn{color: #fff;}
.fp-viewing-section4 .header .hdWrap .user a{color: #fff;}
.fp-viewing-section4 .header .hdWrap .util .menuBtn .line{background: #fff;}

.fp-viewing-section5 .header #gnb .wrap > ul > li > a span {color: #fff;}
.fp-viewing-section5 .header .hdWrap .srchBtn{color: #fff;}
.fp-viewing-section5 .header .hdWrap .user a{color: #fff;}
.fp-viewing-section5 .header .hdWrap .util .menuBtn .line{background: #fff;}

/* 공통스타일 */
.pageTit {font-size: 2rem; font-family: 'SBAggro'; color: #fff;}
.tit_wrap {display: flex; justify-content: space-between; width: 100%;}
.btnMore {padding:0.65rem 1.5rem; border-radius: 1.5rem; font-family: 'SBAggro'; font-size: 0.9rem; transition: all 0.2s;}
.btnMore i{vertical-align: middle; margin-left: 0.2rem;}
.btnMore:hover,
.btnMore:focus{box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);}
.section3 .tit_wrap > .btnMore{background: #ffd6b5;}
.section4 .tit_wrap > .btnMore{background: #dcc8ff;}

/* section1 */
.section1 {position: relative; overflow: hidden;}
.section1 .inner{position: relative; display: flex; align-items: center; padding: 4rem 0;}
.section1 .inner .mainTxt {position: absolute; top: 13rem; height: fit-content;}
.section1 .inner .mainTxt::before{position: absolute; content: ''; width: 14.75rem; height: 8.2rem; top: -4rem; right: -50%; background: url(/images/web/hscredit/main/mapPlane.png) no-repeat; animation: flyAni 0.85s 1s infinite alternate;}
.section1 .inner .mainTxt h1 {font-family: 'SBAggro'; font-weight: 700; font-size: 3.75rem; margin-bottom: 2rem;}
.section1 .inner .mainTxt p{font-size: 1.2rem; color: #333; line-height: 1.8;}
.section1 .inner .mainTxt p:last-child{margin-top: 1.8rem;}
.section1 .inner .mVisual {height: 100%; margin-left: auto; }
.section1 .inner .mVisual::after{position: absolute; content: ''; width: 5.4rem; height: 4.55rem; top: 37%; right: 3.5rem; background: url(/images/web/hscredit/main/mapFish.png) no-repeat; animation: flyAni2 1.2s 1s infinite alternate; }
.section1 .inner .mVisual::before{position: absolute; content: ''; width: 5.2rem; height: 2.45rem; top: 55%; right: 7.5rem; background: url(/images/web/hscredit/main/mapBoat.png) no-repeat; animation: flyAni2 1.2s 1.3s infinite alternate; }
.section1 .inner .mVisual .mapImg{ display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%;}
.section1 .inner .mVisual .mapImg::before{position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: -4%; width: 100vw; height: 100vh; background: url(/images/web/hscredit/main/mapBg.png) no-repeat left center / auto 100%; z-index: -9;}
.section1 .inner .mVisual .mapImg img{display: block; max-width: 100%; max-height: 100%; }
.section1 .inner .shcoolSrch {position: absolute; right: 1rem; bottom: 8.25rem; width: 18.5rem; height: 2.85rem; line-height: 2.85rem; border-bottom: 2px solid #000; z-index: 1;}
.section1 .inner .shcoolSrch form{height: 100%;}
.section1 .inner .shcoolSrch input {width: calc(100% - 2rem); height: 100%; background: transparent; color: #000;}
.section1 .inner .shcoolSrch input::placeholder {font-size: 0.9rem; font-weight: 500; color: #3a3c47;}
.section1 .inner .shcoolSrch a {font-size: 1.8rem;}

@keyframes flyAni {
	0% {transform: translateY(0);}
	100% {transform: translateY(-14px);}
}

@keyframes flyAni2 {
	0% {transform: translateX(0);}
	100% {transform: translateX(-14px);}
}

/* 지도 지점 표시 */
.section1 .mVisual .spotWrap{position: absolute; bottom: 50%; right: 50%; width: fit-content; }
.section1 .mVisual .spotWrap .dots {font-size: 0; cursor: pointer;}
.section1 .mVisual .spotWrap .dots > img { transition: opacity 0.6s ease; opacity: 1;}
.section1 .mVisual .spotWrap .mapSpot .ovSch{position: absolute; width: max-content; padding: 0.15rem 0.4rem; background: #525354; color: #fff; font-size: 0.6rem; font-weight: 500; border-radius: 1rem; top: -68%; left: -50%; opacity: 0; cursor: pointer;visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
.section1 .mVisual .spotWrap .mapSpot	.ovSch.show{ opacity: 1; visibility: visible; }
.section1 .mVisual .spotWrap .schoolInfo{position: fixed; z-index: 9; width: 21.5rem; height: 13.75rem; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid #143567; border-radius: 0.6rem; padding: 0.75rem; display: none;}
.section1 .mVisual .spotWrap .mapSpot.active .schoolInfo {display: block;}

.section1 .mVisual .spotWrap .schoolInfo .scrollIn{max-height: 9.25rem; height: 100%; overflow-y: auto;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn .name{ display: flex; align-items: center; font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn .name img{flex-shrink: 0; display: block; max-width: 2rem; height: auto; margin-right: 0.5rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn .name .btn_sch{flex-shrink: 0; margin-left: auto; margin-right: 1.5rem; position: unset; display: block; text-align: center; font-size: 0.75rem; line-height: 1.2; background: #ececfb; color: #000; border-radius: 5rem; padding: 0.25rem 0.5rem; font-weight: 400; border: 1px solid #b4b4cf; }
.section1 .mVisual .spotWrap .schoolInfo .scrollIn .name .btn_sch i{color: #53538c;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn div{position: relative; margin-bottom: 0.4rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn .tit {display: inline-block; width: 2.5rem; height: 1.25rem; line-height: 1.25rem;  background: #3c3c3c; color: #fff; border-radius: 1rem; font-size: 0.75rem; text-align: center;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn ul,
.section1 .mVisual .spotWrap .schoolInfo .scrollIn a{position: absolute; top: 0; left: 3rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn a:hover,
.section1 .mVisual .spotWrap .schoolInfo .scrollIn a:focus{font-weight: 600 !important;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn ul li {line-height: 1.35rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn ul li em{position: relative; margin-right: 1rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn ul li em::before{position: absolute; content: ''; width: 1px; height: 10px; background: #cbd2da; top: 0.2rem; right: -0.5rem;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn::-webkit-scrollbar {width: 5px;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn::-webkit-scrollbar-thumb { background-color: #bcc3d0; border-radius: 10px;}
.section1 .mVisual .spotWrap .schoolInfo .scrollIn::-webkit-scrollbar-track {background-color: #e7eaef; border-radius: 10px;}
.section1 .mVisual .spotWrap .schoolInfo button {width: 100%; background: #d0eaff; line-height: 2.25rem; border: 1px solid #a8cce9; border-radius: 0.3rem; margin-top: 0.5rem; transition: all 0.2s;}
.section1 .mVisual .spotWrap .schoolInfo a.closeBt{ display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; background: #f0f0f0; position: absolute; top: 0.9rem; right: 0.5rem; font-size: 1.2rem; font-weight: 500; z-index: 1; border-radius: 50%;}
.section1 .mVisual .spotWrap .schoolInfo button:hover,
.section1 .mVisual .spotWrap .schoolInfo button:focus{background: #143567; border: 1px solid #143567; color: #fff;}
/* 반응형에서 학교 목록 */
.section1 .mVisual .spotWrap .schList {display: none;}

/* section2 */
.section2{position: relative; background: #0c3c6e;}
.section2 .inner{display: flex; flex-direction: column; align-content: center; justify-content: center;}

.mainChart{display: flex; flex-wrap: wrap; justify-content: space-between; }

.barWrap{ margin-left: 4rem; width:calc(100% - 40.2rem); display: flex; align-items: flex-end; justify-content: space-between; }

.yearBar{ flex-shrink: 0; width: 33.33%; text-align: center; padding: 0 1rem;}
.yearBar ul{display: flex;}
.yearBar ul li{ display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: center; flex:1; margin: 0 0.2rem;}
.yearBar ul li .label{font-family: 'SBAggro'; margin-top: 0.5rem; color: #fff; font-weight: 600; font-size: 0.8rem;}
.yearBar ul li .barBox{ width: 100%; height: 17rem; display: flex; flex-direction: column; justify-content: flex-end;}
.yearBar ul li .barBox .item{position: relative; cursor: pointer;}
.yearBar ul li .barBox .item:first-child{border-radius: 5rem 5rem 0 0;}
.yearBar ul li .barBox .item::before{opacity: 0; visibility: hidden; content: attr(data-value)"강좌"; position: absolute; left: 100%; top: 0; width: auto; height: auto; white-space: nowrap; padding: 0.2rem 0.7rem; background: #fff; border-radius: 0.25rem; z-index: 1; transition: 0.15s;}
.yearBar ul li .barBox .item::after{opacity: 0; visibility: hidden; content: '';width: 0.5rem;height: 0.5rem;position: absolute;left: 100%;top: 0.5rem;transform: translateX(-100%); display: block;border-top: 0.25rem solid transparent;border-bottom: 0.25rem solid transparent;border-right: 0.5rem solid #ffffff; transition: 0.15s;}
.yearBar ul li .barBox .item:hover::before,
.yearBar ul li .barBox .item:focus::before{opacity: 1; visibility: visible;}
.yearBar ul li .barBox .item:hover::after,
.yearBar ul li .barBox .item:focus::after{opacity: 1; visibility: visible;}
.yearBar .value1{background:url('/images/web/hscredit/main/pt01.png') #0085d9;} /*250227 접근성 수정*/
.yearBar .value2{background:url('/images/web/hscredit/main/pt02.png') #f0cd61;} /*250227 접근성 수정*/
.yearBar .value3{background: #3ec13b;}
.yearBar .value4{background:url('/images/web/hscredit/main/pt03.png') #ff8b66;} /*250227 접근성 수정*/
.yearBar .value5{background: url('/images/web/hscredit/main/pt04.png') #be8aff;} /*250227 접근성 수정*/

.yearBar ul li .barBox .item span {overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); position:absolute;} /*250325 접근성 수정*/

/*250324 접근성 수정*/
.yearBar:first-of-type ul li .barBox .item.value1::before {content: "오프라인-2022 " attr(data-value)"강좌" !important;}
.yearBar:first-of-type ul li .barBox .item.value2::before {content: "온라인-2022 " attr(data-value)"강좌" !important;}
.yearBar:first-of-type ul li .barBox .item.value3::before {content: "온라인(일과중)-2022 " attr(data-value)"강좌" !important;}
.yearBar:first-of-type ul li .barBox .item.value4::before {content: "교과-2022 " attr(data-value)"강좌" !important;}
.yearBar:first-of-type ul li .barBox .item.value5::before {content: "창체-2022 " attr(data-value)"강좌" !important;}

.yearBar:nth-of-type(2) ul li .barBox .item.value1::before {content: "오프라인-2023 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(2) ul li .barBox .item.value2::before {content: "온라인-2023 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(2) ul li .barBox .item.value3::before {content: "온라인(일과중)-2023 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(2) ul li .barBox .item.value4::before {content: "교과-2023 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(2) ul li .barBox .item.value5::before {content: "창체-2023 " attr(data-value)"강좌" !important;}

.yearBar:nth-of-type(3) ul li .barBox .item.value1::before {content: "오프라인-2024 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(3) ul li .barBox .item.value2::before {content: "온라인-2024 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(3) ul li .barBox .item.value3::before {content: "온라인(일과중)-2024 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(3) ul li .barBox .item.value4::before {content: "교과-2024 " attr(data-value)"강좌" !important;}
.yearBar:nth-of-type(3) ul li .barBox .item.value5::before {content: "창체-2024 " attr(data-value)"강좌" !important;}
/*//250324 접근성 수정*/

.yearBar .yearMark{font-family: 'SBAggro'; color: #fff; display: inline-flex; align-items: center; justify-content: center; margin: 2rem auto 0; background: #1760ac; border-radius: 5rem; font-size: 1.1rem; padding: 0.25rem 0.7rem;  }


.circleWrap{width: 20.45rem; text-align: center; margin-right: 4rem;}
.circleWrap .yearMark{font-family: 'SBAggro'; color: #0c3c6e; display: inline-flex; align-items: center; justify-content: center; margin: 2rem auto 0; background: #fff; border-radius: 5rem; font-size: 1.1rem; padding: 0.25rem 0.7rem; font-weight: 800;}
 
.tagWrap{width: 100%; margin-top: 5rem;}
.tagWrap ul{padding: 0.6rem 2rem; border: 1px solid #55779a; border-radius: 5rem; display: flex; align-items: center; justify-content: flex-start; color: #fff;}
.tagWrap ul li{margin-right: 3rem;}
.tagWrap ul li em{display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.5rem;}
.tagWrap ul li.value1 em{background:url('/images/web/hscredit/main/pt01.png') #0085d9;} /*250227 접근성 수정*/
.tagWrap ul li.value2 em{background:url('/images/web/hscredit/main/pt02.png') #f0cd61;} /*250227 접근성 수정*/
.tagWrap ul li.value3 em{background: #3ec13b;}
.tagWrap ul li.value4 em{background:url('/images/web/hscredit/main/pt03.png') #ff8b66;} /*250227 접근성 수정*/
.tagWrap ul li.value5 em{background:url('/images/web/hscredit/main/pt04.png') #be8aff;} /*250227 접근성 수정*/

/* section3 */
.section3 {background: #ec891f; position: relative; padding-top: 100px;}
.section3 .pageTit {color:#000000;} /*250227 접근성 명도대비 수정*/
.section3 .fp-overflow {overflow-x: hidden;}
.section3 .inner {display: flex; flex-direction: column; justify-content: center;}
.section3 .inner::before{position: absolute; content: ''; width: 31.45rem; height: 12.5rem; right: -15rem; bottom: 0; background: url(/images/web/hscredit/main/section3_deco.png) no-repeat; z-index: 1;}
.section3 .simulateBox {position: relative; width: 100%; overflow: hidden; padding-bottom: 1rem; margin-top: 4rem;}
.section3 .simulateBox .sildeWrap {margin-top: 2rem;}
.section3 .simulateBox .sildeWrap .slick-track {display: flex; width: 100% !important;}
.section3 .simulateBox .sildeWrap > .slick-list {overflow: visible !important;}
.section3 .simulateBox .sildeBox .item {width: 23%; margin-right: 2%; border-radius: 1rem; box-shadow: 6px 6px 6px rgba(71,41,10,0.17);}
.section3 .simulateBox .sildeBox .item .img{position: relative; font-size: 0; display: block; height: 12.5rem; border-radius: 1rem; overflow: hidden;}
.section3 .simulateBox .sildeBox .item .img img{position: relative; left: 50%; transform: translateX(-50%); }
.section3 .simulateBox .sildeBox .item .txt {padding: 2.5rem 0.9rem 2rem 0.9rem; background: #fff; margin-top: -1rem;border-radius: 0 0 1rem 1rem;}
.section3 .simulateBox .sildeBox .item .txt span {display: -webkit-box; -webkit-box-orient: vertical; width: 100%; max-width: 100%; height: 5rem; line-height: 1.3rem; word-wrap: break-word; text-overflow: ellipsis; -webkit-line-clamp: 4; overflow: hidden; background: #fff;}
.section3 > .slick-arrow {display: none;}
.section3 .simulateBox .control { display: flex; align-items: center; width: 100%; margin-top: 3.5rem; }
.section3 .simulateBox .control .barBox {position: relative;height: 4px;width: calc(100% - 5rem);background: #d67717;margin-right: 1rem;}
.section3 .simulateBox .control .barBox .bar { width: 0; height: 100%; background: #b45b0a; border-radius: 4px;}
.section3 .simulateBox .control .barBox.goSld .bar {animation: gage 6s forwards linear; }
.section3 .simulateBox .control .barBox.goSld .bar::after { content: ''; position: absolute; top: 50%; left: 0;  width: 19px; height: 19px; background: url(/images/web/hscredit/main/barDeco.png) no-repeat; border-radius: 50%; transform: translate(-50%, -50%); animation: moveCircle 6s forwards linear;}
.section3 .simulateBox .control .buttonWrap {position:relative;text-align: center;z-index: 1;}/*250306 웹접근성 정지기능버튼  */
.section3 .simulateBox .control .buttonWrap button{display: inline-block;font-size: 2rem;background-color: #ffd6b5;border-radius: 50%;}


@keyframes moveCircle {
	from {
			left: 0;
	}
	to {
			left: calc(100% - 10px);
	}
}

@keyframes gage {
	from { width: 0; }
	to { width: 100%; }
}

/* section4 */
.section4 {position: relative; background: #9963fe;}
.section4 .fp-overflow{overflow-x: hidden;}
.section4 .inner{display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.section4 .slideList{position: relative; margin-top: 4rem;}
.section4 .listBox {height: 100%;}
.section4 .slick-list {overflow: hidden;}
.section4 .slick-track{margin-top: 1.7rem;}
.section4 .listBox .item{position: relative; display: inline-block; width: 24rem; height: 19rem; margin-right: 3.5rem; transition: all 0.3s;}
.section4 .listBox .item a{position: relative; display: block; width: 100%; height:100%;}
.section4 .listBox .item a p.img{position: relative; width: 100%; height: 15.5rem; border-radius: 2rem; background: rgba(0,0,0,0.5); overflow: hidden;}
.section4 .listBox .item a p.img img{ position: absolute; top: 50%; left: 50%; height: auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.section4 .listBox > button{ position:absolute; top:calc(50% - 30px); width:43px; height:60px; font-size:0; line-height:0; z-index: 1; opacity: 0; }
.section4 .listBox .item a .txt {display: flex; justify-content: space-between; color: #fff; font-size: 1.1rem;  margin-top: 1.8rem;}
.section4 .listBox .item a .txt p{width: calc(100% - 3rem); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.section4 .listBox > button.slick-disabled{ display: none !important;}
.section4 .slick-dots{max-width:1530px; position:relative; text-align: center; margin-top:30px;}
.section4 .slick-dots li{display:inline-block; margin:0 5px; }
.section4 .slick-dots li button{ width:13px; height:13px; border-radius:20px; background:#b892fe; font-size:0; line-height:0; transition: all 0.3s;}
.section4 .slick-dots li.slick-active button{ width:1.8rem; background:#5b19d1;}
.section4 .slick-prev{position: absolute; width: 3rem; height: 3rem; line-height: 3rem; border-radius: 50%; font-size: 1rem; background: #fff; opacity: 0.8; top: 48%; z-index: 1;}
#galleryPrev{left: -1.5rem;}
#galleryNext{right: -0.5rem; }
/* .section4 .listBox .slick-list {overflow:visible;} */
.section4 .dots{ margin:55px 0 80px; text-align: center;}

/* section4 active */
.section4 .listBox .item a,
.section4 .listBox .item a:before,
.section4 .listBox > button{ transition: all 0.2s;}
.section4 .listBox .item.active a .txt{font-weight: 600;}
.section4 .listBox .item.active a .img {box-shadow: 10px 10px 0 rgba(0,0,0,0.16);}
.section4 .listBox .item.active {margin-top: -1.5rem;}

/* section5 */
.section5 {position: relative; background: #143a99;}
.section5 .inner{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.section5 .inner .promtText{position: relative; font-size: 1.9rem; font-weight: 100; line-height: 1.6; color: #fff; text-align: center; margin-bottom: 7.7rem;}
.section5 .inner .promtText::before {position: absolute; content: ''; width: 67px; height: 10px; bottom: -3.9rem; left: 50%; transform: translateX(-50%); background: url(/images/web/hscredit/main/section5_deco.png);}
.section5 .inner .promtText strong{font-weight: 500;}

/* btnTop */
.btnTop { display: none; position: fixed; right: 2rem; bottom: 2rem; z-index: 13;}
.btnTop span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: #fff; background: #2c3131; font-size: 0.75rem; border-radius: 50%; text-align: center; opacity: 0.8; transition: all 0.15s; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);}
.btnTop:hover span { opacity: 1; }

/* 반응형 */
@media (max-width: 1800px) {
	/* 공통 */
	.section .inner {padding-left: 6.5rem; padding-right: 1rem;}
	.section4 .inner {padding-left: 7.5rem; padding-right: 1rem;}

	/* section3 */
	.section3 .simulateBox {width: calc(100% + 0.7rem);}

	/* section4 */
	.section4 .slideList {width: 100%;}
	.section4 .listBox {width: 100%;}
	.section4 .listBox .slick-list {overflow: hidden; width: 100%;}
	.section4.active .listBox .item {width: calc(100% / 3); }
	.section4 .listBox .item a p.img {height: 12rem;}
	#galleryPrev {top: 46%; left: 6rem;}
	#galleryNext {top: 46%; right: 3rem;}
}

@media (max-width: 1600px) {
	/* section1 */
	.section1 .inner .mainTxt::before {right: -135%;}
	.section1 .inner .mainTxt h1{font-size: 2.5rem; margin-bottom: 1rem;}
	.section1 .inner .mainTxt p {font-size: 1rem; line-height: 1.6;}
	.section1 .inner .mainTxt p:last-child{margin-top: 1rem;}

	/* section2 */
	.barWrap{margin-left: 1rem; width: calc(100% - 33rem);}
}

@media (max-width: 1440px) {
	/* section1 */
	.section1::before {right: calc(50% - 60rem);}
	.section1 .inner .mainTxt h1{font-size: 2rem; margin-bottom: 1rem;}
	.section1 .inner .mainTxt p {font-size: 1rem;}
	.section1 .inner .mainTxt p:last-child{margin-top: 1rem;}
	.section1::after {left: calc(50% + 34rem); }

	/* section2 */
	.barWrap{margin-left: 0; width: calc(100% - 20.45rem); padding-right: 2rem;}
	.circleWrap{margin-right: 0;}

	/* section4 */
	.section4 .slick-dots{max-width: 100%; width: 100%;}
}

@media (max-width: 1340px) {
	/* 공통 */
	.section .inner {padding: 0;}
	.pageTit{font-size: 1.7rem;}
	.tit_wrap{ align-items: center;}

	/* section1 */
	.section1 {background: linear-gradient(132deg, #fff 61.2%, #8dcdff 54.8%);}
	.section1 .inner .mVisual .mapImg::before {top: 39%; left: 10%; height: 113%;}
	.section1 .inner {padding-left: 1rem;}
	.section1 .inner .mVisual {position: relative; bottom: 0; transform: translate(10%, 10%); top: auto;}
	.section2, .section3, .section4 {padding: 2rem 1rem;}

	/* section3 */
	.section3 .inner::before {display: none;}
	.section3 .simulateBox {margin-top: 0;}
	.section3 .simulateBox .control {margin-top: 2rem;}

	/* section4 */
	.section4 .slideList {width: calc(100% + 3.5rem); margin: 0 -1.75rem; margin-top: 0.5rem; padding: 0 1rem;}
	.section4 .listBox .item {padding: 0 1.75rem; margin-right: 0; width: calc(100% / 3); height: 17rem;}
	#galleryPrev {top: 40%; left: 0; width: 2.2rem; height: 2.2rem; line-height: 2.2rem;}
	#galleryNext {top: 40%; right: 0; width: 2.2rem; height: 2.2rem; line-height: 2.2rem;}
	.section4.active .slick-dots{transform: translateY(-1rem);}

	/* section5 *//*250401*/
	.section5 {padding: 4rem 1rem;}
	.section5 .inner > .promtText {width: auto; font-size: 1.5rem; line-height: 1.3; margin-bottom: 7rem;}
	.section5 .inner p {width: 13rem;}
	.section5 .inner p > img {width:9rem;}
	.web_wa_main {width:2.5rem; transform:translateY(.2rem);}
}

@media (max-width: 1240px) {

	/* section1 */
	.section1 .inner .mVisual {transform: translate(5%, 10%);}
	.section1 .inner .mainTxt {top: 8rem;}

	/* section2 */
	.section2 .yearCont ul li p img{width: 100%;}

	.section4 .listBox .item a .txt p{width: 100%;}
	.section4 .listBox .item a .txt span{display: none;}
}

@media (max-width: 1140px) {
	/* section1 */
	.section1 .inner .mVisual {transform: translate(0, 10%);}

	/* section2 */
	.yearBar{padding: 0 0.5rem;}
}

@media (max-width: 1024px) {
	/* section1 */
	.section1{ padding: 1rem; background: url(/images/web/hscredit/main/reactBg.png) no-repeat right 0 top 5rem; background-size: contain; }
	.section1 .inner .mVisual::after{display: none;}
	.section1 .inner .mVisual::before{display: none;}
	.section1 .inner .mainTxt::before { width: 12.75rem; height: 6.2rem; top: 1rem; right: -133%; background-size: contain;}
	.section1::before {display: none;}
	.section1 .inner {padding-left: 0;}
	.section1 .inner .mainTxt {top: 5.3rem;}
	.section1 .inner .mVisual {width: 100%; height: 25rem; transform: translate(0, 0); box-sizing: border-box;}
	.section1 .inner .mVisual .mapImg img {display: none;}
	.section1 .inner .mVisual .mapImg::before {display: none;}
	.section1 .mVisual .spotWrap {width: 100%; right: auto; bottom: 1rem;}
	.section1 .mVisual .spotWrap .mapSpot .box{display: none;}
	.section1 .mVisual .spotWrap .schoolInfo { width: 100%; left: 0; right: auto; top: auto; bottom: 0;}
	.section1 .inner .shcoolSrch { width: 14rem; bottom: 4.8rem; right: 0; transform: translateX(0); left: 0;}
	.section1 .mVisual .spotWrap .schoolInfo a.closeBt {display: none;}

	/* section2 */
	.barWrap{width: 100%; padding-right: 0; order: 2; justify-content: center;}
	.yearBar{max-width: 13rem;}
	.circleWrap{width: 100%; order: 3; margin-top: 6rem; margin-bottom: 4rem;}
	.tagWrap{order: 1; margin: 2rem 0 1rem;}

	/* section3 */
	.section3 .simulateBox .sildeBox .item .img {height: 9.5rem;}

	/* section4 */
	#galleryPrev {top: 39%;}
	#galleryNext {top: 39%;}
}

@media (max-width: 768px) {
	/* 공통 */
	.tit_wrap {flex-wrap: wrap;}
	.pageTit {font-size: 1.2rem;}
	.btnMore { padding: 0.35rem 0.9rem; font-size: 0.8rem;}

	/* section1 */
	.section1 .inner .mainTxt::before { width: 10.75rem; height: 4.2rem; right: -113%;}
	.section1 .inner .mainTxt h1 { font-size: 1.7rem; margin-bottom: 0.5rem;}
	.section1 .inner .mainTxt p {font-size: 0.85rem; line-height: 1.4;}
	.section1 .inner .mainTxt p:last-child {margin-top: 0.5rem;}
	.section1 .inner .shcoolSrch { height: 2.55rem; bottom: 7.8rem;}
	.section1 .inner .shcoolSrch form {display: flex; align-items: center;}
	.section1 .inner .shcoolSrch a { font-size: 1.4rem;}

	/* section2 */
	.barWrap{flex-wrap: wrap;}
	.yearBar{width: 50%; margin-bottom: 0.5rem;}
	.tagWrap ul{flex-wrap: wrap;}
	.tagWrap ul li{margin-right: 1rem;}

	/* section3 */
	.section3 .simulateBox .sildeBox .item{margin-right: 3%;}

	/* section4 */
	.section4 .listBox .item {height: auto;}
	.section4 .listBox .item a .txt { font-size: 1rem; margin-top: 1rem;}
	.section4.active .slick-dots {margin-top: 1rem;}
	#galleryPrev {top: 43%;}
	#galleryNext {top: 43%;}

	/* section5 */
	.section5 .inner > .promtText {font-size: 1.3rem; line-height: 1.4; word-break: keep-all;}
}

@media (max-width: 580px) {
	/* section1 */
	.section1 {height: 32rem; background: url(/images/web/hscredit/main/reactBg.png) no-repeat right 0 bottom 0; background-size: 75%;}
	.section1 .inner .mainTxt {width: 100%; left: 0; transform: translateX(0); text-align: left;}
	.section1 .inner .mainTxt p br{display: block;}
	.section1 .inner .mainTxt p:last-child {margin-top: 0.5rem;}
	.section1 .inner .shcoolSrch {display:none; bottom: 12.8rem;} /*241219 학교 검색창 숨김처리*/
	.section1 .inner .mainTxt::before {right: 10%;}

	/* section2 */
	.circleWrap .mapWrap img{display: block; width: 100%; height: auto;}
	.tagWrap ul{border-radius: 0.5rem; padding: 0.5rem;}

	/* section4 */
	.section4 .slick-dots {margin-top: 15px;}
	.section4 .slick-dots li.slick-active button {border-radius: 20px; width: 1.4rem;}
	.section4 .slick-dots li button{ width:9px; height:9px; border-radius:50%; padding: 0;}

	/* section5 */
	.section5 .inner > .promtText {font-size: 1.1rem;}
}

@media (max-width: 480px) {
	.pageTit {font-size: 1.1rem;}

	/* section1 */
	.section1 { height: 31rem; background: url(/images/web/hscredit/main/reactBg.png) no-repeat right 0 bottom 0; background-size: 75%;}
	.section1 .inner .shcoolSrch {bottom: 12.8rem; left: 0;}
	.section1 .inner .mainTxt::before {right: -7%;}

	/* section2 */
	.section2 .yearCont {margin-top: 1.3rem;}

	/* section3 */
	.section3 .simulateBox {width: 100%;}
	.section3 .simulateBox .sildeWrap {margin-top: 1rem;}
	.section3 .simulateBox .sildeBox .item{ margin-right: 0.3rem;}

	/* section4 */
	.section4 .slideList{margin-top: 0;}
}

@media (max-width: 430px) {
	.section2 .inner {gap: 0.5rem;}
}

@media screen and (max-width:420px) {
	
	.yearBar{width: 100%; max-width: 15rem;}
	
}

@media (max-width: 380px) {
	.section1 { background-size: 80%;}
	.section1 .inner .shcoolSrch {bottom: 12.1rem;}
	.section1 .inner .mainTxt::before {right: -19%;}
}

@media (max-width: 360px) {
	.section1 {height: 29rem; background-size: 85%;}
	.section1 .inner .mainTxt {top: 4.3rem;}
	.section1 .inner .shcoolSrch {bottom: 11.9rem;}
	.section1 .inner .mainTxt::before{display: none;}
}


.tooltip {display: none; position: absolute; background-color: #333; color: #fff;  padding: 5px; border-radius: 5px; font-size: 12px;z-index: 1000;}