@Charset "utf-8";
@import url("common.css");


.main_title {position:relative; max-width:1400px; margin:30px auto 20px; padding:0 2%; font-size:34px; line-height:40px; font-weight:500; color:#313131;}
.main_title .bg {display:inline-block; width:4px; height:30px; background:#01518e; margin-top:6px; vertical-align:top;}
.main_title .bg2 {display:inline-block; min-width:120px; height:40px; padding:0 15px; font-size:22px; color:#fff; font-weight:400; background:#005b9a; box-sizing:border-box;}
.main_title .bg3 {display:inline-block; min-width:120px; height:40px; padding:0 15px; font-size:22px; color:#005b9a; font-weight:400; background:#fff; box-sizing:border-box;}
.main_title .link {position:absolute; bottom:0; right:2%;}
.main_title .link a {margin-left:15px;}
.main_title .more {position:absolute; bottom:0; right:2%;}

@media only screen and (max-width:1000px) {
	.main_title {margin:50px auto 20px; font-size:30px;}
}

#splash {position:relative; height:900px; margin:80px 0 90px; overflow:hidden;}
#splash:focus { outline: 3px solid red;z-index: 100; /* 포커스될 때 맨 위로 이동 */}

#splash .slick-dots {position:absolute; bottom:50px; right:50%; width:48%; transform:translate(60px, 0); max-width:700px; z-index:2; box-sizing:border-box;}
#splash .slick-dots li {display:inline-block;}
#splash .slick-dots button {width:8px; height:8px; margin:0 5px; font-size:0; border:1px solid #fff; border-radius:50%; background:none; cursor:pointer;}
#splash .slick-dots .slick-active button {background:#fff;}

#splash .slick-control {position:absolute; bottom:40px; right:50%; width:48%; max-width:700px; z-index:1;}
#splash .slick-control button {border:none; background:none; width:15px; text-align:center; padding-bottom:5px;}
#splash .slick-control .play2 {display:none; text-align:right;}

#splash .splash {position:relative;}
#splash .splash .item {position:relative; height:900px;}
#splash .splash .item .img {width:100%; height:100%; object-fit:cover;}
#splash .splash .item .text {position:absolute; bottom:90px; left:50%; transform:translate(-50%, 0); width:96%; max-width:1400px;}
#splash .splash .item .text {font-size:22px; color:#fff; text-shadow:1px 1px 3px #060000}
#splash .splash .item .text a {color:#fff;}
#splash .splash .item .text span {font-size:50px;}
#splash .splash .item .text span {font-family:'Aileron'; font-style: normal; font-weight:bold;}


#splash .link {position:absolute; bottom:0; left:50%; transform:translate(-50%, 0);   width:100%; max-width:1400px;}
#splash .link .box {position:relative; padding:30px 40px 40px 66%; box-sizing:border-box;}
#splash .link .box .bg {position:absolute; top:0; left:66%; width:1200px; height:100%; background:rgba(0,91,154,0.9); z-index:0;}
#splash .link .box .search {position:relative; display:flex; align-items:center; width:100%; padding-bottom:5px; margin:0 40px 15px; border-bottom:1px solid #73a4c7; z-index:1;}
#splash .link .box .search form {width:100%;}
#splash .link .box .search input[type=text] {width:calc(100% - 30px); height:40px; color:#fff; border:none; background:none; box-sizing:border-box;}
#splash .link .box .search input[type=text]::placeholder {font-size:16px; color:rgba(255,255,255,0.6);}
#splash .link .box .link_a {position:relative; display:flex; margin-left:40px; z-index:1;}
#splash .link .box a {display:inline-block; color:#fff; margin-right:25px;}

@media only screen and (max-width:1000px) {
	#splash {height:600px;}
	#splash .splash .item {height:600px;}
	#splash .link {display:none;}	
}


#story_bg {background:linear-gradient(to right, #f5f5f5 70%, #005b9a 70%); overflow:hidden;}
#story {display:flex;  justify-content:space-between; max-width:1400px; margin:0 auto; padding:0 2%;}
#story .story {width:66%; padding:30px 3% 0 0; box-sizing:border-box; background:#f5f5f5; overflow:hidden;position:relative;}
#story .story .list {display:flex; flex-wrap:wrap; margin-top:40px;}
#story .story .more {position:absolute; top:147px; right:42px;} 
#story .story .item {width:48%; margin-bottom:60px; background:#fff; box-sizing:border-box;}
#story .story .item .img {display:block; height:280px;}
#story .story .item .img img {width:100%; height:100%; object-fit:cover;}
#story .story .item .text {display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; height:105px; font-size:18px; color:#313131; line-height:26px;}
#story .story .item:nth-child(2n+2) {margin-left:4%;}

#story .story2 {width:34%; padding:100px 1% 0 3%; background:#005b9a; box-sizing:border-box; overflow:hidden; position:relative;}
#story .story2 .list {margin-top:40px;}
#story .story2 .more {position:absolute; top:147px; right:14px;} 
#story .story2 .item {display:block; margin-bottom:60px; box-sizing:border-box;}
#story .story2 .item .img {display:block; height:280px;}
#story .story2 .item .img img {width:100%; height:100%; object-fit:cover;}
#story .story2 .item .text {display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; height:103px; font-size:18px; color:#fff; line-height:26px; border-bottom:2px solid #fff;}
#story .main_title {padding:0;}


@media only screen and (max-width:1000px) {
	#story_bg {padding:0; background:none;}
	#story {display:block; padding:0;}
	#story .story {width:100%; padding:0px 2% 50px;}
	#story .story .item:nth-child(1n+3) {display:none;}
	#story .story2 {width:100%; padding:0px 2% 50px;}
	#story .story2 .list {display:flex; flex-wrap:wrap;}
	#story .story2 .more {position:absolute; top:70px;} 
	#story .story2 .item {width:48%; margin-bottom:30px;}
	#story .story2 .item:nth-child(2n+2) {margin-left:4%;}
	
}

@media only screen and (max-width:800px) {
	#story .story .item {width:100%; margin-bottom:30px;}
	#story .story .item:nth-child(2n+2) {margin-left:0;}
	#story .story2 .item {width:100%;}
	#story .story2 .item:nth-child(2n+2) {margin-left:0;}
	
}


#sns {max-width:1400px; margin:40px auto 80px; padding:0 2%;}
#sns .sns {display:flex; margin:0 -20px;}
#sns .sns .item {display:block; width:440px; margin:0 20px;}
#sns .sns .item .t24 {display:block; font-size:24px; font-weight:500; color:#939393; text-align:center; margin-bottom:30px;}
#sns .sns .item .img {display:block; height:250px; overflow:hidden;}
#sns .sns .item .img img {width:100% !important; height:100% !important; object-fit:cover;}
#sns .sns .item .text {display:block; padding:25px 20px 30px; background:#f5f5f5;}
#sns .sns .item .text .title {display:block; font-size:18px; color:#01518e; line-height:25px; height:50px; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; }
#sns .sns .item .text .day {display:block; margin-bottom:20px;}
#sns .sns .item .text .t16 {display:block; font-weight:300; color:#808080; line-height:25px; height:50px; overflow:hidden;}
#sns .sns .item .text .more {display:block; margin-top:20px; font-size:14px; color:#808080; text-align:center; text-decoration:underline !important; text-underline-offset:8px;}

@media only screen and (max-width:1000px) {
	#sns .sns {display:block; margin:0;}
	#sns .sns .item {width:100%; margin:0;}
	#sns .sns .item + .item {margin-top:30px;}
	#sns .sns .item .img {height:400px;}
}
@media only screen and (max-width:600px) {
	#sns .sns .item .img {height:250px;}
}



#focus {max-width:1400px; margin:40px auto 0; padding:0 2%;}
#focus .focus {display:flex; margin:0 -20px;}
#focus .focus .item {display:inline-block; width:440px; margin:0 20px 80px; border-bottom:2px solid #e6e6e6;}
#focus .focus .item .img {display:block; height:250px;}
#focus .focus .item .img img {width:100%; height:100%; object-fit:cover;}
#focus .focus .item .text {display:flex; align-items:center; justify-content:center; height:100px;}
#focus .focus .item .text .title {display:block; max-height:100px; font-size:18px; color:#313131; line-height:25px; text-align:center; overflow:hidden;}

#focus .focus .slick-prev {position:absolute; top:0px; right:29px; z-index:10; width:30px; height:30px; font-size:0; border:0; background:url("/site/handong-kor/res/img/btn_prev.png") no-repeat 0 0; cursor:pointer;}
#focus .focus .slick-next {position:absolute; top:0px; right:0px; z-index:10; width:30px; height:30px; font-size:0; border:0; background:url("/site/handong-kor/res/img/btn_next.png") no-repeat 0 0; cursor:pointer;}

@media only screen and (max-width:800px) {
	#focus .focus.v2 {display:none;}
	
}



#bbs {padding:0 2%;}
#bbs .bbs {display:flex; width:100%; max-width:1400px; margin:40px auto 60px; border:1px solid #ddd;}
#bbs .bbs .item {width:470px; height:300px; padding:35px 40px 30px; background:#fff; box-sizing:border-box; overflow:hidden;position:relative;}
#bbs .bbs .item:nth-child(2) {border-left:1px solid #ddd; border-right:1px solid #ddd;}
#bbs .bbs .bbs_title {font-size:22px; color:#000;}
#bbs .bbs .more {position:absolute; top:35px; right:40px;}
#bbs .bbs .list {margin-top:30px;}
#bbs .bbs .list a {display:block; line-height:24px; padding-bottom:10px; margin-bottom:10px; color:#807f7f; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#bbs .bbs .list a:hover {color:#01518e; text-decoration:underline !important; text-underline-offset:8px;}

@media only screen and (max-width:1000px) {
	#bbs .bbs .item {padding:35px 20px 30px;}
	#bbs .bbs .more {position:absolute; top:20px; right:20px;}
	
}
@media only screen and (max-width:800px) {
	#bbs .bbs {flex-wrap:wrap;}
	#bbs .bbs .item {width:100%; height:auto; padding:20px 20px 20px;}
	#bbs .bbs .item:nth-child(2) {border:1px solid #ddd; border-left:none; border-right:none;}
	
}



#calendar .calendar {position:relative; max-width:1400px; margin:80px auto 0; padding:0 2%;}
#calendar .calendar .link {position:absolute; top:0; right:2%;}
#calendar .calendar .tab {display:flex;}
#calendar .calendar .tab input[type=button] {width:140px; height:40px; color:#807f7f; text-align:center; border:1px solid #ddd; background:none; cursor:pointer;}
#calendar .calendar .tab input[type=button].on {color:#fff; border:1px solid #005b9a; background:#005b9a;}
#calendar .calendar .list {display:flex; margin-top:30px;}
#calendar .calendar .list .item {position:relative; display:block; width:200px; height:200px; padding:30px 20px; color:#5c5c5c; background:#f5f5f5; box-sizing:border-box; border-right:1px solid #fff; overflow:hidden;}
#calendar .calendar .list .item .more {position:absolute; top:30px; right:20px; font-size:13px; text-decoration:underline !important; text-underline-offset:5px; display:none;}
#calendar .calendar .list .item .week {display:block; font-weight:300; margin-bottom:10px;}
#calendar .calendar .list .item .day {display:block; font-size:36px; font-weight:bold;}
#calendar .calendar .list .item .text {display:block; margin-top:10px; padding-left:10px; height:50px; overflow:hidden;}
#calendar .calendar .list .item .text span {display:block; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#calendar .calendar .list .item:hover {color:#fff; background:#01518e;}
#calendar .calendar .list .item:hover .week {display:none;}
#calendar .calendar .list .item:hover .more {display:block;}
#calendar .calendar .list .item:hover .day {padding-left:10px;}
#calendar .calendar .list .item:hover .text {height:100px;}

@media only screen and (max-width:1000px) {
	#calendar {display:none;}
	
}



#event {max-width:1400px; margin:60px auto 80px; padding:0 2%;}
#event .event {margin:0 -20px;}
#event .event .item {position:relative; display:inline-block; width:440px; padding:0 20px; box-sizing:border-box;}
#event .event .item .img {display:block; height:250px;}
#event .event .item .img img {width:100%; height:100%; object-fit:cover;}
#event .event .item .d-day {position:absolute; top:20px; left:20px; display:block; padding:0 10px; min-width:80px; height:30px; color:#fff; text-align:center; line-height:30px; box-sizing:border-box; background:#005b9a;}
#event .event .item .text {display:flex; flex-direction:column; padding:25px 20px 30px; background:#f5f5f5;}
#event .event .item .text .title {display:block; height:50px; font-size:18px; color:#01518e; line-height:25px; overflow:hidden;}
#event .event .item .text .day {display:block; font-weight:300; color:#5c5c5c; margin:10px 0 20px;}
#event .event .item .text .t16 {display:block; height:50px; font-size:16px; font-weight:300; line-height:25px; color:#5c5c5c; overflow:hidden;}
#event .event .item .text .more {display:block; font-size:14px; color:#5c5c5c; text-align:center; margin-top:20px; text-decoration:underline !important; text-underline-offset:8px;}

#event .event .slick-track {padding:5px 0;}
#event .event .slick-prev {position:absolute; top:0px; right:29px; z-index:10; width:30px; height:30px; font-size:0; border:0; background:url("/site/handong-kor/res/img/btn_prev.png") no-repeat 0 0; cursor:pointer;}
#event .event .slick-next {position:absolute; top:0px; right:0px; z-index:10; width:30px; height:30px; font-size:0; border:0; background:url("/site/handong-kor/res/img/btn_next.png") no-repeat 0 0; cursor:pointer;}

@media only screen and (max-width:1000px) {
	#event .event {margin:0 -10px;}
	#event .event .item {margin:0 10px;}
	
}


#banner {max-width:1400px; margin:50px auto 120px; padding:0 2%;}
#banner .banner {position:relative;}
#banner .banner .list {margin:0 -20px;}
#banner .banner .list .slick-list {padding:2px 0;}
#banner .banner .item {position:relative; display:inline-block; width:440px; padding:0 20px; box-sizing:border-box;}
#banner .banner .item .img {display:block; height:250px; border:1px solid #efefef; overflow:hidden;}
#banner .banner .item .img img {width:100%; height:100%; object-fit:cover;}
#banner .banner .slick-control {position:absolute; top:-80px; right:0; z-index:10;}
#banner .banner .slick-control {display:flex; position:absolute; top:-80px; right:0; z-index:10;}
#banner .banner .slick-control button {border:none;}
#banner .banner .slick-control .next {margin-left:-1px;}
#banner .banner .slick-control .stop {margin-left:-1px;}
#banner .banner .slick-control .play {display:none; margin-left:-1px;}

@media only screen and (max-width:1000px) {
	#banner .banner .list {margin:0 -10px;}
	#banner .banner .item {margin:0 10px;}
}



@media only screen and (max-width:1000px) {
}
@media only screen and (max-width:640px) {
}
@media only screen and (max-width:480px) {
}
@media only screen and (max-width:400px) {
}