@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);


/* ======================================== Reset ======================================== */
*{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
html,body{width:100%;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{font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic',sans-serif;font-size:12px;font-weight:400;color:#000;}
input,textarea,select,button,table,pre{}
ul,ol,li{display:block;list-style:none;}
img{max-width:100%;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:#444;}
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:1280px;box-sizing:border-box;}
.inner:after{display:block;content:'';clear:both;}
caption, .soundOnly{display:block !important;position:absolute !important;top:-99999px !important;}
.alignLeft{text-align:left !important;}
.alignRight{text-align:right !important;}
.alignCenter{text-align:center !important;}
.floatLeft{float:left !important;}
.floatRight{float:right !important;}
.onlyDesktop{display:block;}
span.onlyDesktop{display:inline;}
.onlyDesktop{display:block;}
.onlyTablet{display:none;}
.onlyPhone{display:none;}
.noBr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}
b, strong{font-weight:500;}


/* ==============================================================================================================
= 너비, 높이 사이즈를 공통으로 사용하기 위한 클래스 부여
============================================================================================================== */
.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}.w2000{width:2000px !important;}
.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}.h300{height:300px}.h310{height:310px}.h320{height:320px}.h330{height:330px}.h340{height:340px}.h350{height:350px}.h360{height:360px}.h370{height:370px}.h380{height:380px}.h390{height:390px}.h400{height:400px}.h410{height:410px}.h420{height:420px}.h430{height:430px}.h440{height:440px}.h450{height:450px}.h460{height:460px}.h470{height:470px}.h480{height:480px}.h490{height:490px}.h500{height:500px}.h510{height:510px}.h520{height:520px}.h530{height:530px}.h540{height:540px}.h550{height:550px}.h560{height:560px}.h570{height:570px}.h580{height:580px}.h590{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;}
.btnArea.divGroup{margin:15px -5px;}
.btnArea.divGroup > div{padding:5px;}


