@charset "utf-8";body { overflow-x: hidden; } 
/* main banner */
.mainSec { width: 100%; height: 700px; } 

.mainSec > div,
.mainSec > div > div { height: 100%; } 
.slide_wrapper { display: flex; position: relative; justify-content: space-between; } 
.slide_wrapper .main_slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } 

.main_slide .slide_item .innerBox { display: flex; position: absolute; bottom: 0; left: 36%; width: 52%; height: calc(100% - 70px); align-items: center; justify-content: space-between; } 
.slide_item .innerBox .txt_wrap { width: 70%; z-index: 10; } 
.slide_item.swiper-slide-active .innerBox .txt_wrap { -webkit-animation: heorRight 0.8s ease-in-out forwards; animation: heorRight 0.8s ease-in-out forwards; } 
.slide_item .innerBox .txt01 { font-size: 15px; margin-bottom: 58px; } 
.slide_item .innerBox .txt02 { font-size: 43px; line-height: 56px; } 
.slide_item .innerBox .txt03 { color: rgba(255,255,255,0.6); font-size: 16px; margin-top: 18px; margin-bottom: 40px; } 
.slide_item .innerBox .arrow { width: 64px; height: 24px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section01/arrow.png"); } 

.slide_item .innerBox img { object-fit: contain; } 
.slide_wrapper .sub_slide { position: relative; left: 4%; height: auto; margin: 0; overflow: unset; } 
.sub_slide .swiper-wrapper { position: relative; top: 31%; height: auto; align-items: center; justify-content: center; flex-direction: column; } 
.sub_slide .swiper-wrapper:before { position: absolute; top: 0; right: -2vw; width: 1px; height: 95%; background: rgba(255,255,255,0.5); content: ''; z-index: 5; } 
.sub_slide_item { flex-basis: min-content; cursor: pointer; } 
.sub_slide_item > div { display: flex; align-items: center; justify-content: flex-start; } 
.sub_slide_item > div > img { margin-right: 20px; } 
.sub_slide_item > div > p { color: rgba(255,255,255,0.5); font-size: 15px; } 
.sub_slide_item.swiper-slide-thumb-active > div > p { color: #fff; } 

/* main img */
.ban01 .icon_box img { position: absolute; transition: all 0.3s; } 
.ban01 .icon_box .i01 { top: 50%; right: 0; animation: Triangle 5s infinite linear; transform: translate(-50%); } 
.ban01 .icon_box .i02 { top: 30%; left: 20px; animation: Triangle 5s infinite linear; } 
.ban01 .icon_box .i03 { bottom: 30%; left: 40px; animation: Triangle 5s infinite linear; } 
.ban01 .icon_box .i04 { bottom: 50px; left: -30px; animation: Triangle 5s infinite linear; } 
.ban02 .img { position: relative; width: 50%; } 
.ban02 .device { width: 188px; height: 365px; margin: 0 auto; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section01/02_device.png"); filter: drop-shadow(8px 53px 59px #000); } 
.ban02 .img .icon_box img { position: absolute; opacity: 0; } 
.ban02 .img .icon_box img.i01 { top: 10%; right: 1vw; width: 10vw; animation: ani01 2.5s 0.3s ease-in-out infinite; max-width: 188px; min-width: 120px; } 
.ban02 .img .icon_box img.i02 { right: 4vw; bottom: 20%; width: 8vw; animation: ani01 2.5s 0.9s ease-in-out infinite reverse; max-width: 130px; min-width: 100px; } 
.ban02 .img .icon_box img.i03 { top: 35%; left: 2vw; width: 10vw; animation: ani01 2.5s ease-in-out infinite reverse; max-width: 159px; min-width: 110px; } 
.ban02 .img .icon_box img.i04 { bottom: 10%; left: 5vw; width: 7vw; animation: ani01 2.5s 0.6s ease-in-out infinite reverse; max-width: 117px; min-width: 90px; } 
.ban02 .img .icon_box img.i05 { top: 10%; left: 10%; width: 5vw; animation: ani02 2.5s ease-in-out infinite reverse; max-width: 59px; min-width: 40px; } 
.ban02 .img .icon_box img.i06 { right: 8%; bottom: 41%; width: 5vw; animation: ani02 2.5s 0.6s ease-in-out infinite; max-width: 59px; min-width: 40px; } 
.ban02 .img .icon_box img.i07 { right: 15%; bottom: 7%; width: 5vw; animation: ani02 2.5s 0.9s ease-in-out infinite; max-width: 59px; min-width: 40px; } 
.ban02 .img .icon_box img.i08 { bottom: 20%; left: 5%; width: 5vw; animation: ani02 2.5s 0.6s ease-in-out infinite; max-width: 59px; min-width: 40px; } 

.ban03 .img .icon_box .i01 { position: absolute; right: 0; bottom: 27%; animation: roccat 2.5s infinite ease-in-out; z-index: -1; } 
.ban04 .img { position: relative; width: 50%; height: 100%; } 
.ban04 .img > .bg { position: absolute; top: 6vw; left: 0; transform: scale(2); } 
.ban04 .img > .man { position: absolute; right: -1%; bottom: -76px; } 
.ban04 .img .icon_box img { position: absolute; animation: bigger 1.5s ease-in-out reverse infinite; } 
.ban04 .img .icon_box .i01 { top: 3.7vw; left: -5.5vw; } 
.ban04 .img .icon_box .i02 { top: 1.5vw; left: -1.8vw; animation-delay: 0.2s; } 
.ban04 .img .icon_box .i03 { top: 6vw; left: -1.5vw; animation-delay: 0.4s; } 
.ban04 .img .icon_box .i04 { top: 6.8vw; left: 2.9vw; animation-delay: 0.5s; } 
.ban04 .img .icon_box .i05 { top: 1.2vw; left: 6.6vw; animation-delay: 0.7s; } 
.ban04 .img .icon_box .i06 { top: 1.7vw; right: 1.9vw; animation-delay: 0.1s; } 
.ban04 .img .icon_box .i07 { top: 4.3vw; right: 5.4vw; animation-delay: 0.1s; } 
.ban04 .img .icon_box .i08 { top: 6.8vw; right: 3.2vw; animation-delay: 0.4s; } 
.ban04 .img .icon_box .i09 { top: 5.5vw; right: -1vw; } 
.ban04 .img .icon_box .i10 { top: 2vw; right: -3.2vw; animation-delay: 0.5s; } 
.ban05 .img { display: flex; position: relative; align-items: center; justify-content: center; z-index: 1; } 
.ban05 .img img.card { animation: rotate3d 5s 0.3s ease-in-out infinite; z-index: 5; /* filter: drop-shadow(8px 53px 59px #333); */}
.ban05 .img img.i01 { position: absolute; top: 50%; left: -49%; transform: translateY(-50%); z-index: -1; } 
.ban05 .img img.i02 { position: absolute; top: 15%; left: 15%; z-index: -1; } 

.progress { position: absolute; bottom: 8%; left: 0; width: 100%; height: 5px; background: rgba(255,255,255,0.1); z-index: 1; border-radius: 2px; overflow: hidden; } 
.progress:before { position: absolute; bottom: 0; left: 0; width: 0; height: 5px; background: rgba(255, 255, 255, 0.4); content: ''; z-index: 2; } 
.slide_item.swiper-slide-active .progress:before { width: 100%; -webkit-transition: width 5s ease; transition: width 5s ease; } 

/* section2 */
/* 공통 */
.sec2 .content { margin-top: 150px; } 

.sec2 .topTxt { position: relative; width: 100%; } 
.sec2 .topTxt .contTit { display: flex; align-items: center; justify-content: center; } 

.sec2 .topTxt .contTit h3 { color: #222222; font-weight: 700; font-size: 43px; margin-left: 30px; text-transform: uppercase; } 
.sec2 .topTxt .moreBtn { position: absolute; top: 50%; right: 0; color: #bbb; font-weight: 700; font-size: 17px; transform: translateY(-50%); } 
.sec2 .topTxt .moreBtn:hover { border-bottom: 1px solid #bbb; } 
.sec2 .class_wrap { margin-top: 70px; } 
.sec2 .class_wrap ul { display: flex; align-items: flex-start; justify-content: space-between; } 
.sec2 .class_wrap li { position: relative; width: 23%; } 
.sec2 .class_wrap li:hover .img { border: 4px solid #fb51a9; } 
.sec2 .class_wrap li .img { position: relative; width: 100%; height: 400px; border: 4px solid #ffdbee; background: #ffdbee; border-radius: 10px; overflow: hidden; z-index: 0; } 

.sec2 .class_wrap li .img .bgTxt { position: absolute; top: 50%; left: 0; width: 100%; color: rgba(255,255,255,0.43); font-weight: 700; font-size: 46px; text-align: center; content: 'HEY CLASS'; transform: translateY(-50%); z-index: -1; } 
.sec2 .class_wrap li .img img { display: block; height: 100%; margin: 30px auto 0; z-index: 2; margin-top: 50px; object-fit: cover; transform: scale(1.1); } 
.sec2 .class_wrap .heart { position: absolute; top: 15px; right: 15px; width: 41px; height: 36px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/speaker_01.png"); z-index: 15; cursor: pointer; } 
.sec2 .class_wrap .heart.active { background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/speaker_03.png"); } 
.sec2 .class_wrap .txt { margin-top: 20px; } 
.sec2 .class_wrap .txt .c_name { width: 100%; height: 38px; background: #2d2d2d; color: #fff; font-size: 19px; line-height: 40px; text-align: center; border-radius: 19px; } 
.sec2 .class_wrap .txt .c_teacher { margin: 10px 0 5px; color: #2d2d2d; font-size: 20px; text-align: center; } 
.sec2 .class_wrap .txt .c_tags { text-align: center; } 
.sec2 .class_wrap .txt .c_tags span { color: #bbbbbb; font-size: 20px; } 
/* 개별 sec2 cont1 */
.contTit .icon { position: relative; } 
.content .icon > img { position: absolute; } 
.sec2 .cont01 .contTit .icon { width: 84px; height: 58px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/speaker_i.png"); } 
.cont01 .icon > img { opacity: 0; } 
.cont01 .icon > .i01 { left: 30%; width: 33px; animation: heartMove 1s 0.1s ease-in-out infinite; } 
.cont01 .icon > .i02 { left: 20%; width: 18px; animation: heartMove 1s 0.3s ease-in-out infinite; } 
.cont01 .icon > .i03 { left: 20%; width: 12px; animation: heartMove 1s 0.5s ease-in-out infinite; } 
.cont01 .icon > .i04 { left: 70%; width: 15px; animation: heartMove 1s 0.7s ease-in-out infinite; } 
.cont01 .icon > .i05 { top: 0; left: 60%; width: 18px; animation: heartMove 1s 0.4s ease-in-out infinite; } 
/* 개별 sec2 cont2 */
.sec2 .cont02 .contTit .icon { width: 84px; height: 58px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/clock_i.png"); } 

.cont02 .icon .i01 { top: 25%; left: 50%; transform: translateX(-50%); } 
.cont02 .icon .minute { position: absolute; bottom: 23%; left: 49%; width: 2px; height: 16px; background: #000; animation: seconds 60s steps(60, end) 0s infinite; transform-origin: top left; transform: rotate(120deg); } 
.cont02 .icon .minute:after { position: absolute; bottom: 50%; left: 50%; width: 8px; height: 8px; border: 2px solid #000; background: #fff; content: ''; border-radius: 50%; transform: translate(-50%,-50%); } 

/* 개별 sec2 cont3 */
.sec2 .cont03 .contTit .icon { width: 78px; height: 63px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont03/file_i.png"); } 
.sec2 .cont03 .cont3_wrap ul { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 70px; } 
.sec2 .cont03 .cont3_wrap li { position: relative; width: 32%; } 
.sec2 .cont3_wrap li .img { position: relative; height: 557px; margin-bottom: 30px; border-radius: 10px; overflow: hidden; } 
.sec2 .cont3_wrap li .img > img { display: block; position: relative; width: 100%; height: 100%; object-fit: cover; } 
.sec2 .cont3_wrap li .img > img:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,45,45,0.5); content: ''; z-index: 2; } 

.sec2 .cont3_wrap li .icon_wrap { display: flex; position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: rgba(255,255,255,0.8); align-items: center; justify-content: flex-start; } 

.sec2 .cont3_wrap li .icon_wrap img { display: inline-block; width: 59px; height: 57px; margin: 0 7px; object-fit: contain; } 
.sec2 .cont3_wrap li .txt { margin-top: 20px; } 

.sec2 .cont3_wrap li .c_name { height: 80px; color: #222; font-size: 26px; } 

.sec2 .cont3_wrap li .c_subTxt { color: #bbb; font-size: 20px; } 
.cont03 .icon > img { opacity: 0; } 

.cont03 .icon > .i02 { left: 20%; animation: heartMove 1s 0.3s ease-in-out infinite; } 

.cont03 .icon > .i03 { left: 70%; animation: heartMove 1s 0.5s ease-in-out infinite; } 

.cont03 .icon > .i04 { left: 30%; animation: heartMove 1s 0.7s ease-in-out infinite; } 
/* 개별 sec2 cont4 */

.sec2 .cont04 .contTit .icon { width: 64px; height: 64px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont04/dot_i.png"); } 
.sec2 .cont04 .contTit .icon > img { opacity: 0; } 
.sec2 .cont04 .contTit .icon > .i01 { top: 30%; right: -50px; animation: cont5Ani 1s ease-in-out infinite; } 
.sec2 .cont04 .contTit .icon > .i02 { top: -30px; right: -30px; animation: cont5Ani 1s 0.3s ease-in-out infinite; } 
.cont4_wrap ul { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-top: 70px; } 
.cont4_wrap ul li { width: 24%; height: 80vh; } 
.cont4_wrap ul li > div { position: relative; width: 100%; border-radius: 10px; overflow: hidden; } 
.cont4_wrap ul li > div:first-child { margin-bottom: 7%; } 
.cont4_wrap ul li > div.narrow { height: 40%; } 
.cont4_wrap ul li > div.wide { height: 60%; } 

.cont4_wrap ul li .list_inner { height: 100%; } 
.cont4_wrap ul li .viewMore { position: absolute; right: 10px; bottom: -70px; transition: all 0.5s ease-in-out; } 
.cont4_wrap ul li .txt { position: absolute; top: 30px; left: 30px; color: #222222; font-size: 28px; letter-spacing: -2.2px; } 
.cont4_wrap ul li .bgImg { opacity: 0.5; } 
.cont4_wrap ul .list01 { background: #deefff; } 
.cont4_wrap ul .list01 .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 0 bottom/cover url("/portfolio/heyClass/img/main/section02/cont04/list01.png"); } 
.cont4_wrap ul .list02 { background: #ffc924; } 
.cont4_wrap ul .list02 .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 0 bottom/cover url("/portfolio/heyClass/img/main/section02/cont04/list02.png"); } 
.cont4_wrap ul .list03 { background: #c6e4b2; } 
.cont4_wrap ul .list03 .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 250%/contain url("/portfolio/heyClass/img/main/section02/cont04/list03.png"); } 
.cont4_wrap ul .list04 .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center/cover url("/portfolio/heyClass/img/main/section02/cont04/list04.png"); } 
.cont4_wrap ul .list05 { background: #ffecd9 no-repeat center/cover url("/portfolio/heyClass/img/main/section02/cont04/list05_01.png"); } 

.cont4_wrap ul .list05 .bgImg { position: absolute; right: 0; bottom: 0; width: 60%; height: 60%; background: no-repeat left/cover url("/portfolio/heyClass/img/main/section02/cont04/list05_02.png"); } 
.cont4_wrap ul .list06 { background: #deefff; } 

.cont4_wrap ul .list06 .bgImg { position: absolute; right: 0; bottom: 0; width: 60%; height: 60%; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont04/list06.png"); } 
.cont4_wrap ul .list07 { background: #ffc38d; } 

.cont4_wrap ul .list07 .bgImg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background: no-repeat center/cover url("/portfolio/heyClass/img/main/section02/cont04/list07.png"); } 
.cont4_wrap ul .list08 { background: #ffdada; } 

.cont4_wrap ul .list08 .bgImg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background: no-repeat right/contain url("/portfolio/heyClass/img/main/section02/cont04/list08.png"); } 
.cont4_wrap ul li .hoverBg { position: absolute; right: 0; bottom: 0; width: 100%; height: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.5) 100%); content: ''; z-index: 10; transition: height 0.5s ease-in-out; } 
/* hover */
.cont4_wrap ul li > div:hover .viewMore { bottom: 10px; } 

.cont4_wrap ul li > div:hover .bgImg { opacity: 1; } 
.cont4_wrap ul li > div:hover .hoverBg { height: 35%; } 
/* 개별 sec2 cont5 */
.sec2 .cont05 { height: 80vh; } 
.sec2 .cont05 .contTit .icon { width: 61px; height: 71px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont05/school_i.png"); } 

.sec2 .cont05 .contTit .icon > .i01 { top: -1px; left: 58%; transform: translateX(-50%); } 
.cont5_wrap { position: relative; } 
.cont5_wrap .bgText { display: inline-block; position: relative; color: rgba(187,187,187,0.15); font-weight: 700; font-size: 160px; white-space: nowrap; padding-left: 500px; -webkit-animation-name: marquee; -webkit-animation-timing-function: linear; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -moz-animation-name: marquee; -moz-animation-timing-function: linear; -moz-animation-duration: 30s; -moz-animation-iteration-count: infinite; -ms-animation-name: marquee; -ms-animation-timing-function: linear; -ms-animation-duration: 30s; -ms-animation-iteration-count: infinite; -o-animation-name: marquee; -o-animation-timing-function: linear; -o-animation-duration: 30s; -o-animation-iteration-count: infinite; animation-name: marquee; animation-timing-function: linear; animation-duration: 30s; animation-iteration-count: infinite; text-transform: uppercase; } 
.cont5_wrap .wrapper { display: flex; position: absolute; top: 0; width: 100%; align-items: center; justify-content: space-around; } 

.cont5_wrap .wrapper > div { width: 80%; margin: 0 auto; } 
.cont5_wrap .wrapper > div .img { position: relative; margin: 0 auto; } 
.cont5_wrap .wrapper > div.job .img { width: 237px; height: 215px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont05/job_01.png"); } 
.cont5_wrap .wrapper > div.hobby .img { width: 290px; height: 263px; background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont05/hobby_01.png"); } 

.cont5_wrap .wrapper > div .img .subTxt { position: absolute; top: 50%; color: #636363; font-weight: 700; font-size: 30px; transform: translateY(-50%); } 
.cont5_wrap .wrapper > div.job .img .subTxt { left: -78px; } 
.cont5_wrap .wrapper > div.hobby .img .subTxt { left: -128px; } 
.cont5_wrap .wrapper .word { position: relative; width: 80%; height: 45vh; margin: 0 auto; } 
.cont5_wrap .wrapper .word span { position: absolute; color: #bbb; font-size: 21px; cursor: pointer; } 
.cont5_wrap .wrapper .word span.w01 { top: 10%; left: 10%; } 
.cont5_wrap .wrapper .word span.w02 { top: 5%; right: 10%; } 
.cont5_wrap .wrapper .word span.w03 { top: 25%; right: 35%; } 
.cont5_wrap .wrapper .word span.w04 { top: 40%; left: 15px; } 
.cont5_wrap .wrapper .word span.w05 { top: 45%; left: 35%; } 
.cont5_wrap .wrapper .word span.w06 { bottom: 20%; left: 10%; } 
.cont5_wrap .wrapper .word span.w07 { right: 15%; bottom: 45%; } 
.cont5_wrap .wrapper .word span.w08 { right: 35%; bottom: 15%; } 
.cont5_wrap .wrapper .word span.w09 { right: 5%; bottom: 20%; } 
.cont5_wrap .wrapper .word span:before { position: absolute; top: 50%; left: 50%; width: 146px; height: 146px; content: ''; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.3s ease-in-out; } 
.cont5_wrap .job .word span:before { background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont05/13.png"); } 
.cont5_wrap .hobby .word span:before { background: no-repeat center/contain url("/portfolio/heyClass/img/main/section02/cont05/12.png"); } 
.cont5_wrap .wrapper .word span:hover { color: #fff; } 
.cont5_wrap .wrapper .word span:hover:before { opacity: 1; } 

/* section3 */
.sec3 { margin-top: 150px; } 
.sec3 .banner { width: 100%; height: 50vh; background: no-repeat center/cover url("/portfolio/heyClass/img/main/footer/footer_ban_bg.png"); max-height: 377px; } 
.sec3 .banner .container { position: relative; height: 100%; padding: 3% 15px; } 
.sec3 .banner .txt { position: absolute; z-index: 5; } 
.sec3 .banner .txt p { color: #fff; font-size: 40px; } 
.sec3 .banner .txt p b { color: #ff198d; font-weight: 700; font-size: 40px; } 
.sec3 .banner .txt p span { color: #fff; font-weight: 700; } 
.sec3 .banner .ban_i { position: absolute; right: 0; bottom: -10px; width: 50vw; z-index: 0; max-width: 815px; } 
.sec3 .countDown { margin-top: 30px; } 
.sec3 .countDown ul { display: flex; align-items: center; justify-content: space-between; } 
.sec3 .countDown li.time { width: 120px; height: 80px; background: #ffdada; color: #2d2d2d; font-size: 31px; line-height: 84px; text-align: center; border-radius: 10px; } 
.sec3 .countDown li span { color: #2d2d2d; } 
.sec3 .countDown li.viewMore { position: relative; z-index: 2; } 
.sec3 .countDown li.viewMore:before { position: absolute; top: 50%; left: 28%; width: 70px; height: 70px; background: #ff5fb0; content: ''; transform: translateY(-50%); border-radius: 50%; z-index: -1; } 

/* ********서브페이지 ******** */
/* 서브 배너 */
.subBan { position: relative; width: 100%; height: 670px; background: #fb51a9; overflow: hidden; } 
.subBan .img_cont { z-index: 0; } 
.subBan .img_cont > img { position: absolute; z-index: 0; } 
.subBan .img_cont > img.i01 { top: 18%; left: 10%; } 
.subBan .img_cont > img.i02 { top: 13%; left: 5%; animation: main01 1.5s ease-in-out infinite reverse; } 
.subBan .img_cont > img.i03 { bottom: -20%; left: 50%; } 
.subBan .img_cont > img.i04 { top: 30%; right: 15%; } 
.subBan .container { position: relative; height: 100%; } 
.subBan .content { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: space-between; z-index: 10; } 
.subBan .content .left p { font-weight: 700; font-size: 45px; } 
.subBan .content .center p,
.subBan .content .right p { font-size: 20px; } 
.subSec2 .class_wrap { position: relative; } 

.sec2Arrow { position: absolute; top: 50%; width: 60px; height: 60px; margin: 0; background: no-repeat center/contain url("/portfolio/heyClass/img/sub/section02/01.png"); z-index: 11; } 
.sec2PrevBtn { left: -6vw; transform: translateY(-50%); } 
.sec2NextBtn { right: -6vw; transform: translateY(-50%) rotate(180deg); } 

.sec2NextBtn:after,
.sec2PrevBtn:after { font-size: 0; } 
.subSec2 .cont02 .class_wrap ul { flex-wrap: wrap; } 
.subSec2 .cont02 .class_wrap li { width: 24%; } 
.subSec2 .cont02 .class_wrap li:nth-child(n+1):nth-child(-n+4) { margin-bottom: 40px; } 
.subSec2 .cont02 .class_wrap li .img { height: 230px; border: none; background: #fff; } 
.subSec2 .cont02 .class_wrap li .img > img { margin-top: 0; } 
.eventBox { height: 620px; margin-top: 70px; } 
.eventBox > div { float: left; width: 50%; height: 100%; } 
.eventBox > .ev_list { height: 100%; } 
.eventBox > .ev_list ul { display: flex; height: 100%; flex-direction: column; justify-content: space-between; } 
.eventBox > .ev_list ul li { display: flex; position: relative; height: 180px; border: 1px solid #bbbbbb; align-items: center; border-radius: 10px 0 0 10px; border-right: none; overflow: hidden; } 
.eventBox p { height: 100%; color: #2b2b2b; text-align: center; } 
.eventBox > .ev_list li > .dday { width: 30%; height: 100%; background: #eee; } 
.eventBox > .ev_list li > .dday p { font-weight: 300; font-size: 37px; line-height: 180px; text-align: center; } 
.eventBox > .ev_list li > .text { width: 70%; height: 100%; } 
.eventBox > .ev_list li > .text > p { display: flex; font-weight: 300; font-size: 25px; align-items: center; justify-content: center; flex-direction: column; } 
.eventBox > .ev_list li.active { border: none; border-right: 10px solid #fb51a9; } 
.eventBox > .ev_list li.active > .dday { background: rgba(251,81,169,0.4); } 
.eventBox > .ev_list li.active > .dday p { font-weight: 700; } 
.eventBox > .ev_list li.active > .text { background: #ffdbee; } 
.eventBox > .ev_list li.active > .text > p { font-weight: 700; } 
.eventBox > .ev_detail { background: #ffdbee; } 
.eventBox > .ev_detail > div { display: none; position: relative; height: 100%; } 
.eventBox > .ev_detail > div.active { display: block; } 
.eventBox > .ev_detail > div .tit { position: relative; font-weight: 700; font-size: 50px; line-height: 63px; padding-top: 5vh; } 
.eventBox > .ev_detail > div .more { position: absolute; top: 15%; right: 40px; z-index: 1; } 
.eventBox > .ev_detail > div .more:before { position: absolute; top: 50%; left: 20px; width: 56px; height: 56px; background: #ff5fb0; content: ''; transform: translateY(-50%); border-radius: 50%; z-index: -1; } 
.eventBox > .ev_detail > div .img { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } 
.eventBox > .ev_detail > div .bottom { display: flex; position: absolute; right: 10px; bottom: 10px; width: 150px; height: 150px; border: 7px solid #fff; background: #fb51a9; font-size: 26px; text-align: center; border-radius: 50%; align-items: center; justify-content: center; flex-direction: column; } 
.classList { margin-top: 70px; } 
.classList li { position: relative; width: 100%; height: 180px; border-radius: 10px; margin-bottom: 50px; cursor: pointer; } 
.classList li > img { position: absolute; z-index: 5; } 
.classList .list01 .i01 { top: 50%; left: 10%; transform: translateY(-50%); } 
.classList .list01 .i02 { right: 9%; bottom: 0; } 
.classList .list02 .i01 { bottom: 0; left: 5%; } 

.classList .list02 .i02 { right: 2%; bottom: -37px; clip: rect(0, 391px, 125px, 0); } 
.classList .list03 .i01 { bottom: -69px; left: 2%; clip: rect(0, 391px, 145px, 0); } 

.classList .list03 .i02 { right: 0; bottom: 0; } 
.classList li .hoverBg { position: absolute; bottom: 0; width: 100%; height: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(251, 81, 169, 0.8) 100%); transition: height 0.5s ease-in-out; z-index: 0; border-radius: 12px; } 
.classList li .tit { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%,-50%); z-index: 6; } 
.classList li .tit p:first-child { color: #2b2b2b; font-weight: 300; font-size: 17px; } 
.classList li .tit p:last-child { color: #2b2b2b; font-size: 43px; } 
.classList li.list01 { background: no-repeat center/cover url("/portfolio/heyClass/img/sub/section05/01_bg.png"); } 
.classList li.list02 { background: no-repeat center/cover url("/portfolio/heyClass/img/sub/section05/02_bg.png"); } 
.classList li.list03 { background: no-repeat center/cover url("/portfolio/heyClass/img/sub/section05/03_bg.png"); } 
.classList li:hover .hoverBg { height: 100%; } 
.reviewList { margin-top: 100px; } 
.reviewList ul { display: flex; align-items: center; justify-content: space-between; } 
.reviewList ul li { width: 32%; height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 7px 8px 15px rgba(155,143,149,0.6); transition: all 0.3s ease-in-out; } 

.reviewList ul li .top { display: flex; width: 100%; height: 160px; padding: 0 10px; background: #eee; align-items: center; justify-content: flex-start; } 
.reviewList ul li .top .quotes { width: 30%; } 
.reviewList ul li .txt { width: 60%; } 
.reviewList ul li .top .stars { color: #ff3d9f; } 
.reviewList ul li .top .writer { color: #2d2d2d; font-weight: 700; font-size: 22px; } 
.reviewList ul li .detail { position: relative; height: 240px; padding: 20px 100px 20px 20px; background: #fff; } 
.reviewList ul li .detail p { color: #2d2d2d; font-size: 17px; } 
.reviewList ul li .detail button { position: absolute; right: 20px; bottom: 20px; color: #bbb; font-weight: 700; font-size: 20px; z-index: 1; } 
.reviewList ul li .detail button:before { position: absolute; right: -48px; bottom: -93px; width: 0; height: 0; background: #fb51a9; content: ''; border-radius: 50%; z-index: -1; transition: all 0.3s ease-in-out; } 
.reviewList ul li:hover { transform: translate(0, -10%); box-shadow: 7px 20px 30px rgba(155, 143, 149, 0.6); } 
.reviewList ul li:hover .detail button { color: #fff; } 
.reviewList ul li:hover .detail button:before { width: 170px; height: 170px; } 

.qnaList > ul > li { margin-top: 50px; } 
.qnaList > ul > li > .box { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 10px; } 
.qnaList .box > .word { width: 10%; font-size: 85px; place-self: flex-start; } 
.qnaList .box > span.qWord { color: #eee; } 
.qnaList .box > span.aWord { color: #ffdbee; } 
.qnaList .box > .txtBox { position: relative; width: 90%; border-radius: 10px; } 
.qnaList .box > .txtBox:before { position: absolute; left: 0; width: 0; height: 0; border: 9px solid transparent; content: ''; border-left: 0; margin-top: -9px; margin-left: -9px; } 
.qnaList .qu_box > .txtBox { padding: 25px 50px 24px; background: #eee; } 
.qnaList .qu_box > .txtBox:before { top: 50%; border-right-color: #eee; } 
.qnaList .an_box > .txtBox { padding: 50px 70px 49px; background: #ffdbee; } 
.qnaList .an_box > .txtBox:before { top: 15%; border-right-color: #ffdbee; } 
.qnaList .qu_txt p { color: #2d2d2d; font-weight: 700; font-size: 31px; } 
.qnaList .an_txt .an_tit { color: #2d2d2d; font-weight: 700; font-size: 23px; } 
.qnaList .an_txt .an_tit > ul > li { color: #2d2d2d; font-size: 21px; margin-top: 10px; } 
.subSec2 .cont06 .btnCont { text-align: center; margin-top: 50px; } 
.subSec2 .cont06 .btnCont > p { color: #2d2d2d; font-size: 33px; } 

.subSec2 .cont06 .btnCont > a { display: inline-block; width: 310px; height: 84px; font-weight: 700; font-size: 33px; line-height: 90px; margin-top: 20px; } 
.bevelBtn { background: #fb51a9; /*top internal highlight*/
 text-align: center; box-shadow:0 1px 2px #fff,
 /*bottom external highlight*/
 0 0px 1px #fb51a9,
 /*top external shadow*/
 inset 0 -1px 25px rgba(0, 0, 0, 0.1),
 /*bottom internal shadow*/
 inset 5px 1px 14px rgba(255, 255, 255, 0.8); border-radius: 10px; } 

.subSec3 { padding: 100px 0; background: #eeeeee; text-align: center; margin-top: 150px; } 
.subSec3 .contTit { margin-bottom: 70px; } 
.subSec3 .contTit h3 { color: #2d2d2d; font-weight: 700; font-size: 45px; } 
.subSec3 .mainBox .topList { margin-bottom: 70px; } 
.subSec3 .mainBox .bottomList { margin-top: 70px; } 
.subSec3 .mainBox .list ul { display: flex; align-items: center; justify-content: space-between; } 
.subSec3 .mainBox .list ul li { width: 18%; height: 90px; background: #fff; border-radius: 50px; z-index: 2; } 
.subSec3 .mainBox .list ul li a { display: inline-block; position: relative; width: 100%; height: 100%; background: #fff; color: #2d2d2d; font-weight: 700; font-size: 27px; line-height: 90px; border: 2.5px solid #fff; border-radius: 50px; } 
.subSec3 .mainBox .list ul li.active a { border: 2.5px solid #2d2d2d; } 
.subSec3 .mainBox .list ul li.active a:before { opacity: 1; } 
.subSec3 .mainBox .list ul li a:before { display: block; position: absolute; width: 105px; height: 176px; background: url(/portfolio/heyClass/img/sub/section06/arrow01.png)no-repeat center/contain; content: ''; z-index: -1; opacity: 0; } 
.subSec3 .mainBox .topList ul li a:before { top: 77%; } 
.subSec3 .mainBox .topList ul li.left1 a:before { left: 45%; } 
.subSec3 .mainBox .topList ul li.left2 a:before { left: 20%; transform: rotate(30deg); } 

.subSec3 .mainBox .topList ul li.center a:before { top: 58%; left: 17%; width: 77px; height: 75px; background: url(/portfolio/heyClass/img/sub/section06/arrow02.png)no-repeat center/contain; } 
.subSec3 .mainBox .topList ul li.right1 a:before { left: 45%; transform: scaleX(-1) rotate(30deg); } 
.subSec3 .mainBox .topList ul li.right2 a:before { right: 30%; transform: scaleX(-1); } 

.subSec3 .mainBox .bottomList ul li a:before { bottom: 77%; } 

.subSec3 .mainBox .bottomList ul li.left1 a:before { left: 30%; transform: scaleX(-1) rotate(175deg); } 

.subSec3 .mainBox .bottomList ul li.left2 a:before { left: 20%; transform: scaleX(-1) rotate(229deg); } 

.subSec3 .mainBox .bottomList ul li.center a:before { left: 45%; bottom: 58%; width: 77px; height: 75px; transform: scaleX(-1) rotate(175deg); background: url(/portfolio/heyClass/img/sub/section06/arrow02.png)no-repeat center/contain; } 

.subSec3 .mainBox .bottomList ul li.right1 a:before { left: 45%; transform: rotate(229deg); } 

.subSec3 .mainBox .bottomList ul li.right2 a:before { right: 10%; transform: rotate(175deg); } 
.subSec3 .centerBox { position: relative; width: 80%; height: 610px; margin: 0 auto; background: #fff; } 
.subSec3 .centerBox > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; } 
.subSec3 .centerBox > img.active { opacity: 1; } 
.subSec3 .centerBox .btn { position: absolute; top: 50%; right: -13%; transform: translateY(-50%); } 
.subSec3 .centerBox .btn > a { display: flex; width: 270px; height: 130px; font-weight: 700; font-size: 30px; border-radius: 65px; align-items: center; justify-content: center; flex-direction: column; } 
.subSec3 .centerBox .btn > a > span { display: inline-block; display: block; color: #febfe0; letter-spacing: -10px; margin-top: -5px; margin-top: -5px; } 
/* 미디어쿼리 */
/* width가 1440px이하 */
@media (max-width:1440px){
 .slide_wrapper .sub_slide { left: 5%; } 
 .main_slide .slide_item .innerBox { width: 60%; } 
 /* sec2 */
 .sec2 .topTxt .contTit h3 { font-size: 37px; } 
 .sec2 .class_wrap .txt .c_name { font-size: 17px; } 
 .sec2 .class_wrap .txt .c_teacher { font-size: 17px; } 
 .sec2 .class_wrap .txt .c_tags span { font-size: 14px; } 
 /* sub1 */
 .subBan .content { flex-wrap: wrap; width: 80%; left: 50%; transform: translateX(-50%); } 
 .subBan .content .left { width: 100%; } 
 .sec2NextBtn { right: 0; } 
 .sec2PrevBtn { left: 0; } 
 /* sub1 */
 .eventBox > .ev_detail > div .more { top: 31%; } 
 .subSec3 .contTit h3 { font-size: 37px; } 
 }

/* width가 1200px이하 */
@media (max-width:1200px) { /* sec3 */
 .sec3 .banner .ban_i { width: 40vw; } 
 /* sub1 */
 .reviewList ul li .top .quotes { width: 20%; } 
 .reviewList ul li .top { height: 120px; } 
 .reviewList ul li .detail { height: 287px; } 
 .reviewList ul li .txt { width: 80%; padding-left: 2%; } 
 }

/* width가 1024px이하 */
@media (max-width:1024px) { /* sec1 */
 .slide_wrapper .sub_slide { display: none; } 
 .main_slide .slide_item .innerBox { left: 15px; width: calc(100% - 30px); padding: 30px 0; flex-wrap: wrap; justify-content: end; } 

 .slide_item .innerBox .txt_wrap { width: 100%; } 

 /* sub1 */
 .sec2Arrow { width: 40px; height: 40px; } 
 .sec2NextBtn { right: 1vw; } 
 .sec2PrevBtn { left: 1vw; } 
 /* sub01 */
 .eventBox { height: 555px; margin-top: 40px; } 
 .eventBox > .ev_list ul li { height: 164px; } 
 .eventBox > .ev_detail > div .tit { font-size: 40px; } 
 .eventBox > .ev_detail > div .bottom { width: 130px; height: 130px; } 
 .eventBox > .ev_detail > div .bottom { font-size: 21px; } 
 .eventBox > .ev_list li > .dday { width: 25%; } 

 .eventBox > .ev_list ul li { height: 164px; } 
 .eventBox > .ev_list li > .dday p { font-size: 31px; } 

 .eventBox > .ev_list li > .text { width: 75%; } 
 .eventBox > .ev_list li > .text > p { font-size: 21px; } 
 .qnaList .box > .word { font-size: 74px; } 
 .qnaList .qu_txt p { font-size: 27px; } 
 .qnaList .an_box > .txtBox { padding: 4% 5%; } 
 .qnaList .an_txt .an_tit { font-size: 21px; } 
 .qnaList .an_txt .an_tit > ul > li { font-size: 17px; } 
 .subSec3 .contTit { margin-bottom: 37px; } 
 }
/* width가 1000px이하 */
@media (max-width:1000px) { /* sec2 */
 .sec2 .content { height: auto; margin-top: 70px; } 
 .sec2 .topTxt .contTit h3 { margin-left: 20px; } 
 .sec2 .class_wrap { margin-top: 40px; } 
 .sec2 .class_wrap li .img .bgTxt { font-size: 39px; } 
 .sec2 .topTxt .moreBtn { font-size: 14px; } 
 .sec2 .cont01 .contTit .icon { width: 52px; height: 42px; } 
 .sec2 .cont3_wrap li .c_name { font-size: 20px; } 
 .sec2 .cont3_wrap li .c_subTxt { font-size: 16px; } 
 .sec2 .cont03 .cont3_wrap ul { margin-top: 40px; } 
 .cont4_wrap ul li .txt { top: 15px; left: 15px; font-size: 21px; } 
 .cont4_wrap ul { margin-top: 40px; } 
 .cont4_wrap ul li { width: 49%; margin-bottom: 7%; } 
 .cont5_wrap .bgText { position: absolute; top: 40%; } 
 .cont5_wrap .wrapper { position: static; flex-wrap: wrap; } 
 .cont5_wrap .wrapper .word { width: 100%; height: 40vh; } 
 .cont5_wrap .wrapper .word span:before { width: 120px; height: 120px; } 
 .cont5_wrap .wrapper .word span { font-size: 19px; } 
 /* sec3 */
 .sec3 { margin-top: 70px; } 
 .sec3 .countDown li.time { width: 103px; height: 65px; font-size: 25px; line-height: 65px; } 
 .sec3 .countDown li.viewMore:before { width: 60px; height: 60px; } 
 /* sub1 */
 .subBan .content { width: calc(100% - 30px); bottom: 15px; top: auto; height: 75%; } 
 .reviewList ul li .top .writer { font-size: 17px; } 
 .reviewList ul li .detail p { font-size: 15px; } 
 .reviewList ul li .detail button { font-size: 17px; } 
 .reviewList ul li .detail { padding: 20px 22px 20px 20px; } 
 .subSec3 .mainBox .topList { margin-bottom: 45px; } 
 .subSec3 .mainBox .bottomList { margin-top: 45px; } 
 .subSec3 .centerBox .btn > a { width: 192px; height: 98px; font-size: 23px; } 
 .subSec3 .centerBox { height: 540px; } 
 .subSec3 .mainBox .list ul li a { font-size: 24px; } 
 }

/* width가 768px 이하*/
@media (max-width:768px) { /* sec1 */
 .mainSec { height: 600px; } 
 .slide_item .innerBox .txt01 { margin-bottom: 30px; } 
 .slide_item .innerBox .txt02 { font-size: 35px; line-height: 45px; } 
 .slide_item .innerBox .img { position: absolute; right: 0; bottom: 0; width: 60%; } 
 .main_slide .slide_item .innerBox { padding-bottom: 5vh; align-items: baseline; } 
 .ban03 .img .icon_box .i01 { width: 50px; } 
 .ban05 .img img.card { width: 200px; } 
 .ban05 .img img.i01 { left: -10%; width: 140px; } 
 .ban05 .img img.i02 { left: 21%; width: 350px; } 
 /* sec2 */
 .sec2 .topTxt .contTit { justify-content: flex-start; } 
 .sec2 .topTxt .contTit h3 { font-size: 29px; margin-left: 10px; } 
 .sec2 .class_wrap { margin-top: 20px; } 
 .sec2 .class_wrap ul { flex-wrap: wrap; } 
 .sec2 .class_wrap li { width: 49%; margin-bottom: 20px; } 
 .sec2 .class_wrap .txt { margin-top: 10px; } 

 .sec2 .cont02 .contTit .icon { width: 45px; height: 43px; } 
 .cont02 .icon .minute { bottom: 16%; left: 50%; height: 14px; } 
 .sec2 .cont03 .contTit .icon { width: 53px; height: 39px; } 
 .cont03 .icon > .i04 { width: 15px; } 
 .sec2 .cont03 .cont3_wrap ul { flex-wrap: wrap; } 
 .sec2 .cont03 .cont3_wrap li { width: 100%; margin-bottom: 20px; } 
 .sec2 .cont3_wrap li .img { height: 300px; margin-bottom: 10px; } 
 .sec2 .cont3_wrap li .txt { margin-top: 0; } 
 .sec2 .cont3_wrap li .c_name { height: auto; } 

 .sec2 .cont04 .contTit .icon { width: 50px; height: 50px; } 
 .sec2 .cont04 .contTit .icon > img { width: 40px; } 
 .sec2 .cont04 .contTit .icon > .i01 { right: -33px; } 
 .sec2 .cont04 .contTit .icon > .i02 { top: -21px; right: -23px; } 
 .sec2 .cont05 .contTit .icon { width: 62px; } 
 .sec2 .cont05 .contTit .icon > .i01 { top: 6px; width: 17px; } 
 .cont5_wrap .wrapper > div .img .subTxt { font-size: 25px; } 
 .cont5_wrap .wrapper > div.hobby .img .subTxt { left: -84px; } 
 .cont5_wrap .bgText { font-size: 100px; } 
 /* sec3 */
 .sec3 .banner { height: 250px; } 
 .sec3 .banner .txt p { font-size: 33px; line-height: 33px; } 
 .sec3 .banner .txt p b { font-size: 33px; } 
 .sec3 .banner .txt { width: 92%; } 

 .sec3 .banner .ban_i { width: 64vw; } 
 /* sub1 */
 .subBan { height: 580px; } 
 .subBan .content .left p { font-size: 41px; } 
 .subBan .content .center,
 .subBan .content .right { width: 100%; } 
 .subBan .content .center p,
 .subBan .content .right p { font-size: 17px; } 
 .sec2 .class_wrap .heart { right: 3%; top: 10px; } 
 .subSec2 .cont02 .class_wrap li { width: 49%; } 
 .eventBox { height: auto; } 
 .eventBox > div { float: none; width: 100%; } 
 .eventBox > .ev_list ul { flex-wrap: wrap; flex-direction: unset; } 
 .eventBox > .ev_list ul li { width: 33.333%; flex-wrap: wrap; border: 1px solid #eee; border-radius: 0; } 
 .eventBox > .ev_list li.active { border-right: none; border-bottom: 10px solid #ff5fb0; } 
 .eventBox > .ev_list li > .dday { width: 100%; height: 45px; } 

 .eventBox > .ev_list li > .text { width: 100%; height: 119px; } 

 .eventBox > .ev_detail > div .tit { font-size: 30px; line-height: 39px; } 
 .eventBox > .ev_list li > .text > p { font-size: 15px; } 
 .eventBox > .ev_list li > .dday p { line-height: 48px; font-size: 25px; } 
 .eventBox > .ev_detail { height: 500px; } 

 .classList .list03 .i01 { width: 29%; clip: unset; bottom: auto; top: 0; } 
 .classList .list02 .i02 { width: 35%; bottom: auto; top: 40%; } 
 .classList li .tit p:last-child { font-size: 37px; } 
 .reviewList { margin-top: 70px; } 
 .reviewList ul { flex-wrap: wrap; } 
 .reviewList ul li { width: 100%; height: auto; margin-bottom: 30px; } 
 .reviewList ul li .top { height: 105px; } 
 .reviewList ul li .detail { height: 162px; } 
 .reviewList ul li .top .writer { font-size: 16px; } 
 .reviewList ul li .detail p { font-size: 14px; } 
 .reviewList ul li:hover .detail button:before { width: 140px; height: 140px; } 
 .qnaList .box > .word { font-size: 50px; } 
 .qnaList .qu_box > .txtBox { padding: 2% 3%; } 
 .qnaList .qu_txt p { font-size: 21px; } 
 .qnaList .an_txt .an_tit { font-size: 18px; } 
 .qnaList .an_txt .an_tit > ul > li { font-size: 15px; } 
 .subSec2 .cont06 .btnCont > p { font-size: 27px; } 
 .subSec2 .cont06 .btnCont > a { font-size: 27px; width: 255px; height: 66px; line-height: 73px; } 
 .qnaList .box > .word { width: 57px; } 
 .qnaList .box > .txtBox { width: calc(100% - 57px); } 
 .qnaList > ul > li { margin-top: 30px; } 
 .qnaList .qu_txt p { font-size: 19px; } 
 .qnaList .an_txt .an_tit { font-size: 17px; } 
 .subSec3 { margin-top: 70px; padding: 50px 0; } 
 .subSec3 .contTit h3 { font-size: 29px; } 
 .subSec3 .centerBox { height: 500px; width: 95%; } 
 .subSec3 .centerBox .btn { left: 50%; right: auto; top: auto; bottom: 20px; transform: translateX(-50%); } 
 .subSec3 .mainBox .list ul li { height: 59px; width: 19%; } 
 .subSec3 .mainBox .list ul li a { font-size: 19px; line-height: 61px; } 
 .subSec3 .mainBox .list ul li a:before { width: 71px; height: 116px; } 
 }

/* width가 500px 이하*/
@media (max-width:500px){
 .mainSec { height: 550px; } 
 .ban02 .device { height: 151px; } 
 .sec2 .topTxt .contTit h3 { font-size: 23px; } 
 .ban04 .img > .bg { top: 8vw; } 
 .ban04 .img > .man { width: 62%; } 
 .ban05 .img img.i02 { width: 248px; } 
 .slide_item .innerBox .img { width: 90%; } 

 .sec2 .cont3_wrap li .icon_wrap { height: 80px; } 
 .sec2 .cont3_wrap li .icon_wrap img { width: 44px; height: 44px; } 
 .cont5_wrap .wrapper > div.hobby .img .subTxt { top: 16%; left: 7px; } 
 .cont5_wrap .wrapper > div.job .img .subTxt { top: 21%; right: 0; left: auto; } 
 .cont5_wrap .wrapper > div .img .subTxt { font-size: 21px; } 
 .cont5_wrap .wrapper > div.job .img { width: 207px; height: 156px; } 
 .cont5_wrap .wrapper > div.hobby .img { width: 267px; height: 181px; } 
 .cont5_wrap .wrapper .word span:before { width: 90px; height: 90px; } 
 .cont5_wrap .wrapper .word span { font-size: 17px; } 

 /* sec3 */
 .sec3 .banner { height: 231px; } 
 .sec3 .banner .ban_i { display: none; } 
 .sec3 .banner .txt p { font-size: 25px; } 
 .sec3 .banner .txt p b { font-size: 25px; } 
 .sec3 .countDown ul { flex-wrap: wrap; } 
 .sec3 .countDown li.time { width: 24%; height: 60px; font-size: 21px; line-height: 60px; } 
 /* sub1 */
 .subSec2 .class_wrap .img img { width: 100%; } 
 .classList li .tit p:last-child { mix-blend-mode: exclusion; font-size: 31px; } 
 .subSec3 .contTit h3 { font-size: 23px; } 
 .subSec3 .mainBox .list ul li a { font-size: 15px; line-height: 56px; } 
 .subSec3 .centerBox .btn > a { height: 77px; font-size: 19px; } 
 .eventBox > .ev_detail > div .bottom { width: 100px; height: 100px; font-size: 17px; } 
 .sec2 .class_wrap .heart { right: 6%; } 
 }

/* width가 425px이하 */
@media (max-width:426px) { /* sec1 */
 .slide_item .innerBox .img { width: 80%; } 
 .slide_item .innerBox .txt02 { font-size: 29px; } 
 .slide_item .innerBox .arrow { width: 50px; } 
 .slide_item .innerBox .txt01 { margin-bottom: 20px; } 
 .slide_item .innerBox .txt03 { margin-bottom: 15px; } 
 .main_slide .slide_item .innerBox { height: calc(100% - 60px); } 
 .slide_item.ban02 .innerBox .img { width: 69%; bottom: -93px; } 
 .ban02 .device { width: 135px; height: 314px; } 
 .ban04 .img > .man { bottom: -28%; width: 212px; } 
 .ban04 .img .icon_box img { width: 20px; } 
 .ban05 .img img.card { width: 146px; } 
 .ban05 .img img.i01 { left: -3%; width: 123px; } 
 .mainSec { height: 550px; } 
 .ban05 .img img.i02 { left: 33%; width: 212px; } 
 /* sec2 */
 .sec2 .topTxt { margin-bottom: 30px; } 
 .sec2 .topTxt .contTit h3 { font-size: 21px; } 
 .sec2 .topTxt .moreBtn { top: 137%; font-size: 13px; } 
 .sec2 .class_wrap li { width: 100%; } 
 .sec2 .class_wrap li .img { height: 250px; } 
 .sec2 .cont3_wrap li .c_name { font-size: 17px; } 
 .sec2 .cont3_wrap li .c_subTxt { font-size: 14px; } 
 .cont4_wrap ul li .txt { font-size: 17px; } 
 .cont4_wrap ul li .viewMore { width: 50px; } 
 .cont5_wrap .wrapper > div { width: 100%; } 
 /* sec3 */
 .sec3 { margin-top: 20px; } 
 .sec3 .banner { height: 190px; } 
 .sec3 .countDown { margin-top: 15px; } 
 .sec3 .banner .txt p { font-size: 19px; } 

 .sec3 .banner .txt p b { font-size: 19px; } 
 .sec3 .countDown li.viewMore { width: 45px; } 
 .sec3 .countDown li.viewMore:before { width: 50px; height: 50px; } 
 .sec3 .countDown li.time { height: 50px; line-height: 53px; } 
 .sec3 .countDown li.time { font-size: 17px; } 
 /* sub01 */
 .subBan .content .left p { font-size: 35px; } 
 .subBan .content .center p,
 .subBan .content .right p { font-size: 15px; } 

 .subSec2 .cont02 .class_wrap li { width: 100%; } 
 .eventBox > .ev_list li > .dday p { font-size: 21px; } 
 .eventBox > .ev_list li > .text > p { font-size: 13px; } 
 .classList li .tit p:first-child { font-size: 14px; } 
 .classList li .tit p:last-child { font-size: 25px; } 
 .reviewList { margin-top: 40px; } 
 .qnaList .box > .word { font-size: 35px; } 
 .qnaList .box > .txtBox { width: calc(100% - 8px); } 
 .qnaList .qu_txt p { font-size: 17px; } 
 .qnaList .an_box > .txtBox:before { top: 10%; } 
 .reviewList ul li .detail { height: 188px; } 
 .subSec2 .cont06 .btnCont > p { font-size: 25px; } 
 .subSec2 .cont06 .btnCont > a { font-size: 23px; width: 197px; } 
 .subSec3 .mainBox .list ul li { height: 41px; } 
 .subSec3 .mainBox .list ul li a { line-height: 39px; font-size: 13px; } 
 .subSec3 .contTit h3 { font-size: 21px; } 
 .subSec3 .centerBox { height: 339px; } 
 .subSec3 .centerBox .btn > a { height: 67px; } 
 .subSec3 .centerBox { height: 355px; } 
 .subSec3 .centerBox > img { top: 44%; } 
 .subSec3 .mainBox .topList { margin-bottom: 25px; } 
 .subSec3 .mainBox .bottomList { margin-top: 25px; } 
 .subSec3 .mainBox .list ul li a:before { width: 49px; height: 82px; } 
 }
/* width가 320px 이하 */
@media (max-width:320px) { /* sec3 */
 .sec3 .banner { height: 200px; } 
 .sec3 .banner .txt p { font-size: 19px; } 

 .sec3 .banner .txt p b { font-size: 19px; } 
 /* sub01 */
 .subSec3 .mainBox .list ul li a { font-size: 12px; } 
 }

/* width가 280px 이하 */
@media (max-width:280px) { }