@charset "utf-8";

#contents{text-align:center; clear:both; overflow:hidden; font-size:0px; white-space:nowrap}
section{float:left; position:relative; text-align:center; vertical-align:top; width:33.33333333%; height:825px; background-repeat:no-repeat; background-position:center 30%; font-size:15px; animation:visual 10s ease 1 forwards}
section:before{position:absolute; display:block; content:''; width:100%; height:100%; background:rgba(0,0,0,.45); transition:all .5s ease; -webkit-transition:all .5s ease}
section.on:before{background:rgba(255,255,255,.85); transition:all .5s ease; -webkit-transition:all .5s ease}
section.life{background-image:url(../img/main/life_bg.jpg)}
section.visitors{background-image:url(../img/main/visitors_bg.jpg); animation-delay:3s}
section.facility{background-image:url(../img/main/facility_bg.jpg); animation-delay:5s}


@keyframes visual{
	 0%{background-position:center 30%}
	 50%{background-position:center bottom}
	 100%{background-position:center center}
}


section .con{/*display:none; */position:absolute; width:100%; top:45%; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
section .con h3{font-size:4em; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,.5); font-weight:normal; letter-spacing:-.1em}
section .con h3 span{display:block; margin-top:10px; font:0.4666em arial; letter-spacing:-0px}
section .con .btn_view a{display:inline-block; margin-top:41px; padding:5px 0px 9px; width:152px; font-size:1.333em; color:#fff; border:1px solid #fff; border-radius:3px}
section .turn{display:none; position:relative; text-align:left; padding:10%; z-index:1}
section .turn:before{position:absolute; left:0px; top:0px; display:block; content:''; width:100%; height:4px; background:#333}
section.life .turn:before{background:#ea6f7e}
section.visitors .turn:before{background:#ffb628}
section.facility .turn:before{background:#39993b}
section .turn *{OPACITY:0}
section.on .turn *{OPACITY:1}
section .turn div.txt h3{font-size:3.66em; font-weight:normal}
section .turn div.txt h3 span{font:bold 0.54em arial; color:#939393; letter-spacing:0px}
section .turn div.txt p{margin-top:30px; font-size:1.2em; color:#484848}
section .turn ul.ic_list{text-align:center; margin-top:5%; font-size:0px; letter-spacing:-6px; white-space:normal}
section .turn ul.ic_list li{display:inline-block; vertical-align:top; margin:10% 1% 0%; width:31.3%; font-size:18px}
section .turn ul.ic_list li a{display:block} 
section .turn ul.ic_list li a span.txt{display:block; margin-top:10px; letter-spacing:-1.5px; line-height:130%; word-break:keep-all}
section .turn ul.ic_list li a:hover span.txt{font-weight:bold; color:#000}
section .turn ul.ic_list li a:before{display:inline-block; content:''; width:100%; max-width:112px; height:90px; background-repeat:no-repeat; background-position:center 18px; overflow:hidden; border-bottom:2px solid #333; transition:all ease .2s} 
section .turn ul.ic_list li a:hover:before{background-position:center 10px}
section.life .turn ul.ic_list li.ic01 a:before{background-image:url(../img/main/life_ic01.png)}
section.life .turn ul.ic_list li.ic02 a:before{background-image:url(../img/main/life_ic02.png)}
section.life .turn ul.ic_list li.ic03 a:before{background-image:url(../img/main/life_ic03.png)}
section.life .turn ul.ic_list li.ic04 a:before{background-image:url(../img/main/life_ic04.png)}
section.life .turn ul.ic_list li.ic05 a:before{background-image:url(../img/main/life_ic05.png)}
section.visitors .turn ul.ic_list li.ic01 a:before{background-image:url(../img/main/visitors_ic01.png)}
section.visitors .turn ul.ic_list li.ic02 a:before{background-image:url(../img/main/visitors_ic02.png)}
section.visitors .turn ul.ic_list li.ic03 a:before{background-image:url(../img/main/visitors_ic03.png)}
section.visitors .turn ul.ic_list li.ic04 a:before{background-image:url(../img/main/visitors_ic04.png)}
section.visitors .turn ul.ic_list li.ic05 a:before{background-image:url(../img/main/visitors_ic05.png)}
section.visitors .turn ul.ic_list li.ic06 a:before{background-image:url(../img/main/visitors_ic06.png)}
section.visitors .turn ul.ic_list li.ic07 a:before{background-image:url(../img/main/visitors_ic07.png)}
section .turn .view_close{text-align:center}
section .turn .view_close a{display:inline-block; margin-top:41px; padding:5px 0px 7px; width:100px; font-size:1.1em; color:#333; border:1px solid #333; border-radius:3px}


/*
section .turn ul.ic_list li a span.ic{display:inline-block; width:100%; max-width:112px; height:90px; background-repeat:no-repeat; background-position:center bottom -8px; overflow:hidden; border-bottom:2px solid #333; transition:all ease .2s}
section .turn ul.ic_list li a:hover span.ic{background-position:center bottom}
section.life .turn ul.ic_list li.ic01 a span.ic{background-image:url(../img/main/life_ic01.png)}
section.life .turn ul.ic_list li.ic02 a span.ic{background-image:url(../img/main/life_ic02.png)}
section.life .turn ul.ic_list li.ic03 a span.ic{background-image:url(../img/main/life_ic03.png)}
section.life .turn ul.ic_list li.ic04 a span.ic{background-image:url(../img/main/life_ic04.png)}
section.life .turn ul.ic_list li.ic05 a span.ic{background-image:url(../img/main/life_ic05.png)}
section.visitors .turn ul.ic_list li.ic01 a span.ic{background-image:url(../img/main/visitors_ic01.png)}
section.visitors .turn ul.ic_list li.ic02 a span.ic{background-image:url(../img/main/visitors_ic02.png)}
section.visitors .turn ul.ic_list li.ic03 a span.ic{background-image:url(../img/main/visitors_ic03.png)}
section.visitors .turn ul.ic_list li.ic04 a span.ic{background-image:url(../img/main/visitors_ic04.png)}
section.visitors .turn ul.ic_list li.ic05 a span.ic{background-image:url(../img/main/visitors_ic05.png)}
section.visitors .turn ul.ic_list li.ic06 a span.ic{background-image:url(../img/main/visitors_ic06.png)} */
section .turn ul.list{margin-top:17%; overflow:hidden}
section .turn ul.list li{float:left; text-align:center; margin:1%; width:48%; font-size:1.2em}
section .turn ul.list li a{display:block; padding:12px 5px 15px; border:2px solid #333; border-radius:2px}
section .turn ul.list li a:hover{font-weight:bold; color:#39993b; border-color:#39993b}


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

@media screen and (min-width:2400px){
	section{background-size:100%}

}

@media screen and (max-width:1400px){
	section.widenW{width:45%; min-width:450px}
	section .con h3{font-size:3.2em}
	section .con h3 span{}
	section .con .btn_view a{font-size:1.25em}

	section .turn div.txt h3{font-size:3em; font-weight:normal}
	section .turn div.txt h3 span{font-size:0.5em}
	section .turn div.txt p{font-size:1.1em}
	section .turn ul.ic_list li{font-size:17px}
}

@media screen and (max-width:800px){
	#contents{white-space:normal}
	#contents>section{float:none; display:block; width:100%; height:600px; transition:height .2s ease}
	#contents>section:hover{min-width:100%}
	section .turn{padding:9%}
	section .turn div.txt{margin-bottom:10px; min-height:122px}
	section .turn div.txt h3{font-size:2em}
	section .turn div.txt p{margin-top:10px}
	section .turn ul.ic_list, section .turn ul.list{margin-top:0px}
	section .turn ul.ic_list li{margin-top:2%; font-size:16px}
}