@charset "utf-8";

.skipnav.sub {display:none !important;}

#container {padding-bottom:50px; background:url('/main/img/main/visual.jpg') no-repeat center top;}
#slogan {text-align:center; padding:93px 0;}
#slogan .s1 {font-size:32px; text-shadow:0 0 10px rgba(255,255,255,.9);}
#slogan .blue {color:#5259b5;}
#slogan .green {color:#039591;}
#slogan .s2 {width:321px; height:82px; background:url('/main/img/main/slogan.png?=v2020') no-repeat;}

#business {position:relative;}
#business>a {position:absolute; top:40%; width:63px; height:63px; background:rgba(0,0,0,.85);}
#business>a:before {display:block; content:""; position:absolute; left:25px; top:17px; width:27px; height:27px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);}
#business>a.prev {left:-63px;}
#business>a.next {right:-63px; transform:rotate(180deg);}
#business>div {width:100%; overflow:hidden;}
#business .list {position:relative; font-size:0; line-height:0; white-space:nowrap; margin-left:-1%;}
#business .list>li {display:inline-block; text-align:center; vertical-align:top; width:24%; height:400px; margin-left:1%; padding:1px; font-size:15px; line-height:1.4em; background:#ddd; overflow:hidden;}
#business .list>li.on {padding:3px; border-radius:30px 0 30px 0; background:linear-gradient(to right, #515ab5, #069f9b);}
#business .list>li>div {height:100%; padding-top:185px; background-color:#fff; background-repeat:no-repeat; background-position:center top; background-size:100%;}
#business .list>li.on>div {border-radius:28px 0 28px 0;}
#business .list>li>div.b1 {background-image:url('/main/img/main/business01.jpg');}
#business .list>li>div.b2 {background-image:url('/main/img/main/business02.jpg');}
#business .list>li>div.b3 {background-image:url('/main/img/main/business03.jpg');}
#business .list>li>div.b4 {background-image:url('/main/img/main/business04.jpg');}
#business .list>li>div.b5 {background-image:url('/main/img/main/business05.jpg');}
#business .list .stit {font-size:13px; color:#8e8e8e; letter-spacing:0;}
#business .list .stit span {font-weight:bold; color:#1c468b;}
#business .list h3 {font-size:24px; line-height:1.5em; font-weight:normal; color:#232323;}
#business .list ul {width:80%; margin:10px auto;}
#business .list ul li {margin-top:4px;}
#business .list ul li a {display:block; padding:4px; border-radius:30px; background:#ebebeb;}
#business .list ul li a:hover {color:#fff; font-weight:bold; background:linear-gradient(to right, #515ab5, #069f9b);}
#business .list .b4 ul {margin:5px auto;}
#business .list .b4 h3:nth-of-type(2) {margin-top:5px;}
#business .list ul.colList {display:flex; justify-content:space-evenly; align-items:flex-end; text-align:center;}
#business .list ul.colList li {display:inline-block;}
#business .list ul.colList li a{padding:4px 25px;}

#board {position:relative; margin:20px 0; border-radius:30px 0 30px 0; background:linear-gradient(to right bottom, #5259b5 30%, #069f9b, #069f9b);}
#board .tit {position:absolute; left:40px; top:45px; color:#fff; text-shadow:-1px 0 rgba(0,0,0,.31), 0 -1px rgba(0,0,0,.31), 1px 0 rgba(0,0,0,.31), 0 1px rgba(0,0,0,.31);}
#board .tit h3 {font-size:24px;}
#board .tit h3 span {display:block; font-size:14px; letter-spacing:0; font-weight:normal;}
#board .tit p {margin-top:20px; line-height:1.5em;}
#board h4 {position:absolute; left:230px;}
#board>div:nth-of-type(2) h4 {top:45px;}
#board>div:nth-of-type(3) h4 {top:95px;}
#board>div:nth-of-type(4) h4 {top:145px;}
#board>div:nth-of-type(5) h4 {top:195px;}
#board h4 a {display:block; width:150px; height:49px; font-size:16px; font-weight:normal; line-height:49px; color:#fff; border-bottom:1px solid rgba(0,0,0,.22);}
#board .on h4 a {padding-left:20px; color:#232323; font-weight:bold; border-bottom:0; background:#fff;}
#board .list {display:none; margin-left:380px; padding:50px 40px 50px 60px; border:1px solid #ddd; border-left:0; border-radius:0 0 30px 0; background:#fff; overflow:hidden;}
#board .on .list {display:block;}
#board .list li {position:relative; float:left; width:30%; min-height:195px; margin-left:5%;}
#board .list li:first-child {margin-left:0;}
#board .list li>a {display:block;}
#board .list li dt {font-size:18px;}
#board .list li dd {margin-top:20px; padding-bottom:35px; color:#767676;}
#board .list li dd a {padding:5px 10px; border:1px solid #ddd;}/*공단에바란다 바로가기 버튼*/
#board .list li dd p {height:65px; overflow:hidden;}
#board .list li span.date {position:absolute; left:0; bottom:0; color:#767676;}
#board .more {display:none; position:absolute; left:40px; bottom:50px; width:30px; height:30px;}
#board .on .more {display:block;}
#board .more:before, #board .more:after {display:block; content:""; position:absolute; background:#fff;}
#board .more:before {left:0; top:50%; width:29px; height:2px; margin-top:-1px;}
#board .more:after {left:50%; top:0; width:2px; height:29px; margin-left:-1px;}

