@charset "utf-8";
@import url('layout.css'); /* reset */
@import url('sub_common.css'); /* common subpage */


#container>div{margin:0; width:auto !important;}
#container .section{margin:50px auto; width:1180px;}

#container .head{min-height:auto;}
#container.intro .head,
#container.entrance .head{overflow:hidden; height:45px;}
#container .head .subimg{height:270px;}
#container .head:after{content:''; position:absolute; z-index:2; bottom:0; left:0; right:0; height:50px; background-color:#1d437e; opacity:0.5;}
#container .head .subimg>img{position:absolute; z-index:1; top:0; left:50%; margin-left:-960px;}
#container .head h3{position:absolute; z-index:3; top:80px; left:0; right:0; font-size:46px; font-weight:400; text-align:center;}
/* sub navigation : style */
#container .snav{position:absolute; z-index:10; top:0; left:0; right:0;}
#container .snav>ul{position:relative;}
#container.intro.bg .snav,
#container.course .snav{border:0; background-color:transparent;}
#container.intro.bg .snav:before,
#container.course .snav:before{border-top:0; border-bottom:1px solid #222; background-color:#333; opacity:0.5;}
#container.intro.bg .snav>ul>li>a,
#container.course .snav>ul>li>a{color:#fff; font-weight:300;}
#container.intro.bg .snav>ul>li.selected>a,
#container.course .snav>ul>li.selected>a{color:#a6d4f3; font-weight:500;}
/* sub navigation : margin */
#container.intro .snav>ul{padding-left:320px;}
#container.course .snav>ul{padding-left:455px;}
#container.entrance .snav>ul{padding-left:355px;}

#container ol.tnav{margin:-50px auto 0 auto; width:1180px;}
#container ol.tnav>li{border:0;}
#container ol.tnav>li:before,
#container ol.tnav>li:after{border-color:#fff; opacity:0.2;}
#container ol.tnav>li>a{padding:13px 10px; background-color:transparent; color:#fff; font-size:20px;font-weight:400;}
#container ol.tnav>li.selected{background-color:#fff; box-shadow:0 -3px 3px rgba(0,0,0,0.1);}
#container ol.tnav>li.selected>a{color:#333;}

#wrap.math #container.intro ol.tnav,
#wrap.math #container.entrance ol.tnav{display:none;}

#wrap.math .subtit h4{color:#005DAC; height:50px;}
#wrap.math .subtit h3{color:#ef4166;}
#wrap.math .subtit .copy .left{text-align:left;}
.section .copy h4{font-size:32px; font-weight:400;}
.section .copy h4>b{font-weight:600;}
.section .emphasis {font-size:20px; margin-top:15px; font-weight:400;}

/*###############
Intro Module
#################*/

