@CHARSET "UTF-8"; .slick-slider {} .slick-slider .slick-list {position:relative; height:100%; overflow:hidden;} .slick-slider .slick-list:after {content:""; display:block; clear:both;} .slick-slider .slick-list .slick-slide {outline:none; border:0;} .slick-slider.noControll .slick-arrow {display:none;} .slick-slider .slick-arrow {position:absolute; top:50%; width:30px; height:30px; margin-top:-15px; text-align:left; text-indent:-3000em; transition:background 0.2s ease-in-out; border-radius:17px; border:none; cursor:pointer;} .slick-slider .slick-prev {left:5px; background:url(/mobile/images/blt/arrow_left.png) no-repeat 50%;} .slick-slider .slick-next {right:5px; background:url(/mobile/images/blt/arrow_right.png) no-repeat 50%;} .slick-slider .slick-prev:hover {background:rgba(0,0,0,.1) url(/mobile/images/blt/arrow_left.png) no-repeat 50%;} .slick-slider .slick-next:hover {background:rgba(0,0,0,.1) url(/mobile/images/blt/arrow_right.png) no-repeat 50%;} .controllTypeA .slick-arrow {position:absolute; top:50%; width:40px; height:58px; margin-top:-29px; text-align:left; text-indent:-3000em; transition:background 0.2s ease-in-out; border:none; cursor:pointer; border-radius:0;} .controllTypeA .slick-prev {left:-50px; background:url(/mobile/images/blt/arrow_g_m_left.png) no-repeat 50%;} .controllTypeA .slick-next {right:-50px; background:url(/mobile/images/blt/arrow_g_m_right.png) no-repeat 50%;} .controllTypeA .slick-prev:hover {background:rgba(0,0,0,.1) url(/mobile/images/blt/arrow_g_m_left.png) no-repeat 50%;} .controllTypeA .slick-next:hover {background:rgba(0,0,0,.1) url(/mobile/images/blt/arrow_g_m_right.png) no-repeat 50%;} /* main */ #header h1 {z-index:-1} .main #contatiner {position:relative; padding-top:130px; border-bottom:30px solid #f4f4f4; z-index:5;} .main #contatiner:after {content:""; position:absolute; right:-15px; bottom:-30px; display:block; width:50%; height:30px; background:#e72410;} #mainVisualArea:before {content:""; position:absolute; left:0; bottom:0; display:block; width:15px; height:120px; background:#0062b1;} .main #quickBoard:before {content:""; position:absolute; left:0; bottom:0; display:block; width:15px; height:100%; background:#0062b1;} .main .movieArea:before {content:""; position:absolute; left:0; bottom:0; display:block; width:15px; height:100%; background:#0062b1;} .main #footer {} #mainVisualArea {position:relative; height:425px; padding:0 15px; margin:0 auto; z-index:10;} #mainVisualArea .mainVisualWrap {height:425px; position:relative; width:100%;} #mainVisualArea .mainVisualWrap:after {content:""; display:block; clear:both;} #mainVisualArea .mainVisualWrap .slick-list {position:relative; height:425px; z-index:10;} #mainVisualArea .mainVisualWrap .slick-list:after {content:""; display:block; clear:both;} #mainVisualArea .section {float:left; width:100%; height:425px; position:relative; background-size:cover; background-position:50% 0; background-repeat:no-repeat; background-color:#f4f4f4;} .visualCont {position:absolute; width:100%; left:0; top:25px; padding:0 20px; color:#fff;} .visualCont.otherColor {color:#000;} .visualCont strong {display:block; font-size:36px; line-height:37px; font-weight:700; color:inherit;} .visualCont p {margin-top:5px; font-size:13px; color:inherit; line-height:16px; font-weight:300;} .visualCont a.btn {margin-top:15px; width:140px;} .visualCont a.btn:after {border-width:0 3px 4px 0;} .visualCont.otherColor a.btn {border-color:#434343 !important; color:#434343 !important; background-color:rgba(255,255,255,.05) !important;} .visualCont.otherColor a.btn:after {border-color:#434343;} #mainVisualArea .slick-dots {position:absolute; left:20px; top:300px; z-index:15;} #mainVisualArea .slick-dots li {display:inline-block; margin-right:10px; font-size:0; line-height:0; width:11px; text-align:center; vertical-align:middle;} #mainVisualArea .slick-dots li button {width:5px; height:5px; display:block; padding:0; margin:0 auto; border-radius:100%; background:#e3e3e3; opacity:0.85; box-sizing:content-box; text-align:left; text-indent:-3000em; font-size:0; line-height:0; box-shadow:none; border:none;} #mainVisualArea .slick-dots li.slick-active button {opacity:1; border:3px solid #fabe00; background:transparent;} #mainVisualArea .slick-arrow {display:none !important;} .main #tagListArea {position:relative; height:76px; padding:25px 15px; margin:-76px auto 0; z-index:30; visibility:hidden;} .main #tagListArea .slick-arrow {position:absolute; top:15px; width:20px; height:26px; text-align:left; text-indent:-3000em; z-index:50; transition:background 0.2s ease-in-out; border-radius:17px;} .main #tagListArea .slick-prev {left:10px; background:url(/mobile/images/blt/arrow_w_left.png) no-repeat 50%; background-size:8px auto;} .main #tagListArea .slick-next {right:10px; background:url(/mobile/images/blt/arrow_w_right.png) no-repeat 50%; background-size:8px auto;} .main #tagListArea .tagListWrap {position:relative; height:26px; padding:0 30px;} .main #tagListArea .tagListWrap:after {content:""; display:block; clear:both;} .main #tagListArea .tagListWrap .slick-slide {float:left; margin:0 2px;} .main #tagListArea .tagListWrap .slick-slide a {display:inline-block; height:26px; padding:0 20px; border-radius:13px; background:rgba(255,255,255,.5); color:#000; line-height:26px; transition:all 0.2s ease-in-out; font-size:13px; white-space:nowrap;} .main #tagListArea .tagListWrap .slick-slide a:hover {background:rgba(255,255,255,.75);} .main #quickBoard {position:relative; padding:20px 15px 0; height:130px; z-index:30} .main #quickBoard .slick-arrow {display:none !important;} .main #quickBoard .quickBoardWrap {background:#fff;} .main #quickBoard .quickBoardWrap div.slick-slide {float:left; width:100%;} .main #quickBoard .quickBoardWrap div.slick-slide a {position:relative; display:block; padding-left:90px; min-height:36px;} .main #quickBoard .quickBoardWrap div.slick-slide a:before {content:""; position:absolute; left:0; top:5px; display:block; width:20px; height:1px;} .main #quickBoard .quickBoardWrap div.slick-slide.news a:before {background:#6fba2c;} .main #quickBoard .quickBoardWrap div.slick-slide.notice a:before {background:#0062b1;} .main #quickBoard .quickBoardWrap div.slick-slide.event a:before {background:#fabe00;} .main #quickBoard .quickBoardWrap div.slick-slide.advice a:before {background:#ff0000;} .main #quickBoard .quickBoardWrap div.slick-slide.activities a:before {background:#fabe00;} .main #quickBoard .quickBoardWrap div.slick-slide a:after {content:""; display:block; clear:both;} .main #quickBoard .quickBoardWrap div.slick-slide .side {position:absolute; left:0; top:3px; padding-left:30px;} .main #quickBoard .quickBoardWrap div.slick-slide strong {display:block; font-size:11px; line-height:11px; font-weight:400; text-transform:uppercase;} .main #quickBoard .quickBoardWrap div.slick-slide.event strong {color:#fabe00;} .main #quickBoard .quickBoardWrap div.slick-slide.news strong {color:#6fba2c;} .main #quickBoard .quickBoardWrap div.slick-slide.notice strong {color:#0062b1;} .main #quickBoard .quickBoardWrap div.slick-slide.advice strong {color:#0062b1;} .main #quickBoard .quickBoardWrap div.slick-slide.activities strong {color:#ff0000;} .main #quickBoard .quickBoardWrap div.slick-slide .date {display:block; padding-top:3px; font-size:18px; line-height:18px; color:#333; font-weight:700;} .main #quickBoard .quickBoardWrap div.slick-slide p {font-size:13px; padding-right:15px; line-height:18px;} .main #quickBoard .slick-dots {position:absolute; left:45px; bottom:40px; z-index:15;} .main #quickBoard .slick-dots li {display:inline-block; margin-right:10px; font-size:0; line-height:0; width:11px; text-align:center; vertical-align:middle;} .main #quickBoard .slick-dots li button {width:5px; height:5px; display:block; padding:0; margin:0 auto; border-radius:100%; background:#e3e3e3; opacity:0.85; box-sizing:content-box; text-align:left; text-indent:-3000em; font-size:0; line-height:0; box-shadow:none; border:none;} .main #quickBoard .slick-dots li.slick-active button {opacity:1; border:3px solid #0062b1; background:transparent;} .main #quickBoard .snsArea {position:absolute; right:30px; bottom:25px;} .main #quickBoard .snsArea:after {content:""; display:block; clear:both;} .main #quickBoard .snsArea li {float:left; margin-left:10px;} .main .movieArea {position:relative; padding-left:15px;} .main .movieArea iframe {vertical-align:top;} #mainContent {position:relative; padding:0 15px;} #mainContent .tit {display:block; font-size:28px; line-height:26px; font-weight:700;} #mainContent .titTxt {display:block; padding-top:5px; font-size:12px; color:#555; line-height:15px;} #mainContent #studyProcessCont {position:relative; padding:65px 0 0 50px;} #mainContent #studyProcessCont:before {content:""; position:absolute; left:-15px; bottom:0; display:block; width:45px; height:100%; background:#0062b1;} #mainContent #studyProcessCont .tit {color:#0062b1;} #mainContent #studyProcessCont .tit a {color:#0062b1;} #mainContent #studyProcessCont .btnGo { display:block; width:21px; height:27px; position:absolute; right:0; top:63px; } #mainContent #studyProcessCont .btnGo:before, #mainContent #studyProcessCont .btnGo:after {content:""; position:absolute; right:0; top:12px; display:block; width:21px; height:3px; background:#0062b1; font-size:0; line-height:0;} #mainContent #studyProcessCont .btnGo:after { top: 4px; right: 9px; width: 3px; height: 21px; } #mainContent #studyProcessCont .contArea {padding-top:5px;} #mainContent #studyProcessCont .contArea li {position:relative; padding-top:20px; padding-bottom:5px;} #mainContent #studyProcessCont .contArea li span {position:absolute; left:-50px; top:20px; display:block; width:30px; padding-top:3px; border-top:1px solid #fff; color:#fff; font-size:18px; font-weight:400; transition:all 0.2s ease-in-out; background:#0062b1;} #mainContent #studyProcessCont .contArea li strong {display:block; position:relative; font-size:21px; line-height:20px; font-weight:700; font-weight:700; color:#333; background:#fff; z-index:5;} #mainContent #studyProcessCont .contArea li strong br {display:none;} #mainContent #studyProcessCont .contArea li p {opacity:0; padding-top:5px; font-size:12px; line-height:15px;height:0;} #mainContent #studyProcessCont .contArea.on li span { animation-name:fadeIn; animation-duration: 0.75s; animation-fill-mode: both; } #mainContent #studyProcessCont .contArea.on li p { animation-name: fadeInDown; animation-duration: 0.75s; animation-fill-mode: both; } #mainContent #studyProcessCont .contArea.on li:nth-child(2) span, #mainContent #studyProcessCont .contArea.on li:nth-child(2) p {animation-delay:.3s;} #mainContent #studyProcessCont .contArea.on li:nth-child(3) span, #mainContent #studyProcessCont .contArea.on li:nth-child(3) p {animation-delay:.6s;} #mainContent #studyProcessCont .contArea.on li:nth-child(4) span, #mainContent #studyProcessCont .contArea.on li:nth-child(4) p {animation-delay:.9s;} @keyframes fadeIn { from { opacity: 1; } to { opacity: 1; } } @keyframes fadeInDown { from { height: 0; opacity: 0; transform:translateY(-100%); } to { height:40px; opacity: 1; transform:translateY(0); } } #mainContent #programsCont {position:relative; padding:65px 0 40px 50px;} #mainContent #programsCont:before {content:""; position:absolute; left:-15px; bottom:0; display:block; width:45px; height:100%; background:#f4f4f4;} #mainContent #programsCont .tit {color:#e72410;} #mainContent #programsCont ul {padding-top:0;} #mainContent #programsCont ul li {padding-top:25px;} #mainContent #programsCont ul li a {position:relative; display:block; padding-top:10px; border-top:1px dotted #939598; font-size:21px; line-height:26px; color:#333; font-weight:700;} /* #mainContent #programsCont ul li a:before {content:""; position:absolute; right:0; top:-11px; display:block; width:22px; height:22px; border-radius:50%; background:#e72410 url(/mobile/images/blt/arrow_w_right.png) no-repeat 50%; background-size:7px auto;} */ #mainContent #programsCont ul li a:before, #mainContent #programsCont ul li a:after { content: ""; position: absolute; right: 0; top: 25px; display: block; width: 21px; height: 3px; background: #e72410; font-size: 0; line-height: 0; } #mainContent #programsCont ul li a:after { top: 15px; right: 9px; width: 3px; height: 21px; } /* programs */ #programsIntro {position:relative; height:866px; padding-top:220px; margin-bottom:30px; overflow:hidden;} #programsIntro:before {content:""; position:absolute; left:50%; top:0; display:block; width:2400px; height:100%; margin-left:-1200px; background:url(/mobile/images/programs/bg_intro.jpg) no-repeat 0 0; transition:all 0.2s ease-in-out;} #programsIntro:after {content:""; display:block; clear:both; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0; transition:all 0.2s ease-in-out; z-index:5;} #programsIntro .introSection {position:relative; float:left; width:50%; color:#fff; z-index:10; transition:all 0.2s ease-in-out;} #programsIntro .introSection * {color:inherit; transition:all 0.2s ease-in-out;} #programsIntro .introSection .cont {width:79%;} #programsIntro .introSection h2 {font-size:110px; font-weight:700; line-height:110px;} #programsIntro .introSection .txt {padding-top:30px; line-height:22px; overflow:hidden;} #programsIntro .introSection ul {opacity:0; height:0; width:400px; overflow:hidden;} #programsIntro .introSection ul li {padding:30px 0 15px 0; border-top:1px solid #fff; border-top:1px solid rgba(255,255,255,.5)} #programsIntro .introSection ul li:first-child {border:none;} #programsIntro .introSection ul li a {display:block; position:relative;} #programsIntro .introSection ul li a:after {content:""; display:block; clear:both;} #programsIntro .introSection ul li a:before {content:""; position:absolute; left:10px; top:2px; display:block; width:27px; height:26px; background:url(/mobile/images/programs/arrow_intro.png) no-repeat 0 0;} #programsIntro .introSection ul li strong {float:right; display:block; font-size:30px; line-height:30px; font-weight:700;} #programsIntro .introSection ul li span {display:inline-block; margin-right:15px; font-size:20px; line-height:30px;} #programsIntro .introSection ul li p {padding-top:10px; padding-left:30px; line-height:22px; clear:both;} #programsIntro .mathSection {position:relative; padding-right:10%;text-align:right;} #programsIntro .mathSection * {text-align:inherit;} #programsIntro .mathSection .cont {float:right;} #programsIntro .mathSection ul {float:right;} #programsIntro .mathSection:after {content:""; position:absolute; right:0; top:145px; display:block; width:1px; height:60px; font-size:0; line-height:0; background:#fff; background:rgba(255,255,255,.4)} #programsIntro .englishSection {padding-left:160px; padding-left:10vw;} #programsIntro .englishSection ul {width:450px;} #programsIntro .englishSection ul li a:before {left:auto; right:10px; background:url(/mobile/images/programs/arrow_intro2.png) no-repeat 0 0;} #programsIntro .englishSection ul li strong {float:left;} #programsIntro .englishSection ul li span {margin-left:15px; margin-right:0;} #programsIntro .englishSection ul li p {padding-left:0; padding-right:30px;} #programsIntro.on:after, #programsIntro.on:after {opacity:.4;} #programsIntro.on .mathSection:after {display:none;} #programsIntro.on .txt {height:0px;} #programsIntro.math:before {margin-left:-1400px;} #programsIntro.math .mathSection {width:70%;} #programsIntro.math .mathSection ul {opacity:1; height:auto;} #programsIntro.math .englishSection {width:30%;} #programsIntro.math .englishSection h2 {font-size:40px; opacity:.4;} #programsIntro.english:before {margin-left:-1000px;} #programsIntro.english .englishSection {width:75%;} #programsIntro.english .englishSection ul {opacity:1; height:auto;} #programsIntro.english .mathSection {width:25%;} #programsIntro.english .mathSection h2 {font-size:40px; opacity:.4;} .programsWrap {} .programsWrap .contHeader { display:table; padding:0; padding-right:15px; width:100%; height:115px; text-align:left; background:#fff;} .programsWrap .contHeader h2 { display:table-cell; vertical-align:middle; padding:0 0 0 20px; background:url(/mobile/images/visual/program-math.png) center no-repeat; background-size:cover; font-size:35px; color: #fff; line-height:30px; font-weight:700;} .programSummit .contHeader h2 { display:table-cell; vertical-align:middle; padding:0 0 0 20px; background:url(/mobile/images/visual/program-summit.png) center no-repeat; background-size:cover; font-size:35px; color: #fff; line-height:30px; font-weight:700;} .programsEnglish .contHeader h2, .programsHaapyTalk .contHeader h2, .programsEnglishSparks .contHeader h2 {background:url(/mobile/images/visual/program-english.png) center no-repeat; background-size:cover;} .programsComon .contHeader h2 {background:#7d3c96;} .programsWrap .contents {position:relative; background:#fff; padding:0 20px 60px; margin-right:15px;} .programsWrap .contents:before {content:""; position:absolute; right:-15px; top:0; width:15px; height:100%; background:#f4f4f4;} .programsWrap .contents:after {display:none; content:""; position:absolute; right:-15px; top:-50px; width:15px; height:750px; background:#e72410;} #btnProgramsSelect {position:absolute; right:-4px; top:0; height:60px; width:33%; box-sizing:content-box; padding-left:15px;} #btnProgramsSelect:before {content:""; position:absolute; right:-15px; top:-50px; display:block; width:19px; height:110px; background:#e72410; z-index:50;} #btnProgramsSelect > a {width:100%; color:#fff; text-align:left; font-weight:700; z-index:50; padding:0 5px; background:#e72410; } #btnProgramsSelect a span {position:relative; display:block; padding-left:7px; padding-right:20px;} #btnProgramsSelect a span:before {content:""; position:absolute; right:0px; top:50%; display:block; width:17px; height:17px; margin-top:-9px; border:1px solid #fff; border-radius:50%;} #btnProgramsSelect a span:after {content:""; position:absolute; right:6px; top:50%; width:0px; height:0; margin-top:-2px; border-style:solid; border-width:4px 3px 0 3px;; border-color:#fff transparent transparent transparent ;} #btnProgramsSelect .programsList {display:none; position:absolute !important; right:0; top:50px; width:260px; padding:25px 20px; background:#fff; border:none !important; z-index:20;} #btnProgramsSelect .programsList li {position:relative; float:none; padding:0; border-top:2px dotted #dadada; width:100%; height:auto; text-align:left;} #btnProgramsSelect .programsList li:first-child {border-top:none;} #btnProgramsSelect .programsList li a {display:block; color:#333; font-size:17px; line-height:35px; color:#333; font-weight:500;} #btnProgramsSelect .programsList li a:before, #btnProgramsSelect .programsList li a:after {content:""; position:absolute; right:0; top:12px; display:block; width:11px; height:3px; background:#e72410; font-size:0; line-height:0; transform:rotate(45deg)} #btnProgramsSelect .programsList li a:before {} #btnProgramsSelect .programsList li a:after {top:15px; right:4px; width:3px; height:11px;} #btnProgramsSelect .dimArea {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:10;} #btnProgramsSelect.open .programsList {display:block;} #btnProgramsSelect.open .dimArea {display:block;} .programsWrap .contBody {padding:0;} .programsWrap p.txt {padding-top:15px;} .programsWrap .topBtnsArea {position:relative; padding:15px 20px;} .programsWrap .topBtnsArea:before {content:""; position:absolute; right:0; top:0; width:15px; height:150%; background:#f4f4f4;} /*23.01.11*/ .programsWrap .tabArea {margin:0 15px 0 0;} .programsWrap .tabArea ul {position:relative; border-bottom:1px solid #bcbcbc;} .programsWrap .tabArea ul:after { content:""; clear:both; display:block; } .programsWrap .tabArea ul li {display:table; float:left; width:33%; height:49px; position:relative; text-align:center;} .programsWrap .tabArea ul li:first-child {} .programsWrap .tabArea ul li a {position:relative; display:table-cell; color:#7c7c7c; font-weight:400; font-size:12px; line-height:15px; vertical-align:middle;} .programsWrap .tabArea ul li.on a span:before {} .programsWrap .tabArea ul li.on a {color:#333; font-weight:500; } .programsWrap .tabArea ul li.on a:before {content:""; position:absolute; left:50%; bottom:0; display:block; width:80%; height:5px; margin-left:-40%; background:#e72410; font-size:0; line-height:0;} .programsWrap .contents .section {margin-top:70px;} .programsWrap .contents .section.first {margin-top:0;} .programsWrap .contents .section h3 {font-size:28px; line-height:31px; color:#333; font-weight:700;} .programsWrap .contents .section .ageInfo {display:block; padding-top:5px; color:#e72410; font-weight:400;} .programsWrap .contents .section.header {} .programsWrap .contents .section.header p {margin-top:15px; color:#333;} .programsWrap .contents .section.header .movieBox {position:relative; margin-top:20px;} .programsWrap .contents .section.header .movieBox .movie {position:relative; width:100%; background:#fff; z-index:5;} .programsWrap .contents .section.header .movieBox p {margin-top:10px; font-size:12px; color:#7c7c7c; line-height:15px;} .programsWrap .contents .section.header .thumBox {position:relative; margin-top:20px;} .programsWrap .contents .section.header .thumBox img {position:relative; z-index:5} .programsWrap .contents .section.header .thumBox:after {content:""; position:absolute; left:0; bottom:-15px; display:block; width:65%; height:15px; background:#fabe00;} .programsWrap .boxContTypeA {position:relative; } .programsWrap .boxContTypeA p {position:relative; padding-top:10px;} .programsWrap .boxContTypeA ul {position:relative; padding-top:20px;} .programsWrap .boxContTypeA ul li {display:table; width:100%; margin-top:25px; padding:0 0 0 75px; color:#333; min-height:45px;} .programsWrap .boxContTypeA ul li:first-child {margin-top:0;} .programsWrap .boxContTypeA ul li span {display:table-cell; vertical-align:middle;} .programsWrap .boxContTypeA ul li strong {display:block; color:#333; font-weight:700;} .programsWrap .boxContTypeA ul li br {display:none;} .programsWrap .boxContTypeA ul li.icon1 {background:#fff url(/mobile/images/programs/benefits1.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon2 {background:#fff url(/mobile/images/programs/benefits2.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon3 {background:#fff url(/mobile/images/programs/benefits3.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon4 {background:#fff url(/mobile/images/programs/benefits4.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon5 {background:#fff url(/mobile/images/programs/benefits5.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon6 {background:#fff url(/mobile/images/programs/benefits6.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon7 {background:#fff url(/mobile/images/programs/benefits7.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon8 {background:#fff url(/mobile/images/programs/benefits8.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon9 {background:#fff url(/mobile/images/programs/benefits9.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon10 {background:#fff url(/mobile/images/programs/benefits10.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon11 {background:#fff url(/mobile/images/programs/benefits11.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .boxContTypeA ul li.icon12 {background:#fff url(/mobile/images/programs/benefits12.png) no-repeat 10px 50%; background-size:45px;} .programsWrap .learningTypeA {position:relative;} .programsWrap .learningTypeA:after {content:""; display:block; clear:both;} .programsWrap .learningTypeA .header {} .programsWrap .learningTypeA .header strong {display:block; font-size:38px; line-height:38px; color:#333; font-weight:700; } .programsWrap .learningTypeA .header strong span {color:#e72410; display:block;} .programsWrap .learningTypeA .header p {padding-top:5px; color:#333;} .programsWrap .learningTypeA .header dl {padding-top:15px;} .programsWrap .learningTypeA .header dl dt {font-size:12px; line-height:13px; color:#e72410; font-weight:500;} .programsWrap .learningTypeA .header dl dd {font-size:12px;} .programsWrap .learningTypeA .cont {position:relative; padding-top:40px;} .programsWrap .learningTypeA .cont strong {display:block; padding-bottom:5px; border-bottom:2px solid #434343; font-size:17px; line-height:20px; color:#333; font-weight:700;} .programsWrap .learningTypeA .cont strong small {font-weight:normal} .programsWrap .learningTypeA .cont ul {padding:10px 0; border-bottom:1px solid #e1e1e1;} .programsWrap .learningTypeA .cont ul li {padding:5px 10px 5px 0;} .programsWrap .learningTypeA .cont ul li a {position:relative; display:block; padding:5px 10px; color:#333;} .programsWrap .learningTypeA .cont ul li a:before, .programsWrap .learningTypeA .cont ul li a:after {content:""; position:absolute; right:0; top:10px; display:block; width:11px; height:2px; background:#e72410; font-size:0; line-height:0; transform:rotate(45deg)} .programsWrap .learningTypeA .cont ul li a:before {} .programsWrap .learningTypeA .cont ul li a:after {top:13px; right:4px; width:2px; height:11px;} .programsWrap .learningTypeB {position:relative;} .programsWrap .learningTypeB:before {content:""; position:absolute; left:0; top:25px; display:block; width:100%; height:660px; background:#f4f4f4;} .programsWrap .learningTypeB .contBody {position:relative;} .programsWrap .learningTypeB h3 {display:block; text-align:center; font-size:60px; line-height:50px; color:#333; font-weight:700;} .programsWrap .learningTypeB .cont {width:973px; max-width:100%; padding:75px 30px 0; margin:0 auto;} .programsWrap .learningTypeB .learningView {position:relative; width:100%; height:560px; background:#fff; box-shadow:5px 5px 14px rgba(0,0,0,.12); z-index:10;} .programsWrap .learningTypeB .learningView .tabCont {display:none; position:relative; padding:0 27px 0; } .programsWrap .learningTypeB .learningView .tabCont strong {display:block; height:47px; padding-top:15px; font-size:20px; line-height:24px; font-weight:700; color:#333; text-align:center;} .programsWrap .learningTypeB .learningView #default {display:table; width:100%; height:100%; text-align:center;} .programsWrap .learningTypeB .learningView #default div {display:table-cell; padding:70px 75px 0; background:url(/mobile/images/programs/default.png) no-repeat 50% 43%; font-size:15px; color:#7c7c7c; line-height:22px; vertical-align:middle; } .programsWrap .learningTypeB .learningListArea {position:relative; margin:-285px -30px 0;; padding:285px 30px 0; background:#fabe00;} .programsWrap .learningTypeB .learningListArea .header {position:relative; border-bottom:3px solid #fff;} .programsWrap .learningTypeB .learningListArea .header strong {display:block; padding:24px 0; font-size:28px; line-height:30px; font-weight:700; color:#fff;} .programsWrap .learningTypeB .learningListArea .header .btn {position:absolute; right:0; top:50%; margin-top:-20px;} .programsWrap .learningTypeB .learningList {} .programsWrap .learningTypeB .listSection {position:relative; padding:25px 0; border-top:1px solid #fcd55a;} .programsWrap .learningTypeB .listSection:first-child {border-top:none;} .programsWrap .learningTypeB .listSection:after {content:""; display:block; clear:both;} .programsWrap .learningTypeB .listSection strong {float:left; width:30%; font-size:20px; line-height:26px; font-weight:700; color:#fff;} .programsWrap .learningTypeB .listSection strong span {display:block;} .programsWrap .learningTypeB .listSection ul {position:absolute; left:30%; top:20px; width:70%;} .programsWrap .learningTypeB .listSection ul li {float:left; padding:2px 0 2px 0; width:33.3%;} .programsWrap .learningTypeB .listSection ul li a {position:relative; display:inline-block; padding:4px 30px 4px 15px; border-radius:15px; font-size:18px; line-height:22px; color:#fff; transition:all 0.2s ease-in-out;} .programsWrap .learningTypeB .listSection ul li a:before {content:""; position:absolute; right:15px; top:50%; display:block; width:13px; height:9px; margin:-4px; font-size:0; line-height:0; transition:all 0.2s ease-in-out; z-index:5;} .programsWrap .learningTypeB .listSection ul li a:after {content:""; position:absolute; left:0; top:50%; display:block; width:10px; height:1px; background:#fff; opacity:.5; transition:all .1s ease-in-out;} .programsWrap .learningTypeB .listSection ul li.on a {background:#fff; font-weight:700; color:#333; letter-spacing:-1px;} .programsWrap .learningTypeB .listSection ul li.on a:before {background:url(/mobile/images/blt/arrow_r_right.png) no-repeat 0 50%;} .programsWrap .learningTypeB .listSection ul li.on a:after {width:0; opacity:0;} .programsWrap .learningTypeC {position:relative;} .programsWrap .learningTypeC:before {content:""; position:absolute; left:0; top:25px; display:block; width:100%; height:660px; background:#f4f4f4;} .programsWrap .learningTypeC .contBody {position:relative;} .programsWrap .learningTypeC h3 {display:block; text-align:center; font-size:60px; line-height:50px; color:#333; font-weight:700;} .programsWrap .learningTypeC .cont {width:973px; max-width:100%; padding:75px 30px 0; margin:0 auto;} .programsWrap .learningTypeC .learningView {position:relative; width:100%; height:560px; background:#fff; box-shadow:5px 5px 14px rgba(0,0,0,.12); z-index:10;} .programsWrap .learningTypeC .learningView .tabCont {display:none; position:relative; padding:0 27px 0; } .programsWrap .learningTypeC .learningView .tabCont strong {display:block; height:47px; padding-top:15px; font-size:20px; line-height:24px; font-weight:700; color:#333; text-align:center;} .programsWrap .learningTypeC .learningView #default {display:table; width:100%; height:100%; text-align:center;} .programsWrap .learningTypeC .learningView #default div {display:table-cell; padding:70px 75px 0; background:url(/mobile/images/programs/default.png) no-repeat 50% 43%; font-size:15px; color:#7c7c7c; line-height:22px; vertical-align:middle; } .programsWrap .learningTypeC .learningListArea {position:relative; margin:-285px -30px 0;; padding:285px 30px 30px; background:#fabe00;} .programsWrap .learningTypeC .learningListSection {margin-top:30px;} .programsWrap .learningTypeC .learningListSection.first {margin-top:30px;} .programsWrap .learningTypeC .learningListSection .tit {display:block; padding:20px 0; font-size:30px; line-height:30px; color:#fff; font-weight:700; text-align:center;} .programsWrap .learningTypeC .learningListSection table {position:relative; table-layout:fixed; width:100%; border-bottom:6px solid #fff;} .programsWrap .learningTypeC .learningListSection table:before {content:""; position:absolute; right:0; bottom:0; display:block; width:6px; height:50px; background:#fff; font-size:0; line-height:0;} .programsWrap .learningTypeC .learningListSection table thead th {padding:19px 5px; font-size:18px; line-height:24px; color:#fff; font-weight:700; text-align:center; background:#0062b1; vertical-align:middle;} .programsWrap .learningTypeC .learningListSection table tbody td {padding:20px 10px; border-left:1px solid #fddf80; border-top:3px dotted #fddf80; color:#fff; line-height:20px; text-align:center; vertical-align:middle;} .programsWrap .learningTypeC .learningListSection table tbody td:first-child {border-left:none;} .programsWrap .learningTypeC .learningListSection table tbody tr:first-child td {border-top:none;} .programsWrap .learningTypeC .learningListSection .infoTypeA {margin-top:20px; padding:20px 95px 20px 30px; background:#fff url(/mobile/images/blt/deco.gif) no-repeat 100% 100%;} .programsWrap .learningTypeC .learningListSection .infoTypeA strong {display:block; line-height:24px; font-weight:500;} .programsWrap .learningTypeC .learningListSection .infoTypeA ul {padding-top:15px;} .programsWrap .learningTypeC .learningListSection .infoTypeA ul li {position:relative; padding:7px 0 7px 15px; line-height:22px; border-bottom:2px dotted #e1e1e1;} .programsWrap .learningTypeC .learningListSection .infoTypeA ul li:before {content:""; position:absolute; left:5px; top:18px; display:block; width:6px; height:1px; background:#555;} .programsWrap .links {position:relative; width:100%; padding:20px 30px 0; background:#f4f4f4; text-align:center; z-index:50;} .programsWrap .links:after {content:""; display:block; clear:both;} .programsWrap .links li {position:relative; float:left; width:33.3%; height:70px; vertical-align:top;} .programsWrap .links a {display:block; width:100%; height:100%; padding:0 25px 0 5px; border-left:1px solid #434343; font-size:12px; line-height:11px; color:#333; font-weight:500; text-align:left;} .programsWrap .links a.btnFindCenter {background:url(/mobile/images/icon/location5.png) no-repeat 5px 100%; background-size:auto 31px;} .programsWrap .links a.btnContactUs {background:url(/mobile/images/icon/contactus5.png) no-repeat 5px 100%; background-size:auto 31px;} .programsWrap .links a.btnDownloadBrochure {background:url(/mobile/images/icon/download5.png) no-repeat 5px 100%; background-size:auto 31px;} .programsWrap .contTypeA {position:relative; margin-top:70px;} .programsWrap .contTypeA:after {content:""; display:block; clear:both;} .programsWrap .contTypeA .cont {position:relative; float:left; width:50%; padding-top:110px;} .programsWrap .contTypeA .cont:before {content:""; position:absolute; right:103px; top:72px; display:block; width:160px; height:4px; background:url(/mobile/images/programs/math_blt.gif) no-repeat 0 0;} .programsWrap .contTypeA .contOffline {padding-right:100px; background:url(/mobile/images/programs/offline.png) no-repeat 40% 50px;} .programsWrap .contTypeA .contOnline {padding-left:100px; background:url(/mobile/images/programs/online.png) no-repeat 60% 50px;} .programsWrap .contTypeA .contOnline:before {right:auto; left:130px;} .programsWrap .contTypeA .cont strong {display:block; margin-bottom:15px; text-align:center; font-size:24px; line-height:26px; color:#333; font-weight:700;} .programsWrap .contTypeA .cont p {width:299px; padding:5px 0 5px 60px; margin:0 auto; color:#7c7c7c; line-height:22px; text-align:left; position:relative; } .programsWrap .contTypeA .cont p:before { position:absolute; left:40px; content:"1"; color: #0062b1; font-weight:700; } .programsWrap .contTypeA .cont p + p:before { position:absolute; left:40px; content:"2"; color: #0062b1; font-weight:700; } .programsWrap .contTypeA .cont p + p + p:before { position:absolute; left:40px; content:"3"; color: #0062b1; font-weight:700; } .programsWrap .contTypeA .cont p + p + p +p:before { position:absolute; left:40px; content:"4"; color: #0062b1; font-weight:700; } .programsWrap .contTypeA .cont p span.num { margin-left:-15px; font-weight:700; } .programsWrap .contTypeA .contSum {position:absolute; left:50%; top:0; width:194px; margin-left:-97px;} .programsWrap .contTypeA .contSum strong {position:absolute; left:9px; top:164px; width:176px; height:176px; padding:55px 20px 0; border-radius:50%; background:#e72410; z-index:10; color:#fff; text-align:center; font-size:28px; line-height:30px; font-weight:700;} .programsWrap .contTypeA .contSum strong:before {content:""; position:absolute; left:-9px; top:-9px; display:block; width:194px; height:194px; border:1px solid #e72410; border-radius:50%; box-sizing:border-box;} .programsWrap .contTypeA .contSum p {position:absolute; left:0; top:0; width:194px; height:194px; padding:30px 30px 0; border:10px solid #f4f4f4; border-radius:50%; background:#fff; color:#e72410; font-size:16px; line-height:22px; font-weight:700; text-align:center; } .programsWrap .contTypeB {position:relative;} .programsWrap .contTypeB:after {content:""; display:block; clear:both;} .programsWrap .contTypeB .cont {} .programsWrap .contTypeB .contOffline {} .programsWrap .contTypeB .contOnline {margin-top:50px;} .programsWrap .contTypeB .cont strong {display:block; font-size:28px; line-height:31px; color:#333; font-weight:700; text-transform:uppercase;} .programsWrap .contTypeB .cont p {padding:15px 0 0 30px; color:#333; line-height:17px; position:relative; border-left:1px solid #bcbcbc;} .programsWrap .contTypeB .cont p.first {padding-top:0; margin-top:30px;} .programsWrap .contTypeB .cont p:before {position:absolute; left:15px; content:"1"; color: #e72410; font-weight:700; } .programsWrap .contTypeB .cont p + p:before {content:"2"; } .programsWrap .contTypeB .cont p + p + p:before {content:"3";} .programsWrap .contTypeB .cont p + p + p +p:before {content:"4";} .programsWrap .contTypeB .cont p span.num { margin-left:-15px; font-weight:700; } .programsWrap .contTypeB .contSum {position:relative; width:300px; margin:25px auto 0; } .programsWrap .contTypeB .contSum:after { content:""; clear:both; display:block; } .programsWrap .contTypeB .contSum .cicleTop { display: table; float:left; width: 156px; height: 156px; border-radius: 50%; background: #fff; border: 10px solid #f4f4f4; } .programsWrap .contTypeB .contSum .cicleBottom { position:relative; float:left; margin-left:-15px; width: 156px; height: 156px; border: 1px solid #e72410; border-radius: 50%; box-sizing: border-box; background: transparent; } .programsWrap .contTypeB .contSum .cicleBottom>div { content: ""; position: absolute; top: 7px; left: 7px; display: table; background: #e72410; border-radius: 50%; box-sizing: border-box; width: 140px; height: 140px; } .programsWrap .contTypeB .contSum strong { display:table-cell; vertical-align:middle; color: #fff; text-align: center; font-size: 21px; line-height: 23px; font-weight: 700; vertical-align: middle; } .programsWrap .contTypeB .contSum p { display:table-cell; vertical-align:middle; color: #e72410; font-size: 13px; line-height: 17px; font-weight: 700; text-align: center; vertical-align: middle; } .programsWrap.programsOtherColor .contTypeB .cont p:before {color:#0062b1;} .programsWrap.programsOtherColor .contents .section .ageInfo {color:#0062b1;} .programsWrap.programsOtherColor .tabArea ul li.on a:before {background:#0062b1;} .programsWrap.programsOtherColor #btnProgramsSelect:before {background:#0062b1;} .programsWrap.programsOtherColor #btnProgramsSelect > a {background:#0062b1;} .programsWrap.programsOtherColor #btnProgramsSelect .programsList li a:before, .programsWrap.programsOtherColor #btnProgramsSelect .programsList li a:after {background:#0062b1} .programsWrap.programsOtherColor .contTypeB .contSum .cicleBottom {border-color:#0062b1;} .programsWrap.programsOtherColor .contTypeB .contSum strong {background:#0062b1;} .programsWrap.programsOtherColor .contTypeB .contSum strong:before {border-color:#0062b1;} .programsWrap.programsOtherColor .contTypeB .contSum p {color:#0062b1;} .programsWrap .slideDownContents {padding-top:20px;} .programsWrap .slideDownContents .sdSection {margin-top:35px;} .programsWrap .slideDownContents .sdSection.first {margin-top:0px;} .programsWrap .slideDownContents .sdSection > a {position:relative; display:block;} .programsWrap .slideDownContents .sdSection > a.hasThum {padding-left:60px;} .programsWrap .slideDownContents .sdSection > a.hasThum img {position:absolute; left:0; top:0;} .programsWrap .slideDownContents .sdSection > a strong {display:block; font-size:26px; height:26px; color:#333; font-weight:700;} .programsWrap .slideDownContents .sdSection > a span {display:block; font-size:20px; line-height:20px; color:#333; font-weight:700;} .programsWrap .slideDownContents .sdSection > a:before, .programsWrap .slideDownContents .sdSection > a:after {content:""; position:absolute; right:0; top:9px; display:block; width:21px; height:3px; background:#0062b1; font-size:0; line-height:0;} .programsWrap .slideDownContents .sdSection > a:before {} .programsWrap .slideDownContents .sdSection > a:after {top:0; right:9px; width:3px; height:21px;} .programsWrap .slideDownContents .sdSection .contArea {display:none; margin-top:20px; } .programsWrap .slideDownContents .sdSection .sideLine {padding-left:15px; border-left:1px solid #bcbcbc;} .programsWrap .slideDownContents .sdSection .contArea p {margin-top:0;} .programsWrap .slideDownContents .sdSection .contArea strong {display:block; color:#0062b1; padding-bottom:5px; font-size:15px; line-height:15px;} .programsWrap .slideDownContents .sdSection .contArea .thum {padding-top:20px;} .programsWrap .slideDownContents .sdSection .contArea .txtList {} .programsWrap .slideDownContents .sdSection .contArea .txtList li {color:#333;} .programsWrap .slideDownContents .sdSection .contArea .txtList li:before { content:"-"; padding-right:5px; } .programsWrap .slideDownContents .sdSection .contArea .btns {} .programsWrap .slideDownContents .sdSection .contArea .btns li {display:inline-block; margin-top:15px; margin-right:5px; vertical-align:top;} .programsWrap .slideDownContents .sdSection .contArea .btns li strong {display:block; padding-bottom:5px; color:#333; font-size:17px; line-height:19px;} .programsWrap .slideDownContents .sdSection .contArea .btns li a {margin-right:5px;} .programsWrap .slideDownContents .sdSection .contArea .dotList {padding-top:10px;} .programsWrap .slideDownContents .sdSection .contArea .dotList:after {content:""; display:block; clear:both;} .programsWrap .slideDownContents .sdSection .contArea .dotList li {position:relative; float:left; width:33%; padding-left:8px; font-size:13px; line-height:19px; color:#0062b1; font-weight:700;} .programsWrap .slideDownContents .sdSection .contArea .dotList li:before {content:"·"; position:absolute; left:0; top:0; color:#0062b1; font-weight:700;} .programsWrap .slideDownContents .sdSection.on > a:before, .programsWrap .slideDownContents .sdSection.on > a:after {transform:rotate(45deg)} .programsWrap .slideDownContents .sdSection.on .contArea {display:block;} .programsWrap .slideDownContents .footer {padding-top:25px;} .programsWrap .slideDownContents .footer p {padding-bottom:10px; color:#7c7c7c; font-size:12px; line-height:16px;} .programsWrap .slideDownContents .footer p br {display:none;} /* programs math */ .programsWrap {} /* programs play math */ .playMathEnables {} .playMathEnables ul {padding-top:25px;} .playMathEnables ul li {position:relative; padding:13px 0 13px 0; text-align:left;} .playMathEnables ul li:before {content:""; position:absolute; left:0; top:8px; display:block; width:10px; height:2px; background:#e72410; font-size:0; line-height:0;} /* programs english */ .programsEnglish .contTypeB .contSum strong { border-radius:50%; font-size:16px; line-height:26px; } html[lang=id-ID] .programsEnglish .contTypeB .contSum strong { font-size:15px; line-height:20px;} html[lang=fr-CA] .programsEnglish .contTypeB .contSum strong { font-size:15px; line-height:20px;} /* programs Haapy Talk */ .programsHaapyTalk .curriculumDesign {} .programsHaapyTalk .curriculumDesign .curriculum { margin-top:35px;} .programsHaapyTalk .curriculumDesign .curriculum:after { content:""; clear:both; display:block; } .programsHaapyTalk .curriculumDesign .curriculum dl { float:left; width:50%; box-sizing:border-box; border-left:1px solid #e1e1e1; padding:0 0 0 20px; } .programsHaapyTalk .curriculumDesign .curriculum dl:first-child {padding-left:0; border:none;} .programsHaapyTalk .curriculumDesign .curriculum dl dt {} .programsHaapyTalk .curriculumDesign .curriculum dl dd {padding-top:5px;} .programsHaapyTalk .curriculumDesign .curriculum dl dd strong {display:block; color:#333; font-size:20px; line-height:21px; font-weight:700; } .programsHaapyTalk .curriculumDesign .curriculum dl dd p {padding-top:5px; color:#333; } .programsHaapyTalk .slideDownContents {margin-top:50px;} /* programs English Sparks */ .programsEnglishSparks .boxContTypeA ul li {background-position:10px 0 !important;} .programsEnglishSparks .visual {padding-top:20px;} /* news */ .newListWrap .contBody {} .newListWrap .listTypeA {padding-bottom:12px;} .newListWrap .lineBoxColorA:before {box-sizing:content-box; padding-top:20px; top:-20px;} /* FAQ */ /* CONTACT US */ .contactUsWrap .contBody {} .contactUsWrap .HowToReachUs {position:relative; margin-bottom:70px; padding:25px 0 10px; border-bottom:1px solid #434343;} .contactUsWrap .HowToReachUs h3 {position:relative; padding-top:5px; font-size:28px; line-height:28px; color:#333; font-weight:700;} .contactUsWrap .HowToReachUs h3:after {content:""; position:absolute; left:1px; top:0; width:17px; height:3px; background:#6fba2c; font-size:0; line-height:0;} .contactUsWrap .HowToReachUs ul {position:relative;} .contactUsWrap .HowToReachUs ul:after {content:""; display:block; clear:both;} .contactUsWrap .HowToReachUs ul li { display:table; position:relative; padding:15px 0 15px 10px; color:#333; font-size:13px; line-height:15px;} .contactUsWrap .HowToReachUs ul li:before {content:""; position:absolute; left:28px; top:-10px; display:block; width:4px; height:29px; background:url(/mobile/images/blt/dotLine.png) no-repeat 0 0; background-size:4px auto;} .contactUsWrap .HowToReachUs ul li:first-child:before {display:none;} .contactUsWrap .HowToReachUs ul li .icon {display:table-cell; width:55px; vertical-align:middle; text-align:left;} .contactUsWrap .HowToReachUs ul li .icon img {height:40px;} .contactUsWrap .HowToReachUs ul li p {display:table-cell; min-height:40px; font-size:13px; color:#333; line-height:15px; vertical-align:middle;} .contactUsWrap .completeMsg { min-height: 400px; margin-top: 35px; margin-bottom: 50px; text-align: center; color: #333; } .contactUsWrap .completeMsg .subTitle { font-size: 28px; font-weight: 700; color: inherit; text-transform: uppercase; } .contactUsWrap .completeMsg p { margin-top: 1em; font-size: 13px; font-weight: 400; color: inherit; } .contactUsWrap .completeMsg .btnArea { display: -ms-flexbox; display: flex; } .contactUsWrap .completeMsg .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 15px; } /* FIND A CENTER */ .findACenterWrap {position:relative;} .findACenterWrap:before {content:""; position:absolute; right:15px; top:-46px; display:block; width:161px; height:201px; background:url(/mobile/images/visual/contactus.png) no-repeat 0 0; background-size:161px 201px;} .findACenterWrap .contHeaderTypeA { height:auto; background:transparent;} .findACenterWrap .contHeaderTypeA h2 {padding:40px 0 0; border-bottom:0;} .findACenterWrap .searchFormA {padding:0 15px;} .findACenterWrap .searchFormA:before {display:none;} .findACenterWrap .searchFormA select {padding:0; margin-top:20px; border:0; border-bottom:2px solid #434343; font-size:15px; font-weight:500; color:#333; background:url(/mobile/images/blt/arrow_selec.png) no-repeat 97% 50%; background-size:17px auto;} .findACenterWrap .searchFormA select option {padding:0; font-size:15px; color:#333;} .findACenterWrap .searchFormA .inputWrap {margin-top:20px; border-bottom:2px solid #434343;} .findACenterWrap .searchFormA input[type=text] {height:40px; padding:0; border:0; font-weight:500;} .findACenterWrap .searchFormA input[type=text]::-webkit-input-placeholder {color:#333;} .findACenterWrap .searchFormA a {background:#fff url(/mobile/images/icon/search3.png) no-repeat 50%; background-size:18px; border:none;} #findACenterCont {position:relative; padding:0 15px; height:600px; margin-top:50px; overflow:hidden;} #findACenterCont .centerListWrap {position:relative; height:100%; padding:35px 0 0 0; background:#fff; z-index:10;} #findACenterCont .centerListWrap .header {position:absolute; left:0; top:0; width:100%; height:30px; z-index:2; background:#fff;} #findACenterCont .centerListWrap .header > div {padding-bottom:12px; border-bottom:1px solid #ababab;} #findACenterCont .centerListWrap .header > div:after {content:""; display:block; clear:both;} #findACenterCont .centerListWrap .header p, #findACenterCont .centerListWrap .header .btnArea a {font-size:15px; line-height:20px;} #findACenterCont .centerListWrap .header p {float:left; font-weight:500; color:#333; font-size:16px; text-transform:uppercase;} #findACenterCont .centerListWrap .header p span {font-weight:700; color:#555;} #findACenterCont .centerListWrap .header .btnArea {float:right; margin-top:0;} #findACenterCont .centerListWrap .header .btnArea a {display:inline-block; margin-left:10px; font-weight:500; font-size:16px; line-height:20px;} #findACenterCont .centerListWrap .header .btnArea #btnClearAll {display:none; padding-right:23px; background:url(/mobile/images/icon/reflesh.png) no-repeat 100% 2px; color:#333; background-size:21px auto;} #findACenterCont .centerListWrap .header .btnArea #btnListBy {position:relative; padding-right:23px; color:#0062b1;} #findACenterCont .centerListWrap .header .btnArea #btnListBy:before {position:absolute; right:0; top:0; content:""; display:block; width:18px; height:20px; background:url(/mobile/images/icon/filter.png) no-repeat 0 50%; background-size:auto 18px;} #findACenterCont .centerListWrap .header .btnArea #btnListBy span {display:inline-block; line-height:20px; text-transform:uppercase;} #findACenterCont .centerListWrap #centerList {height:100%; padding:25px 0; margin-right:-10px; overflow:auto;} #findACenterCont .centerListWrap #centerList li.none {padding:40px 0 !important; margin-top:20px; border:none; min-height:0; text-align:center !important; font-size:18px; font-weight:700;} #findACenterCont .centerListWrap #centerList li {position:relative; margin-top:40px; padding-left:90px; padding-right:15px; padding-bottom:4px; border-left:1px solid #434343;} #findACenterCont .centerListWrap #centerList li:first-child {margin-top:0;} #findACenterCont .centerListWrap #centerList li .distance {position:absolute; left:15px; top:0; font-size:13px; color:#333; width:70px;} #findACenterCont .centerListWrap #centerList li .distance b {display:block; padding-bottom:5px; font-size:26px; font-weight:700; line-height:26px;} #findACenterCont .centerListWrap #centerList li .tit {display:block; position:relative; font-size:21px; line-height:20px; color:#333; font-weight:700;} /* 0609_아이레벨_수정사항 : (line-height 수정) 시작 */ #findACenterCont .centerListWrap #centerList li .tit a {font-size:21px; line-height:1.3; color:#333; font-weight:700;} /* 0609_아이레벨_수정사항 : (line-height 수정) 끝 */ #findACenterCont .centerListWrap #centerList li .tit .icon {display:inline-block; height:20px; padding:0 5px 0; border-radius:11px; color:#fff; font-weight:700; font-size:11px; line-height:20px; background:#fabe00; vertical-align:middle;} #findACenterCont .centerListWrap #centerList li address {padding:15px 0 10px; font-size:14px; color:#333; lnie-height:19px; font-style:normal;} #findACenterCont .centerListWrap #centerList li dl {position:relative; padding:4px 0 4px 18px; line-height:15px;} #findACenterCont .centerListWrap #centerList li dl dt {position:absolute; width:15px; height:15px; left:0; top:4px;} #findACenterCont .centerListWrap #centerList li dl dt, #findACenterCont .centerListWrap #centerList li dl dd {display:inline-block; font-size:13px; color:#555; vertical-align:top; font-weight:400; line-height:15px;} #findACenterCont .centerListWrap #centerList li dl dt img {} #findACenterCont .centerListWrap #centerList .btnDetail {position:absolute; left:15px; bottom:0; display:block; width:40px; height:40px; border-radius:50%; border:1px solid #d7d7d8; background:#fff; text-align:left; text-indent:-3000em;} #findACenterCont .centerListWrap #centerList .btnDetail:before, #findACenterCont .centerListWrap #centerList .btnDetail:after {content:""; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; display:block; background:#555; font-size:0; line-height:0;} #findACenterCont .centerListWrap #centerList .btnDetail:before{width:12px; height:2px;} #findACenterCont .centerListWrap #centerList .btnDetail:after {width:2px; height:12px;} #findACenterCont .centerListWrap #centerList .btn {margin-top:15px;} #findACenterCont #detailCenter {position:absolute; left:-100%; top:0; height:100%; width:100%; padding:65px 15px 0; background:#fff; z-index:50; transition:left .3s ease-in-out;} #findACenterCont #detailCenter.on {left:0;} #findACenterCont #detailCenter .header {position:absolute; left:0; top:0; width:100%; padding:0 15px;} #findACenterCont #detailCenter .header div {position:relative; display:table; height:60px; width:100%;} #findACenterCont #detailCenter .header strong {display:table-cell; width:100%; padding:0 15px; font-size:23px; line-height:25px; color:#333333; font-weight:700; vertical-align:middle; text-align:center;} #findACenterCont #detailCenter .header strong .icon {display:inline-block; height:20px; padding:0 5px 0; border-radius:11px; color:#fff; font-weight:700; font-size:11px; line-height:20px; background:#fabe00; vertical-align:middle;} #findACenterCont #detailCenter .header a {position:absolute; left:0; top:50%; margin-top:-7px;} #findACenterCont #detailCenter .detailCont {height:100%; padding:0 10px 30px 0; margin-left:-15px; margin-right:-10px; overflow:auto; } #findACenterCont #detailCenter .detailCont .mapArea {height:400px; overflow:hidden;} #findACenterCont #detailCenter .detailCont .mapArea iframe {vertical-align:top;} #findACenterCont #detailCenter .detailCont .cont {position:relative; padding:35px 10px 0 25px;} #findACenterCont #detailCenter .detailCont .distance {position:absolute; top:-34px; right:30px; width:68px; height:68px; border:4px solid #e72410; border-radius:50%; background:#fff; text-align:center;} #findACenterCont #detailCenter .detailCont .distance div {display:table; width:100%; height:100%;} #findACenterCont #detailCenter .detailCont .distance div > span {display:table-cell; width:100%; padding:0 6px; vertical-align:middle; font-size:10px; color:#333; line-height:10px;} #findACenterCont #detailCenter .detailCont .distance b {display:block; color:#333; font-size:17px; line-height:17px; text-align:center; } #findACenterCont #detailCenter .detailCont .telArea {font-size:23px; line-height:34px; color:#333; font-weight:700;} #findACenterCont #detailCenter .detailCont .telArea a {color:#333;} #findACenterCont #detailCenter .detailCont .telArea a.icoTel {position:relative; display:inline-block; width:34px; height:34px; border:2px solid #434343; border-radius:50%; background:#fff; vertical-align:top;} #findACenterCont #detailCenter .detailCont address {display:block; padding-top:10px; font-size:14px; line-height:19px; color:#333; font-style:normal; } #findACenterCont #detailCenter .detailCont .detailInfo {padding-top:20px;} #findACenterCont #detailCenter .detailCont .detailInfo li {position:relative; padding:10px 0 10px 20px; color:#333;} #findACenterCont #detailCenter .detailCont .detailInfo li strong {display:block; padding-left:20px; padding-bottom:2px; margin-left:-20px; font-weight:500; background-repeat:no-repeat; background-position:0 2px; background-size:15px;} #findACenterCont #detailCenter .detailCont .detailInfo li.website strong {background-image:url(/mobile/images/icon/home5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.email strong {background-image:url(/mobile/images/icon/mail5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.programs strong {background-image:url(/mobile/images/icon/program5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.time strong {background-image:url(/mobile/images/icon/time5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.recognition strong {background-image:url(/mobile/images/icon/recognition5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.promotion strong {background-image:url(/mobile/images/icon/promotion5.png);} #findACenterCont #detailCenter .detailCont .detailInfo li.characteristics strong {background-image:url(/mobile/images/icon/characteristics5.png);} #findACenterCont #detailCenter .detailCont .btnArea {margin-top:25px;} #findACenterCont #listByArea {position:absolute; left:100%; top:0; width:100%; height:100%; padding:110px 15px 0; background:#fff; z-index:50; transition:left .3s ease-in-out;} #findACenterCont #listByArea.on {left:0} #findACenterCont #listByArea .tit {display:block; padding:0 0 0 0; color:#0062b1; font-size:25px; line-height:25px; font-weight:700;} #findACenterCont #listByArea .header {position:absolute; left:0; top:0; height:110px; width:100%; padding:0 15px;} #findACenterCont #listByArea .header .sort {padding-top:30px;} #findACenterCont #listByArea .header .sort:after {content:""; display:block; clear:both;} #findACenterCont #listByArea .header .sort li {float:left; width:50%; overflow:hidden;} #findACenterCont #listByArea .header .sort li input[type=radio] {position:absolute; left:-3000em; top:-3000em; opacity:0; } #findACenterCont #listByArea .header .sort li label {display:block; height:53px; border:1px solid #e2e2e2; color:#555; font-weight:700; text-align:center; line-height:51px; cursor:pointer; font-size:15px;} #findACenterCont #listByArea .header .sort li label:before {display:none;} #findACenterCont #listByArea .header .sort li input[type=radio]:checked ~ label {border:2px solid #0062b1; color:#0062b1; line-height:49px; text-transform:uppercase;} #findACenterCont #listByArea .chkArea {height:100%; padding-bottom:25px; margin-right:-10px; overflow:auto;} #findACenterCont #listByArea .chkArea .tit {padding-top:30px; padding-bottom:15px;} #findACenterCont #listByArea .filterSection {padding-top:10px; margin-right:10px;} #findACenterCont #listByArea .filterSection strong {display:block; padding-bottom:10px; border-bottom:1px solid #e1e1e1; font-size:21px; line-height:22px; font-weight:700; color:#333;} #findACenterCont #listByArea .filterSection ul {padding:10px 0; } #findACenterCont #listByArea .filterSection ul li {position:relative; display:inline-block; padding:7px 20px 7px 0;} #findACenterCont #listByArea .filterSection ul li input[type=checkbox] {vertical-align:top; margin-top:0;} #findACenterCont #listByArea .filterSection ul li label {margin-left:10px; vertical-align:top; font-size:14px; line-height:23px;} #findACenterCont #listByArea .btnArea {margin-top:25px; margin-right:10px;} #findACenterCont #listByArea .btnClose {position:absolute; right:15px; top:2px; display:block; width:21px; height:21px; text-indent:-3000em; transform:rotate(45deg);} #findACenterCont #listByArea .btnClose:before, #findACenterCont #listByArea .btnClose:after {position:absolute; left:0; top:10px; content:""; display:block; background:#3a312f; font-size:0; line-height:0;} #findACenterCont #listByArea .btnClose:before {left:0; top:10px;width:100%; height:1px;} #findACenterCont #listByArea .btnClose:after {left:10px; top:0; width:1px; height:100%;} /* CENTER SITE */ .centerSite {} .centerSite .contHeader {position:relative; display:table; z-index:-100; width:100%; /* height:350px; */text-align:center;} .centerSite .contHeader h2 {position:relative; display:table-cell; vertical-align:middle; padding-bottom:0; font-size:40px; color:#333;} .centerSite .centerInfo{position:relative;} .centerSite .contBody {max-width:1100px; margin:0 auto; padding:100px 0 120px;} .centerSite .contBody.section1{ padding:30px 0;} .centerSite .centerInfo .leftBox{position:absolute; top:0; left:0; background:url(/images/contents/center.png) center no-repeat; width:260px; height:258px;} .centerSite .centerInfo .leftBox .infoImg{position:absolute; top:0; left:0; width:250px; height:190px;} .centerSite .centerInfo .leftBox .infoImg img{width:100%; height:100%;} .centerSite .centerInfo .leftBox .infoName{position:relative; color:#fff; font-size:16px; font-weight:500; display:block; text-align:center; margin-top:205px;padding-bottom:10px; line-height:1} .centerSite .centerInfo .leftBox .infoName:before{content:' ';position:absolute; top:22px; left:50%; width:15px;height:1px; background:#fff;margin-left:-7px;} .centerSite .centerInfo .leftBox .infoManager{color:#fff; font-size:16px; display:block; text-align:center; line-height:1} .centerSite .centerInfo .rightBox{margin-left:290px;} .centerSite .centerInfo .rightBox .infoTitle{position:relative; padding-top:25px; line-height:1; color:#e72410; font-size:20px; font-weight:700;} .centerSite .centerInfo .rightBox .infoTitle:before{content:' '; position:absolute; top:0; width:265px; height:3px; background:#e72410;} .centerSite .centerInfo .rightBox .infoTitle span{line-height:1} .centerSite .centerInfo .rightBox .infoTitle .line2{color:#fabe00; display:block; margin-top:10px;} .centerSite .centerInfo .rightBox .welCon{margin-top:20px; min-height:120px; color:#7c7c7c;} .centerSite .section2{background:#f6f6f6; /* opacity: 0; transition: all 3s; transform: translateY(-50px) scale(1); */ padding:0 15px;} .centerSite .section2.slide { opacity: 1; transform: translateY(0) scale(1);} .centerSite .section2 .contBody{padding:15px 0;margin:0 auto;} .centerSite .section2 .contBody .articleBox:first-child{ margin-top:0;} .centerSite .section2 .contBody .articleBox{padding:35px 30px; border:1px solid #ddd; background:#fff; margin-top:15px;} .centerSite .section2 .contBody .articleBox > .artiTile{position:relative; line-height:160%} .centerSite .section2 .contBody .articleBox > .artiTile:after{content:' ' ; display:table; clear:both; } .centerSite .section2 .contBody .articleBox > .artiTile > .title{font-size:20px; font-weight:500; color:#e72410; background:#fff;} .centerSite .section2 .contBody .articleBox > .artiTile > .title{position:relative; display:inline; background:#fff; border-bottom:1px solid #fff; padding-right:15px;} .centerSite .section2 .contBody .articleBox > .artiTile > .line{content:'.' ; position:absolute; left:0; bottom:13px; border-bottom:3px solid #e72410; text-align:right; width: calc(100%);} .centerSite .section2 .contBody .articleBox > .artiCon > p:first-chile{margin-top:0;} .centerSite .section2 .contBody .articleBox > .artiCon > p{margin-top:20px;} .centerSite .section2 .contBody .articleBox > .artiCon > .imgBox{text-align:center; margin-top:30px;;} .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl{margin:30px auto 0; width:300px; } .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl > li{width:300px; display:table; table-layout:fixed;} .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl > li > span{display:table-cell; color:#333;} .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl > li > span:first-child{width:42%;} .centerSite .section2 .contBody .articleBox > .artiCon > .denText{padding-top:55px; position:relative;} .centerSite .section2 .contBody .articleBox > .artiCon > .denText:before{content:''; position:absolute; top:30px; width:100%; border-top:1px solid #e1e1e1;} .centerSite .section2 .contBody .articleBox > .artiCon > .denText:after{content:''; position:absolute; top:15px; left:50%; margin-left:-15px; width:30px; height:30px; background:url(/images/icon/center_imp.png) no-repeat;} .centerSite .section2 .contBody .articleBox > .artiCon > .denText > p{color:#7c7c7c;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList{transition: all 0.2s ease;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList:after{content:''; display:table; clear:both; } .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li{float:left; width:33.3%; margin-top:30px; transition:all 0.2s ease;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li > .imgBox{position:relative; margin-right:27px; width:228px; height:139px; overflow:hidden;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li > .imgBox .onlyText{display:block; width:228px; height:139px; border:1px solid #eee;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li:nth-child(3n) > .imgBox{ margin-right:0;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li >.imgBox img{width:100%; height:100%;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li >.imgBox .btn_play{cursor:pointer; display:block; position:absolute; top:50%; left:50%;width:72px; height:72px; margin:-36px 0 0 -36px ; background: url(/images/btn/btn_play.png) no-repeat;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li >.imgBox .btn_more{cursor:pointer; display:block; position:absolute; bottom:10px; right:10px;width:70px; height:40px; background: url(/images/btn/btn_more.png) no-repeat;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li >.imgBox.text{background:#fff;border:1px solid #e1e1e1;} .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li >.imgBox.text > .textGroup{padding:15px; line-height:21px;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox{margin-top:30px; border-top:1px solid #e1e1e1; } .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox:after{content:''; display:table; clear:both; } .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul{ margin:0 auto;padding-top:28px} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul:after{content:''; display:table; clear:both; } .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li{width:100%; margin-bottom:10px; color:#555; text-align:left;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li:first-child{text-align:right;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li > .link{position:relative;padding-left:25px; display:block; text-align:left;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li > .link:before{content:'';position:absolute; left:0; top:-4px; width:16px; height:27px; background:url(/images/icon/center_site.png) no-repeat;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li > .tel{position:relative;padding-left:25px; padding-top:4px;display:inline-block;} .centerSite .section2 .contBody .articleBox > .artiCon > .copyBox > ul > li > .tel:before{content:'';position:absolute; left:0; top:4px; width:16px; height:19px; background:url(/images/icon/center_tel.png) no-repeat;} .centerSite .section3 .contBody{padding:70px 0;} .centerSite .section3 .contBody h3{font-weight:700; font-size:30px; color:#333; text-align:center; height:60px; line-height:1} .centerSite .layerWrap {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 100} .centerSite .layerWrap .layerBox {position:absolute;top:50%;left:50%;z-index: 10; width:900px; height:640px; margin:-320px 0 0 -450px} .centerSite .layerWrap .dimmed {position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: #000;opacity: .5;filter: alpha(opacity=50);z-index: -1;} /* .centerSite .dimmed {display: block;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: #000;opacity: .5;filter: alpha(opacity=50);z-index: 101;} */ .centerSite .layerWrap .layerStories{position:relative; width:900px; height:640px; background:#fff;} .centerSite .layerWrap .layerStories:before{content:''; position:absolute; top:10px; right:-10px; z-index:-1;width:900px; height:640px; border:1px solid #fff} .centerSite .layerWrap .layerStories .storiTitle{padding:80px 50px 0 50px; line-height:1; font-weight:700; font-size:20px; text-align:left;color:#333;}/*22.05.20 버튼 팝업 텍스트 여백,정렬 수정*/ .centerSite .layerWrap .layerStories .con{margin:40px 50px 50px;}/*22.05.20 버튼 팝업 텍스트 여백,정렬 수정*/ /* .centerSite .layerWrap .layerStories .con .conYube{width:764px; height:430px; background:#e1e1e1;} */ .centerSite .layerWrap .layerStories .btnClose{cursor:pointer; position:absolute; top:30px; right:30px; width:32px; height:32px; outline:0; background: url(/images/btn/btn_close.png) no-repeat; border:0; padding:0; margin:0} /* SITEMAP */ .sitemapWrap {} .sitemapWrap .contBody {} .sitemapWrap .section {padding:25px 0 5px;} .sitemapWrap .section h3 {position:relative; padding-top:10px; font-size:20px; line-height:20px; color:#333; font-weight:500;} .sitemapWrap .section h3:before {content:""; position:absolute; left:0; top:0; display:block; width:20px; height:3px; background:#6fba2c; font-size:0; line-height:0;} .sitemapWrap .section ul {padding:15px 0 0 15px} .sitemapWrap .section ul li {padding:5px 0;} .sitemapWrap .section ul li br {display:none;} .sitemapWrap .section ul li a {position:relative; display:inline-block; font-size:14px; line-height:22px; font-weight:400; transition:all 0.2s ease-in-out; text-transform:uppercase;} .sitemapWrap .section ul li a:after {content:""; position:absolute; left:0; bottom:-1px; display:block; width:0; height:2px; background:#e72410; font-size:0; line-height:0; transition:all 0.2s ease-in-out;} .sitemapWrap .section ul li a:hover {color:#e72410;} .sitemapWrap .section ul li a:hover:after {width:100%;} /* PRIVACY POLICY */ .privacyPolicyWrap {} .privacyPolicyWrap .contBody {padding-bottom:50px;} .privacyPolicyWrap .contBody table { width: 100% !important; max-width: 100%;} .privacyPolicyTxtArea .section {padding-top:25px;} .privacyPolicyTxtArea .section h3 {position:relative; font-size:16px; line-height:20px; color:#333; font-weight:500;} .privacyPolicyTxtArea p {padding-top:5px; letter-spacing:-1px;} .privacyPolicyTxtArea .firstTxt {padding-top:20px;} .privacyPolicyTxtArea ul, .privacyPolicyTxtArea ul li { list-style: disc; } .privacyPolicyTxtArea ul { padding-left: 1.2rem; } /* COOKIE POLICY */ .cookiePolicyWrap {} .cookiePolicyWrap .contBody {padding-bottom:50px;} .cookiePolicyTxtArea .section {padding-top:25px;} .cookiePolicyTxtArea .section h3 {position:relative; font-size:16px; line-height:20px; color:#333; font-weight:500;} .cookiePolicyTxtArea p {padding-top:5px; letter-spacing:-1px;} .cookiePolicyTxtArea .firstTxt {padding-top:20px;} .cookiePolicyTxtArea ul, .cookiePolicyTxtArea ul li { list-style: disc; } .cookiePolicyTxtArea ul { padding-left: 1.2rem; } /* GLOBAL NETWORK */ .globalNetworkWrap {} .globalNetworkWrap .contBody {} .globalNetworkWrap h3 {padding-bottom:20px; font-size:18px; line-height:30px; font-weight:700; color:#cccccc; text-align:center;} .globalNetworkWrap .mapArea {position:relative; margin:0 0 20px;} .globalNetworkWrap .mapArea a {position:absolute; left:0; top:0; display:inline-block; font-size:9px; line-height:14px; font-weight:400; white-space:nowrap; transition:all 0.2s ease-in-out;} .globalNetworkWrap .mapArea a:after {content:""; position:absolute; right:0; bottom:-1px; display:block; width:0; height:2px; background:#e72410; font-size:0; line-height:0; transition:all 0.2s ease-in-out;} .globalNetworkWrap .mapArea a.ar:after {right:auto; left:0;} .globalNetworkWrap .mapArea a:before {content:""; position:absolute; right:-6px; top:50%; margin-top:-2px; display:block; width:4px; height:4px; border-radius:50%; background:#6fba2c; font-size:0; line-height:0;} .globalNetworkWrap .mapArea a.ar:before {right:auto; left:-6px;} /* .globalNetworkWrap .mapArea a:hover {color:#e72410;} .globalNetworkWrap .mapArea a:hover:after {width:100%;} */ .globalNetworkWrap .mapArea a.btnMap0 {left:47%; top:27%;} .globalNetworkWrap .mapArea a.btnMap1 {left:30%; top:28%;} .globalNetworkWrap .mapArea a.btnMap2 {left:44%; top:36%;} .globalNetworkWrap .mapArea a.btnMap3 {left:24.5%;top: 41.7%;}/*220422 인도법인 연락처 변경 : 지도위치수정*/ .globalNetworkWrap .mapArea a.btnMap4 {left: 47%;top: 55%;} .globalNetworkWrap .mapArea a.btnMap5 {left: 39.5%;top: 45%;} .globalNetworkWrap .mapArea a.btnMap6 {left: 26.5%;top: 50%;} .globalNetworkWrap .mapArea a.btnMap7 {left:6%; top:14%;} .globalNetworkWrap .mapArea a.btnMap8 {left:73%; top:23%;} .globalNetworkWrap .mapArea a.btnMap9 {left:42.5%; top:46%;} .globalNetworkWrap .mapArea a.btnMap10 {left:51%; top:77%;} .globalNetworkWrap .mapArea a.btnMap11 {left: 2%;top: 26%;} .globalNetworkWrap .mapArea a.btnMap12 {left: 12%;top: 34%;} .globalNetworkWrap .mapArea a.btnMap13 {left: 26%;top: 36.5%;}/*220422 인도법인 연락처 변경 : 지도위치수정*/ .globalNetworkWrap .mapArea a.btnMap14 {left: 59%;top: 84%;} .globalNetworkWrap .mapArea a.btnMap15 {left:46.5%; top:42%;} .globalNetworkWrap .mapArea a.btnMap16 {left:28%; top:46.5%;}/*220422 인도법인 연락처 변경 : 지도위치수정*/ .globalNetworkWrap .mapArea a.btnMap17 {left:16%; top:39%;}/*220422 인도법인 연락처 변경 : 지도위치수정*/ .globalNetworkWrap .mapArea a.btnMap18 {left: 18%;top: 19%;} .globalNetworkWrap .mapArea a.btnMap19 {left: 6%;top: 14%;} .globalNetworkWrap .mapArea a.btnMap20 {left: 42.5%;top: 46.5%;}/*220422 인도법인 연락처 변경 : 지도위치수정*/ .globalNetworkWrap .mapArea a.btnMap21 {left: 46%;top: 32%;} .globalNetworkWrap .mapArea a.btnMap22 {left: 24.6%; top: 22.8%;} .globalNetworkWrap .mapArea a.btnMap23 {left: 70.6%; top: 16%;} .globalNetworkList {border-top:2px solid #434343; border-bottom:1px solid #434343;} .globalNetworkList .section {position:relative; padding:25px 0 25px 0; border-top:1px solid #e1e1e1;} .globalNetworkList .section:first-child {border-top:none;} .globalNetworkList .section .area {} .globalNetworkList .section .area:after {content:""; display:block; clear:both;} .globalNetworkList .section .area strong {display:block; font-size:21px; line-height:22px; color:#333; font-weight:700;} .globalNetworkList .section .area span {display:block; padding-top:0px; padding-left:0; line-height:22px; line-height:30px; color:#333;} .globalNetworkList .section ul {} .globalNetworkList .section ul li {position:relative; padding:6px 20px 6px 27px;} .globalNetworkList .section ul li i {position:absolute; left:0; top:7px;} .globalNetworkList .section ul li i img {width:20px; height:20px;} .globalNetworkList .section#network_korea {border-top:1px solid #434343;} .globalNetworkList .section .snsArea {position:absolute; left:80px; top:19px;} .globalNetworkList .section .snsArea li {padding:0;} .globalNetworkList .section .snsArea li.wechat ul {right:-57px;} .globalNetworkList .section .snsArea li.wechat ul:before {right:72px;} .globalNetworkList .subSection {border-top:none; margin-top:-25px;} .globalNetworkList .subSection .area {top:25px;} .globalNetworkList .subSection .area strong {display:none;} .globalNetworkWrap .tabArea {margin:0 0 10px;} .globalNetworkWrap .tabArea {border-bottom:1px solid #e1e1e1;} .globalNetworkWrap .tabArea ul {display:table; height:40px; width:100%;} .globalNetworkWrap .tabArea ul li {display:table-cell; width:50%; text-align:center; vertical-align:middle;} .globalNetworkWrap .tabArea ul li a {display:inline-block; color:#7c7c7c; font-size:14px; font-weight:700; line-height:13px;} .globalNetworkWrap .tabArea ul li.on {background:#f4f4f4;} .globalNetworkWrap .tabArea ul li.on a {color:#333333;} /* TeachingTools */ .popTeachingTools {} .popTeachingTools .toolList {text-align:center;} .popTeachingTools .toolList:after {content:""; display:block; clear:both;} .popTeachingTools .toolList li {display:inline-block; width:30%; padding-top:40px; text-align:center; vertical-align:top;} .popTeachingTools .toolList li p {padding-top:5px; font-weight:400; font-size:12px; color:#333; line-height:16px;} /* ABOUT DAEKYO */ .aboutDaekyoWrap { } .aboutDaekyoWrap .contBody {} .aboutDaekyoWrap .contBody p { padding-top:5px; } .aboutDaekyoWrap .section { padding-top:25px; } .aboutDaekyoWrap .section h3 { position:relative; font-size:20px; line-height:20px; color:#333; font-weight:700; } .aboutDaekyoWrap .section p { padding-top:20px; line-height:22px; word-break:break-word; } .aboutDaekyoWrap .boxContTypeA { position: relative; margin-top:35px; } .aboutDaekyoWrap .boxContTypeA:before { content: ""; position: absolute; left: 0; top: 70px; display: block; width: 100%; height: 165px; background: #f4f4f4; z-index:-1; } .aboutDaekyoWrap ul.emblem { padding-top:30px; } .aboutDaekyoWrap ul.emblem li { display:inline-block; width:32%; } .aboutDaekyoWrap .thum { position:absolute; left:0; top:70px; width:100%; height:165px; background:transparent; box-shadow:none; text-align:center; } .aboutDaekyoWrap .thum img { width:20%; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } .aboutDaekyoWrap .thum:after { content:none; } .aboutDaekyoWrap .textWarp { padding:200px 0 60px; display:inline-block; text-align:left; } /* country & language */ .conturyLangSelectWrap .contHeader { display:table; padding:0; width:100%; height:115px; text-align:left; background:#fff;} .conturyLangSelectWrap .contHeader h2 { display:table-cell; vertical-align:middle; padding:0 0 0 20px; font-size:35px; color: #333; line-height:30px; font-weight:700;} .conturyLangSelectWrap h3 {display:block; padding-top:30px; font-size:24px; line-height:28px; font-weight:700; color:#333; text-align:left; text-transform:uppercase;} .conturyLangSelectWrap .countryList {padding:30px 0;} .conturyLangSelectWrap .countryList:after {content:""; display:block; clear:both;} .conturyLangSelectWrap .countryList li {width:33.3%; height:125px; float:left; text-align:center;} .conturyLangSelectWrap .countryList li .thum {width:70px; height:70px; margin:auto; border: 1px solid #e5e5e5; border-radius:50%;} .conturyLangSelectWrap .countryList li strong {display:block; padding-top:8px; font-size:14px; font-weight:400; line-height:15px; color:#555;} /* pop materials */ #learningMaterialsSlide {position:relative; margin-top:40px; padding:0 100px;} #learningMaterialsSlide .section {float:left;} #learningMaterialsSlide .section p {padding-top:10px; font-size:18px; line-height:26px; text-align:center; font-weight:500;} /* pop Learning Contents Slide */ #popLearningContentsSlide {position:relative; width:215px; margin:0 auto; margin-top:25px;} #popLearningContentsSlide .section {float:left; width:215px;} #popLearningContentsSlide .section p {padding-top:10px; color:#333; font-weight:400; text-align:center;} #popLearningContentsSlide .slick-arrow {top:110px; margin-top:0;} /* EZCreator */ .editor ul li {list-style:disc !important; margin-left:40px !important;} .editor ol li {list-style:decimal !important; margin-left:40px !important;} .editor a {color:blue !important; text-decoration:underline !important;} @media screen and (max-width: 512px) { .contactUsWrap .completeMsg .btnArea { display: block; transition: none; } .contactUsWrap .completeMsg .btn { flex: none; width: 100%; margin-left: 0; margin-top: 10px; transition: none; } .contactUsWrap .completeMsg .btn:after { transition: none; } .centerSite .centerInfo .leftBox{ margin-left:30px; } .centerSite .centerInfo .rightBox{ margin:0; padding:288px 30px 0 30px; } .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl{ width:100%; } .centerSite .section2 .contBody .articleBox > .artiCon > .tableUl > li{ width:245px; margin:0 auto; } .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li{ width:100%; } .centerSite .section2 .contBody .articleBox > .artiCon > .galleryList > li > .imgBox{ margin:0 auto !important; } .centerSite .layerWrap .layerStories , .centerSite .layerWrap .layerBox, .centerSite .layerWrap .layerBox{ width:100%; height:100%; } .centerSite .layerWrap .layerBox{ top:35px; left:0; margin:0; } .centerSite .layerWrap .layerStories .con{ height:100%; overflow-y:scroll; } } /* 1224_ [해외] 미주 사이트 About Daekyo 페이지 수정 요청 : 추가시작 */ #contatiner .contHeader.imgTy { display:table; padding:0; padding-right:15px; width:100%; height:115px; text-align:left; background:#fff;} #contatiner .contHeader.imgTy h2 { display:table-cell; vertical-align:middle; padding:0 20px 0 20px; font-size:30px; color: #fff; line-height:30px; font-weight:700;} #contatiner .contHeader.imgTy.bg_opportunities h2 {background:url(/images/visual/footer_opportunities.jpg) center top no-repeat; background-size:100% auto;} .aboutDaekyoWrap .mediaContent {position:relative;} .aboutDaekyoWrap .mediaContent:after {content:""; position:absolute; left:0; bottom:-12px; display:block; width:45%; height:100%; background:#fabe00;} .aboutDaekyoWrap .mediaContent img, .aboutDaekyoWrap .mediaContent iframe {position:relative; z-index:10; border:0;} .aboutDaekyoWrap .topBtnsArea {margin:25px 15px 0;} .aboutDaekyoWrap .thum2 {margin-top:40px;} .aboutDaekyoWrap .thum2 img {width:100%;} .aboutDaekyoWrap .thum2.mtfir {margin-top:20px; height:190px;} @media (min-width: 446px) { .aboutDaekyoWrap .thum2.mtfir {margin-top:20px; height:48vw;} } .aboutDaekyoWrap .employees_box {margin-top:20px;} .aboutDaekyoWrap .employees_box h4 {font-weight:bold; font-size:17px; color:#555;} .aboutDaekyoWrap .employees_box > ul {font-size:14px; color:#555;} .aboutDaekyoWrap .employees_box > ul > li {position:relative; padding-left:10px; margin-top:10px;} .aboutDaekyoWrap .employees_box > ul > li:before {content:''; display:block; position:absolute; left:0; top:8px; width:4px; height:4px; background-color:#434343; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;} .aboutDaekyoWrap .btn_zone {margin-top:35px; text-align: center;} .aboutDaekyoWrap .btn_zone .btn_zone_in {position:relative; display:inline-block; border-width: 1px; border-style: solid; padding:20px 10px;} .aboutDaekyoWrap .btn_zone .btn_zone_in:after {content:""; position:absolute; bottom:-4px; right:-4px; display:block; width:96%; height:90%; border-style:solid; border-color:inherit; border-width:0 3px 3px 0;} .aboutDaekyoWrap .btn_zone .btn_zone_in strong {display:block; font-size:17px; line-height:normal;} .aboutDaekyoWrap .btn_zone .btn_zone_in > a {position:relative; z-index:1; display:inline-block; padding:10px 0; margin-top:15px; border: 1px solid #434343; text-align:center; font-size:12px; font-weight: 500; color:#333; background-color:#fff; box-shadow:3px 3px 5px rgba(0,0,0,0.14); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.14); -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.14);} .aboutDaekyoWrap .btn_zone .input_zip {position:relative; z-index:1; padding-right: 50px; display:inline-block; width:242px; background:#fff; margin-top:30px; border: 1px solid #434343; box-shadow:3px 3px 5px rgba(0,0,0,0.14); -webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.14); -moz-box-shadow:3px 3px 5px rgba(0,0,0,0.14);} .aboutDaekyoWrap .btn_zone .input_zip > input {border:0; width:100%; height:32px; padding:0 10px; line-height:32px; outline:none;} .aboutDaekyoWrap .btn_zone .input_zip > input:focus {border:0 !important;} .aboutDaekyoWrap .btn_zone .input_zip > a {overflow:hidden; display:block; width:32px; height:32px; position:absolute; right:0; top:0; border-left: 1px solid #434343; text-indent:-9999999em; font-size:0; line-height:0; background:#f4f4f4 url(/images/icon/search2.png) no-repeat 50%; background-size:15px;} /* 변경해야할것들 */ .aboutDaekyoWrap .section.mtfir {margin-top:15px !important;} .aboutDaekyoWrap .section.mtsec {margin-top:85px !important;} .aboutDaekyoWrap .section {margin:70px 0; padding:0;} .aboutDaekyoWrap .section h3 {margin-bottom:18px; line-height:24px;} .aboutDaekyoWrap .section p {padding:0; margin-top:20px;} .aboutDaekyoWrap .textWarp {padding:0; margin:0;} .programsWrap.at-home .contHeader h2 { background: url('/mobile/images/visual/program-pm-athome.jpg') top center no-repeat; background-size: cover; } .programsWrap.at-home #lnbTypeA li { white-space: nowrap; } .programsWrap.at-home .playMathEnables strong { font-size: 40px; } .process-list { margin-top: 20px; } .process-list li { position: relative; display: block; padding: 15px 10px; background-color: #fff; border: 2px solid #fabe00; } .process-list li + li { margin-top: 40px; } .process-list li + li:before { content: ''; position: absolute; top: -28px; left: 50%; display: block; width: 18px; height: 10px; background-image: url('/mobile/images/blt/arrow_b_bottom02.png'); background-repeat: no-repeat; background-position: center; background-size: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .process-list li h4 { font-weight: 600; font-size: 16px; line-height: 1.2; } .process-list li p { margin-top: 10px; font-weight: 400; font-size: 13px; line-height: 1.2; } .process-list li p a { text-decoration: underline;; } .process-list li:hover { background-color: #fabe00; } .process-list li:hover h4, .process-list li:hover p, .process-list li:hover p a { color: #fff; } .programsWrap .learningTypeA.diagnostic-test h3 { margin-bottom: 10px; font-size: 18px; } .diagnostic-test { margin-bottom: 110px; } .diagnostic-test .diagnostic-box { position: relative; text-align: center; } .diagnostic-test .diagnostic-box img { display: block; width: 100%; } .diagnostic-test .diagnostic-box p { position: absolute; top: 50%; left: 50%; width: 100%; font-weight: 400; font-size: 13px; line-height: 1.2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .diagnostic-test .diagnostic-box a { position: absolute; left: 50%; bottom: -70px; width: 140px; font-family: "EyeLevel","Arial",sans-serif; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .programsWrap.at-home .learningTypeA.register-online h3 { margin-bottom: 20px; font-size: 28px; } .programsWrap.at-home .learningTypeA.register-online input[type=radio]:checked + label::before { background: url('/mobile/images/programs/playMathAtHome/btn_radio_on.png'); background-size: 100%; } .programsWrap.at-home .learningTypeA.register-online .chkWrap.block { display: block; } .programsWrap.at-home .learningTypeA.register-online .chkWrap.block + .block { margin-top: 10px; } .programsWrap.at-home .learningTypeA.register-online .email .first { width: calc(100% - 20px); } .programsWrap.at-home .learningTypeA.register-online .email .first + span { width: 20px; margin-right: 0; margin-left: 0; text-align: right; } .programsWrap.at-home .learningTypeA.register-online .email .second { width: 100%; margin-top: 6px; } .programsWrap.at-home .learningTypeA.register-online .formInfoTxt { margin-bottom: -39px; } @media (max-width: 380px) { .programsWrap.at-home .learningTypeA.register-online .formInfoTxt { margin-bottom: auto; } } .programsWrap .links li {float: left; width: 50%} .programsWrap .links li:nth-child(1):nth-last-child(1), .programsWrap .links li:nth-child(1):nth-last-child(1) { width: 100%; } .programsWrap .links li:nth-child(1):nth-last-child(3), .programsWrap .links li:nth-child(3):nth-last-child(1) { width: 33.3%; } .programsWrap .links li:nth-child(2):nth-last-child(2) { width: 33.4% } .programsWrap .links li:nth-child(1):nth-last-child(4), .programsWrap .links li:nth-child(2):nth-last-child(3), .programsWrap .links li:nth-child(3):nth-last-child(2), .programsWrap .links li:nth-child(4):nth-last-child(1) { width: 25%; } /* math */ .programsWrap .tabArea > ul > li a.gnb-link.is-active:before { content:""; position:absolute; left:50%; bottom:0; display:block; width:80%; height:5px; margin-left:-40%; background:#e72410; font-size:0; line-height:0; } .programsWrap .tabArea > ul > li:before { content: ''; position: absolute; left: -1.5px; top: 50%; display: block; width: 3px; height: 3px; margin-top: 1.5px; background-color: #ccc; border-radius: 50%; } .programsWrap .tabArea > ul > li:first-child:before { display: none; } .programsWrap .tabArea > ul > li#btnProgramsSelect:before { display: none; } .programsWrap .contents .section.online { padding-top: 5px; } .programsWrap .contents .section .onlineBox .topBox { padding: 0 8px; } .programsWrap .contents .section .onlineBox .btn-free { display: block; width: 100%; padding: 7px 13px; text-align: center; color: #fff; font-weight: 700; font-size: 14px; background-color: #ea1b0e; border: 0; border-radius: 10em; animation: opacity 2s linear 0s infinite; } .programsWrap .contents .section .onlineBox .gradeBox { position: relative; margin-top: 15px; } .programsWrap .contents .section .onlineBox .gradeBox img { width: 100%; } .programsWrap .contents .section .onlineBox .gradeBox > ul { overflow: hidden; position: absolute; left: 0; bottom: 2%; width: 100%; padding: 0 5px; } .programsWrap .contents .section .onlineBox .gradeBox > ul > li { float: left; width: 16.6666666%; padding: 0 1px; } .programsWrap .contents .section .onlineBox .gradeBox > ul > li a { display: block; text-align: center; padding: 0; border: 1px solid #ea1b0e; font-size: 10px; line-height: 24px; font-weight: 500; color: #ea1b0e; background-color: #fff; border-radius: 12px; } .programsWrap .contents .section .onlineBox .gradeBox > ul > li a:hover { color: #fff; background-color: #ea1b0e; } .programsWrap .contents .section .onlineBox .gradeBox > ul > li a.on { color: #fff; background-color: #ea1b0e; } .programsWrap .enrolmentProcess > h3 { position: relative; padding-top: 15px; font-weight: 700; font-size: 26px; color: #333; } .programsWrap .enrolmentProcess > h3:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 17px; height: 3px; background-color: #e72410; } .programsWrap .enrolmentProcess > h3 .txt-red { color: #e72410; } .programsWrap .enrolmentProcess .txt-bold { margin-top: 25px; color: #333; line-height: 22px; font-size: 20px; font-weight: 700; } .programsWrap .enrolmentProcess .btn-lastBox { text-align: center; margin-top: 25px; } .programsWrap .enrolmentProcess .btn-lastBox .btn { color: #333; font-weight: 700; font-size: 16px; } .programsWrap .enrolmentProcess .table_icon > li { position: relative; display: table; margin-top: 48px; } .programsWrap .enrolmentProcess .table_icon > li:first-child { margin-top: 25px; } .programsWrap .enrolmentProcess .table_icon > li:before { content: ''; display: block; position: absolute; left: 36px; top: 74px; width: 4px; height: 28px; background: url('/mobile/images/programs/icon_process_aw_2023.png') no-repeat left top; background-size: 100%; } .programsWrap .enrolmentProcess .table_icon > li:last-child:before { display: none; } .programsWrap .enrolmentProcess .table_icon > li > span { position: relative; display: table-cell; height: 64px; padding-top: 5px; padding-left: 90px; font-size: 13px; color: #333; line-height: 16px; vertical-align: middle; } .programsWrap .enrolmentProcess .table_icon > li > span>span { min-width: 110px; display: inline-block; padding: 3px 0; margin-bottom: 6px; text-align: center; font-weight: 400; border-radius: 50px; background: red; color: #fff; } .programsWrap .enrolmentProcess .table_icon > li > span[class^="icon2"]>span { min-width: 130px; } .programsWrap .enrolmentProcess .table_icon > li > span:before { content: ''; display: block; position: absolute; left: 8px; top: 0; width: 64px; height: 64px; background-repeat: no-repeat; background-position: left top; background-size: 100%; } .programsWrap .enrolmentProcess .table_icon > li .icon1_1:before { background-image: url('/mobile/images/programs/icon_process_step1_1_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon1_2:before { background-image: url('/mobile/images/programs/icon_process_step1_2_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon1_3:before { background-image: url('/mobile/images/programs/icon_process_step1_3_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon2_1:before { background-image: url('/mobile/images/programs/icon_process_step2_1_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon2_2:before { background-image: url('/mobile/images/programs/icon_process_step2_2_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon2_3:before { background-image: url('/mobile/images/programs/icon_process_step2_3_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon2_4:before { background-image: url('/mobile/images/programs/icon_process_step2_4_2023.png'); } .programsWrap .enrolmentProcess .table_icon > li .icon2_5:before { background-image: url('/mobile/images/programs/icon_process_step2_5.png'); } .programsWrap .contents .section.bgImg1 { background-image: url('/mobile/images/programs/bg_book.png'); background-size: 345px auto; background-position: right 90px; background-repeat: no-repeat; margin-right: -20px; } @-webkit-keyframes opacity { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } } @keyframes opacity { 0% { opacity: .25; } 50% { opacity: 1; } 100% { opacity: .25; } } .formSection .submit-box { margin-top: 50px; text-align: center; } .formSection .submit-box .btn-submit { width: 164px; padding-top: 18px; padding-bottom: 18px; text-transform: uppercase; color: #fff; font: 700 18px "EyeLevel" !important; background-color: #252c35; border: 0; cursor: pointer; box-shadow:0 0 10px rgba(24, 74, 173, 0.25); -webkit-box-shadow:0 0 10px rgba(24, 74, 173, 0.25); -moz-box-shadow:0 0 10px rgba(24, 74, 173, 0.25); outline: none; } .form { font-family: 'Eyelevel'; } .form .txt-red { display: inline-block; color: #e72410; font-weight: 500; vertical-align: middle; } .form .form-header { margin-top: 25px; } .form .form-header strong { font-size: 20px; line-height: 20px; font-weight: 500; color: #333; } .form .form-content { padding-bottom: 25px; border-bottom: 1px solid #c6c6c6; } .form .row-box { margin-top: 25px; } .form .row-box .title-box strong { font-size: 20px; color: #333; font-weight: 500; } .form .row-box .input-box { margin-top: 15px; } .form .row-box .input-box .input + .input { margin-top: 5px; } .form .row-box .input-box .input.msgBox { margin-top: 15px; } .form .row-box .input-box .input.msgBox .txt { display: block; width: 100%; margin-bottom: 5px; text-align: center; font-size: 14px; color: #555; font-weight: 300; } .form .row-box .btn-white { display: block; width: 100%; height: 40px; padding: 12px 15px; text-align: center; color: #333; font-weight: 500; font-size: 14px; line-height: 1; background-color: #fff; border: 1px solid #000; outline: none; box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.14); } .form .privacy-box { margin-top: 25px; } .form .privacy-box p { font-size: 15px; color: #555; line-height: 18px; font-weight: 300; } .form .privacy-box .txt-strong { color: #0d0d0d; font-weight: 700; text-decoration: underline; text-transform: uppercase; } /* 0208_[해외] 영어 온라인 Level Quiz 페이지 개발 일정에 관한 건 : 추가시작 */ .programsEnglish .section .onlineBox .btn-free { background-color: #0062b1; } .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox { position: absolute; left: 0; bottom: 17.8%; width: 100%; padding: 0 35.2%; } .programsEnglish .boxContTypeA ul li.icon3 {background:#fff url(/mobile/images/programs/english/benefits3.png) no-repeat 10px 50%; background-size:45px;} .programsEnglish .boxContTypeA ul li.icon5 {background:#fff url(/mobile/images/programs/english/benefits5.png) no-repeat 10px 50%; background-size:45px;} .programsEnglish .boxContTypeA ul li.icon6 {background:#fff url(/mobile/images/programs/english/benefits6.png) no-repeat 10px 50%; background-size:45px;} .form .form-content { position: relative; } .form .form-content .formInfoTxt { position: absolute; right: 0; top: 0; display: inline-block; padding-bottom: 0; font-size: 14px; } .programsEnglish .slideDownContents .footer > p { text-indent: -6px; padding-left: 6px; } /* 0208_[해외] 영어 온라인 Level Quiz 페이지 개발 일정에 관한 건 : 추가끝 */ .form .row-box .input-box.email .input + .input { position: relative; padding-left: 20px; } .form .row-box .input-box.email .input + .input:before { content: '@'; display: inline-block; position: absolute; left: 0; top: 0; width: 20px; line-height: 40px; text-align: center; } /* 0407_아이레벨 홍보관 - 교사모집 : 추가 시작*/ /* careers-wrap */ .careers-wrap.aboutDaekyoWrap .btn_zone { margin-top: 0px; } .careers-wrap.aboutDaekyoWrap .btn_zone .btn_zone_in_txt { margin-top: 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 1; color: #7c7c7c; } .careers-wrap.aboutDaekyoWrap .btn_zone .btnTypeH { border-color: #fbc700; color: #fbc700 !important; } .careers-wrap.aboutDaekyoWrap .btn_zone .input_zip { margin-top: 15px; } .careers-wrap.aboutDaekyoWrap .btn_zone .btn_zone_in { padding: 18px 10px; } .careers-wrap.aboutDaekyoWrap .btn_zone .input_zip > input { font-weight: 500; } .careers-wrap.aboutDaekyoWrap .btn_zone .input_zip > a { background: #f4f4f4 url(/mobile/images/icon/search_btn.png) no-repeat center / 40%; } .careers-wrap.aboutDaekyoWrap .btn_zone .find-btn { width: 242px; height: 34px; display: flex; align-items: center; justify-content: center; padding-right: 32px; margin: 15px auto 0; } .careers-wrap.aboutDaekyoWrap .btn_zone .find-btn::after{ content: ''; width: 31px; height: 32px; display: inline-block; position: absolute; right:0; border-left: 1px solid #000; background: #f4f4f4 url(/mobile/images/icon/search_btn.png) no-repeat center / 40%; } .careers-wrap.aboutDaekyoWrap .section p { margin-top: 18px; } .careers-wrap.aboutDaekyoWrap .section:last-of-type { margin-bottom: 80px; } .careers-wrap.aboutDaekyoWrap .section h3 { font-size: 21px; } .careers-wrap.aboutDaekyoWrap .thum2.mtfir.careers_img { margin-top: 40px; } /* applicant-wrap */ .applicant-wrap select { padding: 0 30px 0 10px; color: #555555; } .applicant-wrap .contHeader h2 { padding: 25px 0; } .applicant-wrap .HowToReachUs { padding-top: 0; } .applicant-wrap .centerName { font-size: 14px; font-weight: 400; color: #555555; } .applicant-wrap .formTypeA td { padding-bottom: 6px; } .applicant-wrap .formTypeA .email .divi { width: 100%; } .applicant-wrap .formTypeA .email .divi:first-of-type { width: 92%; margin-bottom: 4px; } .applicant-wrap .formTypeA .email span { font-size: 17px; font-weight: 600; color: #333333; } .applicant-wrap .formTypeA textarea::placeholder { font-size: 14px; color: #a1a1a1; } .applicant-wrap .btnSizeA { height: 50px; line-height: 50px; } .applicant-wrap .btnArea { margin: 60px 0; } .skills-wrap { width: 100%; display: flex; flex-wrap: wrap; align-items: center; padding: 8px 10px 0; position: relative; border: 1px solid #bcbcbc; } .skills-wrap { position: relative; overflow: hidden; } .skills-arr { display: flex; white-space: nowrap; align-items: center; flex-flow: wrap; } input[type=text].skills-input { width: auto; height: 30px; margin-bottom: 4px; border: 0; padding: 0; } input[type=text].skills-input:focus { outline:none; border: 0 !important; } input[type=text].skills-input::placeholder { /* padding-left: 180px; */ } .skills-tag { display: flex; align-items: center; padding: 5px 5px 5px 10px; /*수정*/ margin-right: 11px; margin-bottom: 4px; line-height: 1.2; white-space:pre-wrap; /*수정*/ border-radius: 50px; color: #333333; background: #e1e1e1; } .skills-tag.active { color: #fff; background: #0062b1; } .skills-tag .skills-btn { width: 30px; /*수정*/ height: 20px; margin-left: 10px; border: 0; background: url('/mobile/images/icon/close_btn_2.png') no-repeat center; cursor: pointer; } .skills-tag:last-of-type { margin-right: 0; } .skills-copy-btn { width: 18px; height: 20px; position: absolute; bottom: 10px; right: 58px; background: url('/mobile/images/icon/copy_btn.png') no-repeat center; border: 0; cursor: pointer; } .skills-delete-btn { width: 18px; height: 18px; position: absolute; bottom: 12px; right: 20px; background: url('/mobile/images/icon/delete_btn.png') no-repeat center; border: 0; cursor: pointer; } .skills-noti { margin-top: 10px; display: flex; justify-content: space-between; } .skills-noti .noti-txt{ padding-left: 10px; position: relative; font-size: 13px; line-height: 1.2; color: #aaa; } .skills-noti .noti-txt span { position: absolute; left: 0; top: 3px; } .skills-noti .txt-count p{ margin-left: 25px; font-size: 12px; letter-spacing: 0.2px; white-space: nowrap; color: #333333; } .skills-noti .txt-count p span { font-weight: 600; } /* submit-content page */ .contactUsWrap.submit-wrap .contHeader h2{ padding: 25px 0; } .submit-content{ margin: 39px 0 40px; text-align: left; } .submit-content h3 { margin-bottom: 16px; font-size: 28px; font-weight: 600; line-height: 1; color: #333333; } .submit-content p { margin-top: 36px; font-size: 18px; line-height: 1.4; color: #000; } .submit-wrap .btnArea { margin-bottom: 70px; } .submit-wrap .btnArea .btnTypeA { border: 1px solid #333333; color: #333333 !important; } /* newfind-wrap */ .newfind-wrap .searchFormA select, .newfind-wrap .searchFormA select option { text-align: left; } .newfind-wrap #findACenterCont { margin-top: 40px; } .newfind-wrap .filter-wrap { display: flex; margin-bottom: 39px; } .newfind-wrap .filter-wrap p { margin-right: 16px; font-size: 15px; font-weight: 400; } .newfind-wrap .filter-wrap button { display: inline-block; padding: 9px 21px; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; border-radius: 50px; border: 1px solid #e2e2e2; color: #555555; background: transparent; } .newfind-wrap .filter-wrap button { margin-right: 10px; } .newfind-wrap .filter-wrap button:last-of-type { margin-right: 20px; } .newfind-wrap .filter-wrap button.active { font-weight: 600; letter-spacing: -0.4px; color: #0062b1; border: 2px solid #0062b1; } .newfind-wrap #findACenterCont .centerListWrap .header > div { padding: 0 10px 12px; } .newfind-wrap #findACenterCont .centerListWrap .header p { font-weight: 400; color: #555; } .newfind-wrap #findACenterCont .centerListWrap .header p span{ font-weight: 500; } .newfind-wrap #findACenterCont .centerListWrap #centerList { height: 86%; padding: 25px 0 38px; } .newfind-wrap #findACenterCont #listByArea { height: 86%; top: 72px; } .newfind-wrap #findACenterCont #listByArea .header .sort li label { text-transform:uppercase; } /* 0609_아이레벨_수정사항 : 주석처리 시작 */ /* .newfind-wrap #findACenterCont.center-list .centerListWrap #centerList li .tit { display: flex; } */ /* 0609_아이레벨_수정사항 : 주석처리 끝 */ .newfind-wrap #findACenterCont.center-list .centerListWrap #centerList li { margin-top: 0; margin-bottom: 40px; } /* 0609_아이레벨_수정사항 시작 */ .newfind-wrap .centerListWrap .hiring span{ max-height: 20px; margin-left: 6px; margin-right: 6px; /*추가*/ vertical-align: middle; /*추가*/ padding: 2px 8px; /*수정*/ font-size: 11px; font-weight: 600; line-height: 1; border-radius: 50px; white-space: nowrap; color: #fff; background: #e72410; } /* 0609_아이레벨_수정사항 끝 */ .newfind-wrap #findACenterCont #detailCenter { top: 70px; } #findACenterCont #detailCenter .detailCont { height: 86%; padding: 0 10px 60px 0; } #findACenterCont #detailCenter .detailCont .detailInfo li.programs strong { background-position: 0 4px; } .newfind-wrap #findACenterCont #detailCenter .detailCont .telArea a { font-weight: 500; } .newfind-wrap #findACenterCont #detailCenter .detailCont address { padding-top: 6px; } .newfind-wrap #findACenterCont #detailCenter .detailCont .detailInfo li.hiring-icon strong { background-image: url('/mobile/images/icon/hiring_icon.png'); } .newfind-wrap #findACenterCont #detailCenter .detailCont .detailInfo li.opendays strong { background-image: url('/mobile/images/icon/opendays_icon.png'); } .newfind-wrap #findACenterCont #detailCenter .detailCont .btnArea { margin-top: 30px; } /* 0407_아이레벨 홍보관 - 교사모집 : 추가 끝*/ .quiz-test { margin-top: 30px; } .quiz-test header h3 { display: flex; align-items: center; font-size: 22px; font-weight: 600; margin-bottom: 30px; line-height: 1.3; text-transform: uppercase; color: #2a2a2a; } .quiz-test header h3 img { width: 40px; } .quiz-test header p { margin: 30px 0 15px; display: flex; align-items: center; font-size: 11px; } .quiz-test .quiz-test-box .box { width: 100%; height: 344px; background-repeat: no-repeat; background-size: cover; background-position: top; } .quiz-test .quiz-test-box .box.arithmetic-box { margin-bottom: 30px; background-image: url('/mobile/images/programs/quiz_test_arithmetic_2023.png'); } .quiz-test .quiz-test-box .box.critical-box { background-image: url('/mobile/images/programs/quiz_test_critical_2023.png'); } .quiz-test .quiz-test-box .box .dropdown-btn { width: 80%; height: 40px; margin-top: 200px; padding: 0 20px; position: relative; left: 50%; transform: translate(-50%, 0px); text-align: left; font-family: "EyeLevel","Arial",sans-serif; font-size: 16px; font-weight: 500; border-radius: 50px; color: #ffbb01; background: #fff; border: 0; cursor: pointer; } .quiz-test .quiz-test-box .box .dropdown-btn::before { content: ''; display: inline-block; position: absolute; right: 23px; top: 46%; border-bottom: 6px solid #ffbb01; border-left: 4px solid transparent; border-right: 4px solid transparent; transform: rotate(180deg); transition: 0.2s all ease-in-out; } .quiz-test .quiz-test-box .box .dropdown-grade { width: 80%; display: none; position: relative; z-index: 9; margin: 6px auto 0; text-align: left; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 1px 1px 9px 1px rgb(0, 0, 0, 0.13); } .quiz-test .quiz-test-box .box .dropdown-grade li { padding: 0 20px; } .quiz-test .quiz-test-box .box .dropdown-grade li:hover { background: #ececec; } .quiz-test .quiz-test-box .box .dropdown-grade li a { width: 100%; display: inline-block; padding: 10px 0; font-size: 16px; font-weight: 400; color: #ffbb01; } .quiz-test .quiz-test-box .critical-box .dropdown-btn, .quiz-test .quiz-test-box .critical-box .dropdown-grade li a { color: #6fba2c; } .quiz-test .quiz-test-box .critical-box .dropdown-btn::before { border-bottom: 6px solid #6fba2c; } /* active */ .quiz-test .quiz-test-box .dropdown-wrap.active .dropdown-grade { display: block; } .quiz-test .quiz-test-box .dropdown-wrap.active .dropdown-btn::before { transform: rotate(0deg); } @media screen and (max-width: 320px) { .quiz-test .quiz-test-box .box { height:285px; } .quiz-test .quiz-test-box .box .dropdown-btn { margin-top: 150px; } /*23.01.11*/ .quiz-test header h3 img{ margin-right: 10px; } } /* 2023 remuwal */ /* Zoom Layer */ .mfp-bg { z-index: 99999; } .mfp-wrap { z-index: 100000; } .mfp-zoom-out-cur { cursor: default; } .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { position: absolute; overflow: hidden; right: 0; top: 40px; display: block; width: 36px; height: 36px; font-size: 0; line-height: 0; cursor: pointer; background: #3a312f; } .mfp-image-holder .mfp-close:before, .mfp-image-holder .mfp-close:after, .mfp-iframe-holder .mfp-close:before, .mfp-iframe-holder .mfp-close:after { position: absolute; left: 0; top: 10px; content: ""; display: block; background: #fff; font-size: 0; line-height: 0; transform: rotate(45deg); } .mfp-image-holder .mfp-close:before, .mfp-iframe-holder .mfp-close:before { left: 0; top: 17px; width: 100%; height: 2px; } .mfp-image-holder .mfp-close:after, .mfp-iframe-holder .mfp-close:after { left: 17px; top: 0; width: 2px; height: 100%; } #contatiner .box-help-btn { all: unset; display: inline-block; vertical-align: middle; width: 15px; height: 15px; margin-left: 3px; background: url(/mobile/images/icon/help.svg) no-repeat center; background-size: cover; cursor: pointer; } .programsWrap > .tabArea { display: none; } .programsWrap .contents { padding-bottom: 0; } .programsWrap .contents:before { display: none; } .programsWrap .tabArea { margin: 0; margin-bottom: 20px; } .programsWrap div[class^="programsTab"] .list-card.img .item { padding: 0 !important; } /* ENGLISH */ .programsWrap.programsEnglish .contHeader { background: url(/mobile/images/visual/program-english.png) no-repeat center; background-size: cover; } #contatiner .programsEnglish .section .subTitle:after { background-color: #06F; } /* SUB CONTENT 1 */ .programsEnglish #SUB_CONTENT1.section .subTitle small { margin-top: 0px; margin-bottom: 10px; } .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox { top: 50%; left: 0; right: 0; bottom: auto; padding: 0; transform: translateY(-50%); text-align: center; } .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox .btn_start1 p { margin-bottom: 20px; color: #FFF; text-align: center; font-size: 24px; font-style: normal; font-weight: 700; line-height: 1.1em; /* 44px */ text-shadow: 0px 0px 3px #500094; } .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox a { min-width: 120px; color: #500094; font-size: 14px; font-style: normal; font-weight: 500; line-height: 39px; /* 30.8px */ border: 0; background: #fff !important; } .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox a:visited, .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox a:active, .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox a:focus, .programsEnglish .section .onlineBox .gradeBox .btn-gradeBox a:hover { color: #500094; background: #fff !important; } /* SUB CONTENT 3 */ .programsEnglish #SUB_CONTENT3.section .list-galley .item { align-items: center; } .programsEnglish #SUB_CONTENT3.section .list-galley .item strong { padding-left: 35px; } .programsEnglish #SUB_CONTENT3.section .list-galley .item strong:after { top: -2px; width: 25px; height: 25px; background-color: transparent; background-size: cover; } .programsEnglish #SUB_CONTENT3.section .list-galley .item.s1 div strong:after { background-image: url(/mobile/images/programs/english/icon_how_is_eye_level_01.svg); } .programsEnglish #SUB_CONTENT3.section .list-galley .item.s2 div strong:after { background-image: url(/mobile/images/programs/english/icon_how_is_eye_level_02.svg); } .programsEnglish #SUB_CONTENT3.section .list-galley .item.s3 div strong:after { background-image: url(/mobile/images/programs/english/icon_how_is_eye_level_03.svg); } #contatiner .programsEnglish .slick-dots li button, #contatiner .programsEnglish .owl-carousel button.owl-dot span { border-color: #06F; } #contatiner .programsEnglish .slick-dots li.slick-active button, #contatiner .programsEnglish .owl-carousel button.owl-dot.active span { background-color:#06F; } #contatiner .programsEnglish .contents #SUB_CONTENT3.section .list-galley .item > div { min-height: 200px; padding-left: 16px; padding-right: 16px; } /* SUB CONTENT 4 */ .programsEnglish .list-graph-area { position: relative; padding-left: 135px; } .programsEnglish .list-graph-title { position: absolute; left: 0; top: 0; } .programsEnglish .list-graph-title li strong { color: #808080; font-size: 14px; font-style: normal; font-weight: 500; line-height: 37px; /* 26.4px */ } .programsEnglish .list-graph { width: 100%; } .programsEnglish .list-graph ul { width: 100%; } .programsEnglish .list-graph li .graph { display: grid; width: 576px; grid-template-columns: repeat(12, 1fr); } .programsEnglish .list-graph li .graph .graphBox { display: flex; align-items: center; justify-content: center; height: 37px; border-bottom: 1px solid #E5E5E5; } .programsEnglish .list-graph li .graph .graphBox span { color: #FFF; font-size: 9px; font-style: normal; font-weight: 300; line-height: 1.5em; /* 27px */ } .programsEnglish .list-graph li .graph .graphBox em { display: block; color: #FFF; font-size: 9px; font-style: normal; font-weight: 600; line-height: 1.5em; text-align: center; } .programsEnglish .list-graph li .graph .graphBox.c1 { background: #80B2FF; } .programsEnglish .list-graph li .graph .graphBox.c2 { background: #4D94FF; } .programsEnglish .list-graph li .graph .graphBox.c3 { background: #1A75FF; } .programsEnglish #SUB_CONTENT4 .footer { overflow: hidden; margin-top: 25px; } .programsEnglish #SUB_CONTENT4 .footer a { margin-top: 10px; width: 100%; text-transform: none } /* SUB CONTENT 7 */ #contatiner .programsEnglish #SUB_CONTENT7 .list-card .item { display: flex; align-items: center; justify-content: center; min-height: auto; padding: 25px 10px; border: 1.5px solid rgba(0, 102, 255, 0.20); } #contatiner .programsEnglish #SUB_CONTENT7 .list-card .item p { position: relative; margin-top: 0; color: rgba(0, 102, 255, 0.80); font-weight: 500; } #contatiner .programsEnglish #SUB_CONTENT7 .list-card.owl-carousel { padding-bottom: 0; } #contatiner .programsEnglish #SUB_CONTENT7 .slick-dots li button, #contatiner .programsEnglish #SUB_CONTENT7 .owl-carousel button.owl-dot span { border-color: #ccc; } #contatiner .programsEnglish #SUB_CONTENT7 .slick-dots li.slick-active button, #contatiner .programsEnglish #SUB_CONTENT7 .owl-carousel button.owl-dot.active span { border-color: #ccc; background-color: #ccc; } /* MATH */ .programsWrap.programMath .contHeader { background: url(/mobile/images/visual/program-math.png) no-repeat center; background-size: 100% auto; } #contatiner .section .inner.quiz-test { overflow: visible; } .programMath .quiz-test .quiz-test-box .box { display: flex; align-items: center; justify-content: center; height: 78.33vw; max-height: 564px; } .programMath .quiz-test .quiz-test-box .box > div { position: relative; } .programMath .quiz-test .quiz-test-box .box strong { display: block; color: #FFF; font-size: 25px; font-style: normal; font-weight: 700; line-height: 1.1em; /* 44px */ text-align: center; } .programMath .quiz-test .quiz-test-box .box .dropdown-btn { width: 187px; margin-top: 15px; padding: 0 25px; font-size: 14px; line-height: 1.1em; font-weight: 400; } .programMath .quiz-test .quiz-test-box .box .dropdown-btn:before { top: 45%; } .quiz-test .quiz-test-box .box .dropdown-grade { position: absolute; top: 100%; left: 50%; width: 187px; transform: translateX(-50%); } .programMath .quiz-test .quiz-test-box .critical-box { position: relative; z-index: 1; background-image: url(/mobile/images/programs/math/quiz_test_critical_2023.png); } .programMath .quiz-test .quiz-test-box .critical-box strong { text-shadow: 0px 0px 3px #006F39; } .programMath .quiz-test .quiz-test-box .critical-box .dropdown-btn, .programMath .quiz-test .quiz-test-box .critical-box .dropdown-grade li a { color: #1A7E3F; } .programMath .quiz-test .quiz-test-box .critical-box .dropdown-btn::before { border-bottom-color: #1A7E3F; } .programMath .quiz-test .quiz-test-box .arithmetic-box { position: relative; z-index: 2; margin-top: 25px; background-image: url(/mobile/images/programs/math/quiz_test_arithmetic_2023.png); } .programMath .quiz-test .quiz-test-box .arithmetic-box strong { text-shadow: 0px 0px 3px #E7A318; } .programMath .quiz-test .quiz-test-box .arithmetic-box .dropdown-btn, .programMath .quiz-test .quiz-test-box .arithmetic-box .dropdown-grade li a { color: #FDB722; } .programMath .quiz-test .quiz-test-box .arithmetic-box .dropdown-btn::before { border-bottom-color: #FDB722; } .programMath #SUB_CONTENT2 .list-card { gap: 0 100px; } .programMath #SUB_CONTENT2 .list-card li { padding: 0 30px; border: 0; } .programMath #SUB_CONTENT2 .list-card li:first-child { margin-bottom: 35px; } .programMath #SUB_CONTENT2 .list-card li img { margin: 0 20px; width: calc(100% - 40px); } .programMath #SUB_CONTENT2 .list-card li strong { margin-top: 15px; margin-bottom: 15px; color: #F00; font-size: 16px; } .programMath #SUB_CONTENT2 .list-card li > p { margin: 0 auto; /* font-size: 12px; */ font-size: 15px } .programMath #SUB_CONTENT2 .list-card li > p em { color: #545454; font-weight: 500; background: url(/mobile/images/programs/math/bg_line.png) repeat-x 0 bottom; } /* SUB_CONTENT4 */ .programMath .contents #SUB_CONTENT4.section .list-galley .item { align-items: center; } .programMath .contents #SUB_CONTENT4.section .list-galley .item strong { padding-left: 35px; } .programMath .contents #SUB_CONTENT4.section .list-galley .item strong:after { top: -2px; width: 25px; height: 25px; background-color: transparent; background-size: cover; } #contatiner .programMath .contents #SUB_CONTENT4.section .list-galley .item > div { min-height: 180px; padding-left: 16px; padding-right: 16px; } .programMath .contents #SUB_CONTENT4.section .list-galley .item.s1 strong:after { background-image: url(/mobile/images/programs/math/icon_how_is_eye_level_01.svg); } .programMath .contents #SUB_CONTENT4.section .list-galley .item.s2 strong:after { background-image: url(/mobile/images/programs/math/icon_how_is_eye_level_02.svg); } .programMath .contents #SUB_CONTENT4.section .list-galley .item.s3 strong:after { background-image: url(/mobile/images/programs/math/icon_how_is_eye_level_03.svg); } /* SUB CONTENT 6 */ #contatiner .programMath #SUB_CONTENT6 .list-card .item { display: flex; align-items: center; justify-content: center; min-height: auto; padding: 25px 10px; border: 1.5px solid rgba(255, 0, 0, 0.20); } #contatiner .programMath #SUB_CONTENT6 .list-card .item p { position: relative; margin-top: 0; color: rgba(255, 0, 0, 0.80); font-weight: 500; } #contatiner .programMath #SUB_CONTENT6 .list-card.owl-carousel { padding-bottom: 0; } #contatiner .programMath #SUB_CONTENT6 .slick-dots li button, #contatiner .programMath #SUB_CONTENT6 .owl-carousel button.owl-dot span { border-color: #ccc; } #contatiner .programMath #SUB_CONTENT6 .slick-dots li.slick-active button, #contatiner .programMath #SUB_CONTENT6 .owl-carousel button.owl-dot.active span { border-color: #ccc; background-color: #ccc; } /* Summit */ .programsWrap.programSummit .contHeader { background: url(/mobile/images/visual/program-summit.png) no-repeat center; } .programsWrap.programSummit .clearFix:after { display: none; } .programsWrap.programSummit .imageArea { position: relative; } .programsWrap.programSummit .textArea { text-align: left; } #contatiner .programsWrap.programSummit .subTitle { position: relative; margin-bottom: 20px; /* padding-top: 0; padding-bottom: 13px; */ font-weight: 600; } /* #contatiner .programsWrap.programSummit .subTitle:after { content: ''; position: absolute; left: 50%; top: auto; bottom: 0; width: 28px; height: 1px; background: #333; transform: translateX(-50%); } */ #contatiner .programsWrap.programSummit .subTitle span { color: #4E7282; font-weight: 300; } /* SUB CONTENT 1 */ .programsWrap.programSummit .textArea p { margin-bottom: 30px; color: #808080; } .programsWrap.programSummit .subTitle + p { color: #808080; font-size: 14px; font-style: normal; font-weight: 300; line-height: 1.5em; text-align: center; } /* SUB CONTENT 2 */ .programsWrap.programSummit .contents { } .programsWrap.programSummit #SUB_CONTENT2.section { margin-top: 65px; } .programsWrap.programSummit #SUB_CONTENT2 .subTitle { margin-bottom: 30px; padding-bottom: 0; color: #333; text-align: center; font-size: 19px; font-style: normal; font-weight: 500; line-height: 1.1em; /* 35.2px */ letter-spacing: -0.5px; } .programsWrap.programSummit #SUB_CONTENT2 .subTitle:after { display: none; } .programsWrap.programSummit #SUB_CONTENT2 .list-grid { gap: 10px; } .programsWrap.programSummit #SUB_CONTENT2 .list-grid li { padding: 22px 10px; } .programsWrap.programSummit #SUB_CONTENT2 .list-grid li img { width: 53px; } .programsWrap.programSummit #SUB_CONTENT2 .list-grid li strong { margin-top: 10px; margin-bottom: 10px; color: #4D4D4D; text-align: center; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.1em; } .programsWrap.programSummit #SUB_CONTENT2 .list-grid li p { color: #808080; text-align: center; font-size: 12px; font-style: normal; font-weight: 300; line-height: 1.5em; } /* SUB CONTENT 3 */ .programsWrap.programSummit #SUB_CONTENT3 .textArea p { margin-bottom: 30px; color: #808080; font-size: 14px; font-style: normal; font-weight: 300; } .programsWrap.programSummit #SUB_CONTENT3 .textArea p em { display: block; font-weight: 500; /* font-weight: 600; */ } .programsWrap.programSummit #SUB_CONTENT3 .textArea table { width: 100%; margin-bottom: 30px; } .programsWrap.programSummit #SUB_CONTENT3 .textArea table tbody, .programsWrap.programSummit #SUB_CONTENT3 .textArea table tr, .programsWrap.programSummit #SUB_CONTENT3 .textArea table th, .programsWrap.programSummit #SUB_CONTENT3 .textArea table td { display: block; width: 100% } .programsWrap.programSummit #SUB_CONTENT3 .textArea table tr { margin-bottom: 5px; } .programsWrap.programSummit #SUB_CONTENT3 .textArea table th { height: 38px; padding: 7px 10px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; text-align: center; background: #83A3B3; } .programsWrap.programSummit #SUB_CONTENT3 .textArea table td { height: 38px; padding: 10px; color: #808080; text-align: center; font-size: 12px; font-style: normal; font-weight: 300; line-height: 1.5em; background: #FAFAFA; } .programsWrap.programSummit #SUB_CONTENT3 .textArea table tr:nth-child(even) td { background: #F4F4F4; } /* SUB CONTENT 4 */ .programsWrap.programSummit #SUB_CONTENT4 { margin: 100px -20px 0; padding: 40px 20px; background: #FAFAFA; } .programsWrap.programSummit #SUB_CONTENT4 .box-white { padding: 30px 15px 20px; border: 1px solid #E5E5E5; background: #FFF; } .programsWrap.programSummit #SUB_CONTENT4 .box-white + .box-white { margin-top: 30px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white h3 { position: relative; margin-bottom: 20px; padding-left: 27px; color: #333; font-size: 19px; font-style: normal; font-weight: 400; /* font-weight: 500; */ line-height: 1.1em; letter-spacing: -0.5px; text-transform: uppercase; } .programsWrap.programSummit #SUB_CONTENT4 .box-white h3 span { position: absolute; left: 0; top: 0; display: inline-block; color: #F00; font-weight: 600; } .programsWrap.programSummit #SUB_CONTENT4 .box-white > .list-card strong { display: block; color: #4E7282; font-size: 14px; font-style: normal; /* font-weight: 400; */ font-weight: 500; text-align: left; } .programsWrap.programSummit #SUB_CONTENT4 .box-white > .list-card p { margin-top: 5px; color: #808080; font-size: 12px; font-style: normal; font-weight: 300; text-align: left; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card { gap: 0 50px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card li { display: flex; align-items: center; justify-content: center; gap: 15px 10px; border: 0; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card li + li { margin-top: 15px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card li img { width: 75px; height: 75.25px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card li div { width: calc(100% - 85px); } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b1 .list-card li div p { color: #808080; text-align: left; font-size: 12px; font-style: normal; font-weight: 300; line-height: 1.5em; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 > .list-card > li, .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 > .list-card > li { padding: 20px 15px; background: #FAFAFA; border: 0; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 .list-card li, .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .list-card li { border: 0; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 .list-card li .list-card { gap: 0 10px; margin-top: 15px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 .list-card li .list-card.col2 { grid-template-columns: repeat(2, auto); margin-bottom: 40px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 .list-card li:nth-child(2) .list-card.col1 { gap: 15px 0; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b2 .list-card li:nth-child(2) .list-card.col1 + .list-card.col1 { border: 1px solid #E5E5E5; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .clearFix { display: flex; gap: 0 15px; margin-bottom: 15px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .clearFix .imageArea { width: 58px; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .clearFix .imageArea strong { display: block; margin-top: 7px; color: #4E7282; font-family: Helvetica Neue; font-size: 10px; font-style: normal; font-weight: 400; text-align: center; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .clearFix .textArea { width: calc(100% - 80px); } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .clearFix .textArea p { margin-top: 10px; font-size: 12px; line-height: 1.5em; } .programsWrap.programSummit #SUB_CONTENT4 .box-white.b3 .list-grid.col2 { gap: 0 13px; } /* SUB CONTENT 5 */ .programsWrap.programSummit ul.learning:after { content:""; clear:both; display:block; } .programsWrap.programSummit ul.learning li { position:relative; margin: 30px 0 0; padding: 0 0 0 50px; } .programsWrap.programSummit ul.learning li:first-child { margin-top:65px; } .programsWrap.programSummit ul.learning li span { position:absolute; left:0; top:-2px; display:block; text-align:center; font-size:45px; line-height:46px; color: #83A3B3; font-weight:600; } .programsWrap.programSummit ul.learning .title strong { color: #4D4D4D; } .programsWrap.programSummit ul.learning li .cont { padding:0 0 0 20px; border-left:1px solid #e5e5e5; } .programsWrap.programSummit ul.learning li .cont strong { display:block; font-size:20px; line-height:22px; color:#4D4D4D; font-weight: 500; } .programsWrap.programSummit ul.learning li p { padding-top:10px; color: #808080; font-size: 14px; font-style: normal; font-weight: 300; line-height: 1.5em; } /* Form */ #contatiner .programsWrap.programSummit #FORM_SECTION .subTitle:after { display: none } .contactUsWrap .HowToReachUs { border-bottom: 0; margin-bottom: 35px; } .contactUsWrap .HowToReachUs ul li:before { display: none; } /* Member */ #olympiad.intro .aboutDaekyoWrap .thum { position: relative; top: 0; } /* Find A Center */ #findACenterCont #mapASide #centerList li { padding-right: 150px; } #findACenterCont .graph_balloon { z-index: 2; position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; color: #1e1e1e; text-align: left; } #findACenterCont .graph_balloon * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #findACenterCont .graph_balloon input { display: inline-block; vertical-align: top; width: 15px; height: 15px; background-image: url(/mobile/images/icon/icon_question2.png); background-size: 15px auto; background-repeat: no-repeat; background-color: #F00; border-radius: 1000px; } #findACenterCont .graph_balloon .balloon { display: none; position: absolute; top: 100%; width: 240px; margin-top: 7px; padding: 10px 0 10px 7.5px; color: #f00; text-align: left; font-weight: 500; font-size: 11px; line-height: 13px; border: 1px solid #F00; background: #fff; word-break: keep-all; white-space: pre-line; } #findACenterCont .graph_balloon .balloon em { padding-right: 2px; color: #f00; text-align: left; font-weight: 500; font-size: 11px; line-height: 13px; } #findACenterCont .graph_balloon .balloon:before { content: ''; position: absolute; top: -8px; content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #F00; } #findACenterCont .graph_balloon .balloon:after { content: ''; position: absolute; top: -6px; right: 35px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #fff; } #findACenterCont .graph_balloon input:checked + .balloon { display: block; } #findACenterCont .graph_balloon.right .balloon { right: -22px; } #findACenterCont .graph_balloon.right .balloon:before { right: 23px; } #findACenterCont .graph_balloon.right .balloon:after { right: 24px; } #findACenterCont .graph_balloon.center .balloon { left: 50%; transform: translateX(-50%); } #findACenterCont .graph_balloon.center .balloon:before, #findACenterCont .graph_balloon.center .balloon:after { left: 50%; transform: translateX(-50%); } #findACenterCont .graph_balloon.type4 input:checked + .balloon { display: flex; } #findACenterCont #detailCenter .detailCont .detailInfo li.openday strong { background-image: url(/mobile/images/icon/opendays_icon.png); } #findACenterCont #detailCenter .detailCont .detailInfo li.center strong { background-image: url(/mobile/images/icon/itc_bs.png); } #findACenterCont #listByArea .header .sort li label { text-transform: uppercase; } @media screen and (min-width:349px) { #findACenterCont .centerListWrap #centerList li dl dd .br { display: none; } } @media screen and (max-width:348px) { #findACenterCont .centerListWrap #centerList li dl dd .br { display: block; } #findACenterCont .graph_balloon.right .balloon { right: 50%; transform: translateX(50%); } #findACenterCont .graph_balloon.right .balloon:before, #findACenterCont .graph_balloon.right .balloon:after { left: 50%; transform: translateX(-50%); } } @media screen and (max-width:368px) { #findACenterCont .graph_balloon.center .balloon { left: auto; right: -22px; transform: none; } #findACenterCont .graph_balloon.center .balloon:before { left: auto; right: 23px; transform: none; } #findACenterCont .graph_balloon.center .balloon:after { left: auto; right: 24px; transform: none; } }