@charset "utf-8";

#top .global{float:left; width:70%;}
#top .global > li{width:15%;}

.days {display:inline-block;vertical-align: middle;width: 48%;background: #5176bf;padding: 8.5px;margin: 0 0px -2px 0;border-radius: 0px;}
.days > span {margin-left:5px;font-family:'score';font-size:15px;display: inline-block;line-height: 1;color: #fff;}
.days > span span {font-family:'LAB';font-size: 16px;letter-spacing: 1px;color: #bfffc8;vertical-align: top;display: inline-block;font-weight: bold;}
.days > span:nth-child(2) span {color: #b6e0ff;}
.days > span:last-child span {color: #ffe2bc;}

#header {height:158px;}

@media all and (max-width:1214px){
	
	#top .global > li {width:18%;}
	.days{background:none; padding: 0px 0 4px 0;margin: 0 0 -11px 0;}
	.days > span{color:#333;}
	.days > span span{color:#2c973b;}
	.days > span:nth-child(2) span{color:#3181bc;}
	.days > span:last-child span{color:#fd9000;}
}
@media all and (max-width:1024px) {
	#top .global{width:140px;}
	#top .global > li{width:100%;}
	#top .sns li:first-child a{background-position: 15px 8px; }
	#header .inner {height:100%;}
	.days {display: block; width: 100%; text-align: center; position: absolute; top: 75px;}

	#header{height:90px;}
	.logo {transform:translate(-50%,-50%);}
}
@media all and (max-width:768px) {
	#top .sns li:first-child a{background-position: 16px 6px;  background-size: 100px; }
	.days {width:90%;top:65px;left: 50%;transform: translateX(-50%);}
	.logo {top:50%;}
}
@media all and (max-width:568px) {
	#top .sns li:first-child a{background-position: 13px 6px;  background-size: 100px; }
	.days > span, .days > span span {font-size:14px;}
}
@media all and (max-width:380px) {
	.days > span, .days > span span {font-size:13px;}
}
@media all and (max-width:330px) {
	.days {top:58px;}
}

/* ?????? */
#menuArea .inner{position:relative;}
#menuArea.on:after{z-index:97; height:1px; border-top:none; background:#ddd;}
#topmenu li:focus .menu,
#topmenu li:hover .menu{background-color:transparent;}
#topmenu li .menu,
#topmenu li:first-child .menu{border:none;}
#topmenu li:first-child .menu:before{bottom:auto; left:auto; opacity:1; height:100%; width:100%;
																	background:#eaf0f6 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Spbhapvy.tnatjba.xe%2Svzntrf%2Sxe%2Spbzzba%2Sot_zrah_a.cat) no-repeat 100% 0; background-size:contain;}

#menuArea .inner:before{display:none;}
#topmenu > li{position:static;}
#topmenu li .menu{display:none; visibility:visible; opacity:1; z-index:96; position:absolute; left:0; top:65px; width:100%; height:auto;
										min-height:409px; padding:49px 0 12px 26%; transform:none; transition:none; box-sizing:border-box; box-shadow:none; background:none;}
#topmenu li.active .menu{top:65px;}
#topmenu li .tit{position:absolute; top:0; left:0; width:23.4167%; height:100%; padding:56px 0 0 0; line-height:150%; text-align:left; color:#5b5b5b; letter-spacing:-1px; box-sizing:border-box;}
#topmenu li .tit h2{line-height:110%; font-size:34px; color:#333; letter-spacing:-2px;}
#topmenu li .tit h2:after{content:''; display:block; width:48px; height:1px; margin:16px 0 16px; background:#f3a531;}

#topmenu li ul {float:right; width:100%; padding:0 0 0 18px; box-sizing:border-box;
								display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;  align-items: stretch;}
#topmenu .menu > ul > li{float:left; width:16%; margin:0; padding:0 0 35px 2.93%; text-align:left;}
#topmenu .menu:before{content:''; display:block; position:absolute; right:55%; top:0; width:100%; height:100%; margin:0 319px 0 0; border:none;
												background:#eaf0f6 url(http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Spbhapvy.tnatjba.xe%2Svzntrf%2Sxe%2Spbzzba%2Sot_zrah_a.cat) no-repeat 100% 0; background-size:contain;}
#topmenu .menu8 .menu > ul > li:nth-child(-n + 4){min-height:190px;}


#topmenu li li{margin:0;}
#topmenu li li a{position:relative; height:48px; line-height:48px; padding:0; margin:0; font-size:18px; border:1px solid #ddd; border-radius:0; text-align:center; box-sizing:border-box;}

#topmenu li .menu > ul > li:hover > a,
#topmenu li li a:hover,
#topmenu li li a:active,
#topmenu li li a:focus,
#topmenu li > div > ul > li.current_on > a{color:#fff; border-color:#2c6aa6; background:linear-gradient(to right, #2c6aa6 0%,#318cbe 100%);}

#topmenu li li a span{display:block; padding:0;}

/* 3?? ??? */
#topmenu ul ul{padding:16px 0 17px 11px;}
#topmenu ul ul li{float:none; width:100%; padding:0; box-sizing: border-box;}
#topmenu ul ul li a{position:relative; height:auto; line-height:110%; padding:4px 0 4px 11px; font-size:17px; border:none; font-weight:200; text-align:left; color:#333;}
#topmenu ul ul li a:after{display:none;}
#topmenu ul ul li a[target="_blank" rel="noopener noreferrer"]:after{right:22px;}
#topmenu ul ul li a:before{content:''; position:absolute; top:12px; left:0; display:block; width:4px; height:4px; background:#ddd;}
#topmenu ul ul li a:hover:before{background-color:#999;}
#topmenu ul ul li a:hover,
#topmenu ul ul li a:active,
#topmenu ul ul li a:focus,
#topmenu ul ul li.current_on a{color:#000; text-decoration:underline;}

@media all and (max-width:1230px) {
	#topmenu li .menu{padding-right:15px;}
	#topmenu li .tit{padding-left:15px;}
	#topmenu li:first-child .menu:before,
	#topmenu .menu:before{right:auto; left:0; width:23.4167%; margin:0;}
}
@media all and (max-width:1024px) {
	.m_menu li .tit{display:none !important;}
}

/* ��ü + ����� */
	.m_menu{opacity: 0; height:0px}
	.m_menu .logo{}
	.m_menu .m_top{}
	.m_menu.on{opacity: 1;z-index:101;position:absolute;top:0px;left:0px;width:100%;height:auto;background: #44ADEF;  transition:0.5s ease-in-out; }
	.m_menu.on .m_top{position:relative;height:106px;}
	.m_menu.on .logo{position:absolute;top:35px;left: 50%;width: fit-content;transform: translateX(-50%);}
	.m_menu.on .logo a{color:#fff;}
	.m_menu.on .logo span > span{color:#fff;}
	.m_menu.on > ul{display: flex;width:100%;height:calc(100% - 106px);box-sizing:border-box; padding:30px 120px;
										flex-direction: row;flex-wrap: nowrap;align-items: stretch;justify-content: space-evenly;}
	.m_menu.on > ul a{display:block; text-decoration:none; cursor:pointer;}
	.m_menu.on > ul > li{width: 160px;}
	.m_menu.on > ul > li > a{position:relative;height: 2em;line-height: 2em;color:#fff;font-size: 20px;font-weight: 600;background: rgba(0,0,0,0.1);text-align: center;}
	.m_menu.on > ul > li.current_on > a,
	.m_menu.on > ul > li > .on{background:#fff; color:#48b1b9;}
	.m_menu.on > ul > li.current_on > a:before,
	.m_menu.on > ul > li > .on:before{display:block;}
	.m_menu.on > ul > li > div {width: 100%;height:calc(100% - 106px); box-sizing:border-box; margin:20px 0 0 0}
	.m_menu.on > ul > li.current_on div,
	.m_menu.on > ul > li .on + div{}
	.m_menu.on > ul > li > div > ul > li {margin: 0 0 0px;  padding: 5px 3px;}
	.m_menu.on > ul > li > div > ul > li > a{position:relative; padding:5px; font-size:16px;   text-align: center; font-weight:400;  color:#fff;   border-bottom: 1px solid #3d9bd7;}
	.m_menu.on > ul > li > div > ul > li > ul.d3{display:none}
	.m_menu.on > ul > li.current_on .current_on > a{font-weight:800; color:#fff; background:#0a79bf}
	.m_menu.on .menu .tit {display:none;}

	.m_menu.on .btn_menu_close{display:block; z-index:96; position:absolute; top:27px; right:3%; width:50px;
									height:50px; border:2px solid rgba(255,255,255,0.75); background:none;  transition:0.1s ease-in-out;  }
	.m_menu.on .btn_menu_close .bar{position:absolute; top:22px; left:11px; display:block; width:25px; height:2px; background:rgba(255,255,255,0.8);}
	.m_menu.on .btn_menu_close .bar1{transform:rotate(45deg);}
	.m_menu.on .btn_menu_close .bar2{transform:rotate(-45deg);}

@media all and (max-width:1600px) {
	.m_menu.on > ul{padding:30px}
	.m_menu.on > ul > li > a{font-size:120%}
	.m_menu.on > ul > li > div{margin:10px 0 0 0}
	.m_menu.on > ul > li > div > ul > li > ul li a{font-size:14px}

}/*1600*/

@media all and (max-width:1200px) {
	.m_menu.on > ul > li > a{font-size:100%}
	.m_menu.on > ul > li > div > ul > li > a{font-size:14px}
	.m_menu.on > ul > li > div > ul > li > ul li a{font-size:12px}


}/*1200*/

@media all and (max-width:992px) {
	.m{display:block !important;}
	.m_menu{}
	.m_menu.on{}
	.m_menu.on > ul{display: block;}
	.m_menu.on > ul li{display: block; width: 100%; height: auto; box-sizing: border-box;}
	.m_menu.on > ul li a{display: block; width: 100%; height: auto; box-sizing: border-box;}




} /*992*/


#subVisual {position:relative; overflow:hidden; width:100%; height:219px;}
#subVisual .img{position:absolute; left:50%; top:0; transform:translateX(-50%);}
#subVisual .img img{animation:ani_background 8s ease-in-out;}
@keyframes ani_background{
	0%{transform:scale(1.13);}
	50%{transform:scale(1);}
}
@media all and (max-width:1024px) {
	#subVisual{height:auto;}
	#subVisual .img{position:static; left:0; width:100%; transform:translateX(0);}
}