@charset "utf-8"; /* 메인 롤링 이미지 */ #mainSlider {position:relative; overflow:hidden} #mainSlider ul.imgList {position:relative; width:1000%} #mainSlider ul.imgList li {position:relative; top:0; float:left; width:1903px; height:700px; background-size:cover !important; overflow:hidden} #mainSlider ul.imgList li.item1 {background:url(../../img/main09.jpg) center top no-repeat} /* 썸머 */ #mainSlider ul.imgList li.item2 {background:url(../../img/main08.jpg) center top no-repeat}/* 윈터 */ #mainSlider ul.imgList li.item3 {background:url(../../img/main08.jpg) center top no-repeat} /* 반수 */ #mainSlider ul.imgList li.item4 {background:url(../../img/main02.jpg) center top no-repeat} /* 의대 */ #mainSlider ul.imgList li.item5 {background:url(../../img/main03.jpg) center top no-repeat}/* 재수선행 */ #mainSlider ul.imgList li.item6 {background:url(../../img/main04.jpg) center top no-repeat}/* 독학 */ #mainSlider ul.imgList li.item7 {background:url(../../img/main05.jpg) center top no-repeat} /* 재학생 */ #mainSlider ul.imgList li.item8 {background:url(../../img/main07.jpg) center top no-repeat}/* 윈터설명회 */ #mainSlider ul.imgList li.item9 {background:url(../../img/main09.jpg) center top no-repeat}/* 재수설명회*/ #mainSlider ul.imgList li.item10 {background:url(../../img/main13.jpg) center top no-repeat}/* 논술*/ #mainSlider ul.imgList li.item11 {background:url(../../img/main18.jpg) center top no-repeat}/* 면접 */ #mainSlider ul.imgList li a {display:block; position:relative; height:100%} #mainSlider ul.imgList li img {display:block; position:absolute; top:0; left:0; width:100%; height:100%} #mainSlider ul.imgList li .caption {position:relative; top:30%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20} #mainSlider ul.imgList li .caption.center {text-align:center} #mainSlider ul.imgList li .caption h2 {font-size:76px; font-weight:400; color:#fff; line-height:1.2; opacity:.9; filter:alpha(opacity='90'); margin-bottom:40px} #mainSlider ul.imgList li .caption h3 {font-size:17px; font-weight:400; color:#fff; line-height:1.8; opacity:.9; filter:alpha(opacity='90')} #mainSlider ol.indicator {position:absolute; bottom:10px; left:0; width:100%; text-align:center; z-index:30} #mainSlider ol.indicator li {position:relative; display:inline-block; line-height:1; margin:0 5px; padding:10px 0; cursor:pointer} #mainSlider ol.indicator li .dash {position:relative; width:80px; height:4px; background:rgba(255,255,255,.4)} #mainSlider ol.indicator li .dash .bar {position:absolute; top:0; left:0; width:0; height:100%; background:#fff} /* 메인 섹션 공통 */ #container .mainSection {position:relative; padding:40px 0} #container .mainSection .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px} #container .mainSection .inner:after {clear:both; display:block; content:''} #container .mainSection .inner > .title {text-align:center; padding:0 0 30px 0} #container .mainSection .inner > .title:before {display:block; width:100px; height:1px; margin:0 auto 30px auto; content:''; background:#ccc} #container .mainSection .inner > .title h2 {font-size:38px; font-weight:300; margin-bottom:20px} #container .mainSection .inner > .title h3 {font-size:17px; font-weight:400; color:#777} /* 메인 상단 섹션 */ #container .section1 {padding-bottom:0 !important} #container .section1 .inner ul {text-align:justify} #container .section1 .inner ul:after {display:inline-block; width:100%; content:''} #container .section1 .inner ul li {display:inline-block; width:30%; vertical-align:top} #container .section1 .inner ul li .imgArea {margin:30px auto 0 auto; width:25%} #container .section1 .inner ul li .imgArea img {display:block; width:100%} #container .section1 .inner ul li .desc {text-align:center} #container .section1 .inner ul li .desc h3 {font-size:20px; font-weight:400; margin-bottom:15px; transition:all .3s ease} #container .section1 .inner ul li a:hover .desc h3 {color:#21bbb1} #container .section1 .inner ul li .desc p {font-size:14px} /* 제품정보 섹션 */ #container .section2 .dropdown {position:relative} #container .section2 .dropdown > a {display:none} #container .section2 ul.product_tab {clear:both; text-align:center; margin-bottom:60px} #container .section2 ul.product_tab li {display:inline-block; margin:0 5px} #container .section2 ul.product_tab li a {display:inline-block; padding:8px 20px; font-size:13px; line-height:1; border-radius:4px; transition:all .3s ease} #container .section2 ul.product_tab li a:hover {background:#d0f0ee} #container .section2 ul.product_tab li.on a {color:#fff; background:#21bbb1} #container .section2 .tab_wrap {position:relative; overflow:hidden} #container .section2 .tab_wrap .tab_con {display:none} #container .section2 .tab_wrap .tab_con ul {text-align:justify} #container .section2 .tab_wrap .tab_con ul:after {display:inline-block; width:100%; content:''} #container .section2 .tab_wrap .tab_con ul li {display:inline-block; width:23.5%; border-radius:3px; vertical-align:top} #container .section2 .tab_wrap .tab_con ul li .title {padding:20px; text-align:center} #container .section2 .tab_wrap .tab_con ul li .title h3 {font-size:20px; font-weight:400; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .3s ease} #container .section2 .tab_wrap .tab_con ul li .imgArea {height:230px; overflow:hidden} #container .section2 .tab_wrap .tab_con ul li .imgArea img {display:block; width:100%; height:auto} #container .section2 .tab_wrap .tab_con ul li .desc {padding:20px 30px; text-align:center} #container .section2 .tab_wrap .tab_con ul li .desc p {display:-webkit-box; font-size:14px; color:#777; max-height:45px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden} #container .section2 .tab_wrap .tab_con ul li a {position:relative; display:block; background:#fff; box-shadow:0 2px 2px 0 rgba(100,100,100,.1)} #container .section2 .tab_wrap .tab_con ul li a:after {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid #21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section2 .tab_wrap .tab_con ul li a:hover:after {opacity:1; filter:alpha(opacity='100')} #container .section2 .tab_wrap .tab_con ul li a:hover .title h3 {color:#21bbb1} /* 수능 섹션 */ #container .section3 {height:224px; padding:0 !important; background:url(../../img/m_cn02.jpg) center top no-repeat; background-size:cover} #container .section3 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section3 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section3 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section3 .inner {width:37%; text-align:center; z-index:30} #container .section3 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section3 .inner p {font-size:14px; color:#ddd} /* 윈터스쿨 */ #container .section08 {height:224px; padding:0 !important; background:url(../../img/m_cn02.jpg) center top no-repeat; background-size:cover} #container .section08 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section08 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section08a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section08 .inner {width:37%; text-align:center; z-index:30} #container .section08 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section08 .inner p {font-size:14px; color:#ddd} /* 서울대합격자 섹션 */ #container .section10 {height:200px; padding:0 !important; background:url(../../img/f_bn.jpg) center top no-repeat; background-size:cover} #container .section10 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section10 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section10 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section10 .inner {width:37%; text-align:center; z-index:30} #container .section10 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section10 .inner p {font-size:14px; color:#ddd} /* 선행반 섹션 */ #container .section11 {height:224px; padding:0 !important; background:url(../../img/m_cn03.jpg) center top no-repeat; background-size:cover} #container .section11 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section11 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section11 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section11 .inner {width:37%; text-align:center; z-index:30} #container .section11 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section11 .inner p {font-size:14px; color:#ddd} /* 면접 섹션 */ #container .section12 {height:224px; padding:0 !important; background:url(../../img/m_cn04.jpg) center top no-repeat; background-size:cover} #container .section12 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section12 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section12 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section12 .inner {width:37%; text-align:center; z-index:30} #container .section12 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section12 .inner p {font-size:14px; color:#ddd} /* 논술 섹션 */ #container .section13 {height:224px; padding:0 !important; background:url(../../img/m_cn05.jpg) center top no-repeat; background-size:cover} #container .section13 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section13 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section13 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section13 .inner {width:37%; text-align:center; z-index:30} #container .section13 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px} #container .section13 .inner p {font-size:14px; color:#ddd} /* 서비스 섹션 */ #container .section4 .inner ul.svcList {text-align:justify} #container .section4 .inner ul.svcList:after {display:inline-block; width:100%; content:''} #container .section4 .inner ul.svcList li {display:inline-block; width:23.5%; vertical-align:top} #container .section4 .inner ul.svcList li a {display:block} #container .section4 .inner ul.svcList li .title {padding:20px; text-align:center} #container .section4 .inner ul.svcList li .title h3 {font-size:20px; font-weight:400; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .3s ease} #container .section4 .inner ul.svcList li .imgArea {position:relative} #container .section4 .inner ul.svcList li .imgArea:after {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid #21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section4 .inner ul.svcList li:hover .imgArea:after {opacity:1; filter:alpha(opacity='100')} #container .section4 .inner ul.svcList li:hover .title h3 {color:#21bbb1} #container .section4 .inner ul.svcList li .imgArea img {display:block; width:100%} #container .section4 .inner ul.svcList li .desc {padding:30px 0 20px 0; text-align:center} #container .section4 .inner ul.svcList li .desc p {font-size:14px; color:#777} /* 하단 이미지 섹션 */ #container .section5 {height:400px; padding:0 !important; background:url(../../img/m_cn01.jpg) center top no-repeat} #container .section5 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden} #container .section5 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section5 a:hover:after {opacity:.2; filter:alpha(opacity='20')} #container .section5 .inner {width:37%; text-align:center; z-index:30} #container .section5 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#ffba00; margin-bottom:25px} #container .section5 .inner p {font-size:14px; color:#ddd} /* 타일 섹션 */ #container .section6 .inner .upper {text-align:justify; margin-bottom:60px} #container .section6 .inner .upper:after {display:inline-block; width:100%; content:''} #container .section6 .inner .tile {display:inline-block; width:49%; overflow:hidden; vertical-align:top} #container .section6 .inner .upper a {display:block} #container .section6 .inner .upper .tile .imgArea {position:relative; margin-bottom:30px} #container .section6 .inner .tile .imgArea:after {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid #21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease} #container .section6 .inner .tile .imgArea img {display:block; width:100%} #container .section6 .inner .tile .caption h3 {font-size:20px; font-weight:400; margin-bottom:10px; transition:all .3s ease} #container .section6 .inner .tile .caption p {font-size:14px; color:#777} #container .section6 .inner .tile:hover .caption h3 {color:#21bbb1} #container .section6 .inner .tile:hover .imgArea:after {opacity:1; filter:alpha(opacity='100')} #container .section6 .inner .lower {text-align:justify} #container .section6 .inner .lower:after {display:inline-block; width:100%; content:''} #container .section6 .inner .lower .tile_wrap {display:inline-block; width:49%; text-align:justify} #container .section6 .inner .lower .tile_wrap:after {display:inline-block; width:100%; content:''} #container .section6 .inner .lower .tile_wrap .tile {width:48%} #container .section6 .inner .lower .tile_wrap .tile .imgArea {position:relative} #container .section6 .inner .lower .tile_wrap .tile .caption {margin-top:30px} /* 미디어 쿼리 */ @media screen and (max-width:1024px) { /* 메인 롤링 이미지 */ #mainSlider ul.imgList li {height:500px} #mainSlider ul.imgList li .caption h2 {font-size:48px} #mainSlider ul.imgList li .caption h3 {font-size:14px} /* 메인 섹션 공통 */ #container .mainSection .inner > .title h2 {font-size:30px} #container .mainSection .inner > .title h3 {font-size:15px} /* 메인 상단 섹션 */ #container .section1 .inner ul li .desc h3 {font-size:14px} #container .section1 .inner ul li .desc p {display:-webkit-box; font-size:12px; max-height:65px; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden} /* 제품정보 섹션 */ #container .section2 {padding-top:0 !important} #container .section2 .dropdown {width:70%; margin:0 auto 40px auto} #container .section2 .dropdown > a {position:relative; display:block !important; height:40px; text-align:center; font-size:12px; font-weight:600; line-height:40px; border:1px solid #21bbb1; border-radius:3px} #container .section2 .dropdown > a:after {position:absolute; top:50%; right:20px; width:0; height:0; content:''; margin-top:-2px; border-width:4px; border-style:solid; border-color:transparent; border-top-color:#21bbb1} #container .section2 .dropdown > a.open:after {margin-top:-6px; border-top-color:transparent; border-bottom-color:#21bbb1} #container .section2 ul.product_tab {clear:none; display:none; position:absolute !important; top:40px !important; left:0; width:100%; margin:0; border-left:1px solid #dedede; border-right:1px solid #dedede; background:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,.12); overflow:hidden; z-index:100} #container .section2 ul.product_tab li {display:block; margin:0} #container .section2 ul.product_tab li a {display:block; padding:10px 0; text-align:center; color:#777; border-bottom:1px solid #dedede} #container .section2 ul.product_tab li a:hover {background:none} #container .section2 ul.product_tab li.on a {color:#21bbb1; background:none} #container .section2 .tab_wrap .tab_con ul li .title h3 {font-size:16px} #container .section2 .tab_wrap .tab_con ul li .desc p {font-size:13px} /* 상단 이미지 섹션 */ #container .section3 {height:300px} #container .section3 a {padding:40px 0} #container .section3 .inner {width:60%} #container .section3 .inner h2 {font-size:30px} #container .section3 .inner p {font-size:13px} /* 서비스 섹션 */ #container .section4 .inner ul.svcList li .title h3 {font-size:16px} #container .section4 .inner ul.svcList li .desc p {font-size:13px} /* 하단 이미지 섹션 */ #container .section5 {height:300px} #container .section5 a {padding:40px 0} #container .section5 .inner {width:60%} #container .section5 .inner h2 {font-size:30px} #container .section5 .inner p {font-size:13px} /* 타일 섹션 */ #container .section6 .inner .tile .caption h3 {font-size:16px} #container .section6 .inner .tile .caption p {font-size:13px} #container .section6 .inner .lower .tile .caption p {display:-webkit-box; max-height:45px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden} } @media screen and (max-width:768px) { /* 메인 롤링 이미지 */ #mainSlider ul.imgList li {height:380px} #mainSlider ul.imgList li .caption {top:20%} #mainSlider ul.imgList li .caption h2 {font-size:27px} #mainSlider ul.imgList li .caption h3 {font-size:12px} #mainSlider ol.indicator li .dash {width:35px} /* 메인 섹션 공통 */ #container .mainSection .inner > .title h2 {font-size:25px} #container .mainSection .inner > .title h3 {font-size:12px} /* 메인 상단 섹션 */ #container .section1 .inner ul li {width:32%} #container .section1 .inner ul li .imgArea {float:none; width:85%; max-width:90px; margin-top:10px} #container .section1 .inner ul li .desc h3 {font-size:12px; text-align:center} #container .section1 .inner ul li .desc p {display:none} /* 제품정보 섹션 */ #container .section2 .tab_wrap .tab_con ul:after {display:none} #container .section2 .tab_wrap .tab_con ul li {display:block; width:100%; margin-bottom:30px} #container .section2 .tab_wrap .tab_con ul li .imgArea {height:350px} /* 상단 이미지 섹션 */ #container .section3 {height:250px} #container .section3 a {padding:40px 0} #container .section3 .inner {width:100%} #container .section3 .inner h2 {font-size:22px; margin-bottom:10px} #container .section3 .inner h2 br {display:none} #container .section3 .inner p {font-size:11px} #container .section3 .inner br {display:none} /* 서비스 섹션 */ #container .section4 .inner ul.svcList li {display:block; width:100%; margin-bottom:30px} #container .section4 .inner ul.svcList li .title {text-align:left; padding-left:0} #container .section4 .inner ul.svcList li .desc {padding:20px 0 0 0; text-align:left} /* 하단 이미지 섹션 */ #container .section5 {height:250px} #container .section5 a {padding:40px 0} #container .section5 .inner {width:100%} #container .section5 .inner h2 {font-size:22px; margin-bottom:10px} #container .section5 .inner h2 br {display:none} #container .section5 .inner p {font-size:11px} #container .section5 .inner br {display:none} /* 타일 섹션 */ #container .section6 .inner .upper:after, #container .section6 .inner .lower .tile_wrap:after {display:none} #container .section6 .inner .tile {clear:both; display:block; width:100%; margin-bottom:30px} #container .section6 .inner .tile .caption h3 {font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #container .section6 .inner .tile .caption p {font-size:12px} #container .section6 .inner .upper {margin-bottom:0} #container .section6 .inner .lower .tile_wrap {display:block; width:100%} #container .section6 .inner .lower .tile_wrap .tile {width:100%} #container .section6 .inner .lower .tile_wrap .tile .imgArea {float:left; width:45%} #container .section6 .inner .lower .tile_wrap .tile .caption {margin-top:0; margin-left:50%} #container .section6 .inner .lower .tile_wrap .tile .caption p {max-height:85px; -webkit-line-clamp:3} } @media screen and (max-width:640px) { /* 메인 롤링 이미지 */ #mainSlider ul.imgList li .caption {padding:0 30px} /* 메인 공통 레이아웃 */ #container .mainSection {padding:50px 0} #container .mainSection .inner {padding:0 30px} }