/* ==============================================================================================================
= Button 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.btnArea{margin:20px 0;text-align:center;}
.btnArea:after{display:block;content:'';clear:both;}
.btnArea.right{text-align:right;}
.btnArea.left{text-align:left;}
.btnArea .right{float:right;text-align:right;}
.btnArea .left{float:left;text-align:left;}
.btn_ss,
.btn_s,
.btn_m,
.btn_l,
.btn_inline{display:inline-block;color:#666;text-align:center;background-color:#fff;border:1px #ccc 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:#4bacff;border:1px #4bacff solid;}
.btn_ss{padding:0 10px;height:24px;font-size:11px;line-height:22px;border-radius:3px;}
.btn_s{padding:0 10px;height:26px;font-size:12px;line-height:24px;border-radius:3px;}
.btn_m{padding:0 15px;height:30px;font-size:13px;line-height:28px;border-radius:4px;}
.btn_l{padding:0 20px;height:42px;font-size:15px;line-height:40px;border-radius:5px;}
.btn_inline{padding:0 15px;height:30px;font-size:13px;line-height:28px;border-radius:4px;}
.btn_listNext{height:40px;line-height:38px;}


/* ==============================================================================================================
= 폼 아이템별 기본스타일 지정
============================================================================================================== */
input[type='text'],input[type='password'],input[type='number'],select{height:30px;max-width:100%;border:1px #ddd solid;box-sizing:border-box;}
select.useStyle{padding-right:20px;background:#fff url(../images/bg_selectBox.png) no-repeat right center;-webkit-appearance:none;}
textarea{padding:5px;border:1px #ddd solid;box-sizing:border-box;resize:vertical;}
button,
input[type='submit']{-webkit-appearance:none;}
input:placeholder{color:#ccc !important;}
input::placeholder{color:#ccc !important;}
input::-webkit-input-placeholder{color:#ccc !important;}
input:-ms-input-placeholder{color:#ccc !important;}
input[type='checkbox'] + label,
input[type='radio'] + label{margin-left:5px;}
label.pointer{cursor:pointer;}


/* ==============================================================================================================
= Table 기본스타일 지정
= 테이블을 크게 목록형(list), 입력형(form), 상세형(view)으로 나눔
============================================================================================================== */
.tableBox{margin-bottom:20px;overflow:hidden;}
.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:13px;border-top:2px #1b1b1b solid;border-left:1px #e5e5e5 solid;}
.tableBox table table{width:auto;table-layout:auto;}
.tableBox table .tableBox{margin-bottom:0;}
.tableBox table th,
.tableBox table td{border-bottom:1px #e5e5e5 solid;border-right:1px #e5e5e5 solid;box-sizing:border-box;}
.tableBox table th{background:#f5f5f5;font-weight:bold;}
.tableBox table.list{text-align:center;}
.tableBox table.list th,
.tableBox table.list td{padding:10px;}
.tableBox table.list.hover tbody tr{cursor:pointer;}
.tableBox table.list.hover tbody tr:hover{background:#f5f5f5;}
.tableBox table.form th,
.tableBox table.form td{padding:10px 25px;height:30px;text-align:left;}
.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.view th,
.tableBox table.view td{padding:10px 25px;line-height:160%;}
.tableBox table.view td *{max-width:100%;}


/* ==============================================================================================================
= Tab 기본스타일 지정
============================================================================================================== */
.tabBar{display:block;margin:40px auto;max-width:960px;border-top:1px #ddd solid;border-left:1px #ddd solid;}
.tabBar:after{display:block;content:'';clear:both;}
.tabBar > li{display:block;float:left;}
.tabBar > li > a{display:block;height:50px;font-size:18px;line-height:50px;text-align:center;border-bottom:1px #ddd solid;border-right:1px #ddd solid;}
.tabBar > li.active > a{color:#fff;background:#252525;}
.tabBar.cols1 > li{width:100%;}
.tabBar.cols2 > li{width:50%;}
.tabBar.cols3 > li{width:33.3333%;}
.tabBar.cols4 > li{width:25%;}
.tabBar.cols5 > li{width:20%;}
.tabBar.cols6 > li{width:16.6666%;}
/*.tabBar.cols6 > li{width:33.3333%;}
.tabBar.cols7 > li{width:25%;}
.tabBar.cols8 > li{width:25%;}
.tabBar.cols9 > li{width:20%;}
.tabBar.cols10 > li{width:20%;}*/


/* ==============================================================================================================
= Slider
============================================================================================================== */
.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:100%;}
.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{display:block;position:absolute;top:50%;left:-50px;margin-top:-23px;width:26px;height:45px;text-indent:-9999em;background:url(../images/btn_mainCarousel.png) no-repeat 0 0;border:0px none;}
.slick-next{display:block;position:absolute;top:50%;right:-50px;margin-top:-23px;width:26px;height:45px;text-indent:-9999em;background:url(../images/btn_mainCarousel.png) no-repeat -26px 0;border:0px none;}
.slick-dots{display:none !important;}
.bx-wrapper{position:relative;}
.bx-wrapper .bx-controls .bx-pager{position:absolute;bottom:20px;left:0;right:0;text-align:center;z-index:99;}
.bx-wrapper .bx-controls .bx-pager *{display:inline-block;vertical-align:middle;}
.bx-wrapper .bx-controls .bx-pager .bx-pager-item a{margin:0 5px;width:17px;height:17px;text-indent:-999em;background:#ccc;border-radius:50%;box-sizing:border-box;}
.bx-wrapper .bx-controls .bx-pager .bx-pager-item a.active{color:#fff;background:#111;}
.bx-wrapper .bx-controls .bx-controls-auto{display:none;}
.bx-wrapper .bx-controls .bx-controls-direction .bx-prev{display:block;position:absolute;top:50%;left:50px;margin-top:-23px;width:26px;height:45px;text-indent:-9999em;background:url(../images/btn_mainCarousel.png) no-repeat 0 0;border:0px none;z-index:99;}
.bx-wrapper .bx-controls .bx-controls-direction .bx-next{display:block;position:absolute;top:50%;right:50px;margin-top:-23px;width:26px;height:45px;text-indent:-9999em;background:url(../images/btn_mainCarousel.png) no-repeat -26px 0;border:0px none;z-index:99;}
#bx-pager{margin:5px -5px;}
#bx-pager:after{display:block;content:'';clear:both;}
#bx-pager a{display:block;float:left;padding:5px;width:6.25%;box-sizing:border-box;}


/* ==============================================================================================================
= 로딩
============================================================================================================== */
#loading{display:none;position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.4);z-index:1000;}
#loading > div{position:absolute;top:50%;left:50%;margin:-30px 0 0 -30px;width:60px;height:60px;border-radius:100%;}
#loading > div:before,
#loading > div:after{content:"";position:absolute;top:-10px;left:-10px;width:100%;height:100%;border-radius:100%;border:10px solid transparent;border-top-color:#6bbbff;opacity:0.8;}
#loading > div:before{z-index:1001;animation:spin 1s infinite;}
#loading > div:after{border:10px solid #eee;}
.loading{display:block;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;}
.loading > div{position:absolute;top:50%;left:50%;margin:-10px 0 0 -10px;width:20px;height:20px;border-radius:100%;}
.loading > div:before,
.loading > div:after{content:"";position:absolute;top:-5px;left:-5px;width:100%;height:100%;border-radius:100%;border:5px solid transparent;border-top-color:#6bbbff;opacity:0.8;}
.loading > div:before{z-index:1001;animation:spin 1s infinite;}
.loading > div:after{border:5px solid #eee;}
@keyframes spin{
	0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);}
	100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
}

/*Toast*/
.toastMsg{display:block;position:fixed;bottom:-70px;left:50%;margin-left:-140px;padding:10px 20px;width:280px;font-size:13px;text-align:center;background:#fff;border:1px #ddd solid;border-radius:5px;box-shadow:2px 2px 8px rgba(0,0,0,0.2);box-sizing:border-box;opacity:0;transition-duration:0.3s;overflow:hidden;z-index:1;}
.toastMsg.active{bottom:70px;opacity:1;}


/* ==============================================================================================================
= 레이아웃
============================================================================================================== */
#wrap.on #navBar{bottom:0;z-index:10;}
#navBar{position:fixed;bottom:-52px;left:0;right:0;height:52px;background:#fff;border-top:1px #ddd solid;box-sizing:border-box;transition-delay:1s;transition-duration:0.3s;}
#navBar ul{display:block;}
#navBar ul li{display:block;float:left;width:20%;}
#navBar ul li a{display:block;height:52px;font-size:21px;color:#888;line-height:52px;text-align:center;}
#navBar ul li a{position:relative;text-indent:-9999em;}
#navBar ul li a:after{display:block;content:'';position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;width:40px;height:40px;background-image:url(../images/icon_nav_full.png);background-repeat:no-repeat;background-size:auto 80px;}
#navBar ul li a.item1:after{background-position:0 0;}
#navBar ul li a.item2:after{margin:-25px 0 0 -25px;width:50px;height:50px;background-position:-50px 0;background-size:auto 100px;}
#navBar ul li a.item3:after{background-position:-80px 0;}
#navBar ul li a.item4:after{background-position:-120px 0;}
#navBar ul li a.item5:after{background-position:-160px 0;}
#navBar ul li a.item1.on:after{background-position:0 -40px;}
#navBar ul li a.item2.on:after{background-position:-50px -50px;}
#navBar ul li a.item3.on:after{background-position:-80px -40px;}
#navBar ul li a.item4.on:after{background-position:-120px -40px;}
#navBar ul li a.item5.on:after{background-position:-160px -40px;}
/*
#navBar ul li a.item2{background:url(../images/icon_nav_modoo.png) no-repeat center center;background-size:auto 95%;}
#navBar ul li a.item3{background:url(../images/icon_nav_qa.png) no-repeat center center;background-size:auto 80%;}
#navBar ul li a.item4{background:url(../images/icon_nav_blog.png) no-repeat center center;background-size:auto 80%;}
#navBar ul li a.item5{background:url(../images/icon_nav_chart.png) no-repeat center center;background-size:auto 80%;}
*/
/*
#wrap.on #navBar{bottom:0;z-index:10;}
#navBar{position:fixed;bottom:-40px;left:0;right:0;height:40px;background:#fcfcfc;border-top:1px #ddd solid;box-sizing:border-box;transition-delay:0.2s;transition-duration:0.3s;}
#navBar ul{display:block;}
#navBar ul li{display:block;float:left;width:20%;}
#navBar ul li a{display:block;height:40px;font-size:17px;color:#888;line-height:40px;text-align:center;}
*/
.panel{position:fixed;top:0;bottom:0;left:0;padding:50px 0 52px;width:100%;background:#f1f2f3;box-sizing:border-box;overflow-y:auto;z-index:1;/*transition-duration:0.5s;*/}
.panel.prev{left:-100%;}
.panel.next{left:100%;}
.panel.splash{background:linear-gradient(to right bottom, #6050ea, #c133f1);}
.panel.splash .logo{position:absolute;top:50%;left:50%;margin:-120px 0 0 -120px;width:240px;}
.panel.splash p{position:absolute;top:50%;left:50%;margin:-200px 0 0 -90px;width:180px;font-size:30px;color:#fff;line-height:110%;}
.container{padding:15px;}
.container > p{display:block;position:relative;margin:5px 0;padding:0 10px;font-size:11px;}
.container > p b{color:#ba6114;}

.titleBar{position:absolute;top:0;left:0;right:0;padding:0 60px;height:50px;line-height:50px;text-align:center;background:#fff;border-bottom:1px #ddd solid;box-sizing:border-box;overflow:hidden;z-index:1;}
.titleBar h1{display:block;font-size:20px;line-height:50px;}
.titleBar span.clientName{display:block;margin-top:2px;font-size:11px;font-weight:400;opacity:0.9;}
.titleBar span.appName{display:block;margin-bottom:2px;font-size:11px;font-weight:400;opacity:0.9;}
.titleBar > .left{position:absolute;top:0;left:0;}
.titleBar > .right{position:absolute;top:0;right:0;}
.titleBar > div > a{display:block;float:left;width:50px;height:50px;font-size:17px;text-align:center;line-height:50px;}
.titleBar > div > a.btn_prev{text-indent:-9999em;background:url(../images/icon_arrow_left.png) no-repeat center center;background-size:auto 50%;/*opacity:0.5;*/}
.titleBar > div > a.btn_add{text-indent:-9999em;background:url(../images/icon_plus.png) no-repeat center center;background-size:auto 50%;/*opacity:0.5;*/}

.main{padding-top:40px;}
.main .panel{background:#fff;}
.main .titleBar{padding:10px 10px 0;height:120px;background:none;border-bottom:0px none;box-shadow:none;box-sizing:border-box;}
.main .titleBar:before{display:block;content:'';position:absolute;top:-150px;left:-40%;right:-40%;height:245px;border-radius:50%;background:#4bacff;box-shadow:0 1px 3px rgba(0,0,0,0.1);z-index:0;}
.main .titleBar:after{display:block;content:'';position:absolute;top:-150px;left:-20%;right:-20%;height:245px;border-radius:50%;background:#0090d5;z-index:0;}
.main .titleBar h1{position:relative;color:#fff;line-height:100%;z-index:1;}
.main .titleBar p{position:relative;margin-top:5px;font-size:11px;color:#fff;line-height:20px;text-align:center;opacity:0.8;z-index:1;}
.main .titleBar p a{color:#fff;}

.clientUse{display:block;position:relative;/*padding-bottom:40px;*/height:150px;overflow:hidden;transition-duration:0.3s;}
.clientUse.active{height:350px;}
.clientUse .btn_clientUseToggle{display:block;position:absolute;bottom:0;right:0;padding:0 20px;height:30px;color:#fff;line-height:30px;text-align:center;background:#4bacff;border-radius:10px 0 0 0;}
.clientUse .btn_clientUseToggle i{display:inline-block;margin-right:5px;transition-duration:0.3s;}
.clientUse.active .btn_clientUseToggle i{transform: rotate(-180deg);}
.clientUseList{display:block;position:relative;padding-left:50px;box-sizing:border-box;}
.clientUseList + .clientUseList{margin-top:15px;}
.clientUseList > b{display:block;position:absolute;top:0;left:0;width:60px;height:20px;line-height:20px;}
.clientUseList > b.item1{text-indent:-9999em;background:url(../images/icon_site.png) no-repeat 0 0;background-size:auto 120px;}
.clientUseList > b.item2{text-indent:-9999em;background:url(../images/icon_site.png) no-repeat 0 -20px;background-size:auto 120px;}
.clientUseList > b.item3{text-indent:-9999em;background:url(../images/icon_site.png) no-repeat 0 -40px;background-size:auto 120px;}
.clientUseList > ul{display:block;}
.clientUseList > ul:after{display:block;content:'';clear:both;}
.clientUseList > ul > li{display:block;float:left;position:relative;padding:0 5px;min-width:33.3333%;color:#aaa;box-sizing:border-box;}
.clientUseList > ul > li.col2{width:66.6666%;}
.clientUseList > ul > li i{display:inline-block;margin-right:5px;color:#ccc;}
.clientUseList > ul > li.active{font-weight:bold;color:#4bacff;}
.clientUseList > ul > li.active i{color:#4bacff;}

.btn_titleLink{display:block;position:absolute;top:50%;right:0;margin-top:-12px;padding:0 10px;height:24px;color:#4bacff;line-height:24px;text-align:center;background:#fff;border:1px #4bacff solid;border-radius:5px;}

.chartWrap{padding-top:10px;margin:0 -10px -10px;height:170px;overflow:hidden;}
.chartWrap > div{height:180px;}
.chartWrap .highcharts-exporting-group,
.chartWrap .highcharts-credits,
.chartWrap .highcharts-axis-title{display:none !important;}
.chartWrap text,
.chartWrap tspan{font-size:11px !important;}

.copyright{font-size:12px;color:#aaa;text-align:center;}

section{margin-bottom:10px;padding:15px;background:#fff;border:1px #ccc solid;border-radius:10px;/*box-shadow:3px 3px 6px rgba(0,0,0,0.1);*/word-break:break-all;}

.titleWrap{position:relative;margin-top:-10px;height:35px;line-height:35px;}
h3{font-size:13px;font-weight:500;}
h3 > img{margin-right:5px;}
h3 > .date{font-size:11px;color:#999;}
/*.titleWrap a{display:block;position:absolute;top:0;right:0;padding:0 5px;font-size:11px;color:#999;text-align:center;line-height:35px;}
.titleWrap a i{margin-left:5px;font-size:12px;}
.titleWrap img{max-height:15px;}
.titleWrap a.btn_more{padding-right:15px;background:url(../images/icon_arrow_right.png) no-repeat right center;background-size:auto 10px;}*/
* + .titleWrap{margin-top:0;margin-bottom:0;}

.listOption{display:block;position:relative;margin:5px 15px;}
.listOption .count{font-size:11px;color:#777;}
.listOption .count b{font-size:13px;font-weight:500;}

.listSearch{display:block;position:relative;margin:-15px -15px 15px;padding-right:50px;background:#fff;border-bottom:1px #ddd solid;}
.listSearch input[type='text']{padding:0 20px;width:100%;height:40px;border:0px none;}
.listSearch .btn_search{display:block;position:absolute;top:0;bottom:0;right:0;width:50px;height:40px;text-indent:-9999em;background:url(../images/icon_search.png) no-repeat center center;background-size:auto 60%;border:0px none;}

.listLabel{display:block;position:relative;padding:0 5px;}
.listLabel > li{display:block;position:relative;padding-left:70px;margin:2px 0;min-height:18px;}
.listLabel > li .label{display:block;position:absolute;top:0;left:0;width:65px;}
.listLabel.wide > li{padding-left:100px;}
.listLabel.wide > li .label{width:95px;}
li .listLabel{padding:0;}
li .listLabel > li{margin:2px 0;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}

.listStatus{display:block;position:relative;margin:0 5px;overflow:hidden;}
.listStatus:after{display:block;content:'';clear:both;}
.listStatus > li{display:block;position:relative;float:left;padding:0 5px;font-size:11px;text-align:center;box-sizing:border-box;}
.listStatus > li:before{display:block;content:'';position:absolute;top:50%;left:-1px;margin-top:-5px;height:10px;border-left:1px #eee solid;}
.listStatus > li b{font-size:19px;font-weight:600;color:#4bacff;}
.listStatus > li b.important{border-bottom:1px #000 solid;}
.listStatus > li .label{display:inline-block;margin-bottom:2px;font-size:11px;}
.listStatus > li .label.today{border-bottom:1px #ccc solid;}
.listStatus.cols3 li{width:33.3333%;}

.listIcon{display:block;position:relative;padding:0 5px;}
.listIcon > li{display:block;position:relative;padding-left:20px;margin:5px 0;line-height:18px;min-height:18px;}
.listIcon > li .icon{display:block;position:absolute;top:0;left:0;width:16px;font-size:11px;color:#999;text-align:center;}

.listBoard{display:block;margin:15px 0;position:relative;}
.listBoard > li{margin-bottom:10px;padding:15px;background:#fff;/*border:1px #eee solid;*/border-radius:10px;box-shadow:1px 1px 3px rgba(0,0,0,0.1);transition-duration:0.5s;opacity:0;}
.listBoard > li > a{display:block;position:relative;margin:-15px;padding:15px 30px 15px 15px;}
.listBoard > li > a:before{display:block;content:'';position:absolute;top:50%;right:5px;margin-top:-10px;width:15px;height:20px;background:url(../images/icon_arrow_right.png) no-repeat center center;background-size:auto 100%;opacity:0.3;}
.listBoard > li .subject{display:block;}
.listBoard > li .desc{display:block;position:relative;font-size:11px;color:#777;text-align:right;line-height:18px;}
.listBoard > li .subject + .desc,
.listBoard > li .desc + .subject,
.listBoard > li .desc + ul{margin:5px 0;}
.listBoard > li .desc i{margin-right:5px;color:#bbb;}
.listBoard > li .desc .comment{position:absolute;top:0;left:0;}
.listBoard > li .desc .status{position:absolute;top:0;left:0;}
.listBoard > li .count{font-size:11px;color:#777;}
.listBoard > li .content{display:block;margin:5px 0;}
.listBoard > li.show{opacity:1;}
.listBoard > li.today .date:after{display:inline-block;content:'Today';margin-left:5px;font-size:11px;font-weight:bold;color:#ce2e2e;}
.listBoard > li.week .date:after{display:inline-block;content:'Week';margin-left:5px;font-size:11px;font-weight:bold;color:#ce862e;}
.listBoard > li.today{border-color:#aaa;}
.listBoard > li.item1{transition-delay:0.1s;}
.listBoard > li.item2{transition-delay:0.2s;}
.listBoard > li.item3{transition-delay:0.3s;}
.listBoard > li.item4{transition-delay:0.4s;}
.listBoard > li.item5{transition-delay:0.5s;}
.listBoard > li.item6{transition-delay:0.6s;}
.listBoard > li.item7{transition-delay:0.7s;}
.listBoard > li.item8{transition-delay:0.8s;}
.listBoard > li.item9{transition-delay:0.9s;}
.listBoard > li.item10{transition-delay:1s;}

.listTalk{display:block;margin:15px 0;position:relative;}
.listTalk > li{margin-bottom:10px;transition-duration:0.5s;opacity:0;}
.listTalk > li > div{margin-bottom:10px;padding:10px 15px;background:#fff;border-radius:10px;box-shadow:1px 1px 3px rgba(0,0,0,0.15);}
.listTalk > li > div a{display:block;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}
.listTalk > li > div.send{margin-right:50px;}
.listTalk > li > div.send.ready{border:1px #aaa solid;}
.listTalk > li > div.recv{margin-left:50px;background:#fffabe;}
.listTalk > li > div .datetime{display:block;margin:-5px 0 5px;font-size:11px;color:#949494;text-align:left;}
.listTalk > li > div.recv .datetime{text-align:right;}
.listTalk > li > div.recv .ready{background:url(../images/icon_more.png) no-repeat center center;background-size:50px auto;}
.listTalk > li.show{opacity:1;}
.listTalk > li.item1{transition-delay:0.1s;}
.listTalk > li.item2{transition-delay:0.2s;}
.listTalk > li.item3{transition-delay:0.3s;}
.listTalk > li.item4{transition-delay:0.4s;}
.listTalk > li.item5{transition-delay:0.5s;}
.listTalk > li.item6{transition-delay:0.6s;}
.listTalk > li.item7{transition-delay:0.7s;}
.listTalk > li.item8{transition-delay:0.8s;}
.listTalk > li.item9{transition-delay:0.9s;}
.listTalk > li.item10{transition-delay:1s;}

.btnArea{margin:15px 0;}
.btnArea > a{width:100%;}
.btnArea > a > i{margin-right:10px;font-size:12px;}
.btn_listNext{display:block;position:relative;margin:0 auto;height:40px;text-indent:-9999em;border-radius:10px;background:#fff url(../images/icon_more.png) no-repeat center center;/*border:1px #ddd solid;*/box-shadow:1px 1px 3px rgba(0,0,0,0.2);background-size:auto 100%;}
.btn_outlink{display:inline-block;position:relative;padding:5px 20px 5px 10px;line-height:100%;border:1px #ddd solid;border-radius:5px;}
.btn_outlink:after{display:block;content:'';position:absolute;top:0;bottom:0;right:5px;width:10px;font-size:11px;background:url(../images/icon_arrow_right.png) no-repeat center center;background-size:auto 50%;}

em.status{display:inline-block;width:50px;padding:3px 0;font-size:11px;color:#fff;line-height:110%;text-align:center;background:#ccc;border-radius:5px;vertical-align:middle;}
em.status.success{background:#2cb1f2;}
em.status.notice{background:#ff6a9a;}
em.status.type1{background:#1481ba;}
em.status.type2{background:#53b46a;}
em.status.type3{background:#ba6114;}

.listProcess{display:block;margin:-10px 0;position:relative;}
.listProcess:after{display:block;content:'';clear:both;}
/*
.listProcess:before{display:block;content:'';position:absolute;top:5px;left:8.3333%;right:8.3333%;border-top:1px #ddd solid;}
.listProcess > li{display:block;position:relative;float:left;padding-top:20px;color:#bbb;text-align:center;}
.listProcess > li:before{display:block;content:'';position:absolute;top:0;left:50%;margin-left:-5px;width:10px;height:10px;border-radius:50%;background:#fff;border:1px #ddd solid;}
.listProcess > li.end{}
.listProcess > li.end:before{background:#2bbd29;border-color:#2bbd29;}
.listProcess > li.ing{}
.listProcess > li.ing:before{background:#e6702b;border-color:#e6702b;}
*/
/*
.listProcess > li{display:block;position:relative;float:left;padding:10px 0;width:25%;color:#bbb;text-align:center;}
.listProcess > li > i{display:block;margin-bottom:5px;font-size:20px;color:#bbb;}
.listProcess > li > b{display:block;font-size:11px;font-weight:normal;line-height:120%;}
*/
/*
.listProcess.cols4 > li{width:25%;}
.listProcess.cols5 > li{width:20%;}
.listProcess.cols6 > li{width:16.6666%;}
.listProcess.cols7 > li{width:14.2857%;}
.listProcess.cols8 > li{width:12.5%;}
*/
.listProcess > li{display:block;position:relative;float:left;margin:5px 0;padding-left:20px;width:33.3333%;color:#bbb;box-sizing:border-box;}
.listProcess > li > i{display:block;position:absolute;top:50%;left:0;margin-top:-10px;font-size:15px;color:#ddd;line-height:20px;}
.listProcess > li > b{display:block;font-size:11px;font-weight:normal;line-height:120%;}
.listProcess > li.use{color:#222;}
.listProcess > li.use > i{color:#4bacff;}

.previewWrap{position:relative;overflow:hidden;}
.previewWrap > h3{display:block;line-height:120%;min-height:40px;}
.previewWrap .listStatus{position:absolute;top:15px;right:15px;margin:0 -5px;}
.previewWrap .listStatus li{width:100px;}
.previewWrap .listStatus li.wide{width:120px !important;}
.previewWrap .listStatus.cols2 li{width:100px;}
.previewWrap .listStatus.cols2 > li b{font-size:17px;}
.previewWrap .listStatus.cols3 li{width:80px;}
.previewWrap > a{display:block;margin:-15px;padding:15px;}
.previewWrap > a:before{display:block;content:'';position:absolute;top:50%;right:5px;margin-top:-10px;width:15px;height:20px;background:url(../images/icon_arrow_right.png) no-repeat center center;background-size:auto 100%;opacity:0.3;}

.formUI ul{display:block;margin-bottom:10px;font-size:12px;}
.formUI ul > li{display:block;position:relative;margin-bottom:10px;}
.formUI ul > li label{display:block;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all;}
.formUI ul > li label em{color:#ee3300;}
.formUI ul > li select,
.formUI ul > li input[type='text'],
.formUI ul > li input[type='password']{padding-left:5px;height:30px;background:#fff;border:1px #ccc solid;border-radius:5px;box-sizing:border-box;}
.formUI ul > li textarea{padding:5px;background:#fff;border:1px #ccc solid;border-radius:5px;box-sizing:border-box;}
.formUI ul > li .value{display:block;padding-left:5px;line-height:30px;background:#fff;border:1px #ccc solid;border-radius:5px;box-sizing:border-box;}
.formUI .btn_submit{display:inline-block;margin-top:10px;width:100%;height:40px;font-size:15px;font-weight:bold;color:#fff;line-height:40px;background:#1481ba;border:0px none;border-radius:5px;}
.formUI input[type='file'].btn_file{position:absolute;top:-99999px;}
.formUI span.btn_file{display:block;width:0px;height:0px;overflow:hidden;}
.scrollBox{margin-bottom:10px;padding:10px;height:80px;font-size:11px;color:#747474;line-height:130%;overflow-y:auto;border:1px #eee solid;box-sizing:border-box;}
.formOption{margin:20px 0;font-size:11px;color:#666;}
.formOption ul{display:block;margin:30px 0;}
.formOption ul li{display:block;position:relative;margin:10px 0;}
.formOption ul li a{position:absolute;top:0;right:0;color:#666;}

.panel.login{padding-top:60px;background:#fff;overflow:hidden;}
.panel.login:before{display:block;content:'';position:absolute;top:-30%;left:-30%;right:-30%;height:60%;border-radius:50%;background:#4bacff;box-shadow:0 1px 3px rgba(0,0,0,0.1);z-index:0;}
.panel.login:after{display:block;content:'';position:absolute;top:-30%;left:-10%;right:-10%;height:60%;border-radius:50%;background:#0090d5;z-index:0;}
.panel.login h1{display:block;position:absolute;top:18%;left:0;right:0;text-align:center;font-size:28px;font-weight:normal;color:#fff;text-align:center;z-index:1;}
.panel.login h1 img{margin:20px 0;width:80px;}

.login .formUI{display:block;position:absolute;top:35%;left:50%;margin-left:-130px;width:260px;font-size:12px;}
.login .formUI ul > li input[type='text'],
.login .formUI ul > li input[type='password']{padding:0 20px;height:40px;border:1px #ccc solid;border-radius:5px;box-sizing:border-box;}
.login .formUI ul > li .value{padding:0 20px;height:40px;line-height:40px;border:1px #ccc solid;border-radius:5px;box-sizing:border-box;}
.login .formUI .btn_submit{height:45px;background:#1c465d;}
.login .copyright{display:block;position:absolute;bottom:10%;left:0;right:0;}

.bannerWrap{margin:5px -5px 0;background:none;box-shadow:none;overflow:hidden;}
.bannerWrap ul li{font-size:11px;text-align:center;}
.bannerWrap ul li a{display:block;margin:0 5px 5px;height:50px;line-height:48px;background:#fff;border:1px #ddd solid;overflow:hidden;}
.bannerWrap ul li img{display:inline-block !important;max-width:90%;width:auto;max-height:100%;}

table.mapData{width:100%;border-top:1px #ddd solid;letter-spacing:-1px;overflow:hidden;table-layout:fixed;}
table.mapData thead{background:#d5ecff;}
table.mapData thead th{padding:5px;}
table.mapData thead th span{font-size:11px;}
table.mapData thead th span br{display:none;}
table.mapData th,
table.mapData td{padding:5px;font-weight:normal;text-align:center;border-bottom:1px #ddd solid;}
table.mapData thead tr th:last-child{min-width:60px;}
table.mapData tbody tr td:last-child{position:relative;/*padding:0;*/line-height:140%;background:#ffe9e9;/*border-bottom:0px none;*/}
table.mapData tbody tr td .now b{display:block;line-height:20px;font-size:20px;color:#4bacff;}
table.mapData tbody tr td .now b.rank1{display:block;height:40px;text-indent:-9999em;background:url(../images/icon_rank1.png) no-repeat center center;background-size:auto 100%;}
table.mapData tbody tr td .now b.rank2{display:block;height:30px;text-indent:-9999em;background:url(../images/icon_medal2.png) no-repeat center center;background-size:auto 100%;}
table.mapData tbody tr td .now b.rank3{display:block;height:30px;text-indent:-9999em;background:url(../images/icon_medal3.png) no-repeat center center;background-size:auto 100%;}
table.mapData thead tr th.first{position:relative;padding-right:10px;}
table.mapData tbody tr td{font-size:15px;}
table.mapData tbody tr td > span,
table.mapData tbody tr td .now b > span{display:block;font-size:16px;color:#000;line-height:130%;}
table.mapData tbody tr td .now b > span br{display:none;}

.partnersList{display:block;}
.partnersList li{display:block;position:relative;margin-bottom:20px;box-sizing:border-box;}
.partnersList li > a{display:block;position:relative;padding:0 20px 0 170px;min-height:70px;}
.partnersList li > a:after{display:block;content:'';position:absolute;top:0;bottom:0;right:0;width:20px;background:url(../images/icon_arrow_right.png) no-repeat center center;background-size:100% auto;opacity:0.3;transition-duration:0.3s;}
.partnersList li > a.hover:after{opacity:1;}
.partnersList li span{display:block;margin-bottom:5px;}
.partnersList li .thumb{position:absolute;top:0;left:0;padding:5px;width:160px;height:70px;line-height:60px;text-align:center;border:1px #eee solid;border-radius:5px;box-sizing:border-box;overflow:hidden;}
.partnersList li .thumb > img{max-width:100%;max-height:100%;}
.partnersList li .name{font-size:14px;font-weight:bold;}

.listGram{display:block;margin:-15px -15px 15px;background:#fff;}
.listGram > li{display:block;padding:0 15px 30px;font-size:13px;transition-duration:0.5s;opacity:0;}
.listGram > li .thumb{display:block;margin:0 -15px 10px;height:200px;overflow:hidden;}
.listGram > li .thumb ul{display:block;}
.listGram > li .thumb ul > li > div{display:block;height:200px;background-position:center center;background-repeat:no-repeat;background-size:cover;}
.listGram > li b{display:block;margin:5px 0;font-size:14px;}
.listGram > li .btn_more{display:inline-block;margin-left:10px;color:#8e8e8e;}
.listGram > li .desc{display:block;position:relative;margin:5px 0;color:#555;}
.listGram > li .desc .summary{display:block;}
.listGram > li .desc .full{display:none;}
.listGram > li .desc.active .summary{display:none;}
.listGram > li .desc.active .full{display:block;}
.listGram > li .tags{display:block;position:relative;margin:5px 0;color:#00376b;}
.listGram > li .tags span{display:inline-block;margin-right:5px;}
.listGram > li .tags .summary{display:block;}
.listGram > li .tags .full{display:none;}
.listGram > li .tags.active .summary{display:none;}
.listGram > li .tags.active .full{display:block;}
.listGram > li .date{display:block;margin:5px 0;font-size:11px;color:#939393;}
.listGram > li.show{opacity:1;}
.listGram > li.item1{transition-delay:0.1s;}
.listGram > li.item2{transition-delay:0.2s;}
.listGram > li.item3{transition-delay:0.3s;}
.listGram > li.item4{transition-delay:0.4s;}
.listGram > li.item5{transition-delay:0.5s;}
.listGram > li.item6{transition-delay:0.6s;}
.listGram > li.item7{transition-delay:0.7s;}
.listGram > li.item8{transition-delay:0.8s;}
.listGram > li.item9{transition-delay:0.9s;}
.listGram > li.item10{transition-delay:1s;}

li.itemGram{display:block;padding:0 15px 15px;font-size:13px;transition-duration:0.5s;opacity:0;overflow:hidden;}
li.itemGram .thumb{display:block;margin:0 -15px 10px;height:200px;background:#333;overflow:hidden;}
li.itemGram .thumb ul{display:block;}
li.itemGram .thumb ul > li{height:200px;line-height:200px;text-align:center;}
li.itemGram .thumb ul > li > img{max-width:100%;max-height:100%;}
li.itemGram .thumb ul > li > div{display:block;height:200px;background-position:center center;background-repeat:no-repeat;background-size:cover;}
li.itemGram b{display:block;margin:5px 0;font-size:14px;}
li.itemGram .btn_more{display:inline-block;margin-left:10px;color:#8e8e8e;}
li.itemGram .desc{display:block;position:relative;margin:5px 0;color:#555;text-align:left !important;}
li.itemGram .tags{display:block;position:relative;margin:5px 0;color:#00376b;}
li.itemGram .tags span{display:inline-block;margin-right:5px;}
li.itemGram .bx-wrapper .bx-controls .bx-pager{bottom:10px;left:inherit;right:10px;width:50px;height:25px;line-height:25px;text-align:center;background:rgba(255,255,255,0.5);border-radius:10px;overflow:hidden;white-space:nowrap;}

.commentList{clear:both;}
.commentList:after{display:block;content:'';clear:both;}
.commentList li{position:relative;float:left;max-width:80%;font-size:12px;clear:both;}
.commentList li .content{display:block;padding:10px;background:#fff;border:1px #ccc solid;border-radius:10px;}
.commentList li .datetime{position:absolute;bottom:0;right:-60px;font-size:11px;color:#777;}
.commentList li.admin{float:right;}
.commentList li.admin .content{background:#fff9cc;}
.commentList li.admin .datetime{left:-70px;}

/* ==============================================================================================================
= 반응형
============================================================================================================== */
/*Mobile*/
@media all and (max-width:1024px){
}

/* Phone */
@media all and (max-width:639px){
}

/* Phone */
@media all and (max-width:321px){
	.clientUse.active{height:420px;}
	.previewWrap .listStatus.cols2 li{width:85px;}
	.previewWrap .listStatus.cols3 li{width:70px;}
}

/* Tablet */
@media all and (min-width:640px) and (max-width:1024px){
}