#bCon {position:relative;}

#quickm {margin-right:425px; border-radius:30px 30px 30px 0; border:1px solid #ddd;}
#quickm h3 {padding:35px 10px 25px; margin:0 40px; font-size:24px; color:#232323; border-bottom:1px solid #cfcfcf; background:url('/main/img/main/quickm_titbg.gif') no-repeat right bottom;}
#quickm h3 span {display:block; font-size:14px; font-weight:normal; letter-spacing:0;}
#quickm .list {padding:28px 40px; overflow:hidden;}
#quickm .list>li {float:left; width:32.6%; margin-left:1%; margin-bottom:1%;}
#quickm .list>li:nth-of-type(3n+1) {margin-left:0;}
#quickm .list>li a {position:relative; display:block; height:30px; padding:4px 0 0 36px;}
#quickm .list>li a:before {display:block; content:""; position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; border:2px solid #5259b5;}
#quickm .list>li a:after {display:block; content:"+"; position:absolute; left:4px; top:-4px; color:#5259b5; font-size:30px; line-height:30px;}
#quickm .list>li a:hover {color:#fff; border-radius:30px; background:#5259b5;}
#quickm .list>li a:hover:after {color:#fff;}
#quickm .etc {text-align:center; margin-left:-1px; margin-right:-1px; margin-bottom:-1px; border-radius:0 0 30px 0; background:#5259b5; overflow:hidden;}
#quickm .etc>li {display:inline-block; vertical-align:top; padding:15px 0;}
#quickm .etc>li:not(:first-child):before {display:inline-block; content:""; vertical-align:middle; width:1px; height:23px; margin:0 22px; background:rgba(0,0,0,.17);}
#quickm .etc>li * {vertical-align:middle;}
#quickm .etc>li a {display:inline-block; padding:2px 15px 4px; border-radius:30px; background:#fff;}
#quickm .etc>li span {margin-right:8px;}
#quickm .etc>li .athletic {width:174px; height:23px; background:url('/main/img/main/athletic_tit.png') no-repeat;}
#quickm .etc>li .cine {width:114px; height:23px; background:url('/main/img/main/cine_tit.png') no-repeat;}
#quickm .etc>li .juan {width:158px; height:23px; background:url('/main/img/main/cinejuan_tit.png') no-repeat;}
/* #quickm .etc>li .camf {background:#efbbcb;} */

#pZone {position:absolute; right:0; top:0; width:408px; height:297px;}
#pZone h3 {position:absolute; left:0; bottom:0; width:100%; padding:13px 30px 15px; font-size:18px; color:#fff; font-weight:normal; border-radius:0 0 30px 30px; background:rgba(0,0,0,.45); z-index:50;}
#pZone .list {position:relative; text-align:right; width:100%; height:100%; padding-top:265px; padding-right:100px; font-size:0; line-height:0;}
#pZone .list .img {position:absolute; left:0; top:0; width: 100%; height: 100%;}
#pZone .list .img img {border-radius:30px 0 30px 30px;}
#pZone .list li {display:inline-block; margin-left:8px;}
#pZone .list li a.bl {position:relative; width:17px; height:17px; border-radius:17px; border:3px solid #fff; z-index:100;}
#pZone .list li.on a.bl {width:46px; background:#fff;}
#pZone .list li img {width: 100%; height: 100%;}
#pZone a.play {position:absolute; right:62px; bottom:16px; width:17px; height:17px; z-index:100;}
#pZone a.play:before {display:block; content:""; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:17px solid #fff; }
#pZone a.stop {position:absolute; right:32px; bottom:15px; width:17px; height:17px; border-left:3px solid #fff; border-right:3px solid #fff; z-index:100; overflow:visible;}
/* #pZone a.stop:before {display:block; content:""; position:absolute; left:-9px; top:0;width:1px; height:12px; background:rgba(255,255,255,.15);} */

