@charset "utf-8";
/* -----------------------------------------------------------  */
#firstview { position: relative;}
#firstview #header { position: fixed; top: 0; width: 100%; z-index: 1; min-width: 1100px;}
#firstview ul.slider { float: right; width: 80%; margin: 0 0 0 -50px;}
#firstview ul.slider li { position: relative; height: 900px; margin: 0 0 0 50px; background-size: cover;}
#firstview ul.slider li h2 { padding: 200px 0 240px; position: absolute; top: 0; left: -50px; font-size: 28px; font-weight: bold; color: #0096e0;}

#news { background: url(../images/index/bg_01.png) center 125px no-repeat #0096e0; margin: -200px 0 0; }
#news .inner { position: relative; padding: 200px 0 90px;}
#news a.scroll { display: inline-block; *display: inline; *zoom: 1; position: absolute; left: 0; top: 70px;}
#news h3.title { padding: 125px 0 0; color: #fff;}
#news ul { margin: 0 0 0 -40px;}
#news ul li { float: left; width: 530px; margin: 0 0 40px 40px;}
#news ul li img { float: left;}
#news ul li div { float: left; width: 300px; padding: 0 0 0 20px; color: #fff;}
#news ul li div h4 { padding: 0 0 20px; height: 70px; overflow: hidden;}
#news p.btn { margin: 20px 0 0;}

#activities { padding: 115px 0 120px; position: relative;}
#activities::before { content:''; width: 40vw; background: #eaf4f9; position: absolute; left: 0; top: 0; height: 1560px; z-index: -1;}
#activities .magazine_list { margin: 0 0 0 -100px;}
#activities .magazine_list li {  width: 500px; margin: 0 0 40px 100px;}
#activities .magazine_list li .text_box p { color: #cfcfcf;}
#activities .magazine_list li:nth-child(2n+1) { margin: 0 0 0 100px;}
#activities .magazine_list li:nth-child(2n+0) { margin: 50px 0 0 100px;}
#activities p.btn { margin: 50px 0 0;}

#about { position: relative; margin: 0 0 90px;}
#about::before { content:''; width: 80%; background: url(../images/index/bg_00.gif) no-repeat; position: absolute; top: 0; left: 0; height: 90%; z-index: -1; background-size: cover;}
#about .text_box { width: 50%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 120px 2% 100px 15%; float: left; color: #fff;}
#about .text_box h4 { font-size: 2vw; font-weight: bold; padding: 0 0 40px;}
#about .text_box p.text { font-size: 1vw;}
#about .text_box p.btn { text-align: left; padding: 30px 0 0;}
#about img.image { float: right; width: 55%; height: auto; margin: 270px 0 0 -5%;}

#research_grant { padding: 120px 0 125px; }
#research_grant img.photo { float: left; width: 50%; height: auto;}
#research_grant div { float: left; width: 50%; padding: 5% 5% 0; box-sizing: border-box; -webkit-box-sizing: border-box;}
#research_grant div h4 { font-size: 26px; font-weight: bold; padding: 0 0 25px;}
#research_grant div p { font-size: 18px; max-width: 450px;}
#research_grant p.btn.common_01 a { background: #000; color: #fff;}

#member { text-align: center; padding: 120px 0 130px; background: #eaf0f0;}
#member ul li { float: left; width: 340px; margin: 0 0 0 40px;}
#member ul li:first-child { margin: 0;}
#member ul li p.btn { margin: 35px 0 0;}
/* #member ul li p.btn a { width: 340px; height: 75px; line-height: 75px; font-size: 22px; color: #fff; background: #000; display: inline-block; *display: inline; *zoom: 1; } */
#member ul li p.btn a { font-size: 22px; pointer-events: none; font-weight: bold; }
#member ul li p.btn a img { padding: 0 10px 0 0;}

#member .applybtn { text-align: center; padding: 70px 0 0; }
#member .applybtn img { padding: 0 10px 0 0; }
/* #member .applybtn a { width: 510px; background: #000; display: inline-block; *display: inline; *zoom: 1; color: #fff; font-size: 22px; height: 100px; line-height: 100px; } */
#member .applybtn a { width: 340px; background: #000; display: inline-block; *display: inline; *zoom: 1; color: #fff; font-size: 22px; height: 75px; line-height: 75px; }

#intro h3.main { background: url(../images/index/bg_02.jpg) center top no-repeat; background-size: cover; text-align: center; padding: 210px 0 135px; color: #fff; font-size: 30px; letter-spacing: 10px;}
#intro h3.main img { padding: 0 0 15px;}

#publication { background: #0096e0; padding: 120px 0 95px; text-align: center; color: #fff;}
#publication h3.title span { color: #fff;}
#publication .inner div { width: 710px; margin: 30px auto 0;}
#publication p.btn { float: left; margin: 0 10px;}
#publication p.btn a { font-size: 20px;}

#recruit { padding: 100px 0 90px;}
#recruit h3.title { text-align: center;}
#recruit ul li { float: left; width: 520px;}
#recruit ul li:first-child { margin: 0 60px 0 0;}
#recruit ul li div { padding: 30px 0;}
#recruit ul li div h4 { font-size: 26px; font-weight: bold; padding: 0 0 20px;}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	
/* ------------------------------------------------------------  */