#container.intro.bg .contents{padding-bottom:0;}
#container.intro .subtit.wide h4{font-size:36px;}
#container.intro .section.full .subtit h4{font-size:28px; color:#2b3147;}
#container.intro .section.full .subtit h4>b{font-weight:600;}
/* container : story 01 */
#container.intro .section.full.s01{margin-top:-45px !important; background-color:#50c2c2;}
#container.intro .top_area{position:relative; height:550px;}
#container.intro .top_area>.bg{position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#3589c9; background-position:center; background-size:cover; overflow:hidden;}
#container.intro .top_area>.bg>.m{position:absolute; left:50%; background-image:url(../img/math/graphic_math_intro_01.svg); background-size:cover;}
#container.intro .top_area>.bg>.m.g01{bottom:0; margin-left:-800px; width:420px; height:229px; opacity:0.5;}
#container.intro .top_area>.bg>.m.g02{bottom:0; margin-left:500px; width:440px; height:240px; opacity:0.6;}
#container.intro .top_area>.bg>.m.g03{top:0; margin-left:340px; width:335px; height:190px; opacity:0.6; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
#container.intro .top_area .copy{position:relative; z-index:2; text-align:center; margin:0 auto; padding-top:125px; width:1180px;}
#container.intro .top_area .copy>h3{width:816px; height:305px; left:50%; margin-left:190px; background-image:url(../img/math/graphic_math_intro_tit_01.png); background-size:contain; background-repeat:no-repeat; text-indent:-9999px;}
#container.intro .top_area .copy>h4{color:#fff; font-family:'NanumSquare'; padding-bottom:0px; font-size:40px; font-weight:400; letter-spacing:-2px;}
#container.intro .top_area .copy>h5{font-family:'NanumSquare'; padding-top:30px; color:#161c40; font-size:19px; font-weight:400; letter-spacing:-1px;}
/* container : story 03 */
#container.intro .section.full.s03{padding:100px 0; background-color:#fff;}
#container.intro .section.full.s03:before{content:''; position:absolute; top:0; left:50%; margin-left:-40px; border:40px solid transparent; border-top-color:#3589c9;}
/* container : story 04 */
#container.intro .section.full.s04{padding:120px 0; background-color:#2b3147; text-align:center;}
#container.intro .section.full.s04 .subtit{display:inline-block; margin-top:35px; padding:70px; width:1180px; height:330px; background-color:#e8e5e0; background-image:url(../img/math/graphic_math_intro_branch.jpg); background-repeat:no-repeat; background-position:right center; text-align:left;}
#container.intro .section.full.s04 .subtit>h4{width:450px; font-size:36px;}
#container.intro .section.full.s04 .subtit>h4>b{font-size:42px;}
#container.intro .section.full.s04 .subtit>button{margin-top:60px; border:2px solid #333; }
#container.intro .section.full.s04 .subtit>button>span{color:#333; font-size:18px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
#container.intro .section.full.s04 .subtit>button:hover>span{color:#fff;}
#container.intro .section.full.s04 .subtit>button:before{content:''; position:absolute; top:50%; left:50%; right:auto; margin:-30px 0 0 -30px; width:60px; height:60px; border-radius:100%; background-color:#ef3e65; box-shadow:none; -ms-transform:scale(0); -webkit-transform:scale(0); transform:scale(0); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
#container.intro .section.full.s04 .subtit>button:hover:before{-ms-transform:scale(5); -webkit-transform:scale(5); transform:scale(5);}
.branch_info>button:after{content:none;}
 