/* #pZone .list li a.img:focus-visible {border:2px solid #000; box-sizing:border-box;} */

/*pc*/
@media all and (max-width:1280px){	
	#business>a.prev {left:-31px;}
	#business>a.next {right:-31px;}
}



/*tablet~mobile*/
@media screen and (max-width:800px){
	#business>a {width:48px; height:48px;}	
	#business>a:before {left:20px; top:14px; width:20px; height:20px; border-width:1px;}
	#business>a.prev {left:0;}
	#business>a.next {right:0;}
	#business>div {max-width:80%; margin:0 auto;}
	#business .list>li {width:49%;}
	#business .paging {text-align:center; margin-top:10px;}
	#business .paging li {display:inline-block;}
	#business .paging li a {width:10px; height:10px; border-radius:50%; border:1px solid #c2c2c2;}
	#business .paging li a.on {border-color:#5159b5; background:#5159b5;}

	#board .list {min-height:300px; padding:50px 40px 50px 40px;}
	#board .list li {float:none; width:100%; min-height:auto; margin-left:0;}
	#board .list li dt {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px;}
	#board .list li:nth-of-type(2) {margin-top:20px; padding-top:15px !important; border-top:1px solid #ddd;}
	#board .list li:nth-of-type(n+2) {padding-top:10px;}
	#board .list li:nth-of-type(n+2) dd {display:none;}

	#quickm {margin-right:0;}
	#quickm .list>li {width:49%;}
	#quickm .list>li:nth-of-type(odd) {margin-left:0;}
	#quickm .list>li:nth-of-type(4) {margin-left:1%;}
	#quickm .etc>li:last-child {display:block; border-top:1px solid #444a96;background:#536192;}
	#quickm .etc>li:last-child:before {display:none;}

	#pZone {position:relative; right:auto; top:auto; width:auto; max-width:408px; margin:20px auto 0; overflow:hidden;}
	#pZone img {width:100%;}
}



/*mobile*/
@media screen and (max-width:640px){
	#slogan {padding:50px 0 20px;}
	#slogan .s1 {font-size:18px;}
	#slogan .s2 {max-width:85%; margin-top:5px; background-size:100%;}

	#business>div {max-width:70%;}
	#business .list>li {width:95%; margin-left:5%;}
	#business .list>li:first-child {margin-left:2.5%;}
	#business .list>li.on {box-shadow:3px 3px 10px rgba(0,0,0,.25);}
	#business .list>li>div {background-size:auto 164px;}

	#board .tit {left:20px; top:30px;}
	#board .tit p {display:none;}
	#board h4 {left:1px;}
	#board>div:nth-of-type(2) h4 {top:105px;}
	#board>div:nth-of-type(3) h4 {top:147px;}
	#board>div:nth-of-type(4) h4 {top:189px;}
	#board>div:nth-of-type(5) h4 {top:231px;}
	#board h4 a {height:42px; padding-left:20px; line-height:42px;}
	#board .list {min-height:350px; margin-left:151px; padding-top:40px;}
	#board .more {left:190px; right:30px; bottom:25px; text-align:center; width:auto; text-indent:0; font-size:15px; line-height:27px; border-radius:5px; background:#e7e7e7;}
	#board .more:before, #board .more:after {left:50%; top:50%; background:#484848;}
	#board .more:before {width:9px; height:1px; margin-left:30px;}
	#board .more:after {width:1px; height:9px; margin-left:34px; margin-top:-5px;}

	#quickm h3 {padding-left:0; background-size:55%;}
	#quickm .list>li {width:100%; margin-left:0 !important; margin-bottom:8px;}
}