@charset "utf-8";
/* CSS Document */
.main-wrap {overflow:hidden;}
.main-left {float:left; width:1000px; overflow:hidden;}
.main-right {float:right; width:calc(100% - 1000px);}

/*메인비주얼*/
#main-img {position:relative;}
#main-img ul, #main-img li {margin:0; padding:0; list-style:none; position:relative;}
#main-img ul {padding-right:40px;}
.main-visual {height:770px; overflow:hidden;}
.main-visual a {outline:none;}
.main-visual .slick-arrow {position:absolute; top:50%; margin-top:-26px; z-index:100; width:52px; height:52px; background:no-repeat center center; font-size:0; text-indent:-5000000em; border:none;}
.main-visual .slick-prev {left:60px; background-image:url('../images/main/main_img_prev.png'); opacity:0.8;}
.main-visual .slick-next {right:60px; background-image:url('../images/main/main_img_next.png'); opacity:0.8;}
.main-visual .slick-prev:hover {opacity:1;}
.main-visual .slick-next:hover {opacity:1;}
#main-img .main-visual-controler {position:absolute; bottom:30px; left:50%; margin-left:50px;}
#main-img .main-visual-controler button {background-color:rgba(1,1,1,.7); font-size:0; border:none; display:block; width:21px; height:21px; border-radius:50%; background-position:center center; background-repeat:no-repeat;}
#main-img .main-visual-controler .play {display:none; background-image:url('../images/main/mv_play.png');}
#main-img .main-visual-controler .stop {background-image:url('../images/main/mv_stop.png');}
#main-img .main-visual-controler button:hover {background-color:rgba(1,1,1,.9);}
.mv-lg {display:inline-block !important;}
.mv-sm {display:none !important;}
/* Dots */
.slick-dotted.slick-slider {margin-bottom: 0px;}
.slick-dots {position: absolute !important; bottom:30px; display: block; width:100%; padding:0; margin:0; list-style:none; text-align: center;}
.slick-dots li {position: relative; display: inline-block; width: auto; height: 20px; padding: 0; cursor: pointer;}
#main-img .slick-dots li {margin:0 7px;}
.slick-dots li button {font-size:0; line-height:0; display:block; width:15px; height:15px; padding:5px; cursor:pointer; color:transparent; border:0; outline:none; background-color:transparent;}
.slick-dots li button:hover,
.slick-dots li button:focus {outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before  {opacity:1; background-color:rgba(255,255,255,.7);}
.slick-dots li.slick-active button:before {opacity:1; background-color:#fff;}
.slick-dots li button:before {font-family:'slick'; font-size:6px; line-height:15px; position:absolute; top:0; left:0; width:15px; height:15px; content: ''; text-align: center; opacity: 1; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color:rgba(255,255,255,.5); border-radius:50%;}

/*공고현황*/
.status {background-color:#5c8dde; height:160px;}
.status dl {overflow:hidden;}
.status dt {background-color:#4a71b2; float:left; color:#fff; font-size:24px; height:160px; padding:45px 50px 0px 50px;}
.status dt span {display:inline-block; font-weight:normal;}
.status dt span i {font-weight:bold; font-style:normal;}
.status dt b {display:inline-block; color:#ffff00; font-size:55px; width:60px; text-align:right;}
.status dt em {display:inline-block; font-style:normal;}
.status dd {float:left; color:#fff; font-size:20px; padding-left:40px; padding-top:40px;}
.status dd b {font-size:55px; padding-left:5px; width:55px; display:inline-block; text-align:right;}
.status dd.bg {position:relative; padding-left:40px;}
.status dd.bg::before {content:"/"; color:rgba(255,255,255,.5); font-size:45px; display:block; position:absolute; left:15px; top:45px; font-weight:normal;}
/*채용공고*/
.recruit {background-color:#224099; height:330px; padding:50px; color:#fff; position:relative;}
.recruit h2 {}
.recruit a {color:#fff; display:block; position:relative;}
.recruit a b {display:inline-block;}
.recruit a b.cate::before {content:"[";}
.recruit a b.cate::after {content:"] ";}
.recruit a span {display:block; position:absolute; top:0;}
.recruit a span.date {right:80px; width:90px;}
.recruit a span.dday {right:0; width:80px; text-align:center;}
.recruit a span.dday b {color:#ffff00;}
.recruit a span.tit {position:relative; display:inline-block; width:calc(100% - 235px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.recruit a span.etc {position:relative; display:inline-block;}
/*공지사항*/
.notice {background-color:#eee; height:280px; padding:50px; position:relative;}
.notice h2 {color:#121212;}
.notice a span.etc {padding-right:5px;}

.main-right h2 {font-size:28px; margin:0; padding:0; font-weight:bold;}
.main-right ul.latest {margin:35px 0 0 0; padding:0; line-height:none;}
.main-right ul.latest li {margin-top:15px; list-style:none; position:relative; padding-left:15px; width:690px;}
.main-right ul.latest li::before {content:"ㆍ"; font-size:50px; color:#5c8dde; display:block; position:absolute; left:-22px; top:-3px; line-height:18px;}
.main-right ul.latest li a {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; font-size:16px; line-height:100%;}
.main-right ul.latest li a:hover b, .main-right ul.latest li a:hover span {color:#FF0;}
.main-right p.more {border:0px solid #111; width:35px; height:35px; position:absolute; top:50px; left:700px;}
.main-right p.more a {background-color:#5c8dde; width:100%; height:100%; display:block;}
.main-right p.more a::before {content:"+"; color:#fff; font-size:30px; display:block; position:absolute; left:0; top:0; width:35px; height:35px; line-height:32px; text-align:center;}
.main-right p.more a:hover {background-color:#5080d8;}
.main-right .notice ul.latest li a:hover span {color:#5080d8;}
.main-right .notice ul.latest li a span {display:inline-block;}
.main-right .notice ul.latest li a span.suj {max-width:calc(100% - 60px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:5px;}
.main-right .notice ul.latest li a span.suj img.new {vertical-align:top;}
.main-right .notice ul.latest li a span.date {display:none;}
.main-right .notice ul.latest li a span.icon img {vertical-align:top; padding:2px 3px;}

@media screen and (max-width: 1769px) { 
	.main-left {width:900px;}
	.main-right {width:calc(100% - 900px);}
	.slick-slide img.mv {width:900px;}
	.status {height:143px;}
	.status dt {padding:37px 30px 0 40px; height:143px;}
	.status dt b {font-size:45px; width:60px;}
	.status dd {padding-top:30px; padding-left:30px;}
	.status dd b {font-size:45px; width:60px;}
	.status dd.bg::before {top:37px;}
	.recruit {height:290px; padding:40px;}
	.notice {height:260px; padding:40px;}
	.main-visual {height:693px;}
	.main-right ul.latest {margin-top:25px;}
	.main-right ul.latest li {width:660px;}
	.main-right p.more {top:40px; left:665px;}
	
}
@media screen and (max-width: 1639px) { 
	.main-left {width:800px;}
	.main-right {width:calc(100% - 800px);}
	.slick-slide img.mv {width:800px;}
	.main-visual {height:616px;}
	.status {height:106px;}
	.status dt {height:106px;}
	.status dt {padding:25px 30px 0 40px; font-size:20px;}
	.status dd {font-size:18px; padding-top:18px; padding-left:30px;}
	.status dd.bg {padding-left:40px;}
	.status dd.bg::before {top:35px; left:20px; font-size:30px;}
	.recruit {height:270px; padding:35px 40px;}
	.notice {height:240px; padding:35px 40px;}
	.main-right ul.latest li {margin-top:10px; width:560px;}
	.main-right p.more {top:35px; left:565px;}
	.status dd b {width:auto;}
	.main-right .notice ul.latest li a span {display:inline;}
}
@media screen and (max-width: 1439px) { 
	.main-wrap {position:relative; padding-top:105px;}
	.main-left {width:700px;}
	.main-right {width:calc(100% - 700px);}
	.slick-slide img.mv {width:700px;}
	.main-visual {height:539px;}
	.status {height:105px; width:100%; position:absolute; left:0; top:0;}
	.status dt {height:105px; padding:10px 50px 0 50px;}
	.status dt span br {display:none;}
	.status dd b {width:50px;}
	.status dd {padding-left:60px; padding-top:12px;}
	.status dd b {width:55px;}
	.status dd.bg {padding-left:70px;}
	.status dd.bg::before {left:35px;}
	.recruit {height:290px; padding:50px 40px;}
	.notice {height:249px; padding:50px 40px;}
	.main-right ul.latest li {width:500px;}
	.main-right p.more {top:50px; left:505px;}
}
@media screen and (max-width: 1279px) { 
	.main-left {width:650px;}
	.main-right {width:calc(100% - 650px);}
	.slick-slide img.mv {width:650px;}
	.main-visual {height:500px;}
	.recruit {height:270px; padding:35px 40px;}
	.notice {height:230px; padding:35px 40px;}
	.main-right ul.latest li {width:470px;}
	.main-right p.more {top:35px; left:465px;}
}
@media screen and (max-width: 1199px) { 
	.main-left {width:100%; margin:0 auto;}
	.main-right {width:100%; margin:0 auto;}
	.mv-lg {display:none !important;}
	.mv-sm {display:inline-block !important;}
	.slick-slide img.mv {width:100%;}
	.main-visual {height:auto;}
	.main-right ul.latest li {width:100%;}
	.main-right p.more {left:auto; right:40px;}
}
@media screen and (max-width: 992px) { 
	.main-wrap {padding-top:80px;}
	.main-visual .slick-prev {left:15px;}
	.main-visual .slick-next {right:15px;}
	.status {height:80px;}
	.status dt {font-size:18px; height:80px; padding:13px 30px 0 30px;}
	.status dt b {font-size:36px;}
	.status dd {padding-left:30px;}
	.status dd b {font-size:36px;}
	.status dd.bg {padding-left:40px;}
	.status dd.bg::before {left:15px; top:28px; font-size:20px;}
}
@media screen and (max-width: 649px) { 
	.main-wrap {padding-top:120px;}
	.status {height:120px; text-align:center;}
	.status dt {font-size:15px; height:60px; width:100%; padding:10px;}
	.status dt b {font-size:24px;}
	.status dd {height:60px; display:inline-block; float:none; padding-left:0; font-size:15px;}
	.status dd b {font-size:24px; width:40px;}
	.status dd.bg {padding-left:30px;}
	.status dd.bg::before {left:10px; top:18px; font-size:16px;}
	.recruit {height:auto; padding:30px;}
	.recruit a span.tit {width:calc(100% - 165px);}
	.recruit a span.date {right:0; text-align:right;}
	.recruit a span.dday {display:none;}
	.notice {height:auto; padding:30px;}
	.main-right h2 {font-size:20px;}
	.main-right p.more {top:30px; right:30px; width:25px; height:25px;}
	.main-right p.more a::before {width:25px; height:25px; line-height:25px; font-size:24px;}
	.main-right ul.latest {margin-top:15px;}
}
@media screen and (max-width: 425px) {
	.status dd b {width:30px;}
	.main-visual .slick-prev {left:0px;}
	.main-visual .slick-next {right:0px;}
}
