/* ============================================================================================================== = v1.0 - 20190411 ============================================================================================================== */ @charset "utf-8"; /* ======================================== Reset ======================================== */ *{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(255,255,255,0);} html,body{width:100%;min-height:100%;-webkit-font-smoothing:antialiased;box-sizing:border-box;} body,p,h1,h2,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,pre{margin:0;padding:0;} body{overflow-x: hidden; font-size:14px;font-weight:300;color:#1b1b1b;font-family:'Noto Sans KR', sans-serif !important;} input,textarea,select,button,table,pre{} ul,ol,li{display:block;list-style:none;} img{border:0px none;} img,input,button,label,select{vertical-align:middle;} input[type='text'],input[type='password'],input[type='number']{text-indent:5px;} input[type='submit'],input[type='button'],button{cursor:pointer;} i,em,address{font-style:normal;} a{text-decoration:none;color:#111;} a:hover{text-decoration:none;} table{border-spacing:0;table-layout:fixed;} article,aside,hgroup,header,footer,figure,figcaption,nav,section{display:block;} .clear{display:block;height:0px;font-size:0px;font-size:0em;line-height:0px;content:'';overflow:hidden;clear:both;} .inner{display:block;position:relative;margin:0 auto;width:1200px;box-sizing:border-box;} .inner:after{display:block;content:'';clear:both;} caption, .soundOnly{display:none;} .alignCenter{text-align:center;} .alignLeft{text-align:left;} .alignRight{text-align:right;} fieldset{border:none} .hidden{position:absolute; width:0; height:0; font-size:0; line-height:0; visibility:hidden;} .blind,legend{display:block; overflow:hidden; position:absolute; top:-1000em;left:0} legend {display:none;position:absolute;visibility:hidden;} /* ============================================================================================================== = 너비, 높이 사이즈를 공통으로 사용하기 위한 클래스 부여 ============================================================================================================== */ .w10{width:10px}.w20{width:20px}.w30{width:30px}.w40{width:40px}.w50{width:50px}.w60{width:60px}.w70{width:70px}.w80{width:80px}.w90{width:90px}.w100{width:100px}.w110{width:110px}.w120{width:120px}.w130{width:130px}.w140{width:140px}.w150{width:150px}.w160{width:160px}.w170{width:170px}.w180{width:180px}.w190{width:190px}.w200{width:200px}.w210{width:210px}.w220{width:220px}.w230{width:230px}.w240{width:240px}.w250{width:250px}.w260{width:260px}.w270{width:270px}.w280{width:280px}.w290{width:290px}.w300{width:300px}.w310{width:310px}.w320{width:320px}.w330{width:330px}.w340{width:340px}.w350{width:350px}.w360{width:360px}.w370{width:370px}.w380{width:380px}.w390{width:390px}.w400{width:400px}.w410{width:410px}.w420{width:420px}.w430{width:430px}.w440{width:440px}.w450{width:450px}.w460{width:460px}.w470{width:470px}.w480{width:480px}.w490{width:490px}.w500{width:500px}.w510{width:510px}.w520{width:520px}.w530{width:530px}.w540{width:540px}.w550{width:550px}.w560{width:560px}.w570{width:570px}.w580{width:580px}.w590{width:590px}.w600{width:600px}.w610{width:610px}.w620{width:620px}.w630{width:630px}.w640{width:640px}.w650{width:650px}.w660{width:660px}.w670{width:670px}.w680{width:680px}.w690{width:690px}.w700{width:700px} .w15{width:15px}.w25{width:25px}.w35{width:35px}.w45{width:45px}.w55{width:55px}.w65{width:65px}.w75{width:75px}.w85{width:85px}.w90{width:95px} .w5p{width:5%}.w8p{width:8%}.w10p{width:10%}.w12p{width:12%}.w15p{width:15%}.w18p{width:18%}.w20p{width:20%}.w25p{width:25%}.w30p{width:30%}.w35p{width:35%}.w40p{width:40%}.w45p{width:45%}.w48p{width:48%}.w49p{width:49%}.w50p{width:50%}.w55p{width:55%}.w60p{width:60%}.w65p{width:65%}.w70p{width:70%}.w75p{width:75%}.w80p{width:80%}.w85p{width:85%}.w90p{width:90%}.w95p{width:95%}.w100p{width:99.9%} .h10{height:10px}.h20{height:20px}.h20{height:30px}.h30{height:40px}.h40{height:50px}.h60{height:60px}.h70{height:70px}.h80{height:80px}.h90{height:90px}.h100{height:100px}.h110{height:110px}.h120{height:120px}.h130{height:130px}.h140{height:140px}.h150{height:150px}.h160{height:160px}.h170{height:170px}.h180{height:180px}.h190{height:190px}.h200{height:200px}.h210{height:210px}.h220{height:220px}.h230{height:230px}.h240{height:240px}.h250{height:250px}.h260{height:260px}.h270{height:270px}.h280{height:280px}.h290{height:290px}.h200{height:300px}.h210{height:310px}.h220{height:320px}.h230{height:330px}.h240{height:340px}.h250{height:350px}.h260{height:360px}.h270{height:370px}.h280{height:380px}.h290{height:390px}.h300{height:400px}.h310{height:410px}.h320{height:420px}.h330{height:430px}.h340{height:440px}.h350{height:450px}.h360{height:460px}.h370{height:470px}.h380{height:480px}.h390{height:490px}.h400{height:500px}.h410{height:510px}.h420{height:520px}.h430{height:530px}.h440{height:540px}.h450{height:550px}.h460{height:560px}.h470{height:570px}.h480{height:580px}.h490{height:590px}.h600{height:600px}.h610{height:610px}.h620{height:620px}.h630{height:630px}.h640{height:640px}.h650{height:650px}.h660{height:660px}.h670{height:670px}.h680{height:680px}.h690{height:690px}.h700{height:700px} /* ============================================================================================================== = Div Group = 화면 분할을 위해서 사용함 = 사용방법 : cols2(개수) 클래스를 통해서 개수만큼 균등분할하거나 w20(%)p 클래스를 통해서 분할 사이즈 조정 ============================================================================================================== */ .divGroup{margin:0 -10px;} .divGroup:after{display:block;content:'';clear:both;} .divGroup > div{float:left;padding:0 10px;box-sizing:border-box;} .divGroup.cols2 > div{width:50%;} .divGroup.cols3 > div{width:33.3333%;} .divGroup.cols4 > div{width:25%;} .divGroup.cols5 > div{width:20%;} .divGroup.noMargin{margin:0;} .divGroup.noMargin > div{padding:0;} .divGroup > div.left{float:left;text-align:left;} .divGroup > div.right{float:right;text-align:right;} /* ============================================================================================================== = 폼 아이템별 기본스타일 지정 ============================================================================================================== */ input[type='text'],input[type='password'],input[type='number'],select{display:inline-block;height:36px;max-width:100%;border:1px #ddd solid;box-sizing:border-box;color:#333;background:#fff;padding:0 6px} select.useStyle{padding-right:20px;background:#fff url("../images/injeinc/bg_selectBox.png") no-repeat right center;-webkit-appearance:none;} textarea{padding:10px;border:1px #ddd solid;box-sizing:border-box;resize:vertical;color:#333;} *:disabled,*:readonly{color:#777 !important;background:#eee !important;} input[type='checkbox'],input[type='radio']{margin-right:5px;} .inputBtn{display:inline-block;position:relative;margin-right:5px;padding-right:53px;box-sizing:border-box;vertical-align:middle;} .inputBtn > *{vertical-align:top;} .inputBtn .btn_inline{position:absolute;top:0;right:0;width:50px;text-align:center;} .radioGroup{display:inline-block;position:relative;margin-left:8px;height:36px;border:1px #e1e1e1 solid;border-right:0px none;vertical-align:middle;box-sizing:border-box;overflow:hidden;} .radioGroup input[type='radio']{position:absolute;top:-9999px;} .radioGroup label{display:block;float:left;padding:0 5px;min-width:38px;height:36px;color:#333;line-height:34px;text-align:center;background:#fff;border-right:1px #e1e1e1 solid;cursor:pointer;box-sizing:border-box;} .radioGroup.cols2 label{width:50%;} .radioGroup input:checked + label{color:#fff;background:#134c97;} .tableBox{margin-bottom:20px;} .tableBox.scrolled{overflow-y:auto;border:1px #e5e5e5 solid;border-top:1px #e5e5e5 solid;} .tableBox.scrolled table{margin:0 -1px;} .tableBox table{width:100%;font-size:16px;border-top:1px #e5e5e5 solid;} .tableBox table table{width:auto;table-layout:auto;} .tableBox table .tableBox{margin-bottom:0;} .tableBox table th, .tableBox table td{font-size:16px;/*border-bottom:1px #e5e5e5 solid;*/box-sizing:border-box;} .tableBox table th{} .tableBox table.list{text-align:center;} .tableBox table.list th{padding:10px;} .tableBox table.list td{padding:15px 10px;} .tableBox table.list.hover tbody tr{cursor:pointer;} .tableBox table.list.hover tbody tr:hover{background:#f5f5f5;} .tableBox table.list .subject{display:block;text-align:left;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .tableBox table.list .subject.lock{padding-left:25px;background:url("../images/common/icon_lock.png") no-repeat left center;} .tableBox table.list .subject.reply:before{display:inline-block;content:'RE:';clear:both;padding-left:45px;color:#144b95;} .tableBox table.form th, .tableBox table.form td{padding:10px 25px;height:30px;text-align:left;} .tableBox table.form th{color:#000;} .tableBox table.form td *{max-width:100%;} .tableBox table.form td.textContent{height:200px;line-height:160%;vertical-align:top;} .tableBox table.form td.onlyCheck{line-height:200%;} .tableBox table.form td.onlyText{line-height:160%;} .tableBox table.form input[type='text']::placeholder, .tableBox table.form input[type='password']::placeholder, .tableBox table.form textarea::placeholder{font-size:16px;color:#b7b7b7;} .tableBox table.form .text_file{position:absolute;left:-9999px;width:0;} .tableBox table.form .btn_file{display:inline-block;padding-left:40px;color:#fff;background:#000 url("../images/common/icon_upload.png") no-repeat 10px center;} .tableBox table.view th, .tableBox table.view td{padding:15px 35px;line-height:160%;color:#1b1b1b;} .tableBox table.view td.textContent{padding:65px 35px;line-height:160%;vertical-align:top;} .tableBox table.view td *{max-width:100%;} .tableBox table.view .subject{display:block;text-align:left;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .tableBox table.view .linkPrev{background:url("../images/common/icon_lecture_up.png") no-repeat 80% center;} .tableBox table.view .linkNext{background:url("../images/common/icon_lecture_down.png") no-repeat 80% center;} .tableBox table.view .bg_gray{background-color:#ebebeb;} .iconLock{padding-left:16px;background:url("../images/common/icon_lock.png") no-repeat left center;background-size:12px} .tableBox table.view .iconFile{display:inline-block;padding-right:20px;background:url("../images/common/icon_file.png") no-repeat right center;} .tableBox table.reply{border:0;} .tableBox table.reply th, .tableBox table.reply td{padding:0 5px 60px;border:0;} .tableBox table.reply textarea, .tableBox table.reply input[type='submit']{width:100%;height:90px;vertical-align:top;} .tableBox table .captionText{display:inline-block;margin-top:8px;margin-left:5px;color:#666;} .tableBox table .requiredText{display:inline-block;margin-top:8px;color:#de2c2c;font-size:11px;} .tableBox table .multiLine{padding:5px 25px;line-height:40px;} .tableBox table .timerWrap{display:inline-block;position:relative;vertical-align:middle;} .tableBox table .timerWrap input + .timer{position:absolute;top:0;bottom:0;right:0;width:50px;text-align:center;color:#de2c2c;line-height:30px;} .searchArea{padding:40px 20px 12px;} .searchArea:after{display:block;content:'';clear:both;} .searchArea > li{font-size:16px;} .searchArea > li.left{float:left;width:60%;} .searchArea .right.writeWrap{width:inherit !important;} .searchArea > li.right{float:right;width:40%;text-align:right;} .searchArea select{width:120px;font-size:13px;font-weight:600} .searchArea input[type='text']{width:240px;font-size:13px;padding:0 6px} .searchArea input[type='submit']{width:140px;} /* ============================================================================================================== = Paging 기본스타일 지정 ============================================================================================================== */ .paging{margin:20px 0;min-height:20px;font-size:0;text-align:center;} .paging > a{display:inline-block;padding:2px 13px;font-size:14px;text-align:center;color:#777;border:none;box-sizing:border-box;} .paging > a.active{color:#000;font-weight:bold;font-size:15px;} /*.paging > a.btn_first{background:url(../../images/common/btn_pageFirst.png) no-repeat center center;text-indent:-9999px;}*/ .paging > a.btn_prev{background:url(../images/common/btn_slidePrev.png) no-repeat center center;width:27px;height:27px;text-indent:-9999px;margin-right:10px;} .paging > a.btn_next{background:url(../images/common/btn_slideNext.png) no-repeat center center;width:27px;height:27px;text-indent:-9999px;margin-left:10px;} /*.paging > a.btn_last{background:url(../../images/common/btn_pageLast.png) no-repeat center center;text-indent:-9999px;}*/ .paging > select{margin-left:5px;height:20px;line-height:18px;font-size:11px;color:#1b1b1b;vertical-align:top;border:1px solid #ebebeb} /* ============================================================================================================== = Tab 기본스타일 지정 ============================================================================================================== */ .tabBar{height:39px;margin-bottom:20px;border-bottom:1px solid #666;} .tabBar:after{display:block;content:"";clear:both;} .tabBar > li{position:relative;float:left;margin-right:-1px;z-index:1;} .tabBar.w2 > li {display: inline-block; float: none;} .tabBar > li > a{display:block;height:38px;line-height:38px;padding:0 25px;color:#777;border:1px solid #ddd;border-bottom:1px solid #666;background-color:#fff;} .tabBar > li.active{z-index:2;} .tabBar > li.active > a{color:#111;font-weight:bold;/*border-bottom:1px solid #fff;*/} .tabPage{display:none;} .tabPage.active{display:block;} /* ============================================================================================================== = Button 기본스타일 지정 = 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l ============================================================================================================== */ .btnArea{margin:20px 0;text-align:center;} .btnArea.right{text-align:right;} .btnArea.right.mb0{margin-bottom:0;} .btnArea.left{text-align:left;} .btn_ss, .btn_s, .btn_m, .btn_l, .btn_inline{display:inline-block;/*font-weight:bold;*/color:#000;text-align:center;background-color:#fff;border:1px #000 solid;vertical-align:middle;box-sizing:border-box;} .btn_ss.on, .btn_s.on, .btn_m.on, .btn_l.on, .btn_inline.on{color:#fff;background-color:#434343;border:none;font-weight: 800;font-size:13px;margin-left:-4px} .btn_ss{padding:0 6px;height:18px;font-size:11px;line-height:16px;/*border-radius:3px;*/} .btn_s{padding:0 8px;height:24px;font-size:12px;line-height:22px;/*border-radius:4px;*/} .btn_m{padding:0 20px;height:36px;font-size:13px;line-height:32px;/*border-radius:5px;*/} .btn_l{padding:0 28px;height:45px;font-size:15px;line-height:43px;/*border-radius:7px;*/} .btn_inline{padding:0 10px;height:30px;font-size:12px;line-height:28px;/*border-radius:5px;*/} .btn_ss.onBlue, .btn_s.onBlue, .btn_m.onBlue, .btn_l.onBlue, .btn_inline.onBlue{color:#fff;background-color:#144b95;border:1px #144b95 solid;} input + .btn_inline{margin-left:5px;} /* 목록 */ .listBtn{display:block;border:1px solid #aaa;padding:6px 16px 6px 34px;border-radius:5px;position:relative;font-size:12px;} .listBtn:before{content:'';display:block;width:12px;height:15px;background:url('../images/common/list_icon.png') no-repeat;position:absolute;top:50%;left:16px;margin-top:-7px;} /* 수정 */ .updateBtn{display:inline-block;border:1px solid #8bd899;color:#007b0e;padding:6px 20px;border-radius:5px;font-size:12px;} /* 삭제 */ .delBtn{display:inline-block;border:1px solid #e2b3b3;color:#f60f1e;padding:6px 20px;border-radius:5px;font-size:12px} /* 글쓰기 */ .writeBtn{display:block;border:1px solid #000;padding:7px 22px 7px 46px;border-radius:5px;position:relative;font-size:14px;box-sizing:border-box} .writeBtn:before{content:'';display:block;width:14px;height:14px;background:url('../images/common/write_icon.png') no-repeat;position:absolute;top:50%;left:23px;margin-top:-7px;background-size:14px;} /* 등록 수정 확인 or 취소 */ .regiBtn{display:inline-block;padding:10px 44px;background:#174aca;color:#fff;font-weight:bold;font-size:14px;border-radius:50px} .cancelBtn{display:inline-block;padding:10px 44px;background:#eee;color:#444;font-weight:bold;font-size:14px;border-radius:50px;margin-right:4px;} /* ============================================================================================================== = Modal 기본스타일 지정 = 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l ============================================================================================================== */ .modalWrap{position:absolute;top:150px;left:50%;margin-left:-350px;width:700px;background:#fff;display:none;transition-duration:0.5s;} .modalWrap.active{top:110px;display:block;z-index:99;} .modalWrap.small{margin-left:-250px;width:500px;} .modalWrap.wide{margin-left:-450px;width:900px;} .modalWrap .modalTitle{position:relative;padding:0 65px 0 20px;height:46px;background:#484c51;} .modalWrap .modalTitle h2{display:block;font-size:16px;font-weight:bold;color:#fff;line-height:46px;} .modalWrap .modalTitle .btn_modalClose{display:block;position:absolute;top:8px;right:0;width:46px;height:46px;text-indent:-9999em;background:url("../images/ex/pop_close.png") no-repeat center center;} .modalWrap .modalContent{padding:20px;} .modalWrap .modalContent .btnArea{margin:0;} .modalWrap .modalContent .btnArea + *{margin-top:20px;} /* ============================================================================================================== = Slider 기본스타일 지정 ============================================================================================================== */ .bx-wrapper{position:relative;} .bx-wrapper .bx-viewport img{width:100%;} .bx-wrapper .bx-controls .bx-pager > div{display:inline-block;} .bx-wrapper .bx-controls{} .bx-wrapper .bx-pager{position:absolute;bottom:30px;left:0;right:0;text-align:center;} .bx-wrapper .bx-pager-item a{display:inline-block;margin:0 5px;width:8px;height:8px;background:none;border:1px #111 solid;text-indent:-9999em;border-radius:50%;} .bx-wrapper .bx-pager-item a.active{background:#111;} .bx-wrapper .bx-controls-direction a, .bx-wrapper .bx-controls-auto-item a{display:inline-block;} .slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;} .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;} .slick-list:focus{outline:none;} .slick-list.dragging{cursor:pointer;} .slick-slider .slick-track, .slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);} .slick-track{position:relative;top:0;left:0;display:block;} .slick-track:before,.slick-track:after{display:table;content:'';} .slick-track:after{clear:both;} .slick-loading .slick-track{visibility:hidden;} .slick-slide{display:none;float:left;height:100%;min-height:1px;box-sizing:border-box;} .slick-slide img{display:block;width:120px;height:auto;margin:0 auto;} .slick-slide.slick-loading img{display:none;} .slick-initialized .slick-slide{display:block;} .slick-loading .slick-slide{visibility:hidden;} .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;} .slick-arrow.slick-hidden{display:none;} .slick-prev{position:absolute;top:50%;left:0;margin-top:-25px;width:50px;height:50px;text-indent:-9999px;background:#fff;z-index:1;} .slick-next{position:absolute;top:50%;right:0;margin-top:-25px;width:50px;height:50px;text-indent:-9999px;background:#fff;z-index:1;} .slick-dots{display:block;position:absolute;bottom:10px;left:0;right:0;text-align:center;} .slick-dots li{display:inline-block;} .slick-dots li button{display:inline-block;margin:0 5px;width:15px;height:15px;background:none;border:1px #111 solid;text-indent:-9999em;border-radius:50%;} .slick-dots li.slick-active button{background:#111;} .gnb_area .slick-prev{display:block!important; width: 12px; height: 40px; background: url(/common/zian/images/common/btn_slidePrev.png) no-repeat center center; border: 0; outline: 0; margin-top: -21px} .gnb_area .slick-next{display:block!important; width: 12px; height: 40px; background: url(/common/zian/images/common/btn_slideNext.png) no-repeat center center; border: 0; outline: 0; margin-top: -21px} .gnb_area .slick-prev.slick-disabled{opacity: 0} .gnb_area .slick-next.slick-disabled{opacity: 0} /* ============================================================================================================== = Overlay 효과 배경 기본스타일 지정 ============================================================================================================== */ #overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:98;} /* ============================================================================================================== = Ajax 링크박스 ============================================================================================================== */ .ajaxLinkBox{display:none;} .ajaxLinkBox.active{display:block;} /*넥슨타이어 폰트*/ @font-face { font-family: 'nexen'; src: url('./fonts/NexenTireBold/NEXEN_TIRE_Bold.ttf') format('truetype'); } .nexen {font-family: 'nexen';} /************** 공통 *****************/ #wrap{position:relative; overflow-x: hidden;} #skipLink a {display:block;position:fixed;top:-9999px;left:0;right:0;height:30px;font-size:14px;color:#fff;line-height:30px;text-align:center;background:#134c97;z-index:9999;} #skipLink a:focus, #skipLink a:hover, #skipLink a:focus, #skipLink a:active{top:0;} .inner{width:1000px;} .noMargin{margin:0 !important;} .disnonepc{display:none !important;} #header > .inner h1.disnonepc{display:none} /* width */ .w-100 {width: 100%;} .mw660 {max-width: 660px;} .w-33{width: 33.3333% !important;} .w-50 {width: 50%;} .w-87px {width: 87px;} /* height */ .h100 {height: 100%;} /* display */ .d-in {display: inline-block;} .d-b {display: block;} .d-n {display: none;} /* display flex*/ .d-flex {display: flex;} .d-al-c {align-items: center;} .d-al-fe {align-items: flex-end;} .d-al-fs {align-items: flex-start;} .d-ju-sa {justify-content: space-around;} .d-ju-sb {justify-content: space-between;} .d-ju-fs {justify-content: flex-start;} .d-ju-fe {justify-content: flex-end;} .d-ju-c {justify-content: center;} .f-wrap {flex-wrap: wrap;} /* text */ .tc {text-align: center;} .tl {text-align: left;} .tr {text-align: right;} /* float */ .fr {float: right;} /* font-size */ .f10i {font-size: 10px;} .f11 {font-size: 11px;} .f12{font-size: 12px;} .f12i{font-size: 12px !important;} .f13 {font-size: 13px;} .f14 {font-size: 14px;} .f15{font-size: 15px;} .f16 {font-size: 16px;} .f18 {font-size: 18px;} .f20 {font-size: 20px;} .f22i {font-size: 22px;} .f24{font-size: 24px;} .f26i {font-size: 26px;} .f30 {font-size: 30px;} .f32i {font-size: 32px;} .f36 {font-size: 36px;} .f38{font-size: 38px;} .f40 {font-size: 40px;} .f40i {font-size: 40px !important;} /* bold */ .b300 {font-weight: 300;} .b400 {font-weight: 400;} .b500 {font-weight: 500;} .b600 {font-weight: 600;} .b700 {font-weight: 700;} /* color */ .c3 {color: #333;} .c5 {color: #555 !important;} .c6 {color: #666;} .c9 {color: #999;} .cc{color: #ccc;} .cf{color: #fff;} .co{color: #F67D10;} .cd{color: #D1CEC4;} /* margin-top */ .mgt5{margin-top: 5px;} .mgt10 {margin-top: 10px;} .mgt12 {margin-top: 12px;} .mgt20 {margin-top: 20px;} .mgt30 {margin-top: 30px;} .mgt40 {margin-top: 40px;} .mgt50 {margin-top: 50px;} .mgt60 {margin-top: 60px;} .main_mgt60 {margin-top: 60px;} .mgt70{margin-top: 70px;} .mgt80{margin-top: 80px;} .mgt90{margin-top: 90px;} .mgt100{margin-top: 100px;} .mgt110{margin-top: 110px;} .mgt120{margin-top: 120px;} .mgt124{margin-top: 124px;} /* margin-bottom */ .mgb0 {margin-bottom: 0 !important;} .mgb5 {margin-bottom: 5px !important;} .mgb10{margin-bottom: 10px;} .mgb16{margin-bottom: 16px;} .mgb20{margin-bottom: 20px;} .mgb30{margin-bottom: 30px;} .mgb40{margin-bottom: 40px;} .mgb50{margin-bottom: 50px;} .mgb60{margin-bottom: 60px;} .mgb70{margin-bottom: 70px;} .mgb80{margin-bottom: 80px;} .mgb90{margin-bottom: 90px;} .mgb100{margin-bottom: 100px;} .mgb110{margin-bottom: 110px;} .mgb120{margin-bottom: 120px;} /* margin-right */ .mgr6 {margin-right: 6px;} .mgr8{margin-right: 8px;} .mgr10 {margin-right: 10px;} .mgr20 {margin-right: 20px;} .mgr25 {margin-right: 25px;} /* padding-left */ .pl10 {padding-left: 10px !important;} /* padding-right */ .pr10{padding-right: 10px !important;} /* padding-top */ .pt10{padding-top: 10px !important;} .pt20{padding-top: 20px;} /* padding-bottom */ .pb10 {padding-bottom: 10px !important;} /* vertical-align */ .vt {vertical-align: top;} .p-scroll{ padding-top: 60px; height: 0; } /* 강의 목록 공통 */ .img_common {width: auto; height: auto!important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100% !important; /*max-height: 100% !important;*/} .area-good .img-box.box_common { border-radius: 0 !important; overflow: hidden;/* padding-top: 62%;*/ /*padding-top: 76%;*/ padding-top: 74%; height: 0;} /* 레이아웃 */ #aside{position:absolute;top:80px;bottom:0;left:0;width:150px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,0.2);transition-duration:0.4s;z-index:90;} /*#aside #siteTab{height:160px;text-align:center;box-shadow:0px 8px 16px rgba(0,0,0,.2)}*/ #aside #siteTab a{display:block;margin:0 20px;padding:20px 0;font-size:15px;color:#fff;line-height:20px;} #aside #siteTab h1{display:block;margin:0 20px;border-bottom:1px #fff solid;} #aside #siteTab h1 a{display:block;margin:0;padding:20px 0;font-size:26px;color:#fff;line-height:30px;} #aside #siteNav{} #aside #siteNav ul{display:block;} #aside #siteNav ul li{display:block;} #aside #siteNav ul li a{display:block;position:relative;padding:20px 0;font-size:15px;color:#252525;line-height:20px;text-align:center;} #aside #siteNav ul li.item1.active a{font-weight:bold;color:#134c97;} #aside #siteNav ul li.item2.active a{font-weight:bold;color:#f69321;} #aside #siteNav ul li.item3.active a{font-weight:bold;color:#ce1717;} #aside #siteNav ul li.item4.active a{font-weight:bold;color:#f69321;} #aside #siteNav ul li.item5.active a{font-weight:bold;color:#f69321;} #aside #siteNav ul li.active a:after{display:block;content:'';position:absolute;top:50%;left:0;margin-top:-10px;height:20px;border-left:4px #134c97 solid;} #aside #quickNav{} #aside #quickNav b{display:block;height:30px;font-size:11px;color:#1b1b1b;line-height:30px;text-align:center;background:#f2f2f2;border-bottom:1px #e2e2e2 solid;} #aside #quickNav ul{display:block;} #aside #quickNav ul li{display:block;background:#f2f2f2;border-bottom:1px #e2e2e2 solid;} #aside #quickNav ul li.noBg{background:none;} #aside #quickNav ul li a{display:block;position:relative;padding-left:56px;height:70px;font-size:12px;color:#252525;line-height:70px;} #aside #quickNav ul li a .icon{display:block;position:absolute;top:50%;left:15px;margin-top:-16px;width:32px;height:32px;background-repeat:no-repeat;background-position:center;} #aside #quickNav ul li a .icon.item1{background-image:url(../images/common/icon_lnb1.png);} #aside #quickNav ul li a .icon.item2{background-image:url(../images/common/icon_lnb2.png);} #aside #quickNav ul li a .icon.item3{background-image:url(../images/common/icon_lnb3.png);} #aside #quickNav ul li a .icon.item4{background-image:url(../images/common/icon_lnb4.png);} #aside #quickNav ul li a .icon.item5{background-image:url(../images/common/icon_lnb5.png);} #aside #quickNav ul li a .icon.item6{background-image:url(../images/common/icon_lnb6.png);} #aside #quickNav ul li a .icon.item7{background-image:url(../images/common/icon_lnb7.png);} #aside #quickNav ul li a .icon.item8{background-image:url(../images/common/icon_lnb8.png);} #aside #quickNav ul li a .icon em{display:block;position:absolute;top:-4px;right:-8px;width:18px;height:18px;font-size:11px;color:#fff;line-height:18px;text-align:center;background:#ff0000;border-radius:50%;} #aside #examBanner{position:relative;border-bottom:1px #e2e2e2 solid;} #aside #examBanner li{display:block;padding-top:12px;height:140px;font-size:12px;line-height:160%;text-align:center;box-sizing:border-box;} #aside #examBanner li span{display:block;padding:0 35px;} #aside #examBanner li b{display:block;margin-top:10px;font-size:18px;} #aside #examBanner li a{display:block;margin:10px auto 0;width:100px;height:32px;font-size:13px;line-height:32px;text-align:center;border:1px #e2e2e2 solid;} #aside #examBanner .bx-pager, #aside #examBanner .bx-controls-auto{display:none;} #aside #examBanner .bx-wrapper .bx-controls{position:static;} #aside #examBanner .bx-prev{display:block;position:absolute;top:50%;left:0;margin-top:-34px;width:22px;height:28px;text-indent:-9999em;background:url(../images/common/btn_slidePrev.png) no-repeat center center;} #aside #examBanner .bx-next{display:block;position:absolute;top:50%;right:0;margin-top:-34px;width:22px;height:28px;text-indent:-9999em;background:url(../images/common/btn_slideNext.png) no-repeat center center;} #aside #examBanner .bx-wrapper .bx-controls-direction{display:block;} #aside #snsLink{padding-top:14px;} #aside #snsLink b{display:block;margin-bottom:5px;font-size:13px;font-weight:normal;text-align:center;} #aside #snsLink ul{display:block; display: flex; padding: 0 14px; width: 132px; align-items: center; justify-content: space-between;} #aside #snsLink ul:after{display:block;content:'';clear:both;} #aside #snsLink ul li{display:block;margin-top:10px;} #aside #btn_asideToggle{display:block;position:absolute;top:0px;right:-30px;width:30px;height:30px;/*background:url(../images/common/close.png) no-repeat;*/ color: #fff; font-size: 16px; background-color: #0b438a; border-radius: 0px 3px 3px 0px; text-align: center;} #aside #btn_asideToggle > i {margin-top: 7px;} #aside #btn_asideToggle .active_open {display: none;} #aside.active{left:-210px;} #aside.active #btn_asideToggle > .xi-close-min{display: none;} #aside.active #btn_asideToggle{right:-70px;width:80px;height:37px; top: -6px;} #aside.active #btn_asideToggle .active_open {font-size: 14px; margin: 11px 0 5px 11px; display: block;} #aside.active #btn_asideToggle:hover .active_open {font-weight: bold;} /* new */ #aside{width:210px;} #aside .sidelogo{padding:40px 14px;} #aside .sidelogo h1 p{font-size: 20px; letter-spacing: -.6px; color: #333; font-weight: normal; margin-bottom: 10px;} #aside .sidelogo h1 a{display:block;width:94px;} #aside .sidelogo h1 a img{display:block;width:100%;} #aside .leftGnb li{width:100%;height:48px;padding-left:12px;box-sizing:border-box;margin-top:12px;} #aside .leftGnb li:last-child{margin-bottom:12px;} #aside .leftGnb li a{font-size:14px;font-weight:400;color:#7b7b7b;line-height:48px;} #aside .leftGnb li.active{display:block;height:62px;background:#172a99;box-shadow:0px 8px 16px rgba(0,0,0,.2);position:relative;z-index:10;color:white;margin-top:0;} #aside .leftGnb li.active a{display:block;height:100%;color:white;line-height:62px;font-size:16px;font-weight:bold} #aside .serviceNav{background:#fff;width:100%;padding:0 0 12px 0;box-sizing:border-box} .serviceNav .left_tit{padding:10px 14px; color: #fff; background-color: #0B438A; position: relative;} .nav-area > div.on {color: #333; background-color: #f7f7f7; border-top: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;} .serviceNav .left_tit i {position: absolute; right: 15px; top: 30%; transform: rotate(-180deg);} .nav-area > div.on i {transform: rotate(0deg);} .serviceNav .left_tit.active{background-color: #0B438A; color: #fff;} .nav-area > ul {display: block;} #aside .serviceNav ul li{width:100%;height:40px;line-height: 40px;box-sizing:border-box;padding-left:14px; border-bottom: 1px solid #e3e3e3;} #aside .serviceNav ul li.bo-none , #aside .serviceNav .bot-none {border-bottom: none;} #aside .serviceNav ul li a{display:block;font-size:13px;font-weight:300;color:#666; letter-spacing: -.39px;} #aside .serviceNav ul li:hover a {font-weight: 400; color: #333;} #aside .serviceNav ul li a span{padding:0 4px;background:red;color:white;text-align:center;border-radius:40px} #aside .serviceNav ul li a img{display:inline-block;width:20px;height:20px;margin-right:6px} #aside .serviceNav ul li a p{display:inline-block;} #aside .serviceNav ul li:first-child{;margin-top:0;} #aside #examBanner{} #aside #examBanner img{display:block;width:36px;height:34px;margin:auto;margin-top:18px} #aside #examBanner ul{margin-top: -12px} #aside #examBanner li b{font-size:24px;color:#3a4a54;font-weight:bold;margin-bottom:8px;} #aside #examBanner li span{line-height:16px;font-size:14px;font-weight:300;} #header > .inner.visi {overflow: visible;} #header > .inner{position:relative;height:inherit;/*overflow:hidden;*/} #header > .inner h1{display:block;float:left;margin:18px 10px 0 60px;line-height:initial;} #header > .inner h1 a{font-size:18px;font-weight:800;color:#134c97;} #header #topBar{height:50px;line-height:50px;border-bottom:1px #e5e5e5 solid;} #header #topBar .left{float:left;padding-left:20px;} #header #topBar .left a{font-size:12px;color:#1b1b1b;} #header #topBar .right{float:right;text-align:center;} #header #topBar .right ul{display:block;overflow:hidden;} #header #topBar .right ul li{display:block;position:relative;float:left;padding:0 10px;min-width:70px;box-sizing:border-box;} #header #topBar .right ul li:after{display:block;content:'';position:absolute;top:50%;right:-1px;margin-top:-7px;height:14px;border-right:1px #1b1b1b solid;} #header #topBar .right ul li a{font-size:12px;color:#1b1b1b;} #header #topBar .right ul li a em{display:inline-block;margin-left:5px;width:20px;height:20px;font-size:11px;color:#fff;line-height:20px;text-align:center;background:#ff0000;border-radius:50%;} #header #topNav{margin-top:34px;float:right;text-align:center;} #header #topNav.bigExam_Nav{margin-top: 40px;} #header #topNav ul{display:block;/*overflow:hidden;*/} #header #topNav_login li > a > img.my {vertical-align: bottom; margin-right: 7px;} #header #topNav ul li{display:block;position:relative;float:left;padding:0 10px;min-width:70px;box-sizing:border-box;} #loginUserName {font-size: 13px; color: #666; padding-bottom: 20px !important; padding-top: 10px !important; margin-bottom: 20px !important; border-bottom: 1px solid #e3e3e3;} #header #topNav ul.my_log li > a{color: #999; font-size: 14px;} #header #topNav ul.my_log li > a:hover {color: #333;} #header #topNav ul li.log_my {position: relative;} #header #topNav ul li.log_my.on .my_log {display: block !important;} #header #topNav ul li.log_my.on .my-p .xi-angle-down-min {transform: rotate(180deg); transition: all .1s;} #header #topNav ul li.log_my.off .my-p .xi-angle-down-min {transition: all .1s;} #header #topNav ul li.log_my.off .my_log {display: none !important;} .log_my .my_log {display: none; width: 166px; height: auto; border: 1px solid #e3e3e3; float: none; position: absolute; right: 0;top:55px; overflow: visible !important; z-index: 10; background-color: #fff; padding: 16px; z-index: 99;} .log_my .my_log.on {display: block !important;} .log_my .my_log > li {float: none; width: 100%; margin-right: 0 !important; text-align: left; margin-bottom: 13px;} .log_my .my_log > li > a {display: block; width: 100%;} /*#header #topNav ul li:after{display:block;content:'';position:absolute;top:50%;right:-1px;margin-top:-7px;height:14px;border-right:1px #1b1b1b solid;}*/ #header #topNav ul li a{font-size:12px;color:#1b1b1b;} #header #topNav ul li a.btn_bookmark{display:inline-block;padding-right:16px;background:url(../images/common/icon_bookmark.png) no-repeat right center;} #header #topNav ul li a em{display:inline-block;margin-left:5px;width:20px;height:20px;font-size:11px;color:#fff;line-height:20px;text-align:center;background:#ff0000;border-radius:50%;} #header #gnb{border-top:1px #e1e1e1 solid;} #header #gnb ul.deaph1{display:block;} #header #gnb ul.deaph1 > li{display:block;float:left;position:relative;box-sizing:border-box;} #header #gnb ul.deaph1.cols5 > li{width:20%;} #header #gnb ul.deaph1.cols6 > li{width:16.6666%;} #header #gnb ul.deaph1.cols8 > li{width:12.5%;} #header #gnb ul.deaph1 > li > a{display:block;height:60px;text-align:center;line-height:60px;} /* new */ #aside{top:0 !important} #header .logo_pc a img{padding-right:8px} #header #topNav ul li{min-width:initial !important;padding:0;margin-right:34px} #header #topNav ul li:last-child{margin-right:0} #header #topNav ul li a{font-size:16px;font-weight:normal;position:relative; color: #333; letter-spacing: -.48px;} #header #topNav ul li a:hover{color:#F67D10;font-weight:400} #header #topNav ul li a i {font-size: 22px; vertical-align: bottom;} #header #topNav ul li a i.xi-caret-up-circle-o {transform: rotate(90deg);margin-right: 5px;} /*#header #topNav ul li:after{display:block !important;content:'' !important;position:absolute !important;top:50% !important;right:-10px !important;margin-top:-3px !important;height:9px !important;border-right:1px #aaa solid !important;}*/ #header > .inner h1.inHL{margin:18px 0px !important;} #header > .inner h1{margin:18px 0px;overflow:hidden} #header > .inner h1 a{float:left} #header > .inner h1 a:last-child{padding:4px 0 0 0} #header #topNav ul li:last-child{min-width:0;} #header > .inner h1.logo_wrap {display: flex; align-items: center; overflow: visible; margin: 0 !important;} #header > .inner h1.logo_wrap .on_off_wrap {display: flex; align-items: center;margin-left: 60px; height: 89px;} #header > .inner h1.logo_wrap .on_off_wrap > div > a{height: 100%; font-size: 24px; letter-spacing: -.6px; color: #999; font-weight: 400;} #header > .inner h1.logo_wrap .on_off_wrap > div.on > a{color: #333;} #header > .inner h1.logo_wrap .on_off_wrap .main-on {margin-right: 30px;} #header > .inner h1.logo_wrap .on_off_wrap .main-subs {z-index: 10;} #header > .inner h1.logo_wrap .on_off_wrap .on { position: relative;} #header > .inner h1.logo_wrap .on_off_wrap .on > a:after{content: ""; width: 100%; height: 6px; position: absolute; z-index: -1; background-color: #F67D10; opacity: .4; bottom: 30px; left: 0;} #header > .inner h1.logo_wrap .on_off_wrap > div {position: relative; height: 100%; line-height: 89px;} #header > .inner h1.logo_wrap .on_off_wrap > div:hover > a:after{content: ""; width: 100%; height: 6px; position: absolute; z-index: -1; background-color: #F67D10; opacity: .4; bottom: 30px; left: 0;} #header > .inner h1.logo_wrap .on_off_wrap > div > ul {position: absolute; background-color: #fff; top: 90px; border: 1px solid #e3e3e3; border-top: none; z-index: 100; width: 90px; height: auto; padding: 10px 16px 15px; display: none;} #header > .inner h1.logo_wrap .on_off_wrap > div > ul > li {line-height: 27px;} #header > .inner h1.logo_wrap .on_off_wrap > div > ul > li > a {display: block; font-size: 14px; color: #999; font-weight: 400; width: 100%;} #header > .inner h1.logo_wrap .on_off_wrap > div > ul > li > a:hover {color: #333;} /* gnb */ #header #gnb ul.acaTopMenu > li{margin-right:78px !important;width:initial !important} #header #gnb ul.acaTopMenu > li:last-child{margin-right:0px !important;} #header #gnb ul.acaTopMenu > li > a{font-size:18px;font-weight:bold;} #header #gnb ul.onlineTopMenu > li{margin-right:30px !important;width:initial !important} #header #gnb ul.onlineTopMenu > li:last-child{margin-right:0px !important;} #header #gnb ul.onlineTopMenu > li > a{font-size:16px;font-weight:300; letter-spacing: -.48px; color: #333;} #header #gnb ul.bookStore > li{margin-right:137px !important;width:initial !important} #header #gnb ul.bookStore > li:last-child{margin-right:0px !important;} #header #gnb ul.bookStore > li > a{font-size:18px;font-weight:bold;} #header #gnb ul.bigExam > li:last-child{margin-right:0px !important;} #header #gnb ul.bigExam > li > a{font-size:17px;font-weight:500;} .header_login_wrap p a{display: block;height: 100%} #header .dim{background-color:#000; position:fixed; left:0; top:0; width:100%; height:100%; z-index:8; opacity:0} #header .btn_sidemenu_close{position:absolute;right:10px; top:10px; width:55px; height:45px; background:url(../images/mobile/icon_sidemenu_close.png) no-repeat; background-size:20px;overflow:hidden;text-indent:-9999px;font-size:0; border:0; cursor:pointer; z-index:30;} /*메인 pc header메뉴*/ .hd-bottom {border-top: 1px solid #e3e3e3;} #gnbNavpc .gnb_sub .nav_dp2 {display: flex; justify-content: space-between;} #gnbNavpc .gnb_sub .dp3_n {display: none;} #gnbNavpc .gnb_sub ul.nav_dp3 {height: 56px; display: flex;} #gnbNavpc .gnb_sub ul.nav_dp3 > li {position: relative;} #gnbNavpc .gnb_sub ul.nav_dp3 > li,#gnbNavpc .gnb_sub ul.nav_dp3 > li > a{display: block; height: 100%;line-height: 56px; font-size: 16px; color: #333;letter-spacing: -.48px; cursor: pointer;} #gnbNavpc .gnb_sub ul.nav_dp3.dp3-1 > li:not(:last-child) {margin-right: 33px;} #gnbNavpc .gnb_sub ul.dp3-1 > li > a {font-size: 14px;} #gnbNavpc .gnb_sub ul.nav_dp3 > li:hover,#gnbNavpc .gnb_sub ul.nav_dp3 > li:hover > a, .dp3-0 > li.on > a,#gnbNavpc .gnb_sub ul.nav_dp3 > li.on > a {color: #F67D10 !important;} #gnbNavpc .gnb_sub ul.nav_dp3 > li:not(:last-child){margin-right: 40px;} #gnbNavpc .gnb_sub ul.nav_dp3 > li .dp3_sub {position: absolute; top: 56px; z-index: 18; display: flex; padding: 16px; justify-content: space-between; background-color: #fff; border: 1px solid #F67D10; line-height: 28px;} #gnbNavpc .gnb_sub ul.nav_dp3 > li .dp3_sub > ul li a {color: #666; font-size: 14px;} #gnbNavpc .gnb_sub ul.nav_dp3 > li .dp3_sub > ul li:hover a {color: #333;} #gnbNavpc .gnb_sub ul#nav1, #gnbNavpc .gnb_sub ul#nav2, .sub_menu_b .s_menu ul#nav3{display: flex; flex-wrap: wrap;} #gnbNavpc .gnb_sub ul#nav1 li{width: 100px;} #gnbNavpc .gnb_sub ul#nav1 li:hover a{color: #f67d10 !important;} #gnbNavpc .gnb_sub ul#nav2 li{width: 150px;} #gnbNavpc .gnb_sub ul#nav2 li:hover a{color: #f67d10 !important;} #gnbNavpc .gnb_sub .teacher-li li:hover a{color: #f67d10 !important;} #gnbNavpc .gnb_sub .free-li li:hover a{color: #f67d10 !important;} .sub_menu_b .s_menu #nav3 li {width: 125px;} /*메인 pc 직렬보기*/ .sub_menu_b {border-top: 1px solid #e3e3e3; padding: 30px 0; background-color: #fbfbfb;} .sub_menu_b.on1 {display: none;} .sub_menu_b.off1 {display: block;} .sub_menu_b .s_menu {display: flex; justify-content: space-between;} .sub_menu_b .s_menu ul li:not(:last-child){margin-bottom: 12px;} .sub_menu_b .s_menu ul li >a {color: #666; font-size: 14px; letter-spacing: -.42px;} .sub_menu_b .s_menu ul li >a:hover {color: #333;} .sub_menu_b ul#nav3 li:hover a{color: #f67d10 !important;} #sidemenu_wrapper{position:fixed; left: -2000px; top:0; bottom:0; width:100%; padding-left:30px; box-sizing:border-box; z-index:100; overflow:hidden;} #sidemenu_wrapper .sidemenu_cont{background-color:#fff; position:relative; height:100%;overflow-y:scroll;} #sidemenu_wrapper .hd{background-color:#3774f0;position:relative;width:100%;z-index:3;padding:20px 35px;box-sizing:border-box;} #sidemenu_wrapper .hd.bigExam{background-color:#f69220;position:relative;width:100%;z-index:3;padding:20px 35px;box-sizing:border-box;} #sidemenu_wrapper .hd.bigExam p{font-weight: 400} #sidemenu_wrapper .hd.bigExam a{font-weight: 300} #sidemenu_wrapper .hd .login_box{position:absolute;left:25px; top:24px; width:50px; height:64px;} #sidemenu_wrapper .hd p{display:inline;font-size:16px;font-weight:bold;color:#fff;margin-right:24px} #sidemenu_wrapper .hd a{font-size:16px;font-weight:bold;color:#fff;margin-right:24px} #sidemenu_wrapper .btn_sidemenu_close{background:url(/common/zian/images/common/gnb_close_btn.png) no-repeat;width:20px;height:20px;position:absolute; right:15px; top:22px; overflow:hidden; text-indent:-9999px; font-size:0; cursor:pointer; z-index:30;} #gnbNav .gnb_side_box{height:100%;overflow-y: scroll} #gnbNav .gnb_side{height:auto !important} #gnbNav .gnb_side>ul >li .dp1{position:relative;height:59px;color:#292929;font-size:16px;font-weight:500;line-height:59px;display:block;padding-left:35px; border-bottom:1px solid #e5e5e5} #gnbNav .gnb_side>ul >li .dp1:after{content:'';background:url(/common/zian/images/common/icon_gnb_arr.png) 0 0 no-repeat; background-size:12px 16px; width:12px; height:8px; position:absolute; right:20px; top:26px;} #gnbNav.bigExam .gnb_side>ul >li .dp1:after{display: none} #gnbNav .gnb_side>ul >li .dp2{overflow:hidden;background-color:#f6f6f6; height:0px;} #gnbNav .gnb_side>ul >li .dp2 ul{padding:0} #gnbNav .gnb_side>ul >li .dp2 a{color:#666666;font-size:14px;display:block;padding:0 0 0 40px;line-height:40px;} #gnbNav .gnb_side>ul >li .dp1.active .icon:before{width:100%;} #gnbNav .gnb_side>ul >li .dp1.active{color:#3774f0} #gnbNav .gnb_side>ul >li .dp1.active:after{background-position:0 100%} #gnbNav .gnb_banner a{position: relative; margin: 15px 0;padding: 0 0 30px;width: 100%;text-align: center;display: block;text-indent: -9999px} #gnbNav .dp2 ul li{position:relative; overflow:hidden;} #gnbNav .dp2 .mask{display:block; border-radius:200px; position:absolute; left:50%; top:50%; width:0px; height:0px; background-color:#262626; opacity:0.1; -webkit-animation:btn_effect 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; animation:btn_effect 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;} @keyframes btn_effect { 0%{left:50%; top:50%; width:0px; height:0px; opacity:0.2} 100%{width:500px; height:500px; opacity:0} } /* kmy add */ #header #gnb ul.deaph2{display:none;position:absolute;left:0;right:0;background-color:#fff;border:1px #e1e1e1 solid;z-index:99;} #header #gnb ul.deaph1 > li.active > ul.deaph2{display:block;padding:10px;} #header #gnb ul.deaph2.cols3{width:215%;} #header #gnb ul.deaph2.cols4{width:315%;} #header #gnb ul.deaph2.cols5{width:415%;} #header #gnb ul.deaph2 > li:after{display:block;content:'';clear:both;} #header #gnb ul.deaph2 > li > label{display:block;float:left;padding:10px;font-weight:bold;color:#144b95;box-sizing:border-box;} #header #gnb ul.deaph2 > li > a{display:block;float:left;width:100%;padding:10px;color:#000;font-size:15px;font-weight:bold;text-align:center;box-sizing:border-box;} #header #gnb ul.deaph2.cols3 > li > label, #header #gnb ul.deaph2.cols3 > li > a{width:25%;} #header #gnb ul.deaph2.cols4 > li > label, #header #gnb ul.deaph2.cols4 > li > a{width:20%;} #header #gnb ul.deaph2 > li > a:hover{color:#144b95;} #header .floating-object{position: fixed; top: 200px; right: 180px; z-index: 999} #header .floating-object a{display: block} #header .floating-object a img{width: 100%} /* kmy add */ #header.landing > .inner{height:120px;} #header.landing > .inner .titleBarLeft{display:block;position:absolute;top:0;left:0;height:120px;line-height:120px;overflow:hidden;} #header.landing > .inner .titleBarRight{display:block;position:absolute;top:0;right:0;height:120px;line-height:120px;overflow:hidden;} #header.landing > .inner h1{display:block;position:relative;float:none;margin:0 auto;width:280px;height:120px;line-height:120px;text-align:center;} #container{min-height:600px;padding:0 0 60px} #container2{min-height:600px;padding:0 0 60px} #container #lnb{position:absolute;top:50px;left:0;width:140px;} #container #lnb ul{display:block;border:1px #e1e1e1 solid;border-bottom:0px none;} #container #lnb ul li{display:block;border-bottom:1px #e1e1e1 solid;} #container #lnb ul li a{display:block;padding:14px 10px 14px 20px;font-size:12px;color:#1b1b1b;} #container #lnb ul li.active a{color:#fff;background:#134c97;} #container #content{margin-left:160px;padding-top:10px;} #container #content h3{font-size:24px;color:#1b1b1b;} #container #content h6{font-size:15px;color:#1b1b1b;} #container #content p{margin-bottom:20px;font-size:14px;line-height:140%;} #container #content .titleBar{position:relative;margin-bottom:20px;height:45px;line-height:45px;border-bottom:1px #e5e5e5 solid;} #container #content .titleBar + p{margin-top:-10px;} #container #content .bannerArea{margin-bottom:40px;} #container #content .tabBar{height:48px;border:1px #e5e5e5 solid;border-right:0px none;} #container #content .tabBar.noMargin{margin:0;} #container #content .tabBar li{position:relative;margin:0;width:50%;height:48px;border:0px none;border-right:1px #e5e5e5 solid;box-sizing:border-box;} #container #content .tabBar li a{height:48px;font-size:15px;color:#959595;text-align:center;line-height:48px;border:0px none;} #container #content .tabBar li.active a{color:#134c97;} #container #content .tabBar li.active:after{display:block;content:'';position:absolute;bottom:0;left:0;right:0;border-bottom:4px #134c97 solid;} #snb{margin-bottom:20px;border-bottom:1px #e1e1e1 solid;} #snb ul.deaph1{display:block;} #snb ul.deaph1:after{display:block;content:'';clear:both;} #snb ul.deaph1 > li{display:block;float:left;position:relative;box-sizing:border-box;} #snb ul.deaph1.cols5 > li{width:20%;} #snb ul.deaph1.cols6 > li{width:16.6666%;} #snb ul.deaph1.cols7 > li{width:14.2857%;} #snb ul.deaph1.cols8 > li{width:12.5%;} #snb ul.deaph1 > li > a{display:block;font-size:16px;font-weight:bold;text-align:center;line-height:32px;color:#555;} #footer{margin-top:80px;padding-bottom:100px;border-top:1px solid #e3e3e3;} #footerNav{height:auto; padding-top: 40px; padding-bottom: 20px;} #footerNav ul{display:block;} #footerNav ul li{display:inline-block;position:relative;padding:0 15px;line-height:28px;} #footerNav ul li:first-child{padding-left: 0;} #footerNav ul li a{font-size:13px; padding: 0;} #footerNav ul li a:first-child{padding-left: 0;} /*#footerNav ul li:after{display:block;content:'';position:absolute;top:50%;right:0;margin-top:-4px;height:10px;border-right:1px #999 solid;}*/ /*#footerNav ul li.last:after{display:none;}*/ #footerNav ul li a {color: #999;} #footerNav ul li a:hover{color: #333;} #footerNav ul li a.b5{color: #555;} #footerCopyright{} #footerCopyright .footerLogo{display:block;margin-bottom:20px;} #footerCopyright p{font-size:12px;color:#626262;line-height:170%;} #footerCopyright a{display:inline-block;padding:1px 4px;font-size:11px;line-height:130%;} #footer .fot_sns {display: flex;} #footer .fot_sns .sns_off {display: block;} #footer .fot_sns .sns_on{display: none;} #footer .fot_sns div:hover .sns_on > a {display: block;} #footer .fot_sns div:hover .sns_off > a{display: none;} #footerCopyright #footerMark{position:absolute;top:20px;right:0;} #footerCopyright .foot-top {padding: 40px 0; display: flex; border-bottom: 1px solid #e3e3e3;} #footerCopyright .fot_logo {margin-right: 270px;} #footerCopyright .fot_logo_m {display: none;} #footerCopyright .f-lodo_txt {font-size: 14px; line-height: 23px; letter-spacing: -.42px; color: #999; margin-bottom: 30px;} #footerCopyright .foot-zian {display: flex; color: #333; font-size: 14px; letter-spacing: -.42px;} #footerCopyright .foot-zian .fot_subs {display: flex;} #footerCopyright .foot-zian .fot-sub{margin-right: 60px;} #footerCopyright .foot-zian .fot-sub.sub2 {margin-right: 0;} #footerCopyright .foot-zian .fot-sub > div {margin-bottom: 20px;} #footerCopyright .foot-zian .fot-sub > a{ display: block; padding: 0; color: #999; font-size: 13px;letter-spacing: -.39px;} #footerCopyright .foot-zian .fot-sub > a:hover{color: #333;} #footerCopyright .foot-zian .fot-sub > a:not(:last-child){margin-bottom: 14px;} #footerCopyright .foot-zian .fot-sub > a.fot-btn { width: 120px; padding: 8px 0; background-color: #fff; text-align: center; border-radius: 3px; border: 1px solid #e3e3e3; color: #333;margin-bottom: 20px;} #footerCopyright .foot-zian .fot-sub > a.fot-btn:hover{background-color: #e3e3e3;} #footerCopyright .foot-zian .fot-sub > p{color: #999;} /* new */ #footer{margin-top: 120px !important; background-color: #FBFBFB;} #footer .footer_row_01{margin-bottom: 20px;} #footer span{font-size: 13px; color: #999; margin-right: 10px;} #footer .footer_row_01_1 > p {color: #999;} #footer .footer_row_02{margin-bottom: 20px;} #footer .footer_row_01_2 div{display: inline-block} #footer .footer_row_02_1 p, #footer .footer_row_02_1 p > a, #footer .footer_row_03 > p {color: #999; font-size: 13px;} #footer .footer_row_02_1 p > a:hover {color: #333;} #footer .footer_row_03{margin-bottom: 40px;} #footer .fot-bnr{display: flex;justify-content: space-between;} #footer .fot-bnr div.bnrs {display: flex; justify-content: space-between; width: 49%;} #footer .fot-bnr div.f-bnr{ width: 150px; text-align: center;} #footer .fot-bnr div.f-bnr > a{padding: 0; display: block; width: 100%; height: 100%;line-height: 36px;} /* tab-bar */ /*.tab-bar {display: none;}*/ #quickBar{display:block;position:fixed;top:226px;left:50%;margin-left:510px;width:120px;} #quickBar b{display:block;margin:15px;font-size:18px;text-align:center;} #quickBar .btn_quickToggle{display:block;height:20px;text-indent:-9999em;background:url(../images/common/icon_arrowUp.png) no-repeat center center;} #quickBar ul{display:block;} #quickBar ul li{display:block;padding:10px 0;border-bottom:1px #e1e1e1 solid;} #quickBar ul li.last{border-bottom:0px none;} #quickBar ul li a{display:block;padding-top:55px;height:90px;font-size:13px;line-height:17px;text-align:center;box-sizing:border-box;} #quickBar ul li a.btn_apply1{background:url(../images/common/icon_message_bl.png) no-repeat center top;} #quickBar ul li a.btn_apply2{background:url(../images/common/icon_call_bl.png) no-repeat center top;} #quickBar .quickBottom{padding:5px;font-size:11px;background:#ebebeb;border-top:1px #e1e1e1 solid;} #quickBar.min{padding-bottom:10px;} #quickBar.min .btn_quickToggle{background:url(../images/common/icon_arrowDown.png) no-repeat center center;} #quickBar.min ul{display:none;} #quickBar.min .quickBottom{display:none;} #topBanner{height:100px;} #bottomBanner{position:fixed;bottom:-100px;left:0;right:0;z-index:92;transition-duration:0.3s;} #bottomBanner > div {height: 108px;} #bottomBanner > div img {display: block; margin: 0 auto; max-width: 100%; height: 100%; object-fit: cover; object-position: center;} #bottomBanner .inner {position: absolute; top: 0; height: 100%; left: 50%; transform: translateX(-50%);} #bottomBanner .btn_bottomClose{display:none;position:absolute;top:-20px;right:20px;width:20px;height:20px;text-indent:-9999em;background:url(../images/common/btn_bannerClose.jpg) no-repeat;} #bottomBanner.active{bottom:0;} #bottomBanner.active .btn_bottomClose{display:block;} #btn_moveTop{display:block;width:120px;height:42px;position:fixed;top:580px;left:50%;margin-left:510px;padding-top:58px;margin-top:10px;color:#fff;background:#134c97 url(../images/common/icon_top.gif) no-repeat center 14px;text-align:center;} /*슬라이드*/ #container .slick-dots{bottom:0;} #container .slick-dots li{padding:0;} #container .slick-dots li button{background:#959595;border:0px none;border-radius:8px;} #container .slick-dots li.slick-active button{width:30px;background:#134c97;} #container .slick-prev{left:-10px;margin-top:-40px;width:30px;height:30px;background:#fff url(../images/common/btn_slidePrev.png) no-repeat center center; border: 0} #container .slick-next{right:-10px;margin-top:-40px;width:30px;height:30px;background:#fff url(../images/common/btn_slideNext.png) no-repeat center center;border: 0} #container .bx-wrapper .bx-controls{bottom:10px;} #container .bx-wrapper .bx-pager{bottom:8px;} #container .bx-wrapper .bx-pager-item a{background:#f1f1f1;border:0px none;border-radius:8px;} #container .bx-wrapper .bx-pager-item a.active{width:8px;background:#134c97;} #container .bx-prev{display:block;position:absolute;top:50%;left:-1px;margin-top:-15px;width:30px;height:30px;text-indent:-9999em;background:#fff url(../images/common/btn_slidePrev.png) no-repeat center center;border:1px #e1e1e1 solid;} #container .bx-next{display:block;position:absolute;top:50%;right:-1px;margin-top:-15px;width:30px;height:30px;text-indent:-9999em;background:#fff url(../images/common/btn_slideNext.png) no-repeat center center;border:1px #e1e1e1 solid;} /*메인*/ .titleBar{display:block;position:relative;margin-bottom:10px;/*height:30px;*/line-height:30px;} .titleBar .btn_more{display:block;position:absolute;top:0;right:0;padding-right:17px;font-size:13px;background:url(../images/common/icon_more.png) no-repeat center right; cursor: pointer} .titleBar h5{display:block;margin:0;font-size:19px;} #lendingVisual{position:relative;height:640px;background:#fbfbfb url(../images/content/bg_lendingVisual.png) no-repeat left bottom;} #lendingVisual .lendingVisualText{position:absolute;top:35px;left:135px;font-size:20px;} #lendingVisual .lendingVisualText b{display:block;font-size:40px;font-weight:bold;line-height:130%;} #lendingVisual .lendingVisualText .btnArea{text-align:left;} #lendingVisual .lendingVisualText .btnArea a{display:inline-block;margin-right:20px;width:140px;height:48px;font-size:15px;text-align:center;line-height:48px;background:#fff;border:1px #e1e1e1 solid;} #lendingVisual > ul{display:block;position:absolute;top:60px;right:10px;width:350px;border:1px #e1e1e1 solid;border-bottom:0px none;} #lendingVisual > ul li{display:block;border-bottom:1px #e1e1e1 solid;} #lendingVisual > ul li a{display:block;padding:20px;font-size:14px;background:#fff url(../images/common/icon_arrowRight.png) no-repeat 95% center;} #lendingVisual > ul li a b{display:block;margin-bottom:5px;font-size:26px;} #lendingVisual > ul li.item1 a b{color:#144b95;} #lendingVisual > ul li.item2 a b{color:#f59120;} #lendingVisual > ul li.item3 a b{color:#ac1616;} #lendingVisual > ul li.item4 a b{color:#000000;} .lendingBanner{margin-bottom:20px;background:#252525;} .lendingBanner .divGroup{margin:0 18px;padding:20px 0;} .lendingBanner .divGroup > div{padding:0 12px;} #mainVisual:after{display:block;content:'';clear:both;} #mainVisual .left{float:left;width:700px;} #mainVisual .right{float:right;width:300px;} #mainVisual .bx-controls-direction, #mainVisual .bx-controls-auto{display:none;} .visualPager{display:block;border:1px #e5e5e5 solid;border-right:0px none;} .visualPager:after{display:block;content:'';clear:both;} .visualPager li{display:block;float:left;width:20%;border-right:1px #e5e5e5 solid;box-sizing:border-box;} .visualPager li a{display:block;height:48px;font-size:13px;line-height:48px;text-align:center;box-sizing:border-box;} .visualPager li a.active{color:#144b95;border-bottom:4px #144b95 solid;} .mainBannerReview{margin-bottom:30px;} .mainBanner{margin:34px 0 44px;} .mainBanner img{width:100%;} .mainBanner .titleBar h5{text-align:center;} .mainProduct{position:relative;margin-bottom:20px;padding-top:20px;border:1px #e1e1e1 solid;box-sizing:border-box;} .mainProduct .titleBar{margin-bottom:40px;text-align:center;} .mainProductList{position:relative;margin:0 20px 20px;padding-bottom:30px;} .mainProductList .item{/*padding:0 20px;*/height: 260px;text-align: center;} .mainProductList .item > span{display: block;} .mainProductList .item > div{position:relative;height:260px;text-align:center;box-sizing:border-box;} .mainProductList .item > div img{display:inline-block;width:120px;width:auto;height:170px;} .mainProductList .item > div .name{display:block;margin-top:5px;font-size:14px;width:100%;/*display:-webkit-box;*//*max-height:33px;line-height:17px;*/overflow:hidden;text-overflow:ellipsis;/*-webkit-line-clamp:3;-webkit-box-orient:vertical;*/white-space:nowrap;margin:auto;text-align:center;font-weight:bold} .mainProductList .item > div .writer{display:block;margin-top:5px;font-size:13px;} .mainProductList .item > div .price{display:block;margin-top:5px;font-size:12px;} .mainProductList .item > div .price b{font-size:16px;font-weight:bold;} .mainProductList .item > div .price span{color:#ff0000;} .mainInfo ul{padding-top:45px;word-break:keep-all;} .mainInfo ul:after{display:block;content:'';clear:both;} .mainInfo ul li{display:block;float:left;padding:0 10px 20px;width:33.3333%;box-sizing:border-box;} .mainInfo ul li a{display:block;padding-top:70px;height:100px;font-size:15px;line-height:120%;text-align:center;border:1px #e1e1e1 solid;box-sizing:border-box;} .mainInfo ul li a.item1{background:url(../images/common/icon_info1.png) no-repeat center 10px;} .mainInfo ul li a.item2{background:url(../images/common/icon_info2.png) no-repeat center 10px;} .mainInfo ul li a.item3{background:url(../images/common/icon_info3.png) no-repeat center 10px;} .mainInfo ul li a.item4{background:url(../images/common/icon_info4.png) no-repeat center 10px;} .mainInfo ul li a.item5{background:url(../images/common/icon_info5.png) no-repeat center 10px;} .mainInfo ul li a.item6{background:url(../images/common/icon_info6.png) no-repeat center 10px;} .mainCustomer{position:relative;padding:25px 0 0 145px;height:130px;box-sizing:border-box;} .mainCustomer > div{position:relative;margin-bottom:40px;padding:15px 25px 0;height:310px;font-size:12px;line-height:180%;border:1px #e1e1e1 solid;box-sizing:border-box;word-break:keep-all;} .mainCustomer > h5{position:absolute;top:25px;left:30px;} .mainCustomer .btn_apply{display:block;margin:20px auto 0;width:250px;height:34px;font-size:14px;color:#fff;line-height:34px;text-align:center;background:#134c97;} .mainCustomer .desc{display:block;margin-bottom:10px;line-height:150%;} .mainCustomer ul{display:block;} .mainCustomer ul li{display:block;position:relative;margin-bottom:10px;padding-left:100px;line-height:30px;} .mainCustomer ul li .title{display:block;position:absolute;top:0;left:0;} .mainCustomer ul li b{color:#134c97;} .mainCustomer ul li b.phone{font-size:24px;} .mainBoard{position:relative;height:305px;border:1px #e1e1e1 solid;} .mainBoard ul.tabBar{margin-right:-1px;border:0px none;} .mainBoard ul.tabBar li{margin-right:0;width:50%;box-sizing:border-box;} .mainBoard ul.tabBar li a{padding:0;height:60px;font-size:20px;font-weight:bold;color:#a0a0a0;line-height:60px;text-align:center;border:0px none;border-bottom:1px #e1e1e1 solid;border-right:1px #e1e1e1 solid;} .mainBoard ul.tabBar li.active a{color:#1b1b1b;border-bottom:1px #fff solid;} .mainBoard .tabPage{padding-bottom:40px;} .mainBoard .tabPage ul{display:block;padding:0 20px;} .mainBoard .tabPage ul li{display:block;border-bottom:1px #e1e1e1 solid;} .mainBoard .tabPage ul li a{display:block;position:relative;padding-right:70px;height:50px;font-size:13px;line-height:50px;text-align:left} .mainBoard .tabPage ul li a p{width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mainBoard .tabPage ul li a span.date{position:absolute;top:0;right:0;} .mainBoard .tabPage .btn_more{display:block;position:absolute;bottom:0;right:30px;padding-right:17px;font-size:13px;line-height:40px;background:url(../images/common/icon_more.png) no-repeat center right;} .mainBoard.noTab{margin-bottom:40px;padding:20px;height:auto;} .mainBoard.noTab h5{display:block;padding:0;height:50px;font-size:18px;font-weight:bold;line-height:50px;} .mainBoard.noTab ul{display:block;} .mainBoard.noTab ul li{display:block;border-top:1px #e1e1e1 solid;} .mainBoard.noTab ul li a{display:block;position:relative;padding-right:70px;height:50px;font-size:13px;line-height:50px;} .mainBoard.noTab ul li a span.date{position:absolute;top:0;right:0;} .mainBoard.noTab .btn_more{display:block;position:absolute;top:20px;right:20px;padding-right:17px;font-size:13px;line-height:50px;background:url(../images/common/icon_more.png) no-repeat center right;} .mainBoard.noTab.blue ul li{border-color:#2b6ec6;} .mainBoard.noTab.blue .btn_more{background:url(../images/common/icon_more_wh.png) no-repeat center right;} .mainBoard.blue{color:#fff;background:#134c97;border-color:#2b6ec6;} .mainBoard.blue a{color:#fff;border-color:#2b6ec6;} .mainBoard.blue ul.tabBar li a{color:#588acf;background:none;border-color:#2b6ec6;} .mainBoard.blue ul.tabBar li.active a{color:#fff;border-bottom:1px #134c97 solid;} .mainBoard.blue .tabPage ul li{border-color:#2b6ec6;} .mainBoard.blue .tabPage .btn_more{background:url(../images/common/icon_more_wh.png) no-repeat center right;} .mainBoard.yellow{color:#fff;background:#c16a06;border-color:#dc841e;} .mainBoard.yellow a{color:#fff;border-color:#dc841e;} .mainBoard.yellow ul.tabBar li a{color:#f69321;background:none;border-color:#dc841e;} .mainBoard.yellow ul.tabBar li.active a{color:#fff;border-bottom:1px #c16a06 solid;} .mainBoard.yellow .tabPage ul li{border-color:#dc841e;} .mainBoard.yellow .tabPage .btn_more{background:url(../images/common/icon_more_wh.png) no-repeat center right;} .mainBoard.red{color:#fff;background:#ac1616;border-color:#c72d2d;} .mainBoard.red a{color:#fff;border-color:#c72d2d;} .mainBoard.red ul.tabBar li a{color:#de5c5c;background:none;border-color:#c72d2d;} .mainBoard.red ul.tabBar li.active a{color:#fff;border-bottom:1px #ac1616 solid;} .mainBoard.red .tabPage ul li{border-color:#c72d2d;} .mainBoard.red .tabPage .btn_more{background:url(../images/common/icon_more_wh.png) no-repeat center right;} .mainGuide{position:relative;padding:20px;height:260px;font-size:13px;color:#fff;line-height:180%;background:#144b95;box-sizing:border-box;} .mainGuide b{display:block;margin-bottom:10px;padding:0 10px;font-size:20px;line-height:130%;} .mainGuide ul{display:block;border-top:1px #fff solid;border-left:1px #fff solid;} .mainGuide ul:after{display:block;content:'';clear:both;} .mainGuide ul li{display:block;float:left;width:33.3333%;border-bottom:1px #fff solid;border-right:1px #fff solid;box-sizing:border-box;} .mainGuide ul li a{display:block;height:38px;font-size:13px;color:#fff;line-height:38px;text-align:center;} .btn_lendingLink1{display:block;padding:20px;height:260px;color:#fff;background:#252525 url(//image.zianedu.com/Upload/100/contents/0102_index_online.jpg) no-repeat center bottom;box-sizing:border-box;} .btn_lendingLink1 b{display:block;margin-bottom:10px;padding:0 10px;font-size:20px;line-height:130%;} .btn_lendingLink2{display:block;padding:20px;height:260px;color:#fff;background:#0e7263 url(//image.zianedu.com/Upload/100/contents/0102_index_big.jpg) no-repeat center bottom;box-sizing:border-box;} .btn_lendingLink2 b{display:block;margin-bottom:10px;padding:0 10px;font-size:20px;line-height:130%;} .mainQuickLink{margin-bottom:20px;} .mainQuickLink ul{display:block;border:1px #e1e1e1 solid;border-right:0px none;} .mainQuickLink ul:after{display:block;content:'';clear:both;} .mainQuickLink ul li{display:block;float:left;width:20%;border-right:1px #e1e1e1 solid;box-sizing:border-box;} .mainQuickLink ul li a{display:block;height:68px;font-size:16px;font-weight:bold;line-height:68px;text-align:center;} .mainQuickLink ul li a img{margin-right:5px;} #wrap.skill #aside #siteTab, #wrap.skill .mainTeacher .mainTeacherTitle > li > ul > li > a.active, #wrap.skill .bx-wrapper .bx-pager-item a.active, #wrap.skill #container .slick-dots li.slick-active button, #wrap.skill .mainCustomer .btn_apply{background:#e8b43d;} #wrap.skill #header > .inner h1 a, #wrap.skill .mainTeacher .mainTeacherTitle > li > b, #wrap.skill .mainCustomer ul li b{color:#e8b43d;} #wrap.accounting #aside #siteTab, #wrap.accounting .mainTeacher .mainTeacherTitle > li > ul > li > a.active, #wrap.accounting .bx-wrapper .bx-pager-item a.active, #wrap.accounting #container .slick-dots li.slick-active button, #wrap.accounting .mainCustomer .btn_apply{background:#ed3f3f;} #wrap.accounting #header > .inner h1 a, #wrap.accounting .mainTeacher .mainTeacherTitle > li > b, #wrap.accounting .mainCustomer ul li b{color:#ed3f3f;} .ledingBanner{background:#154b95} .balloon {display:none; position: absolute;display: inline-block;width: 100px;height: 30px;font-size: 10px;line-height: 30px;top: -20px; left: 5px; animation:ani 1s infinite alternate} .balloon .ttle {display:inline-block;color:#fff; background:#ff0000; border-radius:10px; font-size: 12px; width: 100%; text-align: center } .balloon:after {content:''; position:absolute; width:0; height:0; border-style:solid; border-color:#ff0000 transparent transparent transparent; bottom:-25px; border-width:15px 10px; left:16px; margin-left:-10px;} .balloon02 {display:none; position: absolute;display: inline-block;width: 96px;height: 25px;font-size: 10px;line-height: 25px;top: -1px; left: -5px;} .balloon02 .ttle {display:inline-block;color:#ffe000; background:#333333; font-size: 12px; font-weight: lighter; width: 100%; text-align: center; animation:ani2 1s infinite alternate } .balloon03 {opacity: 0; position: absolute;display: inline-block;width: 100px;height: 30px;font-size: 10px;line-height: 30px;top: -30px; left: -5px; transition: 0.1s;} .balloon03 .ttle {display:inline-block;color:#fff; background:#ff0000; border-radius:10px; font-size: 12px; width: 100%; text-align: center } .balloon03:after {content:''; position:absolute; width:0; height:0; border-style:solid; border-color:#ff0000 transparent transparent transparent; bottom:-25px; border-width:15px 10px; left:16px; margin-left:-10px;} @keyframes ani{ 0%{transform:translate(0,0);} 100%{transform:translate(0,-6px);} } @keyframes ani2{ 0%{color:#ffe000;} 100%{color:#ffa500;} }