@charset "utf-8";
#container {background:url('/open_content/images/main/bg.gif');}
#container>.wrapper {overflow:hidden; z-index:1; margin-top:-110px;}
#visual {z-index:9; width:100%; height:410px; background:#c7f5f5 url('/open_content/images/main/visual_Bbg.gif');}
#visual .box {width:100%; height:410px; background:url('/open_content/images/main/visual_bg.png') center bottom no-repeat;}
#visual .wrapper {position:relative; height:300px;}
#visual .slogan {position:absolute; left:30%; top:50%; margin-top:-100px;}
#visual .slogan img {max-width:100%;}
/* #visual .slogan .mb_hidden {position:absolute; left:22%; top:50%; width:447px; z-index:15; margin-top:-79px;}
#visual .slogan .mb_hidden img {max-width:100%;}
#visual .slogan .pc_hidden {position:absolute; left:25%; top:50%; z-index:15; margin-top:-35px;}
#visual .slogan .pc_hidden * {color:#fff; font-weight:800; letter-spacing:-3px; font-family:'Times New Roman','Nanum Myeongjo','나눔명조',serif !important; text-shadow: 0px 0px 8px rgba(0,0,0,0.8);}
#visual .slogan .pc_hidden .txt1 {font-size:25px; font-weight:600;}
#visual .slogan .pc_hidden .txt1 span {font-size:35px;}
#visual .slogan .pc_hidden .txt2 {font-size:28px;} */
#visualList {width:100%;}
#visualList li {display:none; position:absolute; left:0; top:0; z-index:10; width:100%; height:300px; background-size:100% 100%; background-repeat:no-repeat; background-position:center bottom; }
#visualList li:first-child {display:block;}
#visualList li.visual01 {background-image:url('/open_content/images/main/visual01.png');}
#visualList li.visual02 {background-image:url('/open_content/images/main/visual02.png');}
#visual .btn_visual li {position:absolute; z-index:20; top:50%; margin-top:-25px;}
#visual .btn_visual li.btn_prev {left:0;}
#visual .btn_visual li.btn_next {right:0;}