#firstview { position: relative;}
#firstview #header { position: fixed; top: 0; width: 100%; z-index: 1; min-width: inherit;}
#firstview ul.slider { float: right; width: 90%; margin: 0 0 0 -25px;}
#firstview ul.slider li { position: relative; height: 500px; margin: 0 0 0 25px; background-size: cover; background-position: center center;}
#firstview ul.slider li h2 { padding: 160px 0 100px; position: absolute; top: 0; left: -25px; font-size: 18px; font-weight: bold; color: #0096e0; line-height: 130%;}
#firstview ul.slider li h2 img { width: 260px; height: auto;}

#news { background: url(../images/index/bg_01.png) center 60px no-repeat #0096e0; margin: -80px 0 0; padding: 20px 0 90px;}
#news .inner { padding: 100px 0 40px;}
#news a.scroll { display: inline-block; *display: inline; *zoom: 1; top: 0;}
#news a.scroll img { height: 90px; width: auto;}
#news h3.title { padding: 30px 0 0; color: #fff;}
#news ul { margin: 0;}
#news ul li { float: none; width: 100%; margin: 0 0 20px;}
#news ul li img { float: left; width: 45%; height: auto;}
#news ul li div { float: left; width: 53%; padding: 0 0 0 2%; color: #fff;}
#news ul li div h4 { padding: 0; height: 40px; overflow: hidden;}
#news ul li div p.date { padding: 10px 0 0;}
#news p.btn { margin: 10px 0 0;}

#activities { padding: 70px 0; position: relative;}
#activities::before { content:''; width: 40vw; background: #eaf4f9; position: absolute; left: 0; top: 0; height: 100%; z-index: -1;}
#activities .magazine_list { margin: 0 ;}
#activities .magazine_list li {  width: 100%; margin: 0 0 15px;}
#activities .magazine_list li .text_box { padding: 0 3%;}
#activities .magazine_list li .text_box h4 { font-size: 16px; line-height: 130%;}
#activities .magazine_list li .text_box p { color: #cfcfcf;}
#activities .magazine_list li:nth-child(2n+1) { margin: 0 0 15px;}
#activities .magazine_list li:nth-child(2n+0) { margin: 0 0 15px;}
#activities p.btn { margin: 25px 0 0;}

#about { position: relative; margin: 0 0 50px;}
#about::before { content:''; width: 94%; background: url(../images/index/bg_00.gif) no-repeat; position: absolute; top: 0; left: 0; height: 90%; z-index: -1; background-size: cover;}
#about .text_box { width: 92%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 50px 4% 30px; float: none; color: #fff;}
#about .text_box h4 { font-size: 18px; font-weight: bold; padding: 0 0 20px;}
#about .text_box p.text { font-size: 14px;}
#about .text_box p.btn { text-align: center; padding: 30px 0 0;}
#about img.image { float: none; width: 100%; height: auto; margin: 0;}

#research_grant { padding: 0 0 70px;}
#research_grant img.photo { float: none; width: 100%; height: auto;}
#research_grant div { float: none; width: 100%; padding: 50px 4% 0; box-sizing: border-box; -webkit-box-sizing: border-box;}
#research_grant div h4 { font-size: 18px; font-weight: bold; padding: 0 0 15px; text-align: center;}
#research_grant div p { font-size: 14px; max-width: inherit;}

#member { text-align: center; padding: 70px 0 90px;}
#member ul li { float: none; width: 100%; margin: 0 0 40px;}
#member ul li:first-child { margin: 0px 0px 40px 0px;}
#member ul li img { width: 200px; height: auto;}
/*#member ul li p.btn { margin: 35px 0 0;}
#member ul li p.btn a { width: 260px; height: 50px; line-height: 50px; font-size: 16px; color: #fff; background: #000; display: inline-block; *display: inline; *zoom: 1;} */
#member ul li p.btn { margin: 10px 0 0; }
#member ul li p.btn a { font-size: 16px; }
#member ul li p.btn a img { padding: 0 10px 0 0; width: 20px; height: auto;}

#member .applybtn { text-align: center; padding: 20px 0 0; }
#member .applybtn img { width: 20px; height: auto; padding: 0 10px 0 0; }
#member .applybtn a { width: 100%; max-width: 270px; font-size: 16px; height: 60px; line-height: 60px; }

#intro { }
#intro h3.main { background: url(../images/index/bg_02.jpg) center top no-repeat; background-size: 100% auto; text-align: center; padding: 8% 0px 2% 0px; color: #fff; font-size: 16px; letter-spacing: 5px; font-weight: bold;}
#intro h3.main img { padding: 0; width: 170px; height: auto;}

#publication { padding: 70px 0 55px; text-align: center;}
#publication .inner div { width: 92%; margin: 20px auto 0;}
#publication p.btn { float: none; margin: 0 0 15px;}
#publication p.btn a { font-size: 14px;}

#recruit { padding: 70px 0;}
#recruit h3.title { text-align: center;}
#recruit ul li { float: none; width: 100%;}
#recruit ul li:first-child { margin: 0 0 15px;}
#recruit ul li img { width: 100%; height: auto;}
#recruit ul li div { padding: 20px 0;}
#recruit ul li div h4 { font-size: 18px; font-weight: bold; padding: 0 0 10px; text-align: center;}



}