@charset "utf-8";

.m_contents{height:auto;position:relative;z-index:1}
.main_area{width:100%;height: 980px;background:url("https://www.uljin.go.kr/images/04_reservation/main/visual01.jpg") no-repeat center;background-size:cover;position:relative}
.main_area .visual_field{width:90%;overflow:hidden;text-align:center;margin:0 auto;padding: 8% 0 0 0;}
.main_area .visual_field .visual_txt{font-size:16px;color:#fff;padding-bottom:1%}
.main_area .visual_field .visual_m_txt>img{width:90%;padding:3% 0 5% 0;}
.main_area .visual_field .btn_list ul>li{display:inline-block;text-align:center;margin: 2%;}
.main_area .visual_field .btn_list ul>li>a{display:block;width:90px;color:#fff;font-size:18px;text-decoration:underline;word-break:keep-all;}
.main_area .visual_field .btn_list ul>li>a:hover{color:#fff799;text-decoration:none}
.main_area .visual_field .btn_list ul>li>a>span{color:#fff;font-size:20px;padding:120% 0 0 0;display:block;}
.main_area .visual_field .btn_list ul>li:nth-child(1)>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu01.png") no-repeat center top;background-size:contain}
.main_area .visual_field .btn_list ul>li:nth-child(2)>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu02.png") no-repeat center top;background-size:contain}
.main_area .visual_field .btn_list ul>li:nth-child(3)>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu03.png") no-repeat center top;background-size:contain}
.main_area .visual_field .btn_list ul>li:nth-child(4)>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu04.png") no-repeat center top;background-size:contain}
.main_area .visual_field .btn_list ul>li:nth-child(5)>a>span{background:url("/upload_data/board_data/BBS_0000130/174312181519526.png") no-repeat center top;background-size:contain}
/*.main_area .visual_field .btn_list ul>li:nth-child(5)>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu05.png") no-repeat center top;background-size:contain}*/
.main_area .visual_field .btn_list ul>li:last-child>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/vusual_menu06.png") no-repeat center top;background-size:contain}
.main_area .visual_field .btn_list>p{margin:30px auto 30px auto;height:65px;width:225px;background:url("https://www.uljin.go.kr/images/04_reservation/main/res_views_bg.png") no-repeat 110% 500%,#00a950;border-radius:10px;transition:all 0.3s ease-in-out}
.main_area .visual_field .btn_list>p>a{display:block;color:#fff;text-align: left;width: 100%;height: 100%;}
.main_area .visual_field .btn_list>p:hover{background:url("https://www.uljin.go.kr/images/04_reservation/main/res_views_bg2.png") no-repeat 95% 400%,#fff799;}
.main_area .visual_field .btn_list>p>a:hover{color:#00a950;font-weight:600;}
.main_area .visual_field .btn_list>p>a>span{padding: 22px 0 0 30px;display: block;font-size: 18px;background:url("https://www.uljin.go.kr/images/04_reservation/main/res_views_more.png") no-repeat 90% 90%}
.main_area .visual_field .btn_list>p:hover>a>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/res_views_more2.png") no-repeat 90% 90%}
.main_area .visual_field .btn_list ul>li>a>span{ transition:all 0.5s ease-in-out;}
.main_area .visual_field .btn_list ul>li>a:hover>span{ transform:rotateY(360deg);}

.main_area .visual_field .btn_list ul.link2{background:rgba(36,75,197,0.7);border-radius:10px;padding:10px 0;}
.main_area .visual_field .btn_list ul.link2>li>a{text-decoration:none;width:auto;font-size:16px;}

.main_area .notice_field{bottom:0;background:rgba(31,62,153,0.9);color:#fff;position:absolute;left:0;bottom:0;width:100%;}
.main_area .notice_field .time{height:50px;font-size:16px;box-sizing:border-box;padding:10px 0;background:rgba(4,31,118,0.9);font-weight:600;text-align:center;}
.main_area .notice_field .time>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/time_icon.png") no-repeat 17% center;display:inline-block;padding:5px 0 5px 20%}
.main_area .notice_field .time>span>i{font-style:normal;color:#fff799}
.main_area .notice_field .notice{padding:10px}
.main_area .notice_field .notice>h2{display:none;}
.main_area .notice_field .notice>ul>li{padding:0 0 0 10px;background:url("https://www.uljin.go.kr/images/04_reservation/main/notice_list.gif") no-repeat left 5px;overflow:hidden}
.main_area .notice_field .notice>ul>li:hover{text-decoration:underline}
.main_area .notice_field .notice>ul>li>a{color:#fff;display:block;padding:0 0 3px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:300px;}
.main_area .notice_field .notice>ul>li>span{font-size:11px;color:#e1e1e1}

.con_area{padding:10px;}
.con_area>h2{text-align:center;margin:20px auto 20px auto;padding:15px 0 15px 30px;background:url("https://www.uljin.go.kr/images/04_reservation/main/new_res_icon.png") no-repeat left center;color:#314a9d;width:270px;}
.con_area .res_new_list>li{border:1px solid #dbdbdb;padding:4%;margin:0 0 3% 0;box-shadow:3px 3px 3px #f1f1f1;position:relative;}
.con_area .res_new_list>li .category{font-weight:bold;;color:#314a9d;font-size:16px;border-bottom:1px solid #3149ad;padding:0 0 3% 0;}
.con_area .res_new_list>li .res_tit{color:#000;font-size:20px;font-weight:600;padding:3% 0;}
.con_area .res_new_list>li .res_txt{font-size:13px;height:50px;overflow:hidden;line-height:1.3em}
.con_area .res_new_list>li .res_date,.con_area .res_new_list>li .res_date2{font-size:13px;color:#000;}
.con_area .res_new_list>li .res_date>strong,.con_area .res_new_list>li .res_date2>strong{padding:3px 10px;background:#f6f6f6;display:inline-block;font-size:13px;color:#314a9d;border-radius:15px;margin:7px 0 7px 0}
.con_area .res_new_list>li .condition{margin:10px 0 0 0}
.con_area .res_new_list>li .condition>a{display:block;width:100%;text-align:center;color:#fff;background:#4c4c4c;padding:10px 0;transition:0.5s all ease-in-out}
.con_area .res_new_list>li .condition.on a{background:#f26c4f;}
.con_area .res_new_list>li .condition.on a:hover{background:#223e99;font-weight:600;text-decoration:underline}
.con_area .new_res_more{text-align:center}
.con_area .new_res_more>button{text-align:center;background:url("https://www.uljin.go.kr/images/04_reservation/main/new_res_more.png") no-repeat 20% center,#00a950;color:#fff;font-size:20px;width:160px;height:50px;padding:12px 0 15px 20px;text-align:center;border-radius:10px;font-weight:bold;margin:20px 0;box-shadow:3px 3px 3px #f1f1f1;transition:0.5s all ease-in-out}
.con_area .new_res_more>button:hover{background:url("https://www.uljin.go.kr/images/04_reservation/main/new_res_more.png") no-repeat 22% center,#333;}

@media all and (min-width:449px) {
.main_area .visual_field .btn_list ul>li{display:inline-block;text-align:center;margin:2% 2.5%;}
.main_area .visual_field .btn_list ul>li>a{display:block;width:75px;color:#fff;font-size:18px;text-decoration:underline}
}
@media all and (min-width:549px) {
.main_area .notice_field .notice>ul>li{line-height:1.8em;background:url("https://www.uljin.go.kr/images/04_reservation/main/notice_list.gif") no-repeat left 9px;}
.main_area .notice_field .notice>ul>li:hover>a{text-decoration:underline}
.main_area .notice_field .notice>ul>li>a{display:inline-block}
.main_area .notice_field .notice>ul>li>span{float:right}
}

/* Tablet */
@media all and (min-width:768px) {
.main_area{width:100%;height: 760px;background:url("https://www.uljin.go.kr/images/04_reservation/main/visual01.jpg") no-repeat center;}
.main_area .visual_field .btn_list ul>li{display:inline-block;text-align:center;margin: 2% 0.5%;}
.main_area .visual_field .btn_list ul>li>a{display:block;width:100px;color:#fff;font-size:18px;text-decoration:underline}
.main_area .notice_field .time{height:70px;font-size:16px;float:left;width:30%;}
.main_area .notice_field .time>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/time_icon.png") no-repeat left center;padding:15px 0 10px 13%}
.main_area .notice_field .time>span>i{font-size:18px;}
.main_area .notice_field .notice{float:left;padding:10px 0;height:50px;padding:10px;box-sizing:border-box;width:70%;}
.con_area .res_new_list{overflow:hidden}
.con_area .res_new_list>li{width:43.5%;float:left;margin:1%;padding:2%}
.main_area .visual_field .btn_list ul.link2>li{position:relative;margin: 2% 1%;width:calc(100% / 4 - 4%);box-sizing:border-box;text-align:center;}
.main_area .visual_field .btn_list ul.link2>li:after{display:block;content:"";width:1px;height:20px;border-left:dashed 1px #5973c4;position:absolute;top:0;left:-10px;}
.main_area .visual_field .btn_list ul.link2>li:nth-child(5):after,
  .main_area .visual_field .btn_list ul.link2>li:first-child:after{display:none;}
.main_area .visual_field .btn_list ul.link2>li>a{width:100%;}
}


/* Desktop */
@media all and (min-width:1023px) {
.main_area{width:100%;height: 750px;background:url("https://www.uljin.go.kr/images/04_reservation/main/visual01.jpg") no-repeat;position:relative;overflow:hidden;background-attachment:fixed;background-size:cover;}
.main_area .visual_field{width:1024px;margin:0 auto;padding:3% 0 0 0;}
.main_area .visual_field .visual_txt{font-size:24px;color:#fff;padding-bottom:1%}
.main_area .visual_field .visual_m_txt>img{width:auto;;padding:1% 0;}
.main_area .visual_field .btn_list ul>li{display:inline-block;text-align:center;margin: 2%;}
.main_area .visual_field .btn_list ul>li>a{font-size:18px;width:120px}
.main_area .visual_field .btn_list ul.link2>li{margin: 10px 3%;width:calc(100% / 4 - 9%);}
.main_area .visual_field .btn_list ul.link2>li:after{left:-30px;}
  
.main_area .notice_field .notice_inner{width:1200px;margin:0 auto}
.main_area .notice_field .time>span{background:url("https://www.uljin.go.kr/images/04_reservation/main/time_icon.png") no-repeat left center;padding:15px 0 10px 13%;font-size:20px}
.main_area .notice_field .time>span>i{font-size:24px;}
.main_area .notice_field .notice>h2{display:block;float:left;width:120px;padding:15px 0 0 15px;}
.main_area .notice_field .notice>h2>a{font-size:18px;color:#fff;}
.main_area .notice_field .notice>h2>a>span{padding:0 0 0 5%;transition:all 0.5s ease-in-out;}
.main_area .notice_field .notice>h2>a>span>img{transition:all 0.5s ease-in-out;}
.main_area .notice_field .notice>h2>a:hover>span>img{transform:rotate(180deg);}
.main_area .notice_field .notice{float:left;padding:10px 0;height:50px;padding:10px;box-sizing:border-box;width:70%;}
.con_area{width:1200px;margin:0 auto;}
.con_area::after{content:"";clear:both;display:block}
.con_area .res_new_list>li{width:21%;float:left;margin:1%;padding:1%}
.con_area .res_new_list>li:nth-child(4n){margin:1% 0 1% 1%;}
.con_area .res_new_list>li:last-child:after{clear:both;display:block;content:"";}
.con_area .res_new_list>li .res_tit{height:25px;overflow:hidden;line-height:1.5em}
.con_area .new_res_more>button{margin:30px 0;}


}



@media all and (min-width:1100px) {
.visual_ass01,.visual_ass02{display:none}
}
@media all and (min-width:1200px) {
.visual_ass01{display:block;position:absolute;top:40%;left:-5%;width:352px;height:294px;background:url("https://www.uljin.go.kr/images/04_reservation/main/visual_ass01.png") no-repeat center}
.visual_ass02{display:block;position:absolute;top:35%;right:-10%;width:468px;height:373px;background:url("https://www.uljin.go.kr/images/04_reservation/main/visual_ass02.png") no-repeat center}
.shake{animation-duration:8s;animation-iteration-count:infinite;animation-name:shake;}
.shake2{animation-duration:10s;animation-iteration-count:infinite;animation-name:shake;}
}
@keyframes shake {
  0%, 100% {
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-20px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(20px);
  }
}
@keyframes shak2e {
  0%, 100% {
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-25px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(25px);
  }
}