@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/

.msr{font-family: 'Montserrat', sans-serif !important;}
.rw{font-family:'Raleway', sans-serif !important;}
#sub_visual .title{font-family: 'jn', sans-serif !important; letter-spacing:-0.065em}
.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1200px; padding:0 3%; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.tit_h3{font-size:30px;font-weight:400; color:#323232;  position:relative; letter-spacing:-1px}
.tit_h3:after{content:''; width:60px; height:1px; display:block; background:#505050; margin: 0 auto; margin-top:20px;}
.tit_h4{font-size:26px; color:#323232; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#323232; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}


.mEnter{display:block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}

.tac{text-align:center;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:bold}
.Tblack{color:#323232}
.Tred{color:#e83428}

@media all and (min-width:768px) {

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h3{font-size:40px;}
.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}


.mb{margin-bottom:45px !important; }
.bmb{margin-bottom:60px !important;}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 10px}
}

@media all and (min-width:1200px) {

.mEnter{display:inline-block;}

.txt-m{font-size:30px;}
.txt-l{font-size:40px;}

.tit_h3{font-size:40px; }
.tit_h3:after{margin-top:25px;}

.tit_h4{font-size:30px; }

.tit_h5{font-size:20px; }


.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}
.pdinner{padding:0 20px}



}

/*owl 컨트롤러 css변경*/
.owl-controls{width:100%; margin:0 auto;}

/*owl pagenation css변경 */
.page_btn .owl-page span{width:20px !important; height:20px !important; background:none !important; border:4px solid #ffffff; border-radius:20px; opacity:0.7 }
.page_btn .owl-page.active span{opacity:1;}

.page_btn2 .owl-controls {min-height:32px;}
.page_btn2 .owl-page span{width:5px !important; height:5px !important; background:#808080 !important; border-radius:20px; position:relative; opacity:1 !important; margin:0 20px !important;}
.page_btn2 .owl-page.active span:before{content:''; width:30px; height:30px; position:absolute; margin-left:-16px; left:50%; margin-top:-16px; top:50%; border:1px solid #808080; border-radius:200px;}

/*owl navigation css변경*/
.owl-theme .owl-controls{position:relative}
.arrow_btn .owl-buttons{position:absolute; width:100%; top:-250px;}
.arrow_btn .owl-buttons div{position:absolute; font-family:'FontAwesome'; text-indent:-999999px; background:none !important; padding:0px !important; margin:0px !important;}
.arrow_btn .owl-buttons div:first-child{left:2%;}
.arrow_btn .owl-buttons div:last-child{right:2%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{content:'\f104'; font-family:'FontAwesome'; position:absolute; left:0; top:0; text-indent:0 !important; font-size:3em;}
.arrow_btn .owl-buttons div.owl-next:after{content:'\f105'; right:0; left:auto;}

.pop_page_btn{position:relative;}
.pop_page_btn .owl-controls{position:absolute; bottom:0px; text-align:right !important}
.pop_page_btn .owl-pagination{display:inline-block; margin:10px; background:rgba(0,0,0,0.5); padding:1px 10px; border-radius:500px; height:22px;}
.pop_page_btn .owl-controls .owl-page span{width:10px !important; height:10px !important; background:#ffffff !important; margin:2px 4px !important}
.pop_page_btn .owl-controls .active span{background:#f6c94f !important}

@media all and (min-width:1200px) {
.arrow_btn .owl-buttons div:first-child{left:-10%;}
.arrow_btn .owl-buttons div:last-child{right:-10%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{font-size:50px;}
}

/**/
.wrap{max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative; }

 /*main visual 컨트롤러 및 bg*/  

#section00 .hide{height:0}
.mainvisual {position:relative; overflow:hidden;}
.mainvisual #mainslider li{background:url(../img/main01.jpg) no-repeat center center; min-height:440px; background-size:cover !important;}
.mainvisual #mainslider li.main02{background:url(../img/main02.jpg) no-repeat center center;}
.mainvisual #mainslider li.main03{background:url(../img/main03.jpg) no-repeat center center;}

.mainvisual .bx-wrapper .bx-has-controls-direction{min-width:300px; max-width:1200px; width:90%; margin:0 auto; position:absolute; bottom:100px; right:0; left:0;}
.mainvisual .bx-wrapper .bx-has-controls-direction:before{content:''; position:absolute; width:calc( 100% - 65px ); height:1px; background:#ffffff; margin:0 auto; right:0; left:0; max-width:650px}
.mainvisual .bx-wrapper  .bx-has-controls-direction .bx-controls-direction a{top:auto;}
.mainvisual .bx-wrapper .bx-prev{background:url(../img/controls.png) no-repeat -0px -32px; left:0;}
.mainvisual .bx-wrapper .bx-next{background:url(../img/controls.png) no-repeat -43px -32px; right:0;}

.mainvisual  #bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1000px;  width:90%; margin:0 auto; left:0; right:0; bottom:40px;}
.mainvisual  #bx-pager li{display:block; width:33.33%; float:left; text-align:center; padding-top:18px; position:relative;}
.mainvisual  #bx-pager li a{color:#ffffff; font-weight:800; font-size:14px;}
.mainvisual  #bx-pager li a:before{position:absolute; content:''; width:8px; height:8px; background:#ffffff; border-radius:100px; top:0; left:0; bottom:0; right:0; margin: 0 auto}
.mainvisual  #bx-pager li a.active{color:#f6c94f;  transition:0.3s}
.mainvisual  #bx-pager li a.active:before{background:#f6c94f; transition:0.3s}

.mainvisual .bx-wrapper .bx-has-controls-direction .bx-controls-direction a{display:none;}/*화살표..*/

@media all and (min-width:768px) {
.mainvisual  #bx-pager li a{font-size: 15.5px}
.mainvisual #mainslider li{min-height:600px}
.mainvisual .bx-wrapper .bx-has-controls-direction{bottom:130px;}
.mainvisual  #bx-pager li{padding-top:17px;}
.mainvisual  #bx-pager{bottom:70px;}
}


@media all and (min-width:1200px) {
.mainvisual #mainslider li{min-height:750px}
.mainvisual .bx-wrapper .bx-has-controls-direction{bottom:140px;}
.mainvisual  #bx-pager{bottom:80px;}
.mainvisual  #bx-pager li{padding-top:16px;}

}

/*mainvisual 텍스트*/
.mainvisual .inner{text-align:center; color:#ffffff; padding-top:100px}
.mainvisual .inner a{color:#ffffff}
.mainvisual .inner h2 {margin-bottom:20px; font-size:3em; letter-spacing:-1px; font-weight:800}
.mainvisual .inner h2 img{width:200px; display:inline-block}
.mainvisual .inner h2.visutxt img{width:280px}
.mainvisual .inner p{font-size:17px; margin-bottom:20px;}
.mainvisual .inner a.line_link{font-size:0.9em; font-weight:800; letter-spacing:5px; display:inline-block; padding:10px 40px; border:1px solid #ffffff}

@media all and (min-width:768px) {
.mainvisual .inner{padding-top:130px;}
.mainvisual .inner h2{font-size:3.5em}
.mainvisual .inner h2 img{width:300px}
.mainvisual .inner h2.visutxt img{width:500px}
.mainvisual .inner p{font-size:22px;}
}

@media all and (min-width:1200px) {
.mainvisual .inner{padding-top:210px;}
.mainvisual .inner h2{margin-bottom:30px;}
.mainvisual .inner h2 img{width:400px}
.mainvisual .inner h2.visutxt img{width:550px}
.mainvisual .inner p{margin-bottom:30px; font-size:26px; font-weight:300; font-family:'jn';}
.mainvisual .inner a{ padding:15px 50px;}
}


/*section 공통*/
.section{padding:60px 0; position:relative}
.section .section_top{text-align:center;}
.section .section_top h3{font-family:'Raleway', 'jn'; margin-bottom:20px; text-transform:uppercase}
.section .section_top h3 span{font-size:0.7em; display:block}
.section .section_top h3 b{font-weight:normal}
.section .section_top p{color:#808080}

.pointDot{padding-left:15px; position:relative}
.pointDot:before{content:''; width:8px; height:8px;border-radius:50px; position:absolute; right:0; top:0px; bottom:0; margin:auto; background:#de5e00}
.dot01:before{background:#de5e00}
.dot02:before{background:#0c88e6}
.dot03:before{background:#656565}
.dot04:before{background:#0c88e6}
.dot05:before{background:#413b34}

.cate01{color:#de5e00}
.cate02{color:#0c88e6}
.cate03{color:#656565}
.cate04{color:#0c88e6}
.cate05{color:#413b34}



@media all and (min-width:768px) {
.section{padding:80px 0;}
.section .section_top h3{margin-bottom:25px;}
}

@media all and (min-width:1200px) {
/*.section{padding:120px 0;}*/
.section .section_top h3{margin-bottom:30px;}
}


/*section01 이벤트
#event_li .item .box{border:1px solid #c8c8c8; text-align:center; padding:40px 15px; margin-bottom:20px;}
#event_li .item .box{text-align:center;}
#event_li .item .box .date, #event_li .item .box a.line_btn{display:block; clear:both;}
#event_li .item .box .date{margin-bottom:20px;}
#event_li .item .box h4{font-weight:600; font-size:1.4em; margin-bottom:20px; word-break:keep-all; height:65px}
#event_li .item .box a.line_btn{padding:5px 20px; border:1px solid #808080; border-radius:500px; font-size:0.9em; display:inline-block}

#event_li .item_bg{background:#909090; color:#ffffff; background-size:cover !important;}
#event_li .ibg01{background:url(../img/item_bg.jpg) no-repeat center center;}
#event_li .ibg02{background:url(../img/item_bg2.jpg) no-repeat center center; }
#event_li .ibg03{background:url(../img/item_bg3.jpg) no-repeat center center; }
#event_li .ibg04{background:url(../img/item_bg4.jpg) no-repeat center center; }


#event_li .item_bg .box a.line_btn{color:#ffffff; border:1px solid #ffffff}
#event_li.arrow_btn .owl-buttons{top:-170px}
#event_li.arrow_btn .owl-buttons div{color:#c8c8c8; font-size:12px}

@media all and (min-width:1200px) {
#event_li.arrow_btn .owl-buttons{top:-230px}
}*/

/*section01*/
#section01 h3{text-transform:uppercase; font-size:20px; margin-bottom:20px;}
#section01 h3:after{display:none;}
#section01 .notice h3 .pointDot:before{background:#cfdb00}
#section01 .right h3 .pointDot:before{background:#f6c94f}


#section01 .notice ul{position:relative; padding:15px 10px; border:1px solid #c8c8c8; margin-bottom:20px;}
#section01 .notice ul:before{content:''; position:absolute; height:3px; background:#cfdb00; width:80px; left:0; top:0;}

#section01 .notice ul li{overflow:hidden; margin-bottom:3px; font-size:15.5px !important;}
#section01 .notice ul li:last-child{margin-bottom:0;}
#section01 .notice ul li span{width:calc(100% - 100px); display:block; float:left;  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#section01 .notice ul li b{width:100px; display:block; float:left; color:#323232; font-weight:600}
#section01 .notice ul li span.date{display:none;}

#event_li .item .box{border:1px solid #c8c8c8; padding:20px 15px; margin:0 1%; box-sizing:border-box !important; font-size:15.5px !important; }
#event_li .item .box{height:200px;}
#event_li .owl-controls{margin-top:10px}
#event_li.arrow_btn .owl-buttons{top:-130px}
#event_li.arrow_btn .owl-buttons div{color:#c8c8c8; font-size:12px}


#event_li .item .box h4{font-size:1.1em; font-weight:bold; margin-bottom:10px; height:50px; display: block;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2; 
overflow: hidden;}
#event_li .item .box .sdcate{display:inline-block; font-size:12px; margin-bottom:5px; font-weight:normal; padding:3px 7px; background:#808080; color:#ffffff; margin-right:5px; border-radius:80px;}
#event_li .item .box .sdend{background:#969696}
#event_li .item .box .sd01{background:#ff6c00}
#event_li .item .box .sd02{background:#f6ca4f}
#event_li .item .box .sd03{background:#656565}
#event_li .item .box .sd04{background:#507991}
#event_li .item .box .sd05{background:#c0b2d1}

#event_li .item .box p{margin-bottom:5px;}

#event_li .noData{text-align:center;}
#event_li .noData p:before{font-family: 'FontAwesome'; font-size:80px; display:inline-block; content:"\f11a"; display:block; color:#e6e6e6}
#event_li .noData p{color:#c8c8c8}

@media all and (min-width:540px) {
#event_li .item .box{height:241px;}
#event_li .item .box p{min-height:85px;}
#event_li .noData p:before{padding-top:25px}
#event_li.arrow_btn .owl-buttons{top:-170px}
}
@media all and (min-width:768px) {
#section01{padding:60px 0px}
#section01 .notice ul{height:241px; padding:30px 25px;}
#section01 .notice ul li span{width: calc( 100% - 180px ); float:left; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#section01 .notice ul li span.date{width:80px; float:right; text-align:right; display:block;}
#section01 .col-02{margin:0 1.5%; width:47%; float:left;}

#event_li .item .box{padding:20px;}
}

@media all and (min-width:1200px) {
#section01 .arrow_btn .owl-buttons div:first-child{left:-20px}
#section01 .arrow_btn .owl-buttons div:last-child{right:-20px;}
}

/*section02*/
#section02{color:#ffffff;background: #808080 url(../img/bg3.jpg) no-repeat center center;background-size:cover !important;}
#section02 h3, #section02 p{color:#ffffff}
#section02 h3:after{background:#ffffff}
#section02 a{color:#ffffff}

.programbox{overflow:hidden; font-size:0; text-align:center;display: flex;}
.programbox li{display:inline-block; font-size:16px; width:47%; margin: 1.5%; vertical-align:top; padding:20px 3%; background:#303030; height:150px; position:relative; text-align:center;}
.programbox li a{display:block; width:100%; height:100%}
.programbox li img{max-width:75px; padding:10px}
.programbox li:hover img{transform:scale(1.2); transition:0.3s}
.programbox li h4 span{display:none;}
.programbox li h4{font-size:1.05em; position:absolute; left:0; bottom:0; right:0; left:0; margin:auto; font-weight:700; margin-bottom:20px}

.programbox li.pro01{background:#de5e00;background: #a5d897;}
.programbox li.pro02{background:#f6c94f;background: #78c26a;}
.programbox li.pro03{background:#656565;/*! width: 97%; */}
.programbox li.pro04{background:#0c88e6;/*! display: none; */background: #4fa883;}

@media all and (min-width:768px) {
.programbox li{text-align:left;}
.programbox li img{position:absolute; right:30px; top:30px}
.programbox li h4{font-size:1.35em; margin-left:30px; margin-bottom:30px;}
.programbox li h4 span{display:block;  font-family:'Raleway'; font-size:0.8em; font-weight:bold}
}

@media all and (min-width:1200px) {
 .programbox li.pro03{/*! width: 30%; */background: #5ea332;}
.programbox li{width: 24%;margin:0.5%;/*! width: 30%; */}
.programbox li{height:280px;}
}

.spacebox{overflow:hidden;}
.spacebox ul{width:97%; margin: 0 auto;}
.spacebox ul li{padding:30px 3%; border-top:3px solid #ffffff; border-bottom:1px solid #ffffff; margin-bottom:20px; position:relative; border-color:rgba(255,255,255,0.5)}
.spacebox ul li p{width:75%}
.spacebox ul li img{max-width:75px; padding:10px; position:absolute; right:0; top:0;  bottom:0; margin:auto; margin-right:3%;}
.spacebox ul li:hover{border-color:rgba(255,255,255,0.8); transition:0.3s}
.spacebox ul li:hover img{transform:scale(1.2); transition:0.3s}
.spacebox ul li:last-child{margin-bottom:0}
.spacebox ul li h4{font-size:1.1em; font-weight:700; margin-bottom:5px}

@media all and (min-width:768px) {
.spacebox ul{width:99%}
.spacebox ul li{float:left; width:47%; margin: 0 1.5%;}
}

@media all and (min-width:860px) {
.spacebox ul li p{width:60%}
}

@media all and (min-width:1200px) {
.spacebox ul{width:100%}
}


/*section03 공지사항*/
#section03{}
.noticebox .note{border:1px solid #c8c8c8; padding:20px 15px; margin-bottom:20px}
.noticebox .note dl dt{font-weight:700; margin-bottom:10px; font-size:1.1em}
.noticebox .note dl dt span.cate{display:block; font-size:0.95em}
.noticebox .note dl dd.txt{margin-bottom:10px;}
.noticebox .note dl dd.date{font-size:0.9em}

.notice_all{border:1px solid #c8c8c8; padding:20px 15px; margin-bottom:20px}
.notice_all ul li{overflow:hidden;}
.notice_all ul li span b{font-weight:600}
.notice_all ul li span.date{display:none;}

.social{border:1px solid #c8c8c8; padding:20px 15px; margin-bottom:20px; height:200px; overflow-y:scroll}

@media all and (min-width:640px) {
.notice_all ul li span{display:inline-block; width:70%;}
.notice_all ul li span.date{display:inline-block; width:20%; float:right; text-align:right}
}

@media all and (min-width:768px) {
.noticebox .note{float:left; width:49%; padding:30px 20px;}
.noticebox .note.mr{margin-right:2%}
.social{height:250px}
.notice_all{padding:30px 20px;}

.noticebox .note dl dt{
 height:75px;
overflow : hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp:2; /* 라인수 */
-webkit-box-orient: vertical;
white-space:normal;}
  /*firefox only hack*/
  @-moz-document url-prefix(){
	.noticebox .note dl dt{white-space:normal;word-wrap:break-word; height:75px;}
  }

.noticebox .note dl dd.txt{
height:70px;
overflow : hidden;  
text-overflow: ellipsis;  
display: -webkit-box;  
-webkit-line-clamp:3; /* 라인수 */
-webkit-box-orient: vertical;
white-space:normal;}
  /*firefox only hack*/
  @-moz-document url-prefix(){
  .noticebox .note dl dd.txt{white-space:normal;word-wrap:break-word; height:70px;}
  }
}

@media all and (min-width:1024px) {
#section03 .left, #section03 .right{width:49%; float:left;}
#section03 .mr{margin-right:2%;}
}

@media all and (min-width:1200px) {

.noticebox{margin-bottom:5px;}
.noticebox .note{height:250px;}
.notice_all{height:250px;}
.notice_all ul li{margin:12px 10px}

}

/*팝업존*/

.popup{border:1px solid #c8c8c8; margin-bottom:20px; position:relative;}
.popup h4{font-weight:700; background:#0c88e6; position:absolute; z-index:10; height:60px; width:60px; line-height:60px; color:#ffffff; font-size:0.95em; text-align:center;}

@media all and (min-width:768px) {
.popup h4{height:80px; width:80px; line-height:80px; font-size:1.1em;}
}



/*퀵메뉴*/
.quicl_li{overflow:hidden; text-align:center}
.quicl_li li{display:inline-block; max-width:180px; vertical-align:top}
.quicl_li li{width:48%; text-align:center;}
.quicl_li li a:hover img{transform:scale(1.1); transition:0.3s}
.quicl_li li img{max-width:80px; padding:10px}
.quicl_li li span{display:block; color:#323232; font-weight:700;}

@media all and (min-width:768px) {
.quicl_li li{width:30%}
}

@media all and (min-width:1200px) {
.quicl_li li img{max-width:100px}
}

/*
@media all and (min-width:800px) {
#section03 .pop_quick .left,
#section03 .pop_quick .right{width:49%; float:left;}
#section03 .pop_quick .mr{margin-right:2%}
}*/

/*footer*/
#footer{background:#313131; padding:50px 0px; color:#c8c8c8; font-size:0.9em; text-align:center;}
/*#footer div{background:url(../img/foot_logo.png) no-repeat right center;}*/
#footer p{margin-top:20px; font-size:0.8em}
#footer p span{font-weight:bold; color:#df6f0c}

.bottom_li{text-align:center; margin-bottom:10px;}
.bottom_li li{display:inline-block; margin: 0 0.5%;}
.bottom_li li a{color:#ffffff}

@media all and (min-width:768px) {
.bottom_li{text-align:left;}
.bottom_li li:first-child{margin-left:0}
#footer{text-align:left;}
#footer .pdinner{padding:0 3%}
}


@media all and (min-width:1200px) {
#footer .pdinner{padding:0 20px}
}
/*page up*/
#pageup {position:fixed; z-index:999; right:1%; bottom:5%; width:50px; height:50px; background-image:url('../img/Htop.png');background-repeat: no-repeat;  background-position:center center; background-size: 50px 50px; display:none; cursor:pointer; z-index:4000;}










/*서브레이아웃*/
#sub_visual{position:relative; padding:120px 0 30px;}
.sub01{ background:url(../img/subvisu01.jpg) no-repeat center center; }
.sub02{ background:url(../img/subvisu02.jpg) no-repeat center center; }
.sub03{ background:url(../img/subvisu03.jpg) no-repeat center center; }
.sub04{ background:url(../img/subvisu04.jpg) no-repeat center center; }
.sub05{ background:url(../img/subvisu05.jpg) no-repeat center center; }
.sub06{ background:url(../img/subvisu06.jpg) no-repeat center center; }
.sub07{ background:url(../img/subvisu07.jpg) no-repeat center center; }
.sub08{ background:url(../img/subvisu08.jpg) no-repeat center center; }

.sub010{ background:url(../img/subvisu10.jpg) no-repeat center center; }
.sub011{ background:url(../img/subvisu10.jpg) no-repeat center center; }
.sub012{ background:url(../img/subvisu12.jpg) no-repeat center center; }

#sub_visual{text-align:center; color:#ffffff;}
#sub_visual .tit_h2{font-weight:500; font-size:40px; margin-bottom:20px;}
#sub_visual .tit_h2 span{display:block;  font-family:'Raleway'; font-size:16px; font-weight:normal; letter-spacing:0; text-transform:uppercase; margin-bottom:10px}
#sub_visual .tit_h2:after{content:''; display:block; width:10px; height:10px; background:#cfdb00; border-radius:100px; margin:10px auto;}

@media all and (min-width:768px) {
#sub_visual .tit_h2{font-size:45px;}
#sub_visual p{font-size:18px}
}

@media all and (min-width:1200px) {
#sub_visual .tit_h2{font-size:50px;}
#sub_visual p{font-size:18px}
}


.sub_tab{display:none}
.sub_con{width:96%; margin: 0 auto; position:relative; min-height:400px; padding:50px 0px 0; }

/*2depth menu*/
#twodepthNav {position:relative; display:none; margin: 0 auto;  background:rgba(12,136,230,0.8);}
#twodepthNav ul {overflow:hidden}
#twodepthNav ul li {position:relative; width:25%; float:left;}
#twodepthNav ul li a:before{content:''; width:1px; height:20px; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; bottom:0; margin: auto;}
#twodepthNav ul li a{color:#ffffff}
#twodepthNav ul.li02 li{width:50%;}
#twodepthNav ul.li03 li{width:33.333%;}
#twodepthNav ul.li04 li{width:25%;}
#twodepthNav ul.li05 li{width:20%;}
#twodepthNav ul.li06 li{width:16.6%;}

#twodepthNav ul li a{display:block; padding:23px 0px;}
#twodepthNav ul li a:hover{color:#cfdb00; transition:0.3s}
#twodepthNav ul li:first-child a:before{width:0}
#twodepthNav ul li.active {background:#ffffff; font-weight:500;}
#twodepthNav ul li.active a{color:#323232; font-weight:bold}
#twodepthNav ul li.active:after {width:10px; height:10px; content: "";position:absolute; background:#cfdb00; top:43%; right:20px; border-radius:30px}

.con{position:relative; padding:30px 3% 80px 3%; min-height:700px;}
.con h3.tit_h3{padding-bottom:20px; border-bottom:1px solid #e6e6e6}

.path{display:block; margin-bottom:20px;}
.path li{color:#808080; font-size:0.9em; display:inline-block;}
.path li:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f105"; margin: 3px 7px 3px; vertical-align: middle;}
.path li:first-child:before{display:none;}

@media all and (min-width:1024px) {
#sub_visual{padding:130px 0px 0px}
#twodepthNav {position:relative; display:block; margin-top:50px;}
.sub_con{padding:80px 0px 0;}

}

@media all and (min-width:1200px) {
.sub_tab{display:block;background:#0788c7; padding:10px 0px; text-align:right; color:#ffffff; font-size:0.85em; text-align:right;}
.sub_tab h3, .sub_tab p{display:inline-block; margin-left:15px; color:#fbdf40; font-weight:bold}
.sub_tab h3{color:#ffffff}
.sub_tab h3 span{margin-right:10px; text-transform:uppercase; color:#fbdf40}
.sub_tab p {border-radius:50px; background:#462e16; padding:5px 10px;}
#sidemenu{display:block}
#twodepthNav ul.li02 li{width:25%;}
#sub_visual{padding:180px 0 0px;}
.sub_con{width:100%; margin: 0 auto;}
.con{ margin-left:230px;}

}





/*텍스트효과*/

.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1500ms;animation-fill-mode:both;animation-delay:300ms;animation-timing-fonction:ease-out;}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
	0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 1;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity:1;}
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
    0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 0;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity: 1;}
}




/*스크롤인디케이터*/
.dotMenu{display:none}
@media only screen and (min-width: 1200px) {
.dotMenu{display:block; position:fixed; z-index:10; top:40%; right:1%; width:150px;}
.dotMenu ul li{text-align:right; margin:10px; position:relative;}
.dotMenu ul li a{color:#ffffff; font-weight:400; font-size:14px}
.dotMenu ul li a span{opacity:0; display:inline-block; position:absolute; top:0; bottom:0; margin: auto auto; right:0px}
.dotMenu ul li a i{display:inline-block;width:20px;height:20px;border-radius:100px;border:5px solid #f6c94f;border-color: #76bd7c;}
.dotMenu ul li a:hover span, .dotMenu ul li a.active span{opacity:1; transition:0.5s; line-height:23px; padding:1px 20px; border-radius:100px; background:#76bd7c}
.dotMenu ul li a.active span{background:#de5e00;background: #359e81;}
.dotMenu ul li a.active i{border-color:#de5e00 !important;border-color: #359e81 !important;!i;!;}
}

#scroll-indicator-bullets{display: none;} 	

@media only screen and (min-width: 768px) {
#scroll-indicator-bullets{display: block;} 	
  #scroll-indicator-bullets { position: fixed; top: 50%; right:0; z-index:8;  font-size: .8rem; 
		-webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    }

#scroll-indicator-bullets ul li {position: relative; padding-right: 7px; }
#scroll-indicator-bullets ul li a {display: block;  color: black;  padding: 4px 0 0 0;
		  -webkit-user-select: none !important;
          -webkit-touch-callout: none; }

 #scroll-indicator-bullets ul li .bullet-nav-title {
 position: absolute;  top:4px; right:-10px;  display: block; /* visibility: hidden; */ opacity: 0.0;  white-space: nowrap;  text-align: right; padding: 2px 22px 2px 4px; border-radius: 2px; background: rgba(200, 200, 200, 0.4);
	  -webkit-transition: opacity 300ms, right 300ms, text-shadow 300ms;
	  transition: opacity 300ms, right 300ms, text-shadow 300ms;
	  -webkit-transition-timing-function: ease-out;
	  transition-timing-function: ease-out;
	   }
#scroll-indicator-bullets ul li .bullet-item-link .circle {position: relative; top:2px; display:block; width:12px; height:12px; border-radius: 6px; border: 2px solid black;  background: transparent; margin: 4px 0; }
#scroll-indicator-bullets ul li .bullet-item-link.active .circle {background:black;}
#scroll-indicator-bullets ul li.show-title .circle{text-shadow: none; }
#scroll-indicator-bullets ul li.show-title .bullet-nav-title {opacity: 1.0; right:2px; visibility:visible; }
#scroll-indicator-bullets ul.open .bullet-nav-title {visibility:visible;}
		
	}



/*취업잡담 리스트*/
.subjob{padding:170px 20px 50px; background:#ebf9ff url(../img/subjob_bg.jpg) no-repeat 25% -120px; background-size:cover !important}
.subjob .title{margin-bottom:10px}
.subjob .title img{max-width:100%; padding:0 10px}

.job_search{margin:0 10px; padding:5px 0px; border:5px solid #0c88e6; border-radius:500px; background:#ffffff; overflow:hidden; max-width:400px}
.job_search input{border:0px; margin-left:5%; width:70%; float:left; padding:0; line-height:40px; height:40px; font-size:1.1em; letter-spacing:-1px}
.job_search .btn_srch{border-color:#0c88e6; color:#ffffff; border-radius:500px; background:#0c88e6; width:20%; float:right; margin-right:10px; font-weight:800; font-size:20px; padding:0; line-height:40px; }

@media all and (min-width:640px) {
.subjob{background-position:center center; padding:100px 20px 50px}
.subjob .inner{padding-left:40%}

}

@media all and (min-width:1200px) {
.subjob{padding:220px 0px 120px}
.subjob .inner{padding-left:650px}
.job_search{padding:10px 0px}
}

/*퀵*/
.job_quick{background:#414f5a; margin:0 auto; color:#ffffff; overflow:hidden; padding:20px 0px;}
.job_quick ul{overflow:hidden; text-align:center;}
.job_quick ul li {vertical-align:middle; display:inline-block; padding:0 2px; position:relative;}
.job_quick ul li a{color:#ffffff; font-size:0.9em}
.job_quick ul li img{vertical-align:middle; padding:3px; border-radius:500px; background:#ebf9ff; max-width:20px; margin-right:1px}
.job_quick  h3{color:#ffffff; font-weight:600; font-size:1.2em; text-transform:uppercase; text-align:center; margin-bottom:5px }

@media all and (min-width:360px) {
.job_quick ul li{padding:0 5px}
.job_quick ul li a{ font-size:1em;}
}

@media all and (min-width:640px) {
.job_quick  h3{float:left; padding:0 20px; width:30%; margin-bottom:0}
.job_quick ul{float:left; width:70%; }
.job_quick ul li {padding:0 20px;}
.job_quick ul li:before {content:''; width:1px; height:12px; background:#ebf9ff; position:absolute; top:0; bottom:0; margin:auto; left:0; opacity:0.3}
.job_quick ul li:first-child:before{display:none}

.job_quick ul li:first-child:before{display:block}
}

@media all and (min-width:1024px) {
.job_quick {font-size:1.1em; padding:25px 0px; line-height:30px;}
.job_quick h3{width:25%; font-weight:800}
.job_quick ul{width:75%;}
.job_quick ul li{width:33.33%; display:block; float:left; font-weight:800}
.job_quick ul li img{max-width:30px; margin-right:5px}
}

@media all and (min-width:1200px) {
.job_quick{padding:30px 50px; margin-top:-45px;}
}

/*카테고리*/
.job_category{overflow:hidden; text-align:center; position:relative;}
.job_category:before{content:''; width:100%; position:absolute; bottom:0px; left:0; right:0; background:#0c89e6; height:2px; z-index:1; }
.job_category li{display:inline-block; vertical-align:middle; font-size:0; width:24%;max-width:195px; position:relative}
.job_category li a{display:block; line-height:45px; text-align:center;  font-size:14px;  background:#f0f0f0; border:2px solid #f0f0f0}
.job_category li.selected a{background:#ffffff; border:2px solid #0c89e6; border-bottom:2px solid #ffffff; color:#0c89e6; font-weight:600; position:relative; z-index:2;}
.job_category li span{display:inline-block; font-size:0.9em; background:#0c89e6; color:#ffffff; line-height:100%; padding:2px; border-radius:500px}


.job_category.list06 li{display:block; float:left; width:32.33%; margin:0 0.5% 5px; max-width:100%}
.job_category.list06:before{display:none}
.job_category.list06 li.selected a{border-color:#0c89e6}

@media all and (min-width:350px) {
.job_category li span{padding:5px;}
}

@media all and (min-width:640px) {
.job_category li a{ line-height:55px}
.job_category.list06 li{float:left; width:15.66%; margin:0 0.5% 0; }
.job_category.list06:before{display:block}
.job_category.list06 li.selected a{border-color:#0c89e6; border-bottom:2px solid #ffffff}
}


@media all and (min-width:1024px) {
.job_category li a{font-size:17px}
}


.job_result{overflow:hidden; line-height:36px;  font-size:0.9em}
.job_result p{float:left; color:#000000}
.job_result p b{color:#0c89e6}
.job_result p span{display:inline-block; line-height:100%;  background:#0c89e6; color:#ffffff; border-radius:500px; padding:5px}
.job_result select{float:right;}


@media all and (min-width:1024px) {
.job_result p b{font-size:1.2em; font-weight:800}
}

/*리스트*/
.job_info{margin-bottom:50px}
.job_info ul{margin-left:-3%}
.job_info:after{content:''; clear:both; display:block}
.job_info ul li{float:left; width:47%; float:left; margin-left:3%; position:relative;
-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); margin-bottom:20px;}
.job_info ul li .txt{padding:15px  10px;}
.job_info ul li input{position:absolute; left:10px; top:10px; z-index:1}
.job_info ul li img{width:100%;}
.job_info ul li dt{font-weight:600; margin-bottom:5px; color:#000000; -webkit-line-clamp: 2; line-height:1.2; height: 2.4em; display:block;  display: -webkit-box; overflow:hidden; text-overflow:ellipsis; }
.job_info ul li dd{font-size:0.8em; color:#969696;  -webkit-line-clamp: 2; line-height:1.2; height: 2.4em; display:block; display: -webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient: vertical;}
.job_info ul li .photo{position:relative; padding-bottom:70%; overflow:hidden}
.job_info ul li .photo img{position:absolute;}
.job_info ul li .photo span{position:absolute; display:inline-block; padding:3px 5px; min-width:40px; text-align:center; background:#505050; color:#ffffff !Important; font-size:13px; bottom:5px; left:5px;}
.job_info ul li .photo span.cate01{background:#9bc712}
.job_info ul li .photo span.cate02{background:#de5e00}
.job_info ul li .photo span.cate03{background:#00b0ec}
.job_info ul li .photo span.cate04{background:#f6c94f}
.job_info ul li .photo span.cate05{background:#45d3d3}
.job_info ul li .photo span.etc{background:#505050}

.job_info ul li:nth-child(odd){clear:both;}


@media all and (min-width:768px) {
.job_info ul{margin-left:-2%}
.job_info ul li{width:31.33%; margin-left:2%}
.job_info ul li .txt{padding:20px  15px;}

.job_info ul li:nth-child(odd){clear:none;}
.job_info ul li:nth-child(4),
.job_info ul li:nth-child(7),
.job_info ul li:nth-child(10),
.job_info ul li:nth-child(13),
.job_info ul li:nth-child(17){clear:both}
}

@media all and (min-width:1200px) {
.job_info ul li{width:23%}

.job_info ul li:nth-child(4),
.job_info ul li:nth-child(7),
.job_info ul li:nth-child(10),
.job_info ul li:nth-child(13),
.job_info ul li:nth-child(17){clear:none}

.job_info ul li:nth-child(5),
.job_info ul li:nth-child(9),
.job_info ul li:nth-child(13),
.job_info ul li:nth-child(17),
.job_info ul li:nth-child(21){clear:none}


.job_info ul li:after, .job_info ul li:before,
.job_info ul li a:after, .job_info ul li a:before{
  width: 3px;
  height: 0;
  position: absolute;
  display: block;
  content: "";
  background-color: #0083ef;
  transition:all 0.2s cubic-bezier(.25,.25,.53,.94);
  z-index:1;
}
.job_info ul li:after{width:0px; height:2px;}
.job_info ul li a:after{width:0px; height:3px;}

.job_info ul li:before{width:3px; height:0px;}
.job_info ul li a:before{width:3px; height:0px;}

.job_info ul li:after{left:0; top:0}
.job_info ul li:before{left:0; bottom:0}

.job_info ul li a:after{right:0; bottom:0}
.job_info ul li a:before{right:0; top:0; }
.job_info ul li:hover:after{width:100%}
.job_info ul li:hover:before{height:100%;}



.job_info ul li:hover a:after{width:100%}
.job_info ul li:hover a:before{height:100%;}
}


/*취업잡담 읽기*/
.job_view{position:relative; }
.job_view:after{content:''; opacity:0.9; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; background:#0c88e6; background:linear-gradient(45deg, #0c88e6 20%, #b4d133 100%); z-index:0}
.job_view .inner{position:relative; color:#ffffff !important; z-index:1}

.job_view h2{font-size:1.2em; font-weight:800; margin-bottom:10px;}
.job_view h2 span{display:block;}
.job_view h2 span.cate{display:inline-block; margin-bottom:15px; font-weight:normal; padding:2px 5px; border:1px solid #ffffff; font-size:13px; border:1px solid #ffffff}
.job_view p{font-size:0.9em;  vertical-align:middle}
.job_view p b{margin-right:5px; display:inline-block;}
.job_view p b:before{font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f02b"; margin-right:3px}

.job_arrow{position:absolute; top:-80px; right:0; width:75px;}
.job_arrow li{width:36px; height:36px; position:absolute; text-indent:-999999px;}
.job_arrow li:last-child{right:0;}
.job_arrow li a{display:block;  border:1px solid #ffffff; height:100%}
.job_arrow li a:before{font-family: 'FontAwesome'; position:absolute; width:100%; left:0; right:0; text-indent:0; line-height:36px; color:#ffffff; text-align:center;  font-size:11px; display:inline-block; content:"\f053";}
.job_arrow li:last-child a:before{content:"\f054";}

.job_view a.list_btn{position:absolute; top:-80px; left:0; display:inline-block; padding:0px 10px; line-height:36px; color:#ffffff; background:#0c88e6; font-size:0.9em}
.job_view a.list_btn:before{font-family: 'FontAwesome'; display:inline-block; content:'\f0c9'; margin-right:5px;}


.job_view_top{position:relative; margin-top:-25px; padding-bottom:10px; margin-bottom:30px; border-bottom:1px solid #dcdcdc}
.job_view_top ul{overflow:hidden}
.job_view_top ul li{color:#808080 !important; font-size:0.9em}
.job_view_top ul li span{color:#000000; font-weight:600; margin-right:5px;}
.job_view_top ul li{margin-bottom:5px; width:50%; float:left;}
.job_view_top ul li:last-child{width:100%;}
.job_view_top ul li:last-child a:after{font-family: 'FontAwesome'; display:inline-block; content:'\f0c1'; margin-left:5px; font-size:11px}
.job_contents{margin-bottom:50px}


@media all and (min-width:640px) {
.job_view{text-align:center;}
.job_view .inner{padding-left:0 !important}

.job_view a.list_btn{top:100px}
.online_view a.list_btn{top:175px}
.online_view_top{margin-top:-30px; min-height:50px;}
.online_view_top ul{padding-left:100px}

.job_arrow{top:27%; width:94%; left:0; right:0; margin:auto}
.job_arrow li{width:50px; height:50px;  }
.job_arrow li a:before{line-height:50px}

.job_view h2{font-size:1.4em;}



}

@media all and (min-width:768px) {
.online_view_top{margin-top:-60px}
}


@media all and (min-width:1200px) {
.job_view{padding:180px 0px 120px}
.job_view h2{font-size:1.7em; font-weight:600}
.job_arrow li{width:60px; height:60px;  }
.job_arrow li a:before{line-height:60px}

.job_view_top{padding:30px 20px 30px 130px; margin-top:-150px; background:#ffffff; border-bottom:0;}
.job_view_top ul li{float:left; margin-left:20px; width:auto;}
.job_view_top ul li:last-child{float:right; width:auto;}
.job_view a.list_btn{top:195px; left:40px;}
/*.online_view a.list_btn{top:145px;}*/

.online_view_top{ min-height:80px;}

}

/*인기글*/
.job_view_bottom{position:relative; padding:30px 0px; border-top:1px solid #dcdcdc}
.job_view_bottom p{margin-bottom:30px; font-weight:600}
.job_view_bottom a.list_btn{position:absolute; top:25px; right:0; display:inline-block; padding:0px 10px; line-height:36px; color:#ffffff; background:#0c88e6; font-size:0.9em}
.job_view_bottom a.list_btn:before{font-family: 'FontAwesome'; display:inline-block; content:'\f0c9'; margin-right:5px;}

@media all and (min-width:640px) {
.job_view_bottom p{font-size:1.1em; font-weight:800; color:#000000}
}

@media all and (min-width:768px) {
.job_view_bottom{padding:50px 0px;}
.job_view_bottom a.list_btn{top:45px}
}

/*글쓰기*/
.job_write{padding:130px 20px 30px}

@media all and (min-width:1200px) {
.job_write{padding:160px 20px 30px}
}



/*온라인강의 리스트*/
.subonline{padding:120px 20px 50px; background:#ebf9ff url(../img/subonline_bg.jpg) no-repeat left top; background-size:cover !important}
.subonline .title{margin-bottom:10px}
.subonline .title img{max-width:100%; padding:0 10px}

.subonline .job_search{margin:0 auto; padding:5px 0px; border:5px solid #0c88e6; border-radius:500px; background:#ffffff; overflow:hidden; max-width:400px}
.subonline .job_search input{border:0px; margin-left:5%; width:70%; float:left; padding:0; line-height:40px; height:40px; font-size:1.1em; letter-spacing:-1px}
.subonline .job_search .btn_srch{border-color:#0c88e6; color:#ffffff; border-radius:500px; background:#0c88e6; width:20%; float:right; margin-right:10px; font-weight:800; font-size:20px; padding:0; line-height:40px; }

.subonline .txt{color:#ffffff; font-size:0.9em}
.subonline .inner .txt b{color:#ffd042; font-weight:normal}
@media all and (min-width:640px) {
.subonline .title{text-align:center}
.subonline{background-position:center center; padding:100px 20px 50px}
.subonline .inner{padding:0 5%;}
.subonline .inner .txt{text-align:center; word-break:keep-all}
.subonline .inner .txt .mEnter{display:inline-block}
.subonline .inner .txt .tEnter{display:block}
}

@media all and (min-width:1200px) {
.subonline{padding:220px 0px 120px}
.subonline .job_search{padding:10px 0px}
.subonline .inner .txt{font-size:1em}

}

/*뷰*/

.yt-controls{display:block;}
.yt-controls ul{text-align:left; background:#000000; padding:5px;}
.yt-controls ul li{display:inline-block; vertical-align:middle}
.yt-controls ul li a,
.yt-controls ul li button{ display:block; width:50px; height:50px; border:0px; background:none; text-indent:-999999px; text-align:center; position:relative;}
.yt-controls ul li a:before,
.yt-controls ul li button:before{ font-family:'FontAwesome'; content:'\f0ac'; display:inline-block; text-indent:0; left:0; right:0; line-height:50px; font-size:30px; position:absolute; top:0; bottom:0; color:#ffffff; opacity:0.7}
.yt-controls ul li:hover button:before,
.yt-controls ul li:hover a:before{opacity:1;}


.yt-controls ul li button.btn_play:before{content:'\f144'}
.yt-controls ul li button.btn_pause:before{content:'\f28d'}
.yt-controls ul li button.btn_full:before{content:'\f00e'}
.yt-controls ul li button.btn_mute:before{content:'\f028'}
.yt-controls ul li button.btn_mute:before{content:'\f026'}
.yt-controls ul li a.btn_more:before{content:'\f0c1'}
.yt-controls ul li:last-child{float:right}

/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;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:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-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 /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events: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*/}



/* Arrows */
.slick-arrow{position: absolute;  top: 50%; z-index:100;  display: block;   width: 50px;   height: 50px; border:0;   cursor: pointer;  background:#ffffff; text-indent:-999999px;
/*	-webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);*/}

.slick-arrow:before{text-indent:0; content:''; display:block; position:absolute; font-family:'FontAwesome'; width:20px; height:20px; line-height:20px; left:0; right:0; bottom:0; top:0;  margin:auto; font-weight:600 }
.slick-arrow:before{content:'\f104'; font-size:22px;}
.slick-next{right:0;}
.slick-next:before{content:'\f105'; }


/*line-Dots*/
.slick-dots{position: absolute;    bottom: -10%;    display: block;    width: 100%;    padding: 0;    margin: 0;   text-align: center; z-index:10}
.slick-dots li{position: relative;  display: inline-block;  width: 20px;  height: 20px;  margin: 0 5px;  padding: 0;   cursor: pointer;}
.slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width: 100%;  height: 100%; border-radius:500px;  padding: 5px;  cursor: pointer;  color: transparent;  border: 0;  outline: none;  background:none; border:5px solid #ffffff; opacity:0.5}
.slick-dots li.slick-active button{border-color:#edf825; opacity:1}


/*pop_dot*/
.pop_dot .slick-dots{position: absolute;    bottom: 10%;  right:20px; display: inline-block; padding: 5px; line-height:100%;  width:auto; background:rgba(0,0,0,0.5); text-align: center; z-index:10}
.pop_dot .slick-dots li{position: relative;  display: inline-block;  width: 13px;  height: 13px;  margin: 0 5px;  padding: 0;   cursor: pointer; vertical-align:middle;}
.pop_dot .slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width: 100%;  height: 100%; border-radius:500px;  cursor: pointer;  color: transparent;  border: 0;  outline: none;  background:none; background:#ffffff; opacity:0.5}
.pop_dot .slick-dots li.slick-active button{background:#fcc754; opacity:1}



/*slick_circle_arrow*/

.slick_circle_arrow button.slick-arrow{position:absolute; top:auto; bottom:10px; right:20px; background:none; border:1px solid #ffffff; border-radius:500px; border-color:rgba(255,255,255,0.5)}
.slick_circle_arrow button.slick-arrow:before{color:#ffffff;}
.slick_circle_arrow button.slick-arrow.slick-prev{margin-right:60px}

.slick_square_arrow button.slick-arrow{position:absolute; top:auto; bottom:10px; right:20px; background:none; /*border:1px solid #ffffff; border-color:rgba(255,255,255,0.5)*/; background:rgba(0,0,0,0.6)}
.slick_square_arrow button.slick-arrow:before{color:#ffffff;}
.slick_square_arrow button.slick-arrow.slick-prev{margin-right:55px}


.mainslider{background: url(../img/mainvs01.jpg) no-repeat center center;background-size:cover !Important;padding:100px 3% 60px;}
.mainslider h2{text-align:center; position:relative; color:#ffffff; font-size:1.6em; line-height:1.3; padding-top:30px; margin-bottom:25px}
.mainslider h2 span{position:relative; z-index:1}
.mainslider h2 span.enter{display:block}
.mainslider h2:before{content:''; width:90px; height:90px; background:url(../img/logo_mark.png) no-repeat center center; display:block; position:absolute; z-index:0; background-size:100% !important; top:0;}
.mainslider h2 span.tit{display:block; font-size:1.2em; margin-top:5px}
.mainslider h2 span b{color:#edf825; font-weight:normal}
.mainslider h2:after{content:''; display:block; position:absolute; top:0; left:0; right:0; margin:0 auto; margin-bottom:20px; width:40px; height:2px; background:#ffffff;}

.banner_slider{position:relative; margin:5px}
.banner_slider span{position:absolute; display:inline-block; font-size:12px; color:#ffffff; padding:3px 5px; background:#d6e200; left:5px; top:5px;}
.banner_slider span.notice{background:#de5e00}

@media all and (min-width:768px) {
.mainslider{padding-bottom:70px}
.mainslider h2{font-size:2em; letter-spacing:-0.065em; line-height:1.2}
.mainslider h2 span.tit{margin-top:10px}
}


@media all and (min-width:1200px) {
.mainslider{padding:240px 3% 120px; position:relative;}
.mainslider h2{float:left; width:30%; margin-right:5%; text-align:left; padding:50px 0; font-size:2.2em}
.mainslider h2 span.tit{font-size:1.4em}
.mainslider h2:after{left:0; right:auto;}
.mainslider .bannerwrap{float:left; width:65%;}
.mainslider:after{content:''; display:block; clear:both}

.mainslider .slick_square_arrow button.slick-arrow{bottom:0px; left:-55%; right:auto; background:none; border:1px solid #ffffff; border-color:rgba(255,255,255,0.8)}
.mainslider .slick_square_arrow button.slick-arrow.slick-prev{margin-right:0}
.mainslider .slick_square_arrow button.slick-arrow.slick-next{left:calc(-55% + 55px)}
}


@media all and (min-width:1400px) {
.mainslider{padding:220px 5% 120px;}
.mainslider h2{padding-top:80px; width:420px;}
.mainslider h2:before{width:230px; height:230px; left:-70px; top:-70px}
.mainslider h2 span.tit{font-size:1.7em}
.mainslider .bannerwrap{width:calc(95% - 420px);}

.mainslider .slick_square_arrow button.slick-arrow.slick-next{left:-465px}
.mainslider .slick_square_arrow button.slick-arrow.slick-prev{left:-520px}

}