@charset "utf-8";

body {background:#eee;}
 
#header {position:fixed; top:0; left:0; right:0; height:68px; background:#fff; z-index:98;  font-size:50px; padding:15px 0 0 0; z-index:9999;}
#header h1 {text-align:center; font-size:30px;}
/*#header h1 a img {width:150px;}*/
.home {position:absolute; top:20px; left:12px; height:30px;}
.home a {display:block; width:100%; height:30px;}
.home a img {height:30px;}
.login {position:absolute; top:20px; right:12px; height:30px;}
.login a {display:block; width:100%; height:30px;}
.login a img {height:30px;}
.mypage {position:absolute; top:20px; right:40px; height:30px;}
.mypage a {display:block; width:100%; height:30px;}
.mypage a img {height:30px;}


/***************Container******************/
#container {max-width:720px; margin:0 auto; position:relative; top:68px;}
.notice {position:relative; width:100%; height:47px; background:#233559; margin:0 auto; padding-left:22%; overflow:hidden;}
.notice h2 {position:absolute; top:0; left:0; width:20%; height:47px; line-height:47px; background:#A68241; color:#fff; text-align:center; font-size:20px; font-weight:300;}
.notice_slider ul {height:47px; font-size:15px; font-weight:300;}
.notice_slider ul li {height:47px; line-height:47px;}
.notice_slider ul li a {display:block; color:#fff; margin-right:100px;}
a.more {position:absolute; right:10px; top:9px; z-index:999; width:30px; height:30px;}
.more img {height:30px;}
.notice_slider .bx-controls-direction a {display:none;}

.visual_wrap {position:relative; max-width:720px; height:100vh; margin:0 auto; background:url(../images/visual.jpg) center no-repeat; background-size:cover;}
.visual_wrap ul {position:absolute; left:0; top:0; width:100%; height:100%;}
.visual_wrap ul li a {display:block; width:90px; height:90px; color:#fff; text-align:center; padding-top:5px; font-size:14px;}
.visual_wrap ul li.reserve {position:absolute; left:50%; top:35%; transform:translate(-50%,-50%);}
.visual_wrap ul li.reserve a {display:block; width:120px; height:120px; text-align:center; padding-top:80px; font-size:16px;}

.visual_wrap ul li.search {position:absolute; left:50%; top:calc(35% - 123px); transform:translate(-50%,-50%); }
.visual_wrap ul li.news {position:absolute; left:calc(50% - 123px); top:calc(35% - 10px); transform:translate(-50%,-50%);}
.visual_wrap ul li.course {position:absolute; left:calc(50% + 125px); top:calc(35% - 10px); transform:translate(-50%,-50%);}
.visual_wrap ul li.guide {position:absolute; left:calc(50% + 125px); top:calc(35% - 10px); transform:translate(-50%,-50%);}
.visual_wrap ul li.join {position:absolute; left:50%; top:calc(35% + 123px); transform:translate(-50%,-50%);}

.visual_wrap ul li.news:before {position:absolute; content:''; left:0; top:0; width:90px; height:90px; border-radius:10px; border: 2px solid #0d1931; background:#233559; z-index:-1;}
.visual_wrap ul li.news:after {position:absolute; content:''; left:25px; width:50px; top:35px; height:90px; background:url(../images/icon.png) no-repeat 0 0; z-index:-1;}
.visual_wrap ul li.search:before {position:absolute; content:''; left:0; top:0; width:90px; height:90px; border-radius:10px; border: 2px solid #0d1931; background:#233559; z-index:-1;}
.visual_wrap ul li.search:after {position:absolute; content:''; left:25px; width:50px; top:35px; height:90px; background:url(../images/icon.png) no-repeat -68px 0; z-index:-1;}
.visual_wrap ul li.course:before {position:absolute; content:''; left:0; top:0; width:90px; height:90px; border-radius:10px; border: 2px solid #0d1931; background:#233559; z-index:-1;}
.visual_wrap ul li.course:after {position:absolute; content:''; left:30px; width:50px; top:35px; height:90px; background:url(../images/icon.png) no-repeat -137px 0; z-index:-1;}
.visual_wrap ul li.join:before {position:absolute; content:''; left:0; top:0; width:90px; height:90px; border-radius:10px; border: 2px solid #0d1931; background:#233559; z-index:-1;}
.visual_wrap ul li.join:after {position:absolute; content:''; left:20px; width:50px; top:35px; height:90px; background:url(../images/icon.png) no-repeat -194px 0; z-index:-1;}
.visual_wrap ul li.guide:before {position:absolute; content:''; left:0; top:0; width:90px; height:90px; border-radius:10px; border: 2px solid #0d1931; background:#233559; z-index:-1;}
.visual_wrap ul li.guide:after {position:absolute; content:''; left:25px; width:50px; top:35px; height:90px; background:url(../images/icon.png) no-repeat -273px 0; z-index:-1;}
.visual_wrap ul li.reserve:before {position:absolute; content:''; left:0; top:0; width:120px; height:120px; border-radius:10px; border: 2px solid #7e5d23; background:#A68241; z-index:-1;}
.visual_wrap ul li.reserve:after {position:absolute; content:''; left:30px; width:82px; top:20px; height:90px; background:url(../images/ico_reserve.png) no-repeat 0 0; z-index:-1;}



.sub_menu {position:absolute; top:calc(35% + 220px); left:0; right:0; width:400px; margin:0 auto; color:#3e4351; text-align:center; font-size:15px; color:#999;}
.sub_menu a {color:#000;}





/**************************Footer*********************/
#footer {position:absolute; bottom:0; left:0; right:0; width:100%; min-height:100px; text-align:center;}
#footer .foot_menu {}
#footer .foot_menu span a {color:#e7e7e7; font-size:12px;}
#footer .foot_menu .bar {font-size:10px; color:#8f8f91;}
#footer .address {padding:10px 0; font-size:10px; color:#f0f0f0;}