.link {overflow:hidden; float:left; width:66.6%;}
.link>li {overflow:hidden; position:relative; float:left; width:25%; max-height:191px; background-color:#f7f7f7; text-align:center;}
.link>li.bg {background-color:#07939c;}
.link>li>span {display:block; padding-top:135px; padding-bottom:35px; color:#07939c; font-size:21px; text-decoration:none; letter-spacing:-1.5px; font-weight:500;}
.link>li.on>span  {padding-top:35px; padding-bottom:136px; background:none !important; transition:0.3s;}
.link .bg>span  {color:#fff;}
.link .link1>span {background:url('/open_content/images/main/link_ic1.gif') no-repeat center 35px;}
.link .link2>span {background:url('/open_content/images/main/link_ic2.gif') no-repeat center 40px;}
.link .link3>span {background:url('/open_content/images/main/link_ic3.gif') no-repeat center 35px;}
.link .link4>span {background:url('/open_content/images/main/link_ic4.gif') no-repeat center 35px;}
.link .link5>span {background:url('/open_content/images/main/link_ic5.gif') no-repeat center 40px;}
.link .link6>span {background:url('/open_content/images/main/link_ic6.gif') no-repeat center 35px;}
.link .link7>span {background:url('/open_content/images/main/link_ic7.gif') no-repeat center 40px;}
.link .link8>span {background:url('/open_content/images/main/link_ic9.gif') no-repeat center 35px;}
.link ul {position:absolute; left:0; /* bottom:-100%; */ width:100%; height:100%; transition:1s; opacity:0;}
.link li.on ul {bottom:auto; transition:0.8s; opacity:1;}
.link ul li a {overflow:hidden; position:relative; display:block; margin:10px auto; font-size:15px; font-weight:500; text-decoration:none;}
.link ul li a span {position:relative; margin:10px auto; font-size:15px; font-weight:500;}
.link li.on ul.link_menu {top:70px;}
.link ul.link_menu span {position:relative; color:#07939c;}
.link .bg ul.link_menu span {color:#fff;}
.link ul.link_menu span:hover {z-index:1}
.link ul.link_menu span:after {content:''; position:absolute; top:50%; left:50%; width:0; height:20px; margin-top:-10px; background-color:rgba(0, 0, 0, 0.05); transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index:-1;}
.link ul.link_menu span:hover:after, #lnb .submenu li span:active:after {left:-10%; width:120%;}
.link li.on ul.link_go {top:0;}
.link ul.link_go li {margin-top:60%;}
.link1 ul.link_go {margin-top:40%;}
.link1 ul.link_go li {margin-top:0;}
.link5 ul.link_go {margin-top:40%;}
.link5 ul.link_go li {margin-top:0;}
.link ul.link_go li a {width:140px; padding:3px 10px; border:1px solid #07939c; color:#07939c; transition:0.5s; box-sizing:border-box;}
.link .bg ul.link_go li a {border:1px solid #fff; color:#fff; transition:0.5s; min-width:100px;}
.link ul.link_go li a:after {content:''; position:absolute; top:0; left:0; width:0; height:0; border-style:solid; border-width:0; border-color:#07939c transparent transparent transparent; transition:0.5s;}
.link ul.link_go li a:hover {color:#fff; z-index:1; transition:0.5s;}
.link ul.link_go li a:hover:after {border-width:160px 160px 0 0; z-index:-1;}
.link .bg ul.link_go li a:hover {color:#07939c;}
.link .bg ul.link_go li a:after {border-color:#fff transparent transparent transparent;}
.more a {position:absolute; left:130px; top:38px; display:block; border-bottom:1px solid #484848; font-size:13px; color:#484848; text-decoration:none; letter-spacing:0;}
.program, .notice, .pzone {position:relative; float:left; width:33.3%; background:#fff;}
.program h3, .notice h3 {margin-top:30px; margin-left:30px; color:#07939c; font-size:25px; letter-spacing:-1.5px; font-weight:500;}
.program ul {overflow-y:scroll; margin:15px 30px 30px 30px; height:270px;}
.program ul li {position:relative; height:30px; padding-right:75px;}
.program ul li a {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.program ul li span {position:absolute; top:0; right:15px; display:block; width:60px; color:#fff; text-align:center; font-size:13px; font-weight:500; border-radius:3px;}
.program ul li span:first-child {right:77.5px;}
.program .recStat_1 {background:#318f90;}
.program .recStat_2 {background:#e87162;}
.program .recStat_3 {background:#558f90;}
.program .recStat_4 {background:#6b6a6a;}
.program .termStat_1 {background:#5a90ea;}
.program .termStat_2 {background:#596cb5;}
.program .termStat_3 {background:#888;}
.notice, .pzone {height:240px;}
.notice {float:left; width:33.3%; background:#fff;}
.notice ul {margin:15px 30px;}
.notice ul li {height:27px;}
.notice ul li a {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pzone .list {height:100%;}
.pzone .list li {display:block; height:100%;}
.pzone .list li img {width:100%; height:100%;}
.pzone .list2 {display:block; height:100%;}
.pzone .list2 img {width:100%; height:100%;}
.pzone .pzone_btn li {overflow:hidden; position:absolute; top:50%; width:40px; height:100px; margin-top:-50px; background-color:rgba(0,0,0,.2); font-size:0; line-height:0; text-indent:-5000px;}
.pzone .pzone_btn li.next {right:0;}
.pzone .pzone_btn li a {display:block; width:100%; height:100%;}
.pzone .pzone_btn li.prev a {background:url('/open_content/images/main/pzone_prev.gif') no-repeat center;}
.pzone .pzone_btn li.next a {background:url('/open_content/images/main/pzone_next.gif') no-repeat center;}
/* .pzone .pzone_btn {position:absolute; right:20px; bottom:20px; padding:0 10px; background:#fff; border-radius:20px;}
.pzone .pzone_btn li {float:left; font-size:16px;}
.pzone .pzone_btn li.num {margin-right:8px;}
.pzone .pzone_btn li a {display:block; padding:4px 1px;} */
.Rbox {float:left; width:33.3%;}
.facebook {float:left; width:50%; height:240px; background-color:#FFF;}
.facebook h3 {position:relative; height:57px; background-color:#3b5998;}
.facebook h3  span {position:absolute; bottom:0; display:block; width:85%; margin-left:7%;}
.facebook h3 img {max-width:100%;}
.facebook>.con {overflow-y:scroll; overflow-x:hidden; margin:17px 7%; padding:5px; height:140px;}
.facebook .con>li {margin-bottom:20px;}
.facebook .con .tit {margin-bottom:10px;}
.facebook .con .tit .writer a {display:block; font-size:16px; color:#3b5998;}
.facebook .con .tit .date {padding-right:13px; background:url('/open_content/images/main/fb_time.png') no-repeat right 5px; font-size:13px; color:#909090;}
.map {position:relative; float:left; width:50%; height:240px; background:#1d7c7d url('/open_content/images/main/map_bg.gif') no-repeat 80% bottom;}
.map h3 {margin:30px 30px 20px 30px;font-size:25px; color:#fff; line-height:30px; letter-spacing:-2px;}
.map p {margin-left:30px; margin-right:30px; color:#fff;}
.map .more a { left:30px; bottom:30px; top:auto; color:#fff; border-bottom:1px solid #fff;}

/*레이어팝업*/
html, body { height:100%; }
#layerPop { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:5000; }
#layerPop>div { position:absolute; top:100px; left:50%; margin-left:-250px; }
#layerPop>div .layer_btm { position:relative ;padding:5px; background:#000; }
#layerPop>div .layer_btm>p { position:absolute; top:9px; right:10px; color:#fff; }

/***********************************************************************************************************************************/

@media all and (min-width:799px) and (max-width:1200px){
	#visual .box {background-size:110% 100%;}
}

@media all and (max-width:970px){
	.link>li>a {font-size:18px;}
}

@media all and (min-width:799px){
	/* pc에서 시스템폰트
	#visual .slogan .txt1 {font-size:38px; font-weight:600;}
	#visual .slogan .txt1 span {font-size:58px;}
	#visual .slogan .txt2 {font-size:43px;} */
}

@media all and (max-width:798px){ 
	#container>.wrapper {margin-top:0;}
	#visual, #visual .wrapper {height:180px;}
	#visual .box {height:180px; background-size:110% 100%;}
	#visualList li {height:180px; background-size:100% 80%;}
	#visual .slogan {margin-top:-65px;}
	#visual .slogan img {max-height:130px;}
	.link {width:100%;}
	.program {width:50%; height:240px; margin-left:-1px; border-right:1px solid #dbdbdb;}
	.program ul {height:50%;}
	.notice {width:50%; margin-bottom:0.5px;}
	.pzone {width:50%;}
	.Rbox {width:50%;}
	#layerPop>div { left:0; margin-left:0; }
	#layerPop>div>a>img { width:100%; }

}

@media all and (max-width:550px){ 
	.link>li {width:50%; border-bottom:1px solid #dbdbdb;}
	.link>li>a {padding:90px 0 20px 0; background-position:center 20px !important; background-size:auto 40% !important;}
	/* .link>li {width:100%;}
	.link>li>a {background-position:30px center !important; padding:30px 0 30px 100px !important; background-size:auto 50% !important; text-align:left;}
	.link>li.link4>a {border-bottom:1px solid #dbdbdb;} */
	.program {margin-left:0; border-right:none; border-bottom:1px solid #dbdbdb;}
	.program, .notice, .pzone, .Rbox, .facebook, .map {width:100%;}
	#visual .slogan {display:none;}
	/* #visual .slogan .pc_hidden .txt1 {font-size:20px;}
	#visual .slogan .pc_hidden .txt1 span {font-size:30px;}
	#visual .slogan .pc_hidden .txt2 {font-size:23px;} */
}