@charset "utf-8"; @import url('font.css'); @import url('common.css'); @import url('swiper.css'); @import url('slick.css'); @import url('jquery-ui.css'); .tb_show {display:none;} .wrapper {width:1000px; margin:0 auto;} #container {padding-top:170px; padding-bottom:200px; overflow:hidden;} #container.pb0 {padding-bottom:0 !important;} .br_show {display:none;} /* 타이틀 공통 */ .comon_tit {padding-bottom:60px; text-align:center;} .comon_tit > span {display:block; margin-bottom:24px; color:#51C0EE; font-size:20px; font-weight:700; line-height:1;} .comon_tit h3 {font-size:40px; line-height:1.6;} .comon_tit .sub_tit {margin-top:40px; color:#555; font-size:20px; font-weight:700; line-height:1.6;} .comon_tit .sub_tit.type02 {margin-top:16px; font-weight:400;} .comon_tit .sub_tit.type02 > span {display:block; font-size:24px;} .comon_tit .sub_tit.type02 > p {margin-top:30px; font-size:16px;} .comon_tit .sub_tit2{margin-top:20px;font-size:30px;line-height:46px} .comon_tit .sub_tit.md {margin-top:32px; font-size:18px; font-weight:400;} .comon_tit.white > span {color:rgba(255,255,255,.5);} .comon_tit.white h3 {color:#fff;} .comon_tit.white .sub_tit {color:#fff !important;} /* 스와이퍼 슬라이드 버튼 공통 */ .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {opacity:1;} .slick-arrow {position:absolute; z-index:10; top:50%; transform:translateY(-50%);} .slick-prev {left:30px;} .slick-next {right:30px;} .slick-arrow, .swiper-button-prev, .swiper-button-next {z-index:10; width:54px; height:54px; border:1px solid #E0E0E0; border-radius:50%; text-indent:-9999px; background-repeat:no-repeat; background-position:center; background-size:24px; background-color:#fff; cursor:pointer;} .swiper-button-prev {background-image:url(../img/ico/ico_sd_left.svg)} .swiper-button-next {background-image:url(../img/ico/ico_sd_right.svg)} .slick-prev {background-image:url(../img/ico/ico_sd_left.svg)} .slick-next {background-image:url(../img/ico/ico_sd_right.svg)} /* 버튼 공통 */ .btn_wrap {margin-top:60px; text-align:center;} .btn_wrap > * {display:inline-block; width:177px; padding:16px 0; margin:0 12px; text-align:center; color:#fff; font-size:16px; font-weight:700; border:1px solid #333; vertical-align:top; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background:#333;} .btn_wrap input {border:0;} .btn_wrap .empty {color:#333; border-color:#E0E0E0; background:#fff;} .btn_wrap .cancel {width:110px;} .grace_btn {display:block; margin:0 auto; width:300px; padding:20px 0; color:#fff; font-weight:700; text-align:center; background:linear-gradient(121.2deg, #51C0EE 27.75%, #0D6DB9 90.82%); border-radius:60px;} .grace_btn.big {display:inline-block; width:auto; padding:33px 80px; font-size:24px; border:0;} .grace_btn.big:after {position:relative; top:-2px;} .grace_btn.ico:after {content:''; display:inline-block; width:26px; height:26px; margin-left:10px; vertical-align:middle; background:url(../img/ico/ico_arw_r_w02.svg) no-repeat center; background-size:100%;} /* header */ #grace_header {position:fixed; z-index:9999; left:0; top:0; width:100%; padding:50px 0 37px; background:#fff; transition:all .3s ease;} #grace_header > div.wrapper {display:flex; position:relative; width:1400px; align-items:center; justify-content:space-between;} #grace_header h1 {position:relative; z-index:999; width:219px; height:62px; background:url(../img/ico/ico_logo.svg) no-repeat center; background-size:100%;} #grace_header h1 a {display:block; width:100%; height:100%; text-indent:-9999px;} #grace_header h2 {display:none; width:50px; height:50px; margin-right:-20px; text-indent:-9999px; background-image:url(../img/ico/ico_menu_btn.svg); background-repeat:no-repeat; background-position:center; background-size:36px;} #grace_header h2.active {background-image:url(../img/ico/ico_menu_close.svg);} #grace_header nav {position:relative; z-index:2; right:64px;} #grace_header .gnb a {display:block; width:100%; height:100%; font-weight:700;} #grace_header .gnb> li {display:inline-block; position:relative; vertical-align:top} #grace_header .gnb > li > a {padding:30px 30px; font-size:17px;} #grace_header .submenu {display:none; position:absolute; z-index:1; top:82px; left:50%; width:250px; padding:23px 0; text-align:center; border:1px solid #E0E0E0; box-shadow:0px 4px 8px rgba(0,88,124,.2); border-radius:16px; transform:translateX(-50%); background:#fff;} #grace_header .submenu li {line-height:1.25;} #grace_header .submenu li a {padding:7px 0; font-size:16px} #grace_header .hd_etc {position:absolute; z-index:1; top:22px; right:-280px;} #grace_header .hd_etc a {display:inline-block; position:relative; padding:10px 10px; color:#888; font-size:15px; font-weight:700;} #grace_header .hd_etc a:last-child:after {display:none;} #grace_header .hd_etc a:after {content:''; position:absolute; z-index:1; top:10px; right:0; width:1px; height:20px; background:#ccc;} #grace_header .hd_etc .login {padding-left:28px;} #grace_header .hd_etc .login:before {content:''; position:absolute; z-index:1; top:11px; left:0; width:20px; height:20px; background:url(../img/ico/ico_user.svg) no-repeat center; background-size:100%;} /* footer */ footer {color:rgba(255, 255, 255, 0.5); font-size:14px; background:#2E2E2E;} footer a {display:inline-block; color:rgba(255, 255, 255, 0.5); vertical-align:top;} footer .ft_top {padding:21px 0; border-bottom:1px solid rgba(255, 255, 255, 0.12);} footer .ft_top .wrapper {position:relative;} footer .ft_top ul li {display:inline-block; vertical-align:middle;} footer .ft_top ul li:first-child a {padding-left:0;} footer .ft_top ul li a {display:block; padding:0 15px; transition:all .2s ease;} footer .ft_top ul li a:hover {color:#fff;} footer .ft_top .sns {position:absolute; z-index:1; top:0; right:0;} footer .ft_top .sns a {display:inline-block; margin:0 8px; vertical-align:middle; background-repeat:no-repeat; background-size:100%; background-position:center; text-indent:-9999px;} footer .ft_top .sns a:last-child {margin-right:0;} footer .ft_top .sns .blog {width:26px; height:26px; background-image:url(../img/ico/ico_ft_blog.svg);} footer .ft_top .sns .kakao {width:26px; height:24px; background-image:url(../img/ico/ico_ft_kakao.svg);} footer .ft_btm {position:relative; padding:67px 0 64px;} footer .ft_btm address {margin-top:26px;} footer .ft_btm address p {line-height:1.6;} footer .ft_btm .call_center {position:absolute; z-index:1; top:59px; right:50%; margin-right:-600px;} footer .ft_btm .call_center > strong {display:block; margin-bottom:16px; color:#51C0EE; font-size:20px; line-height:1.4;} footer .ft_btm .call_center .tel {margin-bottom:16px;} footer .ft_btm .call_center .tel a {display:block; color:#fff; line-height:1.4;} footer .ft_btm .call_center .time {line-height:1.4;} footer .copy {padding:16px 0; text-align:center; background:#262626;} /* 우측 aside */ #quick_menu {position:fixed; z-index:9999; top:50%; right:0; width:108px; box-shadow:0px 4px 20px rgba(0,0,0,.15); border-radius:8px 0px 0px 8px; text-align:center; overflow:hidden; cursor:pointer; background:#fff; transform:translateY(-50%);} #quick_menu ul {padding:20px 0;} #quick_menu ul li {display:block;} #quick_menu ul li a:before {content:''; display:block; width:42px; height:42px; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:100%;} #quick_menu ul li a {display:block; width:100%; height:100%; padding:12px 0; color:#333;} #quick_menu ul li a strong {display:block; margin-top:14px; font-size:12px; font-weight:700;} #quick_menu .top_btn {color:#fff; padding:11px 0; font-size:12px; background:#959FA4;} #quick_menu .quick01 a:before {background-image:url(../img/ico/ico_quick01.svg);} #quick_menu .quick02 a:before {background-image:url(../img/ico/ico_quick02.svg);} #quick_menu .quick03 a:before {background-image:url(../img/ico/ico_quick03.svg);} #quick_menu .quick04 a:before {background-image:url(../img/ico/ico_quick04.svg);} #quick_menu .quick05 a:before {background-image:url(../img/ico/ico_quick05.svg);} /* 수강료 추가 */ #quick_menu .quick05 strong {display:block; margin-bottom:6px;} #quick_menu .quick05 span {color:#51C0EE; font-size:14px; font-weight:700;} #quick_menu2 {position:fixed; z-index:9999; right:0; width:108px; box-shadow:0px 4px 20px rgba(0,0,0,.15); border-radius:8px 0px 0px 8px; text-align:center; overflow:hidden; cursor:pointer; background:#fff; transform:translateY(-50%);} #quick_menu2 ul {padding:20px 0;} #quick_menu2 ul li {display:block;} #quick_menu2 ul li a:before {content:''; display:block; width:42px; height:42px; margin:0 auto; background-repeat:no-repeat; background-position:center; background-size:100%;} #quick_menu2 ul li a {display:block; width:100%; height:100%; padding:12px 0; color:#333;} #quick_menu2 ul li a strong {display:block; margin-top:14px; font-size:12px; font-weight:700;} #quick_menu2 .top_btn {color:#fff; padding:11px 0; font-size:12px; background:#959FA4;} #quick_menu2 .quick01 a:before {background-image:url(../img/ico/ico_quick01.svg);} #quick_menu2 .quick02 a:before {background-image:url(../img/ico/ico_quick02.svg);} #quick_menu2 .quick03 a:before {background-image:url(../img/ico/ico_quick03.svg);} #quick_menu2 .quick04 a:before {background-image:url(../img/ico/ico_quick04.svg);} #quick_menu2 .quick05 a:before {background-image:url(../img/ico/ico_quick05.svg);} /* 수강료 추가 */ #quick_menu2 .quick05 strong {display:block; margin-bottom:6px;} #quick_menu2 .quick05 span {color:#51C0EE; font-size:14px; font-weight:700;} /* 메인 비주얼 */ .visual {position:relative; max-width:1920px; margin:0 auto; overflow:hidden;} .visual .deco_con:before {content:''; position:absolute; z-index:1; top:0; left:0; width:1615px; height:100%; background:linear-gradient(117.62deg, #36B4E9 5.65%, #0D5186 89.9%); border-radius:0px 50px 50px 0px;} .visual .deco_con {position:relative; height:817px;} .visual .deco_con .txt:before {content:''; position:absolute; z-index:1; top:-42px; left:-14px; width:192px; height:64px; background:url(../img/ico/ico_star.svg) no-repeat center; background-size:100%;} .visual .deco_con .txt {position:relative; z-index:2; top:50%; left:50%; margin-left:-700px; color:#fff; font-size:24px; transform:translateY(-50%);} .visual .deco_con .txt h3:before {content:''; position:absolute; z-index:-1; top:0; left:-329px; width:763px; height:100%; background:#0E5186;} .visual .deco_con .txt h3 {display:inline-block; position:relative; margin:42px 0; padding:20px 40px 10px 0; font-family:'SBaggroB'; letter-spacing:0px; font-size:34px; font-weight:500; background: #0E5186; border-radius: 0px 20px 20px 0px;} .visual .deco_con .txt h3 strong {color:#FFF568; font-size:50px;} .visual .deco_con .txt p {line-height:1.6;} .visual .deco_con .txt p + p {margin-top:18px;} .visual .deco_con .txt .go_down {display:inline-block; width:60px; height:60px; margin-top:28px; border:4px solid rgba(255,255,255,.2); border-radius:50%; background:url(../img/ico/ico_arw_btm.svg) no-repeat center;} /*** .visual .main_swipercon:before {content:''; position:absolute; z-index:2; top:64px; left:-90px; width:499px; height:303px; background:url(../img/pic/pic_abc.png) no-repeat center; background-size:100%;} ***/ .visual .main_swipercon {position:relative; position:absolute; z-index:2; top:50%; right:0; width:842px; height:700px; margin-top:-350px;} .visual .main_swipercon .main_swiper {width:100%; height:100%; border-radius:80px 0 0 80px; overflow:hidden;} .visual .main_swipercon .main_swiper .swiper-slide {width:100%;} .visual .main_swipercon .main_swiper .swiper-slide img {width:100%;} /* 텍스트 슬라이드 */ .m_txt_swiper {position:relative; padding-top:216px; overflow:hidden;} .m_txt_swiper .swiper-slide {text-align:center;} .m_txt_swiper .swiper-slide p:before {content:''; display:block; width:76px; height:57px; margin:0 auto 60px; background:url(../img/ico/ico_sign.svg) no-repeat center; background-size:100%;} .m_txt_swiper .swiper-slide p {font-size:34px; line-height:1.6;} .m_txt_swiper .swiper-pagination {position:static; margin-top:60px;} .m_txt_swiper .swiper-pagination-bullet {width:14px; height:14px; margin:0px 7px; border-radius:50%; border:2px solid #E0E0E0; opacity:1; background:transparent;} .m_txt_swiper .swiper-pagination-bullet-active {border-color:#51C0EE; background:#51C0EE;} .m_txt_swiper .swiper-button-prev, .m_txt_swiper .swiper-button-next {margin-top:100px;} /* 교육 철학 */ .philosophy {max-width:1920px; padding-top:200px; margin:0 auto;} .philosophy ul {margin-top:40px} .philosophy ul li {display:flex; position:relative; align-items:center;} .philosophy ul li + li {padding-top:100px;} .philosophy ul li > div {width:50%;} .philosophy ul li.bf_img:before {content:''; position:absolute; z-index:-1; top:-25px; left:-20px; width:607px; height:281px; background:url(../img/ico/ico_big_txt.svg) no-repeat center; background-size:100%;} .philosophy ul li .con {padding-left:100px; padding-right:50px;} .philosophy ul li .con .tit {margin-bottom:26px; font-size:32px; font-weight:700; line-height:1.6;} .philosophy ul li .con .tit em {color:#EFA800;} .philosophy ul li .con .tit.type02 {margin-bottom:48px;} .philosophy ul li .con .tit.type02 > strong {display:block; margin-bottom:32px;} .philosophy ul li .con .tit.type02 p {font-weight:400;} .philosophy ul li .con .txt p {font-size:18px; line-height:1.7;} .philosophy ul li .con .txt p + p {margin-top:34px;} .philosophy ul li .thumb {border-radius:0 40px 40px 0; overflow:hidden;} .philosophy ul li .thumb img {width:100%;} .philosophy ul li:nth-child(even) .thumb {border-radius:40px 0 0 40px; order:2;} .philosophy ul li:nth-child(even) .con {padding-left:230px; order:1;} /** 추가되는 부분 **/ .div_section {max-width:1920px; padding-top:200px; margin:0 auto;border:1px solid #ff0000} /* 맞춤,정성으로 교육합니다. */ .education2 {padding-top:200px;} .education2 .comon_tit {padding-bottom:128px;} .education2 .comon_tit .sub_tit2 {margin-top:0; font-size:32px; font-weight:500;} .education2 .edu_line {max-width:616px; height:370px; margin:0 auto;} .education2 .edu_line img {width:100%;} .education2 ul {display:flex;text-align:center;width:1400px;margin:auto; flex-wrap:wrap;} .education2 ul li:before {content:''; position:absolute; z-index:1; top:-43px; left:50px; background-repeat:no-repeat; background-position:center;background-size:100%;} .education2 ul li {position:block; margin:0 20px 115px; padding:30px 25px 30px; font-size:18px; border-radius:20px; box-shadow:0px 4px 20px rgba(0,0,0,.15); line-height:1.6; background:#FFF;} .education2 ul li:last-child {margin-right:0;} .education2 ul li strong {display:block; margin-bottom:16px;} .education2 ul li.edu2:before {top:-58px; width:97px; height:118px; background-image:url(../img/ico/ico_tuter.png);} /*****************/ /* 차별점 */ .difference {padding-top:200px;} .difference .colorball_con {padding-top:20px;} .colorball_con {display:flex; justify-content:center;} .colorball_con > div {position:relative; margin-right:62px} .colorball_con > div:last-child {margin-right:0;} .colorball_con [class^="ball"] {display:inline-block; position:relative; vertical-align:top;} .colorball_con [class^="ball"] > div {display:flex; position:relative; width:280px; height:280px; margin:20px; color:#fff; font-size:20px; font-weight:700; text-align:center; border-radius:50%; flex-direction:column; align-items:center; justify-content:center; background:#51C0EE;} .colorball_con .ball_txt {display:block; padding-top:20px; font-size:18px; font-weight:700; text-align:center; line-height:1.4;} .colorball_con .left_ball .ball > div:after {content:''; position:absolute; z-index:1; top:50%; right:-64px; width:42px; height:42px; background:url(../img/ico/ico_g_plus.svg) no-repeat center; background-size:100%; transform:translateY(-50%);} .colorball_con .right_ball .line {border:1px solid #E0E0E0; border-radius:334px;} .colorball_con .right_ball .ball01 > div {background:rgba(13,109,185,.6);} .colorball_con .right_ball .ball02 {margin:0 -80px;} .colorball_con .right_ball .ball02 > div {background:rgba(12,146,10,.6);} .colorball_con .right_ball .ball03 {margin:-320px 0px 0px 480px;} .colorball_con .right_ball .ball03 > div {background:rgba(255,92,0,.6);} .colorball_con .right_ball .ball_txt:before {content:''; display:inline-block; width:24px; height:24px; vertical-align:top; margin-right:8px; background:url(../img/ico/ico_star_y.svg) no-repeat center; background-size:100%;} /* */ .wonder_banner {height:422px; margin-top:200px;} .wonder_banner .baner_wrap {height:100%; background:#EFA800;} .wonder_banner .baner_wrap > div {position:relative; height:100%;} .wonder_banner .baner_wrap > div:after {content:''; position:absolute; z-index:1; bottom:0; right:-165px; width:775px; height:539px; background:url(../img/pic/pic_wonder_pc.png) no-repeat center; background-size:100%;} .wonder_banner .txt {position:relative; z-index:5; top:50%; color:#fff; transform:translateY(-50%);} .wonder_banner .txt p {font-size:30px; line-height:1.5;} .wonder_banner .txt a {display:inline-block; padding:19px 120px 19px 34px; margin-top:24px; color:#fff; font-size:16px; font-weight:700; border:4px solid rgba(255,255,255,.2); border-radius:58px; background:url(../img/ico/ico_arw_r_w.svg) no-repeat center right 12px;} .wonder_banner .mo_img_bn {display:none;} .wonder_banner .mo_img_bn img {width:100%;} /* 맞춤,정성으로 교육합니다. */ .education {padding-top:200px;} .education .comon_tit {padding-bottom:128px;} .education .comon_tit .sub_tit2 {margin-top:0; font-size:32px; font-weight:500;} .education .edu_line {max-width:616px; height:370px; margin:0 auto;} .education .edu_line img {width:100%;} /* s : 1013 추가 */ .education ul {display:flex; justify-content:center; margin:0 -20px; flex-wrap:wrap;} .education ul li:before {content:''; position:absolute; z-index:1; top:-43px; left:50px; background-repeat:no-repeat; background-position:center; background-size:100%;} .education ul li {position:relative; width:calc(50% - 40px); margin:0 20px 115px; padding:97px 50px 52px; font-size:18px; border-radius:20px; box-shadow:0px 4px 20px rgba(0,0,0,.15); line-height:1.6; background:#FFF;} .education ul li:last-child {margin-right:0;} .education ul li > strong {display:block; margin-bottom:16px;} .education ul li.edu01:before {width:104px; height:100px; background-image:url(../img/ico/ico_eye.svg);} .education ul li.edu02:before {width:134px; height:120px; background-image:url(../img/ico/ico_feedback.svg);} .education ul li.edu03:before {top:-32px; width:130px; height:77px; background-image:url(../img/ico/ico_bookss.png);} .education ul li.edu04:before {top:-58px; width:97px; height:118px; background-image:url(../img/ico/ico_tuter.png);} /* e : 1013 추가 */ /* 후기 */ .review { padding-top:200px;} .review .review_swiper_wrap {position:relative;} .review .review_swiper_wrap .swiper-button-prev, .review .review_swiper_wrap .swiper-button-next {transform:translateY(-50%);} .review .review_swiper_wrap .swiper-button-prev {left:-94px;} .review .review_swiper_wrap .swiper-button-next {right:-94px;} .review .review_swiper_wrap .review_swiper {overflow:hidden;} .review .review_swiper_wrap .review_swiper .thumb {width:100%; height:360px; margin-bottom:30px; border-radius:20px; overflow:hidden;} .review .review_swiper_wrap .review_swiper .thumb img {width:100%;} .review .review_swiper_wrap .review_swiper .con > strong {display:-webkit-box; height:64px; font-size:20px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .review .review_swiper_wrap .review_swiper .con > p {display:-webkit-box; height:76px; margin-top:16px; color:#555; line-height:1.6; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical;} .review .grace_btn {position:relative; width:254px; padding-left:40px; margin-top:155px; text-align:left;} .review .grace_btn.ico:after {position:absolute; z-index:1; top:50%; right:40px; width:26px; height:26px; transform:translateY(-50%);} /* 수업안내 */ .grace_guide {padding:108px 0 200px;} .grace_guide ul {display:flex;} .grace_guide ul li {flex:1; margin-right:30px;} .grace_guide ul li a {display:block; width:100%; height:100%;} .grace_guide ul li:last-child {margin-right:0;} .grace_guide ul li .thumb {margin-bottom:24px; border-radius:20px; overflow:hidden;} .grace_guide ul li .thumb img {width:100%;} .grace_guide ul li .txt {font-size:18px; font-weight:700; text-align:center;} .grace_guide .comon_tit p{margin-top:20px;font-size:18px} /* 최하단 체험신청 배너 */ .experience_bn {padding:200px 0; background-image:url(../img/bg/bg_experience.png); background-repeat:no-repeat; background-position:center; background-size:cover;} .experience_bn .comon_tit {padding-bottom:0;} .experience_bn .comon_tit h3 {color:#fff; font-size:48px; line-height:1.4;} .experience_bn .grace_btn {margin-top:75px; font-size:18px;} .experience_bn.type_sub {padding:200px 0 150px;} .experience_bn.type_sub .grace_btn {margin-top:60px;} .experience_bn.type_bg02 {background-image:url(../img/bg/bg_experience02.jpg);} .experience_bn.type_bg03 {background-image:url(../img/bg/bg_experience03.jpg);} /*어워즈*/ .award {padding:100px 0 86px; background:#333;} .award ul {display:flex; justify-content:center;} .award ul li {margin:0 35px; text-align:center;} .award ul li .ico {display:block; height:66px; margin:0 auto; text-indent:-9999px; background-repeat:no-repeat; background-size:100%; background-position:center;} .award ul li.aw01 .ico {width:167px; background-image:url(../img/ico/ico_aw_14.svg)} .award ul li.aw02 .ico {width:150px; background-image:url(../img/ico/ico_aw_97.svg)} .award ul li.aw03 .ico {width:133px; background-image:url(../img/ico/ico_aw_1.svg)} .award ul li > p {margin-top:17px; color:#fff; font-size:20px; font-weight:700; line-height:1.6;} /*************** 서브시작 / 서브공통 ******************/ .subcon_wrap {padding-top:140px;} .sub_visual:after {content:''; position:absolute; z-index:1; bottom:-92px; right:50%; margin-right:-802px; width:486px; height:369px; background-repeat:no-repeat; background-position:center; background-image:url(../img/bg/bg_subvisual_deco01.svg); background-size:100%;} .sub_visual {position:relative; z-index:1; height:338px; overflow:hidden; background:#EBE7F2;} .sub_visual .wrapper {height:100%;} .sub_visual .txt {position:relative; z-index:5; top:50%; transform:translateY(-50%);} .sub_visual .txt .tag {display:block; margin-bottom:16px; color:#9F7EE4; font-size:16px; font-weight:700; line-height:1.4;} .sub_visual .txt > strong {display:block; font-size:30px; line-height:1.5;} .sub_visual .txt p {margin-top:10px; font-size:18px; line-height:1.6;} .sub_visual.is_board:after {bottom:-68px; margin-right:-696px; width:396px; height:366px; background-image:url(../img/bg/bg_subvisual_deco06.svg);} .sub_visual.is_board {background:#F2F2F2;} .sub_visual.is_board .txt .tag {color:#3A89C6;} .sub_visual.class_review:after {bottom:-52px; width:575px; height:369px; margin-right:-840px; background-image:url(../img/bg/bg_subvisual_deco05.svg);} .sub_visual.class_review {background:#F8F1EC;} .sub_visual.class_review .txt .tag {color:#FF8D5C;} //.snb_wrap:after {content:''; position:absolute; z-index:5; top:0; right:0; width:86px; height:calc(100% - 10px); background:linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 151.43%);} .snb_wrap {position:relative;} .sub_snb {display:inline-block; position:relative; z-index:5; top:-28px; left:50%; padding:0 56px; border-radius:55px; box-shadow:0px 4px 10px rgba(99,99,99,.2); background:#fff; transform:translateX(-50%);} .sub_snb li {display:inline-block; text-align:center;} .sub_snb li a {display:block; width:100%; height:100%; padding:18px 24px; font-size:15px;} .sub_snb li:hover a, .sub_snb li.on a {font-weight:700;} /* 테이블 공통 */ .bkline_table {border-top:1px solid #000; font-size:18px;} .bkline_table th {padding:20px 20px; text-align:left; border-bottom:1px solid #E0E0E0;} .bkline_table th.ver_top {padding-top:36px; vertical-align:top;} .bkline_table td {padding:20px 0; border-bottom:1px solid #E0E0E0;} .bkline_table td.in_check {padding:35px 0;} .bkline_table td input {width:400px; height:55px; padding:0 30px; border:1px solid #E0E0E0; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background:#fff;} .bkline_table td input.datepicker {padding:0 30px 0 64px; background:url(../img/ico/ico_datepicker.svg) no-repeat center left 30px;} .bkline_table td em {display:inline-block; margin-left:26px; color:#0D6DB9; line-height:1.25;} .bkline_table td select {width:300px; height:55px; padding:0 30px; color:#888; background-image:url(../img/ico/ico_select_arw.svg); background-position:center right 30px;} .bkline_table td select:focus {color:#333;} .bkline_table textarea {height:252px; padding:16px 30px;} .bkline_table .time_select {display:inline-block;} .bkline_table .time_select select {width:100px;} .bkline_table .time_select select ~ span {display:inline-block; margin-left:20px; margin-right:24px; color:#888; vertical-align:middle;} .bkline_table .time_select span:last-of-type {margin-right:4px;} table th .require:after {content:'*'; color:#FF0000;} table .course_con .comon_check {margin-right:56px;} table .level_chk .comon_check {display:block;} table .level_chk .comon_check + .comon_check {margin-top:36px;} /* 체크박스 공통 */ .comon_check {display:inline-block; position:relative;} .comon_check input {position:absolute; width:0; height:0; margin:0; clip:rect(0,0,0,0); border:0; overflow:hidden;} .comon_check input + i {position:absolute; z-index:1; top:0; left:0; width:24px; height:24px; vertical-align:top; border-radius:50%; border:1px solid #E0E0E0;} .comon_check input:checked + i:after {content:''; position:absolute; z-index:1; top:50%; left:50%; width:14px; height:14px; border-radius:50%; background:#0D6DB9; transform:translate(-50%,-50%);} .comon_check span {display:inline-block; padding-left:34px; color:#888; font-size:18px;} /* 컬러별 포인트 컬러 */ .bg_gray {background:#F4F4F4;} .color_green .sub_visual:after {bottom:-175px; margin-right:-794px; width:460px; height:465px; background-image:url(../img/bg/bg_subvisual_deco03.svg);} .color_green .sub_visual .txt .tag {color:#89C265;} .color_green .color_bg {background:#F1F5EE;} .color_green .comon_tit > span {color:#89C265;} .color_og .sub_visual:after {bottom:-40px; margin-right:-682px; width:457px; height:328px; background-image:url(../img/bg/bg_subvisual_deco04.svg);} .color_og .sub_visual {background:#F8F3ED;} .color_og .sub_visual .txt .tag {color:#EDA657;} .color_og .color_bg {background:#F8F3ED;} .color_og .comon_tit > span {color:#EDA657;} .color_blue .sub_visual:after {top:50%; margin-right:-657px; width:333px; height:210px; background-image:url(../img/bg/bg_subvisual_deco02.svg); margin-top:-105px;} .color_blue .sub_visual {background:#EBF0F3;} .color_blue .sub_visual .txt .tag {color:#0D6DB9;} .color_blue .comon_tit > span {color:#5686E1;} [class^="color_gra"] .sub_visual:before {content:''; position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%;} .color_grapurple .sub_visual:after {bottom:-62px; margin-right:-834px; width:580px; height:352px; background-image:url(../img/bg/bg_subvisual_deco07.png);} .color_grapurple .sub_visual:before {background:linear-gradient(90.25deg, rgba(186, 148, 234,.4) 2.97%, rgba(186, 148, 234, 0) 85.24%);} .color_grapurple .sub_visual {background:#EFEBF4;} .color_grapurple .sub_visual .txt .tag {color:#7B4DC3;} .color_graog .sub_visual:after {bottom:-94px; margin-right:-911px; width:640px; height:369px; background-image:url(../img/bg/bg_subvisual_deco08.png);} .color_graog .sub_visual:before {background:linear-gradient(90.25deg, rgba(231, 162, 149, .4) 2.97%, rgba(231, 164, 149, 0) 85.24%);} .color_graog .sub_visual {background:#F3E9E7;} .color_graog .sub_visual .txt .tag {color:#E7A495;} .color_grablue .sub_visual:after {bottom:-48px; margin-right:-1046px; width:707px; height:332px; background-image:url(../img/bg/bg_subvisual_deco09.png);} .color_grablue .sub_visual:before {background:linear-gradient(90.25deg, rgba(81, 192, 238,.3) 2.97%, rgba(231, 164, 149, 0) 85.24%, rgba(81, 192, 238, 0) 85.24%);} .color_grablue .sub_visual {background:#EFF3F6;} .color_grablue .sub_visual .txt .tag {color:#51C0EE;} .color_grablue2 .sub_visual:after {bottom:-48px; margin-right:-1046px; width:707px; height:332px; background-image:url(../img/bg/bg_subvisual_deco09.png);} .color_grablue2 .sub_visual:before {background:linear-gradient(90.25deg, rgba(81, 192, 238,.3) 2.97%, rgba(231, 164, 149, 0) 85.24%, rgba(81, 192, 238, 0) 85.24%);} .color_grablue2 .sub_visual {background:#EFF3F6;} .color_grablue2 .sub_visual .txt .tag {color:#51C0EE;} /* 서브 - 대표소개 */ [class^="info_sec"] .info_txt {position:relative; z-index:3;} [class^="info_sec"] .info_txt .tit {margin-bottom:40px; font-size:32px; font-weight:700; line-height:1.6;} [class^="info_sec"] .info_txt .con p {color:#555; font-size:18px; line-height:1.7;} [class^="info_sec"] .info_txt .con p + p {margin-top:32px;} [class^="info_sec"] .img {margin-right:100px; overflow:hidden;} [class^="info_sec"] .img img {width:100%;} .info_sec01 {display:flex; width:1230px; padding:60px 0 180px;} .info_sec01 .img {width:519px; height:525px;} .info_sec02 {position:relative; padding:180px 0 150px; background-color:#F3F0FB;} .info_sec02:before {content:''; position:absolute; z-index:1; top:198px; right:50%; width:497px; height:500px; margin-right:-794px; background:url(../img/pic/pic_intro01_02.png) no-repeat center; background-size:100%;} .info_sec02:after {content:''; position:absolute; z-index:1; bottom:-17px; right:-5px; width:365px; height:120px; background:url(../img/ico/ico_2008.svg) no-repeat center; background-size:100%;} .info_sec03 {display:flex; padding-top:180px;} .info_sec03 .img {width:500px; height:515px; border-radius:30px;} /* 서브 - 화상영어 선택시 주의사항 */ .faq .comon_tit {padding-bottom:80px;} .faq .faq_list {counter-reset:faq; border-top:2px solid #ABD790;} .faq .faq_list li {counter-increment:faq; border-bottom:1px solid #E0E0E0;} .faq .faq_list li .tit {position:relative; padding:34px 82px; font-size:24px; line-height:1.4; font-weight:700; cursor:pointer;} .faq .faq_list li .tit:before {content:counter(faq, decimal-leading-zero) '.'; position:absolute; z-index:1; top:50%; left:29px; font-family:'Montserrat'; font-size:30px; font-weight:700; color:#CCC; transform:translateY(-50%);} .faq .faq_list li .tit:after {content:''; position:absolute; z-index:1; top:50%; right:30px; width:42px; height:42px; margin-top:-21px; border-radius:50%; background-color:#ABD790; background-image:url(../img/ico/ico_faq_arr.svg); background-position:center; background-repeat:no-repeat;} .faq .faq_list li .tit.hide:after {transform:rotate(180deg);} .faq .faq_list li .con {padding:40px 40px 40px 82px; font-size:18px; color:#555; border-top:1px solid #E0E0E0; background:#F2F9EE;} .faq .faq_list li .con p {line-height:1.4;} .faq .faq_list li .con a {display:inline-block; color:#555; vertical-align:top;} .faq .faq_list li .con p + p {margin-top:26px;} /* 서브 - 강사소개 */ .flex_col3 {display:flex; justify-content:center;} .flex_col3 li {flex:1; text-align:center; background-repeat:no-repeat;} .flex_col3 li > strong {font-size:24px; line-height:1.4;} .flex_col3 li > p {margin-top:16px; line-height:1.6;} .sincerity {padding-bottom:180px;} .sincerity .comon_tit {padding-bottom:80px;} .sincerity ul li {position:relative; padding:155px 20px 20px; background-position:center top 32px;} .sincerity ul li:last-child:after {display:none;} .sincerity ul li:after {content:''; position:absolute; z-index:1; top:0; right:0; width:1px; height:100%; background:#E0E0E0;} .sincerity ul li.sin01 {background-image:url(../img/ico/ico_sin01.svg);} .sincerity ul li.sin02 {background-image:url(../img/ico/ico_sin02.svg);} .sincerity ul li.sin03 {background-image:url(../img/ico/ico_sin03.svg);} .sincerity ul li.sin04 {background-image:url(../img/ico/hot1.jpg);} .sincerity ul li.sin05 {background-image:url(../img/ico/hot2.jpg);} .sincerity ul li.sin06 {background-image:url(../img/ico/hot3.jpg);} .direct_active {padding:150px 0;} .direct_active li {padding:300px 20px 0; background-position:center top;} .direct_active li.direc01 {background-image:url(../img/ico/ico_direc01.svg); background-position:center top 16px;} .direct_active li.direc02 {background-image:url(../img/ico/ico_direc02.svg);} .direct_active li.direc03 {background-image:url(../img/ico/ico_direc03.svg);} .process {padding:180px 0;} .process ol {text-align:center; counter-reset:process;} .process ol li:before {counter-increment:process; position:absolute; z-index:1; top:20px; left:50%; width:30px; height:30px; line-height:30px; margin-left:-15px; color:#fff; font-size:14px; font-weight:700; text-align:center; border-radius:50%; content:counter(process, decimal-leading-zero); background:#EDA657;} .process ol li {display:inline-block; position:relative; width:200px; height:200px; padding-top:64px; margin-right:50px; border-radius:50%; border:4px solid #EDA657; text-align:center; background:linear-gradient(to top, #EDA657 50%, #fff 50%);} .process ol li:last-child {margin-right:0;} .process ol li:last-child:after {display:none;} .process ol li:after {content:''; position:absolute; z-index:1; top:50%; right:-43px; width:24px; height:24px; background:url(../img/ico/ico_process_arw.svg) no-repeat center; background-size:100%; transform:translateY(-50%)} .process ol li > p {color:#EDA657; font-size:14px; font-weight:700; line-height:1.4;} .process ol li > div {padding-top:28px; line-height:1.4; color:#fff; font-weight:700;} .teacher_li {padding:0 0 180px;} /* 서브 - 그레이스 잉글리시 차별점 */ .differ_color {padding-bottom:120px;} .differ_color .left_ball .ball > div {margin:22px 20px;} .differ_color .right_ball .top_deco:before {content:''; display:inline-block; width:24px; height:24px; margin-right:8px; vertical-align:top; background:url(../img/ico/ico_star_w.svg) no-repeat center; background-size:100%;} .differ_color .right_ball .top_deco {display:flex; position:absolute; top:-68px; left:50%; padding:22px 36px; color:#fff; font-size:18px; font-weight:700; border-radius:20px 20px 0 0; background:#9F7EE4; transform:translateX(-50%);} .differ_color .right_ball .line {border:4px solid #E0D3FA;} .differ_color [class^="ball_ico0"]:before {content:''; display:block; width:76px; height:76px; margin:0 auto 4px; background-repeat:no-repeat; background-size:100%; background-position:center;} .differ_color .ball_ico01:before {background-image:url(../img/ico/ico_color_differ01.svg)} .differ_color .ball_ico02:before {background-image:url(../img/ico/ico_color_differ02.svg)} .differ_color .ball_ico03:before {background-image:url(../img/ico/ico_color_differ03.svg)} .differ_color .ball_ico04:before {background-image:url(../img/ico/ico_color_differ04.svg)} .differ_color .ball_txt {display:none;} [class^="differ0"] {max-width:1460px; margin:0 auto;} [class^="differ0"] + [class^="differ0"] {padding-top:150px;} [class^="differ0"] .top_bigtit:after {content:''; position:absolute; z-index:2; bottom:0; left:0; width:100%; height:4px;} [class^="differ0"] .top_bigtit {position:relative; padding:80px 0 80px 130px; border-radius:40px 40px 0px 0px;} [class^="differ0"] .top_bigtit .sub_tit:before {content:''; position:absolute; z-index:1; top:7px; left:0; width:4px; height:20px; background:#51C0EE;} [class^="differ0"] .top_bigtit .sub_tit {position:relative; padding-left:24px; margin-bottom:15px; color:#51C0EE; font-size:20px; font-weight:700; line-height:1.6;} [class^="differ0"] .top_bigtit h3 {margin-bottom:30px; color:#fff; font-size:34px; line-height:1.5;} [class^="differ0"] .top_bigtit .txt {color:#fff;} [class^="differ0"] .top_bigtit .txt p {line-height:1.4;} [class^="differ0"] .top_bigtit .txt p + p {margin-top:26px;} [class^="differ0"] .top_bigtit .tags {width:610px;} [class^="differ0"] .top_bigtit .tags p {display:inline-block;} [class^="differ0"] .top_bigtit .tags span:before {content:'#'; display:inline-block; color:#51C0EE; font-weight:700;} [class^="differ0"] .top_bigtit .tags span {display:inline-block; padding:12px 30px; margin-bottom:16px; margin-right:16px; color:#fff; font-weight:700; border:2px dashed #CCCCCC; border-radius:56px;} [class^="differ0"] .top_bigtit .tags span:first-child {margin-right:50px;} [class^="differ0"] ol {counter-reset:faq;} [class^="differ0"] ol li {display:flex; padding:60px 130px 60px 130px;} [class^="differ0"] ol li + li {border-top:1px solid #C4C4C4;} [class^="differ0"] ol li > * {width:50%;} [class^="differ0"] ol li .q_txt:before {content:"Q" counter(faq) "."; counter-increment:faq; position:absolute; z-index:1; top:0; left:0; color:#ccc; font-size:40px;} [class^="differ0"] ol li .q_txt {display:inline-block; position:relative; padding-left:88px; font-size:24px; line-height:1.4;} [class^="differ0"] ol li .a_txt p {color:#555; line-height:1.6;} [class^="differ0"] ol li .a_txt p + p {margin-top:26px;} [class^="differ0"] .grabtn_wrap {margin-top:30px; text-align:center;} .differ01 .top_bigtit {padding:80px 0 54px 130px; background:#0D6DB9 url(../img/bg/bg_differ01.png) no-repeat top 97px right 128px; background-size:390px;} .differ01 .top_bigtit:after {background:#51C0EE;} .differ02 .top_bigtit {background: #9C9FED url(../img/bg/bg_differ02.png) no-repeat top 0 right 0; background-size:730px;} .differ02 .top_bigtit .sub_tit:before {background:#7451FF;} .differ02 .top_bigtit .sub_tit {color:#7451FF;} .differ02 .top_bigtit:after {background:#7451FF;} .differ03 .top_bigtit {background:#78C354 url(../img/bg/bg_differ03.png) no-repeat bottom 0 right 0; background-size:590px;} .differ03 .top_bigtit .sub_tit:before {background:#FAFF00;} .differ03 .top_bigtit .sub_tit {color:#FAFF00;} .differ03 .top_bigtit:after {background:#5FA02B;} /* 서브 - 수강안내 */ .guide_visual > div {position:relative;} .guide_visual > div:after {content:''; position:absolute; z-index:1; top:45px; right:-95px; width:541px; height:324px; background:url(../img/bg/bg_guide_deco.png) no-repeat center; background-size:100%;} .guide_visual {padding:160px 0 230px; color:#fff; background:#4A5B7B;} .guide_visual .gu_tit > span {display:block; margin-bottom:18px; font-size:14px; font-weight:700;} .guide_visual .gu_tit > p {margin-bottom:30px; font-size:50px; line-height:1.5; font-weight:700;} .guide_visual .gu_tit > p strong {color:#FFC700;} .guide_visual .gu_txt p {line-height:1.6;} .guide_visual .gu_txt p + p {margin-top:26px;} .gudie_step {display:flex; margin-top:-126px; counter-reset:step;} .gudie_step li {flex:1; padding:120px 0 36px; margin-right:20px; text-align:center; box-shadow:0px 4px 10px rgba(99, 99, 99, 0.2); border-radius:20px; background-color:#fff; background-repeat:no-repeat; background-position:center top 38px;} .gudie_step li:last-child {margin-right:0;} .gudie_step li strong:before {display:block; font-size:16px; margin-bottom:13px; content:"STEP0" counter(step); counter-increment:step; line-height:1.4;} .gudie_step li strong {font-size:22px; line-height:1.4;} .gudie_step li.step01 {background-image:url(../img/ico/ico_guide_step01.svg)} .gudie_step li.step02 {background-image:url(../img/ico/ico_guide_step02.svg)} .gudie_step li.step03 {background-image:url(../img/ico/ico_guide_step03.svg)} .gudie_step li.step04 {background-image:url(../img/ico/ico_guide_step04.svg)} .apply_li ol {display:flex; margin:0 -20px; flex-wrap:wrap; counter-reset:apply;} .apply_li ol li {width:calc(50% - 40px); padding:40px; margin:20px; border:1px solid #E0E0E0; background:#EEF2FA;} .apply_li ol li .tit:before {display:block; margin-bottom:16px; color:#00C2ED; font-size:14px; font-weight:700; content:"STEP " counter(apply) "."; counter-increment:apply; line-height:1.4;} .apply_li ol li .tit {font-size:24px; line-height:1.4;} .apply_li ol li .txt {margin-top:24px; color:#555; font-size:18px; line-height:1.6;} .apply_li ol li.bg {background:#F0ECF7; border-color:#E0E0E0;} .apply_li ol li.bg .tit:before {color:#9C63FF;} .apply_form {padding:100px 0 178px;} .tuition_info {padding:150px 0 180px;} .tuition_page .tuition_info {padding:0 0 0;} /* 수업료 테이블 */ [class^="tuition_tb"] .th_bg th {color:#fff; background:#5686E1;} [class^="tuition_tb"] td {border-bottom:1px solid #E0E0E0; border-right:1px solid #E0E0E0; background:#fff;} .tuition_tb_pc .th_bg th {padding:16px 0; border-right:1px solid #7EA1E2; line-height:1.6;} .tuition_tb_pc .th_bg th:last-child {border-right:0; border-bottom:1px solid #B8C9ED} .tuition_tb_pc tbody th {border-right:1px solid #B8C9ED; border-bottom:1px solid #B8C9ED; background:#DFE6F4;} .tuition_tb_pc tbody tr td {padding:22px 10px; text-align:center; font-weight:700;} .tuition_tb_pc tbody tr td:last-of-type {border-right:0;} .tuition_tb_pc tbody tr td .price p {margin-bottom:10px; color:#888; text-decoration:line-through; line-height:1;} .tuition_tb_pc tbody tr td .price strong {display:block; font-size:25px; line-height:1;} .tuition_tb_pc .discount {font-size:24px; line-height:1.4;} .tuition_tb_pc .discount span {font-size:16px;} .tuition_mo_banner {display:none; padding:30px 20px; margin-bottom:16px; color:#fff; text-align:center; background:#F29059;} .tuition_mo_banner strong {display:block; margin-bottom:8px; font-size:24px; line-height:1.2;} .tuition_mo_banner p {font-size:14px; line-height:1.4;} .tuition_mo_banner .tag_txt {margin-top:8px;} .tuition_mo_banner .tag_txt p:before {content:'#'; margin-right:2px;} .tuition_mo_banner .tag_txt p {display:block; color:#fff; font-size:12px; line-height:1.4;} .tuition_tb_mo {display:none;} .tuition_tb_mo th, .tuition_tb_mo td {padding:20px; border-bottom:10px solid #F4F4F4;} .tuition_tb_mo th {padding:0 14px; text-align:left;} .tuition_tb_mo th span {font-weight:400;} .tuition_tb_mo td {border-right:0;} .tuition_tb_mo .dt_li + .dt_li {border-top:1px dashed #888; margin-top:23px; padding-top:23px;} .tuition_tb_mo .dt_li .tag {display:block; width:100%; padding:4px 0; margin-bottom:9px; color:#fff; font-size:14px; text-align:center; border-radius:50px; background:#60B05F;} .tuition_tb_mo .dt_li .tag.bg25 {background:#51C0EE;} .tuition_tb_mo .dt_li .tag.bg30 {background:#F29059;} .tuition_tb_mo .dt_li .dt_price_txt {display:flex; justify-content:space-between; font-weight:700; align-items:center; text-align:right;} .tuition_tb_mo .dt_li .dt_price_txt > p {font-size:14px;} .tuition_tb_mo .dt_li .dt_price_txt .price .discount {display:inline-block; position:relative; top:1px; margin-right:6px; color:#888; font-size:14px; vertical-align:middle; text-decoration:line-through} .tuition_tb_mo .dt_li .dt_price_txt .price strong {font-size:20px; vertical-align:middle;} /*** 학습과정 공통 ***/ .color_txtbox {position:relative; padding:40px 50px 40px 283px; border:1px solid #E0E0E0; border-radius:12px; overflow:hidden;} .color_txtbox:before {content:''; position:absolute; z-index:1; top:0; left:0; width:233px; height:100%; background-image:url(../img/ico/ico_book01.svg); background-color:#CEB5F5; background-repeat:no-repeat; background-position:center; background-size:100%;} .color_txtbox .tit {display:block; margin-bottom:16px; color:#7B4DC3; font-size:24px; line-height:1.6;} .color_txtbox > p {color:#555; line-height:1.6;} .color_txtbox.type02:before {background-color:#61BBE5; background-image:url(../img/ico/ico_book02.svg);} .color_txtbox.type02 .tit {color:#61BBE5;} /* 그라디언트 배너 */ .banner_con {padding:180px 0;} .banner_con.pd {padding:240px 0 180px;} .gradient_banner:before {content:''; position:absolute; z-index:-1; bottom:26px; right:87px; width:365px; height:411px; background-image:url(../img/bg/bg_gra_bn01.png); background-size:100%; background-repeat:no-repeat;} .gradient_banner {position:relative; z-index:4; padding:70px 170px; border-radius:40px; background:linear-gradient(121.2deg, #A195FF 27.75%, #C0B8FF 90.82%);} .gradient_banner h3 {color:#fff; font-size:28px; font-weight:700; line-height:1.4;} .gradient_banner .grace_btn {width:250px; padding:12px 0; margin-top:24px; margin-left:0; color:#333; font-size:14px; background:#fff;} .gradient_banner .grace_btn.ico:after {background-image:url(../img/ico/ico_arw_r_pup.svg);} .gradient_banner.bg_type02:before {bottom:0; right:132px; width:302px; height:302px; background-image:url(../img/bg/bg_gra_bn02.png);} .gradient_banner.bg_type03:before {bottom:0; right:11px; width:421px; height:387px; background-image:url(../img/bg/bg_gra_bn03.png);} /* 어떻게 진행되나요? */ .about_process {padding:180px 0;} .about_process.red_ft .comon_tit > span {color:#E7A495;} .about_process .detail [class^="dt_"] {position:relative; padding:70px 60px 0; border-radius:30px 30px 0px 0px; overflow:hidden;} .about_process .detail [class^="dt_"] + [class^="dt_"] {margin-top:140px;} .about_process .detail [class^="dt_"] .top_tit {padding-left:40px; margin-bottom:54px; color:#fff;} .about_process .detail [class^="dt_"] .top_tit > strong {display:block; margin-bottom:13px; font-size:24px; line-height:1.4;} .about_process .detail [class^="dt_"] .top_tit > p {font-size:20px; line-height:1.6;} .about_process .detail [class^="dt_"] .con:after {content:''; position:absolute; z-index:1; top:-189px; right:62px; width:156px; height:156px; background-size:100%; background-repeat:no-repeat; background-position:center;} .about_process .detail [class^="dt_"] .con {position:relative; padding:70px 50px; border-radius:20px 20px 0px 0px; background:#fff;} .about_process .detail [class^="dt_"] .con .txt {color:#555; font-size:18px; font-weight:700; text-align:center;} .about_process .detail [class^="dt_"] .txt_li {margin-bottom:32px;} .about_process .detail [class^="dt_"] .txt_li p:before {content:''; position:absolute; z-index:1; top:3px; left:0; width:24px; height:24px; border-radius:24px; background:#61BBE5 url(../img/ico/ico_check_li.svg) no-repeat center;} .about_process .detail [class^="dt_"] .txt_li p {position:relative; padding-left:36px; color:#555; font-size:20px; line-height:1.4;} .about_process .detail [class^="dt_"] .txt_li p + p {margin-top:12px;} .about_process .detail [class^="dt_"] .con ul {display:flex; margin:0 -10px; justify-content:center;} .about_process .detail [class^="dt_"] .con ul li {margin:0 10px; text-align:center;} .about_process .detail [class^="dt_"] .con ul li .thumb {width:100%; overflow:hidden;} .about_process .detail [class^="dt_"] .con ul li .thumb img {width:100%;} .about_process .detail [class^="dt_"] .con video {width:100%; max-width:100%;} .about_process .detail .dt_preview .con:after {background-image:url(../img/ico/ico_pro_ico01.svg);} .about_process .detail .dt_preview {background:#53C6BF;} .about_process .detail .dt_preview .con ol {counter-reset:step; text-align:center;} .about_process .detail .dt_preview .con ol li {display:inline-block; margin:0 35px 30px;} .about_process .detail .dt_preview .con ol li .tag:before {border-radius:20px; content:"STEP " counter(step)"."; margin-right:4px; counter-increment:step;} .about_process .detail .dt_preview .con ol li .tag {display:inline-block; padding:10px 28px; margin-bottom:14px; color:#fff; font-weight:700; font-family:'Montserrat'; line-height:1.4; border-radius:20px;} .about_process .detail .dt_preview .con ol li .thumb {width:240px; height:135px; margin-bottom:30px; border-width:6px; border-radius:10px; border-style:solid; overflow:hidden;} .about_process .detail .dt_preview .con ol li .thumb img {width:100%;} .about_process .detail .dt_preview .con ol li .txt {font-size:20px; line-height:1.4; font-weight:400;} .about_process .detail .dt_preview .con ol .step01 .tag{background:#E28F47;} .about_process .detail .dt_preview .con ol .step01 .thumb {border-color:#E28F47;} .about_process .detail .dt_preview .con ol .step02 .tag {background:#E35042;} .about_process .detail .dt_preview .con ol .step02 .thumb {border-color:#E35042;} .about_process .detail .dt_preview .con ol .step03 .tag {background:#E9476C;} .about_process .detail .dt_preview .con ol .step03 .thumb {border-color:#E9476C;} .about_process .detail .dt_preview .con ol .step04 .tag {background:#904C84;} .about_process .detail .dt_preview .con ol .step04 .thumb {border-color:#904C84;} .about_process .detail .dt_preview .con ol .step05 .tag {background:#5477A7;} .about_process .detail .dt_preview .con ol .step05 .thumb {border-color:#5477A7;} .about_process .detail .dt_preview .con .bookimg_li li {width:170px; height:224px; margin:0 5px;} .about_process .detail .dt_preview .con .bookimg_li li img {width:100%;} .about_process .detail .dt_preview .con .bookimg_combi {width:658px; margin:0 auto; overflow:hidden;} .about_process .detail .dt_preview .con .bookimg_combi img {width:100%;} .about_process .detail .dt_preview .con .bookimg_li_mo {display:none; max-width:282px; margin:0 auto;} .about_process .detail .dt_class .con:after {background-image:url(../img/ico/ico_pro_ico02.svg);} .about_process .detail .dt_class {background:#95A2E7;} .about_process .detail .dt_class .con ul li {width:280px;} .about_process .detail .dt_class .con ul li .thumb {height:160px; margin-bottom:24px;} .about_process .detail .dt_review .con:after {top:-199px; background-image:url(../img/ico/ico_pro_ico03.svg);} .about_process .detail .dt_review {background:#61BBE5;} .about_process .detail .dt_review .con ul {margin-bottom:24px;} .about_process .detail .dt_review .con ul li {width:370px; background:#000;} .course_step {margin-bottom:100px; text-align:center; counter-reset:step;} .course_step li {display:inline-block; position:relative; margin-right:72px; text-align:center; vertical-align:top;} .course_step li:last-child {margin-right:0;} .course_step li > div {position:relative; width:166px; height:166px; border-radius:50%; background:#fff;} .course_step li > div:after {content:''; position:absolute; z-index:1; top:50%; right:-54px; width:36px; height:36px; background-image:url(../img/ico/ico_course_arw.svg); background-repeat:no-repeat; background-position:center; background-size:100%; transform:translateY(-50%);} .course_step li.step03 > div:after, .course_step li:last-child > div:after {display:none;} .course_step li > div strong:before {display:block; color:#E7A495; font-size:16px; margin-bottom:12px; content:"STEP " counter(step,decimal-leading-zero); counter-increment:step; line-height:1.4;} .course_step li > div strong {position:absolute; top:50%; left:0; width:100%; color:#6F5049; font-size:22px; line-height:1.4; transform:translateY(-50%);} .course_step li > p {margin-top:20px; color:#555; line-height:1.4;} .course_step li.big:before {content:''; position:absolute; z-index:1; top:50%; left:-50px; width:24px; height:24px; background-image:url(../img/ico/ico_course_plus.svg); background-repeat:no-repeat; background-position:center; background-size:100%; transform:translateY(-50%);} .course_step li.big > div:before {content:''; position:absolute; z-index:1; top:50%; left:50%; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:50%; border:1px dashed #fff; transform:translate(-50%,-50%);} .course_step li.big > div:after {top:calc(50% - 30px);} .course_step li.big > div {width:234px; height:234px; background:#E78E7B;} .course_step li.big > div strong:before {margin-bottom:10px; color:#F3F3F3; font-size:16px;} .course_step li.big > div strong {display:block; color:#F3F3F3; font-size:22px;} .course_step.type_blue li > div:after {background-image:url(../img/ico/ico_course_arw_b.svg);} .course_step.type_blue li > div strong:before {color:#61BBE5;} .course_step.type_blue li > div strong {color:#333;} .course_step.type_blue li.big:before {background-image:url(../img/ico/ico_course_plus_b.svg);} .course_step.type_blue li.big > div {background:#61BBE5;} .course_step.type_blue li.big > div strong:before {color:#fff;} .course_step.type_blue li.big > div strong {color:#fff;} /* 엄마 후기 */ .moms_review:before {content:''; position:absolute; z-index:-1; top:0; left:0; width:100%; height:480px; background: #F7ECE9;} .moms_review {position:relative; padding:186px 0 0; margin-bottom:-166px;} .moms_review > div {display:flex;} .moms_review .comon_tit {width:600px; padding-bottom:0; flex-shrink:0; text-align:left;} .moms_review .comon_tit > span {color:#E7A495;} .moms_review .review_swiper_sub {position:relative; top:-86px; left:50%; padding:20px; margin-top:-20px; margin-left:-620px; padding-right:400px; overflow:hidden;} .moms_review .review_swiper_sub .swiper-slide {position:relative; width:560px; padding:78px 60px 78px 72px; box-shadow:0px 4px 10px rgba(99,99,99,.2); border-radius:20px; background:#fff;} .moms_review .review_swiper_sub .writer {margin-bottom:48px;} .moms_review .review_swiper_sub .writer strong {font-size:20px; line-height:1;} .moms_review .review_swiper_sub .writer p {margin-top:12px; color:#555; line-height:1;} .moms_review .review_swiper_sub .stars {position:absolute; z-index:1; top:75px; right:63px; text-align:right;} .moms_review .review_swiper_sub .stars p {display:inline-block;} .moms_review .review_swiper_sub .tit {font-size:24px; line-height:1.4;} .moms_review .review_swiper_sub .txt {display:-webkit-box; height:128px; margin-top:24px; color:#555; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:5; -webkit-box-orient:vertical; line-height:1.6;} .moms_review .slide_btn {position:absolute; z-index:1; bottom:116px; left:50%; margin-left:-600px;} .moms_review .slide_btn .swiper-button-prev, .moms_review .slide_btn .swiper-button-next {display:inline-block; position:static; margin-top:0; width:100px; height:100px; border:0; box-shadow:0px 4px 20px rgba(0,0,0,.15); background-size:36px;} .moms_review .slide_btn .swiper-button-prev {margin-right:25px; background-image:url(../img/ico/ico_moms_prev.svg);} .moms_review .slide_btn .swiper-button-next {background-image:url(../img/ico/ico_moms_next.svg);} .moms_review .slide_btn .swiper-button-prev:hover, .moms_review .slide_btn .swiper-button-next:hover {background-color:#E7A495;} .moms_review .slide_btn .swiper-button-prev:hover {background-image:url(../img/ico/ico_moms_prev_on.svg);} .moms_review .slide_btn .swiper-button-next:hover {background-image:url(../img/ico/ico_moms_next_on.svg);} /* 이런 분들께 추천*/ .suggestion {padding:150px 0 165px; background:#E78E7B;} .suggestion ul {display:flex; padding:0 10px; margin:0 -10px; flex-wrap:wrap;} .suggestion ul li:before {content:''; position:absolute; z-index:1; top:50%; left:30px; width:80px; height:80px; transform:translateY(-50%); background-repeat:no-repeat; background-position:center; background-size:100%;} .suggestion ul li.face01:before {background-image:url(../img/pic/pic_face01.png);} .suggestion ul li.face02:before {background-image:url(../img/pic/pic_face02.png);} .suggestion ul li.face03:before {background-image:url(../img/pic/pic_face03.png);} .suggestion ul li.face04:before {background-image:url(../img/pic/pic_face04.png);} .suggestion ul li.face05:before {background-image:url(../img/pic/pic_face05.png);} .suggestion ul li.face06:before {background-image:url(../img/pic/pic_face06.png);} .suggestion ul li.face07:before {background-image:url(../img/pic/pic_face07.png);} .suggestion ul li.face08:before {background-image:url(../img/pic/pic_face08.png);} .suggestion ul li.face09:before {background-image:url(../img/pic/pic_face09.png);} .suggestion ul li.face10:before {background-image:url(../img/pic/pic_face10.png);} .suggestion ul li.face11:before {background-image:url(../img/pic/pic_face11.png);} .suggestion ul li.face12:before {background-image:url(../img/pic/pic_face12.png);} .suggestion ul li.face13:before {background-image:url(../img/pic/pic_face13.png);} .suggestion ul li.face14:before {background-image:url(../img/pic/pic_face14.png);} .suggestion ul li.face15:before {background-image:url(../img/pic/pic_face15.png);} .suggestion ul li.face16:before {background-image:url(../img/pic/pic_face16.png);} .suggestion ul li {display:flex; position:relative; width:calc(50% - 20px); min-height:128px; padding:35px 35px 35px 130px; margin:0 10px 20px; border-radius:20px; align-items:center; background:#FFF;} .suggestion ul li p {color:#555; font-size:18px; line-height:1.6;} /* 감동하시는 이유? */ .impression {padding:150px 0; background:#53C6BF;} .impression ul li {display:block; position:relative; width:100%; height:310px; padding-left:340px; border-radius:40px; background-color:#fff; background-size:216px; background-repeat:no-repeat; background-position:center left 84px;} .impression ul li + li {margin-top:30px;} .impression ul li .txt {position:relative; top:50%; transform:translateY(-50%);} .impression ul li .txt .tag:before {content:''; position:absolute; z-index:1; left:0; top:3px; width:2px; height:16px; line-height:1; background:#53C6BF;} .impression ul li .txt .tag {display:block; position:relative; padding-left:14px; margin-bottom:12px; color:#53C6BF; font-weight:700;} .impression ul li .txt .tit {display:block; font-size:24px; line-height:1.4;} .impression ul li .txt p {margin-top:16px; color:#555; font-size:18px; line-height:1.6;} .impression ul li.imp01 {background-image:url(../img/ico/ico_imp01.png);} .impression ul li.imp02 {background-image:url(../img/ico/ico_imp02.png);} .impression ul li.imp03 {background-image:url(../img/ico/ico_imp03.png);} .impression ul li.imp04 {background-image:url(../img/ico/ico_imp04.png);} /* 성공사례 슬라이드 */ .success_story {padding:180px 0;} .success_story .story_slide .swiper-slide {display:flex; width:1200px; padding:40px 100px 40px 40px; box-shadow:0px 4px 10px rgba(99,99,99,.2); background:#FFF;} .success_story .story_slide .thumb {width:400px; height:400px; overflow:hidden; flex-shrink:0;} .success_story .story_slide .thumb img {width:100%;} .success_story .story_slide .txt {padding-left:60px; padding-top:22px; flex:auto;} .success_story .story_slide .txt > span {display:block; margin-bottom:10px; color:#888; font-weight:700; font-size:16px; line-height:1.3;} .success_story .story_slide .txt .tit {color:#333; font-size:24px; line-height:1.4;} .success_story .story_slide .txt .txt_li {margin:20px 0 47px;} .success_story .story_slide .txt .txt_li p:before {content:''; position:absolute; z-index:1; top:0; left:0; width:24px; height:24px; border-radius:24px; background:#61BBE5 url(../img/ico/ico_check_li.svg) no-repeat center;} .success_story .story_slide .txt .txt_li p {position:relative; padding-left:40px; color:#555; line-height:1.5;} .success_story .story_slide .txt .txt_li p + p {margin-top:8px;} .success_story .story_slide .txt .result {width:100%; padding:32px 40px; background:#F2F5F7;} .success_story .story_slide .txt .result .tag {display:inline-block; padding:10px 20px; color:#fff; font-size:14px; line-height:1; border-radius:36px; background:#61BBE5;} .success_story .story_slide .txt .result p {margin-top:16px; color:#555; font-size:14px; line-height:1.6;} /* s : 학습과정 - 리딩게이트 */ .about_gate {padding-bottom:160px;} .about_gate .comon_tit > span {color:#7B4DC3;} .about_gate .color_txtbox {margin-top:160px;} .about_gate .first_con {padding-top:140px; text-align:center;} .about_gate .first_con .just_txt p {font-size:60px; font-family:'SBaggroB'; line-height:1.6; font-weight:700;} .about_gate .first_con .just_txt .t01 {color:#2BACA7;} .about_gate .first_con .just_txt .t02 {color:#3692CC;} .about_gate .first_con .just_txt .t03 {color:#1C2E5A;} .about_gate .first_con .deco_txt {margin-top:50px;} .about_gate .first_con .deco_txt p:before, .about_gate .first_con .deco_txt p:after {content:''; position:absolute; z-index:1; bottom:0; width:68px; height:129px; background-size:100%; background-repeat:no-repeat; background-position:center;} .about_gate .first_con .deco_txt p:before {left:0; background-image:url(../img/ico/ico_bf_first.svg);} .about_gate .first_con .deco_txt p:after {right:0; background-image:url(../img/ico/ico_af_first.svg);} .about_gate .first_con .deco_txt p {display:inline-block; position:relative; padding:0 87px 25px; margin:0 16px; color:#AD8A39; font-size:24px; line-height:1.4;} .about_gate .first_con .deco_txt p strong {display:block;} .youtube {position:relative; width:1200px; height:675px;} .youtube iframe {position:absolute; z-index:1; top:0; left:0; width:100%; height:100%;} /* 골든타임 */ .golden_time {padding:200px 0 160px; background:#E78E7B;} .golden_time .comon_tit.white > span {color:rgba(255,255,255,1);} .dialog_con {display:flex; align-items:flex-start; justify-content: space-between;} .dialog_con > div {position:relative;} .dialog_con > div:after {content:''; position:absolute; z-index:1; background-repeat:no-repeat; background-size:100%; background-position:center;} .dialog_con .dia_wrap01 {width:518px; flex-shrink:0;} .dialog_con .dia_wrap01:after {left:0; bottom:-530px; width:353px; height:394px; background-image:url(../img/bg/bg_dia_top.png);} .dialog_con .dia_wrap02 {flex:auto; padding-left:44px; margin-top:200px;} .dialog_con .dia_wrap02:after {top:-226px; right:40px; width:326px; height:273px; background-image:url(../img/bg/bg_dia_btm.png);} .dialog_con [class^="diabox_"]:after {content:''; position:absolute; z-index:1; background-repeat:no-repeat; background-size:100%; background-position:center;} .dialog_con [class^="diabox_"] {position:relative; width:100%; border-radius:40px; box-shadow:0px 4px 20px rgba(23, 105, 151, 0.24); background:#fff;} .dialog_con [class^="diabox_"] p {color:#555; font-size:20px; line-height:1.6;} .dialog_con [class^="diabox_"] p + p {margin-top:32px;} .dialog_con .diabox_top {padding:43px 20px 40px 160px; background-image:url(../img/ico/ico_face_ip.png); background-repeat:no-repeat; background-position:center left 48px; background-size:72px;} .dialog_con .diabox_top:after {width:43px; height:23px; bottom:-20px; left:48px; background-image:url(../img/ico/ico_dialog_deco01.svg);} .dialog_con .diabox_btm {padding:60px 80px 60px 60px;} .dialog_con .diabox_btm:after {width:43px; height:24px; bottom:-22px; right:80px; background-image:url(../img/ico/ico_dialog_deco02.svg);} .gate_reason {padding:180px 0;} .gate_reason .comon_tit > span {color:#53C6BF;} .gate_reason .con_li {display:flex; margin:0 -20px;} .gate_reason .con_li + .con_li {margin-top:80px;} .gate_reason .con_li > div {flex:1; margin:0 20px;} .gate_reason .con_li .thumb {width:100%; height:290px; margin-bottom:38px; border-radius:20px; overflow:hidden;} .gate_reason .con_li .thumb img {width:100%;} .gate_reason .con_li .txt {/* padding-left:20px; */} .gate_reason .con_li .txt strong {display:block; margin-bottom:18px; font-size:24px; line-height:1.3;} .gate_reason .con_li .txt p {color:#555; line-height:1.6;} .gate_reason .con_li .txt p + p {margin-top:26px;} .gate_reason .con_li.col3 .thumb {height:285px;} .gate_reason .con_li .hash_txt span:before {content:'#';} .gate_reason .con_li .hash_txt span {display:block; font-size:15px; font-weight:700;} .curriculum {padding:150px 0;} .curriculum .comon_tit > span {color:#53C6BF;} .curriculum .con {display:flex; padding-top:35px;} .curriculum .con > div:before {display:flex; position:absolute; z-index:1; top:-35px; left:50%; height:70px; padding:0 40px; font-size:24px; font-weight:700; border-radius:58px; border:6px solid #53C6BF; line-height:70px; background:#FFF; transform:translateX(-50%);} .curriculum .con > div {position:relative; flex:1; padding:90px 100px; text-align:center; border-radius:40px;} .curriculum .con > div:last-child p:after {display:none;} .curriculum .con > div p {position:relative; padding-bottom:20px; color:#555; font-size:30px; font-weight:700; line-height:1.6; border-bottom:1px dashed #CCC;} .curriculum .con > div p:after {content:''; position:absolute; z-index:1; top:0; right:-136px; width:62px; height:62px; border-radius:50%; border:4px solid #53C6BF; box-shadow:0px 4px 4px rgba(0,0,0,.1); background:#fff url(../img/ico/ico_curr_arw.svg) no-repeat center; background-size:12px;} .curriculum .con > div p + p {margin-top:22px;} .curriculum .con .reading:before {content:'Reading';} .curriculum .con .reading {background:#FFF;} .curriculum .con .speaking:before {content:'Speaking';} .curriculum .con .speaking {background:#53C6BE;} .curriculum .con .speaking p {color:#fff;} .en_library {padding:180px 0;} .en_library .comon_tit > span {color:#E78E7B;} .en_library .comon_tit .sub_tit.md {margin-top:16px;} .en_library .library > div {display:flex; width:100%; height:340px; border:6px solid #E78E7B;} .en_library .library > div + div {margin-top:40px;} .en_library .library .txt .dt_ico01:before {background-image:url(../img/ico/ico_dt_ico01_r.svg)} .en_library .library .txt .dt_ico02:before {background-image:url(../img/ico/ico_dt_ico02_r.svg)} .en_library .library .txt .dt_ico03:before {background-image:url(../img/ico/ico_dt_ico03_r.svg)} .en_library .library .mint {border-color:#53C6BF;} .en_library .library .mint .txt {background:#53C6BF;} .en_library .library .mint .txt .dt_ico01:before {background-image:url(../img/ico/ico_dt_ico01_m.svg)} .en_library .library .mint .txt .dt_ico02:before {background-image:url(../img/ico/ico_dt_ico02_m.svg)} .en_library .library .mint .txt .dt_ico03:before {background-image:url(../img/ico/ico_dt_ico03_m.svg)} .en_library .library .purple {border-color:#95A2E7;} .en_library .library .purple .txt {background:#95A2E7;} .en_library .library .purple .txt .dt_ico01:before {background-image:url(../img/ico/ico_dt_ico01_p.svg)} .en_library .library .purple .txt .dt_ico02:before {background-image:url(../img/ico/ico_dt_ico02_p.svg)} .en_library .library .purple .txt .dt_ico03:before {background-image:url(../img/ico/ico_dt_ico03_p.svg)} .en_library .library .skyblue {border-color:#61BBE5;} .en_library .library .skyblue .txt {background:#61BBE5;} .en_library .library .skyblue .txt .dt_ico01:before {background-image:url(../img/ico/ico_dt_ico01_s.svg)} .en_library .library .skyblue .txt .dt_ico02:before {background-image:url(../img/ico/ico_dt_ico02_s.svg)} .en_library .library .skyblue .txt .dt_ico03:before {background-image:url(../img/ico/ico_dt_ico03_s.svg)} .en_library .library .book_slide {position:relative; width:580px; flex-shrink:0; overflow:hidden;} .en_library .library .book_slide .slick-slide {width:100%; height:340px;} .en_library .library .book_slide .slick-slide .book {position:relative; top:50%; left:50%; width:300px; transform:translate(-50%,-50%);} .en_library .library .book_slide .slick-slide .book img {width:100%;} .en_library .library .txt {padding-left:100px; flex:auto; background:#E78E7B;} .en_library .library .txt dl {position:relative; top:50%; color:#fff; font-size:18px; transform:translateY(-50%);} .en_library .library .txt dl dt:before {content:''; display:inline-block; position:relative; top:-4px; width:32px; height:32px; margin-right:16px; border-radius:50%; vertical-align:top; background-color:#fff; background-repeat:no-repeat; background-size:100%;} .en_library .library .txt dl dt {float:left; position:relative; margin-top:3px; font-weight:700;} .en_library .library .txt dl dd {padding-left:154px; padding-bottom:28px; line-height:1.6;} .en_library .library .txt dl dd:last-of-type {padding-bottom:0;} .en_library .library .txt dl dd:after {content:''; display:block; clear:both;} /* e : 학습과정 - 리딩게이트 */ /* s : 학습과정 - 논픽션 */ .about_nonfiction {padding-bottom:105px;} .reading_book {padding:150px 0;} .reading_book .book_li {padding:80px 150px 80px 130px; background:#fff;} .reading_book .book_li > div {display:flex; align-items:center;} .reading_book .book_li > div + div {margin-top:60px;} .reading_book .book_li .book {width:287px; margin-right:102px; flex-shrink:0;} .reading_book .book_li .book img {display:block; width:212px; margin:0 auto;} .reading_book .book_li .book_info {flex:auto;} .reading_book .book_li .book_info li {padding:14px 0; font-size:15px; border-bottom:1px solid #E0E0E0;} .reading_book .book_li .book_info .txt_li p:before, .reading_book .book_li .book_info li > strong:before {content:''; position:absolute; z-index:1; top:9px; left:0; width:4px; height:4px; border-radius:50%; background:#51C0EE;} .reading_book .book_li .book_info li > strong {position:relative; padding-left:14px; margin-right:10px;} .reading_book .book_li .book_info li > p {display:inline-block;} .reading_book .book_li .book_info .txt_li {padding:14px 0 22px;} .reading_book .book_li .book_info .txt_li p:before {top:8px;} .reading_book .book_li .book_info .txt_li p {display:block; position:relative; padding-left:14px; font-size:14px; line-height:1.4;} .reading_book .book_li .book_info .txt_li p + p {margin-top:10px;} .reading_book .book_li .book_wd01 .book img {width:100%;} .reading_book .book_li .book_wd02 .book img {width:230px;} /* 영어 원서 */ .about_application {padding-bottom:180px;} .about_application .application {width:1460px; border-radius:40px; margin:0 auto; background:#51C0EE;} .about_application .application .dialog_con {padding:98px 130px 125px;} .about_application .application .dialog_con .dia_wrap01:after {left:0; bottom:-458px; width:432px; height:255px; background-image: url(../img/bg/bg_dia_top02.png);} .about_application .application .dialog_con .dia_wrap02:after {top:-133px; right:0; width:344px; height:73px; background-image: url(../img/ico/ico_w_logo.svg);} .about_application .application .diabox_top {padding:56px 0px 60px 132px; background-image:url(../img/ico/ico_face_ip02.png); background-position:center left 40px;} /* ‘맞춤형’ 원서 */ .level_tabwrap {padding:150px 0 162px;} .level_tabwrap .level_tab {display:flex; margin:0 -10px 60px;} .level_tabwrap .level_tab li {flex:1; padding:20px 0; margin:0 10px; text-align:center; font-weight:700; text-align:center; border: 1px solid #E0E0E0; border-radius: 10px; background:#FFFFFF;} .level_tabwrap .level_tab li.on {color:#fff; border:1px solid #61BBE5; background: #61BBE5;} .level_tabcon .tit {display:block; padding-bottom:40px; margin-bottom:40px; font-size:24px; line-height:1.4; border-bottom:1px solid #E0E0E0;} .level_tabcon .level_slide {position:relative; width:calc(100% + 30px);} .level_tabcon .level_slide .swiper-slide {display:flex; margin:0 -15px;} .level_tabcon .level_slide .swiper-slide .item {width:calc(33.33% - 30px); margin:0 15px 40px; text-align:center;} .level_tabcon .level_slide .swiper-slide .item .img {width:100%; height:200px; overflow:hidden;} .level_tabcon .level_slide .swiper-slide .item .img img {width:100%;} .level_tabcon .level_slide .swiper-slide .item > p {margin-top:24px; line-height:1.4; font-weight:700;} .level_tabcon .swiper-pagination {position:static; display:none;} .level_tabcon .swiper-pagination-bullet {width:12px; height:12px; margin:0 4.5px; opacity:1; background:#D9D9D9;} .level_tabcon .swiper-pagination-bullet-active {background:#61BBE5;} /* 게시판 */ .board_wrap {padding-top:100px;} /* 페이저 공통 */ .pg_wrap {padding:0; margin:80px 0 0;} .pg_page {color:#333; background:#F0F0F0;} .pg_current {color:#fff;} .pg_page, .pg_current {width:40px; height:40px; margin:0 2px !important; font-weight:700; line-height:40px !important; border-radius:4px;} .pg_end, .pg_next {width:auto !important;} .pg_start, .pg_prev {width:auto !important;} #bo_gall.teacher_list_table {width:900px; margin:0 auto;} #bo_gall.teacher_list_table .gall_li {float:none; padding:40px 40px 53px; border:0; margin:0; box-shadow:0px 4px 20px rgba(17, 57, 80, 0.15); background:#FFFFFF; box-shadow: 0px 4px 20px rgba(17, 57, 80, 0.15); border-radius:20px;} #bo_gall.teacher_list_table .gall_li + .gall_li {margin-top:50px;} #bo_gall.teacher_list_table .gall_con {display:flex;} #bo_gall.teacher_list_table .gall_con .gall_href {width:176px; flex-shrink:0;} #bo_gall.teacher_list_table .gall_con .gall_href .thumb_tch {width:100%; height:176px; margin-bottom:24px; border-radius:10px; overflow:hidden;} #bo_gall.teacher_list_table .gall_con .gall_href .thumb a {display:block; width:100%; height:100%;} #bo_gall.teacher_list_table .gall_con .gall_href img {width:100%;} #bo_gall.teacher_list_table .gall_con .gall_text_box {padding-left:32px;} #bo_gall.teacher_list_table .gall_con dl dt:before {content:''; position:absolute; z-index:1; top:8px; left:0; width:4px; height:4px; border-radius:50%; background:#51C0EE;} #bo_gall.teacher_list_table .gall_con dl dt {float:left; position:relative; padding-left:12px; font-weight:700;} #bo_gall.teacher_list_table .gall_con dl dd:after {content:''; display:block; clear:both;} #bo_gall.teacher_list_table .gall_con dl dd {padding-left:58px; padding-bottom:10px; font-size:14px;} /* 그레이스 게시판 공통 테이블 */ .grace_table thead th {padding:12px 0; color:#11B2E1; text-align:center; border-top:1px solid #11B2E1; border-bottom:1px solid #11B2E1;} .grace_table thead th a {color:#11B2E1;} .grace_table thead td {border-bottom:1px solid #11B2E1;} .grace_table tbody td {padding:12px 0; border-bottom:1px solid #D1D1D1;} .grace_dt_style {border-top:1px solid #e9e9e9;} .grace_dt_style li {border-bottom:1px solid #e9e9e9;} .grace_dt_style li {display:flex;} .grace_dt_style li > div {width:33.33%;} .grace_dt_style li .dl {display:flex; word-break:break-word; align-items:center;} .grace_dt_style li .dl p {padding:10px 0;} .grace_dt_style li .dt {padding-left:10px; padding-right:10px; width:30%; font-weight:700;} .grace_dt_style li .dd {width:70%;} /* 게시판 - 우수수강후기 */ .best_review .td_subject .num {display:inline-block; width:55px; text-align:center;} .best_review .td_subject a {display:inline-block; max-width:calc(100% - 74px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* 게시판 - 자주하는 질문 */ .grace_faq h3 {position:relative; padding-left:44px;} .grace_faq h3:before {content:'Q'; position:absolute; z-index:1; top:50%; left:20px;; color:#11B2E1; font-weight:700; transform:translateY(-50%);} .grace_faq .accordion {border-top:1px solid #11B2E1;} /* 회원가입 */ .member_join #fregister textarea {margin:0; width:100%;} /* 마이페이지 - 스케줄관리 */ .grace_mypage {margin-top:50px;} .grace_mypage #cmb_my_ov h2, .grace_mypage #cmb_my_od h2, .grace_mypage #cmb_my_charge h2, .grace_mypage #cmb_my_wish h2 {margin-bottom:16px; color:#333; font-size:16px; font-weight:700;} .grace_mypage #cmb_my_ov dl {border-top:1px solid #e9e9e9; border:0; background:#fff;} .grace_mypage #cmb_my_act {text-align:right;} .grace_mypage #cmb_my_act ul {float:none;} .grace_mypage #cmb_my_act ul li {float:none;} .schedule_btn {padding:0 80px;} /* 달력 공통 */ .ui-datepicker {padding:0; box-shadow:0px 4px 20px rgba(0,0,0,.1); font-family:"spoqa"; background:#FFF;} .ui-widget.ui-widget-content {padding:0 20px 20px; border:0;} .ui-datepicker .ui-datepicker-title {display:flex; width:100%; justify-content:center; margin:0; line-height:1;} .ui-datepicker .ui-datepicker-title select {margin: 0 8px;} .ui-datepicker .ui-datepicker-header {display:flex; height:60px; padding:0; margin-bottom:10px; align-items:center;} .ui-widget-header {border:0; border-radius:0; background:transparent;} .ui-datepicker .ui-datepicker-prev {left:-20px; background-image:url(../img/ico/ico_date_prev.svg)} .ui-datepicker .ui-datepicker-next {right:-20px; background-image:url(../img/ico/ico_date_next.svg);} .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top:0; width:60px; height:100%; border-radius:0; background-color:#CCC; background-repeat:no-repeat; background-position:center; cursor:pointer; background-size:100%;} .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover {background-color:#333;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width:auto; font-size:16px; padding:0; border:0; font-size:16px; font-weight:700; font-family:"spoqa"; background:transparent url(../img/ico/ico_date_arw.svg) no-repeat center right; background-size:16px;} .ui-datepicker select.ui-datepicker-year {width:62px;} .ui-datepicker select.ui-datepicker-month {width:50px;} .ui-datepicker table {font-size:13px;} .ui-datepicker td span, .ui-datepicker td a {text-align:center;} /* 그레이스 칼럼 */ .galler_list {border-top:1px solid #11B2E1;} .galler_list li a {display:flex; padding:20px 0;} .galler_list li + li {border-top:1px solid #D1D1D1;} .galler_list li .txt {flex:auto; padding-right:20px; font-family: "spoqa";} .galler_list li .txt .tit {margin-bottom:16px; font-size:24px; font-weight:700;} .galler_list li .txt p {font-size:18px; line-height:1.5;} .galler_list li .thumb {width:300px; flex-shrink:0;} /****************************************************************************************************************************************************************************************************************************/ @media all and (max-width:1800px){ #grace_header .hd_etc {top:-40px; right:44px;} } @media all and (max-width:1700px){ #grace_header > div.wrapper {width:auto; padding-left:60px; padding-right:60px;} #grace_header nav {position:static; right:0;} #grace_header .gnb > li > a {padding:30px 34px;} #grace_header .gnb > li:last-child > a {padding-right:0;} .philosophy ul li .con {padding-left:80px;} .philosophy ul li .con .txt p br {display:none;} .philosophy ul li .con .tit {font-size:30px;} .philosophy ul li:nth-child(even) .con {padding-left:80px;} } @media all and (max-width:1400px){ .visual .main_swipercon {width:700px; height:auto; margin-top:0; transform:translateY(-50%);} .visual .deco_con .txt {left:60px; margin-left:0; font-size:22px;} .review .rvw_btn {text-align:center;} .review .review_swiper_wrap .swiper-button-prev, .review .review_swiper_wrap .swiper-button-next {display:inline-block; position:static; top:0; margin:0 5px 40px; transform:inherit;} /* 서브 - 그레이스 잉글리시 차별점 */ [class^="differ0"] .top_bigtit {padding:80px 0 80px 70px;} [class^="differ0"] ol li {padding:50px 70px;} [class^="differ0"] ol li .q_txt {padding-right:20px;} .differ01 .top_bigtit {background-position:top 97px right 40px;} /* 서브 - 학습과정 : 리딩게이트 */ .about_gate .first_con .deco_txt {display:flex; flex-wrap:wrap; max-width:700px; padding:0 16px; margin:40px auto 0;} .about_gate .first_con .deco_txt p {width:calc(50% - 32px); padding:0 0 25px; margin:0 16px 30px;} } @media all and (max-width:1199px){ .pc_show {display:none;} .tb_show {display:block;} .wrapper {width:100%; padding-left:30px; padding-right:30px;} .comon_tit > span {font-size:18px;} .comon_tit h3 {font-size:34px;} .grace_btn.big {padding:24px 80px; font-size:20px;} #grace_header > div.wrapper {padding-left:30px; padding-right:30px;} #grace_header h1 {width:190px; height:56px;} #grace_header .hd_etc {right:14px;} #grace_header .hd_etc a {font-size:15px;} #grace_header .gnb > li > a {padding:30px 30px; font-size:16px;} #grace_header .submenu li a {font-size:15px;} #quick_menu ul {padding:6px 0;} footer .ft_top .sns {right:30px;} footer .ft_logo {display:block; width:100%; padding:0 0 30px !important; text-align:center; border-bottom:1px solid rgba(255,255,255,.12);} footer .ft_logo img {width:159px;} footer .ft_btm {padding:40px 0 50px;} footer .ft_btm .wrapper {padding:30px 30px 0;} footer .ft_btm .call_center {position:static; right:0; margin-right:0; transform:inherit;} /* 메인 */ .visual .main_swipercon {top:inherit; bottom:40px; transform:inherit;} .visual .deco_con {height:auto; padding:130px 0 400px 30px;} .visual .deco_con .txt {top:inherit; left:0; transform:inherit;} .m_txt_swiper .swiper-slide {padding:0 50px;} .m_txt_swiper .swiper-slide p {font-size:30px;} .m_txt_swiper .swiper-slide p:before {width:58px; height:46px;} .philosophy ul li {align-items:flex-start;} .philosophy ul li .con {padding-left:40px;} .philosophy ul li .con .tit {font-size:26px;} .philosophy ul li .con .txt p {font-size:17px;} .philosophy ul li:nth-child(even) .con {padding-left:40px;} .review .review_swiper_wrap .review_swiper .thumb {height:auto;} .review .review_swiper_wrap .review_swiper .con > strong {height:57px; font-size:18px;} .review .review_swiper_wrap .review_swiper .con > p br {display:none;} .review .grace_btn {margin-top:100px;} /* s: 1013 추가 */ .education .comon_tit .sub_tit2 {font-size:28px;} .education ul li p br {display:none;} /* e: 1013 추가 */ /* 메인 : 차별점 */ .difference .colorball_con {padding-top:0;} .colorball_con {display:block; width:calc(100% + 80px); margin:0 -40px; text-align:center;} .colorball_con > div {margin-right:0;} .colorball_con > div + div {margin-top:100px;} .colorball_con .left_ball [class^="ball"] {display:flex; flex-direction:column;} .colorball_con .left_ball [class^="ball"] > div {order:2; margin:0 auto;} .colorball_con .left_ball .ball > div:after {top:inherit; right:50%; bottom:-72px; margin-right:-21px; transform:inherit;} .colorball_con .left_ball .ball_txt {margin-bottom:8px; order:1;} .colorball_con .right_ball .line {display:inline-block;} .experience_bn {padding:100px 0;} .experience_bn .comon_tit h3 {font-size:36px;} .experience_bn.type_sub {padding:150px 0;} /*************** 서브시작 / 서브공통 ******************/ .sub_visual:after {right:0; margin-right:0; margin-top:0;} .sub_visual .txt > strong {font-size:26px;} .sub_visual .txt p {font-size:16px;} .sub_visual.class_review:after {margin-right:0; width:440px; height:330px;} .sub_visual.is_board:after {bottom:-10px; margin-right:0; width:294px; height:271px;} .color_blue .sub_visual:after {margin-right:0; top:inherit; bottom:-10px; width:280px; height:178px;} .color_green .sub_visual:after {bottom:-136px; margin-right:0; width:330px; height:377px;} .color_og .sub_visual:after {margin-right:0; width:349px; height:250px;} .color_grapurple .sub_visual:after {bottom:0; margin-right:10px; width:343px; height:208px;} .color_graog .sub_visual:after {bottom:10px; margin-right:10px; width:350px; height:201px;} .color_grablue .sub_visual:after {bottom:10px; right:0; margin-right:10px; width:383px; height:180px;} .intro01_page .sub_visual:after {width:368px; height:330px;} /* 서브 - 교육철학 */ [class^="info_sec"] .img {width:40%; margin-right:60px;} [class^="info_sec"] .info_txt {width:60%;} [class^="info_sec"] .info_txt .tit {font-size:28px;} [class^="info_sec"] .info_txt .con p {font-size:16px;} [class^="info_sec"] .info_txt .con p br {display:none;} .info_sec02:before {top:89px; right:-20px; width:350px; height:363px; margin-right:0;} .info_sec02 .info_txt {width:80%;} .differ_color .right_ball .top_deco {display:none;} .differ_color .ball_txt {display:block;} .differ_color [class^="ball_ico0"]:before {display:none;} [class^="differ0"] {padding:0 30px;} [class^="differ0"] ol li .q_txt br {display:none;} [class^="differ0"] ol li .a_txt p br {display:none;} [class^="differ0"] .top_bigtit h3 {font-size:28px;} [class^="differ0"] .top_bigtit .sub_tit:before {top:4px;} [class^="differ0"] .top_bigtit .sub_tit {font-size:17px;} .differ01 .top_bigtit {background-position:bottom 10px right 20px; background-size:350px;} .differ03 .top_bigtit {background-size:480px;} /* 서브 - 강사소개 */ .flex_col3 li > strong {font-size:20px;} .flex_col3 li > p br {display:none;} .sincerity {padding-bottom:140px;} .sincerity ul li {padding:130px 10px 20px; background-size:80px;} .sincerity ul li.sin01 {background-size:90px;} .sincerity ul li.sin03 {background-size:112px;} .direct_active li {padding:239px 20px 0; background-size:200px;} .direct_active li.direc01 {background-size:230px;} /* 잉글리시 강사 테이블 */ #bo_gall.teacher_list_table {width:100%;} #bo_gall.teacher_list_table .gall_con .gall_href .thumb_tch {height:auto; margin-bottom:16px;} .teacher_li {padding:0 0 140px;} /* 서브 - 수강안내 */ .guide_visual {padding:100px 0 184px; text-align:center;} .guide_visual > div:after {display:none;} .guide_visual .gu_tit:after {content:''; display:block; width:322px; height:193px; margin:0 auto 40px; background:url(../img/bg/bg_guide_deco.png) no-repeat center; background-size:100%;} .guide_visual .gu_tit > p {font-size:38px;} .gudie_step {margin-top:-110px} .gudie_step li {padding:100px 0 25px; background-size:56px; background-position:center top 30px;} .gudie_step li strong:before {margin-bottom:10px; font-size:14px;} .gudie_step li strong {font-size:18px;} .apply_li {padding-top:20px;} .apply_li ol li {padding:30px;} .apply_li ol li .tit {font-size:22px;} .apply_li ol li .txt {font-size:16px;} .apply_li ol li .txt br {display:none;} .bkline_table td em {display:block; margin-left:0; margin-top:10px;} table .wd01 {width:30% !important;} table .wd02 {width:70% !important;} .process {padding:140px 0;} .process ol {position:relative; width:710px; left:50%; margin-left:-335px;} .process ol li:nth-child(3) {margin-left:-40px;} .member_join {width:auto;} .tuition_info {padding:140px 0;} .tuition_page .tuition_info {padding:0 30px 0;} /* 서브 - 학습과정 : 리딩게이트*/ .en_library {padding:140px 0;} .en_library .library .book_slide {width:50%;} .en_library .library .txt {padding:0 40px;} .en_library .library .txt dl dd {padding-left:140px;} .youtube {width:100%; height:auto; padding-top:56.25%;} .about_gate {padding-bottom:140px;} .about_gate .first_con .just_txt p {font-size:45px;} .moms_review:before {display:none;} .moms_review {padding:140px 0 98px; margin-bottom:0; background:#F7ECE9;} .moms_review > div {display:block; position:relative;} .moms_review .comon_tit {width:100%; margin-bottom:50px;} .moms_review .review_swiper_sub {top:0; left:0; padding:0; margin-left:0; margin-top:0; overflow:visible;} .moms_review .review_swiper_sub .swiper-slide {width:400px; padding:50px; margin-right:30px;} .moms_review .review_swiper_sub .stars {position:static; margin-bottom:24px;} .moms_review .review_swiper_sub .writer {margin-bottom:24px;} .moms_review .review_swiper_sub .writer strong {font-size:18px;} .moms_review .review_swiper_sub .writer p {font-size:14px;} .moms_review .review_swiper_sub .tit {font-size:22px;} .moms_review .review_swiper_sub .txt {margin-top:18px;} .moms_review .slide_btn {bottom:inherit; left:inherit; right:30px; top:0; margin-left:0;} .moms_review .slide_btn .swiper-button-prev, .moms_review .slide_btn .swiper-button-next {width:70px; height:70px; background-size:25px;} .moms_review .slide_btn .swiper-button-prev {margin-right:17px;} .gate_reason .con_li {margin:0 -10px;} .gate_reason .con_li > div {margin:0 10px;} .gate_reason .con_li .thumb {height:auto;} .gate_reason .con_li .txt strong {font-size:22px;} .gate_reason .con_li.col3 {margin-bottom:-80px;} .gate_reason .con_li.col3 .thumb {height:auto;} .gate_reason .con_li.col3 {flex-wrap:wrap;} .gate_reason .con_li.col3 > div {flex:inherit; width:calc(50% - 20px); margin-bottom:80px;} .curriculum .con {margin:0 -10px;} .curriculum .con > div {padding:70px 50px; margin:0 10px; border-radius:10px;} .curriculum .con > div p {padding-bottom:10px; font-size:24px;} .curriculum .con > div:before {top:-31px; height:50px; line-height:50px; font-size:20px;} .curriculum .con > div p:after {right:50%; width:50px; height:50px; margin-right:calc(-50% - 89px);} .banner_con {padding:140px 0 100px;} .banner_con.pd {padding:190px 0 100px;} .gradient_banner {padding:58px 70px;} .gradient_banner:before {right:30px; width:277px; height:311px;} .gradient_banner.bg_type02:before {right:30px; width:280px; height:308px;} .gradient_banner.bg_type03:before {right:0; width:358px; height:329px;} .suggestion {padding:140px 0;} .suggestion ul {padding:0;} .suggestion ul li {padding:25px 28px 25px 130px;} .suggestion ul li p {font-size:16px;} .suggestion ul li p br {display:none;} .success_story {padding:140px 30px;} .success_story .story_slide .swiper-slide {padding:20px;} .success_story .story_slide .thumb {width:280px; height:280px;} .success_story .story_slide .txt {padding-left:40px;} .success_story .story_slide .txt > span {font-size:14px;} .success_story .story_slide .txt .tit {font-size:21px;} .success_story .story_slide .txt .txt_li {margin:16px 0 26px;} .success_story .story_slide .txt .result {padding:27px 30px;} .success_story .story_slide .txt .result p br {display:none;} .impression {padding:130px 0;} .impression ul li {height:280px; padding-left:230px; padding-right:30px; background-size:150px; background-position:center left 40px;} .impression ul li .txt .tit {font-size:21px;} .impression ul li .txt .tag:before {height:13px;} .impression ul li .txt .tag {font-size:14px;} .impression ul li .txt p {font-size:16px;} .dialog_con [class^="diabox_"] {border-radius:20px;} .dialog_con [class^="diabox_"] p {font-size:18px;} .dialog_con [class^="diabox_"] p br {display:none;} .dialog_con .dia_wrap02 {padding-left:0;} .dialog_con .dia_wrap01:after {width:253px; height:282px;} .dialog_con .dia_wrap02:after {top:-176px; right:20px; width:250px; height:214px;} .about_application {padding-bottom:140px;} .about_application .application {width:calc(100% - 60px); padding:0; border-radius:10px;} .about_application .application .dialog_con {padding:90px 30px;} .about_application .application .dialog_con .dia_wrap02:after {width:276px; height:160px;} .about_application .application .dialog_con .dia_wrap01:after {width:270px; height:160px; margin-top:44px;} .about_process {padding:140px 0;} .about_process .detail [class^="dt_"] {padding:68px 40px 0;} .about_process .detail [class^="dt_"] + [class^="dt_"] {margin-top:50px;} .about_process .detail [class^="dt_"] .con:after {top:-156px; right:0;} .about_process .detail [class^="dt_"] .con {padding:50px 32px 60px;} .about_process .detail [class^="dt_"] .top_tit {padding-left:0; margin-bottom:45px;} .about_process .detail [class^="dt_"] .txt_li {text-align:center;} .about_process .detail [class^="dt_"] .txt_li p:before {position:static; display:inline-block; width:20px; height:20px; margin-right:8px; vertical-align:middle;} .about_process .detail [class^="dt_"] .txt_li p {padding-left:0; font-size:16px;} .about_process .detail .dt_preview .con .bookimg_li li {height:auto;} .about_process .detail .dt_review .con:after {top:-200px;} .about_process .detail .dt_class .con ul li .thumb {height:auto;} .course_step li {margin-bottom:27px;} .course_step li > p {margin-top:16px;} .course_step li > div strong:before {font-size:12px;} .course_step li > div strong {font-size:18px;} .course_step li.big > div {width:166px; height:166px;} .course_step li.big > div:after {top:50%;} .course_step li.big > div strong:before {font-size:12px;} .course_step li.big > div strong {font-size:18px;} .course_step li:last-child > div:before {content:''; position:absolute; z-index:1; top:50%; left:-43px; width:36px; height:36px; margin-top:-12px; background-size:100%;} .course_step.type_pink {width:414px; margin:0 auto 72px;} .course_step.type_pink li:nth-child(2n) > div:after {display:none;} .course_step.type_pink li:nth-child(2n) {margin-right:0;} .course_step.type_pink li:last-child > div:before {background-image:url(../img/ico/ico_course_arw.svg);} .reading_book .book_li {padding:80px 60px;} .reading_book .book_li .book {margin-right:30px;} .level_tabwrap {padding:140px 0;} .level_tabwrap .level_tab {margin:0 -5px 33px;} .level_tabwrap .level_tab li {padding:14px 0; margin:0 5px;} .level_tabcon .tit {padding-bottom:20px; font-size:22px;} .level_tabcon .level_slide .swiper-slide .item {margin:0 15px 16px;} .level_tabcon .level_slide .swiper-slide .item .img {height:auto;} .level_tabcon .level_slide .swiper-slide .item > p {margin-top:7px;} .galler_list li .txt .tit {font-size:22px;} .galler_list li .txt p {font-size:15px;} } @media all and (max-width:1024px){ #container {padding-top:90px;} .mb_hd {display:none;} .comon_tit h3 {font-size:30px;} .comon_tit .sub_tit {font-size:18px;} .comon_tit .sub_tit.type02 > span {font-size:20px;} #grace_header {padding:20px 0;} #grace_header h1 {width:160px; height:48px;} #grace_header h2 {display:block;} #grace_header nav {position:fixed; z-index:1; top:90px; right:0; width:100%; height:calc(100% - 90px); overflow-y:auto; padding-bottom:90px; background:#fff;} #grace_header .gnb > li {display:block; } #grace_header .gnb > li > a {padding:20px 30px; border-bottom:1px solid #E0E0E0;} #grace_header .submenu {display:block; position:static; left:0; width:100%; padding:0; text-align:left; box-shadow:none; border:0; border-radius:0; transform:inherit; border-top:1px solid #E0E0E0; background:#F4F4F4;} #grace_header .submenu li a {padding:12px 30px; color:#888; font-weight:400;} #grace_header .hd_etc {position:static; padding:0 30px; background:#4EBFF1;} #grace_header .hd_etc a {padding:18px 10px; color:#fff;} #grace_header .hd_etc a:after {display:none;} #grace_header .hd_etc .login:before {top:17px; background-image:url(../img/ico/ico_user_w.svg);} #quick_menu {display:none;position:fixed; bottom:0px;height:90px;width:100%; border-radius:0; transform:inherit; box-shadow:none;} #quick_menu ul {display:flex; padding:0; border-top:1px solid #F0F0F0;} #quick_menu ul li {flex:1; border-right:1px solid #F0F0F0;} #quick_menu ul li:last-child {border-right:0;} #quick_menu ul li a:before {width:36px; height:36px;} #quick_menu ul li a {padding:14px 0 4px;} #quick_menu ul li a strong {margin-top:8px;} #quick_menu .quick05 span {display:none;} #quick_menu .top_btn {display:none;} #quick_menu2 {display:block;position:fixed; bottom:0px;height:90px;width:100%; border-radius:0; transform:inherit; box-shadow:none;} #quick_menu2 ul {display:flex; padding:0; border-top:1px solid #F0F0F0;} #quick_menu2 ul li {flex:1; border-right:1px solid #F0F0F0;} #quick_menu2 ul li:last-child {border-right:0;} #quick_menu2 ul li a:before {width:36px; height:36px;} #quick_menu2 ul li a {padding:14px 0 4px;} #quick_menu2 ul li a strong {margin-top:8px;} #quick_menu2 .quick05 span {display:none;} #quick_menu2 .top_btn {display:none;} footer .ft_top {display:none;} /* 메인비주얼 */ .visual {padding:42px 30px; background:linear-gradient(113.86deg, #51C0EE 8.71%, #0D5186 89.78%); border-radius: 0px 0px 50px 0px;} .visual .deco_con:before {display:none;} .visual .main_swipercon:before {left:14.28%; top:12.09%; width:47%; height:39%;} .visual .main_swipercon {position:relative; bottom:0; width:100%;} .visual .main_swipercon .main_swiper {border-radius:24px;} .visual .deco_con {padding:24px 0 0;} .visual .deco_con .txt:before {display:none;} .visual .deco_con .txt h3:before {left:-40px; width:100%;} .visual .deco_con .txt h3 {position:relative; left:-30px; margin:9px 0 16px; padding-left:30px; font-size:28px;} .visual .deco_con .txt h3 strong {font-size:41px;} .visual .deco_con .txt p + p {margin-top:16px;} .visual .deco_con .txt .go_down { margin-top:48px; border:4px solid #F0F0F0;} .m_txt_swiper {padding-top:100px;} .m_txt_swiper .swiper-slide {padding:0 40px;} .m_txt_swiper .swiper-slide p:before {margin:0 auto 32px;} .m_txt_swiper .swiper-slide p {font-size:24px;} .m_txt_swiper .swiper-slide p br {display:none;} .m_txt_swiper .swiper-button-prev, .m_txt_swiper .swiper-button-next {display:none;} .m_txt_swiper .swiper-pagination {margin-top:32px;} .education {padding-top:140px;} .education .edu_line {max-width:500px;} .education .comon_tit .sub_tit2 {font-size:24px;} .education ul {margin:0;} .education ul li {width:100%; margin:0 0 100px;} .review {padding-top:140px;} .philosophy ul li.bf_img:before {top:-50px; width:500px; height:241px;} .philosophy ul li .con {padding-right:20px;} .philosophy ul li .con .tit {margin-bottom:16px; font-size:24px;} .philosophy ul li .con .tit.type02 {margin-bottom:16px;} .philosophy ul li .con .tit.type02 > strong {margin-bottom:16px;} .philosophy ul li .con .txt p {font-size:15px;} .philosophy ul li .con .txt p + p {margin-top:24px;} .colorball_con [class^="ball"] > div {width:200px; height:200px; font-size:17px;} .colorball_con .right_ball .ball02 {margin:0 -52px;} .colorball_con .ball_txt {font-size:16px;} .wonder_banner {margin-top:160px;} .wonder_banner .baner_wrap > div:after {right:-100px; bottom:0; width:500px; height:348px;} .wonder_banner .txt p {font-size:26px;} .subcon_wrap {padding-top:80px;} .board_wrap {padding-top:80px;} /* 서브 - 교육철학 */ [class^="info_sec"] .info_txt .con p + p {margin-top:22px;} .info_sec01 {display:block; padding:0 30px 100px;} .info_sec01 .img {width:327px; height:auto; margin-bottom:32px} .info_sec01 .info_txt {width:100%;} .info_sec02 .info_txt {width:80%;} .info_sec03 {padding-top:120px;} /* 서브 - 그레이스 잉글리시 차별점 */ [class^="differ0"] + [class^="differ0"] {padding-top:100px;} [class^="differ0"] ol li {padding:50px 0;} [class^="differ0"] ol li {display:block;} [class^="differ0"] ol li > * {width:100%;} [class^="differ0"] ol li .q_txt {margin-bottom:16px; padding-left:52px; padding-right:0; font-size:22px; line-height:1.3;} [class^="differ0"] ol li .q_txt:before {top:-3px; font-size:26px;} [class^="differ0"] ol li .a_txt p + p {margin-top:22px;} [class^="differ0"] .top_bigtit {padding:60px 30px 280px; text-align:center; background-position:bottom center;} [class^="differ0"] .top_bigtit .sub_tit {font-size:14px;} [class^="differ0"] .top_bigtit h3 {font-size:24px;} [class^="differ0"] .top_bigtit .sub_tit:before {display:none;} [class^="differ0"] .top_bigtit .tags {position:relative; left:calc(50% + 10px); width:524px; transform:translateX(-50%);} [class^="differ0"] .top_bigtit .tags span:first-child {margin-right:16px;} .differ02 .top_bigtit {padding:60px 30px 400px; background-image:url(../img/bg/bg_differ02_tb.png); background-size:1024px;} .differ03 .top_bigtit {padding:60px 30px 200px; background-size:400px; background-position:bottom right;} .faq .comon_tit {padding-bottom:60px;} .faq .faq_list li .tit {font-size:22px;} .faq .faq_list li .con {padding:40px 30px; font-size:16px;} .bkline_table {font-size:16px;} .bkline_table td input {width:100%; height:46px; padding:0 20px; font-size:16px;} .bkline_table td input::placeholder {font-size:16px;} .bkline_table td input.datepicker {padding:0 20px 0 50px; background-position:center left 20px;} .bkline_table td select {width:100%; height:46px; padding:0 20px; font-size:16px; background-position:center right 20px;} .bkline_table textarea {height:200px; padding:16px 20px;} .bkline_table td.in_check .comon_check {display:block; margin-right:0;} .bkline_table td.in_check .comon_check + .comon_check {margin-top:14px;} .bkline_table .time_select select {width:72px; background-position:center right 10px;} .bkline_table .time_select select ~ span {margin-left:5px; margin-right:10px;} .comon_check span {padding-left:25px; font-size:16px;} .comon_check input + i {top:5px; width:15px; height:15px;} .comon_check input:checked + i:after {width:8px; height:8px;} /* 서브 - 강사소개 */ .sincerity .comon_tit {padding-bottom:60px;} /* 그레이스 공통테이블 */ .grace_table .mo_hide {display:none;} .grace_table .best_th_wd01 {width:80% !important;} .grace_table .best_th_wd02 {width:20% !important;} .grace_table .noti_th_wd01 {width:60% !important;} .grace_table .noti_th_wd02 {width:20% !important;} .grace_table .noti_th_wd03 {width:20% !important;} .grace_mypage .grace_table {overflow-y:auto;} .grace_mypage .grace_table table {width:1100px;} .grace_mypage .grace_table table th {font-size:15px;} .tuition_tb_pc tbody tr td .price strong {font-size:22px;} .grace_dt_style li > div {width:100%;} .grace_dt_style li {display:block;} .grace_dt_style li .dl + .dl {border-top:1px solid #e9e9e9;} .grace_dt_style li .dt {padding-left:20px;} .schedule_btn {padding:0px;} .about_gate .color_txtbox {margin-top:130px;} .color_txtbox:before {width:180px;} .color_txtbox {padding:40px 50px 40px 230px;} .gate_reason {padding:140px 30px;} .gradient_banner h3 {font-size:24px;} .curriculum {padding:130px 0;} .curriculum .con {padding-top:26px;} .curriculum .con > div p {font-size:20px;} .curriculum .con > div:before {top:-26px; height:40px; padding:0 30px; line-height:40px; font-size:16px;} .dialog_con {flex-direction: column;} .dialog_con .dia_wrap01:after {display:block; position:static; margin-top:20px;} .dialog_con .dia_wrap02 {margin-top:80px;} .dialog_con .diabox_btm {width:100%; padding:47px 40px;} .dialog_con [class^="diabox_"] p + p {margin-top:20px;} .golden_time {padding:140px 0;} .about_process .detail [class^="dt_"] .top_tit > strong {margin-bottom:15px; font-size:22px;} .about_process .detail [class^="dt_"] .top_tit > p {font-size:18px;} .about_process .detail .dt_preview .con .bookimg_combi {width:80%;} .course_step.type_blue {width:500px; margin:0 auto 70px;} .course_step.type_blue li:first-child, .course_step.type_blue li:last-child {display:block; margin-right:0;} .course_step.type_blue li:first-child > div, .course_step.type_blue li:last-child > div {margin:0 auto;} .course_step.type_blue li.big {margin-right:0;} .course_step.type_blue li.big > div:after {display:none;} .course_step.type_blue li:last-child > div:before {background-image:url(../img/ico/ico_course_arw_b.svg);} } @media all and (max-width:768px){ .slick-arrow {width:42px; height:42px;} .slick-prev {left:20px;} .slick-next {right:20px;} .pc-v{display:none} .grace_btn.big {width:100%; padding:16px 20px; font-size:16px;} .philosophy ul li {flex-direction:column;} .philosophy ul li.bf_img:before {display:none;} .philosophy ul li + li {padding-top:64px;} .philosophy ul li > div {width:100%;} .philosophy ul li .thumb {width:calc(100% - 30px);} .philosophy ul li .con {padding:32px 30px 0;} .philosophy ul li:nth-child(even) {align-items:end;} .philosophy ul li:nth-child(even) .con {order:2; padding:32px 30px 0;} .philosophy ul li:nth-child(even) .thumb {order:1;} .grace_guide {padding:100px 0;} .grace_guide ul {display:block; max-width:500px; margin:0 auto;} .grace_guide ul li {flex:auto; width:100%; text-align:center;} .grace_guide ul li + li {margin-top:40px;} .grace_guide ul li .thumb {margin-bottom:32px;} .grace_guide ul li .txt {display:inline-block;} .grace_guide ul li .txt:after {content:''; display:inline-block; position:relative; top:-3px; width:32px; height:32px; margin-left:30px; vertical-align:middle; background:url(../img/ico/ico_guide_right.svg) no-repeat center; background-size:100%;} .experience_bn .comon_tit h3 {font-size:30px;} .experience_bn .grace_btn {margin-top:32px;} .experience_bn.type_sub .comon_tit h3 {font-size:30px;} .experience_bn.type_sub .grace_btn {margin-top:32px;} /* 서브 - 교육철학 */ [class^="info_sec"] .info_txt .tit {margin-bottom:20px; font-size:22px;} [class^="info_sec"] .img {margin-right:40px; margin-bottom:0;} /* 서브 - 수강안내 */ .comon_tit .sub_tit2{font-size:18px;line-height:30px} .gudie_step {margin:-112px 0 0; flex-wrap:wrap;} .gudie_step li {flex:calc(50% - 14px); margin:0 14px 20px 0;} .gudie_step li:nth-child(2n) {margin-right:0;} .apply_li ol {display:block; margin:0;} .apply_li ol li {width:100%; padding:40px 22px 34px; margin:0;} .apply_li ol li + li {margin-top:15px;} .apply_li ol li .tit:before {font-size:12px;} .apply_li ol li .tit {font-size:20px;} .apply_li ol li .txt {margin-top:30px;} .flex_col3 {display:block;} .flex_col3 li > p br {display:block;} .sincerity {padding-bottom:100px;} .sincerity ul li{padding:130px 10px 34px;} .sincerity ul li + li {border-top:1px solid #E0E0E0;} .sincerity ul li:after {display:none;} .direct_active {padding:100px 0;} .direct_active li + li {margin-top:33px;} .process ol {width:438px; margin-left:-219px;} .process ol li {margin-right:32px; margin-bottom:8px;} .process ol li:after {right:-34px;} .process ol li:nth-child(3) {margin-left:0;} .process ol li:nth-child(2n) {margin-right:0;} .process ol li:nth-child(2n):after {display:none;} .tuition_mo_banner {display:block;} .tuition_tb_pc {display:none;} .tuition_tb_mo {display:table;} .en_library {padding:100px 0;} .en_library .library > div {display:block; height:auto;} .en_library .library > div + div {margin-top:12px;} .en_library .library .book_slide {width:100%;} .en_library .library .book_slide .slick-slide {height:260px;} .en_library .library .book_slide .slick-slide .book {width:220px;} .en_library .library .txt {padding:32px 27px} .en_library .library .txt dl {top:inherit; font-size:16px; transform:inherit;} .en_library .library .txt dl dt:before {margin-right:9px;} .en_library .library .txt dl dd {padding-left:121px;} .en_library .library .txt dl dd br {display:none;} .en_library .library .txt dl dd:not(:last-of-type) {padding-bottom:16px;} .about_gate {padding-bottom:100px;} .about_gate .first_con {padding-top:60px;} .about_gate .first_con .just_txt {padding:0 44px;} .about_gate .first_con .just_txt p {font-size:35px;} .about_gate .first_con .just_txt p + p {margin-top:24px;} .about_gate .first_con .just_txt p strong {display:block;} .about_gate .first_con .deco_txt {max-width:545px;} .about_gate .first_con .deco_txt p {width:calc(50% - 18px); padding:0 0 25px; margin:0 9px 28px; font-size:20px;} .about_gate .first_con .deco_txt p:before, .about_gate .first_con .deco_txt p:after {width:60px; height:116px;} .suggestion {padding:100px 0;} .suggestion ul {margin:0; padding:0;} .suggestion ul li {width:100%; margin:0; border-radius:10px; padding:25px 28px 25px 113px;} .suggestion ul li:before {left:13px;} .suggestion ul li + li {margin-top:12px;} .success_story .story_slide .swiper-slide {display:block;} .success_story .story_slide .thumb {margin:0 auto;} .success_story .story_slide .txt {padding-left:0;} .success_story .story_slide .txt > span {text-align:center;} .success_story .story_slide .txt .tit {display:block; text-align:center;} .success_story .story_slide .txt .result {text-align:center;} .impression {padding:100px 0;} .impression ul li {height:auto;} .impression ul li + li {margin-top:12px;} .impression ul li .txt {top:inherit; transform:inherit;} .impression ul li .txt .tag {padding-left:0; margin-bottom:16px;} .impression ul li .txt .tag:before {display:none;} .impression ul li .txt p {margin-top:16px;} .impression ul li .txt p br {display:none;} .impression ul li {padding:155px 30px 40px; text-align:center; background-position:center top 40px; background-size:110px;} .impression ul li.imp02 {background-size:120px;} .about_process {padding:100px 0;} .about_process .detail [class^="dt_"] {padding:60px 20px 0} .about_process .detail [class^="dt_"] .con ul {display:block; max-width:400px; margin:0 auto 32px; text-align:center;} .about_process .detail [class^="dt_"] .con ul li {width:100%; margin:0;} .about_process .detail [class^="dt_"] .con ul li + li {margin-top:30px;} .about_process .detail [class^="dt_"] .top_tit {padding-right:100px;} .about_process .detail [class^="dt_"] .top_tit > strong {font-size:20px;} .about_process .detail [class^="dt_"] .top_tit > p {font-size:14px;} .about_process .detail [class^="dt_"] .top_tit > p br {display:none;} .about_process .detail [class^="dt_"] .con:after {top:-138px; right:-46px; width:155px;} .about_process .detail [class^="dt_"] .con ul.bookimg_li {display:none;} .about_process .detail [class^="dt_"] .con .bookimg_li_mo {display:block;} .about_process .detail .dt_review .con:after {top:-144px; right:-20px; width:155px;} .reading_book .book_li > div {display:block;} .reading_book .book_li > div + div {margin-top:40px;} .reading_book .book_li .book {margin:0 auto 32px;} .galler_list li .thumb {width:220px;} .galler_list li .txt .tit {margin-bottom:14px; font-size:20px;} } @media all and (max-width:640px){ .wrapper {padding-left:16px; padding-right:16px;} #container {padding-top:72px; padding-bottom:100px;} .grace_btn {width:100%; font-size:16px;} #grace_header {padding:11px 0;} #grace_header > div.wrapper {padding:0 16px;} #grace_header h1 {width:134px; height:38px;} #grace_header h2 {margin-right:-6px;} #grace_header nav {top:72px; height:calc(100% - 72px);} #grace_header .gnb > li > a {padding:12px 16px; font-size:14px;} #grace_header .submenu li a {padding:12px 16px; font-size:14px;} #grace_header .hd_etc {padding:0 16px; background:#4EBFF1;} #grace_header .hd_etc a {padding:18px 5px; font-size:12px;} footer {font-size:12px;} footer .ft_btm .wrapper {padding:30px 16px 0;} footer .ft_btm .call_center .tel {margin-bottom:8px;} footer .ft_btm .call_center > strong {margin-bottom:8px; font-size:14px;} footer .ft_btm address {margin-top:24px;} .comon_tit {padding-bottom:40px;} .comon_tit > span {margin-bottom:16px;} .comon_tit > span {font-size:14px;} .comon_tit h3 {font-size:24px;} .comon_tit .sub_tit {font-size:16px;} .comon_tit .sub_tit.md {margin-top:16px; font-size:16px;} .comon_tit .sub_tit.md br {display:none;} .comon_tit .sub_tit.type02 > span {font-size:18px;} .comon_tit .sub_tit.type02 > p {margin-top:16px; font-size:14px;} .visual {padding:42px 16px;} .visual .deco_con .txt {font-size:18px;} .visual .deco_con .txt h3 {padding:10px 20px 0 30px; width:100%;} .visual .deco_con .txt h3 strong {font-size:38px;} .visual .deco_con .txt .go_down {width:50px; height:50px;} .m_txt_swiper .swiper-pagination-bullet {width:8px; height:8px;} .philosophy {padding-top:100px;} .philosophy ul {margin-top:0;} .philosophy ul li.bf_img:before {display:none;} .philosophy ul li + li {padding-top:64px} .philosophy ul li .thumb {width:calc(100% - 16px); border-radius: 0px 20px 20px 0px;} .philosophy ul li:nth-child(even) .thumb {border-radius:20px 0 0 20px;} .philosophy ul li .con .tit {margin-bottom:16px; font-size:20px;} .philosophy ul li .con .txt p {font-size:14px;} .difference {padding-top:100px;} .colorball_con > div + div {margin-top:64px;} .colorball_con [class^="ball"] > div {width:150px; height:150px;} .colorball_con .left_ball .ball > div:after {bottom:-47px; width:32px; height:32px; margin-right:-16px;} .colorball_con .right_ball .ball03 {margin:auto;} .wonder_banner {height:auto; margin-top:100px;} .wonder_banner .baner_wrap > div:after {display:none;} .wonder_banner .txt {top:inherit; padding:60px 0; text-align:center; transform:inherit;} .wonder_banner .txt p {font-size:20px;} .wonder_banner .txt a {padding:12px 58px 12px 18px; font-size:14px; background-size:26px;} .wonder_banner .mo_img_bn {display:block;} .review {padding-top:100px;} .review .comon_tit {padding-bottom:24px;} .review .grace_btn {margin-top:40px;} .education {padding-top:100px;} .education .comon_tit {padding-bottom:60px;} .education .comon_tit .sub_tit2 {margin-top:8px; font-size:20px;} .education .edu_line {width:74%; height:auto;} .education ul {display:block; margin:0;} .education ul li {padding:66px 24px 38px; margin:0; font-size:16px;} .education ul li > strong {margin-bottom:10px;} .education ul li + li {margin-top:66px;} .education ul li:before {top:-30px;} .education ul li.edu01:before {left:27px; width:74px; height:71px;} .education ul li.edu02:before {left:24px; width:79px; height:71px;} .education ul li.edu03:before {left:32px; top:-14px; width:76px; height:45px;} .education ul li.edu04:before {left:27px; top:-30px; width:63px; height:76px;} .experience_bn {padding:86px 0;} .experience_bn .comon_tit h3 {font-size:24px;} .experience_bn .grace_btn {width:246px; padding:15px 0; font-size:14px;} .award {padding:60px 16px 10px;} .award ul {display:block;} .award ul li{display:inline-block; margin:0; width:49%; margin-bottom:40px} .award ul li.aw03 .ico {width:138px; height:70px;} /* 서브 snb */ .sub_snb {top:0; width:100%; padding:0; white-space:nowrap; overflow-y:auto; border-bottom:1px solid #E0E0E0; border-radius:0; box-shadow:none;} .sub_snb li a {padding:18px 10px;} .sub_snb.one {text-align:center;} .sub_visual:after {right:50%;} .sub_visual {height:auto; padding:44px 22px 189px;} .sub_visual .txt {top:inherit; text-align:center; transform:inherit;} .sub_visual .txt .tag {font-size:14px;} .sub_visual .txt > strong {font-size:24px;} .sub_visual.class_review {padding:44px 22px 280px;} .sub_visual.class_review:after {bottom:-3px; margin-right:-220px;} .sub_visual.is_board{padding:44px 22px 280px;} .sub_visual.is_board:after {bottom:-21px; margin-right:-147px;} .color_blue .sub_visual:after {margin-right:-140px;} .color_green .sub_visual:after {bottom:-139px; width:308px; height:312px; margin-right:-154px;} .color_og .sub_visual:after {bottom:-77px; margin-right:-174px;} .color_grapurple .sub_visual:after {bottom:-34px; margin-right:-171px;} .color_graog .sub_visual:after {bottom:-30px; margin-right:-175px;} .color_grablue .sub_visual:after {bottom:-35px; right:50%; margin-right:-191px;} /* 서브 - 교육철학 */ .intro01_page .sub_visual:after {bottom:-78px; width:330px; height:251px; margin-right:-165px;} [class^="info_sec"] .info_txt {width:100%; padding-top:33px;} [class^="info_sec"] .info_txt .tit {font-size:24px;} [class^="info_sec"] .info_txt .con p {font-size:14px;} .info_sec02:after {bottom:inherit; top:83px; right:50%; width:334px; height:86px; margin-right:-167px;} .info_sec02:before {position:static; display:block; width:320px; height:330px; margin:10px auto 0;} .info_sec02 {padding:180px 0 100px;} .info_sec03 {display:block;} .info_sec03 .img {width:100%; height:auto;} /* 서브 - 그레이스 잉글리시 차별점 */ [class^="differ0"] {padding:0 16px;} [class^="differ0"] .top_bigtit h3 br {display:none;} [class^="differ0"] .top_bigtit .txt p br {display:none;} [class^="differ0"] ol li {padding:30px 0;} [class^="differ0"] ol li .q_txt:before {top:0; font-size:22px;} [class^="differ0"] ol li .q_txt {padding-left:42px; font-size:20px;} [class^="differ0"] ol li .a_txt p {font-size:14px;} [class^="differ0"] .top_bigtit .tags {width:100%; left:0; transform:inherit;} [class^="differ0"] .top_bigtit .tags p {display:block;} [class^="differ0"] .top_bigtit .tags span {margin-right:0; margin-bottom:4px;} [class^="differ0"] .top_bigtit .tags span:first-child {margin-right:0;} .differ02 .top_bigtit {padding:60px 30px 220px; background-image:url(../img/bg/bg_differ02_tb.png); background-size:100%;} .differ03 .top_bigtit {padding:60px 30px 240px; background-size:342px;} .faq .comon_tit {padding-bottom:40px;} .faq .faq_list li .tit:before {left:0; font-size:20px;} .faq .faq_list li .tit:after {right:0;} .faq .faq_list li .tit {padding:20px 60px 20px 40px; font-size:20px;} .faq .faq_list li .con {padding:40px 16px;} .faq .faq_list li .con p {font-size:14px;} .guide_visual .gu_txt p br {display:none;} .sincerity .comon_tit {padding-bottom:40px;} .teacher_li {padding:0 0 100px;} #bo_gall.teacher_list_table .gall_li {padding:20px;} #bo_gall.teacher_list_table .gall_li + .gall_li {margin-top:32px;} #bo_gall.teacher_list_table .gall_con .gall_text_box {padding-left:16px;} .pg_wrap {margin:60px 10px 0;} .pg_page, .pg_current {width:34px; height:34px; line-height:34px !important; font-size:12px;} .process {padding:100px 0;} .process ol li {width:152px; height:152px; padding-top:48px;} .process ol li > p {font-size:12px;} .process ol li > div {padding-top:23px; font-size:12px;} .process ol li:before {top:18px; width:22px; height:22px; line-height:22px; font-size:12px;} .apply_form {padding:100px 0;} .apply_form .comon_tit {padding-bottom:30px;} .bkline_table {font-size:14px;} .bkline_table th.ver_top.pt02 {padding-top:30px;} .bkline_table td input {height:34px; padding:0 16px; font-size:14px;} .bkline_table td input::placeholder {font-size:14px;} .bkline_table td select {height:34px; padding:0 18px; font-size:14px;} .bkline_table textarea {height:100px; padding:16px 16px;} .bkline_table td em {font-size:11px;} .bkline_table td.in_check {padding:27px 0;} .comon_check span {font-size:14px;} .comon_check input + i {top:2px;} .grace_table thead th {font-size:14px;} .grace_table tbody td {font-size:14px;} .tuition_info {padding:100px 0;} .tuition_page .tuition_info {padding:0 16px 0;} .btn_wrap {display:flex; margin:40px -6px 0;} .btn_wrap > * {flex-grow:1; padding:12px 0; margin:0 6px; font-size:15px;} .schedule_btn .day {padding:0; font-size:16px;} .grace_dt_style li .dl p {font-size:14px;} /* 서브 - 힉습과정 : 리딩게이트 */ .about_gate .comon_tit {padding-bottom:32px;} .about_gate .color_txtbox {margin-top:72px;} .color_txtbox:before {display:block; position:static; width:calc(100% + 40px); height:148px; margin-left:-20px; margin-bottom:32px; background-size:180px;} .color_txtbox {padding:0 20px 40px; text-align:center;} .color_txtbox .tit {margin-bottom:26px; font-size:20px;} .color_txtbox > p br {display:none;} .color_txtbox > p{text-align: left;} .moms_review {padding:100px 0 28px;} .moms_review .comon_tit {width:100%; text-align:center;} .moms_review .slide_btn {position:relative; right:0; top:62px; text-align:center;} .moms_review .review_swiper_sub .writer strong {font-size:16px;} .moms_review .review_swiper_sub .swiper-slide {padding:32px 30px 50px; margin-right:0;} .moms_review .review_swiper_sub .tit {font-size:20px;} .moms_review .review_swiper_sub .txt {height:157px; font-size:14px; -webkit-line-clamp:7;} .gate_reason {padding:100px 16px;} .gate_reason .con_li {display:block; margin:0;} .gate_reason .con_li > div {margin:0;} .gate_reason .con_li + .con_li {margin-top:40px;} .gate_reason .con_li > div + div {margin-top:40px;} .gate_reason .con_li.col3 {margin-bottom:0;} .gate_reason .con_li.col3 > div {width:100%; margin-bottom:0;} .gate_reason .con_li.col3 > div + div {margin-top:40px;} .gate_reason .con_li .txt strong {font-size:20px;} .gate_reason .con_li .txt p {font-size:14px;} .gate_reason .con_li .txt p + p {margin-top:18px;} .gate_reason .txt p br {display:none;} .banner_con {padding:115px 0 60px;} .banner_con.pd {padding:135px 0 100px;} .gradient_banner:before {display:block; position:relative; right:0; bottom:inherit; top:-76px; margin:0 auto -26px;} .gradient_banner {padding:0 28px 58px; border-radius:20px;} .gradient_banner.bg_type02:before {top:-66px; right:0;} .gradient_banner.bg_type03:before {top:-32px;} .curriculum {padding:100px 0;} .curriculum .con {padding-top:22px;} .curriculum .con > div {padding:40px 17px;} .curriculum .con > div:before {font-size:12px;} .curriculum .con > div:before {top:-21px; height:28px; padding:0 30px; line-height:27px;} .curriculum .con > div p {font-size:16px;} .curriculum .con > div p:after {width:24px; height:24px; margin-right:calc(-50% - 41px); background-size:6px; border-width:2px;} .curriculum .con > div p + p {margin-top:20px;} .success_story {padding:100px 16px;} .success_story .story_slide .txt .tit {font-size:20px;} .success_story .story_slide .txt .txt_li p:before {width:18px; height:18px; background-size:10px;} .success_story .story_slide .txt .txt_li p {padding-left:28px; font-size:12px;} .success_story .story_slide .txt .result {padding:16px 16px 27px;} .success_story .story_slide .txt .result .tag {font-size:12px;} .success_story .story_slide .txt .result p {font-size:12px; margin-top:7px;} .impression ul li .txt .tit {font-size:20px;} .golden_time {padding:100px 0;} .golden_time .dialog_con .dia_wrap02:after {display:block; position:relative; top:0; right:inherit; left:50%; margin-top:34px; margin-left:-145px;} .dialog_con [class^="diabox_"] {text-align:left;} .dialog_con [class^="diabox_"] p {font-size:14px;} .dialog_con .dia_wrap01 {width:100%;} .dialog_con .dia_wrap01:after {margin:20px auto 0;} .dialog_con .dia_wrap02:after {display:block; position:relative; top:0;} .dialog_con .diabox_top {padding:36px 20px 36px 110px; background-position:center left 28px} .dialog_con .diabox_top:after {bottom:-15px; left:inherit; right:84px; width:28px; height:15px;} .dialog_con .diabox_btm {padding:47px 20px;} .dialog_con .diabox_btm:after {bottom:-19px; right:50%; width:33px; height:20px; margin-right:-16px;} .dialog_con .dia_wrap02 {margin-top:29px;} .about_application {padding-bottom:100px;} .about_application .application {width:calc(100% - 32px);} .about_application .application .dialog_con {padding:50px 20px 53px;} .about_application .application .dialog_con .diabox_top {padding:36px 20px 36px 110px; background-position:center left 28px; text-align:left;} .about_application .application .dialog_con .dia_wrap02:after {position:static; width:278px; height:60px; margin:32px auto 0;} .about_process .detail .dt_preview .con ol li {margin:0 0 30px;} .about_process .detail .dt_preview .con ol li .thumb {width:100%; height:auto; margin-bottom:25px;} .about_process .detail .dt_preview .con ol li .txt {font-size:18px;} .about_process .detail .dt_preview .con .bookimg_combi {width:100%;} .course03 .about_process .detail .dt_preview .con {padding:50px 9px 0;} .course_step {width:333px !important;} .course_step li {margin-right:50px;} .course_step li > div {width:140px; height:140px;} .course_step li > div:after {right:-42px; width:30px; height:30px;} .course_step li > div strong:before {margin-bottom:10px;} .course_step li > div strong {font-size:16px;} .course_step li > p {font-size:12px;} .course_step li.big > div {width:140px; height:140px;} .course_step li.big > div strong {font-size:16px;} .course_step li.big:before {width:20px; height:20px; left:-35px;} .course_step li:last-child > div:before {width:30px; height:30px; margin-top:-15px;} .reading_book {padding:100px 0;} .reading_book .book_li {padding:40px 16px;} .reading_book .book_li .book {width:100%;} .reading_book .book_li .book_wd01 .book {width:80%; max-width:inherit;} .reading_book .book_li .book_wd02 .book {width:90%; max-width:inherit;} .level_tabwrap {padding:100px 0;} .level_tabcon .tit {padding-left:16px; padding-bottom:0; margin-bottom:32px; font-size:20px; border-bottom:0;} .level_tabwrap .level_tab {flex-wrap:wrap;} .level_tabwrap .level_tab li {padding:10px 0; flex:calc(50% - 10px); margin:0 5px 7px; font-size:16px;} .level_tabcon .level_slide {width:100%; overflow:hidden;} .level_tabcon .level_slide .swiper-slide .item {width:100%; margin:0 0 32px;} .level_tabcon .level_slide .swiper-slide {display:block; margin:0;} .level_tabcon .level_slide .swiper-pagination {display:block;} .galler_list li a {flex-direction: column;} .galler_list li .thumb {order:1; width:auto; max-width:400px; margin:0 auto 16px;} .galler_list li .txt {order:2;} } @media all and (max-width:480px){ .br_show {display:block;} .mo_hide {display:none;} .visual .deco_con .txt .ico_txt {font-size:14px;} .visual .deco_con .txt h3 {left:0; padding: 10px 16px 0 0; font-size:20px;} .visual .deco_con .txt h3 strong {display:block; margin-bottom:-4px; font-size:34px;} .m_txt_swiper .swiper-slide p:before {width:42px; height:31px;} .m_txt_swiper .swiper-slide p {font-size:18px;} .colorball_con [class^="ball"] > div {width:108px; height:108px; margin:14px; font-size:14px; line-height:1.4;} .colorball_con .ball_txt {font-size:14px;} .colorball_con .right_ball .ball_txt:before {width:18px; height:20px;} .colorball_con .right_ball .ball02 {margin:0 -35px;} .education .edu_line {width:100%;} .sub_visual.class_review:after {margin-right:-267px;} /* 서브 - 교육철학 */ .info_sec01 .img {width:100%;} /* 서브 - 수강안내 */ .guide_visual {padding:45px 0 143px;} .guide_visual .gu_tit:after {width:280px; height:176px;} .guide_visual .gu_tit > span {margin-bottom:16px;} .guide_visual .gu_tit > p {font-size:24px;} .gudie_step {margin:-82px 0 0;} .gudie_step li {padding:70px 0 16px; background-size:40px; background-position:center top 22px} .gudie_step li strong:before {margin-bottom:4px; font-size:12px;} .gudie_step li strong {font-size:14px;} .gradient_banner.bg_type03:before {top:-52px; width:300px; height:268px;} .about_gate .first_con .just_txt p {font-size:24px;} .about_gate .first_con .deco_txt {max-width:382px;} .about_gate .first_con .deco_txt p:before, .about_gate .first_con .deco_txt p:after {width:43px; height:81px;} .about_gate .first_con .deco_txt p {padding:0 0 15px; font-size:14px;} #bo_gall.teacher_list_table .gall_li {padding:16px;} #bo_gall.teacher_list_table .gall_con .gall_href {width:100px;} #bo_gall.teacher_list_table .gall_con .gall_href .thumb_tch {margin-bottom:7px;} #bo_gall.teacher_list_table .gall_con dl dt:before {top:6px; width:2px; height:2px;} #bo_gall.teacher_list_table .gall_con dl dt {padding-left:6px; font-size:10px;} #bo_gall.teacher_list_table .gall_con dl dd {padding-left:36px; font-size:10px;} .calender {font-size:13px;} .success_story .story_slide .thumb {width:100%; height:auto;} } @media all and (max-width:374px){ .process ol li:before {top:10px;} .process ol li {width:140px; height:140px; padding-top:40px;} .gradient_banner:before {width:257px; height:287px;} .gradient_banner.bg_type02:before {width:260px; height:286px;} .gradient_banner .grace_btn {width:100%;} }