/* test01~test04매력 등급 테스트 */ .test01{} .test01 .header-right .round-btn{background-color: #1F2723;} .test01 .visual{padding: 30rem 0 20rem; background: transparent linear-gradient(309deg, #00CB68 0%, #FFFF00 100%) 0% 0% no-repeat padding-box;} .test01 .visual .inner{display: flex; align-items: center; justify-content: space-between;} .test01 .visual h1{font-size: 6rem; font-family: 'vitroCore'; padding-left: 5rem;} .test01 .visual p{font-size: 2.4rem; line-height: 1.6; padding-right: 5rem;} .test01 .visual p span{color: #84E632; position: relative; background-color: #1F2723; padding: 0 5px;} .test01 .sec01{padding: 10rem 0 19rem; background-color: #1C2722; text-align: center; color: #fff; margin-top: -10rem; border-top-right-radius: 10rem;} .test01 .sec01 p{color: #fff; line-height: 1.5; margin-bottom: 7rem;} .test01 .sec01 p span{color: #77FF00; font-weight: 700;} .test01 .sec01 .round-btn{border-color: #77FF00; color: #77FF00; height: 7rem; width: 34rem; justify-content: center; font-size: 24px;} .test01 .sec01 .round-btn:hover{background:transparent;color: #77FF00} @media screen and (max-width: 1024px){ .test01 .visual h1, .test01 .visual p{padding: 0;} } @media screen and (max-width: 768px){ .test01 .header-right .round-btn{background: none;} .test01 .visual{padding: 157px 0 167px; background: transparent linear-gradient(345deg, #00CB68 0%, #FFFF00 100%); } .test01 .visual .inner{flex-direction: column; gap: 36px;} .test01 .visual h1{align-self: flex-start; font-size: 36px;} .test01 .visual p{align-self: flex-end; font-size: 16px;} .test01 .sec01{padding: 60px 0 100px;} .test01 .sec01 .round-btn{width: 100%; max-width: 400px; font-size: 23px;} } /* */ .test02 .visual{background-color: #1C2722; border-bottom-left-radius: 10rem; padding: 28rem 0 15rem; text-align: center; color: #fff; margin-bottom: 6.6rem;} .test02 .visual h1{font-size: 5.5rem; font-family: 'vitroCore'; margin-bottom: 5.7rem;} .test02 .visual h1 span{color: #77FF00;} .test02 .visual p{line-height: 2;} .test02 .visual p span{text-decoration: underline;} .test02 .sec01{text-align: center; } .test02 .sec01 .btn-back{text-align-last: left;} .test02 .sec01 .btn-back a{display: inline-flex; background-color: #6B6B6B; border-radius: 50px; gap: 13px; color: #fff; height: 4.7rem; align-items: center; padding: 0 2rem;} .test02 .sec01 ul{} .test02 .sec01 ul li{padding: 10rem 0; border-bottom: 1px solid #D9D9D9;} .test02 .sec01 ul li h1{margin-bottom: 5rem; font-size: 3rem; font-weight: 700; line-height: 2;} .test02 .sec01 ul li h1 span{color: #00CB68;} .test02 .sec01 ul li .check-wrap{display: flex; justify-content: center; gap: 13rem; font-size: 2.4rem; font-weight: 500;} .test02 .sec01 ul li .radio-button{cursor: pointer; position: relative; padding-top: 10rem; width: 8rem;} .test02 .sec01 ul li .radio-button input[type="radio"]{position: absolute; opacity: 0; height: 0; width: 0;} .test02 .sec01 ul li .radio-button .custom-radio {position: absolute; top: 0; left: 0; height: 8rem; width: 8rem; border-radius: 50%; background-color: #F8F8F8;} .test02 .sec01 ul li .radio-button input[type="radio"]:checked ~ .custom-radio {background-color: #00CB68;} .test02 .sec01 ul li .custom-radio:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #fff; } .test02 .sec01 ul li .radio-button input[type="radio"]:checked ~ .custom-radio:after{background-color: #fff;} .test02 .sec01 ul li:nth-last-child(2){border-bottom: none;} .test02 .sec01 ul li:last-child{padding: 7rem 20px; background-color: #F8F8F8; border-bottom: none; } .test02 .sec01 ul li:last-child h1{margin-bottom: 7.7rem; line-height: 1.6;} .test02 .sec01 ul li .text-wrap{display: flex; justify-content: center; gap: 3rem; align-items: center;} .test02 .sec01 ul li .text-wrap p{font-weight: 700;} .test02 .sec01 ul li .text-wrap p span{color: red;} .test02 .sec01 ul li .checkbox{cursor: pointer; position: relative; padding-left: 3rem;} .test02 .sec01 ul li .checkbox input[type="checkbox"]{position: absolute; opacity: 0; height: 0; width: 0;} .test02 .sec01 ul li .checkbox .custom-check {position: absolute; left: 0; height: 18px; width: 18px; border: 1px solid #B8B8B8; top: 50%; transform: translateY(-50%); border-radius: 2px;} .test02 .sec01 ul li .custom-check::after {content: '✔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; color: #00CB68; display: none; line-height: 1;} .test02 .sec01 ul li .checkbox input[type="checkbox"]:checked ~ .custom-check::after {display: block;} .test02 .sec01 ul li input[type="text"], .test02 .sec01 ul li input[type="number"]{ border: 1px solid #DDDDDD; height: 5.6rem; padding: 0 2rem; } .test02 .sec01 ul li .name{width: 20%;} .test02 .sec01 ul li .phone{width: 25%;} .test02 .sec01 .check-result{width: 40rem; height: 7rem; font-size: 2.4rem; justify-content: center; margin: 10rem 0 19rem;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .test02 .visual{padding: 160px 0 70px; margin-bottom: 48px;} .test02 .visual h1{font-size: 30px;} .test02 .sec01 .btn-back a{font-size: 12px; padding: 0 10px; height: 20px; gap:3px; } .test02 .sec01 .btn-back a img{width: 5px;} .test02 .sec01 ul li{padding: 50px 0;} .test02 .sec01 ul li h1{font-size: 16px;} .test02 .sec01 ul li .check-wrap{font-size: 14px;} .test02 .sec01 ul li .radio-button{padding-top: 60px; width: 48px;} .test02 .sec01 ul li .radio-button .custom-radio{width: 48px; height: 48px;} .test02 .sec01 ul li .text-wrap{flex-wrap: wrap; justify-content: space-between; text-align: left; gap: 15px 0;} .test02 .sec01 ul li .text-wrap p, .test02 .sec01 ul li .checkbox{width: 100%;} .test02 .sec01 ul li .name{width: 40%;} .test02 .sec01 ul li .phone{width: 55%;} .test02 .sec01 .check-result{margin: 50px 0 100px;} } /* test03 분석 */ .test03{} .test03 .visual{padding: 28rem 0 9rem;} .test03 .visual h1{font-size: 4rem; font-weight: 700; text-align: center; line-height: 1.5;} .test03 .visual h1 span{color: #00CB68;} .test03 .sec01{border-top-right-radius: 10rem; background-color: #1F2723; padding: 11rem 0 22rem;} .test03 .sec01 .inner{display: flex; align-items: center; justify-content: space-between;} .test03 .sec01 .percent{width: 47%;} .test03 .sec01 .top-img{display: flex; justify-content: space-between; margin-bottom: 5.7rem; padding-right: 7.5rem; align-items: baseline; height: 210px;} .test03 .sec01 .top-img > div{position: relative;} .test03 .sec01 .top-img > div img{} .test03 .sec01 .top-img .female{} .test03 .sec01 .btm-progress{display: flex; justify-content: space-between; align-items: center; gap: 3rem;} .test03 .sec01 .btm-progress .bar{height: 10px; background-color: #404040; border-radius: 10px; overflow: hidden; position: relative; width: calc(100% - 10rem);} .test03 .sec01 .btm-progress .bar::after{content: ""; position: absolute; background: linear-gradient(90deg, #77FF00 0%, #00CB68 100%); width: 0%; height: 100%; border-radius: 10px;} .test03 .sec01 .btm-progress span{color: #77FF00; font-size: 2.6rem; font-weight: 700; width: 7rem; display: inline-block; text-align: right} .test03 .sec01 ul{width: 48%; display: flex; flex-direction: column; gap: 3.4rem;} .test03 .sec01 ul li{display: flex; color: #9D9D9D; font-size: 3rem;} .test03 .sec01 ul li .check{width: 3rem; margin-right: 2.5rem;} .test03 .sec01 ul li .check img{width: 100%; margin-top: 3px;} .test03 .sec01 ul li .check img:nth-child(1){display: block;} .test03 .sec01 ul li .check img:nth-child(2){display: none;} .test03 .sec01 ul li p{flex: 1;} .test03 .sec01 ul li.active{color: #77FF00;} .test03 .sec01 ul li.active .check img:nth-child(1){display: none;} .test03 .sec01 ul li.active .check img:nth-child(2){display: block;} .test03 .sec01 .top-img .male{width: 6.7rem;} .test03 .sec01 .top-img .female img, .test03 .sec01 .top-img .male img{width: 100%;} .test03 .sec01.step01 .top-img .female{width: 8rem;} .test03 .sec01.step02 .top-img .female{left: 50px; width: 10rem;} .test03 .sec01.step02 .btm-progress .bar::after{width: 25%;} .test03 .sec01.step03 .top-img .female{left: 30%; width: 11rem;} .test03 .sec01.step03 .top-img .male{width: 12rem;} .test03 .sec01.step03 .btm-progress .bar::after{width: 50%;} .test03 .sec01.step04 .top-img .female{left: 45%; width: 13rem;} .test03 .sec01.step04 .top-img .male{width: 12rem;} .test03 .sec01.step04 .btm-progress .bar::after{width: 75%;} .test03 .sec01.step05 .top-img .female{left: 50%; transform: translateX(-50%); width: 9rem;} .test03 .sec01.step05 .btm-progress .bar::after{width: 100%;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .test03 .visual{padding: 160px 0 60px;} .test03 .visual h1{font-size: 26px;} .test03 .sec01{border-top-right-radius: 40px; padding: 60px 0 100px;} .test03 .sec01 .inner{flex-wrap: wrap;} .test03 .sec01 .percent{width: 100%; margin-bottom: 50px;} .test03 .sec01 ul{width: 100%;} .test03 .sec01 ul li{font-size: 16px;} .test03 .sec01 ul li .check{width: 18px; margin-right: 18px;} .test03 .sec01 ul li .check img{margin-top: 0;} .test03 .sec01 .top-img{margin-bottom: 30px; height: 114px} .test03 .sec01 .top-img .male{width: 36px;;} .test03 .sec01.step01 .top-img .female{width: 43px;} .test03 .sec01.step02 .top-img .female{width: 53px;} .test03 .sec01.step03 .top-img .female{width: 58px; left: 40%;} .test03 .sec01.step03 .top-img .male{width: 67px;} .test03 .sec01.step04 .top-img .female{left: 50%; width: 69px;} .test03 .sec01.step04 .top-img .male{width: 67px;} .test03 .sec01.step05 .top-img .female{width: 50px;} } .test04{} .test04 .visual{padding: 28rem 0 12rem; text-align: center;} .test04 .visual h1{font-family: 'vitroCore'; font-size: 5.5rem;} .test04 .visual h1 span{color: #00CB68;} .test04 .sec01{text-align: center; padding: 20rem 0; color: #fff; border-top-right-radius: 10rem;} .test04 .sec01 h1{font-size: 4rem; font-weight: 500;} .test04 .sec01 h2{margin: 3rem 0 6rem; font-size: 6rem; font-weight: 700;} .test04 .sec01 h3{padding-bottom: 13rem; position: relative; font-weight: 300;} .test04 .sec01 h3::after{content: ""; width: 6.5rem; position: absolute; height: 1px; background-color: #FFFFFF; left: 50%; transform: translateX(-50%); top: 55%;} .test04 .sec01 p{font-size: 2.4rem; line-height: 2; } .test04-1 .sec01{background: url(../img/test-result01.png) no-repeat center / cover;} .test04-2 .sec01{background: url(../img/test-result02.png) no-repeat center / cover;} .test04-3 .sec01{background: url(../img/test-result03.png) no-repeat center / cover;} .test04-4 .sec01{background: url(../img/test-result04.png) no-repeat center / cover;} .test04-1 .sec01 h2{color: #FFB300;} .test04-2 .sec01 h2{color: #00EEFF;} .test04-3 .sec01 h2{color: #FFFF00;} .test04-4 .sec01 h2{color: #77FF00;} @media screen and (max-width: 768px){ .test04 .visual{padding: 160px 0 60px;} .test04 .visual h1{font-size: 30px;} .test04 .sec01{padding: 60px 0; border-top-right-radius: 40px;} .test04 .sec01 h1{font-size: 20px;} .test04-1 .sec01 h2{font-size: 26px; margin: 20px 0;} .test04-1 .sec01 h3{font-size: 12px; padding-bottom: 86px;} .test04 .sec01 h3::after{width: 27px;} .test04 .sec01 p{font-size: 14px;} } .test04 .sec02{background-color: #EFF6F3; padding: 15rem 0 23rem;} .test04 .sec02 h1{font-size: 3.5rem; line-height: 1.7; text-align: center; margin-bottom: 10rem;} .test04 .sec02 h1 span{font-weight: 700;} .test04 .sec02 .list-wrap{display: flex; gap: 20px; flex-wrap: wrap;} .test04 .sec02 ul{width: calc((100% - 20px) /2); display: flex; flex-direction: column; gap: 20px;} .test04 .sec02 ul li{background-color: #fff; border-radius: 3rem; border: 1px solid #D9D9D9; transition: 0.3s;} .test04 .sec02 ul li:hover{border-color: #00CB68;} .test04 .sec02 ul li a{padding: 0 2.7rem 0 3.5rem; display: flex; align-items: center; gap: 4rem; height: 20rem;} .test04 .sec02 ul li a h2{color: #00CB68; font-weight: 700; font-size: 3.5rem; width: 15rem; text-align: center; white-space: nowrap;} .test04 .sec02 ul li a p{flex: 1; line-height: 1.6;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .test04 .sec02{padding: 60px 0 100px;} .test04 .sec02 h1{margin-bottom: 50px; font-size: 20px;} .test04 .sec02 ul{width: 100%; } .test04 .sec02 ul li a {gap: 18px; padding: 20px; padding-right: 10px; height: auto;} .test04 .sec02 ul li a h2{width: 80px; font-size: 30px;} .test04 .sec02 ul li a p{font-size: 16px;} } /* ******************************************************************************************************************************************* */ /* about 미건 넌 누구니? */ .about{} .about .sub-visual{text-align: left;} .about .sub-visual h1{margin-top: 4.5rem; color: #00CB68;} .about .sec01{padding: 17rem 0;} .about .sec01 h2{font-size: 7rem; font-weight: 700; text-align: center; margin-bottom: 11rem;} .about .sec01 h2 span{color: #00CB68;} .about .sec01 .cont{background-color: #F8F8F8; border-radius: 3rem; padding: 8.5rem 12%; display: flex; align-items: center; gap: 8rem; align-items: center;} .about .sec01 .cont .imgbox{width: 50%; font-size: 0;} .about .sec01 .cont .imgbox img{width: 100%;} .about .sec01 .cont .textbox{width: 50%; } .about .sec01 .cont h3{font-size: 4rem; font-weight: 700; margin-bottom: 4.3rem;} .about .sec01 .cont p{font-size: 2.4rem; line-height: 1.8;} @media screen and (max-width: 1024px){ .about .sec01 .cont{padding: 43px; gap: 30px;} .about .sec01 .cont .imgbox, .about .sec01 .cont .textbox{width: 100%;} } @media screen and (max-width: 768px){ .about .sec01{padding: 62px 0;} .about .sec01 h2{font-size: 30px; margin-bottom: 62px;} .about .sec01 .cont{flex-direction: column;} .about .sec01 .cont > div{width: 100%;} } .about .sec02{background-color: #1F2723; padding: 18rem 0;} .about .sec02 h2{font-size: 2.4rem; text-align: center; color: #fff;} .about .sec02 h3{font-size: 5rem; font-weight: 800; line-height: 1.5; text-align: center; color: #fff; margin: 5rem 0 12rem;} .about .sec02 h3 span{color: #00CB68;} .about .sec02 .contbox{padding: 11rem 13%; background-color: #fff; border-radius: 3rem; } .about .sec02 .contbox .top{margin-bottom: 8rem; padding-bottom: 8rem; border-bottom: 2px solid #00CB68; display: flex; gap: 5.8rem;} .about .sec02 .contbox .top .img-wrap{display: flex; width: 49%;} .about .sec02 .contbox .top .imgbox{width: 50%; position: relative;} .about .sec02 .contbox .top .imgbox img{width: 100%; height: 100%; object-fit: cover;} .about .sec02 .contbox .top .imgbox span{position: absolute; bottom:0; width: 100%; height: 4rem; display: flex; align-items: center; justify-content: center; left: 0; background-color: #404040; color: #fff; font-weight: 500; text-transform: uppercase;} .about .sec02 .contbox .top .imgbox:nth-child(2) span{background-color: #00CB68;} .about .sec02 .contbox .top .text-wrap{flex: 1;} .about .sec02 .contbox .top .text-wrap h4{} .about .sec02 .contbox .top .text-wrap h5{font-size: 4rem; font-weight: 700; margin: 1.7rem 0 3.5rem; line-height: 1.5;} .about .sec02 .contbox .top .text-wrap h5 span{color: #00CB68;} .about .sec02 .contbox .top .text-wrap p{line-height: 2;} .about .sec02 .contbox .btm{color: #9D9D9D; line-height: 1.7;} .about .sec02 .contbox .btm span{color: #000;} .about .sec02 .contbox .btm b{font-weight: 700;} @media screen and (max-width: 1024px){ .about .sec02 .contbox{padding: 60px 30px;} .about .sec02 .contbox .top .img-wrap{max-height: 300px;} } @media screen and (max-width: 768px){ .about .sec02{padding: 60px 0;} .about .sec02 h2{font-size: 14px;} .about .sec02 h3{font-size: 24px;} .about .sec02 .contbox .top{flex-direction: column; padding-bottom: 24px; margin-bottom: 26px;} .about .sec02 .contbox .top .img-wrap{width: 100%; max-height: none;} .about .sec02 .contbox .top .text-wrap h4{font-size: 14px;} .about .sec02 .contbox .top .text-wrap h5{font-size: 24px;} .about .sec02 .contbox .top .text-wrap p{font-size: 14px;} .about .sec02 .contbox .btm{font-size: 14px;} } .about .sec03{padding: 18rem 0;} .about .sec03 h2{margin-bottom: 11rem; font-size: 4rem; font-weight: 700; text-align: center;} .about .sec03 ul{display: flex; flex-wrap: wrap; gap: 25px;} .about .sec03 ul li{width: calc((100% - 25px) / 2); height: 26rem; display: flex; align-items: center; justify-content: center; text-align: center; border: 1px solid #D9D9D9; background-color: #F8F8F8; border-radius: 3rem; background: url(../img/about-sec03.png) no-repeat center #f8f8f8; background-size: 7rem; background-position: center 30%; padding: 0 15px;} .about .sec03 ul li p{font-size: 3rem; font-weight: 700; line-height: 1.6;} .about .sec03 ul li p span{color: #00CB68;} @media screen and (max-width: 1024px){ } @media screen and (max-width: 768px){ .about .sec03{padding: 60px 0;} .about .sec03 h2{margin-bottom: 60px;} .about .sec03 ul{gap: 15px;} .about .sec03 ul li{height: 160px; width: calc((100% - 15px) / 2);} .about .sec03 ul li p{font-size: 16px;} } .about .sec04{background-color: #EFF6F3; padding: 18rem 0 25rem;} .about .sec04 h2{padding-bottom: 15rem; position: relative; text-align: center; line-height: 2;} .about .sec04 h2::after{content: ""; width: 7.6rem; position: absolute; height: 3px; background-color: #00CB68; left: 50%; transform: translateX(-50%); top: 75%;} .about .sec04 h3{text-align: center; font-size: 3rem; font-weight: 700; } .about .sec04 h4{text-align: center; margin: 5rem 0 7rem; font-size: 5rem; font-weight: 700; line-height: 1.5;} .about .sec04 h4 span{color: #00CB68;} .about .sec04 .cont01{display: flex; align-items: flex-start; max-width: 1024px; margin: 0 auto;} .about .sec04 .cont01 .imgbox{width: 19rem; position: relative; font-size: 0;} .about .sec04 .cont01 .imgbox img{width: 100%;} .about .sec04 .cont01 .textbox{background-color: #CCEFD8; padding: 4.5rem 6rem 4.5rem 12rem; border-radius: 4rem; margin-left: -8%; margin-top: 5rem; line-height: 2;} .about .sec04 .cont02{border-radius: 6rem; background-color: #fff; padding: 10rem 20px; line-height: 1.6; text-align: center;} .about .sec04 .cont02 h5{font-size: 3rem; font-weight: 700; margin-bottom: 8rem;} .about .sec04 .cont02 h5 span{background-color: #00CB68; color: #fff;} .about .sec04 .cont02 p{font-weight: 800; font-size: 4rem;} .about .sec04 .inner > a {display:flex;justify-content:center;height: 10rem; padding: 0 4rem; font-size: 3rem; margin: 10rem auto 0; width: 40rem;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .about .sec04{padding: 60px 0 100px;} .about .sec04 h2{font-size: 14px;} .about .sec04 h3{font-size: 14px;} .about .sec04 h4{font-size: 24px;} .about .sec04 .cont01{align-items: center;} .about .sec04 .cont01 .imgbox{width: 110px;} .about .sec04 .cont01 .textbox{padding: 20px; padding-left: 76px; font-size: 12px; margin-top: 0;} .about .sec04 .cont02{padding: 60px 20px; border-radius: 30px;} .about .sec04 .cont02 h5{font-size: 16px; margin-bottom: 30px;} .about .sec04 .cont02 p{font-size: 24px;} } /* ******************************************************************************************************************************************* */ /* teacher-list 강사소개 */ .teacher-list{} .teacher-list .sec01{padding: 14rem 0 23rem; color: #fff;} .teacher-list .sec01 .inner{display: flex; justify-content: center; gap: 40px;} .teacher-list .sec01 .inner li{width: 100%; max-width: 500px; border-radius: 30px; position: relative; overflow: hidden;} .teacher-list .sec01 .inner li::after{content: ""; display: block; padding-bottom: 57.2%; } .teacher-list .sec01 .inner li a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;} .teacher-list .sec01 .inner li a img{margin-bottom: 1rem; height: 12rem;} .teacher-list .sec01 .inner li a p{font-size: 3.5rem; font-weight: 700; opacity: 0; transition: 0.3s;} .teacher-list .sec01 .inner li:nth-child(1) a{background: url(../img/teacher-list-fullfullfull-bg.png) no-repeat center / cover;} .teacher-list .sec01 .inner li:nth-child(2) a{background: url(../img/teacher-list-survival-bg.png) no-repeat center / cover;} .teacher-list .sec01 .inner li:hover a p{opacity: 1;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .teacher-list .sec01{padding: 60px 0 100px;} .teacher-list .sec01 .inner{flex-wrap: wrap;} .teacher-list .sec01 .inner li a p{font-size: 22px;} .teacher-list .sec01 .inner li a img{height: 75px;} } /* teacher-full */ .teacher-full{line-height: 1.5;} .teacher-full .sec01{padding: 14rem 0 16rem;} .teacher-full .sec01 h1{text-align: center; font-weight: 700; font-size: 6rem; margin-bottom: 11rem;} .teacher-full .sec01 .contbox{background: url(../img/teacherfull-sec01-bg.png) no-repeat right center / cover; background-color: #1F2723; overflow: hidden; color: #fff; padding: 9.6rem 9.7rem; border-radius: 6rem; background-blend-mode: screen;} .teacher-full .sec01 .contbox h2{font-size: 4.5rem; font-weight: 800; margin-bottom: 5rem;} .teacher-full .sec01 .contbox h2 span{color: #00CB68;} .teacher-full .sec01 .contbox p{line-height: 1.7;} /* */ .teacher-full .banner{text-align: center; background-color: #1F2723; padding: 6.5rem 0;} .teacher-full .banner p{font-size: 1.8rem; color: #fff; margin-bottom: 2.5rem;} .teacher-full .banner h2{color: #77FF00; font-size: 4.5rem; font-weight: 700;} /* */ .teacher-full .sec02{padding: 16rem 0 24rem;} .teacher-full .sec02 .inner{max-width: 950px;} .teacher-full .sec02 .cont1{display: flex; gap: 9rem; align-items: center; margin-bottom: 16rem;} .teacher-full .sec02 .cont1 .imgbox{width: 30%;} .teacher-full .sec02 .cont1 .imgbox img{width: 100%;} .teacher-full .sec02 .cont1 p{font-size: 2.2rem; line-height: 1.8;} .teacher-full .sec02 .cont1 p span{font-weight: 700;} .teacher-full .sec02 .cont2{} .teacher-full .sec02 .cont2 ul{display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2rem;} .teacher-full .sec02 .cont2 ul li{width: calc((100% - 4rem) / 3);} .teacher-full .sec02 .cont2 ul li{font-size: 2.5rem; font-weight: 700; line-height: 1.8;} .teacher-full .sec02 .cont2 ul li img{width: 100%;} .teacher-full .sec02 .cont2 ul li:not(:last-child){font-size: 0;} /* */ .teacher-full .sec03{padding: 23rem 0; background-color: #F8F8F8;} .teacher-full .sec03 .inner{} .teacher-full .sec03 .cont{display: flex; justify-content: space-between;} .teacher-full .sec03 .cont:nth-child(1){margin-bottom: 22rem;} .teacher-full .sec03 .cont h2{font-size: 5rem; font-weight: 700; position: relative;} .teacher-full .sec03 .cont h2::before{content: ""; width: 5.7rem; height: 5px; background-color: #000000; position: absolute; top: -6rem; left: 0;} .teacher-full .sec03 .cont p{line-height: 1.75; width: 50%;} .teacher-full .sec03 .cont span{font-weight: 700; text-decoration: underline;} /* */ .teacher-full .sec04{ padding: 23rem 0 19rem;} .teacher-full .sec04 .cont1{display: flex; justify-content: space-between;} .teacher-full .sec04 .cont1 h2{width: 49%; font-size: 4.5rem; font-weight: 700;} .teacher-full .sec04 .cont1 h2 span{color: #00CB68;} .teacher-full .sec04 .cont1 p{font-size: 2.2rem; width: 50%;} .teacher-full .sec04 .cont1 p b{font-weight: 700;} .teacher-full .sec04 .cont1 p span{color: #00CB68; font-weight: 700; text-decoration: underline;} .teacher-full .sec04 .cont2{margin: 16rem 0 10rem; background-color: #00CB68; color: #fff; font-size: 5rem; font-weight: 700; text-align: center; padding: 3rem 20px; border-radius: 3rem;} .teacher-full .sec04 .cont2 p{padding: 3rem 5rem; position: relative; display: inline-block;} .teacher-full .sec04 .cont2 p::before, .teacher-full .sec04 .cont2 p::after{content: ""; width: 7rem; height: 5.5rem; position: absolute; top: 1rem;} .teacher-full .sec04 .cont2 p::before{background: url(../img/teacherfull-sec04-left.png) no-repeat center / cover; left: 0;} .teacher-full .sec04 .cont2 p::after{background: url(../img/teacherfull-sec04-right.png) no-repeat center / cover; right: 0;} .teacher-full .sec04 .cont3{margin-bottom: 20rem;} .teacher-full .sec04 .cont3 p{text-align: center; font-size: 2.2rem;} .teacher-full .sec04 .cont3 p b{font-weight: 700; text-decoration: underline;} .teacher-full .sec04 .cont3 p span{font-weight: 700; color: #00CB68;} .teacher-full .sec04 .cont4{display: flex; justify-content: space-between; border: 1px solid #707070; padding: 18rem 9rem; border-radius: 6rem; box-shadow: 0 3px 6px rgba(0,0,0,0.16); margin-bottom: 23rem;} .teacher-full .sec04 .cont4 .textbox{width: 45%;} .teacher-full .sec04 .cont4 .textbox h2{font-size: 5rem; font-weight: 700; margin-bottom: 9.7rem;} .teacher-full .sec04 .cont4 .textbox p{font-size: 2.2rem;} .teacher-full .sec04 .cont4 .textbox p b{font-weight: 700;} .teacher-full .sec04 .cont4 .textbox p span{font-weight: 700; color: #00CB68; text-decoration: underline;} .teacher-full .sec04 .cont4 .imgbox{width: 50%; font-size: 0;} .teacher-full .sec04 .cont4 .imgbox img{width: 100%;} .teacher-full .sec04 .cont5{display: flex; justify-content: space-between;} .teacher-full .sec04 .cont5 h2{font-size: 5rem; font-weight: 700;} .teacher-full .sec04 .cont5 h2 span{color: #00CB68;} .teacher-full .sec04 .cont5 p{font-size: 2.2rem;} .teacher-full .sec04 .cont5 p span{font-weight: 700; color: #00CB68; text-decoration: underline;} /* */ .teacher-full .sec05{padding: 27rem 0; background-color: #EFF6F3; position: relative; margin-bottom: 40rem;} .teacher-full .sec05 h2{text-align: center; font-size: 5rem; font-weight: 700; padding-bottom: 15rem; position: relative;} .teacher-full .sec05 h2::after{content: ""; width: 7.6rem; height: 3px; background-color: #00CB68; position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%);} .teacher-full .sec05 h2 span{color: #00CB68;} .teacher-full .sec05 .cont1{display: flex; margin-bottom: 12rem; gap: 20px;} .teacher-full .sec05 .cont1 .textbox{width: 100%;} .teacher-full .sec05 .cont1 .textbox p{font-weight: 700; margin-bottom: 5rem;} .teacher-full .sec05 .cont1 .textbox h3{font-weight: 700; font-size: 3rem;} .teacher-full .sec05 .cont2{font-size: 2.5rem; text-align: center; font-weight: 700;} .teacher-full .sec05 .cont2 h3{} .teacher-full .sec05 .cont2 h3 span{font-size: 3.5rem;} .teacher-full .sec05 .cont2 ul{display: flex; gap: 4.3rem; justify-content: center; margin: 10rem 0;} .teacher-full .sec05 .cont2 ul li{width: 30%; background-color: #fff; color: #00CB68; height: 31rem; display: flex; align-items: center; justify-content: center; border-radius: 6rem; font-size: 4rem; padding: 0 10px;} .teacher-full .sec05 .cont2 h4{} .teacher-full .sec05 .cont3{padding: 8rem 20px; background-color: #00CB68; border-radius: 5rem; text-align: center; color: #fff; position: absolute; bottom: -40rem; width: calc(100% - 40px); left: 20px;} .teacher-full .sec05 .cont3 h3{font-size: 6rem; font-weight: 700;} .teacher-full .sec05 .cont3 p{font-size: 3rem;} /* */ .teacher-full .sec06{} .teacher-full .sec06 .cont{display: flex; justify-content: space-between; margin-bottom: 24rem;} .teacher-full .sec06 .cont h2{font-size: 3rem; color: #00CB68; position: relative; font-weight: 700; } .teacher-full .sec06 .cont h2::after{content: "01"; position: absolute; top: -10rem; font-size: 15rem; color: #00CB68; opacity: 0.15; right: 0;} .teacher-full .sec06 .cont:nth-child(2) h2::after{content: "02";} .teacher-full .sec06 .cont p{font-size: 2.5rem; width: 45%;} .teacher-full .sec06 .cont p b{font-weight: 700; text-decoration: underline;} .teacher-full .sec07{background-color: #1C2722; padding: 18rem 0; text-align: center; color: #fff; } .teacher-full .sec07 p{font-size: 2.2rem;} .teacher-full .sec07 h2{font-size: 3rem; margin: 6rem 0 18rem;} .teacher-full .sec07 .round-btn{font-size: 2.4rem; width: 100%; max-width: 44rem; justify-content: center; background-color: #00CB68; color: #1C2722; height: 7.2rem;} @media screen and (max-width: 1024px){ .teacher-full .sec04 .cont4{padding: 50px 36px;} } @media screen and (max-width: 768px){ .teacher-full .sec01{padding: 30px 0 60px;} .teacher-full .sec01 h1{margin-bottom: 60px; font-size: 30px; margin-bottom: 22px;} .teacher-full .sec01 .contbox{padding: 42px 34px 190px; background: url(../img/teacherfull-sec01-bg2.png) no-repeat bottom center / cover; background-color: #1F2723; border-radius: 30px;} .teacher-full .sec01 .contbox h2{font-size: 24px;} .teacher-full .sec01 .contbox p{font-size: 14px;} /* */ .teacher-full .banner h2{font-size: 24px;} /* */ .teacher-full .sec02{padding: 60px 0;} .teacher-full .sec02 .inner{max-width: 500px;} .teacher-full .sec02 .cont1{gap: 0; justify-content: space-between; margin-bottom: 60px;} .teacher-full .sec02 .cont1 .imgbox{width: 49%;} .teacher-full .sec02 .cont1 p{width: 45%; font-size: 8px;} .teacher-full .sec02 .cont2 ul{gap:10px; align-items: flex-start;} .teacher-full .sec02 .cont2 ul li{width: calc((100% - 10px)/2); font-size: 14px;} .teacher-full .sec02 .cont2 ul li:nth-child(5){margin-top: -24.5%;} .teacher-full .sec02 .cont2 ul li:last-child{align-self: flex-end;} /* */ .teacher-full .sec03{padding: 90px 0;} .teacher-full .sec03 .cont{flex-wrap: wrap; font-size: 14px;} .teacher-full .sec03 .cont > *{width: 100% !important;} .teacher-full .sec03 .cont:nth-child(1){margin-bottom: 130px;} .teacher-full .sec03 .cont h2{margin-bottom: 60px; font-size: 24px;} .teacher-full .sec03 .cont h2::before{top: -30px; width: 40px;} /* */ .teacher-full .sec04{padding: 60px 0;} .teacher-full .sec04 .cont1{flex-wrap: wrap;} .teacher-full .sec04 .cont1 > *{width: 100% !important;} .teacher-full .sec04 .cont1 h2{margin-bottom: 62px; font-size: 24px;} .teacher-full .sec04 .cont1 p{font-size: 13px;} .teacher-full .sec04 .cont2{margin: 60px 0; font-size: 26px;} .teacher-full .sec04 .cont2 p{padding: 20px;} .teacher-full .sec04 .cont2 p::before, .teacher-full .sec04 .cont2 p::after{width: 29px; height: 23px;} .teacher-full .sec04 .cont3{margin-bottom: 60px;} .teacher-full .sec04 .cont3 p{font-size: 14px;} .teacher-full .sec04 .cont4{flex-wrap: wrap; margin-bottom: 60px;} .teacher-full .sec04 .cont4 > div{width: 100% !important;} .teacher-full .sec04 .cont4 .textbox h2{font-size: 26px; margin-bottom: 35px;} .teacher-full .sec04 .cont4 .textbox p{font-size: 14px; margin-bottom: 57px;} .teacher-full .sec04 .cont5{flex-wrap: wrap;} .teacher-full .sec04 .cont5 > *{width: 100%;} .teacher-full .sec04 .cont5 h2{margin-bottom: 35px; font-size: 24px;} .teacher-full .sec04 .cont5 p{font-size: 14px;} /* */ .teacher-full .sec05{padding: 58px 0 140px; margin-bottom: 150px;} .teacher-full .sec05 h2{font-size: 24px; padding-bottom: 97px;} .teacher-full .sec05 h2::after{bottom: 20%;} .teacher-full .sec05 .cont1{flex-wrap: wrap; gap: 40px; font-size: 14px; margin-bottom: 54px;} .teacher-full .sec05 .cont1 .textbox p{margin-bottom: 30px; } .teacher-full .sec05 .cont1 .textbox h3{font-size: 30px;} .teacher-full .sec05 .cont2{font-size: 14px;} .teacher-full .sec05 .cont2 h3 span{font-size: 20px; display: block; margin-top: 15px;} .teacher-full .sec05 .cont2 ul{margin: 50px 0; flex-wrap: wrap; gap: 15px;} .teacher-full .sec05 .cont2 ul li{width: calc((100% - 15px)/2); font-size: 22px; height: 120px; border-radius: 30px;} .teacher-full .sec05 .cont3{bottom: -17%; padding: 30px 25px;} .teacher-full .sec05 .cont3 h3{font-size: 26px; margin-bottom: 15px;} .teacher-full .sec05 .cont3 p{font-size: 14px;} /* */ .teacher-full .sec06 .cont{flex-wrap: wrap; margin-bottom: 150px;} .teacher-full .sec06 .cont:nth-child(2){margin-bottom: 60px;} .teacher-full .sec06 .cont > *{width: 100% !important;} .teacher-full .sec06 .cont h2{font-size: 16px; margin-bottom: 60px;} .teacher-full .sec06 .cont p{font-size: 14px;} /* */ .teacher-full .sec07{padding: 54px 0 110px;} .teacher-full .sec07 p{font-size: 14px;} .teacher-full .sec07 h2{margin: 60px 0; font-size: 16px;} .teacher-full .sec07 .round-btn{font-size: 16px; height: 40px; background-color: transparent; color: #00CB68; max-width: 245px;} } /* teacher-survival */ .teacher-surv{line-height: 1.5;} .teacher-surv .sec01{padding: 14rem 0 25rem;} .teacher-surv .sec01 h1{text-align: center; font-weight: 700; font-size: 6rem; margin-bottom: 8.5rem;} .teacher-surv .sec01 .contbox{background: url(../img/teachersurv-sec01-bg.png) no-repeat; background-position: 95% -100px; background-color: #1F2723; color: #fff; padding: 10rem 9.6rem; border-radius: 6rem; background-blend-mode: screen; background-size: 40%;} .teacher-surv .sec01 .contbox h2{font-size: 4.5rem; font-weight: 800; margin-bottom: 5rem;} .teacher-surv .sec01 .contbox h2 span{color: #00CB68;} .teacher-surv .sec01 .contbox p{line-height: 1.7;} @media screen and (max-width: 768px){ .teacher-surv .sec01{padding: 30px 0 125px;} .teacher-surv .sec01 h1{margin-bottom: 60px; font-size: 30px; margin-bottom: 62px;} .teacher-surv .sec01 .contbox{padding: 42px 34px 180px; background-size: 300px; border-radius: 30px; background-position: 125% 180px; } .teacher-surv .sec01 .contbox h2{font-size: 24px;} .teacher-surv .sec01 .contbox p{font-size: 14px;} } @media screen and (max-width: 400px){ .teacher-surv .sec01 .contbox{background-size: 50%; background-position-x: 140%; background-position-y: 350px;} } .teacher-surv .sec02{line-height: 1.7;} .teacher-surv .sec02 .inner{max-width: 1180px;} .teacher-surv .sec02 .cont{display: flex; justify-content: space-between; margin-bottom: 23rem;} .teacher-surv .sec02 .cont:last-child{margin-bottom: 0;} .teacher-surv .sec02 .cont h2{font-size: 5rem; color: #00CB68; position: relative; font-weight: 700; padding-left: 8.5rem;} .teacher-surv .sec02 .cont h2::after{content: "01"; position: absolute; top: -9.5rem; font-size: 15rem; color: #00CB68; opacity: 0.15; left: 0; line-height: 1;} .teacher-surv .sec02 .cont:nth-child(2) h2::after{content: "02";} .teacher-surv .sec02 .cont:nth-child(3) h2::after{content: "03";} .teacher-surv .sec02 .cont .textbox{font-size: 2rem; width: 55%;} .teacher-surv .sec02 .cont p b{font-weight: 700; } .teacher-surv .sec02 .cont p span{text-decoration: underline; font-weight: 700;} .teacher-surv .sec02 .cont p:last-child{margin-top: 9rem; font-size: 2.4rem;} @media screen and (max-width: 768px){ .teacher-surv .sec02 .cont{flex-wrap: wrap; margin-bottom: 124px;} .teacher-surv .sec02 .cont > *{width: 100% !important;} .teacher-surv .sec02 .cont .textbox{padding-left: 75px;} .teacher-surv .sec02 .cont h2{font-size: 24px; margin-bottom: 50px; padding-left: 75px;} .teacher-surv .sec02 .cont h2::after{font-size: 80px; left: 0; top: -50px;} .teacher-surv .sec02 .cont p{font-size: 14px;} .teacher-surv .sec02 .cont p:last-child{font-size: 18px;} } .teacher-surv .sec03 .contbox{margin: 16rem 0; background-color: #00CB68; color: #fff; font-size: 2.2rem; text-align: center; padding: 10rem 20px 7rem; border-radius: 3rem;} .teacher-surv .sec03 .contbox h2{padding: 3rem 5rem; position: relative; display: inline-block; margin-bottom: 3.5rem; font-size: 5rem; font-weight: 700;} .teacher-surv .sec03 .contbox h2::before, .teacher-surv .sec03 .contbox h2::after{content: ""; width: 7rem; height: 5.5rem; position: absolute; top: 1rem;} .teacher-surv .sec03 .contbox h2::before{background: url(../img/teacherfull-sec04-left.png) no-repeat center / cover; left: 0;} .teacher-surv .sec03 .contbox h2::after{background: url(../img/teacherfull-sec04-right.png) no-repeat center / cover; right: 0;} .teacher-surv .sec03 .contbox p{line-height: 1.8;} @media screen and (max-width: 768px){ .teacher-surv .sec03 .contbox{padding: 44px 20px 48px; margin: 60px 0;} .teacher-surv .sec03 .contbox h2::before, .teacher-surv .sec03 .contbox h2::after{width: 29px; height: 23px;} .teacher-surv .sec03 .contbox h2{font-size: 26px; margin-bottom: 23px; padding: 10px 20px;} .teacher-surv .sec03 .contbox p{font-size: 14px;} } .teacher-surv .sec04{text-align: center; margin-bottom: 16rem; line-height: 2;} .teacher-surv .sec04 b{font-weight: 700;} .teacher-surv .sec04 span{font-weight: 700; text-decoration: underline;} @media screen and (max-width: 768px){ .teacher-surv .sec04{font-size: 14px; line-height: 1.7;} } .teacher-surv .sec05{margin-bottom: 28rem;} .teacher-surv .sec05 .contbox{border-radius: 3rem; border: 1px solid #00CB68; background-color: #F5FCF9; padding: 22rem 10rem 13rem;} .teacher-surv .sec05 .cont{display: flex; justify-content: space-between;} .teacher-surv .sec05 .cont:first-child{margin-bottom: 20rem;} .teacher-surv .sec05 .cont h2{color: #00CB68; font-size: 5rem; font-weight: 700; position: relative; width: 39rem;} .teacher-surv .sec05 .cont h2 .dot{position: absolute; display: flex; gap: 10px; top: -8rem; left: 0;} .teacher-surv .sec05 .cont h2 .dot span{width: 1.4rem; height: 1.4rem; border-radius: 50px; background-color: #00CB68; } .teacher-surv .sec05 .cont p{width: 50%; line-height: 1.75; width: calc(100% - 39rem); max-width: 525px;} .teacher-surv .sec05 .cont p b{font-weight: 700;} .teacher-surv .sec05 .cont p span{font-weight: 700; text-decoration: underline;} @media screen and (max-width: 1024px){ .teacher-surv .sec05 .contbox{padding: 170px 32px 100px;} .teacher-surv .sec05 .cont:first-child{margin-bottom: 170px;} } @media screen and (max-width: 768px){ .teacher-surv .sec05{margin-bottom: 60px;} .teacher-surv .sec05 .contbox{padding: 93px 32px 60px;} .teacher-surv .sec05 .cont{flex-wrap: wrap; } .teacher-surv .sec05 .cont:first-child{margin-bottom: 92px;} .teacher-surv .sec05 .cont h2, .teacher-surv .sec05 .cont p{width: 100%; max-width: none;} .teacher-surv .sec05 .cont h2{font-size: 24px; margin-bottom: 35px;} .teacher-surv .sec05 .cont h2 .dot{top: -32px;} .teacher-surv .sec05 .cont h2 .dot span{width: 7px; height: 7px;} .teacher-surv .sec05 .cont p{font-size: 14px;} } .teacher-surv .sec06{padding: 26rem 0 30rem; background-color: #F8F8F8; line-height: 1.5;} .teacher-surv .sec06 h2{font-size: 5rem; font-weight: 800; text-align: center; margin-bottom: 12rem; } .teacher-surv .sec06 h2 span{color: #00CB68;} .teacher-surv .sec06 .contbox{padding: 14rem 17rem; background-color: #fff; border-radius: 3rem;} .teacher-surv .sec06 .contbox .cont{display: flex; justify-content: space-between; padding-bottom: 9.3rem; border-bottom: 2px solid #00CB68; margin-bottom: 9.7rem;} .teacher-surv .sec06 .contbox .cont h3{width: 32rem; font-size: 4rem; font-weight: 700; color: #00CB68;} .teacher-surv .sec06 .contbox .cont h4{width: calc(100% - 32rem); max-width: 44rem; line-height: 2;} .teacher-surv .sec06 .contbox .cont h4 span{text-decoration: underline; font-weight: 700;} .teacher-surv .sec06 .contbox .cont h4 b{font-weight: 700;} .teacher-surv .sec06 .contbox p{font-size: 2.2rem; text-align: center; line-height: 1.8;} .teacher-surv .sec06 .contbox p span{font-weight: 700; color: #00CB68;} .teacher-surv .sec06 .contbox p b{text-decoration: underline; font-weight: 700; text-align: center;} .teacher-surv .sec06 .btn-wrap{text-align: center; margin-top: 13rem;} .teacher-surv .sec06 .btn-wrap a{width: 44rem; height: 7rem; color: #fff; font-size: 2.4rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; background-color: #00CB68; border-radius: 50px;} @media screen and (max-width: 1024px){ .teacher-surv .sec06 .contbox{padding: 60px 32px;} } @media screen and (max-width: 768px){ .teacher-surv .sec06{padding: 60px 0 120px;} .teacher-surv .sec06 h2{font-size: 24px; margin-bottom: 60px;} .teacher-surv .sec06 .contbox .cont{flex-wrap: wrap; margin-bottom: 46px; padding-bottom: 46px;} .teacher-surv .sec06 .contbox .cont h3, .teacher-surv .sec06 .contbox .cont h4{width: 100%; max-width: none;} .teacher-surv .sec06 .contbox .cont h3{font-size: 20px; margin-bottom: 40px;} .teacher-surv .sec06 .contbox .cont h4, .teacher-surv .sec06 .contbox p{font-size: 14px;} .teacher-surv .sec06 .btn-wrap{margin-top: 96px; } .teacher-surv .sec06 .btn-wrap a{font-size: 16px; height: 40px; width: 246px;} } /* ******************************************************************************************************************************************* */ /* class 강의소개 */ /* class-list */ .class-list{} .class-list .sub-visual{border-radius: 0;} .class-list .sub-gnb{} .class-list .sub-gnb{width: 100%; background-color: #00CB68; height: 9rem; color: #86E6B7; font-size: 2.2rem; font-weight: 700;} .class-list .sub-gnb ul{display: flex; height: 100%; align-items: center; gap: 4rem; justify-content: center;} .class-list .sub-gnb ul li.active{color: #fff;} @media screen and (max-width: 768px){ .class-list .sub-gnb{height: 55px; font-size: 14px;} .class-list .sub-gnb ul{gap: 30px;} } .class-list .sec01{padding: 12rem 0 17rem;} .class-list .sec01 ul{display: flex; flex-wrap: wrap; gap: 4rem 2.7rem;} .class-list .sec01 ul li{width: calc((100% - 5.4rem) / 3); border: 1.5px solid #D9D9D9; border-radius: 3rem; transition: 0.3s; position: relative; order: 2;} .class-list .sec01 ul li a{display: block; padding: 5rem 2.5rem 4.7rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;} .class-list .sec01 ul li p{line-height: 1.5; margin-bottom: 2.5rem;} .class-list .sec01 ul li .btm{font-weight: 700; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2px; width: 100%;} .class-list .sec01 ul li .btm .left{font-size: 1.8rem; flex: auto;} .class-list .sec01 ul li .btm .left h2{font-size: 1.8rem;} .class-list .sec01 ul li .btm .left span{font-size: 4.5rem; display: block;} .class-list .sec01 ul li .btm .left b{font-size: 3.5rem; display: block;} .class-list .sec01 ul li .btm h3{font-size: 3.6rem; align-self: flex-end; flex: auto; display: flex; justify-content: flex-end; align-items: center;} .class-list .sec01 ul li .btm h3 span{font-weight: 500; font-size: 2rem;} /* */ .class-list .sec01 ul.list-02 li{} .class-list .sec01 ul.list-02 li p{margin-bottom: 1.5rem;} .class-list .sec01 ul.list-02 li h2{font-size: 4.5rem; font-weight: 700; margin-bottom: 3rem;} .class-list .sec01 ul.list-02 li h2 span{font-size: 3.5rem;} .class-list .sec01 ul.list-02 li .price{font-size: 3.6rem; font-weight: 700; display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; width: 100%;} .class-list .sec01 ul.list-02 li .price span{font-size: 1.6rem;} .class-list .sec01 ul.list-02 li .price h3{font-size: 3.6rem; font-weight: 700; margin-left: 12px;} .class-list .sec01 ul.list-02 li .price h3 b{font-size: 2rem; margin-bottom: 6px; font-weight: 500;} .class-list .sec01 ul.list-03{} .class-list .sec01 ul.list-03 li p.round{display: inline-flex; padding: 3px 2rem; background-color: #000; color: #fff; border-radius: 50px; transition: 0.3s; margin-bottom: 3rem;} .class-list .sec01 ul.list-03 li:hover p.round{background-color: #00CB68;} .class-list .sec01 ul.list-03 li h3{font-size: 4rem; font-weight: 700;} .class-list .sec01 ul li:hover{color: #00CB68; border: 1.5px solid #00CB68;} .class-list .sec01 ul li:hover p.round{} .class-list .sec01 ul li.new{order: 0;;} .class-list .sec01 ul li.hit{order: 1;} .class-list .sec01 ul li.new::after, .class-list .sec01 ul li.hit::after{content: ""; width: 9.6rem; height: 7.7rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; right: 3.5rem; top: -0.8rem;} .class-list .sec01 ul li.new::after{background-image: url(../img/class-new1.svg);} .class-list .sec01 ul li.hit::after{background-image: url(../img/class-hit1.svg);} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .class-list .sec01{padding: 44px 0 100px;} .class-list .sec01 ul {gap: 15px;} .class-list .sec01 ul li{border-radius: 15px; width: calc((100% - 15px) / 2);} .class-list .sec01 ul li a{padding: 21px 12px;} .class-list .sec01 ul li p{font-size: 10px; margin-bottom: 10px;} .class-list .sec01 ul li p.round{padding: 3px 9px; margin-bottom: 10px;} .class-list .sec01 ul li .btm .left h2{font-size: 10px;} .class-list .sec01 ul li .btm .left span{font-size: 20px;} .class-list .sec01 ul li .btm .left b{font-size: 20px;} .class-list .sec01 ul li .btm h3{font-size: 16px;} .class-list .sec01 ul.list-02 li p{margin-bottom: 5px;} .class-list .sec01 ul.list-02 li h2{font-size: 20px; margin-bottom: 10px;} .class-list .sec01 ul.list-02 li h2 span{font-size: 14px;} .class-list .sec01 ul.list-02 li .price{flex-direction: column;} .class-list .sec01 ul.list-02 li .price span{font-size: 10px;} .class-list .sec01 ul.list-02 li .price h3{font-size: 16px;} .class-list .sec01 ul.list-02 li .price h3 b{font-size: 10px;} .class-list .sec01 ul.list-03 li p.round{padding: 3px 6px; margin-bottom: 10px; font-size: 12px;} .class-list .sec01 ul.list-03 li h3{font-size: 16px;} .class-list .sec01 ul li.new::after, .class-list .sec01 ul li.hit::after{width: 38px; height: 30px; top: -4px; right: 10px;} } /* class-info-01 */ .class-info .sub-visual{padding-bottom: 18rem;} .class-info .sub-visual::after{content: ""; width: 100%; height: 6rem; position: absolute; background-color: #F5FCF9; left: 0; bottom: 0; z-index: -1;} .class-info .sub-visual .apply-wrap{position: absolute; padding: 2.2rem 20px 2.2rem 4rem; background-color: #404040; border-radius: 10px 10px 0 0; left: 50%; transform: translateX(-50%); bottom: 0; width: calc(100% - 12rem); display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem;} .class-info .sub-visual .apply-wrap2{align-items: flex-start;} .class-info .sub-visual .apply-wrap .left{display: flex;} .class-info .sub-visual .apply-wrap .class-title{display: flex; gap: 3rem;} .class-info .sub-visual .apply-wrap .class-title:nth-child(1){padding-right: 4rem; margin-right: 4rem; border-right: 1px solid #fff;} .class-info .sub-visual .apply-wrap .class-title span{font-size: 2.2rem; color: #00CB68; font-weight: 700;} .class-info .sub-visual .apply-wrap .class-title span b{font-size: 2rem;} .class-info .sub-visual .apply-wrap p{display: block; width: 100%; position: absolute; top: -4.4rem; text-align: right; right: 0; color: #fff;} .class-info .sub-visual .apply-wrap h3{font-size: 3rem; font-weight: 700;} .class-info .sub-visual .apply-wrap h3 b{font-size: 4.2rem;} .class-info .sub-visual .apply-wrap .btn{background-color: #77FF00; min-width: 25rem; height: 5.2rem; display: inline-flex; color: #1F2723; font-size: 2.2rem; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; padding: 0 4rem;} /* class-info-01 */ .class-info-01 .title{font-size: 3rem; font-weight: 700; margin-bottom: 50px;} .class-info-01 .sec01{padding: 13rem 0 15rem; background-color: #F5FCF9; } .class-info-01 .sec01 .title{padding-bottom: 5rem; border-bottom: 1px solid #00CB68; } .class-info-01 .sec01 .cont{text-align: center;} .class-info-01 .sec01 .cont span{color: #00CB68} .class-info-01 .sec01 .cont h2{font-size: 2.5rem; line-height: 1.6; font-weight: 700; margin-bottom: 6rem;} .class-info-01 .sec01 .cont p{line-height: 2.2; font-size: 1.8rem;} .class-info-01 .sec01 .cont p b{font-weight: 700;} .class-info-01 .sec02{padding: 15rem 0;} .class-info-01 .sec02 .title{display: flex; justify-content: space-between; align-items: center;} .class-info-01 .sec02 .title .grade{display: flex; align-items: center; gap: 15px; font-size: 2.5rem;} .class-info-01 .sec02 .title .grade span{font-weight: 500;} .class-info-01 .sec02 .title .grade .stars{height: 2.7rem; display: flex; gap: 5px;} .class-info-01 .sec02 .title .grade img{height: 100%;} .class-info-01 .sec02 .title .grade p{color: #00CB68;} .class-info-01 .sec02 ul{} .class-info-01 .sec02 ul li{padding: 4rem 4.8rem; border: 1px solid #D9D9D9; border-radius: 3rem; margin-bottom: 3rem;} .class-info-01 .sec02 ul li .top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 4.4rem;} .class-info-01 .sec02 ul li .top .profile{display: flex; align-items: center; gap: 2.6rem;} .class-info-01 .sec02 ul li .top .profile .imgbox{width: 7.8rem; font-size: 0;} .class-info-01 .sec02 ul li .top .profile .imgbox img{width: 100%;} .class-info-01 .sec02 ul li .top .info{} .class-info-01 .sec02 ul li .top .info span{font-size: 2.4rem; font-weight: 700;} .class-info-01 .sec02 ul li .top .info p{font-size: 1.8rem; margin-top: 5px;} .class-info-01 .sec02 ul li .top .stars{display: flex; gap: 5px; height: 2rem;} .class-info-01 .sec02 ul li .top .stars img{height: 100%;} .class-info-01 .sec02 ul li .cont p{overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-bottom: 10px; line-height: 1.5;} .class-info-01 .sec02 ul li .cont.active p{display: block; } .class-info-01 .sec02 ul li .cont .btn-more::after{cursor: pointer; font-size: 2rem; font-weight: 700; content: "더보기"; } .class-info-01 .sec02 ul li .cont.active .btn-more::after{content: "줄이기";} .class-info-01 .sec02 ul li:nth-child(n+4){display: none;} .class-info-01 .sec02 .review-list.active li:nth-child(n+4){display: block;} .class-info-01 .sec02 .btn-review-more{display: flex; align-items: center; gap: 1.6rem; justify-content: center; cursor: pointer; font-weight: 700; font-size: 1.8rem; margin-top: 43px;} .class-info-01 .sec02 .btn-review-more img{width: 1.7rem;} .class-info-01 .sec02 .btn-review-more.toggle img{transform: rotate(-180deg);} .class-info-01 .sec03{} .class-info-01 .sec03 ul{} .class-info-01 .sec03 ul li{margin-bottom: 5rem; border: 1px solid #D9D9D9; border-radius: 3rem; padding: 5rem 4.2rem; background-color: #FBFBFB;} .class-info-01 .sec03 ul li:last-child{margin-bottom: 15rem;} .class-info-01 .sec03 ul li h2{font-size: 2.6rem; font-weight: 700; position: relative; padding-left: 4rem;} .class-info-01 .sec03 ul li h2::before{content: "01."; position: absolute; left: 0;} .class-info-01 .sec03 ul li:nth-child(1) h2::before{content: "01.";} .class-info-01 .sec03 ul li:nth-child(2) h2::before{content: "02.";} .class-info-01 .sec03 ul li:nth-child(3) h2::before{content: "03.";} .class-info-01 .sec03 ul li:nth-child(4) h2::before{content: "04.";} .class-info-01 .sec03 ul li:nth-child(5) h2::before{content: "05.";} .class-info-01 .sec03 ul li:nth-child(6) h2::before{content: "06.";} .class-info-01 .sec03 ul li:nth-child(7) h2::before{content: "07.";} .class-info-01 .sec03 ul li:nth-child(8) h2::before{content: "08.";} .class-info-01 .sec03 ul li:nth-child(9) h2::before{content: "09.";} .class-info-01 .sec03 ul li:nth-child(10) h2::before{content: "10.";} .class-info-01 .sec03 ul li .btm-txt{display: flex; margin-top: 4rem; padding-top: 4.3rem; border-top: 1px solid #9D9D9D; font-size: 2.2rem;} .class-info-01 .sec03 ul li .btm-txt h4{color: #00CB68; font-weight: 700; width: 28rem; font-size: 2.2rem;} .class-info-01 .sec03 ul li .btm-txt div{width: calc(100% - 28rem);} .class-info-01 .sec03 ul li p{line-height: 2; font-size: 2.2rem; font-weight: 500; } .class-info-01 .sec03 ul li h3{padding-left: 14px; position: relative; line-height: 1.6; font-size: 1.8rem; margin-top: 5rem;} .class-info-01 .sec03 ul li h3::before{content: "*"; position: absolute; left: 0;} .class-info-01 .sec04{background-color: #1C2722; color: #fff; padding: 15rem 0 21rem;} .class-info-01 .sec04 .boxtext{font-size: 1.6rem; font-weight: 700; color: #77FF00; border: 2px solid #77FF00; margin-bottom: 2rem; display: inline-block; padding: 8px 2rem;} .class-info-01 .sec04 .contbox{border: 1px solid #D9D9D9; padding: 5rem 4rem; background-color: #38443F; border-radius: 3rem;} .class-info-01 .sec04 .contbox .top-text{border-bottom: 1px solid #F8F8F8; padding-bottom: 4.3rem; margin-bottom: 4rem; display: flex; align-items: center; justify-content: space-between; color: #00CB68;} .class-info-01 .sec04 .contbox .top-text h2{font-size: 2.6rem;} .class-info-01 .sec04 .contbox .top-text span{font-size: 1.8rem;} .class-info-01 .sec04 .contbox p{line-height: 2; font-size: 2.2rem; font-weight: 500;} .class-info-01 .sec04 .contbox p span{color: #00CB68;} .class-info-01 .sec04 .contbox h3{padding-left: 14px; position: relative; line-height: 1.6; font-size: 1.8rem; margin-top: 5rem;} .class-info-01 .sec04 .contbox h3::before{content: "※"; position: absolute; left: 0;} @media screen and (max-width: 1300px){ .class-info .sub-visual .apply-wrap .class-title{flex-direction: column; align-items: flex-start; gap: 10px;} .class-info .sub-visual .apply-wrap .class-title:nth-child(1){padding-right: 8px; margin-right: 8px;} } @media screen and (max-width: 768px){ .class-info .sub-visual .apply-wrap{font-size: 12px; width: calc(100% - 40px); padding: 15px;} .class-info .sub-visual .apply-wrap p{text-align: center; top: -32px;} .class-info .sub-visual .apply-wrap h3{font-size: 16px;} .class-info .sub-visual .apply-wrap h3 b{font-size: 22px;} .class-info .sub-visual .apply-wrap .btn{font-size: 12px; min-width: 100px; height: 30px; border-radius: 5px; padding: 0 10px;} /* */ .class-info .sub-visual .apply-wrap .class-title span{font-size: 10px;} .class-info .sub-visual .apply-wrap .class-title span b{font-size: 9px;} .class-info .sub-visual .apply-wrap .class-title h3{font-size: 14px;} .class-info .sub-visual .apply-wrap .class-title h3 b{font-size: 18px;} /* */ .class-info-01 .title{font-size: 20px;} .class-info-01 .sec01{padding: 53px 0 80px;} .class-info-01 .sec01 .title{padding-bottom: 37px;} .class-info-01 .sec01 .cont h2{font-size: 16px;} .class-info-01 .sec01 .cont p{font-size: 14px;} .class-info-01 .sec02{padding: 78px 0;} .class-info-01 .sec02 .title .grade{Fz: 14px;} .class-info-01 .sec02 .title .grade .stars{height: 18px; } .class-info-01 .sec02 ul li{padding: 30px 20px; margin-bottom: 20px;} .class-info-01 .sec02 ul li .top{align-items: flex-end;} .class-info-01 .sec02 ul li .top .profile{gap: 7px;} .class-info-01 .sec02 ul li .top .profile .imgbox{width: 50px;} .class-info-01 .sec02 ul li .top .info span{font-size: 14px;} .class-info-01 .sec02 ul li .top .info p{font-size: 12px;} .class-info-01 .sec02 ul li .top .stars{height: 13px;margin-bottom: 7px;} .class-info-01 .sec02 ul li .cont p{-webkit-line-clamp: 3;} .class-info-01 .sec02 .btn-review-more{font-size: 16px;} .class-info-01 .sec02 .btn-review-more img{width: 17px;} /* */ .class-info-01 .sec03 ul li{padding: 32px 25px; margin-bottom: 30px;} .class-info-01 .sec03 ul li:last-child{margin-bottom: 80px;} .class-info-01 .sec03 ul li h2{font-size: 18px; } .class-info-01 .sec03 ul li .btm-txt{padding-top: 28px; margin-top: 28px;} .class-info-01 .sec03 ul li .btm-txt h4{width: 130px; font-size: 14px;} .class-info-01 .sec03 ul li .btm-txt div{width: calc(100% - 130px);} .class-info-01 .sec03 ul li p{font-size: 14px;} .class-info-01 .sec03 ul li h3{font-size: 12px; padding-left: 10px; margin-top: 37px;} /* */ .class-info-01 .sec04{padding: 80px 0 100px;} .class-info-01 .sec04 .title{margin-bottom: 45px;} .class-info-01 .sec04 .boxtext{padding: 6px; font-size: 12px; margin-bottom: 15px;} .class-info-01 .sec04 .contbox{padding: 32px 25px;} .class-info-01 .sec04 .contbox .top-text{flex-direction: column; gap: 12px; align-items: baseline; padding-bottom: 25px; margin-bottom: 27px;} .class-info-01 .sec04 .contbox .top-text h2{font-size: 18px;} .class-info-01 .sec04 .contbox .top-text span{font-size: 12px;} .class-info-01 .sec04 .contbox p{font-size: 14px;} .class-info-01 .sec04 .contbox h3{font-size: 12px; margin-top: 36px;} } /* class-info-02 */ .class-info-02 .sec01{padding: 13rem 0 15rem;} .class-info-02 .sec01 .title{font-size: 3rem; font-weight: 700; margin-bottom: 50px; padding-bottom: 5rem; border-bottom: 1px solid #00CB68;} .class-info-02 .sec01 .cont{text-align: center;} .class-info-02 .sec01 .cont h2{font-size: 2rem; line-height: 2; margin-bottom: 9rem;} .class-info-02 .sec01 .cont h3{font-size: 3rem; font-weight: 700;} .class-info-02 .sec01 .cont h4{font-size: 5rem; font-weight: 700; line-height: 1.4; margin: 7rem 0;} .class-info-02 .sec01 .cont h4 span{color: #00CB68;} .class-info-02 .sec01 .cont p{line-height: 2.2;} /* */ .class-info-02 .sec02{text-align: center; font-size: 3rem; font-weight: 700;} .class-info-02 .sec02 .inner{background-color: #F5FCF9; padding: 11rem 20px;} .class-info-02 .sec02 h1{margin-bottom: 7.3rem;} .class-info-02 .sec02 ul{display: flex; justify-content: space-between; padding: 0 5rem;} .class-info-02 .sec02 ul li{position: relative; padding: 0 5.5rem; display: flex; align-items: center; justify-content: center; height: 10.3rem; text-align: center;} .class-info-02 .sec02 ul li::before, .class-info-02 .sec02 ul li::after{content: ""; width: 4rem; height: 100%; position: absolute; top: 0;} .class-info-02 .sec02 ul li::before{background: url(../img/classinfo-left.png) no-repeat center / cover; left: 0; } .class-info-02 .sec02 ul li::after{background: url(../img/classinfo-right.png) no-repeat center / cover; right: 0;} .class-info-02 .sec02 ul li p{line-height: 1.3;} .class-info-02 .sec02 ul li p span{color: #00CB68;} .class-info-02 .sec02 h2{margin: 5.4rem 0 10rem; color: #00CB68; font-size: 2rem; font-weight: 500;} .class-info-02 .sec02 h3{line-height: 1.8;} /* */ .class-info-02 .sec03{text-align: center; padding: 11rem 0 15rem;} .class-info-02 .sec03 h2{font-size: 3rem; margin-bottom: 8rem;} .class-info-02 .sec03 h2 span{font-weight: 700; color: #00CB68; line-height: 2;} .class-info-02 .sec03 ul{max-width: 52.6rem; width: calc(100% - 40px); display: flex; flex-wrap: wrap; margin: 0 auto; border: 1px solid #D9D9D9; margin-bottom: 15rem; justify-content: space-between;} .class-info-02 .sec03 ul li{width: calc(100% / 3); position: relative; border: 1px solid #D9D9D9; font-size: 2.5rem; transition: 0.3s; color: #9D9D9D;} .class-info-02 .sec03 ul li:hover{border-color: #00CB68; color: #00CB68;} .class-info-02 .sec03 ul li::after{content: ""; padding-bottom: 100%; display: block;} .class-info-02 .sec03 ul li a{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center;} .class-info-02 .sec03 .text-cont{position: relative; display: flex; justify-content: flex-end; max-width: 1060px; margin: 0 auto; margin-bottom: 14rem;} .class-info-02 .sec03 .text-cont .imgbox{position: absolute; top: 50%; transform: translateY(-50%); width: 35rem; width: 25%; left: 0;} .class-info-02 .sec03 .text-cont .imgbox img{width: 100%;} .class-info-02 .sec03 .text-cont .text-box{background-color: #CCEFD8; padding: 5rem 7rem 5rem 15rem; text-align: left; border-radius: 4rem; max-width: 94rem; line-height: 2; width: 90%;} .class-info-02 .sec03 .text-cont .text-box p{} .class-info-02 .sec03 .text-cont .text-box p span{font-weight: 700;} .class-info-02 .sec03 h3{font-size: 3rem; font-weight: 700; line-height: 1.6; text-align: center; margin-bottom: 9rem;} .class-info-02 .sec03 h3 span{color: #fff; background-color: #00CB68; padding: 0 3px;} .class-info-02 .sec03 h4{font-size: 4rem; font-weight: 700; line-height: 1.6; text-align: center; font-weight: 800;} .class-info-02 .sec04{background-color: #F8F8F8; padding: 16rem 0 22rem;} .class-info-02 .sec04 h1{margin-bottom: 8.5rem; font-size: 4rem; font-weight: 700; text-align: center;} .class-info-02 .sec04 ul{margin-bottom: 8.5rem; max-width: 78rem; margin: 0 auto;} .class-info-02 .sec04 ul li{padding: 1.7rem 2rem; display: flex; align-items: flex-start; gap: 1.8rem; margin-bottom: 30px; width: 100%; background-color: #00CB68; color: #fff; border-radius: 3.5rem; font-size: 2.5rem; font-weight: 500;} .class-info-02 .sec04 ul li img{width: 3.6rem;} .class-info-02 .sec04 h2{text-align: center; font-size: 2rem; line-height: 2; margin-top: 8.5rem;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .class-info-02 .sub-visual .apply-wrap{padding-left: 14px;} .class-info-02 .sec01{padding: 53px 0 84px;} .class-info-02 .sec01 .title{padding-bottom: 37px; margin-bottom: 40px;} .class-info-02 .sec01 .cont h2{margin-bottom: 40px; font-size: 14px;} .class-info-02 .sec01 .cont h3{font-size: 16px; margin-bottom: 40px;} .class-info-02 .sec01 .cont h4{font-size: 24px; margin-bottom: 40px;} .class-info-02 .sec01 .cont p{font-size: 13px;} .class-info-02 .sec02 .inner{padding: 80px 20px;} .class-info-02 .sec02 h1{font-size: 18px; margin-bottom: 53px;} .class-info-02 .sec02 ul{flex-wrap: wrap; gap: 30px; padding: 0; max-width: 250px; margin: 0 auto;} .class-info-02 .sec02 ul li{width: 100%; font-size: 18px;} .class-info-02 .sec02 h2{margin: 25px 0 54px; font-size: 12px;} .class-info-02 .sec02 h3{font-size: 16px;} .class-info-02 .sec03{padding: 80px 0;} .class-info-02 .sec03 h2{font-size: 14px; margin-bottom: 54px;} .class-info-02 .sec03 ul{margin-bottom: 53px;} .class-info-02 .sec03 ul li{font-size: 16px;} .class-info-02 .sec03 .text-cont{margin-bottom: 95px;} .class-info-02 .sec03 .text-cont .imgbox{left: -10%; width: 200px; top: 80%;} .class-info-02 .sec03 .text-cont .text-box{padding: 40px 20px 40px 100px; width: 95%; } .class-info-02 .sec03 .text-cont .text-box p{font-size: 12px;} .class-info-02 .sec03 .text-cont .text-box p span{font-size: 14px;} .class-info-02 .sec03 h3{font-size: 16px;} .class-info-02 .sec03 h4{font-size: 20px; } .class-info-02 .sec04{padding: 80px 0 110px;} .class-info-02 .sec04 h1{font-size: 20px; margin-bottom: 50px;} .class-info-02 .sec04 ul li{font-size: 16px; margin-bottom: 20px; gap: 12px; line-height: 1.6; border-radius: 16px;} .class-info-02 .sec04 ul li img{width: 20px;} .class-info-02 .sec04 h2{margin-top: 42px; font-size: 12px;} } /* class-apply 수강신청 */ .class-apply{} .class-apply .sec01{padding: 32rem 0 11rem;} .class-apply .sec01 h1{text-align: center; font-size: 6rem; font-weight: 700; margin-bottom: 8.3rem;} .class-apply .sec01 .caution{padding: 5.5rem 15px; background-color: #F5FCF9; line-height: 2; font-size: 1.8rem; display: flex; justify-content: center;} .class-apply .sec01 .caution ul{} .class-apply .sec01 .caution ul li{padding-left: 13px; position: relative; } .class-apply .sec01 .caution ul li::before{content: "-"; position: absolute; left: 0;} .class-apply .sec01 .caution ul li:not(:last-child){margin-bottom: 2.5rem;} .class-apply .sec02{padding-bottom: 23rem;} .class-apply .sec02 h2.title{font-weight: 700; font-size: 2rem; margin-bottom: 2rem;} .class-apply .sec02 h2.title b{font-size: 1.6rem;} .class-apply .sec02 form{display: flex; gap: 5%; justify-content: center; flex-wrap: wrap;} .class-apply .sec02 form .cont1{width: 50%;} .class-apply .sec02 form .cont2{width: 45%;} .class-apply .sec02 .cont1 li{margin-bottom: 7.5rem;} .class-apply .sec02 .cont1 li .date-wrap{display: flex; flex-wrap: wrap; font-size: 2rem; font-weight: 700; gap: 15px 0;} .class-apply .sec02 .cont1 li .item{position: relative; width: calc(100% / 6); cursor: pointer;} .class-apply .sec02 .cont1 li input{position: absolute; opacity: 0; height: 0; width: 0;} .class-apply .sec02 .cont1 li .custom-input{position: absolute; top: 3px; left: 0; height: 2rem; width: 2rem; border-radius: 50%; background-color: #fff; border: 1px solid #D9D9D9; margin-top: 0; padding-left: 0;} .class-apply .sec02 .cont1 li .custom-input::after{content: ""; width: 1.3rem; height: 0.8rem; background: url(../img/apply-check.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .class-apply .sec02 .cont1 li label{cursor: pointer; padding-left: 3rem;} .class-apply .sec02 .cont1 li label span{font-size: 1.4rem; font-weight: 400; margin-top: 6px; display: inline-block; padding-left: 3rem;} .class-apply .sec02 .cont1 li input:checked~ .custom-input{background-color: #00CB68; border-color: #00CB68;} .class-apply .sec02 .cont1 li .privacy-text{border: 1px solid #D9D9D9; overflow: hidden; padding: 4rem 0 2.3rem 3rem; padding-right: 13px; font-size: 1.6rem; line-height: 1.5; margin-bottom: 2.8rem;} .class-apply .sec02 .cont1 li .privacy-text p{height: 100px; overflow-y: scroll; padding-right: 4rem;} .class-apply .sec02 .cont1 li .privacy-text p span{font-weight: 700;} .class-apply .sec02 .cont1 li .privacy-text p::-webkit-scrollbar{width: 6px;} .class-apply .sec02 .cont1 li .privacy-text p::-webkit-scrollbar-thumb{background-color: #B4B4B4;} .class-apply .sec02 .cont1 li .privacy-text p::-webkit-scrollbar-track{background-color: #d0d0d0;} .class-apply .sec02 .cont1 li .privacy-check{position: relative; cursor: pointer; font-size: 1.6rem; display: flex; align-items: center; height: 2.6rem;} .class-apply .sec02 .cont1 li .privacy-check input{position: absolute; opacity: 0; height: 0; width: 0;} .class-apply .sec02 .cont1 li .privacy-check .custom-check{position: absolute; top: 0; left: 0; height: 2.6rem; width: 2.6rem; border-radius: 2px; background-color: #fff; border: 1px solid #CCCCCC; margin-top: 0; padding-left: 0;} .class-apply .sec02 .cont1 li .privacy-check .custom-check::after{content: ""; width: 2rem; height: 1.5rem; background: url(../img/apply-check.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .class-apply .sec02 .cont1 li .privacy-check label{padding-left: 4rem; cursor: pointer;} .class-apply .sec02 .cont1 li .privacy-check input:checked~ .custom-check{background-color: #00CB68; border-color: #00CB68;} /* */ .class-apply .sec02 .cont2{margin-bottom: 18rem;} .class-apply .sec02 .cont2 li{margin-bottom: 3rem; line-height: 1.7;} .class-apply .sec02 .cont2 li .title span{color: #00CB68;} .class-apply .sec02 .cont2 li input[type="text"]{width: 100%; height: 4.6rem; border: 1px solid #D9D9D9; padding: 10px;} .class-apply .sec02 .cont2 li textarea{border: 1px solid #D9D9D9; padding: 10px; width: 100%; resize: none; height: 21rem;} .class-apply .sec02 .cont2 li input:focus{outline: none;} .class-apply .sec02 .cont2 li textarea:focus{outline: none;} .class-apply .sec02 button.round-btn{width: 100%; max-width: 45rem; height: 7rem; justify-content: center; background-color: #00CB68; color: #fff; font-size: 24px;} @media screen and (max-width: 1024px){} @media screen and (max-width: 768px){ .class-apply .sec01{padding: 158px 0 60px;} .class-apply .sec01 h1{font-size: 24px; margin-bottom: 37px;} .class-apply .sec01 .caution{padding: 37px 17px; font-size: 14px;} .class-apply .sec02{padding-bottom: 100px;} .class-apply .sec02 h2.title{font-size: 18px; margin-bottom: 20px;} .class-apply .sec02 h2.title b{font-size: 14px;} .class-apply .sec02 form .cont1, .class-apply .sec02 form .cont2{width: 100%;} .class-apply .sec02 .cont1 h2.title{margin-bottom: 30px;} .class-apply .sec02 .cont1 li .item{width: calc(100% / 4);} .class-apply .sec02 .cont1 li .privacy-check{font-size: 10px; height: 15px;} .class-apply .sec02 .cont1 li .privacy-check label{padding-left: 21px; } .class-apply .sec02 .cont1 li .privacy-check .custom-check{width: 14px; height: 14px;} .class-apply .sec02 .cont1 li .privacy-check .custom-check::after{width: 10px;} .class-apply .sec02 .cont2{margin-bottom: 30px;} .class-apply .sec02 .cont2 li{margin-bottom: 28px;} .class-apply .sec02 .cont2 li input[type="text"]{height: 43px;} .class-apply .sec02 .cont2 li textarea{height: 200px;} .class-apply .sec02 button.round-btn{font-size: 16px;} } /* ******************************************************************************************************************************************* */ /* 강의수강 class-video */ .class-video{} .class-video .section{padding: 32rem 0 15rem;} .class-video .section .inner{display: flex; justify-content: space-between;} .class-video .video-wrap{width: 55%; border-bottom: 1px solid #D9D9D9;} .class-video .video-info{padding-bottom: 3.6rem;} .class-video .video-info p{} .class-video .video-info h2{font-size: 5rem; font-weight: 700; margin-top: 2rem;} .class-video .video-list button {display:flex;align-items:center;gap:0 36px;width:100%;height:84px;border-top:solid 1px #D9D9D9;padding:0 16px;font-size:20px;font-weight:500;text-align:left} .class-video .video-list button.on img {transform:rotate(180deg)} .class-video .video-list .cont {display:none} .class-video .player{width: 100%; position: relative; margin-bottom: 6rem;} .class-video .player::after{content: ""; display: block; padding-bottom: 56%;} .class-video .player iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: none;} .class-video .curriculum{width: 35%; position: relative;} .class-video .curriculum ul{height: 100%; overflow-y: scroll; padding-right: 3.5rem; position: absolute; width: 100%; max-height: 60rem;} .class-video .curriculum ul::-webkit-scrollbar{width: 6px;} .class-video .curriculum ul::-webkit-scrollbar-thumb{background-color: #9D9D9D;} .class-video .curriculum ul::-webkit-scrollbar-track{background-color: #F5F5F5;} .class-video .curriculum ul li{font-size: 14px; padding: 3rem 1.8rem; border-bottom: 1px solid #D9D9D9;} .class-video .curriculum ul li:first-child{padding-top: 0; } .class-video .curriculum ul li h2{font-size: 2.4rem; font-weight: 700;} .class-video .curriculum ul li h3{font-size: 1.8rem; font-weight: 700; margin-bottom:20px;} .class-video .curriculum ul li p{line-height: 2;} @media screen and (max-width: 1024px){ .class-video .video-wrap{} .class-video .curriculum{width: 40%;} } @media screen and (max-width: 768px){ .class-video .section{padding: 160px 0 80px;} .class-video .section .inner{flex-wrap: wrap; gap: 70px;} .class-video .video-wrap, .class-video .curriculum{width: 100%;} .class-video .player{margin-bottom: 30px;} .class-video .video-info{padding: 37px 0 26px;} .class-video .video-info p{font-size: 14px;} .class-video .video-info h2{font-size: 24px;} .class-video .video-list button {height:64px;gap:0 20px;padding:0 10px;font-size:14px} .class-video .video-list button img {width:12px} .class-video .curriculum ul{position: relative; max-height: 450px;} .class-video .curriculum ul li h2{font-size: 18px;} .class-video .curriculum ul li h3{font-size: 14px;} .class-video .curriculum ul li p{font-size: 12px;} } /* ******************************************************************************************************************************************* */ /* 주문결제 pay01 */ .pay01{} .pay01 .sec01{padding: 32rem 0 12rem;} .pay01 .sec01 h1{font-size: 6rem; font-weight: 700;} .pay01{} .pay01 .sec02{padding-bottom: 30rem;} .pay01 .sec02 .inner{display: flex; justify-content: space-between;} .pay01 .box{border: 1px solid #D9D9D9; border-radius: 20px; padding: 2.8rem 2.4rem;} .pay01 .box h2{padding-bottom: 2.6rem; border-bottom: 1px solid #9D9D9D; font-size: 2.6rem; font-weight: 700;} .pay01 .box h3{} .pay01 .box input[type="text"]{border: 1px solid #D9D9D9; height: 4rem; padding: 0 10px;} .pay01 .pay-info{width: 64%;} .pay01 .pay-info .box{margin-bottom: 50px;} .pay01 .pay-info .box h2{margin-bottom: 4rem;} .pay01 .pay-info .box ul li{display: flex; align-items: center;} .pay01 .pay-info .box1 ul li{margin-bottom: 1.7rem;} .pay01 .pay-info .box1 ul li h3{width: 9rem;} .pay01 .pay-info .box1 ul li .field-wrap{width: calc(100% - 9rem); max-width: 35rem; } .pay01 .pay-info .box1 ul li .field-wrap input{width: 100%; } .pay01 .pay-info .box1 ul li .field-wrap.phone{display: flex; gap: 8px;} .pay01 .pay-info .box2 ul li{margin-bottom: 1.7rem; justify-content: space-between; max-width: 70rem;} .pay01 .pay-info .box2 ul li h3{width: 10rem;} .pay01 .pay-info .box2 ul li .field-wrap{width: calc(100% - 12.5rem); max-width: 27rem; display: flex; gap: 1.5rem; align-items: center;} .pay01 .pay-info .box2 ul li .field-wrap input{width: 100%; text-align: right;} .pay01 .pay-info .box2 ul li p{font-size: 1.6rem;} .pay01 .pay-info .box2 ul li .coupon{background-color: #000; width: 12rem; height: 4rem; color: #fff; font-size: 1.6rem; font-weight: 700;} .pay01 .pay-info .box2 ul li .point-check{width: 12rem; position: relative; cursor: pointer; font-size: 1.6rem; display: flex; align-items: center; height: 2.3rem; padding-left: 3.6rem;} .pay01 .pay-info .box2 ul li .point-check input{position: absolute; opacity: 0; height: 0; width: 0;} .pay01 .pay-info .box2 ul li .point-check .custom-point{position: absolute; top: 0; left: 0; height: 2.3rem; width: 2.3rem; background-color: #fff; border: 1px solid #D9D9D9; } .pay01 .pay-info .box2 ul li .point-check .custom-point::after{content: ""; width: 1.5rem; height: 1.5rem; background: url(../img/apply-check.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .pay01 .pay-info .box2 ul li .point-check input:checked~ .custom-point{background-color: #00CB68; border-color: #00CB68;} .pay01 .pay-info .box3 h2{border: none; margin-bottom: 5rem; padding-bottom: 0;} .pay01 .pay-info .method-wrap1{display: flex; margin-bottom: 4.2rem; gap: 2.6rem;} .pay01 .pay-info .method-wrap1 label{width: 50%; position: relative; cursor: pointer; display: flex; align-items: center; padding-left: 3.8rem; } .pay01 .pay-info .method-wrap1 label input{position: absolute; opacity: 0; height: 0; width: 0;} .pay01 .pay-info .method-wrap1 label .custom{position: absolute; top: 0; left: 0; height: 2rem; width: 2rem; background-color: #fff; border: 1px solid #D9D9D9; border-radius: 3px;} .pay01 .pay-info .method-wrap1 label .custom::after{content: ""; width: 1.2rem; height: 1.5rem; background: url(../img/check-gray.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .pay01 .pay-info .method-wrap1 label input:checked~ .custom::after{background: url(../img/check-green.svg) no-repeat center / contain;} .pay01 .pay-info .method-wrap1 label input:checked ~ p{color: #00CB68; font-weight: 700;} .pay01 .pay-info .method-wrap1 h3{color: #FF0000; font-size: 1.6rem; font-weight: 400; position: absolute; width: 100%; top: -70px; left: 150px;} .pay01 .pay-info .method-wrap2{display: flex; flex-wrap: wrap; border: 1px solid #DBDBDB;} .pay01 .pay-info .method-wrap2 li{width: 50%; display: flex; border: 1px solid #DBDBDB; position: relative;} .pay01 .pay-info .method-wrap2 li label{padding: 4rem 5rem; cursor: pointer; display: flex; align-items: center; gap: 2rem; width: 100%;} .pay01 .pay-info .method-wrap2 li label input{position: absolute; opacity: 0; height: 0; width: 0;} .pay01 .pay-info .method-wrap2 li label .custom{height: 2rem; width: 2rem; border-radius: 50px; position: relative; background: url(../img/apply-check.svg) no-repeat center / 50%; background-color: #D9D9D9;} .pay01 .pay-info .method-wrap2 li label input:checked ~ .custom{background-color: #00CB68;} .pay01 .pay-info .method-wrap2 li label img{width: calc(100% - 4rem ); max-width: 9rem;} .pay01 .pay-info .method-wrap2 li label p{width: calc(100% - 4rem ); max-width: 9rem;} .pay01 .pay-info .method-wrap2 li label .checked{position: absolute;} .pay01 .pay-info .method-wrap2 li label input:checked ~ .checked{width: calc(100% + 4px); height: calc(100% + 4px); border: 2px solid #00CB68; left: -2px; top: -2px; z-index: 11; } /* pay-side */ .pay01 .pay-side{width: 33%;} .pay01 .pay-side .box1{margin-bottom: 2rem;} .pay01 .pay-side .box1 h2{} .pay01 .pay-side .box1 ul{padding: 3rem 0; } .pay01 .pay-side .box1 ul li{display: flex; justify-content: space-between;} .pay01 .pay-side .box1 ul li:not(:last-child){margin-bottom: 1.7rem;} .pay01 .pay-side .box1 .total{display: flex; justify-content: space-between; padding: 2.7rem 0 1rem; border-top: 1px solid #9D9D9D; font-weight: 700;} .pay01 .pay-side .box1 .total p{font-size: 2.4rem;} .pay01 .pay-side .box1 .total span{font-size: 3rem;} .pay01 .pay-side .side-check{font-size: 2.4rem; font-weight: 700;} .pay01 .pay-side .side-check label{cursor: pointer; display: flex; align-items: center; gap: 17px;} .pay01 .pay-side .side-check label input{position: absolute; opacity: 0; height: 0; width: 0;} .pay01 .pay-side .side-check label .custom{height: 2rem; width: 2rem; border-radius: 50px; position: relative; background-color: #D9D9D9;} .pay01 .pay-side .side-check label .custom::after{content: ""; position: absolute; top: 50%; left: 49%; transform: translate(-50%, -50%); background: url(../img/apply-check.svg) no-repeat center / contain; width: 1.3rem; height: 0.8rem;} .pay01 .pay-side .side-check label input:checked ~ .custom{background-color: #00CB68;} .pay01 .pay-side .pay-btn{width: 100%; height: 7rem; background-color: #00CB68; margin: 4.5rem 0 50px; color: #fff; font-weight: 700; font-size: 3rem;} .pay01 .pay-side .box2 ul{} .pay01 .pay-side .box2 ul li{display: flex; justify-content: space-between; margin-top: 3rem; align-items: flex-start;} .pay01 .pay-side .box2 ul li .thumb-img{width: 40%; background-color: #D9D9D9; position: relative; max-width: 130px;} .pay01 .pay-side .box2 ul li .thumb-img::after{content: ""; display: block; padding-bottom: 100%;} .pay01 .pay-side .box2 ul li .thumb-img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} .pay01 .pay-side .box2 ul li .info{display: flex; flex-direction: column; justify-content: space-between; width: 55%} .pay01 .pay-side .box2 ul li .info h3{margin-bottom: 2rem; line-height: 1.5;} .pay01 .pay-side .box2 ul li .info h4{font-weight: 700; font-size: 3.6rem;} @media screen and (max-width: 1024px){ .pay01 .sec02{padding-bottom: 100px;} .pay01 .sec02 .inner{flex-wrap: wrap;} .pay01 .pay-info, .pay01 .pay-side{width: 100%;} .pay01 .pay-info .method-wrap1 label{flex-wrap: wrap;} .pay01 .pay-info .method-wrap1 h3{position: relative; top: auto; left: auto; margin-top: 15px; font-size: 10px;} } @media screen and (max-width: 768px){ .pay01 .sec01{padding: 160px 0 50px;} .pay01 .sec01 h1{font-size: 24px;} .pay01 .box h2{font-size: 18px;} .pay01 .box h3{font-size: 14px;} .pay01 .box{padding: 25px 20px;} .pay01 .pay-info .box h2{margin-bottom: 26px;} .pay01 .pay-info .box1 ul li .field-wrap{max-width: 500px;} .pay01 .pay-info .box2 ul li{flex-wrap: wrap; gap: 15px; justify-content: flex-start;} .pay01 .pay-info .box2 ul li h3{width: 65px;} .pay01 .pay-info .box2 ul li .field-wrap{max-width: none; width: calc(100% - 80px);} .pay01 .pay-info .box2 ul li .coupon, .pay01 .pay-info .box2 ul li .point-check{margin-left: 80px;} .pay01 .pay-info .method-wrap1{flex-wrap: wrap; gap: 15px; margin-bottom: 25px;} .pay01 .pay-info .method-wrap1 label{padding-left: 30px; width: 100%;} .pay01 .pay-info .method-wrap2 li label{height: 80px; padding: 25px; gap: 15px;} .pay01 .pay-info .box3 h2{font-size: 20px;} .pay01 .pay-side h2{font-size: 20px;} .pay01 .pay-side .box1 ul li{font-size: 16px;} .pay01 .pay-side .box1 .total p{font-size: 18px;} .pay01 .pay-side .box1 .total span{font-size: 24px;} .pay01 .pay-side .side-check{font-size: 18px;} .pay01 .pay-side .pay-btn{margin: 46px 0; font-size: 23px;} .pay01 .pay-side .box2 ul li{align-items: stretch; gap: 30px;} .pay01 .pay-side .box2 ul li .info{ width: calc(60% - 30px);} .pay01 .pay-side .box2 ul li .info h3{font-size: 15px;} .pay01 .pay-side .box2 ul li .info h4{font-size: 28px;} } /* 주문결제완료 pay02 */ .pay02{} .pay02 .sec01{padding: 32rem 0 7rem; text-align: center; line-height: 1.5;} .pay02 .sec01 h1{font-size: 4rem; font-weight: 700; margin-bottom: 5rem;} .pay02 .sec01 h2{font-size: 2.2rem;} .pay02 .sec02{padding-bottom: 15rem; text-align: center;} .pay02 .sec02 h3{font-size: 2.6rem; margin-bottom: 2.6rem; font-weight: 700; text-align: left;} .pay02 .sec02 .table-wrap{width: 100%; margin-bottom: 10rem; position: relative;} .pay02 .sec02 .table-wrap thead th{height: 7rem; border-top: 1px solid #00CB68; border-bottom: 1px solid #00CB68; background-color: #F5FCF9; font-weight: 700; color: #00CB68;} .pay02 .sec02 .table-wrap td{border-bottom: 1px solid #D9D9D9; line-height: 1.7;} .pay02 .sec02 .table-wrap .label{display: none; font-weight: 700; height: 48px; align-items: center; justify-content: center; border-top: 1px solid #00CB68; border-bottom: 1px solid #00CB68; background-color: #F5FCF9; color: #00CB68;} .pay02 .sec02 .table-wrap td span{height: 140px; display: flex; align-items: center; justify-content: center;} .pay02 .sec02 .table-wrap td:last-child span{font-size: 3rem; font-weight: 700;} .pay02 .sec02 .round-btn{width: 100%; max-width: 41rem; height: 7rem; justify-content: center; background-color: #00CB68; color: #fff; font-size: 3rem;} @media screen and (max-width: 768px){ .pay02 .sec01{padding: 158px 0 70px;} .pay02 .sec01 h1{font-size: 24px;} .pay02 .sec01 h2{font-size: 14px;} .pay02 .sec02{padding-bottom: 80px;} .pay02 .sec02 h3{font-size: 17px; margin-bottom: 18px;} .pay02 .sec02 .table-wrap{font-size: 14px; margin-bottom: 50px;} .pay02 .sec02 .table-wrap thead{display: none;} .pay02 .sec02 .table-wrap tr{display: flex; flex-wrap: wrap;} .pay02 .sec02 .table-wrap td{margin-bottom: 40px; width: calc(100% / 3); } .pay02 .sec02 .table-wrap th{width: 100%; background: none;} .pay02 .sec02 .table-wrap .label{display: flex;} .pay02 .sec02 .table-wrap td span{height: 90px;} .pay02 .sec02 .table-wrap td:last-child span{font-size: 20px;} .pay02 .sec02 .round-btn{font-size: 16px; height: 46px;} } /* 마이페이지 */ .mypage-wrap{padding: 31rem 0 20rem;} .mypage-wrap .inner{display: flex; justify-content: space-between;} .mypage-menu{width: 15%;} .mypage-menu li{width: 100%;} .mypage-menu li a{display: inline-block; padding: 2.5rem 1.5rem; border-bottom: 1px solid #D9D9D9; width: 100%; color: #D9D9D9; position: relative;} .mypage-menu li:first-child a{border-top: 1px solid #D9D9D9;} .mypage-menu li.active a{color: #00CB68; font-weight: 700;} .mypage-menu li.active a::before, .mypage-menu li.active a::after{content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #00CB68; z-index: 11;} .mypage-menu li.active a::before{top: -1px;} .mypage-menu li.active a::after{bottom: -1px;} .mypage-cont{width: 80%; max-width: 970px;} .mypage-cont h1{font-size: 4rem; font-weight: 700; margin-bottom: 40px;} @media screen and (max-width: 768px){ .mypage-menu{font-size: 14px; width: 84px;} .mypage-menu li a{padding: 10px 5px;} .mypage-cont{width: calc(100% - 84px - 35px);} .mypage-cont h1{font-size: 24px;} .mypage-wrap{padding: 158px 0 80px;} } /* mypage01 마이페이지 - 결제내역 */ .mypage01 .search-wrap{padding: 3rem 4rem; background-color: #F8F8F8; display: flex; font-size: 1.6rem; justify-content: space-between; color: #D9D9D9; margin-bottom: 8rem;} .mypage01 .search-wrap > * { } .mypage01 .search-wrap select{height: 4.2rem; padding: 0 8rem 0 10px; border: 1px solid #D9D9D9; appearance: none; background: url("../img/select-open.svg") no-repeat; background-color: #fff; background-position: right 10px top 50%; background-size: 11px auto; color: #D9D9D9;} .mypage01 .search-wrap .period{display: flex; border: 1px solid #D9D9D9; width: 35%;} .mypage01 .search-wrap .period label{cursor: pointer; flex: 1; height: 4.2rem; background-color: #fff; display: flex; align-items: center; justify-content: center; border-right: 1px solid #d9d9d9;} .mypage01 .search-wrap .period label:last-child{border-right: none;} .mypage01 .search-wrap .period input{position: absolute; opacity: 0; height: 0; width: 0;} .mypage01 .search-wrap .period input:checked ~ span{font-weight: 700; color: #000;} .mypage01 .search-wrap .period label span{font-size: 1.6rem;} .mypage01 .search-wrap .period input:checked~ .custom-input{background-color: #00CB68; border-color: #00CB68;} .mypage01 .search-wrap .period2{display: flex; width: 40%; align-items: center; gap: 1.7rem;} .mypage01 .search-wrap .period2 input{height: 4.2rem; max-width: 13rem; border: 1px solid #D9D9D9; padding: 0 10px; width: 40%;} .mypage01 .search-wrap .period2 button{background-color: #000; color: #fff; padding: 0 1.5rem; height: 4.2rem;} /* table */ .mypage01 .table-wrap{width: 100%; margin-bottom: 10rem; text-align: center; font-size: 1.6rem;} .mypage01 .table-wrap thead th{height: 7rem; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; font-weight: 700; font-size: 1.8rem;} .mypage01 .table-wrap th, .mypage01 .table-wrap td{border-bottom: 1px solid #D9D9D9; line-height: 1.7; border-right: 1px solid #D9D9D9;} .mypage01 .table-wrap th:last-child, .mypage01 .table-wrap td:last-child{border-right: none;} .mypage01 .table-wrap .label{display: none; font-weight: 700; height: 73px; align-items: center; justify-content: center; border-bottom: 1px solid #D9D9D9; font-size: 16px;} .mypage01 .table-wrap td span{height: 8.7rem; display: flex; align-items: center; justify-content: center; flex-direction: column;} .mypage01 .table-wrap td span b{color: #00CB68;} .mypage01 .table-wrap td:last-child span{font-size: 2.5rem; font-weight: 700;} .mypage01-popup ul{margin-bottom: 6rem; border-bottom: 1px solid #D9D9D9;} .mypage01-popup ul li{display: flex; border-top: 1px solid #D9D9D9;} .mypage01-popup ul li > *{display: flex; align-items: center; justify-content: center; height: 80px;} .mypage01-popup ul li .title{width: 40%; background-color: #F8F8F8; border-right: 1px solid #D9D9D9; font-weight: 700; font-size: 1.8rem;} .mypage01-popup ul li .txtcont{width: 60%; font-size: 1.6rem;} @media screen and (max-width: 1024px){ .mypage01 .search-wrap{padding: 25px; flex-wrap: wrap; gap: 20px 5%; justify-content: flex-end;} .mypage01 .search-wrap select{width: 30%;} .mypage01 .search-wrap .period{width: 65%;} .mypage01 .search-wrap .period2{width: 65%; justify-content: space-between; gap: 0; justify-self: flex-end;} .mypage01 .search-wrap .period2 input{max-width: none;} } @media screen and (max-width: 768px){ .mypage01 .search-wrap select, .mypage01 .search-wrap .period, .mypage01 .search-wrap .period2{width: 100%;} .mypage01 .search-wrap .period{flex-wrap: wrap; border: none;} .mypage01 .search-wrap .period label{flex: auto; width: 50%; border-bottom: 1px solid #d9d9d9; max-width: 50%;} .mypage01 .search-wrap .period label:not(:nth-child(2n)){border-left: 1px solid #d9d9d9;} .mypage01 .search-wrap .period label:nth-child(1), .mypage01 .search-wrap .period label:nth-child(2){border-top: 1px solid #d9d9d9;} .mypage01 .search-wrap .period label:last-child{border-right: 1px solid #d9d9d9;} .mypage01 .search-wrap .period2{flex-wrap: wrap; gap: 15px;} .mypage01 .search-wrap .period2 input{width: calc(100% - 65px);} .mypage01 .search-wrap .period2 span, .mypage01 .search-wrap .period2 button{width: 50px;} .mypage01 .table-wrap thead{display: none;} .mypage01 .table-wrap tr{display: flex; flex-wrap: wrap; margin-bottom: 60px; border-top: 1px solid #d9d9d9;} .mypage01 .table-wrap td{width: calc(100% / 2); width: 100%; } .mypage01 .table-wrap th{width: 100%; background: none;} .mypage01 .table-wrap .label{display: flex;} .mypage01 .table-wrap td span{height: 86px; font-size: 14px;} .mypage01 .table-wrap td:last-child span{font-size: 18px;} .mypage01 .table-wrap td{border-right: none;} .mypage01-popup ul li{flex-wrap: wrap;} .mypage01-popup ul li .title{width: 100%; border-right: none; border-bottom: 1px solid #D9D9D9; font-size: 16px;} .mypage01-popup ul li .txtcont{width: 100%; font-size: 14px;} } /* mypage02 마이페이지 - 수강기간 */ .mypage02 .contbox{padding: 3rem 4rem; background-color: #F8F8F8; display: flex; justify-content: space-between; align-items: center;} .mypage02 .contbox > div{display: flex; align-items: center;} .mypage02 .contbox .start{gap: 2.5rem;} .mypage02 .contbox .start p{font-size: 1.6rem; color: #9D9D9D;} .mypage02 .contbox .start span{font-size: 2.5rem; font-weight: 700;} .mypage02 .contbox .ing-day{font-weight: 700; display: flex; align-items: center; gap: 4rem;} .mypage02 .contbox .ing-day p{text-align: right;} .mypage02 .contbox .ing-day p span{font-size: 1.4rem;} .mypage02 .contbox .ing-day b{font-size: 3.5rem; color: #00CB68;} @media screen and (max-width: 768px){ .mypage02 .contbox{padding: 25px; flex-wrap: wrap; gap: 54px;} .mypage02 .contbox > div{width: 100%; flex-wrap: wrap;} .mypage02 .contbox .start{gap: 10px;} .mypage02 .contbox .start p{font-size: 14px;} .mypage02 .contbox .start p, .mypage02 .contbox .start span{width: 100%;} .mypage02 .contbox .ing-day{gap: 0; justify-content: flex-end;} .mypage02 .contbox .ing-day p{width: 100%; font-size: 20px;} .mypage02 .contbox .ing-day b{font-size: 30px;} .mypage02 .contbox .ing-day p span{font-size: 14px; margin-bottom: 10px; display: inline-block;} } /* 마이페이지03 - 수강내역 */ .mypage03{} .mypage03 .contbox{display: flex; flex-wrap: wrap; gap: 20px 2%;} .mypage03 .contbox li{width: 32%; border: 1px solid #D9D9D9; border-radius: 20px; transition: 0.3s;overflow:hidden} .mypage03 .contbox li a{width: 100%; padding: 3.6rem; line-height: 1.5; position: relative; height: 100%; display: block;} .mypage03 .contbox li a p{font-size: 16px; margin-bottom: 2rem;} .mypage03 .contbox li a span{font-size: 35px; font-weight: 700;} .mypage03 .contbox li a .icon{position: absolute; right: 3.5rem; bottom: 4rem; width: 2.4rem; height: 2.4rem; transition: 0.3s;} .mypage03 .contbox li.download-cont a .icon{background: url(../img/download-off.svg) no-repeat center / contain;} .mypage03 .contbox li.download-cont:hover a .icon{background: url(../img/download-on.svg) no-repeat center / contain;} .mypage03 .contbox li.play-cont a .icon{background: url(../img/play-off.svg) no-repeat center / contain;} .mypage03 .contbox li:hover{color: #00CB68; border-color: #00CB68;} .mypage03 .contbox li.play-cont:hover a .icon{background: url(../img/play-on.svg) no-repeat center / contain;} .mypage03 .contbox li.pay-cont a .icon{width:100%;height:100%;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);font-size:2rem;color:#ffffff} .mypage03 .contbox li.pay-cont:hover a .icon{background-color: #00CB68;} @media screen and (max-width: 1024px){ .mypage03 .contbox li{width: calc((100% - 20px) / 2);} } @media screen and (max-width: 768px){ .mypage03 .contbox li{width: 100%;} .mypage03 .contbox li a{padding: 30px 25px;} .mypage03 .contbox li a p{font-size: 12px;} .mypage03 .contbox li a span{font-size: 24px;} .mypage03 .contbox li a .icon{bottom: 30px;} } /* 강의리뷰 */ .mypage05{} .mypage05 .contbox{display: flex; flex-wrap: wrap; gap: 20px 1.25%;} .mypage05 .contbox li{width: 32.5%; border: 1px solid #D9D9D9; border-radius: 20px; transition: 0.3s;} .mypage05 .contbox li a{width: 100%; height: 100%; padding: 3.6rem; line-height: 1.5; position: relative; display: flex; flex-direction: column; justify-content: space-between;} .mypage05 .contbox li a p{font-size: 16px; margin-bottom: 2rem;} .mypage05 .contbox li a span{font-size: 35px; font-weight: 700;} .mypage05 .contbox li a .icon{position: absolute; right: 3.5rem; bottom: 5rem; width: 2.4rem; height: 2.4rem; transition: 0.3s; background: url(../img/write-off.svg) no-repeat center / contain;} .mypage05 .contbox li:hover{color: #00CB68; border-color: #00CB68;} .mypage05 .contbox li:hover a .icon{background: url(../img/write-on.svg) no-repeat center / contain;} @media screen and (max-width: 1024px){ .mypage05 .contbox li a{padding: 30px 20px;} } @media screen and (max-width: 768px){ .mypage05 .contbox li{width: 100%;} .mypage05 .contbox li a{font-size: 12px;} .mypage05 .contbox li a span{font-size: 24px;} .mypage05 .contbox li a .icon{bottom: 30px; right: 20px;} } /* 강의리뷰작성 */ .mypage05-1{} .mypage05-1 .write-review{} .mypage05-1 .write-review li{display: flex; margin-bottom: 4rem;justify-content: space-between;} .mypage05-1 .write-review li p{font-weight: 500;} .mypage05-1 .write-review li p span{color: #00CB68;} .mypage05-1 .write-review li .rating-star{width: calc(100% - 10rem); max-width: 800px;} .mypage05-1 .write-review li .stars{position: relative; display: inline-block; } .mypage05-1 .write-review li .stars .star-off{display: inline-flex; position: relative; height: 30px;} .mypage05-1 .write-review li .stars .star-off img{height: 100%; margin-right: 5px;} .mypage05-1 .write-review li .stars .star-on{display: inline-flex; width: 0; position: absolute; left: 0; color: red; overflow: hidden; height: 30px;} .mypage05-1 .write-review li .stars .star-on img{height: 100%; margin-right: 5px;} .mypage05-1 .write-review li .stars input{width: calc(100%); height: 100%; position: absolute; left: 0; opacity: 0; cursor: pointer; top: 0; z-index: 11;} .mypage05-1 .write-review li textarea{width: calc(100% - 10rem); max-width: 800px; height: 23rem; border: 1px solid #DDDDDD; padding: 20px;} .mypage05-1 .write-review li textarea::placeholder{font-size: 1.8rem; color: #989898;} .mypage05-1 .write-review .review-check{width: calc(100% - 10rem); max-width: 800px; display: flex; align-items: center; cursor: pointer; cursor: pointer; gap: 2rem; font-size: 1.8rem;} .mypage05-1 .write-review .review-check input{position: absolute; opacity: 0; height: 0; width: 0;} .mypage05-1 .write-review .review-check .custom-check{height: 3rem; width: 3rem; background-color: #fff; border: 1px solid #DDDDDD; position: relative; border-radius: 2px;} .mypage05-1 .write-review .review-check input:checked~ .custom-check{} .mypage05-1 .write-review .review-check input:checked~ .custom-check::after{content: ""; width: 1.5rem; height: 1.5rem; background: url(../img/check-green.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .mypage05-1 .write-review .btn-wrap{display: flex; gap: 3rem; font-weight: 700; margin-top: 12rem;} .mypage05-1 .write-review .btn-wrap button{color: #fff; height: 5.6rem; background-color: #00CB68; border-radius: 50px; width: 100%; max-width: 30rem;} .mypage05-1 .write-review .btn-wrap .back{background-color: #F3F3F3; color: #ACACAC;} @media screen and (max-width: 1024px){ } @media screen and (max-width: 768px){ .mypage05-1 .write-review{position: relative; padding-bottom: 100px; font-size: 14px;} .mypage05-1 .write-review li:nth-child(1){justify-content: flex-start;} .mypage05-1 .write-review li:nth-child(1) p{width: 40px;} .mypage05-1 .write-review li .rating-star{width: calc(100% - 40px);} .mypage05-1 .write-review li{margin-bottom: 28px;} .mypage05-1 .write-review li .stars .star-on, .mypage05-1 .write-review li .stars .star-off{height: 20px;} .mypage05-1 .write-review li:nth-child(2){flex-wrap: wrap;} .mypage05-1 .write-review li textarea{width: 100%; margin-top: 15px;} .mypage05-1 .write-review .review-check{width: 100%; font-size: 12px;} .mypage05-1 .write-review .review-check .custom-check{width:16px; height: 16px;} .mypage05-1 .write-review .btn-wrap{position: absolute; width: calc(100% + 115px); left: -115px; bottom: 0; font-size: 16px; margin-top: 0;} .mypage05-1 .write-review .btn-wrap button{max-width: none; height: 46px;} } /* 회원정보수정 / 회원가입 */ .account-info{} .account-info ul{padding-bottom: 12rem;} .account-info ul li{display: flex; margin-bottom: 2.6rem; align-items: center; flex-wrap: wrap;} .account-info ul li p{font-weight: 500; width: 15rem;} .account-info ul li p span{color: #00CB68;} .account-info ul li input{border: 1px solid #DDDDDD; width: calc(100% - 15rem); max-width: 42rem; height: 5.6rem; padding: 0 15px;} .account-info ul li input:disabled{background: #F8F8F8; color: #989898;} .account-info ul li .phone-input, .account-info ul li .email-input{display: flex; gap: 10px; width: calc(100% - 15rem); max-width: 42rem; align-items: center;} .account-info ul li .email-input{border: 1px solid #DDDDDD;} .account-info ul li .email-input span{color: #989898;} .account-info ul li .email-input input{border: none;} .account-info ul li input::placeholder{font-size: 1.8rem; color: #989898;} .account-info ul li p.note{padding-left: 15rem; width: 100%; margin-top: 2rem; color: #00CB68; font-size: 1.6rem; font-weight: 400;} .account-info .btn-wrap{display: flex; justify-content: center; gap: 3rem; font-weight: 700; max-width: 63rem; font-size: 2rem;} .account-info .btn-wrap button{flex: 1; height: 5.6rem; border-radius: 100px;} .account-info .btn-wrap .leave{color: #00CB68; background-color: #F5FCF9;} .account-info .btn-wrap .complete{background-color: #00CB68; color: #fff;} .mypage04{} .mypage04 .account-info{} @media screen and (max-width: 768px){ .account-info{font-size: 12px;} .account-info ul li input{height: 40px;} .account-info ul{padding-bottom: 100px;} .account-info ul li{margin-bottom: 20px;} .account-info ul li p{font-size: 14px;} .mypage04 .account-info ul li{flex-wrap: wrap; gap: 15px;} .mypage04 .account-info ul li p, .mypage04 .account-info ul li .phone-input, .mypage04 .account-info ul li .email-input, .mypage04 .account-info ul li input{width: 100%; max-width: none;} .mypage04 .account-info ul li p.note{padding-left: 0; margin-top: 0; font-size: 10px;} .mypage04 .account-info .btn-wrap{max-width: none;} } .account .title{font-size: 4rem; margin-bottom: 3.5rem; text-align: center; font-weight: 700;} .account>section{padding: 32rem 0 14rem;} .account .account-btn{width: 100%; max-width: 40rem; height: 5.6rem; color: #fff; background-color: #00CB68; margin: 0 auto; display: block; border-radius: 50px; font-size: 2.4rem; font-weight: 700;} .signup-wrap{} .signup-wrap .account-info{} .signup-wrap .account-info ul{display: flex; flex-wrap: wrap; padding: 8rem 0; justify-content: space-between;} .signup-wrap .account-info ul li{width: 48%; align-items: baseline;} .signup-wrap .account-info ul li.password{width: 51%;} .signup-wrap .account-info ul li .phone-input, .signup-wrap .account-info ul li .email-input, .signup-wrap .account-info ul li input{max-width: 43rem;} .signup-wrap .account-info .btn-wrap{max-width: none;} .signup-wrap .account-info .btn-wrap button{width: 50%; max-width: 34rem;} .signup-wrap .account-info .btn-wrap .leave{background-color: #fff; border: 1px solid #C2C2C2; color: #707070;} /* 이용약관 */ .signup-wrap .terms-text{border: 1px solid #D9D9D9; overflow: hidden; padding: 5rem 1.2rem 5rem 5.5rem; padding-right: 13px; line-height: 1.6; margin-bottom: 3.5rem;} .signup-wrap .terms-text p{height: 12rem; overflow-y: scroll; padding-right: 10px;} .signup-wrap .terms-text p b{font-weight: 700;} .signup-wrap .terms-text p::-webkit-scrollbar{width: 6px;} .signup-wrap .terms-text p::-webkit-scrollbar-thumb{background-color: #606060;} .signup-wrap .terms-check label{display: flex; align-items: center; cursor: pointer; position: relative; cursor: pointer; font-size: 1.8rem; gap: 2rem;} .signup-wrap .terms-check input{position: absolute; opacity: 0; height: 0; width: 0;} .signup-wrap .terms-check .custom-check{height: 3rem; width: 3rem; border-radius: 2px; background-color: #fff; border: 1px solid #CCCCCC; position: relative;} .signup-wrap .terms-check .custom-check::after{content: ""; width: 2rem; height: 1.5rem; background: url(../img/apply-check.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .signup-wrap .terms-check input:checked~ .custom-check{background-color: #00CB68; border-color: #00CB68;} @media screen and (max-width: 1024px){ .signup-wrap .account-info ul{display: block; padding: 45px 0 97px;} .signup-wrap .account-info ul li, .signup-wrap .account-info ul li.password{width: 100%;} .signup-wrap .account-info ul li .phone-input, .signup-wrap .account-info ul li .email-input, .signup-wrap .account-info ul li input{max-width: none;} } @media screen and (max-width: 768px){ .account>section{padding: 160px 0 74px;} .account .account-btn{font-size: 16px; height: 46px;} .account .title{font-size: 24px; margin-bottom: 38px;} .signup-wrap .terms-text{padding: 22px; padding-right: 10px; font-size: 12px;} .signup-wrap .terms-check label{font-size: 10px; gap: 7px;} .signup-wrap .terms-check .custom-check{width: 14px; height: 14px;} .signup-wrap .terms-check .custom-check::after{width: 10px;} .signup-wrap .account-info ul li p{width: 80px;} .signup-wrap .account-info ul li p.note{width: 100%; padding-left: 80px;} .signup-wrap .account-info ul li .phone-input, .signup-wrap .account-info ul li .email-input, .signup-wrap .account-info ul li input{width: calc(100% - 80px);} } /* 회원가입완료 */ .signup-complete{} .signup-complete h2{text-align: center; font-size: 2.2rem;} .signup-complete h2 span{color: #00CB68; font-weight: 700; line-height: 1.8;} .signup-complete .info-wrap{max-width: 40rem; width: 100%; margin: 0 auto; padding: 9rem 0;} .signup-complete .info-wrap .box{border: 1px solid #DDDDDD; margin-top: 10px; display: flex; height: 5.6rem; align-items: center; justify-content: space-between;} .signup-complete .info-wrap .box p{width: 12rem; font-weight: 500; text-align: center;} .signup-complete .info-wrap .box span{flex: 1; color: #999999; font-size: 16px; text-align: center;} @media screen and (max-width: 768px){ .signup-complete .inner{max-width: 500px;} .signup-complete h2{font-size: 16px;} .signup-complete .info-wrap{padding: 60px 0;} .signup-complete .info-wrap .box p{font-size: 14px; width: 80px;} .signup-complete .info-wrap .box span{font-size: 12px;} } .sign-in .contwrap .inner{max-width: 57rem;} .sign-in .contwrap form{} .sign-in .contwrap form input{border: 1px solid #DDDDDD; width: 100%; height: 5.6rem; margin-bottom: 10px; padding: 0 15px;} .sign-in .contwrap form input{border: 1px solid #DDDDDD; width: 100%; height: 5.6rem; margin-bottom: 10px; padding: 0 15px;} .sign-in .contwrap form button:nth-of-type(1){margin-top: 10px;} .sign-in .contwrap form button{max-width: none; margin-bottom: 13px; display: flex; justify-content: center; align-items: center; gap: 2rem; background-color: #000;} .sign-in .contwrap form .btn-kakao{background-color: #FFEA2C; color: #222222; font-weight: 500;} .sign-in .contwrap form .btn-kakao img{height: 3rem; } .sign-in .contwrap form .btn-naver{background-color: #03C75A; font-weight: 500;} .sign-in .contwrap form .btn-naver img{height: 2.5rem;} .sign-in .contwrap .signin-menu{margin-top: 4.6rem; display: flex; justify-content: center; } .sign-in .contwrap .signin-menu li{} .sign-in .contwrap .signin-menu li:not(:last-child){border-right: 1px solid #DDDDDD;} .sign-in .contwrap .signin-menu li a{padding: 0 2rem;} @media screen and (max-width: 768px){ .sign-in .contwrap .signin-menu{margin-top: 50px; font-size: 14px;} .sign-in .contwrap .signin-menu ul{} .sign-in .contwrap .signin-menu li{width: 100%;} .sign-in .contwrap .signin-menu li a{width: 100%; display: block; text-align: center; padding: 0;} } .find-account .title{display: flex; gap: 2.5rem; justify-content: center;} .find-account .title a{width: 100%; } .find-account .title a:nth-child(1){text-align: right;} .find-account .title a:nth-child(2){text-align: left;} .find-account .title .off{color: #EAEAEA;} .find-account h4{font-size: 2.2rem; margin-bottom: 8.5rem; text-align: center;} .find-account h4 span{color: #00CB68; font-weight: 700;} .find-account form{max-width: 53rem; margin: 0 auto; } .find-account form .item{display: flex; gap: 3rem; margin-bottom: 10px; align-items: center;} .find-account form .item span{width: 8.5rem; font-weight: 500;} .find-account form .item input{padding: 0 10px; border: 1px solid #DDDDDD; height: 5.6rem; width: calc(100% - 8.5rem);} .find-account form .item input::placeholder{font-size: 1.6rem;} .find-account form .account-btn{max-width: none; margin-top: 7rem;} @media screen and (max-width: 768px){ .find-account h4{font-size: 14px;} } /* ******************************************************************************************************************************************* */ /* cs 고객센터 */ .sub-cs{} .sub-cs .sub-visual .inner > p{color: #fff;} .sub-cs .contwrap{padding: 14rem 0; } .sub-cs .lock{padding-right: 3rem; position: relative; display: inline-block;} .sub-cs .lock::after{content: ""; width: 2.3rem; height: 2.3rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: url(../img/ic-lock.svg) no-repeat center / contain;} /* cs 고객센터1 : 문의사항 항목 */ .board-list{} .board-list .contwrap{font-size: 1.8rem;} .board-list .search-wrap{display: flex; justify-content: flex-end; margin-bottom: 7rem;} .board-list .search-wrap form{width: 100%; max-width: 500px; display: flex; height: 5rem; gap: 15px;} .board-list .search-wrap form select{height: 100%; width: 11rem; padding-left: 2rem; border: 1px solid #E1E1E1; appearance: none; background: url("../img/cs-select-arrow.svg") no-repeat; background-position: right 10px top 50%; background-size: 12px auto; color: #999999;} .board-list .search-wrap form input{height: 100%; padding: 0px 2rem; border: 1px solid #E1E1E1; width: calc(100% - 5rem - 11rem - 30px);} .board-list .search-wrap form input::placeholder{color: #999999;} .board-list .search-wrap form .btn-search{background-color: #00CB68; height: 100%;width: 5rem;} .board-list .table-wrap{position: relative;} .board-list .board-table{width: 100%; border-top: 1px solid #222222; border-bottom: 1px solid #DDDDDD; margin-bottom: 11rem;} .board-list .board-table thead th{height: 5rem; background-color: #F9F9F9; color: #666666;} .board-list .board-table td{height: 8rem; border-top: 1px solid #EEEEEE; text-align: center; padding: 0 10px;} .board-list .board-table .th-num{width: 100px;} .board-list .board-table .th-title{} .board-list .board-table .th-writer{width: 100px;} .board-list .board-table .th-date{width: 120px;} .board-list .board-table .th-state{width: 13rem; padding-right: 2.5rem;} .board-list .board-table tbody th{border-top: 1px solid #EEEEEE; text-align: left;} .board-list .board-table a{color: #333;} .board-list .board-table a::after{} .board-list .board-table a:hover{text-decoration: underline;} .board-list .board-table tbody td.state-off, .board-list .board-table tbody td.state-on{padding-right: 2rem;} .board-list .board-table tbody td.state-off::after, .board-list .board-table tbody td.state-on::after{font-size: 1.6rem; width: 100%; height: 3.5rem; border-radius: 50px; color: #fff; position: relative; display: flex; align-items: center; justify-content: center;} .board-list .board-table tbody td.state-off::after{content: "답변완료"; background-color: #707070;} .board-list .board-table tbody td.state-on::after{content: "답변대기"; background-color: #00CB68;} .board-list .page-nav{display: flex; justify-content: center; } .board-list .page-nav ul{display: flex; gap: 15px;} .board-list .page-nav ul li.active{color: #00CB68; font-weight: 700; border-bottom: 1px solid #00CB68;} .board-list .cs-write{position: absolute; right: 0; height: 5rem; bottom: 0; background-color: #707070; color: #fff; width: 15rem; border-radius: 10px; font-weight: 500;} @media screen and (max-width: 768px){ .sub-cs .contwrap{padding: 62px 0 82px; } .sub-cs .lock{padding-right: 15px;} .sub-cs .lock::after{width: 12px; height: 14px;} .board-list .contwrap{font-size: 12px;} .board-list .search-wrap{margin-bottom: 50px;} .board-list .search-wrap form{gap: 10px;} .board-list .search-wrap form select{width: 70px; padding-left: 10px;} .board-list .search-wrap form input{width: calc(100% - 70px - 40px - 20px);} .board-list .search-wrap form .btn-search img{height: 20px;} .board-list .board-table{margin-bottom: 48px;} .board-list .board-table .th-num{width: 35px;} .board-list .board-table .th-title{} .board-list .board-table .th-writer{width: 50px;} .board-list .board-table .th-date{width: 70px;} .board-list .board-table .th-state{width: 6rem; padding-right: 0; } .board-list .board-table tbody td.state-off, .board-list .board-table tbody td.state-on{padding: 0;} .board-list .board-table tbody td.state-off::after, .board-list .board-table tbody td.state-on::after{font-size: 10px; height: 18px;} .board-list .page-nav ul{gap: 10px;} .board-list .cs-write{width: 58px; height: 20px; border-radius: 5px; font-size: 10px;} } /* 고객센터 게시글 보기 board-view */ .board-view{} .board-view .title-wrap{color: #666; padding: 4.8rem 0; border-top: 1px solid #707070; font-size: 1.8rem;} .board-view .title-wrap h2{color: #000; font-size: 3rem; font-weight: 700;} .board-view .title-btm{margin-top: 2.6rem; display: flex; justify-content: space-between;} .board-view .title-btm .left{display: flex; gap: 4rem; font-weight: 500; } .board-view .title-btm .left p:nth-child(2){border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; padding: 0 4rem;} .board-view .title-btm .left p:nth-child(3){} .board-view .title-btm .left p span{display: inline-block; margin-left: 15px; font-weight: 400;} .board-view .title-btm .btn{} .board-view .title-btm .btn button{} .board-view .title-btm .btn button:first-child{border-right: 1px solid #eee; padding-right: 2.4rem; margin-right: 2.4rem;} .board-view .view-cont{border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; padding: 4.8rem 2.3rem; line-height: 2; min-height: 50rem;} .board-view .answer-wrap{padding: 10rem 2.3rem; border-bottom: 1px solid #E1E1E1;} .board-view .answer-wrap h2{font-weight: 700; margin-bottom: 3rem;} .board-view .answer-wrap p{line-height: 2;} .board-view .answer-wrap textarea{border: 1px solid #EEEEEE; padding: 10px; width: 100%; resize: none; height: 10rem;} .board-view .btn-wrap{display: flex; justify-content: center; padding: 7.8rem 0; border-bottom: 1px solid #E1E1E1; } .board-view .btn-wrap button{background-color: #00CB68; color: #fff; height: 5rem; width: 15rem; border-radius: 50px;} .board-view .another-cont{} .board-view .another-cont li{display: flex; height: 7rem; align-items: center; gap: 7rem; padding: 0 2.7rem; border-bottom: 1px solid #E1E1E1; font-weight: 500;} .board-view .another-cont li span{} .board-view .another-cont li img{height: 1.7rem;} .board-view .another-cont li a{font-size: 1.8rem;} @media screen and (max-width: 768px){ .board-view .title-wrap{font-size: 10px; padding: 25px 0;} .board-view .title-wrap h2{font-size: 16px;} .board-view .title-btm{margin-top: 14px;} .board-view .title-btm .left{gap: 10px;} .board-view .title-btm .left p:nth-child(2){padding: 0 10px;} .board-view .title-btm .btn button:first-child{padding-right: 8.5px; margin-right: 8.5px;} .board-view .view-cont{padding: 43px 15px; min-height: 340px; font-size: 10px;} .board-view .answer-wrap{padding: 50px 15px; font-size: 10px;} .board-view .answer-wrap h2{font-size: 12px; margin-bottom: 20px;} .board-view .answer-wrap textarea{height: 50px;} .board-view .btn-wrap button{width: 85px; height: 30px; font-size: 12px;} .board-view .another-cont li{padding: 0 15px; font-size: 10px; height: 40px;} .board-view .another-cont li img{height: 10px;} .board-view .another-cont li a{font-size: 10px;} } /* 고객센터 작성하기 board-write */ .board-write{font-size: 1.8rem;} .board-write .contwrap{} .board-write .contwrap h2{font-size: 4rem; font-weight: 700; text-align: center; margin-bottom: 6rem;} .board-write input{height: 5rem; padding: 0 2rem;} .board-write input, .board-write textarea{border: 1px solid #E1E1E1; } .board-write form > div{display: flex; align-items: center;} .board-write .top-input{gap: 2%; margin-bottom: 2rem;} .board-write .top-input .inp-title{width: 69%;} .board-write .top-input .inp-writer{width: 29%;} .board-write textarea{padding: 2rem; width: 100%; height: 30rem; margin-bottom: 3rem;} .board-write .inp-file{margin-bottom: 2rem;} .board-write .inp-file span{width: 10rem; font-size: 2rem;} .board-write .inp-file .file-wrap{width: calc(100% - 10rem); display: flex; align-items: center; cursor: pointer;} .board-write .inp-file label{height: 5rem; padding: 0 2rem; border: 1px solid #999999; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;} .board-write .inp-file input[type="file"] {display: none;} .board-write .inp-file .file_name {border: none; padding-left: 10px; background-color: #fff; width: calc(100% - 80px);} .board-write .inp-pw{position: relative;} .board-write .inp-pw span{width: 10rem; font-size: 2rem;} .board-write .inp-pw .password{width: calc(100% - 10rem); max-width: 300px;} .board-write .btn-wrap{display: flex; justify-content: center; padding: 10rem 0 7.8rem 0; gap: 2.2rem; font-weight: 700;} .board-write .btn-wrap button{background-color: #00CB68; color: #fff; height: 5rem; width: 15rem; border-radius: 50px;} .board-write .btn-wrap button:nth-child(2){background-color: #F5FCF9; color: #00CB68;} .board-write .secret-check{position: absolute; display: flex; align-items: center; cursor: pointer; left: 10rem; bottom: -4rem; cursor: pointer; gap: 1rem; color: #707070;} .board-write .secret-check input{position: absolute; opacity: 0; height: 0; width: 0;} .board-write .secret-check .custom-check{height: 2rem; width: 2rem; background-color: #fff; border: 1px solid #DDDDDD; position: relative; } .board-write .secret-check .custom-check::after{content: ""; width: 2rem; height: 1.5rem; background: url(../img/apply-check.svg) no-repeat center / contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .board-write .secret-check input:checked~ .custom-check{background-color: #00CB68; border-color: #00CB68;} @media screen and (max-width: 768px){ .board-write .contwrap h2{font-size: 18px; margin-bottom: 43px;} .board-write{font-size: 12px;} .board-write .top-input{flex-direction: column; gap: 15px;} .board-write .top-input input{width: 100% !important;} .board-write .inp-file label{padding: 0 10px;} .board-write textarea{margin-bottom: 15px;} .board-write .inp-file span, .board-write .inp-pw span{font-size: 14px;} .board-write .btn-wrap{gap: 15px;} .board-write .btn-wrap button{width: 85px; height: 30px;} }