/* container : different */
ul.different{margin:15px auto; width:1180px; font-size:0;}
ul.different>li{display:inline-block; margin-left:0; margin-top:20px; margin-bottom:0px; width:100%; text-align:center; vertical-align:top;}
ul.different>li:first-child{margin-left:0;}
ul.different>li h5{margin-top:0px; color:#2b3147; line-height:1.5; font-family:'NanumSquare'; font-size:27px; font-weight:400; letter-spacing:-1px;}
ul.different>li h5:before{content:''; display:block; margin:10px 0; background-repeat:no-repeat; background-position:center center; background-size:contain;}
ul.different>li h5 b{ color:#3588c8;}
ul.different>li p{margin-top:20px; line-height:1.8; color:#2b3147; font-family:'NanumSquare'; font-size:19px; font-weight:400; letter-spacing:-1px;}
/* container : branch info */
.branch_info{margin-top:45px; text-align:center;}
.branch_info>ul{font-size:0;}
.branch_info>ul>li{display:inline-block; position:relative; margin:0 15px; padding:10px; width:130px; height:130px; border-radius:100%; background-color:#eee; cursor:default;}
.branch_info>ul>li>.name{position:absolute; left:10px; right:10px; top:50%; margin-top:-10px;  font-family:'NanumSquare'; font-size:16.5px; word-break:keep-all;}
.branch_info>ul>li>.tel{display:none; position:absolute; left:0; right:0; top:0; bottom:0; color:#fff; font-family:'NanumSquare'; font-size:16.5px; word-break:keep-all;}
.branch_info>ul>li>.tel:after{content:''; position:absolute; left:0; right:0; top:0; bottom:0;}
.branch_info>ul>li>.tel>a{display:block; position:absolute; left:0; right:0; top:0; bottom:0; padding:65px 5px 0 5px; color:#fff;}
.branch_info>ul>li>.tel>a:before{content:'문의전화';  position:absolute; top:40px; left:10px; right:10px;}
.branch_info>ul>li:hover{background-color:#ef3e65;}
.branch_info>ul>li:hover>.name{display:none;}
.branch_info>ul>li:hover>.tel{display:block;}



/*###############
Course Module
#################*/

#container.course .section.nav{margin:70px auto; text-align:center;}
#container.course .section.nav:after{content:none;}
#container.course .section.nav .subtit{display:inline-block; padding:0; vertical-align:middle;}
#container.course .section.nav .subtit h4{font-size:0;}
#container.course .section.nav .subtit h4>b{display:none;}
#container.course ol.menu{display:inline-block; position:relative; padding:0; vertical-align:middle;}
#container.course ol.menu:before{content:''; position:absolute; left:0; right:0; top:0; bottom:0; border:1px solid #000; opacity:0.2;}
#container.course ol.menu>li:before,
#container.course ol.menu>li:after{content:none;}
#container.course ol.menu>li.selected{background-color:#3477b7;}
#container.course ol.menu>li.selected>a{color:#fff;}
#container.course ol.menu>li>a{padding:15px 25px;}
#container.course hr{margin:30px 0;}



/*###############
Entrance Module
#################*/

/* container : process */
ul.process{position:relative; margin:10px; font-size:0; list-style-type:decimal-leading-zero; list-style-position:inside;}
ul.process:after{content:''; clear:both; display:block;}
ul.process>li{float:left; position:relative; margin-left:16px; padding:20px; height:180px; border-radius:10px; font-family:'NanumSquare'; font-size:32px; font-weight:300; vertical-align:top;}
ul.process>li:before{content:''; position:absolute; top:8px; bottom:8px; left:-16px; border-top:82px solid transparent; border-bottom:82px solid transparent; border-left:16px solid transparent;}
ul.process>li:first-child{margin-left:8px;}
ul.process>li:first-child:before{content:none;}
ul.process>li h4{color:#fff; font-family:'NanumSquare'; font-size:32px; font-weight:400;}
ul.process>li h5{margin:10px 0; color:#fff; font-family:'NanumSquare'; font-size:16.5px; font-weight:400;}
ul.process>li h5>b{color:#f0696e; font-weight:500;}
ul.process>li button{margin-top:5px; border-radius:0;}
ul.process>li button:after{right:auto; width:0; background-color:#faad16;}
ul.process>li button:hover:after{width:100%;}
ul.process>li dl{margin:25px 10px 0 0;}
ul.process>li dl>dt{position:relative; margin:10px 0; padding-left:20px; color:#555; font-weight:600;}
ul.process>li dl>dt:before{content:''; position:absolute; left:0; top:1px; width:16px; height:16px; background-image:url(../img/gojls/bulb.svg); background-size:cover;}
ul.process>li dl>dd{position:relative; padding:3px 15px; font-size:13px;}
ul.process>li dl>dd:before{content:''; position:absolute; left:7px; top:9px; width:2px; height:2px; border-radius:100%; background-color:#777;}
ul.process.mathink>li{width:calc(25% - 16px); background-color:#5CB8D7; color:#cbf2ff;}
ul.process.mathink>li:nth-child(1){background-color:#5CB8D7;}
ul.process.mathink>li:nth-child(2){background-color:#45AED1;}
ul.process.mathink>li:nth-child(3){background-color:#2EA4CC;}
ul.process.mathink>li:nth-child(4){background-color:#179AC6;}
ul.process.mathink>li:before{border-left-color:#cbf2ff;}
ul.process.mathself>li{width:calc(25% - 16px); background-color:#7192C1; color:#cfdef3;}
ul.process.mathself>li:nth-child(1){background-color:#7192C1;}
ul.process.mathself>li:nth-child(2){background-color:#5D83B8;}
ul.process.mathself>li:nth-child(3){background-color:#4973B0;}
ul.process.mathself>li:nth-child(4){background-color:#3564A7;}
ul.process.mathself>li:before{border-left-color:#cfdef3;}


/*####################
Screen size
######################*/

@media screen and (max-width:1220px){

#container .section,
#container .snav>ul,
#container ol.tnav,
#container.intro .top_area .copy,
#container.intro ul.different,
#container.intro .section,
#container.intro .section.full.s04 .subtit{width:990px;}
#container.intro .top_area{height:400px;}
#container.intro .top_area .copy{padding-top:105px;}
#container.intro .top_area .copy>h3{margin-left:210px; width:610px; height:210px;}
#container.intro .top_area .copy>h4{font-size:28px;}
#container.intro .top_area .copy>h5{padding-top:40px; font-size:16.5px;}
img.wide{width:100%;}

}


/*############
Mobile design
##############*/

html.mobile #wrap.math h3.mathink,
html.mobile #wrap.math h3.mathself{height:27px;}
html.mobile #wrap.math .graph{margin:10px;}
html.mobile #wrap.math .graph img{width:100%;}

html.mobile #container .head:after{height:40px;}
html.mobile #container .head h3{left:0; font-size:21px;}
html.mobile #container.intro .head,
html.mobile #container.entrance .head{min-height:45px;}
html.mobile #container.course .head .subimg{height:120px;}
html.mobile #container.course .head .subimg>img{margin:0 0 0 -435px; height:120px;}

html.mobile #container.intro .snav>ul{table-layout:fixed;}

html.mobile #container ol.tnav{display:table; margin:-40px 10px 0 10px; width:calc( 100% - 20px );}
html.mobile #container ol.tnav>li{display:table-cell; height:40px; vertical-align:middle;}
html.mobile #container ol.tnav>li>a{padding:10px; font-size:15px;}

html.mobile ul.process>li{float:none; margin:0 0 15px 0; padding:15px; width:auto; height:auto; font-size:21px;}
html.mobile ul.process>li h5{display:inline-block; margin:0; font-size:18px; letter-spacing:-1px;}
html.mobile ul.process>li h5>br{display:none;}
html.mobile ul.process>li button:first-of-type{margin-left:35px;}
html.mobile ul.process>li:after{top:auto; bottom:-15px; left:50%; right:auto; margin-left:-150px; border-left:150px solid transparent; border-right:150px solid transparent; border-bottom:0;}
html.mobile ul.process.mathink>li:after{border-top:15px solid #cbf2ff;}
html.mobile ul.process.mathself>li:after{border-top:15px solid #cfdef3;}
html.mobile ul.process.mathink>li button:hover:after,
html.mobile ul.process.mathself>li button:hover:after{width:0;}

html.mobile #container.intro .top_area .copy,
html.mobile #container.intro ul.different,
html.mobile #container.intro .section,
html.mobile #container.intro .section.full.s04 .subtit{width:auto !important;}
html.mobile #container.intro .top_area{height:300px;}
html.mobile #container.intro .top_area>.bg>.m.g01{margin-left:-350px; width:300px; height:140px;}
html.mobile #container.intro .top_area>.bg>.m.g02{margin-left:50px; width:300px; height:140px;}
html.mobile #container.intro .top_area>.bg>.m.g03{margin-left:50px; width:160px; height:110px;}
html.mobile #container.intro .top_area .copy{padding-top:80px;}
html.mobile #container.intro .top_area .copy>h3{width:auto; margin-left:10px; height:147px;}
html.mobile #container.intro .top_area .copy>h4{font-size:18px;}
html.mobile #container.intro .top_area .copy>h5{padding:10px; font-size:14px; word-break:keep-all;}
html.mobile #container.intro .top_area .copy>h5>br{line-height:2;}

html.mobile #container.intro .section.full.s02,
html.mobile #container.intro .section.full.s03,
html.mobile #container.intro .section.full.s04{padding:50px 0;}
html.mobile #container.intro .section.full.s02:before,
html.mobile #container.intro .section.full.s03:before{margin-left:-30px; border-width:30px;}
html.mobile #container.intro .section.full.s04 .subtit{display:block; margin:0 10px; padding:20px; height:150px; background-size:cover; background-position:50px center;}
html.mobile #container.intro .section.full.s04 h4{width:250px; font-size:24px;}
html.mobile #container.intro .section.full.s04 .subtit>h4>b{width:auto; font-size:24px;}
html.mobile #container.intro .section.full.s04 .subtit>button{margin-top:15px; border-width:1px;}
html.mobile #container.intro .section.full.s04 .subtit>button>span{padding:0 10px; line-height:35px; font-size:15px;}

html.mobile .intro_pic>li{width:50%;}
html.mobile .intro_pic.col3>li{width:100%;}
html.mobile .intro_pic dl.slist{margin-bottom:30px;}
html.mobile .subtit>h4.fake+.copy>h5{margin:0;}

/* intro : different */
html.mobile ul.different{margin:0;}
html.mobile ul.different>li{display:block; margin:0; padding:20px 10px; width:auto;}
html.mobile ul.different>li>img{display:block; width:100%;}
html.mobile ul.different>li h5{font-size:18px;}
html.mobile ul.different>li p{font-size:13px; word-break:keep-all;}
html.mobile ul.different>li p>br{display:none;}

/* container : branch info */
html.mobile .branch_info{margin-top:30px;}
html.mobile .branch_info>ul>li{margin:0 5px; padding:0; width:100px; height:100px; background-color:#ef3e65;}
html.mobile .branch_info>ul>li>.name{left:5px; right:5px; margin-top:-16px; color:#fff; font-size:12px; letter-spacing:-0.5px;}
html.mobile .branch_info>ul>li>.name>br{display:none;}
html.mobile .branch_info>ul>li>.tel{display:block; font-size:13px;}
html.mobile .branch_info>ul>li>.tel:after{content:none;}
html.mobile .branch_info>ul>li>.tel>a{padding-top:48px;}
html.mobile .branch_info>ul>li>.tel>a:before{content:none;}


/* course */
html.mobile .section.nav{margin:20px 0 0 0 !important;}
html.mobile #container.course ol.menu{width:auto;}
html.mobile #container.course ol.menu>li>a{padding:12px 20px;}
html.mobile #container.course hr{margin:20px 0;}

html.mobile ul.list>li div.point{margin:10px 0;}
html.mobile ul.list>li div.point img{width:100% !important;}
html.mobile ul.list>li dl.slist{margin:20px 5px;}

html.mobile ul.list.table>li{float:left; padding-left:0; width:100%; border-top:1px dashed #e5e5e5; border-left:0; font-size:22px;}
html.mobile ul.list.table>li:first-child{border-top:0;}
html.mobile ul.list.table>li h4{font-size:20px;}

html.mobile ul.list.illust>li h4{font-size:18px;}
html.mobile ul.list.illust>li dl.slist>dd{font-size:12px;}

html.mobile ul.list>li .float_l,
html.mobile ul.list>li .float_r{float:none; padding:15px 0; width:auto; border-left:0; border-bottom:1px dashed #e5e5e5;}

html.mobile ul.slist{margin:20px 10px !important; width:auto !important;}
html.mobile ul.slist>li{margin:5px 0; padding-left:8px; font-size:14px;}
html.mobile ul.slist>li:before{top:5px; width:2px; height:2px;}