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


/*###############
Customer Module
#################*/


/* container : sub title */
#container.faq .subtit.left{display:none;}
#container.faq .subtit.wide h4{white-space: normal;}
#container.faq ol.menu{display:inline-block; vertical-align:middle;}

/* container : FAQ */
ol.menu.icon>li{min-width:90px; font-family:'Nanum Gothic'}
ol.menu.icon>li:first-child{padding-left:0; min-width:80px;}
ol.menu.icon>li>a:before{content:''; display:inline-block; width:32px; height:32px; background-image:url(../img/gojls/icon_faq.svg); opacity:0.3;}
ol.menu.icon>li.all>a:before{background-position:0 0;}
ol.menu.icon>li.entrance>a:before{background-position:-32px 0;}
ol.menu.icon>li.course>a:before{background-position:-64px 0;}
ol.menu.icon>li.online>a:before{background-position:-96px 0;}
ol.menu.icon>li.pay>a:before{background-position:-128px 0;}
ol.menu.icon>li.etc>a:before{background-position:-160px 0;}
ol.menu.icon>li>a>span{display:block; color:#888; font-size:12px; text-align:center;}
ol.menu.icon>li.selected>a{background-color:transparent;}
ol.menu.icon>li.selected:after{content:none;}
ol.menu.icon>li.selected>a:before{opacity:1 !important;}
ol.menu.icon>li.selected>a>span{color:#333; font-weight:600;}

.diagnostic_link{display:inline-block; margin:10px 10px 0 0;}
.diagnostic_link.selected{margin-top:28px;}
.diagnostic_link.selected:before{content:''; position:absolute; left:0; right:0; bottom:0; border-top:2px solid #999;}
.diagnostic_link>a{display:block; position:relative; padding:10px 15px; background-color:#fff;}
.diagnostic_link.selected>a{border:2px solid #999; border-bottom:0 !important;}
.diagnostic_link .icon{display:inline-block; position:relative; margin-right:3px; padding-top:11px; width:40px; height:40px; line-height:10px; border-radius:100%; background-color:#555; text-align:center; vertical-align:middle;}
.diagnostic_link .icon:after{content:''; position:absolute; right:3px; bottom:4px; border:6px solid transparent; border-bottom:0; border-top:8px solid #555;-ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:right top; -moz-transform-origin:right top; transform-origin:right top;}
.diagnostic_link:hover .icon{background-color:#1278bc; -webkit-animation:move 1s ease-in infinite; animation:move 1s ease-in infinite;}
.diagnostic_link:hover .icon:after{border-top-color:#1278bc;}
.diagnostic_link .icon>h6{position:relative; color:#fff; font-family:'Open Sans'; font-size:13px; font-weight:500;}
.diagnostic_link .icon>span{position:relative; color:#fff; font-family:calibri; font-size:11px; font-weight:300; opacity:0.7;}
.diagnostic_link h5{display:inline-block;  font-family:'NanumSquare'; font-size:18px; font-weight:500; letter-spacing:-0.5px; vertical-align:middle;}

@-webkit-keyframes move {
  0%, 100% {-webkit-transform:none; transform:none;}
  30%	{-webkit-transform:translate(0, -3px); transform:translate(0, -3px);}
  80%	{-webkit-transform:translate(0, 1px); transform:translate(0, 1px);}
}
@keyframes move {
  0%, 100% {-webkit-transform:none; transform:none;}
  30%	{-webkit-transform:translate(0, -3px); transform:translate(0, -3px);}
  80%	{-webkit-transform:translate(0, 1px); transform:translate(0, 1px);}
}

#accordion{clear:both; margin-top:20px; border-top:1px solid #777; border-bottom:1px solid #777;}
#accordion>dt{position:relative; border-top:1px solid #e5e5e5; color:#555; outline:0; cursor:pointer;}
#accordion>dt:first-child{border-top:0;}
#accordion>dd{position:relative; padding-left:40px; border-top:1px dotted #e5e5e5; background-color:#fafafa; color:#555;}
#accordion div.q,
#accordion div.a{position:relative; padding:20px 80px;}
#accordion div.q{padding-left:200px;}
#accordion div.a{padding-left:50px;}
#accordion div.q:before,
#accordion div.a:before{position:absolute; left:10px; top:15px; padding:5px 0; width:28px; border-radius:100%; color:#fff; font-family:'NanumSquare'; font-size:16.5px; text-align:center;}
#accordion div.q:before{content:'Q'; background-color:#f0696e;}
#accordion div.a:before{content:'A'; background-color:#1278bc}
#accordion.advice>dt{padding:20px 180px 20px 100px;}
#accordion.advice>dt:before{content:'상담등록'; position:absolute; left:15px; top:18px; padding:0 5px; line-height:20px; border-radius:3px; background-color:#999; color:#fff; font-size:13px; text-align:center;}
#accordion.advice>dt.completed:before{content:'답변완료'; background-color:#1278bc;}
#accordion.advice>dd{padding:0 20px;}
#accordion.advice>dd>div{padding:30px 80px 30px 50px;}
#accordion.advice>dd>div.a{border-top:1px dashed #e5e5e5;}
#accordion.advice>dd>div.q:before,
#accordion.advice>dd>div.a:before{top:25px;}
#accordion span.ui-accordion-header-icon{position:absolute; right:15px; top:50%; width:13px; height:7px; margin-top:-4px; background-image:url(../img/icon_select_arrow_gray.png); background-size:20px 7px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
#accordion span.ui-icon-triangle-1-s{-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
#accordion span.type{position:absolute; left:50px; top:15px; line-height:28px; color:#555; font-weight:600; text-align:left; white-space:nowrap;}
#accordion span.date{position:absolute; right:80px; top:18px; color:#999; white-space:nowrap;}

/* container : diagnostic */
.diagnostic{position:relative; margin:10px; font-size:0;}
.diagnostic:after{content:''; clear: both; display: block;}
.diagnostic .step-sizer,
.diagnostic .step-item{width:49%;}
.diagnostic .gutter-sizer{width:2%;}
.diagnostic .step-item{float:left; position:relative; margin-bottom:20px; border-radius:10px; border:1px solid #ddd; background-color:#fff; overflow:hidden;}
.diagnostic .step-item.expand{height:772px; border:1px solid #bbb;}
.diagnostic .step-item:after{content:''; position:absolute; top:10px; right:20px; width:100px; height:80px; background-image:url(../img/gojls/icon_diagnostic.svg);}
.diagnostic .step-item:nth-child(1):after{background-position:0 0;}
.diagnostic .step-item:nth-child(2):after{background-position:-100px 0;}
.diagnostic .step-item:nth-child(3):after{background-position:-200px 0;}
.diagnostic .step-item:nth-child(4):after{background-position:-300px 0;}
.diagnostic .step-item .tit{padding:25px 20px; border-radius:10px; font-size:0;}
.diagnostic .step-item .tit h4{display:inline-block; color:#555; font-family:'NanumSquare'; font-size:27px; font-weight:400; letter-spacing:-1.5px; vertical-align:middle;}
.diagnostic .step-item .tit button{margin-left:10px;}
.diagnostic .step-item dl{clear:both; padding:0 20px 20px 20px;}
.diagnostic .step-item dl>dt{position:relative; margin-bottom:10px; color:#1278bc; font-weight:600;}
.diagnostic .step-item dl>dd{position:relative; padding:3px 15px; color:#777; font-size:13px;}
.diagnostic .step-item dl>dd:before{content:''; position:absolute; left:7px; top:9px; width:2px; height:2px; border-radius:100%; background-color:#777;}
.diagnostic .step-item .tip{border-top:1px solid #e5e5e5;}
.diagnostic .step-item .tip h5{position:relative; padding:16px 20px; color:#f0696e; font-family:'NanumSquare'; font-size:16.5px; font-weight:400; letter-spacing:-0.5px; text-indent:20px; vertical-align:middle; cursor:pointer;}
.diagnostic .step-item .tip h5:before{content:''; position:absolute; left:20px; top:17px; width:16px; height:16px; background-image:url(../img/gojls/bulb.svg); background-position:-16px 0; background-size:cover; background-color:#f0696e;}
.diagnostic .step-item .tip h5:after{content:''; position:absolute; right:20px; top:20px; width:13px; height:7px; background-image:url(../img/icon_select_arrow_gray.png); background-size:20px 7px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.diagnostic .step-item.expand .tit,
.diagnostic .step-item.expand dl{background-color:#fffeef;}
.diagnostic .step-item.expand .tip h5:after{-ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.diagnostic .step-item .tip .help_view{display:none; margin:0 20px; padding:20px 5px; border-top:1px dotted #ddd; color:#777; font-size:13px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.diagnostic .step-item.expand .tip .help_view{display:block;}
.diagnostic .step-item .tip .help_view h6{padding:10px 0; color:#333; font-family:'NanumSquare'; font-size:16.5px; font-weight:500; }
.diagnostic .step-item .tip .help_view p{padding:5px 0; font-size:13px;}
.diagnostic .step-item .tip .help_view .link{margin:20px 0; padding:10px 0; font-size:0; text-align:center; vertical-align:top;}
.diagnostic .step-item .tip .help_view .link>a{display:inline-block; margin:0 10px; padding:15px 10px; width:180px; height:160px; box-sizing:border-box; border:1px solid #e5e5e5; background-color:#fff; vertical-align:top;}
.diagnostic .step-item .tip .help_view .link>a:before{content:''; display:inline-block; width:80px; height:80px; background-image:url(../img/gojls/icon_diagnostic.svg);}
.diagnostic .step-item:nth-child(1) .link>a:nth-child(1):before{background-position:0 -80px;}
.diagnostic .step-item:nth-child(1) .link>a:nth-child(2):before{content:none;}
.diagnostic .step-item:nth-child(2) .link>a:before{background-position:-80px -80px;}
.diagnostic .step-item:nth-child(3) .link>a:before{background-position:-160px -80px;}
.diagnostic .step-item:nth-child(4) .link>a:nth-child(1):before{background-position:-240px -80px;}
.diagnostic .step-item:nth-child(4) .link>a:nth-child(2):before{background-position:-320px -80px;}
.diagnostic .step-item .tip .help_view .link>a:hover{border:1px solid #1278bc;}
.diagnostic .step-item .tip .help_view .link>a>p{margin-top:5px; font-weight:bold;}
.diagnostic .step-item .tip .help_view .etc{text-align:center;}
.diagnostic .step-item .tip .help_view .etc h6{color:#925927; font-weight:400;}

/* container : remote */
ul.remote{position:relative; margin:10px; font-size:0;}
ul.remote:after{content:''; clear:both; display:block;}
ul.remote>li{float:left; position:relative; margin-left:2%; padding:20px; width:31%; text-align:center; vertical-align:top;}
ul.remote>li h4{color:#333; font-family:'NanumSquare'; font-size:23px; font-weight:400;}
ul.remote>li h5{margin:10px 0; color:#555; font-family:'NanumSquare'; font-size:16.5px; font-weight:400;}
ul.remote>li h5>b{color:#f0696e; font-weight:500;}
ul.remote>li:after{content:''; position:absolute; top:50%; left:-20px; margin-top:-100px; width:20px; height:200px; background-image:url(../img/gojls/support_step_arrow.svg);}
ul.remote>li:first-child:after{content:none;}
ul.remote>li h4:after{content:''; display:block; margin:0 auto; width:80px; height:80px; background-image:url(../img/gojls/icon_diagnostic.svg);}
ul.remote>li:nth-child(1) h4:after{background-position:0 -160px;}
ul.remote>li:nth-child(2) h4:after{background-position:-80px -160px;}
ul.remote>li:nth-child(3) h4:after{background-position:-160px -160px;}

div.paper{margin:30px auto; padding:30px; width:700px; border-radius:10px; border:1px solid #ccc; background-color:#f3f9ff; box-shadow:2px 10px 20px rgba(0,0,0,0.1);}

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

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



}


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

/* support : faq */
html.mobile #wrap.customer .head .subimg>img{margin-right:-90px;}
html.mobile #container.faq .subtit p{padding:0; font-size:12px;}
html.mobile #container.faq ol.tnav{table-layout:auto;}
html.mobile #container.faq ol.menu.icon{display:table; table-layout:fixed; margin:0 0 10px 0;}
html.mobile ol.menu.icon>li{padding:0; min-width:auto;}
html.mobile ol.menu.icon>li>a{padding:0;}
html.mobile ol.menu.icon>li>a:before{width:24px; height:24px; background-size:144px 48px; opacity:0.3;}
html.mobile ol.menu.icon>li.all>a:before{background-position:0 0;}
html.mobile ol.menu.icon>li.entrance>a:before{background-position:-24px 0;}
html.mobile ol.menu.icon>li.course>a:before{background-position:-48px 0;}
html.mobile ol.menu.icon>li.online>a:before{background-position:-72px 0;}
html.mobile ol.menu.icon>li.pay>a:before{background-position:-96px 0;}
html.mobile ol.menu.icon>li.etc>a:before{background-position:-120px 0;}
html.mobile ol.menu.icon>li>a>span{font-size:11px;}
html.mobile .diagnostic_link{margin:0 10px 15px 0;}
html.mobile .diagnostic_link.selected{margin-bottom:0;}
html.mobile .diagnostic_link>a{padding:5px 10px 5px 9px; border:1px solid #e5e5e5; border-radius:5px; overflow:hidden;}
html.mobile .diagnostic_link.selected>a{border:2px solid #999; border-radius:5px 5px 0 0;}
html.mobile .diagnostic_link .icon{padding-top:8px; width:27px; height:27px; line-height:6px;}
html.mobile .diagnostic_link .icon:after{right:2px; bottom:3px;}
html.mobile .diagnostic_link .icon>h6,
html.mobile .diagnostic_link .icon>span{font-size:8px;}
html.mobile .diagnostic_link h5{font-size:14px;}
html.mobile #accordion{margin:0 5px;}
html.mobile #accordion>dd{padding-left:10px;}
html.mobile #accordion div.q,
html.mobile #accordion div.a{padding:14px 5px 14px 30px; font-size:12px; letter-spacing:-0.5px;}
html.mobile #accordion>dt div.q{padding:14px 40px 14px 80px;}
html.mobile #accordion div.a img{width: 100% !important;height: auto !important;}
html.mobile #accordion div.q:before, 
html.mobile #accordion div.a:before{left:3px; top:12px; padding:4px 0 1px 0; width:18px; font-size:12px; font-weight:bold;}
html.mobile #accordion span.type{left:23px; top:13px; line-height:18px; color:#aaa; font-size:11px;}
/* support : diagnostic */
html.mobile #container.faq .subtit.wide .copy h6.mark{display:none;}
html.mobile .diagnostic{margin-top:30px;}
html.mobile .diagnostic:before{content:'아래 테스트용 학습은 PC 환경에서 진행하셔야 합니다.'; position:absolute; top:-50px; left:0; right:0; padding:10px; border-radius:3px; background-color:#fffef1; font-size:13px; text-align:center;}
html.mobile .diagnostic .step-sizer,
html.mobile .diagnostic .step-item{width:100%;}
html.mobile .diagnostic .gutter-sizer{width:auto;}
html.mobile .diagnostic .step-item{margin-bottom:10px;}
html.mobile .diagnostic .step-item:after{top:5px; right:15px; width:75px; height:60px; background-size:300px 180px;}
html.mobile .diagnostic .step-item:nth-child(2):after{background-position:-75px 0;}
html.mobile .diagnostic .step-item:nth-child(3):after{background-position:-150px 0;}
html.mobile .diagnostic .step-item:nth-child(4):after{background-position:-225px 0;}
html.mobile .diagnostic .step-item .tit{padding:15px;}
html.mobile .diagnostic .step-item .tit h4{font-size:24px;}
html.mobile .diagnostic .step-item .tit button{display:none;}
html.mobile .diagnostic .step-item .tip{display:none;}
html.mobile .diagnostic .step-item dl{padding:0 15px 15px 15px;}
html.mobile .diagnostic .step-item dl>dt{margin-bottom:5px;}
html.mobile .diagnostic .step-item dl>dd{padding:2px 10px; font-size:12px;}
html.mobile .diagnostic .step-item dl>dd:before{left:2px; top:7px;}
/* support : advice */
html.mobile #accordion.advice>dt{padding:35px 30px 12px 5px; font-size:13px;}
html.mobile #accordion.advice>dt:before{left:5px; top:11px; padding:3px 5px 2px 5px; line-height:normal; font-size:11px;}
html.mobile #accordion span.date{top:13px; left:62px; right:auto;}
/* support : remote */
html.mobile ul.remote{margin-top:30px;}
html.mobile ul.remote>li{float:none; margin:0; padding:0; width:auto;}
html.mobile ul.remote>li:before{content:''; position:absolute; left:0; right:0; top:0; bottom:20px; border:1px solid #eee; border-bottom:0;}
html.mobile ul.remote>li:after{content:''; left:0; right:0; top:auto; bottom:0; margin:0; width:auto; height:20px; background-image:url(../img/gojls/support_step_arrow_v.svg); background-size:100% 100%; background-repeat:no-repeat;}
html.mobile ul.remote>li h4{position:absolute; left:30px; top:12px; font-size:13px; letter-spacing:-0.5px;}
html.mobile ul.remote>li h4:after{width:40px; height:30px; background-size:200px 120px;}
html.mobile ul.remote>li:nth-child(1) h4:after{background-position:0 -85px;}
html.mobile ul.remote>li:nth-child(2) h4:after{background-position:-40px -85px;}
html.mobile ul.remote>li:nth-child(3) h4:after{background-position:-80px -85px;}
html.mobile ul.remote>li h5{padding:15px 0 35px 90px; text-align:left; font-size:15px; letter-spacing:-0.5px;}
html.mobile #container.faq div.paper{margin:20px 10px; padding:0; width:auto; border:0; box-shadow:none;}
html.mobile #container.faq div.paper .subtit,
html.mobile #container.faq div.paper .btn button{display:none;}
html.mobile #container.faq div.paper .btn:after{content:'원격지원 서비스는 PC 환경에서 신청하실 수 있습니다.'; font-size:13px;}