@charset "utf-8"; /********** 상단bg **********/ #wrap[role="news"] #container{background-image:url(../images/page/bg/news.png);} #wrap[role="customer"] #container {background-image:url(../images/page/bg/customer.png);} #wrap[role="review"] #container {background-image:url(../images/page/bg/review.png);} #wrap[role="brand"] #container, #wrap[role="smartallTv"] #container, #wrap[role="brand"] #container.intro{background-image:url(../IMAGES/PAGE/BG/BRAND.PNG);} #wrap[role="brand"] #container.aiSystem {background-image:url(../IMAGES/BRAND/INTRO/BG2.JPG);} #wrap[role="apply"] #container {background-image:url(../images/page/bg/apply.png);} #wrap[role="study"] #container {background-image:none;} #wrap[role="other"] #container.siteMapWrap {background-image:url(../images/page/bg/sitemap.jpg); background-color:#f5f5f5;} #wrap[role="study"] #container.studyToday {background-image:url(../IMAGES/PAGE/BG/STUDYTODAY.PNG); background-position-y: 56%;} #wrap[role="examData"] #container {background-image:url(../images/page/bg/examData.png);} #wrap[role="studyData"] #container {background-image:url(../images/page/bg/studyData.png);} /********** 01_웅진스마트올 **********/ /* 브랜드 */ #wrap[role="brand"] .pvHead .youtube {position:relative; padding-top:40px; height:581px; text-align:center; background:url(../images/brand/brandpv_bestBg_1.png) no-repeat center/auto;} #wrap[role="brand"] .pvHead .chr_1 {position:absolute; bottom:30px; right:20px;} #wrap[role="brand"] .pvHead p {margin:40px 0 70px; font-weight:600; font-size:32px; text-align:center; line-height:1.4;} #wrap[role="brand"] .pvList {padding-top:50px; border-top:2px solid #424242;} #wrap[role="brand"] .pvList .list:after {content:''; display:block; clear:both;} #wrap[role="brand"] .pvList .list > li {float:left; margin-right:15px; width:390px;} #wrap[role="brand"] .pvList .list > li:nth-of-type(3n) {margin-right:0;} #wrap[role="brand"] .pvList .list > li:nth-of-type(n+4) {margin-top:70px;} #wrap[role="brand"] .pvList .list > li .thum {position:relative; width:390px; height:220px; border-radius:10px; overflow:hidden;} #wrap[role="brand"] .pvList .list > li .thum:after {content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#000; background:rgba(0, 0, 0, 0.7) url(../images/common/ico_play.png) no-repeat center/ auto; transition:all 0.3s;} #wrap[role="brand"] .pvList .list > li:hover .thum:after {top:0;} #wrap[role="brand"] .pvList .list > li .thum img {width:100%;} #wrap[role="brand"] .pvList .list > li .cont {padding-top:25px;} #wrap[role="brand"] .pvList .list > li .cont strong {height:52px; font-size:20px; word-break:break-word; line-height:1.3;} #wrap[role="brand"] #container.story {padding-bottom:330px; text-align:center; background-image:url(../IMAGES/BRAND/STORY_BG_1.JPG);} #wrap[role="brand"] .story .locationArea h2{color:#1b3f82;} #wrap[role="brand"] .story .locationArea ul li:first-child a {background-image:url(../images/common/loc_home_2.png);} #wrap[role="brand"] .story .locationArea ul li, #wrap[role="brand"] .story .locationArea ul li:before {color:#838383} #wrap[role="brand"] .story .txt {margin-top:50px;} #wrap[role="brand"] .story .chr_1, #wrap[role="brand"] .story .chr_2 {position:absolute;} #wrap[role="brand"] .story .chr_1 {top:0; left:30px; animation:ani_2 1s linear infinite reverse;} #wrap[role="brand"] .story .chr_2 {top:370px; right:90px; animation:ani_2 1s linear infinite;} #wrap[role="brand"] .story .logo {transition:all 1s 0.2s; opacity:0;} #wrap[role="brand"] .story .logo.on {opacity:1;} #wrap[role="brand"] .story p {margin-bottom:40px; font-size:22px; line-height:1.4; opacity:0; transform:translateY(100px); transition:all 0.8s;} #wrap[role="brand"] .story p.on {opacity:1; transform:translateY(0);} #wrap[role="brand"] .story strong {display:block; font-size:34px; line-height:1.6; opacity:0; transform:translateY(40px); transition:all 0.8s;} #wrap[role="brand"] .story strong.on {opacity:1; transform:translateY(0);} #wrap[role="brand"] .intro .bgTypeA {max-width:1670px; padding:120px 0; margin:120px auto 0; border-radius:70px; border-top-left-radius:0px; border-bottom-right-radius:0px;} #wrap[role="brand"] .intro .bgTypeA:before, #wrap[role="brand"] .intro .bgTypeA:after {content:""; display:block; width:135px; height:100px; position:absolute; left:0; top:-100px; } #wrap[role="brand"] .intro .bgTypeA:after {left:auto; right:0; top:auto; bottom:-100px; transform:rotate(180deg)} #wrap[role="brand"] .intro .slideTypeA {padding-top:60px;} #wrap[role="brand"] .intro .slideTypeA .slideList {height:570px;} #wrap[role="brand"] .intro .slideTypeA .slideSection {padding-top:185px;} #wrap[role="brand"] .intro .slideTypeA .slideSection .thum {display:inline-block;} #wrap[role="brand"] .intro .slideTypeA .slideSection .cont {position:absolute; top:0; left:-296px; width:1200px; padding:0 0 50px 0;} #wrap[role="brand"] .intro .slideTypeA .slideSection .cont strong {padding-top:0; font-size:32px;} #wrap[role="brand"] .intro .slideTypeA .slideSection .cont p {font-size:24px; line-height:1.4;} #wrap[role="brand"] .intro .slideTypeA .btnSlidePrev, #wrap[role="brand"] .intro .slideTypeA .btnSlideNext {top:448px;} #wrap[role="brand"] .intro .slideTypeA .slideDots {bottom:10px;} #wrap[role="brand"] .intro .section4 .slideTypeA .slideDots {bottom:-5px;} #wrap[role="brand"] .intro .section4 .slideTypeA .slideSection .cont {padding-bottom:29px;} #wrap[role="brand"] .intro .btnArea {margin-top:0; font-size:inherit; text-align:center;} #wrap[role="brand"] .intro .btnArea a {display:inline-block; width:363px; height:95px; margin:0 15px; border-radius:47px; line-height:95px; text-align:center; font-size:28px; color:#fff; font-weight:700; background:#4db8a3; vertical-align:top;} #wrap[role="brand"] .intro .btnArea a:first-child {background:#ff8024} #wrap[role="brand"] .intro .section {position:relative; text-align: center;} #wrap[role="brand"] .intro .section1 {padding:80px 0 160px; background:url(../images/brand/intro/bg_section1.png) no-repeat 50% 100%; background-color:#1a4081;} #wrap[role="brand"] .intro video.scrEff {transform:translateY(0) !important;} #wrap[role="brand"] .intro .section2{padding: 50px 0 100px; margin-top: 20px;} #wrap[role="brand"] .intro .section2 .inSection {padding:80px 0; background-color:#262161;} #wrap[role="brand"] .intro .section2 h3 strong {font-size: 44px; line-height: 1;} #wrap[role="brand"] .intro .section2 p {margin: 15px 0 35px; font-size: 22px; color: #424242; line-height: 1.4;} #wrap[role="brand"] .intro .section2 .step span{font-size:18px; font-weight: 700; color: #8b8b8b; display: inline-block; margin: 0 10px;} #wrap[role="brand"] .intro .section3 {width: 100%; min-height:1900px; margin-top: 100px; background:url(../images/brand/intro/bg_section3.jpg) no-repeat 50% 100%;} #wrap[role="brand"] .intro .section3 > ul, #wrap[role="brand"] .intro .section6 > ul{ position: relative; top: 200px; max-width: 1030px; margin: 0 auto;} #wrap[role="brand"] .intro .section3 > ul > li, #wrap[role="brand"] .intro .section6 > ul > li{margin-bottom: 30px; position: relative; height: 272px; background :#fff; border-radius: 30px; overflow: hidden;} #wrap[role="brand"] .intro .section3 > ul > li span.icon, #wrap[role="brand"] .intro .section6 > ul > li span.icon{display: block; position: absolute; left: 0; width: 233px; height: 100%;} #wrap[role="brand"] .intro .section3 > ul > li span.icon img, #wrap[role="brand"] .intro .section6 > ul > li span.icon img{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} #wrap[role="brand"] .intro .section3 > ul > li span.txt, #wrap[role="brand"] .intro .section6 > ul > li span.txt{font-size: 32px;position: absolute;left: 233px;text-align: left; padding: 50px 30px 25px; line-height: 45px;} #wrap[role="brand"] .intro .section3 > ul #st1 .icon{background:#f05f96;} #wrap[role="brand"] .intro .section3 > ul #st2 .icon{background:#4db8a3;} #wrap[role="brand"] .intro .section3 > ul #st3 .icon{background:#f3981b;} #wrap[role="brand"] .intro .section3 > ul > #st1 strong{color: #f05f96;} #wrap[role="brand"] .intro .section3 > ul > #st2 strong{color: #4db8a3;} #wrap[role="brand"] .intro .section3 > ul > #st3 strong{color: #f3981b;} #wrap[role="brand"] .intro .section3 > ul ul, #wrap[role="brand"] .intro .section6 > ul ul{margin-left: 233px; padding: 0 30px; margin-top: 158px;} #wrap[role="brand"] .intro .section3 > ul ul li, #wrap[role="brand"] .intro .section6 > ul ul li{position:relative;float: left;width: 36%;text-align: left;font-size: 18px;line-height: 35px;padding-left: 20px;} #wrap[role="brand"] .intro .section3 > ul ul li:nth-child(2n){width: 40%;} #wrap[role="brand"] .intro .section3 > ul ul li.full, #wrap[role="brand"] .intro .section6 > ul ul li.full{float: left; width: 100%;} #wrap[role="brand"] .intro .section3 > ul ul li:before, #wrap[role="brand"] .intro .section6 > ul ul li:before, #wrap[role="brand"] .intro .section6 > ul > li:before{content: '';display: block;width: 6px;height: 6px;position: absolute;left: 0;top: 12px;border-radius: 50%;} #wrap[role="brand"] .intro .section3 > ul > #st1 li:before{background:#f05f96;} #wrap[role="brand"] .intro .section3 > ul > #st2 li:before{background:#4db8a3;} #wrap[role="brand"] .intro .section3 > ul > #st3 li:before{background:#f3981b;} #wrap[role="brand"] .intro .section4 .inSection1 {padding:30px 0 0;} #wrap[role="brand"] .intro .section5 {background:#fde9f1;} #wrap[role="brand"] .intro .section5:before, #wrap[role="brand"] .intro .section5:after {background:url(../images/brand/intro/bg_deco1.jpg) no-repeat 0 0;} #wrap[role="brand"] .intro .section5 .point .thum {display:inline-block; padding:26px; border:2px solid #bfbfbf; border-radius:22px; background:#fff;} #wrap[role="brand"] .intro .section5 .point .thum img {width:552px; height:345px;} #wrap[role="brand"] .intro .section5 .point .cont {padding:30px 0 35px 0; text-align:center;} #wrap[role="brand"] .intro .section5 .point .cont strong {display:inline-block; text-align:center; margin-top:30px; margin-bottom:10px; font-size:32px; color:#171717; font-weight:600; line-height:1.2em;} #wrap[role="brand"] .intro .section5 .point .cont p {text-align:center; font-size:24px; color:#4c4c4c; padding-top:6px; line-height:1.4;} #wrap[role="brand"] .intro .section6 {margin-top:120px;} #wrap[role="brand"] .intro .section6 p.txt{text-align: center; color: #171717; font-size: 32px; line-height: 45px; padding: 50px 30px 25px;} #wrap[role="brand"] .intro .section6 p.txt strong{color: #f3981b;} #wrap[role="brand"] .intro .section6 > ul{top: 0;} #wrap[role="brand"] .intro .section6 > ul:after{content: '';display: block;width: 400px;height: 264px;position: absolute; right: -350px;bottom: -110px; background: url(../images/brand/intro/txt_section6_icon7.png) no-repeat 0 0/cover;} #wrap[role="brand"] .intro .section6 > ul > li{overflow: initial;} #wrap[role="brand"] .intro .section6 > ul > li:after{content: '';display: block;width: 47px;height: 44px;position: absolute;left: 50%;bottom: -23px;margin-left: -23.5px; background: url(../images/brand/intro/txt_section6_icon.png) no-repeat 0 0/cover;} #wrap[role="brand"] .intro .section6 > ul > li:first-of-type{background: #fee892;} #wrap[role="brand"] .intro .section6 > ul > li:nth-of-type(2){background: #fb7059;} #wrap[role="brand"] .intro .section6 > ul > li:last-of-type{background: #42bba8;} #wrap[role="brand"] .intro .section6 > ul > li:last-of-type:after{display: none;} #wrap[role="brand"] .intro .section6 > ul > li span.txt{color: #171717; font-weight: 700; padding: 100px 0 25px;} #wrap[role="brand"] .intro .section6 > ul > li::before{border-radius: 0; left: auto; top: auto; } #wrap[role="brand"] .intro .section6 > ul > #st4:before{background:url(../images/brand/intro/txt_section6_icon4.png) no-repeat 0 0/cover; width: 279px; height: 193px; right: 80px; bottom: -6px;} #wrap[role="brand"] .intro .section6 > ul > #st5:before{background:url(../images/brand/intro/txt_section6_icon5.png) no-repeat 0 0/cover; width: 319px; height: 175px; right: 70px; bottom: -2px;} #wrap[role="brand"] .intro .section6 > ul > #st6:before{background:url(../images/brand/intro/txt_section6_icon6.png) no-repeat 0 0/cover; width: 208px; height: 200px; right: 110px; bottom: 0;} #wrap[role="brand"] .intro .section6 > ul > #st6 span.txt{padding: 80px 0 25px;} #wrap[role="brand"] .intro .section6 > ul > li li:before{background:#3c3c3c; width: 2px; height: 2px; top: 16px;} #wrap[role="brand"] .intro .section6 > ul ul{margin-top: 0; padding: 150px 0 0;} #wrap[role="brand"] .intro .section6 > ul ul li{width: 100%; padding-left: 13px;} #wrap[role="brand"] .intro .section7 {background:#4db8a3; margin-top: 170px;} #wrap[role="brand"] .intro .section7:before, #wrap[role="brand"] .intro .section7:after {background:url(../images/brand/intro/bg_deco2.jpg) no-repeat 0 0;} #wrap[role="brand"] .intro .section8 {margin-top:120px;} #wrap[role="brand"] .intro .section9 {background:#f4981b;} #wrap[role="brand"] .intro .section9:before, #wrap[role="brand"] .intro .section9:after {background:url(../images/brand/intro/bg_deco3.jpg) no-repeat 0 0;} #wrap[role="brand"] .intro .section11 {background:#58504e; margin-top: 0;} #wrap[role="brand"] .intro .section11:before, #wrap[role="brand"] .intro .section11:after {background:url(../images/brand/intro/bg_deco4.png) no-repeat 0 0;} #wrap[role="brand"] .intro .section12 {padding:70px 0;} #wrap[role="brand"] .intro .section12 strong {display:block; padding-bottom:40px; text-align:center; font-size:44px; line-height:50px; color:#171717;} #wrap[role="brand"] .intro .scrEff {opacity:0; transform:translateY(100px); transition:all 0.8s;} #wrap[role="brand"] .intro .scrEff.on {opacity:1; transform:translateY(0);} /* 학습관리 */ #wrap[role="brand"] #container.study {min-width:1260px; text-align:center; background-image:url(../images/brand/study/bg.jpg); overflow:hidden;} #wrap[role="brand"] .study .head {padding:70px 0 180px; font-size:60px; line-height:77px; color:#fff; text-align:center;} #wrap[role="brand"] .study .head strong {color:#ffbb28;} #wrap[role="brand"] .study .tabArea{margin-top:90px;} #wrap[role="brand"] .study .section {} #wrap[role="brand"] .study .section > .tit {display:block; padding-top:110px; text-align:center; font-size:44px; line-height:60px; color:#171717;} #wrap[role="brand"] .study .section .inSection {padding-top:60px;} #wrap[role="brand"] .study .section .inSection > strong {display:block; margin-bottom:55px; font-size:40px; line-height:54px; color:#171717; font-weight:500 } #wrap[role="brand"] .study .section1 .inSection1 {position:relative; padding-bottom:130px;} #wrap[role="brand"] .study .section1 .inSection1:after {content:""; display:block; width:291px; height:169px; position:absolute; left:50%; bottom:-20px; margin-left:250px; background:url(../images/brand/study/deco1.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection1 > ul {text-align:center;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li {display:inline-block; margin:0 40px; vertical-align:top;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li strong {display:block; width:234px; height:320px; padding-right:14px; padding-top:100px; text-align:center; font-size:28px; line-height:40px; color:#fff; background:url(../images/brand/study/bg_section1_1.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li:nth-child(2) strong {padding-top:114px; background:url(../images/brand/study/bg_section1_2.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li:nth-child(3) strong { padding-top:114px; padding-right:0; padding-left:14px; background:url(../images/brand/study/bg_section1_3.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li ul {padding-top:25px;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li ul li {position:relative; padding:8px 0 8px 50px; font-size:20px; font-weight:600; line-height:30px; color:#171717; text-align:left;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li ul li span {position:absolute; left:0; top:4px; display:block; width:38px; height:38px; font-size:26px; font-weight:700; line-height:38px; color:#fff; border-radius:50%; background:#6660a2; text-align:center;} #wrap[role="brand"] .study .section1 .inSection1 > ul > li:nth-child(2) ul li span {background:#4db8a3} #wrap[role="brand"] .study .section1 .inSection1 > ul > li:nth-child(3) ul li span {background:#f19510} #wrap[role="brand"] .study .section1 .inSection2 {position:relative; padding-bottom:220px; background:url(../images/brand/study/bg_divi.jpg) no-repeat 50% 100%;} #wrap[role="brand"] .study .section1 .inSection2:after {content:""; display:block; width:406px; height:259px; position:absolute; left:50%; bottom:140px; margin-left:360px; background:url(../images/brand/study/deco2.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection2 > ul {} #wrap[role="brand"] .study .section1 .inSection2 > ul > li {position:relative; width:892px; height:246px; margin:0 auto 30px; padding:85px 0 0 185px; background:url(../images/brand/study/bg_section1_4.jpg) no-repeat 0 0; text-align:left;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li:before {content:""; display:block; width:47px; height:44px; position:absolute; left:50%; top:-54px; margin-left:-24px; background:url(../images/brand/study/arrow.png) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li:nth-child(1):before {display:none;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li:nth-child(2) {background:url(../images/brand/study/bg_section1_5.jpg) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li:nth-child(3) {padding-top:75px; background:url(../images/brand/study/bg_section1_6.jpg) no-repeat 0 0;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li strong {font-size:32px; line-height:40px; color:#171717;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li ul {padding-top:5px;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li ul li {position:relative; padding-left:10px; font-size:19px; line-height:29px; color:#171717;} #wrap[role="brand"] .study .section1 .inSection2 > ul > li ul li:before {content:"·"; color:#171717; position:absolute; left:0; top:0;} #wrap[role="brand"] .study .section2 {padding-bottom:100px; background:#fbf5ea url(../images/brand/study/bg_divi_b.jpg) no-repeat 50% 100%;} #wrap[role="brand"] .study .section2 .inSection1 {} #wrap[role="brand"] .study .section2 .inSection1 .cont1 {text-align:center;} #wrap[role="brand"] .study .section2 .inSection1 .cont1 .thum {display:block; margin-bottom:30px;} #wrap[role="brand"] .study .section2 .inSection1 .cont1 em {display:inline-block; height:50px; padding:0 35px; line-height:50px; border-radius:25px; background:#f15d43; font-size:24px; color:#fff; font-weight:700; font-style:normal;} #wrap[role="brand"] .study .section2 .inSection1 .cont1 p {padding-top:20px; font-size:20px; font-weight:600; line-height:30px; color:#3c3c3c;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 {width:1200px; margin:75px auto 0; padding:75px 0; border-top:1px dashed #cbcac8; border-bottom:1px dashed #cbcac8;} #wrap[role="brand"] .study .section2 .inSection1 .cont2:after {content:""; display:block; clear:both;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .clearfix {padding-bottom:40px;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .thum {display:inline-block; vertical-align:top;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont {display:inline-block; margin-left:20px; width:464px; padding-top:25px; vertical-align:top; text-align:left;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > strong {display:inline-block; font-size:26px; line-height:36px; border-bottom:1px solid #000; color:#3c3c3c} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul {} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul:after {content:""; display:block; clear:both;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul > li {display:inline-block; width:49%; padding-top:25px; vertical-align:top;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul > li strong {display:block; padding:0 0 0 27px; font-size:24px; line-height:34px; color:#f15d43; background:url(../images/brand/study/blt2.png) no-repeat 0 0;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul > li ul {padding-left:22px; padding-top:5px;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul > li ul li {position:relative; padding:3px 0 3px 20px; font-size:18px; font-weight:600; line-height:24px; color:#3c3c3c;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 .inCont > ul > li ul li:before {content:"·"; color:#171717; position:absolute; left:6px; top:2px;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 em {display:inline-block; height:50px; padding:0 35px; line-height:50px; border-radius:25px; background:#f15d43; font-size:24px; color:#fff; font-weight:700; font-style:normal;} #wrap[role="brand"] .study .section2 .inSection1 .cont2 p {padding-top:20px; font-size:20px; font-weight:600; line-height:30px; color:#3c3c3c;} #wrap[role="brand"] .study .section2 .inSection2 {padding-top:75px; width:1200px; margin:0 auto;} #wrap[role="brand"] .study .section2 .inSection2 > ul {} #wrap[role="brand"] .study .section2 .inSection2 > ul:after {content:""; display:block; clear:both;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li {float:left; width:50%; text-align:center;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li .thum {text-align:center; margin-bottom:10px;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li em {display:inline-block; height:50px; padding:0 35px; line-height:50px; border-radius:25px; background:#f15d43; font-size:24px; color:#fff; font-weight:700; font-style:normal;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li ul {padding-top:20px; padding-left:75px;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li ul li {position:relative; padding:8px 0 8px 20px; font-size:20px; font-weight:600; line-height:32px; color:#3c3c3c; text-align:left;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li ul li:before {position:absolute; left:0; top:8px; content:url(../images/brand/study/blt.png); display:inline-block; vertical-align:top; margin-right:10px;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li > p {position:relative; margin-left:70px; font-size:18px; line-height:20px; padding:8px 0 0 20px; color:#3c3c3c; text-align:left;} #wrap[role="brand"] .study .section2 .inSection2 > ul > li > p:before {position:absolute; left:0; top:8px; content:"※"; display:inline-block; vertical-align:top; margin-right:10px;} #wrap[role="brand"] .study .section3 {padding-bottom:80px;} #wrap[role="brand"] .study .section3 .thum {padding:65px 0 20px 0; text-align:center;} #wrap[role="brand"] .study .section3 ul {width:790px; margin:0 auto;} #wrap[role="brand"] .study .section3 ul li {padding:5px 0; font-size:20px; line-height:30px; color:#4c4c4c; font-weight:600; text-align:left;} #wrap[role="brand"] .study .section3 ul li:before {content:"·"; color:#171717; } #wrap[role="brand"] .study .section3 ul li p {padding-top:5px; padding-left:20px; font-size:17px; line-height:24px; color:#4c4c4c;} #wrap[role="brand"] .study .section3 .infoTxt {width:790px; margin:0 auto; padding-top:10px; padding-left:20px; font-size:16px; color:#4c4c4c; text-align:left;} #wrap[role="brand"] .study .section4 {padding-bottom:115px; background:#fbf5ea url(../images/brand/study/bg_divi.jpg) no-repeat 0 0;} #wrap[role="brand"] .study .section4 .btnArea {padding-top:55px; font-size:inherit; text-align:center;} #wrap[role="brand"] .study .section4 .btnArea a {display:inline-block; width:363px; height:95px; margin:0 15px; border-radius:47px; line-height:95px; text-align:center; font-size:28px; color:#fff; font-weight:700; background:#4db8a3; vertical-align:top;} #wrap[role="brand"] .study .section4 .btnArea a:first-child {background:#ff8024;} /*학습관리 -2 '화상학습관리'*/ #wrap[role="brand"] .study2 .section1 .inSection1:after, #wrap[role="brand"] .study2 .section1 .inSection2:after {display:none;} #wrap[role="brand"] .study2 .section1 .inSection1{padding-bottom:0;} #wrap[role="brand"] .study2 .section1 .inSection2{padding-bottom:0; background:transparent;} #wrap[role="brand"] .study2 .section4{padding-bottom:115px!important;} #wrap[role="brand"] .study2 .section5 {padding-bottom:115px; background:#fbf5ea url(../images/brand/study/bg_divi_b.jpg) no-repeat 50% 100%;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul {} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li {position:relative; width:892px; height:246px; margin:0 auto 30px; padding:85px 0 0 185px; background:url(../images/brand/study2/bg_section1_1.jpg) no-repeat 0 0; text-align:left;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li:before {content:""; display: none; position:absolute; width:47px; height:44px;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li:nth-child(1):before {display:none;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li:nth-child(2) {background:url(../images/brand/study2/bg_section1_2.jpg) no-repeat 0 0;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li:nth-child(3) {height:296px; padding-top:75px; background:url(../images/brand/study2/bg_section1_3.jpg) no-repeat 0 0;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li strong {font-size:32px; line-height:40px; color:#171717;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li ul {padding-top:5px;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li ul li {position:relative; padding-left:10px; font-size:19px; line-height:29px; color:#171717;} #wrap[role="brand"] .study2 .section1 .inSection2 > ul > li ul li:before {content:""; display:none;} #wrap[role="brand"] .study2 .video{padding:68px 0; background:url(../images/brand/study2/section4.png) no-repeat center center;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul{width: 1244px; margin: 0 auto; padding-bottom: 60px;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul:after {content:""; display:block; clear:both;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li {float:left; width:50%; text-align:center;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li .thum {text-align:center; margin-bottom:10px;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li em {display:inline-block; width: 372px; height:50px; padding:0 35px; line-height:50px; border-radius:25px; background:#f15d43; font-size:24px; color:#fff; font-weight:700; font-style:normal;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li ul {padding-top:20px; padding-left:75px;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li ul li {position:relative; padding:8px 0 8px 20px; font-size:20px; font-weight:600; line-height:32px; color:#3c3c3c; text-align:left;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li ul li:before {position:absolute; left:0; top:5px; content:url(../images/brand/study/blt.png); display:inline-block; vertical-align:top; margin-right:10px;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li > p {position:relative; margin-left:70px; font-size:18px; line-height:20px; padding:8px 0 0 20px; color:#3c3c3c; text-align:left;} #wrap[role="brand"] .study2 .section6 .inSection1 > ul > li > p:before {position:absolute; left:0; top:8px; content:"※"; display:inline-block; vertical-align:top; margin-right:10px;} /* ai 학습시스템 */ #wrap[role="brand"] .aiSystem .contents {padding:90px 0 0; width:100%; text-align:center;} #wrap[role="brand"] .aiSystem .section {padding:50px 0 100px; margin-top:20px;} #wrap[role="brand"] .aiSystem .section h3 .num {display:inline-block; width:50px; height:50px; line-height:53px; border-radius:50%; font-size:28px; font-weight:600; color:#fff;} #wrap[role="brand"] .aiSystem .section1 .num {background:#4db8a3;} #wrap[role="brand"] .aiSystem .section2 .num {background:#ffbb28;} #wrap[role="brand"] .aiSystem .section3 .num {background:#ff903f;} #wrap[role="brand"] .aiSystem .section4 .num {background:#4db8a3;} #wrap[role="brand"] .aiSystem .section5 .num {background:#ffbb28;} #wrap[role="brand"] .aiSystem .section6 .num {background:#ff903f;} #wrap[role="brand"] .aiSystem .section .content > p {margin:25px 0 35px; font-size:22px; color:#424242; line-height:1.4;} #wrap[role="brand"] .aiSystem .section .effect {margin:80px 0 60px;} #wrap[role="brand"] .aiSystem .section .effect strong {padding-bottom:3px; border-bottom:1px solid #000; font-size:28px;} #wrap[role="brand"] .aiSystem .section .effect span {display:block; margin-top:20px; font-size:18px;} #wrap[role="brand"] .aiSystem .section .arr:after {content:""; display:block; margin-top:25px; width:100%; height:29px; background:url(../images/common/ico_study_d.png) no-repeat center center;} #wrap[role="brand"] .aiSystem .section h3 strong {display:block; margin-top:20px; font-size:38px; line-height:1.4;} #wrap[role="brand"] .aiSystem .section h3 strong span {font-size:48px;} #wrap[role="brand"] .aiSystem .sectionIntro {padding:0 0 160px; background:url(../images/brand/intro/bg_section1.png) no-repeat 50% 100%; background-color:#1a4081;} #wrap[role="brand"] .aiSystem .section0 h3 strong {font-size: 44px; line-height: 1;} #wrap[role="brand"] .aiSystem .section0 p.step {margin: 15px 0 35px;} #wrap[role="brand"] .aiSystem .section0 .step span{font-size:18px; font-weight: 700; color: #8b8b8b; display: inline-block; margin: 0 10px;} #wrap[role="brand"] .aiSystem .section1 .content img {margin-left:-190px;} #wrap[role="brand"] .aiSystem .section1 h3:first-of-type{margin-bottom: 50px;} #wrap[role="brand"] .aiSystem .section2 {background:#f5f5f5 url(../images/brand/aiSystem/section_2_bg.png) no-repeat 50% 0/2000px;} #wrap[role="brand"] .aiSystem .section3 {background:url(../images/brand/aiSystem/section_3_bg.png) no-repeat 50% 104px/ auto;} #wrap[role="brand"] .aiSystem .section3 .content > img {margin-left:204px;} #wrap[role="brand"] .aiSystem .section3 .content .info img {margin:0 5px;} #wrap[role="brand"] .aiSystem .section4 .content img:nth-of-type(n+2) {margin-left:12px;} #wrap[role="brand"] .aiSystem .section4 .content > p { margin-bottom: 50px; } #wrap[role="brand"] .aiSystem .section5 .step { position: relative; display: inline-block; } #wrap[role="brand"] .aiSystem .section5 .step span { position: absolute; top: -12px; font-size: 19px; line-height: 1.3; } #wrap[role="brand"] .aiSystem .section5 .step .txt1 { left: 150px; } #wrap[role="brand"] .aiSystem .section5 .step .txt2 { right: 152px; } #wrap[role="brand"] .aiSystem .section5 .step img:last-child { margin-left: -70px; } #wrap[role="brand"] .aiSystem .section6 { margin-bottom: 0; } #wrap[role="brand"] .aiSystem .section6 .content img { margin-top: 70px; } /*스마트올 키즈 -예비초*/ #wrap[role="brand"] #container.smartallKids { min-width: 1260px; overflow: hidden; text-align: center; background: url(../IMAGES/PAGE/BG/BRAND.PNG) #d5fbff no-repeat; } #wrap[role="brand"] #container.smartallKids .contents { width: 100%; padding: 98px 0 0; text-align: center; } #wrap[role="brand"] .smartallKids .section { position: relative; } #wrap[role="brand"] .smartallKids .section .inSection { width: 1260px; margin: 0 auto; } #wrap[role="brand"] #container.smartallKids img { max-width: 100%; } #wrap[role="brand"] .smartallKids .section1 { } #wrap[role="brand"] .smartallKids .section1 .cont1 { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 189%; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-list { width: 100%; padding: 0 !important; margin: 0 auto; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-track img { padding: 0 30px; box-sizing: border-box; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-prev, #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-next { position: absolute; width: 60px; height: 60px; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-prev { left: 33%; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-next { right: 33%; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-prev:before { content: ''; } #wrap[role="brand"] .smartallKids .section1 .cont1 .slick-next:before { content: ''; } #wrap[role="brand"] .smartallKids .section2 { } #wrap[role="brand"] .smartallKids .section2 .inSection1 { position: absolute; top: 33.4%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; width: 34.4%; } #wrap[role="brand"] .smartallKids .section2 .inSection1 .tabWrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; margin-right: 10px; } #wrap[role="brand"] .smartallKids .section2 .inSection1 .tabWrap li { position: relative; cursor: pointer; } #wrap[role="brand"] .smartallKids .section2 .inSection1 .tabWrap li.point1.on:before { content: ''; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; background: url(../IMAGES/BRAND/SMARTALLKIDS/ELI_PT01_BTN01_ON.PNG) no-repeat; background-size: contain; } #wrap[role="brand"] .smartallKids .section2 .inSection1 .tabWrap li.point2.on:before { content: ''; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; background: url(../IMAGES/BRAND/SMARTALLKIDS/ELI_PT01_BTN02_ON.PNG) no-repeat; background-size: contain; } #wrap[role="brand"] .smartallKids .section2 .inSection1 .tabWrap li.point3.on:before { content: ''; position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; background: url(../IMAGES/BRAND/SMARTALLKIDS/ELI_PT01_BTN03_ON.PNG) no-repeat; background-size: contain; } #wrap[role="brand"] .smartallKids .section3 .syncA { position: absolute; left: 50%; transform: translateX(-50%); top: 15.6%; width: 35%; } #wrap[role="brand"] .smartallKids .section3 .syncA .slick-list { margin: 0 auto; } #wrap[role="brand"] .smartallKids .section3 .syncA .slick-track img { width: 25% !important; padding: 0 10px; position: relative; } #wrap[role="brand"] .smartallKids .section3 .syncB { position: absolute; left: 50%; transform: translateX(-50%); top: 17%; width: 34%; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-list { padding: 0 !important; margin: 0 auto; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-track img { height: auto; box-sizing: border-box; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-prev:before, #wrap[role="brand"] .smartallKids .section3 .syncB .slick-next:before { display: none; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-prev, #wrap[role="brand"] .smartallKids .section3 .syncB .slick-next { width: 60px; height: 61px; top: 50%; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-prev { left: -115px; } #wrap[role="brand"] .smartallKids .section3 .syncB .slick-next { right: -115px; } /* 스마트올 키즈 -5~6세 */ #wrap[role="brand"] #container { min-width: 1260px; overflow: hidden; text-align: center; } #wrap[role="brand"] #container.smartallKids2 { margin: 0 auto; padding-top: 0;; overflow-x: hidden; background: url(../IMAGES/PAGE/BG/BRAND.PNG) #d4f5ff no-repeat; } #wrap[role="brand"] #container.smartallKids2 .contents { width: 100%; padding: 100px 0 0; text-align: center; } #wrap[role="brand"] #container.smartallKids2 img { max-width: 100%; } .smartallKids2 .section { line-height: 1.4; } .smartallKids2 .inSection { position: relative; } .smartallKids2 .section .colorA { font-weight: 600; } .smartallKids2 .section span { font-weight: 600; } .smartallKids2 .section span.num { display: block; width: 50px; height: 50px; margin: 0 auto; font-size: 28px; font-weight: 600; line-height: 53px; border-radius: 50%; color: #fff; } .smartallKids2 .section h3 { margin: 30px 0; font-size: 38px; } .smartallKids2 .section h3 .hl { font-size: 48px; } .smartallKids2 .section h2{padding:94px 0; font-size: 40px; font-weight: 600;} .smartallKids2 .section h2 strong{font-size: 54px;} .smartallKids2 .tabWrap li {cursor: pointer;} .smartallKids2 .section0 .cont1{position: absolute; bottom: 6.5%; left:50%; transform: translate(-50%, 0); width: 47%;} .smartallKids2 .section0 .cont1 ul{font-size: 0;} .smartallKids2 .section0 .cont1 ul li{position:relative; display: inline-block; width: 266px; text-align: center;} .smartallKids2 .section0 .cont1 ul li span{position:absolute; width:100%; left:12px; top:90px; color:#fff; font-size: 24px; font-weight: 600; text-align: center; } .smartallKids2 .section0 .cont1 .slider .slick-slide {padding: 0 10px;} .smartallKids2 .section0 .cont1 .slider .slick-list {padding: 0px !important;} .smartallKids2 .section0 .cont1 .slider img {width: 100%;} .smartallKids2 .section0 .cont1 .slick-prev, .smartallKids2 .section0 .cont1 .slick-next {width: 55px; height: 79px; top:31%;} .smartallKids2 .section0 .cont1 .slick-prev:before, .smartallKids2 .section0 .cont1 .slick-next:before {display: none;} .smartallKids2 .section1 .inSection1 .koreanTab {position: absolute; left: 50%; top: 25%; transform: translateX(-50%); width: 46%; height: 12.4%; display: flex; z-index: 1;} .smartallKids2 .section1 .inSection1 .koreanTab li {display: block; height: 100%; width: 33.333%; cursor: pointer;} .smartallKids2 .section1 .inSection1 .koreanTab li:nth-child(1) {width: 31%;} .smartallKids2 .section1 .inSection1 .koreanTab li:nth-child(2) {width: 30%;} .smartallKids2 .section1 .inSection1 .koreanTab li:nth-child(3) {width: 39%;} .smartallKids2 .section1 .inSection1 .koreanCont {position: absolute;top: 22%;left: 50%;transform: translateX(-50%); width: 46%;} .smartallKids2 .section1 .inSection1 .koreanCont .gifWrap {position: absolute; top: 45.8%; left: 48.8%; transform: translateX(-50%); width: 87%; display: flex; justify-content: center;} .smartallKids2 .section1 .inSection1 .koreanCont .gifWrap li {position:relative; width: 23.6%; margin-right: 1.8%;} .smartallKids2 .section1 .inSection1 .koreanCont .gifWrap li:last-child {margin-right: 0;} .smartallKids2 .section1 .inSection1 .koreanCont .gifWrap li:before {content: ''; position: absolute; top: 50%; right: -23px; transform: translateY(-50%); width: 36px; height: 36px; background: url(../images/brand/smartallKids2/KOR_ARROW.PNG) no-repeat; background-size: cover; z-index: 1;} .smartallKids2 .section1 .inSection1 .koreanCont .gifWrap li:last-child:before {display: none;} .smartallKids2 .section1 .inSection1 .koreanCont #korean2 .gifWrap {left: 49%;} .smartallKids2 .section1 .inSection1 .character1{position:absolute; left: 15%; bottom: 10%; width:13%;} .smartallKids2 .section1 .inSection2 .gifWrap {position: absolute; top: 0%; left: 49.3%; transform: translateX(-50%); width: 45.2%; display: flex; justify-content: space-between;} .smartallKids2 .section1 .inSection2 .gifWrapA {top: 25%;} .smartallKids2 .section1 .inSection2 .gifWrapB {top: 57.6%;} .smartallKids2 .section1 .inSection2 .gifWrap li {position: relative; width: 32.4%;} .smartallKids2 .section1 .inSection2 .gifWrap li:before {content: ''; position: absolute; bottom: -8%; left: 50%; transform: translateX(-50%); width: 36px; height: 31px; background: url(../images/brand/smartallKids2/TRIANGLE.PNG) no-repeat; background-size: cover; z-index: 1;} .smartallKids2 .section1 .inSection2 .gifWrap li > img {border: 5px solid #70cf52; border-radius: 10px; width: 100%;} .smartallKids2 .section2 .inSection1 .mathTab {position: absolute; left: 50%; top: 23%; transform: translateX(-50%); width: 48%; height: 13.4%; display: flex; z-index: 10;} .smartallKids2 .section2 .inSection1 .mathTab li {display: block; height: 100%; width: 50%; cursor: pointer;} .smartallKids2 .section2 .inSection1 .mathTab li:nth-child(1) {width: 48%;} .smartallKids2 .section2 .inSection1 .mathTab li:nth-child(2) {width: 52%;} .smartallKids2 .section2 .inSection1 .mathContents {position: absolute;top: 20%; left: 50%;transform: translateX(-50%); width: 48%;} .smartallKids2 .section2 .inSection1 .mathContents .gifWrap {position: absolute; top: 45.8%; left: 48.8%; transform: translateX(-50%); width: 87%; display: flex; justify-content: center;} .smartallKids2 .section2 .inSection1 .mathContents .gifWrap li {position:relative; width: 23.6%; margin-right: 1.8%;} .smartallKids2 .section2 .inSection1 .mathContents .gifWrap li:last-child {margin-right: 0;} .smartallKids2 .section2 .inSection1 .mathContents .gifWrap li:before {content: ''; position: absolute; top: 50%; right: -23px; transform: translateY(-50%); width: 36px; height: 36px; background: url(../images/brand/smartallKids2/MATH_ARROW.PNG) no-repeat; background-size: cover; z-index: 1;} .smartallKids2 .section2 .inSection1 .mathContents .gifWrap li:last-child:before {display: none;} .smartallKids2 .section2 .inSection1 .character2{position:absolute; right: 17%; bottom: 10%; width: 13%;} .smartallKids2 .section2 .inSection2 .circleWrap {position: absolute; top: 31%; left: 50%; transform: translateX(-50%); width: 46%; display: flex;} .smartallKids2 .section2 .inSection2 .circleTab, .smartallKids2 .section2 .inSection2 .circleCont {position:relative; margin:0 10px;} .smartallKids2 .section2 .inSection2 .circleTab ul li {position: absolute; width: 26%; height: 26%; z-index: 2; cursor: pointer;} .smartallKids2 .section2 .inSection2 .circleTab #m1{top:0; right: 22%;} .smartallKids2 .section2 .inSection2 .circleTab #m2{top: 22%; right: 0;} .smartallKids2 .section2 .inSection2 .circleTab #m3{bottom: 22%; right: 0;} .smartallKids2 .section2 .inSection2 .circleTab #m4{bottom: 0; right: 22%;} .smartallKids2 .section2 .inSection2 .circleTab #m5{bottom: 0; left: 22%;} .smartallKids2 .section2 .inSection2 .circleTab #m6{bottom: 22%; left: 0;} .smartallKids2 .section2 .inSection2 .circleTab #m7{top: 22%; left: 0;} .smartallKids2 .section2 .inSection2 .circleTab #m8{top:0; left:22%} .smartallKids2 .section2 .inSection2 .circleTab #m1.on{background: url(../images/brand/smartallKids2/mathbtn1_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m2.on{background: url(../images/brand/smartallKids2/mathbtn2_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m3.on{background: url(../images/brand/smartallKids2/mathbtn3_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m4.on{background: url(../images/brand/smartallKids2/mathbtn4_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m5.on{background: url(../images/brand/smartallKids2/mathbtn5_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m6.on{background: url(../images/brand/smartallKids2/mathbtn6_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m7.on{background: url(../images/brand/smartallKids2/mathbtn7_on.png) center/contain no-repeat;} .smartallKids2 .section2 .inSection2 .circleTab #m8.on{background: url(../images/brand/smartallKids2/mathbtn8_on.png) center/contain no-repeat;} .smartallKids2 .section4 .inSection{position: relative;} .smartallKids2 .section4 .inSection .gifWrap {position: absolute; transform: translateX(-50%);} .smartallKids2 .section4 .inSection1 .gifWrap {top: 47%; left: 49.9%; width: 23.6%;} .smartallKids2 .section4 .inSection2 .gifWrap {top: 47.4%; left: 49.8%; width: 23.6%} .smartallKids2 .section4 .inSection3 .gifWrap {bottom: 9.7%; left: 50%; width: 31.4%;} .smartallKids2 .section4 .inSection .gifWrap > img {border-radius: 5px;} .smartallKids2 .section4 .inSection3 .gifWrap > img {width: 100%; border-radius: 30px;} .smartallKids2 .section5 .inSection1 .readingTab {position: absolute; left: 50%; top: 25%; transform: translateX(-50%); width: 46%; height: 12.4%; display: flex; z-index: 1;} .smartallKids2 .section5 .inSection1 .readingTab li {display: block; height: 100%; width: 33.333%; cursor: pointer;} .smartallKids2 .section5 .inSection1 .readingTab li:nth-child(1) {width: 31%;} .smartallKids2 .section5 .inSection1 .readingTab li:nth-child(2) {width: 30%;} .smartallKids2 .section5 .inSection1 .readingTab li:nth-child(3) {width: 39%;} .smartallKids2 .section5 .inSection1 .readingCont {position: absolute;top: 22%;left: 50%;transform: translateX(-50%); width: 46%;} .smartallKids2 .section6 .inSection1 .allpangTab {position: absolute; left: 50%; top: 15%; transform: translateX(-50%); width: 46%; height: 16.4%; display: flex; z-index: 1;} .smartallKids2 .section6 .inSection1 .allpangTab li {display: block; height: 100%; width: 20%; cursor: pointer;} .smartallKids2 .section6 .inSection1 .allpangCont {position: absolute;top: 15%;left: 50%;transform: translateX(-50%); width: 46%;} .smartallKids2 .section7 .inSection1 .btnArea {position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); display: flex; margin: 0; width: 46%;} /********** 02_학습구성 **********/ /* 공통 */ #wrap[role="study"] #container {} #wrap[role="study"] #container .contents {padding-bottom:110px;} #wrap[role="study"] .locationArea {background-image:url(../IMAGES/PAGE/BG/SMARTALL.PNG); background-color: #f7f7f7; background-repeat: no-repeat; padding-bottom: 5%; position: relative; z-index: 1;} #wrap[role="study"] .tabTypeA {margin:0;} #wrap[role="study"] .section.tabArea {width: 100%; overflow: hidden; padding: 65px 0 10px; background: #f7f7f7; text-align: center;} #wrap[role="study"] .section.tabArea ul{width: 1260px; margin: 0 auto; } #wrap[role="study"] .section.tabArea ul li{margin-bottom: 10px; width: 20%;position: relative;} #wrap[role="study"] .section.tabArea ul li:before{content:''; position:absolute; left:0; top: 10px; width: 1px; height:20px; background: #bfbfbf;} #wrap[role="study"] .section.tabArea ul li:first-of-type:before, #wrap[role="study"] .section.tabArea ul li:nth-of-type(6):before, #wrap[role="study"] .section.tabArea ul li.on:before, #wrap[role="study"] .section.tabArea ul li.on + li:before{display: none;} #wrap[role="study"] .section.tabArea ul li a{display: block; padding: 16px 0; background: #fff; } #wrap[role="study"] .section.tabArea ul li:hover a, #wrap[role="study"] .section.tabArea ul li.on a{background: #f8901f; color: #fff;} #wrap[role="study"] .topicA {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#493a8a; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicA:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg1.png) no-repeat 0/100%;} #wrap[role="study"] .topicB {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#e95b3f; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicB:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg2.png) no-repeat 0/100%;} #wrap[role="study"] .topicC {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#325b99; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicC:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg3.png) no-repeat 0/100%;} #wrap[role="study"] .topicD {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#f6b220; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicD:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg4.png) no-repeat 0/100%;} #wrap[role="study"] .topicE {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#4db8a3; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicE:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg5.png) no-repeat 0/100%;} #wrap[role="study"] .topicF {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#f0901c; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicF:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg6.png) no-repeat 0/100%;} #wrap[role="study"] .topicG {position:relative; margin:0 auto 33px; padding:15px 0 13px; width:260px; text-align:center; background:#ef8fb3; color:#fff; font-size:26px; border-radius:30px; border-top-left-radius:50px; border-bottom-left-radius:0;} #wrap[role="study"] .topicG:before {content:''; position:absolute; left:0; bottom:-12px; width:42px; height:13px; background:url(../images/study/topicBg7.png) no-repeat 0/100%;} #wrap[role="study"] .titleA {display:inline-block; padding:15px 30px; background:#4db8a3; font-size:24px; font-weight:600; color:#fff; border-radius:28px;} #wrap[role="study"] .titleB {display:inline-block; padding:15px 30px; background:#e95b3f; font-size:24px; font-weight:600; color:#fff; border-radius:28px;} #wrap[role="study"] .subText {margin-bottom:50px; font-size:32px; line-height:1.4; font-weight:600; text-align:center;} #wrap[role="study"] .subText + .slideTypeA {padding-top:0;} #wrap[role="study"] .imgFrame {display:inline-block; padding:22px 16px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 4px 16px 4px #e6e6e6; background:#fff;} #wrap[role="study"] .imgArea {font-size:0; text-align:center;} #wrap[role="study"] .imgArea .imgFrame:nth-of-type(n+2) {margin-left:30px;} #wrap[role="study"] .contArrow {padding-top:0;} #wrap[role="study"] .contArrow:before {content:""; display:block; width:100%; height:110px; background:url(../images/common/ico_study_d.png) no-repeat center center;} .studyWrap .hl {text-align:left; font-size:44px; line-height:1.4em; color:#000;} .studyHead {padding:0 50px; margin:50px -50px 0; border-bottom:1px solid #3b3b3b;} .studyHead .srmy {padding-bottom:40px; font-size:44px; line-height:60px; color:#171717; background-position:100% 100%; background-repeat:no-repeat; } .smartBoxWrap {margin-bottom:-110px; padding-bottom:40px;} .smartBox {position:relative; width:1400px; height:414px; margin:120px -100px 0; background:url(../images/study/study_smartBg.png) no-repeat center bottom/100%;} .smartBox strong {display:block; padding-top:80px; text-align:center; font-size:44px; color:#fff; font-weight:600;} .smartBox .btnArea {width:1000px; margin:30px auto;} .smartBox .btnArea .free {display:inline-block; width:323px; height:95px; text-align:center; line-height:3.5em; background:#ff8024; margin-right:15px; border-radius:60px; font-size:28px; color:#fff; font-weight:600;} .smartBox .btnArea .pay {display:inline-block; width:323px; height:95px; text-align:center; line-height:3.5em; background:#4db8a3; border-radius:60px; font-size:28px; color:#fff; font-weight:600;} .study100 .smartBox, .aienglish .smartBox {margin-left:auto; margin-right:auto;} .studyWrap .studyTopArea04 {width:1400px; margin:0 auto; padding:50px 50px 0; background:url(../images/study/study_titimg04.png) no-repeat 100% bottom;} .studyWrap .studyTopArea04 > p {padding:50px; font-size:30px; line-height:1.3; border-bottom:1px solid #000;} .studyWrap .studyTopArea04 strong.hl {display:inline-block; margin-bottom:20px; line-height:1;} .studyWrap .studyTopArea04 b.hl {font-size:30px;} .studyWrap .studyTopArea06 {width:1200px; height:290px; margin:0 auto 50px; padding:50px; border-bottom:1px solid #3b3b3b; font-size:44px; background:url(../images/study/study_titimg06.png) no-repeat 700px bottom;} /* 오늘의학습 */ .todayStudy .head {height:372px; text-align:center;} .todayStudy .head .text1 {font-size:22px; line-height:1em; font-weight:600;} .todayStudy .head .text2 {margin:25px 0 0; font-weight:600; font-size:34px; line-height:46px;} .todayStudy .head .text2 strong {display:inline-block; margin-bottom:10px; font-size:60px;} .todayStudy .head .text3 {margin-bottom:18px; text-decoration:underline; font-size:30px; line-height:1em; color:#f7901e;} .todayStudy .srmyList {position:relative; height:336px;} .todayStudy .srmyList li {position:absolute; text-align:center;} .todayStudy .srmyList li .tit {margin-bottom:20px; font-weight:600; font-size:28px; line-height:1em; color:#fff;} .todayStudy .srmyList li p:not(.tit) {font-size:16px; line-height:24px; color:#fff;} .todayStudy .srmyList li p:not(.tit):before {display:none; content:""; width:4px; height:4px; margin:-2px 6px 0 0; border-radius:2px; vertical-align:middle; background:#fff;} .todayStudy .srmyList li:nth-child(1) {left:163px; top:92px; width:310px;} .todayStudy .srmyList li:nth-child(2) {left:430px; top:77px; width:340px;} .todayStudy .srmyList li:nth-child(3) {left:737px; top:77px; width:290px;} .todayStudy h3.point {height:200px; padding-top:80px; text-align:center; font-weight:600; font-size:40px; line-height:1em; color:#fff;} .todayStudy .pad {margin-top:90px;} .todayStudy .pad h4 {text-align:center;} .todayStudy .pad .srmy {margin-bottom:25px; text-align:center; font-weight:600; font-size:26px; line-height:1em; color:#171717;} .todayStudy .pad .slideTypeA {padding:10px 0 200px;} .todayStudy .pad .slideTypeA .slideSection .thum {padding:0; border:0; background:none;} .todayStudy .pad .slideTypeA .slideSection .thum img {width:auto; height:411px;} .todayStudy .pad .slideTypeA .btnSlidePrev, .todayStudy .pad .slideTypeA .btnSlideNext {top:190px;} /* 초등포털 */ .elementaryHead .srmy {font-size:44px; line-height:60px; color:#171717; background-image:url(../images/study/visual_elementary.png);} .elementary .studyContent {width:2000px; margin-left:-400px; padding:50px 0; text-align:center;} .elementary .studyContent p {text-align:center; margin-bottom:30px; font-size:33px; line-height:1.4;} .elementary .studyContent strong {font-size:44px; line-height:60px; color:#171717;} .elementary .studyContent1 {position:relative; padding-top:0;} .elementary .studyContent8 .imgFrame:nth-of-type(n+2) {margin-left:20px !important;} /* 독서포털 */ .reading .studyHead .srmy{padding:50px 0; background-image:url(../images/study/study_titimg09.png);} .reading .studyContent {padding:50px 0;text-align:center;} .reading .slideTypeA .slideList {height:500px;} .reading .slideTypeA .slideDots {position:absolute;left:0;bottom:0;width:100%;text-align:center;} /* 과목별 학교 공부-국어 */ .koreanHead {height:286px; padding-top:65px; margin-top:10px; background:url(../images/study/visual_korean.png) no-repeat 100% 0;} .koreanHead .srmy {margin-bottom:40px; font-size:44px; line-height:1em; color:#171717;} .koreanHead li {position:relative; padding-left:11px; margin-top:15px; font-weight:600; font-size:20px; line-height:1em; color:#171717;} .koreanHead li:before {content:""; position:absolute; left:0; top:7px; width:4px; height:4px; background:#171717; transform:rotate(45deg); transform-origin:50%;} .processSrmy {margin:80px -100px 0; padding:60px 0; width:1400px; background:#f5f5f5; border-radius:50px;} .processSrmy h3 {padding:0 0 20px; text-align:center; font-weight:600; font-size:40px; line-height:1em; color:#171717;} .processSrmy h4 {margin-top:40px; text-align:center;} .processSrmy .text {text-align:center; color:#626262; line-height:1em;} .processSrmy .srmy {margin:30px 0; font-weight:600; font-size:40px; line-height:54px; color:#171717; text-align:center;} .processSrmy .srmy .fn {font-size:22px;} .processSrmy ol {font-size:0; text-align:center;} .processSrmy ol li {display:inline-block; vertical-align:top;} .processSrmy ol li a {position:relative;} .processSrmy ol li:nth-of-type(n+2):before {content:"";display:inline-block; margin-left:-20px; width:36px; height:86px; background:url(../images/common/ico_process4.png) no-repeat 100% 50%;} .processSrmy > div {margin:0 auto; width:1200px; padding:20px; border-radius:75px;} .processSrmy > div:nth-of-type(n+2) {margin-top:40px;} .processSrmy > div strong {display:block; margin-bottom:15px; text-align:center; font-size:18px;} .processSrmy .basic {background:#d3e9e5;} .processSrmy .basic strong {color:#297d6c;} .processSrmy .complete {background:#f4d7d1;} .processSrmy .complete strong {color:#f15d43;} .processSrmy .test {background:#f5e8ca;} .processSrmy .test strong {color:#f7901e;} .processList {margin-top:40px; margin-left:-400px; width:2000px; background:url(../images/common/ico_study_d.png) no-repeat 50% 0;} .processList > li {position:relative; padding:60px 0 100px; text-align:center;} .processList > li h4 {padding-bottom:10px;} .processList .srmy {margin:15px 0 30px; font-weight:600; font-size:40px; line-height:54px; color:#171717;} .processList .srmy .fn {font-size:22px;} .processList .content {display:table; margin:0 auto; table-layout:fixed;} .processList .content p {position:relative; display:table-cell; padding:0 15px;} .processList .content p .thumb, .processList .videoWrap {display:inline-block; padding:22px 16px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 4px 16px 4px #e6e6e6; background:#fff;} .processList .content p .ac {display:block; margin-top:0; margin-bottom:20px; font-weight:600; font-size:24px; line-height:1em; color:#171717;} .processList .content p .caption {display:block; margin-top:25px; text-align:center; line-height:1.5;} .processList .content p .caption:before {content:''; display:inline-block; margin-right:5px; width:4px; height:4px; border-radius:50%; background:#000; vertical-align:middle;} .processList .process2 .content p {padding:0 10px;} .processList .process2 .content p .thumb {padding:16px 12px; box-shadow:4px 4px 12px 4px rgba(0,0,0,.2);} .processList .process2 .content p +p:before, .processList .process6 .content p +p:before {content:""; position:absolute; left:-66px; top:0; width:172px; height:18px; background:url(../images/common/ico_process.png) no-repeat 0 0;} .processList .process4 h4:nth-of-type(2) {margin-top:50px;} .processList .process5 .content > div {display:inline-block; padding:0 25px; height:480px; background:#f5f5f5; border-radius:30px;} .processList .process5 .content > .leftArea {margin-right:15px;} .processList .process5 .content p {padding:50px 0;} .processList .process5 .content p.plus {padding:0 10px;} .processList .process5 .content p.plus img {margin-top:90px;} .processList .process5 .content p .ac {position:absolute; top:5px; left:0; right:0;} .processList .process5 .content h4 {margin-top:-20px !important;} .processList .slideTypeA {margin-top:-80px;} .processList .slideTypeA .slideList {height:500px;} .processList .videoWrap {margin:30px auto 0;} .processList .videoWrap video {width:730px;} /* 과목별 학교 공부-수학 */ .mathHead {height:271px; margin-top:80px; background:url(../images/study/visual_math.png) no-repeat 100% 0;} .mathHead .srmy {font-size:44px; line-height:60px; color:#171717;} .mathInfo {margin-top:80px;} .mathInfo li {margin-top:50px; text-align:center;} .mathInfo li h3 {width:50px; height:50px; margin:0 auto; border-radius:50%; font-size:28px; line-height:50px; font-weight:700; text-align:center; color:#fff; background:#4db8a3;} .mathInfo li .srmy {margin:15px 0 10px; font-size:32px; line-height:44px;} .mathInfo li .text {font-size:18px; line-height:1em;} .mathInfo .diagram {margin-top:35px; overflow:hidden; text-align:center;} .mathInfo .diagram .head {display:inline-block; margin-right:30px; text-align:center;} .mathInfo .diagram .head h3 {margin-bottom:20px; font-size:24px; font-weight:600; color:#f15d43;} .mathInfo .diagram .head .caption {font-size:16px; line-height:26px;} .mathInfo .diagram .head .caption:before {content:""; display:inline-block; width:4px; height:4px; margin:-2px 5px 0 0; vertical-align:middle; background:#171717; transform:rotate(45deg); transform-origin:50%;} .mathInfo .diagram img {vertical-align:middle;} .mathProcess {width:1400px; height:694px; padding-top:60px; margin:120px -100px 0; text-align:center; background:url(../images/study/bg_mathProcess.png) no-repeat 50% 0;} .mathProcess h3 {margin-bottom:20px; font-size:40px; line-height:1em; font-weight:600; color:#171717;} .mathProcess .srmy {color:#4c4c4c;} .mathProcess ol {position:relative; width:1200px; margin:60px auto 0;} .mathProcess li {position:absolute; left:21px; top:11px;} .mathProcess li:nth-child(2) {left:321px;} .mathProcess li:nth-child(3) {left:622px;} .mathProcess li:nth-child(3) .text {margin-top:10px;} .mathProcess li:nth-child(4) {left:919px;} .mathProcess li:nth-child(5) {left:314px; top:194px;} .mathProcess li:nth-child(6) {top:235px;} .mathProcess li .text {text-align:center;} .mathProcess li .text strong {font-size:18px; line-height:1em; color:#2f8f7c;} .mathProcess li .text span {display:block; margin-top:10px; font-size:16px; line-height:1em;} .mathCont {padding-top:65px; margin-top:60px; background:url(../images/common/ico_study_d.png) no-repeat 50% 0;} .mathCont li {margin-bottom:120px; text-align:center;} .mathCont .srmy {margin:30px 0 15px; font-weight:600; font-size:40px; line-height:54px; color:#171717;} .mathCont .content {display:table; margin:50px auto 0; table-layout:fixed;} .mathCont .content p {position:relative; display:table-cell; padding:0 15px;} .mathCont .content p .tit {display:block; margin-bottom:20px; text-align:center; font-weight:600; font-size:24px; line-height:1em; color:#171717;} .mathCont .content p .thumb, .mathCont .content .videoWrap {display:inline-block; padding:22px 16px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 4px 16px 4px rgba(0,0,0,.2); background:#fff;} .mathCont .content p .text {display:block; margin-top:20px; text-align:center; font-size:16px; line-height:24px; color:#171717;} .mathCont .content p .text:before {content:""; display:inline-block; width:4px; height:4px; margin:-2px 5px 0 0; vertical-align:middle; background:#171717; transform:rotate(45deg); transform-origin:50%;} .mathCont .content p .text +.text {margin-top:10px;} .mathCont .content p +p:before {content:""; position:absolute; left:-66px; top:0; width:172px; height:18px; background:url(../images/common/ico_process.png) no-repeat 0 0;} .mathCont .content .videoWrap {display:block; margin:30px auto 0;} .mathCont .content .videoWrap video {width:730px;} .mathCont li +li {margin-top:120px;} .mathCont .typeB .content p {padding:0 10px;} .mathCont .typeB .content p .thumb {padding:16px 12px;} .mathCont .typeB .content +.content {margin-top:100px;} .mathCont .typeB .content +.content p:before {content:""; position:absolute; right:-66px; top:0; width:172px; height:18px; background:url(../images/common/ico_process2.png) no-repeat 0 0;} .mathCont .typeB .content +.content p +p:before {left:50%; top:-78px; width:18px; height:60px; margin-left:-9px; background-image:url(../images/common/ico_process3.png);} /* 과목별 학교 공부-사회.과학, 통합교과 */ #container.subject3 .contents {} .subject3 .processSrmy .text {margin-bottom:30px;} .subject3 .processSrmy ol li:nth-of-type(n+2):before {height:104px;} .subject3 .processSrmy .complete {margin-top:0;} .subject3 .processSrmy .downArr {display:block; text-align:center;} .societyHead {height:222px; margin-top:70px; background:url(../images/study/visual_society.png) no-repeat 100% 5px;} .societyHead .srmy {margin-bottom:40px; font-size:44px; line-height:60px; color:#171717;} .processList2 {margin-top:60px; margin-left:-400px; width:2000px; background:url(../images/study/bg_sosc.jpg) no-repeat 50% -25px/2000px;} .processList2:before {content:''; display:block; width:100%; height:65px; background:url(../images/common/ico_study_d.png) no-repeat 50% 0;} .processList2 h3 {margin-bottom:40px;} .processList2 > li {padding-bottom:120px; text-align:center;} .processList2 > li + li {padding-top:120px;} .processList2 .srmy {margin:30px 0 15px; font-weight:600; font-size:40px; line-height:54px; color:#171717;} .processList2 .text {margin:15px 0 55px; font-size:22px; line-height:32px; color:#171717;} .processList2 .content {margin:50px auto 0; width:1200px;} .processList2 .content p {position:relative; display:inline-block; padding:0 15px;} .processList2 .content p:nth-of-type(n+3) {padding-top:15px;} .processList2 .content p .thumb, .processList2 .content .videoWrap {display:inline-block; padding:22px 16px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 4px 16px 4px rgba(0,0,0,.2); background:#fff;} .processList2 .content p {padding:0 10px;} .processList2 .content p .thumb {padding:16px 12px;} .processList2 .content p .caption {display:block; margin-top:20px; text-align:center; font-size:16px; line-height:24px; color:#171717;} .processList2 .content p .caption:before {content:""; display:inline-block; width:4px; height:4px; margin:-2px 5px 0 0; vertical-align:middle; background:#171717; transform:rotate(45deg); transform-origin:50%;} .processList2 .content .tit {display:block;} .processList2 .content .tit .sub {display:block; margin-top:10px; font-size:22px;} .processList2 .content .videoWrap {margin:30px auto 0;} .processList2 .content .videoWrap video {width:730px;} .processList2 .societyCont3 .content + .content {margin-top:120px;} .processList2 .societyCont4 {padding-bottom:0;} .processList2 .societyCont6 .content p .ac {display:block; margin-top:0; margin-bottom:20px; font-weight:600; font-size:24px; line-height:1em; color:#171717;} .processList2 .societyCont6 .content p +p:before {content:""; position:absolute; left:-66px; top:0; width:172px; height:18px; background:url(../images/common/ico_process.png) no-repeat 0 0;} .subject3 .processSrmy > *, .subject4 .processSrmy > * {position:relative;} .subject3 .processSrmy, .subject4 .processSrmy {position:relative; overflow:hidden;} .subject3 .processSrmy:before, .subject4 .processSrmy:before {content:''; position:absolute; bottom:-210px; left:-180px; width:450px; height:400px; border-radius:50%; background:#ececec;} .subject3 .smartBoxWrap .smartBox {margin-top:0;} #container.subject4 .contents {padding-bottom:0;} .subject4 .processList2 {background:#f5f5f5 url(../images/study/bg_unite.jpg) no-repeat 50% -25px/2000px;} .subject4 .processSrmy .text {margin-bottom:30px;} .subject4 .processSrmy ol li:nth-of-type(n+2):before {height:104px;} .subject4 .uniteCont2 {padding-top:0;} .subject4 .uniteCont5 .tit {margin-bottom:20px;} .subject4 .smartBoxWrap {width:2000px; margin-left:-400px; background:#f5f5f5;} .subject4 .smartBoxWrap .smartBox {margin:0 auto;} .uniteHead {height:233px; padding:0 50px 0; margin:70px -50px 0; border-bottom:1px solid #3b3b3b; background:url(../images/study/visual_unite.png) no-repeat 100% 0;} .uniteHead .srmy {margin-bottom:40px; font-size:44px; line-height:60px; color:#171717;} .uniteHead .srmy .subscript {position:absolute; left:140px; bottom:-50px; width:100%; font-size:18px;} /* 학교 시험대비, 학습플러스, 초등공감 */ .studyWrap .studyArea {padding:100px 0px 50px; margin:0 auto; background:url(../images/common/ico_study_d.png) no-repeat center 0; text-align:center;} .studyWrap .studyArea .studyCont {display:inline-block; margin-bottom:80px;} .studyWrap .studyArea .studyCont:nth-of-type(2n) {margin-left:52px;} .studyWrap .studyArea .studyCont .imgTitle {display:block; margin-top:20px; font-size:24px; text-align:center;} .studyWrap .studyArea .studyCont.white {margin-top:30px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 8px 9px #e6e6e6; border-radius:8px; background:#fff;} .studyWrap .studyArea .studyCont.shadow {box-shadow:6px 8px 11px rgba(0, 0, 0, 0.1)} .studyWrap .studyArea .studyCont.white img {background:#fff; border:none; border-radius:8px; box-shadow:none; padding:20px 14px;} .studyWrap .studyArea .studyCont .title, .studyWrap .studyArea .studyContB .title {width:280px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg.png) no-repeat center center;} .studyWrap .studyArea .studyContB .stitle {width:180px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg_s.png) no-repeat center center;} .studyWrap .studyArea .studyCont strong {display:table-cell; width:500px; height:130px; vertical-align:middle; text-align:center; font-weight:600; font-size:28px; color:#000; line-height:1.5em; letter-spacing:-0.5px;} .studyWrap .studyArea .studyCont img {display:block; padding:20px 15px; margin:0 auto; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 8px 9px #e6e6e6; background:#fff;} .studyWrap .studyArea .studyCont img.noDeco {border:0; padding:0; margin:0; border-radius:0; box-shadow:none;} #wrap[role="study"] .schooltest .topicA {width:200px;} #wrap[role="study"] .schooltest .subText {font-size:40px !important;} .schooltest .studyHead .srmy {background-image:url(../images/study/study_titimg02.png);} .schooltest .studyContent {padding:50px 0;} .schooltest .studyContent1 {padding-top:0;} .schooltest .studyContent ul {text-align:center; margin-top:-40px;} .schooltest .studyContent ul li {color:#000; font-size:22px; line-height:36px; font-weight:600;} .schooltest .imgArea {margin-top:40px;} .schooltest .imgArea .imgWrap {display:inline-block;} .schooltest .imgArea .imgWrap:nth-of-type(2n) {margin-left:30px;} #wrap[role="study"] .empathize .topicA {margin-bottom:10px; width:280px;} #wrap[role="study"] .empathize .subText {display:table-cell; width:500px; height:130px; vertical-align:middle; font-size:28px; line-height:1.5em; letter-spacing:-0.5px;} .empathize .studyHead .srmy {padding:82px 0; background-image:url(../images/study/study_titimg07.png);} .empathize .studyContentWrap {text-align:center; font-size:0;} .empathize .studyContentWrap .studyContent {display:inline-block;} .empathize .studyContentWrap .studyContent:nth-of-type(n+3) {padding-top:80px;} .empathize .studyContentWrap .studyContent:nth-of-type(2n) {margin-left:50px;} #wrap[role="study"] .studyplus .topicA {margin-bottom:10px; width:280px;} #wrap[role="study"] .studyplus .subText {display:table-cell; width:500px; height:130px; vertical-align:middle; font-size:28px; line-height:1.5em; letter-spacing:-0.5px;} .studyplus .studyHead .srmy {padding:55px 0; background-image:url(../images/study/study_titimg06.png);} .studyplus .studyContentWrap {text-align:center; font-size:0;} .studyplus .studyContentWrap .studyContent {display:inline-block;} .studyplus .studyContentWrap .studyContent:nth-of-type(n+3) {padding-top:80px;} .studyplus .studyContentWrap .studyContent:nth-of-type(2n) {margin-left:50px;} /* 서술형 트레이닝 */ .training .studyHead .srmy {padding:82px 0; background-image:url(../images/study/study_titimg03.png);} .training .trainArea .trainCont {position:relative; text-align:center;} .training .trainArea .trainCont:nth-of-type(n+2) {padding-top:80px;} .training .trainArea .trainCont strong {display:block; text-align:center; font-weight:600; font-size:28px; color:#000; line-height:1.5em; letter-spacing:-0.5px;} .training .trainArea .trainCont h3.big span {display:inline-block; padding:40px 0px 40px 120px; font-size:40px; font-weight:600;} .training .trainArea .trainCont .one span {background:url(../images/common/ico_training01.png) no-repeat 0 50%;} .training .trainArea .trainCont .two span {background:url(../images/common/ico_training02.png) no-repeat 0 50%;} .training .trainArea .trainCont .three span {background:url(../images/common/ico_training03.png) no-repeat 0 50%;} .training .trainArea .trainCont ul {margin-bottom:30px; text-align:center;} .training .trainArea .trainCont ul li {font-size:22px; color:#000; font-weight:600; line-height:28px;} /* ai 영어 마스터*/ .studyWrap.ai {width:100%} .studyWrap.ai .studyArea {max-width:1670px; width:auto; position:relative; margin:0 auto; padding:0;} .aienglish .smartBox {margin-top:0;} .aienglish .studyWrap .studyArea .studyCont {position:relative; margin:20px 30px 0 0;} .studyWrap .levelCheck {position:relative; padding:70px 0 120px; text-align:center;} #wrap[role="study"] .aienglish .studyWrap .levelCheck .subText{font-weight:500; font-size:30px;} #wrap[role="study"] .aienglish .studyWrap .levelCheck .subText .subTitle{font-size:48px;line-height:2.2;} .studyWrap .studyArea .englishArea {position:relative; width:100%; margin:0 auto; border-radius:50px; padding-bottom:65px;} .studyWrap .studyArea .englishArea:last-child {margin-bottom:0;} .studyWrap .studyArea .englishArea.gray {background:#f5f5f5; border-bottom-right-radius:300px;} .studyWrap .studyArea .englishArea.gray:after {right:0; background:#f5f5f5; border-bottom-right-radius:90px;} .studyWrap .studyArea .englishArea.orange {background:#ffeddf; border-bottom-left-radius:300px;} .studyWrap .studyArea .englishArea.orange:after {left:0; background:#ffeddf; border-bottom-left-radius:90px;} .studyWrap .studyArea .englishArea.orange .studyCont{margin:0;} .studyWrap .studyArea .englishArea.orange .studyCont img{background: transparent;} .studyWrap .studyArea .englishArea.orange .studyCont{margin:0;} .studyWrap .studyArea .englishArea.white .studyCont.gray .subTitle{position:absolute; left:50%; width:320px; height:75px; margin:-30px 0 0 -160px; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg2.png) no-repeat center center;} .studyWrap .studyArea .englishArea.white .studyCont ul{width:1174px; padding:34px 0 94px; text-align: center; background: #f5f5f5; border-radius: 100px;} .studyWrap .studyArea .englishArea.white .studyCont ul li{display: inline-block;} .studyWrap .studyArea .englishArea.white .studyCont ul li:nth-child(2n+1){margin-right: 25px;} .studyWrap .studyArea .englishArea.white .studyCont ul li:nth-child(2n), .studyWrap .studyArea .englishArea.white .studyCont ul li:last-child{margin-right: 0;} .studyWrap .studyArea .englishArea.white .studyCont ul li p{display:inline-block; width:340px; margin:60px 0 18px; padding: 16px 0; font-size:24px; color:#fff; font-weight:600; border-radius:30px; background:#4db8a3;} .studyWrap .studyArea .englishArea.white .studyCont.gray{margin-top:60px;} .studyWrap .studyArea .englishArea.white .studyCont.gray2{margin-top:90px;} .studyWrap .studyArea .englishArea.white .studyCont.gray2 .subTitle{position:absolute; left:50%; width:320px; height:75px; margin:-30px 0 0 -160px; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg3.png) no-repeat center center;} .studyWrap .studyArea .englishArea.white .studyCont.gray2 ul li p{background:#0b7f94;} .studyWrap .studyArea .englishArea.skyblue {background:#dcf7ff; border-bottom-right-radius:300px;} .studyWrap .studyArea .englishArea.skyblue:after {right:0; background:#dcf7ff; border-bottom-right-radius:90px;} .studyWrap .studyArea .englishArea.skyblue .studyCont p{margin:60px 0 25px; font-size: 32px;} .studyWrap .studyArea .englishArea.skyblue .studyCont ul li{padding-bottom:10px; font-size: 26px;} .studyWrap .studyArea .englishArea.yellow {background:#fdfacf; border-bottom-left-radius: 300px;} .studyWrap .studyArea .englishArea.yellow:after {left:0; background:#fdfacf; border-bottom-left-radius:90px;} .studyWrap .studyArea .englishArea.emerald {background:#dcf7ef; border-bottom-right-radius:300px;} .studyWrap .studyArea .englishArea.emerald:after {right:0; background:#dcf7ef; border-bottom-right-radius:90px;} .studyWrap .studyArea .englishArea.emerald ul li p{display:inline-block; width:340px; margin:0 0 18px; padding: 16px 0; font-size:24px; color:#fff; font-weight:600; border-radius:30px; background:#4db8a3;} .studyWrap .studyArea .englishArea.emerald ul{text-align: center;} .studyWrap .studyArea .englishArea.emerald ul li{display:inline-block; width: 500px; margin-right:30px;} .studyWrap .studyArea .englishArea.emerald ul li:nth-child(2n){margin-right:0;} .studyWrap .studyArea .englishArea.emerald ul li div{margin-top: 30px; font-size: 26px;} .studyWrap .studyArea .englishArea .englishCont {position:relative; text-align:center; z-index:1;} .studyWrap .studyArea .englishArea .englishCont .title {width:280px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg.png) no-repeat center center;} .studyWrap .studyArea .englishArea.gray .englishCont {width:1200px; margin:0 auto; z-index:1;} .studyWrap .studyArea .englishArea.gray .englishCont .title {background:url(../images/common/ico_study_d.png) no-repeat center 50px;} .studyWrap .studyArea .englishArea .subText {padding-top:30px; font-weight:500 !important;} .studyWrap .studyArea .englishArea .subText .refer {font-size:26px; font-weight: 600;} .studyWrap .studyArea .englishArea .subText ul {margin-top:10px;} .studyWrap .studyArea .englishArea .subText ul li {text-align:center; font-weight:500; font-size:26px; color:#000; line-height:1.5em; letter-spacing:-0.5px;} .studyWrap .studyArea .englishArea .englishCont .stitle {width:180px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg_s.png) no-repeat center center;} .studyWrap .studyArea .englishArea .englishCont .btitle {width:330px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg_b.png) no-repeat center center;} .studyWrap .studyArea .englishArea .englishCont strong {display:block; padding:30px 0; text-align:center; font-size:32px; color:#000; line-height:1.5em; letter-spacing:-0.5px;} .studyWrap .studyArea .englishArea .englishCont strong > span {color:#ff7a00; font-size:33px; font-weight:700;} .studyWrap .studyArea .englishArea .char02:before {content:""; position:absolute; top:75px; right:-250px; width:227px; height:190px; background:url(../images/study/study_char02.png) no-repeat center center;} .studyWrap .studyArea .englishArea .englishCont .subCont strong {padding:60px 0 15px;} .studyWrap .studyArea .englishArea {min-width:1200px; border-radius:0 ; border-top-left-radius:90px; border-top-right-radius:90px; padding:120px 0 210px; margin-bottom:-90px; background:#fff;} /* .studyWrap .studyArea .englishArea:nth-of-type(2n):before {content:'';position:absolute !important; backgorund:none !important; width:90px; height:90px; background:red;} */ .studyWrap .studyArea .englishArea:after {content:''; position:absolute; bottom:90px; width:190px; height:190px;} .studyWrap .studyArea .englishArea.skyblue:after {} .aienglish .contents.aienglish .smartBoxWrap{position: relative; max-width: 1670px; margin: -90px auto 0; padding-top: 100px; background: #fff; border-radius: 90px;} /*올링고 영어 box-shadow 삭제*/ .studyWrap.ai .studyCont.shadow, .studyWrap.ai .studyCont.white, .studyWrap.ai .studyCont img{box-shadow: none;} /* ai 수학 마스터*/ .aimath .studyWrap {width:1260px; padding:0 30px; margin:0 auto;} .aimath .studyWrap .srmy {position:relative; height:154px; padding-top:45px; text-align:center; font-size:44px; line-height:1em; color:#171717;} .aimath .studyWrap .srmy:after {content:""; position:absolute; left:50%; bottom:0; width:30px; height:29px; margin-left:-15px; background:url(../images/common/ico_study_d.png) no-repeat 0 0;} .aimath .recommend {position:relative; height:1339px;} .aimath .recommend h3 {position:absolute; top:-12px; right:-120px;} .aimath .recommend .course {position:relative; height:645px; padding:150px 0 0 600px;} .aimath .recommend .course .thumb {position:absolute; left:17px; top:150px; padding:24px 17px; border:2px solid #c0bebc; border-radius:15px; box-shadow:5px 5px 5px rgba(0,0,0,.2); background:#fff;} .aimath .recommend .course .tit {margin-top:10px; font-size:32px; line-height:54px; color:#171717;} .aimath .recommend .course .tit strong {font-size:42px;} .aimath .recommend .course ul {overflow:hidden; margin-top:35px;} .aimath .recommend .course ul li {position:relative; float:left; width:33.3%; padding-left:17px; margin-bottom:25px; font-size:20px; line-height:1em;} .aimath .recommend .course ul li:before {content:""; position:absolute; left:4px; top:8px; width:4px; height:4px; border-radius:2px; background:#171717;} .aimath .recommend .course ul li span {display:inline-block; padding-bottom:4px; font-weight:600;} .aimath .recommend .caption {font-size:32px; line-height:54px; color:#171717;} .aimath .recommend .caption strong {font-size:42px;} .aimath .recommend .caption1 {width:625px; height:305px; text-align:right;} .aimath .recommend .caption2 {padding-left:575px;} .aimath .recommendList {padding-top:86px;} .aimath .recommendList:after {content:""; display:block; clear:both;} .aimath .recommendList li {position:relative; float:left; margin-bottom:110px;} .aimath .recommendList li:nth-of-type(2n-1) {width:55%;} .aimath .recommendList li:nth-of-type(3), .aimath .recommendList li:nth-of-type(4) {margin-bottom:160px;} .aimath .recommendList li .textArea {height:103px; margin:-50px 0 0 65px;} .aimath .recommendList li .text {position:relative; padding-left:14px; font-size:20px; font-weight:600; line-height:1em;} .aimath .recommendList li .text +.text {margin-top:25px;} .aimath .recommendList li .text:before {content:""; position:absolute; left:4px; top:8px; width:4px; height:4px; border-radius:2px; background:#171717;} .aimath .recommendList li .thumb {float:left; padding:22px 16px; margin-left:9px; border:2px solid #c0bebc; border-radius:15px; box-shadow:5px 5px 5px rgba(0,0,0,.2); background:#fff;} .aimath .recommendList li:nth-child(6):after {content:""; position:absolute; right:-77px; bottom:-65px; width:111px; height:134px; background:url(../images/study/ico_aimath.png) no-repeat 0 0;} .aimath .recommendList li:nth-child(7) {margin-bottom:354px;} .aimath .recommendList li:nth-child(7) .textArea {height:70px;} .aimath .recommendList li:last-child {margin-bottom:250px;} .aimath .recommendList li:last-child .textArea {height:180px;} .aimath .recommendList li:last-child .text{line-height: 1.4;} .aimath .recommendList li:last-child .text:before{top:12px;} .aimath .smartBox {margin:0 auto;} /* 독서플러스 */ .studyWrap .studyArea.read {position:relative; width:100%;} .readplus .studyHead .srmy {padding:50px 0; background-image:url(../images/study/study_titimg05.png);} .readplus .contents.study .studyArea.read {padding:110px 0 0; background-position:50% 45px;} .readplus .contents.study100 .studyArea.read {padding:0; background:none;} .studyWrap .studyArea.read .slideTypeA {margin:-80px 0 65px;} .studyWrap .studyArea .studyContB{width:100%;} .studyWrap .studyArea .studyContB.title {width:280px; height:75px; margin:0 auto; text-align:center; font-size:26px; color:#fff; font-weight:600; line-height:70px; background:url(../images/common/ico_study_tit_bg.png) no-repeat center center;} .studyWrap .studyArea .studyContB strong {display:block; padding:20px 0 50px; text-align:center; font-weight:600; font-size:28px; color:#000; line-height:1.5em; letter-spacing:-0.5px;} .studyWrap .studyArea .studyContB strong.big {font-size:40px;} .studyWrap .studyArea .studyContB strong.big span {color:#ff7a00; font-weight:600;} .studyWrap .studyArea .studyContB ul {text-align:center; margin-top:-40px;} .studyWrap .studyArea .studyContB ul li {color:#000; font-size:22px; line-height:36px; font-weight:600;} .studyWrap .studyArea .studyContB .subjectArea {width:1130px; margin:40px auto; text-align:center;} .studyWrap .studyArea .studyContB .subjectArea .subjectCont {display:inline-block; position:relative; margin-right:30px; margin-bottom:60px;} .studyWrap .studyArea .studyContB .subjectArea .subjectCont:nth-of-type(2n) {margin-right:0;} .studyWrap .studyArea .studyContB .subjectArea .subjectCont .subject {width:217px; height:59px; margin:0 auto 20px; text-align:center; color:#fff; font-size:24px; font-weight:600; line-height:60px; background:url(../images/study/study_subjectBg.png) no-repeat 0 0; } .studyWrap .studyArea .studyContB .subjectArea .subjectCont .thum {display:inline-block; padding:22px 16px; border:2px solid #bfbfbf; border-radius:10px; box-shadow:4px 4px 16px 4px rgba(0,0,0,.2); background:#fff;} .studyWrap .studyArea .slideTypeA {margin-top:-50px; margin-bottom:-50px;} .studyWrap .studyArea .slideTypeA .slideList {height:500px;} .study100 .studyWrap {width:1200px; margin:0 auto;} .studyWrap .studyArea .read {display:block; margin:70px auto;} .readplus {} .readplus .slideTypeA .slideList {height:500px;} .readplus .studyContent {padding:50px 0; text-align:center;} .readplus .studyContent h4 {display:block !important; margin:0 auto 20px; width:217px;} .readplus .studyContent .cont {display:inline-block;} .readplus .studyContent .cont h4 {padding-bottom:20px;} .readplus .studyContent .cont:nth-of-type(n+3) {margin-top:50px;} .readplus .studyContent .cont:nth-of-type(2n) {margin-left:30px;} .readplus .studyContent4 {margin-bottom:0; margin-left:-400px; padding-bottom:0; width:2000px;} .readplus .studyContent4 .smartBox {margin:120px auto 0;} .readplus .albumArea {position:relative; width:1054px; height:820px; margin:0 auto 50px; background:url(../images/study/study_readBg.png) no-repeat center center;} .readplus .albumArea .albumCont {width:350px; height:350px; text-align:center;} .readplus .albumArea .albumCont strong {display:block; color:#fff; font-size:34px; font-weight:600; line-height:2em;} .readplus .albumArea .albumCont p {display:block; color:#fff; font-size:20px; line-height:30px;} .readplus .albumArea .albumCont .share {position:absolute; top:120px; left:440px;} .readplus .albumArea .albumCont .homework {position:absolute; top:560px; left:130px;} .readplus .albumArea .albumCont .push {position:absolute; top:560px; right:166px;} /* 검색왕 */ .searchking .pictogram {margin-left:-100px; margin-top:50px;} .searchking .searchHead .srmy {padding:40px 0; font-size:44px; line-height:60px; color:#171717; background-image:url(../images/study/visual_search.png); background-position:100% 30%;} .searchking .studyContent {text-align:center; font-size:0;} .searchking .studyContent:nth-of-type(n+2) {padding-top:80px;} .searchking .studyContent .cont {display:inline-block;} .searchking .studyContent .cont .titleA {margin-bottom:20px;} .searchking .studyContent .cont:nth-of-type(2n) {margin-left:22px;} .searchking .studyContent .cont:nth-of-type(n+3) {margin-top:50px;} /********** 03_학습자료실 **********/ /* 자료실 검색 폼 -- 공통*/ .dataForm .searchForm {width:1200px;} .dataForm .searchGuide {color:blue; font-weight: 600; padding-top:20px; position: absolute; top:100px;} .dataForm .searchForm th, #wrap[role="examData"] .searchForm td {text-align:left;} .dataForm .searchForm th {position:relative; padding-left:50px; font-size:18px; font-weight:600;} .dataForm .searchForm tr:first-child th:nth-of-type(n+2):before {content:''; position:absolute; top:20px; left:0; height:20px; width:1px; background:#bfbfbf;} .dataForm .searchForm td {padding:10px 50px 10px 0;} .dataForm .searchForm td .euiSelect, .dataForm .searchForm td input {width:100%;} #wrap[role="studyData"] .dataForm {margin-top:50px;padding:20px 0; border-top:2px solid #000; border-bottom:1px solid #bfbfbf;} #wrap[role="studyData"] .dataList .list {margin-top:80px;} #wrap[role="studyData"] .dataList .list:after {content:''; display:block; clear:both;} #wrap[role="studyData"] .dataList .list > li {float:left; margin-right:15px; width:390px; border:1px solid #bfbfbf; border-radius:13px; overflow:hidden;} #wrap[role="studyData"] .dataList .list > li.noContents {border:none;} #wrap[role="studyData"] .dataList .list > li:nth-of-type(3n) {margin-right:0;} #wrap[role="studyData"] .dataList .list > li:nth-of-type(n+4) {margin-top:40px;} #wrap[role="studyData"] .dataList .list > li.sample .thum:before {content:'샘플 콘텐츠'; position:absolute; top:20px; left:20px; padding:13px 10px; width:82px; height:82px; font-size:15px; color:#fff; line-height:1.4; text-align:center; background:#5f44a7; border-radius:50%; border:5px solid #fff; box-sizing:border-box; word-break:keep-all;} #wrap[role="studyData"] .dataList .list > li .thum {position:relative; width:390px; height:220px; border-radius:10px; overflow:hidden;} #wrap[role="studyData"] .dataList .list > li .thum:after {content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#000; background:rgba(0, 0, 0, 0.7) url(../images/common/ico_play.png) no-repeat center/ auto; transition:all 0.3s;} #wrap[role="studyData"] .dataList .list > li:hover .thum:after {top:0;} #wrap[role="studyData"] .dataList .list > li .thum img {width:100%;} #wrap[role="studyData"] .dataList .list > li .cont {position:relative; height:150px; padding:25px 25px 0; text-align:center;} #wrap[role="studyData"] .dataList .list > li .cont .title strong {max-height:52px; font-size:20px; word-break:break-word; line-height:1.3; color:#f7901e;} #wrap[role="studyData"] .dataList .list > li .cont .title span {margin-top:10px; color:#4c4c4c; font-size:18px;} #wrap[role="studyData"] .dataList .list > li .cont .desc {position:absolute; left:0; bottom:0; padding:10px 0; width:100%; background:#f5f5f5; color:#838383; font-size:16px;} #wrap[role="studyData"] .dataList .list > li .cont .desc span:nth-of-type(n+2) {margin-left:10px; padding-left:10px; border-left:1px solid #bfbfbf;} #wrap[role="studyData"] .detail .title .desc {margin-top:12px; color:#838383; font-size:16px;} #wrap[role="studyData"] .detail .title .desc span:nth-of-type(n+2) {margin-left:10px; padding-left:10px; border-left:1px solid #bfbfbf;} /********** 04_시험자료실 **********/ #wrap[role="examData"] {} #wrap[role="examData"] .dataForm {margin-top:50px;padding:20px 0; border-top:2px solid #000; border-bottom:1px solid #bfbfbf;} #wrap[role="examData"] .caution {margin:50px 0 30px; padding:25px 0; font-size:14px; background:#f5f5f5; border-radius:10px; text-align:center;} #wrap[role="examData"] .caution b {font-size:16px;} #wrap[role="examData"] .caution a {display:inline-block; margin-left:30px; padding:10px 35px; border:1px solid #bfbfbf; border-radius:19px; background:#fff; color:#838383; font-size:15px; font-weight:600;} #wrap[role="examData"] .caution a:before {content:''; display:inline-block; margin-right:10px; width:17px; height:17px; background:url(../images/common/ico_chrome.jpg) no-repeat 0 /100%; vertical-align:middle;} #wrap[role="examData"] .listTypeA {margin-top:0;} #wrap[role="examData"] .listTypeA .sample td {background:#f5f5f5;} #wrap[role="examData"] .listTypeA .sample td:first-child {color:#f7901e;} #wrap[role="examData"] .listTypeA td.sort {font-weight:500;} /*#wrap[role="examData"] .listTypeA td.unitName span {width:324px;}*/ #wrap[role="examData"] .listTypeA td.noContents {box-shadow:none;} #wrap[role="examData"] .listTypeB {padding-top:50px; font-size:0; border-top:2px solid #424242;} #wrap[role="examData"] .listTypeB > li {position:relative; display:inline-block; padding:40px 45px 50px; width:390px; height:708px; margin-right:15px; border:1px solid #bfbfbf; font-size:15px; border-radius:20px; text-align:center; vertical-align:top;} #wrap[role="examData"] .listTypeB > li.sample:before {content:'샘플 콘텐츠'; position:absolute; top:20px; left:20px; padding:13px 10px; width:82px; height:82px; font-size:15px; color:#fff; line-height:1.4; text-align:center; background:#5f44a7; border-radius:50%; border:5px solid #fff; box-sizing:border-box; word-break:keep-all;} #wrap[role="examData"] .listTypeB > li:nth-of-type(3n) {margin-right:0;} #wrap[role="examData"] .listTypeB > li:nth-of-type(n+4) {margin-top:40px;} #wrap[role="examData"] .listTypeB > li .thum {height:410px; text-align:center;} #wrap[role="examData"] .listTypeB > li .thum img {max-width:300px; max-height:410px; box-shadow:5px 5px 15px #aaa8a8;} #wrap[role="examData"] .listTypeB > li .cont {display:inline-block; margin-top:50px;} #wrap[role="examData"] .listTypeB > li .cont strong {display:inline-block; min-width:250px; padding-bottom:5px; margin:0 auto; border-bottom:2px solid #171717; font-size:24px; line-height:32px; font-weight:700; word-break:break-all;} #wrap[role="examData"] .listTypeB > li .cont .btnArea {margin-top:10px;} #wrap[role="examData"] .listTypeB > li .cont .btnArea p + p {border-top:1px solid #bfbfbf;} #wrap[role="examData"] .listTypeB > li .cont .btnArea a {display:block; padding:15px 0; font-size:20px; color:#838383} #wrap[role="examData"] .listTypeB > li .cont .downBtn:before {content:''; display:inline-block; margin-right:10px; width:23px; height:22px; background:url(../images/customer/down_1.png) no-repeat 0/auto; vertical-align:middle;} #wrap[role="examData"] .listTypeB > li .cont .viewBtn:before {content:''; display:inline-block; margin-right:10px; width:23px; height:22px; background:url(../images/customer/down_2.png) no-repeat 0/auto; vertical-align:middle;} #wrap[role="examData"] .pop.imgPop {top:0; left:0; max-width:95%; transform:none;} #wrap[role="examData"] .imgPop .contents img {max-width:100%;} /********** 05_학습후기 **********/ #wrap[role="review"] {} .bestReview .detail {border-top:0;} .bestReview .detail > .cont {position:relative; margin-top:-30px; padding-top:70px; border-top-right-radius:35px; background:#fff;} .reviewHead {position:relative; padding-top:75px; text-align:center;} .reviewHead img {max-width:100%;} .reviewHead + .bestReviewList {margin-top:-30px; padding-top:70px; border-top-right-radius:35px;} .bestReviewList {position:relative; background:#fff; padding-top:50px;} .bestReviewList .list:after {content:''; display:block; clear:both;} .bestReviewList .list > li {position:relative; margin-right:90px; float:left; width:340px; border-radius:20px; overflow:hidden;} .bestReviewList .list > li:nth-of-type(3n) {margin-right:0;} .bestReviewList .list > li .thum {height:216px; overflow:hidden;} .bestReviewList .list > li .thum .img {height:100%; background-position:0; background-size:100% auto;} .bestReviewList .list > li .thum .img {transition:all 1.5s;} .bestReviewList .list > li > a:hover .thum .img {transform:scale(1.1);} .bestReviewList .list > li .thum img {width:100%;} .bestReviewList .list > li .cont {position:relative; margin-top:-30px; height:110px; margin-bottom:40px; padding:25px 30px; border-top-left-radius:46px; background:#fff;} .bestReviewList .list > li .cont:before {content:''; position:absolute; top:-1px; left:-4px; width:100%; height:100%; border-top:5px solid #f3d767; border-left:4px solid #f3d767; border-top-left-radius:50px;} .bestReviewList .list > li .cont .tit {max-height:52px; margin-bottom:8px;} .bestReviewList .list > li .cont strong {font-size:20px; font-weight:600; line-height:26px; word-break:break-all;} .bestReviewList .list > li .cont .info {margin-top:15px; font-size:16px;} .bestReviewList .list > li .cont .school {margin-left:10px; padding-left:10px; border-left:1px solid #bfbfbf; color:#979797;} .realReviewList table .title a {width:600px;} .realReview .head {margin:50px 0 25px; font-weight:600; font-size:20px;} .realReview .head + .listTypeA {margin-top:0;} .realReview .dataForm .btnArea {margin-top:20px;} .realReview .dataForm .btnArea p {margin-bottom:20px; text-align:right;} .realReview .detail .btnArea {text-align:right; margin-bottom:20px;} .realReview .realReviewList + .btnArea {margin-top:30px; text-align:right;} .realReview .writeBtn {font-size:20px;} .realReview .writeBtn:after {content:''; display:inline-block; width:26px; height:24px; background:url(../images/common/ico_write_1.png) no-repeat 0/auto; vertical-align:bottom;} /* 스마트올 스타 장학생 후기 */ #wrap[role="review"] .starReview{} #wrap[role="review"] .starReview .contents{padding:0;} .starReview .locationArea{display: none;} .starReview .ml370{margin-left: -370px;} .starReview .section{height: auto;} .starReview .section1.on{height: 2101px;} .starReview .section2.on{height: 1949px;} /* .starReview .section3{min-height: }*/ .starReview .slideArea{width: 1100px; margin:0 auto;} .starReview .slideArea .slick-prev, .starReview .slideArea .slick-next{top:680px;} .starReview .slick-dots{bottom:auto; top: 25px;} .starReview .section1 .slick-dots li button:before{content:''; width:15px; height:15px; background:rgba(238,199,74,1); border-radius: 50%;} .starReview .section1 .slick-dots li.slick-active button:before{background:rgba(238,199,74,1);} .starReview .section2 .slick-dots li button:before{content:''; width:15px; height:15px; background:#e294b2;border-radius: 50%;} .starReview .section2 .slick-dots li.slick-active button:before{background:#e294b2;} .starReview .section3 .slick-dots li button:before{content:''; width:15px; height:15px; background:#59aca3; border-radius: 50%;} .starReview .section3 .slick-dots li.slick-active button:before{background:#59aca3;} .starReview .rvBtn{display:none; margin:10px 0; padding:10px 20px; border-radius: 10px; background: #ff8100; box-shadow: 0 6px 0 0 #f05f18; font-size: 18px; color:#fff; font-weight: 600;} .starReview .rvBtn.on{display:inline-block;} /********** 06_이벤트 **********/ /* 이벤트 */ #wrap[role="news"] {} #wrap[role="news"] .copyUrl {padding:20px 20px 0; text-align:right;} #wrap[role="news"] .sort_01 {color:#f7901e !important;} #wrap[role="news"] .sort_02 {color:#64559b !important;} #wrap[role="news"] .sort_03 {color:#39b4a7 !important;} #wrap[role="news"] .notice .title a {width:770px;} .eventList {margin-top:50px;} .eventList .list:after {content:''; display:block; clear:both;} .eventList .list > li {position:relative; width:586px; float:left;} .eventList .list > li:nth-of-type(2n) {margin-left:28px;} .eventList .list > li .thum {height:334px; overflow:hidden;} .eventList .list > li .thum img {width:100%; height:334px; transition:all 2s;} .eventList .list > li > a:hover .thum img {transform:scale(1.1);} .eventList .list > li .thum img {width:100%;} .eventList .list > li .cont {margin-top:20px; margin-bottom:80px;} .eventList .list > li .cont strong {display:block; height:56px; margin-bottom:20px; font-size:19px; line-height:28px;} .eventList .list > li .cont p {color:#979797;} .eventList .list > li .resultBtn {position:absolute; bottom:80px; right:0; font-weight:600; font-size:17px;} /*tvcf 이벤트*/ #wrap[role="news"] .tvcf{} #wrap[role="news"] .tvcf .rel{position: relative;} .tvcf .rel a{position: absolute; display: block; left: 50%; transform: translateX(-50%); width: 390px; height: 220px;} .tvcf #rel1 a{top: 0;} .tvcf #rel2 a{ top: 0;} .tvcf #rel2 #vote{display: inline-block; top: 305px; height: auto; overflow: hidden; opacity: 0.6;} .tvcf #rel2 #vote.twinkle{opacity: 1!important;} .tvcf #rel2 #vote:before{content: ''; display: block; position: absolute; left: 43%; top:35%; width: 6px;height: 130px; transform: rotate(45deg) translate(-50%,-50%); background: #fff;opacity: 0;} .tvcf #rel2 #vote:after{content: ''; display: block; position: absolute; left: 48%; top:36%; width: 6px;height: 110px; transform: rotate(45deg) translate(-50%,-50%); background: #fff; opacity: 0;} .tvcf #vote.twinkle:before{animation: twinkle 0.6s ease-in-out forwards;} .tvcf #vote.twinkle:after{animation: twinkle2 0.6s ease-in-out forwards;} @keyframes twinkle { 0%{opacity: 0; left: 43%;} 100%{opacity: 0.4; left: -21%;} } @keyframes twinkle2 { 0%{opacity: 0; left: 48%;} 100%{opacity: 0.4; left: 100%;} } .tvcf #rel1 input[type="radio"]{position: absolute; bottom: 88px; left: 50%; transform: translateX(-50%); cursor: pointer;} .tvcf #rel2 input[type="radio"]{position: absolute; top: 258px; left: 50%; transform: translateX(-50%); cursor: pointer;} .tvcf input[type="radio"]:before{content:''; display:block; position: absolute; width: 150%; height:150%; border: 2px solid black; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); } .tvcf input[type="radio"]:after{content:''; display:block; position: absolute; width: 50%; height:50%; border: 3px solid black; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);} .tvcf input[type="radio"]:checked:after{background: #000;} #container .contents .detail .cont {padding:30px 0 40px; font-size:16px; line-height:normal} #container .contents .applyPop .dataForm2{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); max-width:360px; margin:0; padding:0; z-index:110; background:#fff; border-radius:10px; box-shadow:0 0 10px #888; overflow:hidden;} #container .contents .applyPop .dataForm2 .head{margin:15px 0 5px; text-align:center; border: none;} #container .contents .applyPop .dataForm2 .head span{font-size:26px; font-weight:600; color:#382e2c;} #container .contents .applyPop .dataForm2 form{padding:0 20px;} #container .contents .applyPop .dataForm2 .inputTable strong{display:block; padding:10px 0 2px; font-size:15px; color:#171717;} #container .contents .applyPop .dataForm2 .inputTable .inputArea input{width:100%; height:30px; padding-left:6px; border-radius:6px; border:1px solid #c9c9c9;} #container .contents .applyPop .dataForm2 .inputTable .inputArea input::placeholder{font-size:12px; text-align:center;} #container .contents .applyPop .dataForm2 .euiSelectMain:after{top:5px; right:5px;} #container .contents .applyPop .dataForm2 .euiSelectList{max-height:200px; overflow:auto; color:#838383; font-size:15px;} #container .contents .applyPop .dataForm2 .inp_border{padding:6px 0 6px 7px; border:1px solid #c9c9c9; border-radius:6px;} #container .contents .applyPop .dataForm2 .inp_td{display:inline-block;} #container .contents .applyPop .dataForm2 .phone .inputArea:nth-of-type(1) .inp_td{width:24%;}/*휴대폰 번호 각각 너비*/ #container .contents .applyPop .dataForm2 .phone .inputArea:nth-of-type(2) .inp_td{width:74%;} #container .contents .applyPop .dataForm2 .phone .inputArea:nth-of-type(2) .inp_td input{width:84%;}/*인증번호 너비*/ #container .contents .applyPop .dataForm2 .phone .inputArea .inp_td:last-child{width:24%; padding:0 8px; text-align:center; background:#ff8024; border-radius:6px;} #container .contents .applyPop .dataForm2 .phone .refer{font-size:10px; color:#8c8c8c;} #container .contents .applyPop .dataForm2 .grade div.inp_td{display: block;} #container .contents .applyPop .dataForm2 .inp_td .btnTypeH{font-size:14px; color:#fff; line-height:30px;} #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox {position:relative; padding:10px 0; border-top:0; } #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox .title {position:relative; padding-top:6px; font-size:13px; margin-bottom:5px;} #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox p{position:absolute; top:12px; right:0;} #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox .title, #container .contents .applyPop .dataForm2 .termsArea .checkTypeA label, #container .contents .applyPop .dataForm2 .termsArea ul.listA > li, #container .contents .applyPop .dataForm2 .termsArea .agreeBox .checkTypeA label {color:#171717;} #container .contents .applyPop .dataForm2 .termsArea .checkTypeA label:before {width:20px; height:20px;} #container .contents .applyPop .dataForm2 .termsArea .agreeBox {padding:5px 0 0;} #container .contents .applyPop .dataForm2 .termsArea .agreeBox a{border:0;} #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox .checkTypeA label {font-size:13px; font-weight:600;} #container .contents .applyPop .dataForm2 .termsArea .allAgreeBox .txt{font-size:10px; color:#8c8c8c;} #container .contents .applyPop .dataForm2 .termsArea .agreeBox .checkTypeA label{font-size:13px;} #container .contents .applyPop .agreeBox a {top:12px; color:#755c57; font-size:12px;} #container .contents .applyPop .dataForm2 #close{position:absolute; right:20px; top:15px;} #container .contents .applyPop .dataForm2 .btnArea{margin:10px 30px 15px; padding:13px 0; border-radius:25px; background:#ff8024;} #container .contents .applyPop .dataForm2 .btnArea .btnTypeH {margin:0 auto; width:720px; font-size:20px; color:#fff;} /*약관 팝업*/ #container .contents .applyPop .dataForm2 .popup{position:absolute; display:none; top:20px; left:50%; transform:translateX(-50%); width:94%; height:530px; padding:20px; background:#fff; box-shadow:0 0 10px #382e2c; overflow-y:auto;} #container .contents .applyPop .dataForm2 .popup .title{margin-bottom:20px; padding-bottom:10px; font-size:18px; font-weight:600; text-align:center; border-bottom:2px solid #c8c8c8;} #container .contents .applyPop .dataForm2 .popup .title span{font-weight:600; color:#f15d43;} #container .contents .applyPop .dataForm2 .popup .cont{line-height:25px;} #container .contents .applyPop .dataForm2 .popClose{position:absolute; left:290px; top:20px;} /********** 07_체험신청 **********/ /* 체험 신청 */ .promote {margin:30px 0; text-align:center;} #wrap[role="apply"] {} #wrap[role="apply"] .promote {margin:30px auto; width:960px; height:160px; text-align:center; background:url(../images/page/apply_promote.png) no-repeat center/cover; font-size:20px;} #wrap[role="apply"] .promote strong {display:block;font-size:24px;} #wrap[role="apply"] .promote .rBox {display:inline-block; margin-top:15px; padding:10px 25px; background:#4db8a3; font-weight:600; color:#fff; border-radius:20px;} #wrap[role="apply"] .aboutSmartall {position:relative; padding-bottom:60px; text-align:center;} #wrap[role="apply"] .aboutSmartall .goFormBtn {position:absolute; top:1780px; left:50%; margin-left:-205px; width:410px; padding:20px 0; font-size:36px; color:#fff; font-weight:600; background:#ec6115; box-shadow:0 5px #c95110;} #wrap[role="apply"] .dataForm .inputTable > tbody > tr:last-child > th, #wrap[role="apply"] .dataForm .inputTable > tbody > tr:last-child > td {border-bottom:0;} #wrap[role="apply"] .tabTypeA {margin:60px 0;} #wrap[role="apply"] .tabTypeA li {width:49%; font-size:16px; border-radius:73px;} #wrap[role="apply"] .tabTypeA li a {padding:30px 0;} #wrap[role="apply"] .tabTypeA li:nth-of-type(n+2) {margin-left:2%;} #wrap[role="apply"] .tabTypeA li strong {display:block; margin-bottom:10px; color:#838383; font-size:40px;} #wrap[role="apply"] .tabTypeA li.on strong, #wrap[role="apply"] .tabTypeA li:hover strong {color:#fff;} #wrap[role="apply"] .headImg, #wrap[role="apply"] .bottomImg {margin-left:-400px;} #wrap[role="apply"].skt .headImg, #wrap[role="apply"].skt .bottomImg {margin-left:-360px;} #wrap[role="apply"] .headImg {margin-bottom:30px;} #wrap[role="apply"] .bottomImg {margin-top:50px;} #wrap[role="apply"] .contract{width: 98%; margin: 0 auto;} #wrap[role="apply"] .contract tr *{padding: 20px 0; font-weight:600; border: 1px solid #bfbfbf; background: #f5f5f5;} #wrap[role="apply"] .contract tr *:first-child{border-left: none;} #wrap[role="apply"] .contract tr *:last-child{border-right: none;} #wrap[role="apply"] .contract .title th{padding: 15px 0; font-weight:500; border-top: 2px solid #3c3c3c; background: #fff;} #wrap[role="apply"] .aboutSmartall .section > span{font-size: 24px; font-weight: 600;} #wrap[role="apply"] .aboutSmartall .section div{margin: 20px 0 30px;} #wrap[role="apply"] .aboutSmartall .section div span{font-size: 48px; font-weight: 600; line-height: 1.3;} #wrap[role="apply"] .aboutSmartall .section span.hl{font-size: 30px; } .applyCompleteWrap {} .applyCompleteWrap .contents {padding-top:170px !important;} .applyCompleteCont {position:relative; width:1132px; margin:0 auto; border-radius:34px; border:4px solid #f5c520; } .applyCompleteCont .contBody {padding:55px 20px; text-align:center;} .applyCompleteCont .contBody .cont1 {background:#fff url(../images/page/complete_char1.png) no-repeat 95% 100%;} .applyCompleteCont .contBody .cont2 {background:#fff url(../images/page/complete_char2.png) no-repeat 95% 100%;} .applyCompleteCont:before, .applyCompleteCont:after, .applyCompleteCont .contBody:before, .applyCompleteCont .contBody:after {content:""; position:absolute; width:29px; height:29px; background:url(../images/page/complete_deco.png) no-repeat 0 0;} .applyCompleteCont:before {left:30px; top:30px; transform:rotate(59deg);} .applyCompleteCont:after {right:30px; top:30px; transform:rotate(-15deg);} .applyCompleteCont .contBody:before {left:30px; bottom:30px; transform:rotate(150deg);} .applyCompleteCont .contBody:after {right:30px; bottom:30px; transform:rotate(22deg);} .applyCompleteCont .contBody strong {display:inline-block; margin-top:40px; margin-bottom:40px; font-size:42px; line-height:50px; letter-spacing:-1px; color:#141414; font-weight:800; box-shadow:inset 0 -22px #fddd6c; line-height:20px;} .applyCompleteCont .contBody p {font-size:24px; line-height:34px; letter-spacing:-1px; color:#141414;} .applyCompleteCont .contBody p b {display:block; padding-top:15px;} .applyCompleteCont .contBody .btnArea {font-size:inherit;} /* 템플릿 */ #wrap.resizeWrap{} #wrap.resizeWrap #container{width:1260px; margin:0 auto;} #wrap[role="apply"].template #container .contents.resizeC{width:1260px;} .templateContents.resizeTC{width:auto; margin:0;} #wrap[role="apply"].template #container {background:none;} #wrap[role="apply"].template #container .contents {padding:0 0 110px; width:100%;} #wrap[role="apply"].template .dataForm {margin:0 auto; padding:0 30px; width:1260px;} #wrap[role="apply"].template .dataForm .head .refer {top:20px;} #wrap[role="apply"].template .applyCompleteWrap .contents {padding-top:80px !important;} .template #header {min-width:1260px; min-height:unset; padding:23px 0; text-align:center;} .template .templateContents {position:relative; z-index:0;} .template .templateContents img {max-width:100%;} .template .templateContents .videoWrap { position:relative; } .template .templateContents video { position:absolute; top:39%; left:50%; transform:translateX(-50%); width:30%; vertical-align: top;} .template .templateContents video.halfSize {width:50%; } .template .dataForm .head {padding:25px 0 25px 20px;} .template .agreeBox {padding-bottom:0;} .template .agreeBox > .title {margin-bottom:0;} .template .agreeBox .checkTypeA {position:relative; top:auto; right:auto;} .template .agreeBox .checkTypeA label {color:#3c3c3c; font-weight:600;} .template .agreeBox a {position:absolute; top:50px; right:20px; color:#838383; border-bottom:1px solid;} .template .agreeBox .cont {display:none; margin-top:20px;} .template #quickMenu { display: none; } .template .goApplyBtn { position: fixed; left: 50% !important; right: unset !important; top: unset !important; bottom: 0 !important; transform: translateX(-50%); z-index: 10; } .template .goApplyBtn a { position: relative; } #header.header2 {min-width:1260px; min-height:unset; padding:23px 0; text-align:center;} /* 제휴-ibk */ #wrap[role="apply"].ibk #container {background:none;} #wrap[role="apply"].ibk #container .contents {padding-top:0;} #wrap[role="apply"].ibk .btnTypeC {width:210px;} #wrap[role="apply"].ibk #quickMenu {display:none;} /* 제휴-samsung */ #wrap[role="apply"].samsung #container {background:none;} #wrap[role="apply"].samsung #container .contents {padding-top:0;} #wrap[role="apply"].samsung h2 {padding:35px 0 20px; text-align:center; font-size:32px;} #wrap[role="apply"].samsung .btnTypeB {width:auto; padding:10px 140px; font-size:20px; border-radius:10px;} #wrap[role="apply"].samsung .btnTypeC {width:150px;} #wrap[role="apply"].samsung #quickMenu {display:none;} #wrap[role="apply"].samsung .headImg, #wrap[role="apply"].samsung .bottomImg {margin-left:0;} #wrap[role="apply"].samsung .inputTable .termsArea tbody th {font-size:13px;} #wrap[role="apply"].samsung .inputTable .termsArea p.checkTypeA {font-size:18px;} #wrap[role="apply"].samsung .inputTable .termsArea .cont {display:block; max-height:none;} #wrap[role="apply"].samsung .inputTable .termsArea .cont td, #wrap[role="apply"].samsung .inputTable .termsArea .cont th {padding:8px 15px;} #wrap[role="apply"].samsung .incen strong {font-size:18px;} #wrap[role="apply"].samsung .incen .cont {margin-top:20px; padding:20px; border:1px solid #b1b1b1; border-radius:6px; overflow:auto; font-size:14px; line-height:1.5em;} /* 제휴-skt */ #wrap[role="apply"].skt #container {background:none;} #wrap[role="apply"].skt #container .contents {padding-top:0;} #wrap[role="apply"].skt .btnTypeC {width:210px;} #wrap[role="apply"].skt #quickMenu {display:none;} #wrap[role="apply"].skt .agreeBox.ess .title:after{content: '필수 동의'} /*for resize #wrap[role="apply"].skt .headImg,#wrap[role="apply"].skt .bottomImg{margin-left: 0; width: 100%;} #wrap[role="apply"].skt img{max-width: 100%;}*/ /********** 08_고객센터 **********/ #wrap[role="customer"] {} #wrap[role="customer"] .locationArea h2 {color:#ff7b00;} #wrap[role="customer"] .locationArea ul li:first-child a {background-image:url(../images/common/loc_home_2.png);} #wrap[role="customer"] .locationArea ul li, #wrap[role="customer"] .locationArea ul li:before {color:#838383;} #wrap[role="customer"] .contents > .tabTypeA li {width:260px;} #wrap[role="customer"] .notice {margin-top:40px; text-align:center;} #wrap[role="customer"] .notice > * {margin:5px 0; display:inline-block; vertical-align:middle; line-height:1.4;} #wrap[role="customer"] .notice .txt {margin-right:10px; padding-right:10px; text-align:left; border-right:2px solid #dfdfdf;} #wrap[role="customer"] .notice .serviceTime strong {font-size:24px;} #wrap[role="customer"] .notice .serviceTime strong .hl {font-size:32px; font-weight:700;} #wrap[role="customer"] .notice .serviceTime p {font-size:16px;} #wrap[role="customer"] .notice .tel {padding-right:30px; font-size:2.6rem; font-weight:600; color:#404040; margin-right:30px; border-right:1px solid #dedede;} #wrap[role="customer"] .notice .tel span {padding-left:10px; font-size:1.2rem; color:#808080;} #wrap[role="customer"] .notice .serviceTime > * {display:inline-block; font-size:1.3rem; color:#404040; vertical-align:top;} #wrap[role="customer"] .searchForm {position:relative; margin:60px auto 40px; width:680px;} #wrap[role="customer"] .searchForm input[type="text"] {padding:20px 60px 20px 40px; width:100%; border-radius:27px; border:1px solid #b1b1b1; line-height:1.4; font-size:15px;} #wrap[role="customer"] .searchForm .searchBtn {position:absolute; padding:16px; right:0; top:0;} .faqList .tabTypeA {margin-top:0;} .faqList .tabTypeA li {width:144px;} .faqList .tabTypeA li a {padding-top:57px; background-position:50% 23px; background-repeat:no-repeat; background-size:auto;} .faqList .list {margin-top:20px; border-top:2px solid #b1b1b1;} .faqList .list > li {border-bottom:1px solid #b1b1b1;} .faqList .list > li .head {position:relative; padding:20px 90px 20px 30px;} .faqList .list > li .head:after {content:''; position:absolute; top:0; right:30px; width:15px; height:100%; background:url(../images/common/ico_arrow_d_3.png) no-repeat center/auto;} .faqList .list > li.on .head strong, .faqList .list > li .head:hover strong {color:#ff7b00;} .faqList .list > li.on .view {border-top:2px solid #ff7b00;} .faqList .list > li.on .head:after {transform:scaleY(-1);} .faqList .list > li .head p {font-size:14px; color:#838383;} .faqList .list > li .head strong {display:block; margin-top:15px; font-size:19px; line-height:1.4;} .faqList .list > li .view {position:relative; border-top:1px solid #b1b1b1; padding:20px 30px 50px; line-height:1.4;} .faqList .list > li .view .downBtn {position:absolute; right:0; bottom:20px; font-weight:600;} .faqList .list > li .view .downBtn:after {content:''; display:inline-block; margin-left:10px; width:13px; height:14px; background:url(../images/common/ico_clip_1.png) no-repeat 0/auto;} #wrap[role="customer"] .promote {margin:50px 0 70px;} #wrap[role="customer"] .promote p {margin-bottom:20px;} #wrap[role="customer"] .promote strong {font-size:35px;} #wrap[role="customer"] .promote span {line-height:1.4; font-size:20px;} .downList .list {font-size:0;} .downList .list > li {display:inline-block; padding:30px 30px 10px; width:390px; min-height:540px; margin-right:15px; border:1px solid #bfbfbf; font-size:15px; border-radius:20px; text-align:center; vertical-align:top;} .downList .list > li:nth-of-type(3n) {margin-right:0;} .downList .list > li:nth-of-type(n+4) {margin-top:30px;} .downList .list > li .thum {height:300px; text-align:center;} .downList .list > li .thum img {max-width:100%; max-height:300px; } .downList .list > li .cont {display:inline-block; margin-top:20px;} .downList .list > li .cont strong {display:inline-block; min-width:250px; padding-bottom:5px; margin:0 auto; border-bottom:2px solid #171717; font-size:24px; line-height:32px; font-weight:700; word-break:break-all;} .downList .list > li .cont .btnArea {margin-top:15px;} .downList .list > li .cont .btnArea p {width:250px; margin:0 auto;} .downList .list > li .cont .btnArea p +p {border-top:1px solid #bfbfbf;} .downList .list > li .cont .btnArea a {display:inline-block; padding:10px 0; font-size:20px; color:#838383} .downList .list > li .cont .menualBtn:before {content:''; display:inline-block; margin-right:10px; width:23px; height:22px; background:url(../images/customer/down_1.png) no-repeat 0/auto; vertical-align:middle;} .downList .list > li .cont .brochureBtn:before {content:''; display:inline-block; margin-right:10px; width:23px; height:22px; background:url(../images/customer/down_2.png) no-repeat 0/auto; vertical-align:middle;} /********** 09_other **********/ /* 공통 */ #wrap[role="other"] .locationArea h2 {color:#f7901e;} #wrap[role="other"] .locationArea ul li:first-child a {background-image:url(../images/common/loc_home_2.png);} #wrap[role="other"] .locationArea ul li, #wrap[role="other"] .locationArea ul li:before {color:#838383;} #wrap[role="other"] #container .contents {padding-top:40px;} /* 개인정보처리방침 */ .textDocumentWrap {} .textDocumentWrap .otherDocument {text-align:center;} .textDocumentWrap .otherDocument select, .textDocumentWrap .otherDocument .euiSelect {width:350px; padding:0 10px; margin:0 auto; border:1px solid #bfbfbf; border-radius:5px;} .textDocumentWrap .otherDocument .euiSelect .euiSelectMain {height:50px; line-height:50px;} .textDocumentWrap .otherDocument .euiSelect .euiSelectList {left:0; top:51px;} .textDocumentWrap .header {padding:55px 0 45px; border-bottom:1px solid #b1b1b1} .textDocumentWrap .header strong {display:block; font-size:26px; line-height:30px; color:#171717; font-weight:bold;} .textDocumentWrap .header p {padding-top:20px; font-size:16px; line-height:30px; color:#838383} .textDocumentWrap .section {padding-top:55px;} .textDocumentWrap .section > strong {display:block; font-size:26px; line-height:30px; color:#171717; font-weight:bold;} .textDocumentWrap .section > b {display:block; padding-top:30px; font-size:22px; line-height:30px; color:#171717; font-weight:bold; text-align:center;} .textDocumentWrap .section .depth1 {counter-reset:counter-depth1;} .textDocumentWrap .section .depth1 > li {position:relative; padding-left:25px; font-size:16px; line-height:30px; color:#838383} .textDocumentWrap .section .depth1 > li:before {counter-increment:counter-depth1; content:counter(counter-depth1)")"; position:absolute; left:0; top:0;} .textDocumentWrap .section .depth2 {padding-top:5px;} .textDocumentWrap .section .depth2 > li {position:relative; padding-left:15px; font-size:16px; line-height:28px; color:#838383} .textDocumentWrap .section .depth2 > li:before {content:""; display:block; width:4px; height:4px; position:absolute; left:0; top:12px; border-radius:2px; font-size:0; line-height:0; background:#f7901e;} .textDocumentWrap .section.lastSection .depth1 > li, .textDocumentWrap .section.lastSection .depth2 > li{padding-left: 0;} .textDocumentWrap .section.lastSection .depth1 > li:before, .textDocumentWrap .section.lastSection .depth2 > li:before{display: none;} .textDocumentWrap .tableWrap {margin-top:10px;} .textDocumentWrap .tableWrap table {table-layout:fixed; width:100%; /*mar*/} .textDocumentWrap .tableWrap table thead th {padding:15px 5px; background:#f7901e; color:#fff; font-size:16px; line-height:25px; text-align:center;} .textDocumentWrap .tableWrap table tbody th, .textDocumentWrap .tableWrap table tbody td {padding:17px 10px; border:1px solid #b1b1b1; border-right:none; font-size:16px; line-height:25px; color:#171717; text-align:center;} .textDocumentWrap .tableWrap table tbody th {background:#eaeaea;} .textDocumentWrap .tableWrap table tbody td {font-size:15px; color:#838383;} .textDocumentWrap .tableWrap table tbody tr:first-child th, .textDocumentWrap .tableWrap table tbody tr:first-child td {border-top:none;} .textDocumentWrap .tableWrap table tbody th:first-child, .textDocumentWrap .tableWrap table tbody td:first-child {border-left:none;} .textDocumentWrap .tableWrap table tbody th:first-child + td {border-left:none;} .textDocumentWrap .tableWrap .infoTxt {padding-top:2px;} /* 이용약관 */ .textAgreementWrap {} .textAgreementWrap .otherDocument {text-align:center;} .textAgreementWrap .otherDocument select, .textAgreementWrap .otherDocument .euiSelect {width:350px; padding:0 10px; margin:0 auto; border:1px solid #bfbfbf; border-radius:5px;} .textAgreementWrap .otherDocument .euiSelect .euiSelectMain {height:50px; line-height:50px;} .textAgreementWrap .otherDocument .euiSelect .euiSelectList {left:0; top:51px;} .textAgreementWrap > strong.tit {display:block; padding-top:55px; font-size:26px; line-height:30px; color:#171717; font-weight:bold;} .textAgreementWrap .section {padding-top:25px;} .textAgreementWrap .section > strong {display:block; font-size:16px; line-height:24px; color:#171717; font-weight:bold;} .textAgreementWrap .section > p {position:relative; padding-top:10px; font-size:16px; line-height:30px; color:#838383} .textAgreementWrap .section > b {display:block; padding-top:30px; font-size:22px; line-height:30px; color:#171717; font-weight:bold; text-align:center;} .textAgreementWrap .section .depth1 {counter-reset:counter-depth1;} .textAgreementWrap .section .depth1 > li {position:relative; padding-top:10px; padding-left:36px; font-size:16px; line-height:30px; color:#838383} .textAgreementWrap .section .depth1 > li:before {counter-increment:counter-depth1; content:"("counter(counter-depth1)")"; position:absolute; left:0; top:0;} .textAgreementWrap .section .depth2 {padding-top:0;} .textAgreementWrap .section .depth2 > li {position:relative; padding-top:5px; padding-left:20px; font-size:16px; line-height:28px; color:#838383} .textAgreementWrap .section .depth2 > li:before {content:""; display:block; position:absolute; left:0; top:5px; font-size:16px; line-height:28px; color:#838383} .textAgreementWrap .section .depth2 > li:nth-child(1):before {content:"①"} .textAgreementWrap .section .depth2 > li:nth-child(2):before {content:"②"} .textAgreementWrap .section .depth2 > li:nth-child(3):before {content:"③"} .textAgreementWrap .section .depth2 > li:nth-child(4):before {content:"④"} .textAgreementWrap .section .depth2 > li:nth-child(5):before {content:"⑤"} .textAgreementWrap .section .depth2 > li:nth-child(6):before {content:"⑥"} .textAgreementWrap .section .depth2 > li:nth-child(7):before {content:"⑦"} .textAgreementWrap .section .depth2 > li:nth-child(8):before {content:"⑧"} .textAgreementWrap .section .depth2 > li:nth-child(9):before {content:"⑨"} .textAgreementWrap .section .depth2 > li:nth-child(10):before {content:"⑩"} .textAgreementWrap .section .depth2 > li:nth-child(11):before {content:"⑪"} .textAgreementWrap .section .depth2 > li:nth-child(12):before {content:"⑫"} .textAgreementWrap .section .depth2 > li:nth-child(13):before {content:"⑬"} .textAgreementWrap .section .depth2 > li:nth-child(14):before {content:"⑭"} .textAgreementWrap .section .depth2 > li:nth-child(15):before {content:"⑮"} .textAgreementWrap .tableWrap {margin-top:10px;} .textAgreementWrap .tableWrap table {table-layout:fixed; width:100%;} .textAgreementWrap .tableWrap table thead th {padding:15px 5px; background:#f7901e; color:#fff; font-size:16px; line-height:25px; text-align:center;} .textAgreementWrap .tableWrap table tbody th, .textAgreementWrap .tableWrap table tbody td {padding:17px 10px; border:1px solid #b1b1b1; border-right:none; font-size:16px; line-height:25px; color:#171717; text-align:center;} .textAgreementWrap .tableWrap table tbody th {background:#eaeaea;} .textAgreementWrap .tableWrap table tbody td {font-size:15px; color:#838383;} .textAgreementWrap .tableWrap table tbody tr:first-child th, .textAgreementWrap .tableWrap table tbody tr:first-child td {border-top:none;} .textAgreementWrap .tableWrap table tbody th:first-child, .textAgreementWrap .tableWrap table tbody td:first-child {border-left:none;} .textAgreementWrap .tableWrap .infoTxt {padding-top:2px;} /* 사이트맵 */ #wrap[role="other"] {} #wrap[role="other"] #container.siteMapWrap .contents {padding-bottom:710px;} .siteMapWrap { text-align:center;} .siteMapWrap .section {position:relative; display:inline-block; margin:0 25px; vertical-align:top; text-align:left; z-index:1;} .siteMapWrap .section > strong {display:inline-block; font-size:22px; line-height:28px; color:#58504e;} .siteMapWrap .section > strong:nth-of-type(n+2) {margin-top:30px;} .siteMapWrap .section ul {padding-top:10px;} .siteMapWrap .section ul li {padding:8px 0;} .siteMapWrap .section ul li a {font-size:16px; color:#171717; letter-spacing:-1px; line-height:24px;} .siteMapWrap .section ul li a:hover { color: #f7901e; font-weight: bold; } .siteMapWrap .contents img { position: absolute; } .siteMapWrap .contents .chr_1 { bottom: -50px; right: -130px; transition: all 1.8s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; } .siteMapWrap .contents .chr_2 { top: 120px; left: -400px; animation: ani_2 1s linear infinite reverse; } .siteMapWrap .contents .chr_3 { bottom: 70px; left: -100px; transition: all 1s cubic-bezier(0.77, 0, 0.175, 1); opacity: 0; } .siteMapWrap .contents .chr_1.on { bottom: 210px; opacity: 1; } .siteMapWrap .contents .chr_3.on { left: 230px; opacity: 1; } .supportWrap #header { padding: 23px 0; text-align: center; } #wrap[role="apply"].supportWrap #container { background-image: none; } /* 정부지원 랜딩 */ .supportWrap * { font-family: 'sdNGothic'; } .supportWrap #container .contents { padding-top: 0; } .supportWrap .section { position: relative; } .supportWrap #section1 .mailbtn { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); } .supportWrap #section3 .tabArea { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); width: 626px; display: flex; z-index: 2; } .supportWrap #section3 .tabArea li a { position: relative; display: block; } .supportWrap #section3 .tabArea .tabbtn1.on a:before { content: ''; position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/support/tabbtn1_on.png) no-repeat; } .supportWrap #section3 .tabArea .tabbtn2.on a:before { content: ''; position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/support/tabbtn2_on.png) no-repeat; } .supportWrap #section3 .tabArea .tabbtn3.on a:before { content: ''; position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/support/tabbtn3_on.png) no-repeat; } .supportWrap #section3 .tabArea .tabbtn4.on a:before { content: ''; position: absolute; z-index: 2; bottom: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/support/tabbtn4_on.png) no-repeat; } .supportWrap #section3 .tabWrap { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); z-index: 1 } .supportWrap #section4 .dataForm { width: 720px; margin: 0 auto; padding: 0 47px 94px; } .supportWrap #section4 .dataForm table.inputTable { margin-bottom: 43px; } .supportWrap #section4 .dataForm .inputTable td, .supportWrap #section4 .dataForm .inputTable th { border-bottom: 0; padding: 7px 0; } .supportWrap #section4 .dataForm .inputTable th { letter-spacing: -1px; } .supportWrap #section4 .dataForm td input { margin: 0; border-radius: 6px; } .supportWrap #section4 .dataForm td input + a, .supportWrap #section4 .dataForm td .inputBox + a { margin-left: 10px; border-radius: 6px; font-size: 18px; font-weight: 500; } .supportWrap #section4 .dataForm .authNumber { margin: 0; width: auto; } .supportWrap #section4 .dataForm .termsArea .allAgreeBox { padding: 40px 0 30px; border-bottom: 0; } .supportWrap #section4 .dataForm .termsArea .allAgreeBox label { color: #3c3c3c; font-size: 18px; letter-spacing: -1px; } .supportWrap #section4 .dataForm .termsArea .allAgreeBox ul li { color: #b3b3b3; } .supportWrap #section4 .dataForm .termsArea .agreeBox { padding: 7px 0; } .supportWrap #section4 .dataForm .termsArea .agreeBox .title { font-size: 18px; letter-spacing: -0.4px; } .supportWrap #section4 .dataForm .termsArea .agreeBox.ess .title:after { content: '(필수)'; padding: 0; border: 0; font-size: 18px; margin-left: 0; vertical-align: unset; } .supportWrap #section4 .dataForm .termsArea .agreeBox.cho .title:after { content: '(선택)'; padding: 0; border: 0; font-size: 18px; margin-left: 0; vertical-align: unset; } .supportWrap #section4 .dataForm .termsArea .agreeBox a { top: 10px; font-size: 14px; } .supportWrap #section4 .dataForm .applybtn { margin-top: 30px; } .supportWrap #section5 { overflow: hidden; } .supportWrap #section5 .syncSlide { position: absolute; left: 50%; transform: translateX(-50%); margin: 0 auto; } .supportWrap #section5 .syncA { top: 32%; } .supportWrap #section5 .syncA .slick-list { width: 650px; margin: 0 auto; } .supportWrap #section5 .syncA .slick-slide { text-align: center; } .supportWrap #section5 .syncA .slick-slide > img { width: 650px !important; padding: 0 10px; } .supportWrap #section5 .syncA .slick-slide a { display: inline-block; margin-top: 61.6%; } .supportWrap #section5 .syncB { top: 51.4%; width: 1200px; overflow: hidden; } .supportWrap #section5 .syncB .slick-list { width: 1656px; padding: 0 !important; margin: 0 auto; left: 50%; transform: translateX(-50%); } .supportWrap #section5 .syncB .slick-track img { width: 552px !important; height: auto; opacity: 0.4; padding: 0 30px; box-sizing: border-box; } .supportWrap #section5 .syncB .slick-track img.is-active { opacity: 1; padding: 0 30px; } .supportWrap #section5 .slick-prev:before, .supportWrap #section5 .slick-next:before { display: none; } .supportWrap #section5 .slick-prev, .supportWrap #section5 .slick-next { width: 96px; height: 96px; top: 50%; } .supportWrap #section5 .syncB .slick-prev { left: 19%; } .supportWrap #section5 .syncB .slick-next { right: 19%; } .supportWrap #section5 .charWrap { width: 100%; } .supportWrap #section5 .charWrap img { position: absolute; bottom: 13%; } .supportWrap #section5 .charWrap img:nth-child(1) { left: -1%; } .supportWrap #section5 .charWrap img:nth-child(2) { right: -2%; } .supportWrap .gotoApply { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 10; } /********** 10_member **********/ /* 공통 */ #wrap[role="member"] { } #wrap[role="member"] .locationArea h2 { color: #ff7b00; padding-bottom: 0; } #wrap[role="member"] .subText { text-align: center; font-size: 15px; color: #aaaaaa; } #wrap[role="member"] #container .contents { padding-top: 40px; } #wrap[role="member"] .tabTypeA { margin-top: 0; } /* 정회원 인증 */ #wrap[role="member"] .certify .locationArea h2:before {content:''; display:inline-block; margin:0 20px 6px; width:254px; height:62px; background:url(../images/common/logo_1_2.png) no-repeat 0/100%; vertical-align:bottom;} #wrap[role="member"] .certify .dataForm .inputTable {width:800px; margin:0 auto;} #wrap[role="member"] .certify .dataForm .head h3 {text-align:center; line-height:1.4;} #wrap[role="member"] .certify .dataForm .caution {padding:0; border:none; background:none; text-align:center;} .pop.certiAlert {padding:0 0 0 40px; width:620px; background:none;} .pop.certiAlert .contents {padding:45px 35px; background:#fff;} .pop.certiAlert .textArea img {margin-top:-25px; margin-left:-75px; vertical-align:middle;} .pop.certiAlert .textArea strong {display:inline-block; font-size:32px; font-weight:500; line-height:1.4; vertical-align:middle;} .pop.certiAlert .textArea .hl {font-weight:600;} .pop.certiAlert p {margin-top:10px; font-size:18px; color:#838383; line-height:1.4; text-align:center;} /********** 11_스마트올TV **********/ #wrap[role="smartallTv"] h3 {padding:40px 0 20px; font-size:32px; line-height:1.5; text-align:center;} #wrap[role="smartallTv"] h3 strong {font-size:40px;} #wrap[role="smartallTv"] .youtube {position:relative; padding-top:40px; height:581px; text-align:center; background:url(../images/brand/brandpv_bestBg_1.png) no-repeat center/auto;} #wrap[role="smartallTv"] .chr_1 {position:absolute; bottom:30px; right:20px;} #wrap[role="smartallTv"] .youtube + p {margin-top:30px; font-size:22px; text-align:center;} #wrap[role="smartallTv"] .btnArea {margin-top:60px;} #wrap[role="smartallTv"] .btnArea .btnTypeC {width:290px; font-size:20px; line-height:63px; border-radius:31px;} /********** 선생님 지원 **********/ #wrap[role="teacher"]{padding:0;} #wrap[role="teacher"] .contents{width: 100%;padding:0 0 67px;} #wrap[role="teacher"] .contents img{max-width: 100%;} #wrap[role="teacher"] .goApplyBtn{position: fixed;bottom:0;left:0;} /********** 영업관리 페이지 공통 **********/ #wrap[role="login"] {background-color:#f0eade; padding:0;} #wrap[role="login"] #container{width:897px; height:937px; margin:0 auto; background:url(../images/business/member/bg_login.png) no-repeat center; background-size: contain; padding: 150px 220px 150px 280px;} [role="login"] #container #logo{display:block; width:122px; margin:0 auto;} [role="login"] .title{padding: 60px 0 25px; border-bottom: 2px solid #666;} [role="login"] .title div{font-size: 42PX; font-weight: 600; text-align: center;} [role="login"] .title span{display:block; padding-top:10px; font-size: 22PX; text-align: center; color: #666;} [role="login"] .cont{} /*관리자*/ [role="login"] .login2 .cont dl{padding: 5% 8%;} [role="login"] .login2 .cont dl dt, [role="login"] .login2 .cont dl dd{padding-bottom: 15px;} [role="login"] .login2 .cont dl dt{font-size: 18px; float: left; clear: left; width:22%; margin-right: 16px;} [role="login"] .login2 .cont dl dt span{font-weight: 600; line-height:50px;} [role="login"] .login2 .cont dl dd{} [role="login"] .login2 .cont dl dd input{width: 73%; height: 50px; padding-left: 17px; border-radius: 6px; border: 1px solid #999;} [role="login"] .login2 .cont dl dd input{font-size: 20px;} [role="login"] .login2 .cont a img{display: block; margin: 0 auto;} [role="login"] .login2 .cont .loginCont #login {display:block; width: 204px; margin:0 auto;} [role="login"] .login2 .cont .loginCont{padding:0;} /*일반*/ [role="login"] .login1 .cont ul{padding: 28px 0 78px; border-bottom: 1px solid #b6b6b6;} [role="login"] .login1 .cont ul li{float: left; width:48%; height:50px; margin:0 1%; text-align: center; border-radius: 4px; line-height: 50px; font-size: 18px;} [role="login"] .login1 .cont ul li.authentication{ background: #756d64; border: 1px solid #756d64;} [role="login"] .login1 .cont ul li.authentication a{display:block; color:#fff;} [role="login"] .login1 .cont ul li.name{background:#eee;border: 1px solid #b6b6b6;} [role="login"] .login1 .cont ul li.name span{color:#666;} [role="login"] .login1 .cont .loginCont{padding:28px;} [role="login"] .login1 .cont .loginCont #login {display:block; width: 204px; margin:0 auto;} [role="login"] .login1 .cont .loginCont span {display:block; padding:20px; text-align: center; color:#666; font-size:18px;} /*검색*/ [role="search"] .search {max-width: 1260px; margin: 0 auto;} [role="search"] .search .userChange{text-align: right;} [role="search"] .search .userChange a{display: inline-block; width: 100px; height: 40px; text-align:center; background: #8b8b8b; color: #fff; line-height: 40px;} [role="search"] .search .header{padding: 15px 10px; border-bottom: 1px solid #8b8b8b;} [role="search"] .search .condition{padding:15px 10px; } [role="search"] .search .condition dl{border-top: 1px solid #3b3b3b;} [role="search"] .search .condition dl dt{width: 15%; height:40px; line-height:40px; float: left;text-align: center;border-bottom: 1px solid #8b8b8b; border-right: 1px solid #8b8b8b; background: #3b3b3b; color: #fff;} [role="search"] .search .condition dl dd{width: 35%; height:40px; padding-left:20px; line-height:40px; float: left; border-bottom: 1px solid #8b8b8b; border-right: 1px solid #8b8b8b;} [role="search"] .search .condition select{width: 140px;} [role="search"] .search .condition input{width: 140px;} [role="search"] .search .condition #search{display: block; width: 100px; height:40px; margin: 25px auto; background: #3b3b3b; color: #fff; line-height: 40px; text-align: center;} [role="search"] .search .result{} [role="search"] .search .result .searchTotal{margin: 15px 0;} [role="search"] .search .result .resultList .listA{width: 100%; border: 1px solid #8b8b8b; border-collapse: collapse;} [role="search"] .search .result .listA th, [role="search"] .search .result .listA td{border: 1px solid #8b8b8b; height:40px; text-align: center;} [role="search"] .search .result .listA th{background: #3b3b3b; color: #fff;} [role="search"] .calendar img{vertical-align: middle; padding-left: 5px; margin-top: -4px;} /********** media query **********/ @media all and (max-width:1440px){ .recommend h3 {right:0;} .smartBox {margin:120px auto; width:1200px; height:356px;} .smartBox strong {padding-top:60px;} .mathProcess {width:1200px; margin-left:0; margin-right:0;} }