@charset "utf-8";

/* visual */

.visual { width: 100%; padding: 30px 0 24px; background: #3d3534 url('../../img/asis/visualBG.jpg') no-repeat center top; background-size: auto 100%; }

#headLine { margin: 0 auto; text-align: center; color:#fff; line-height: 1; }
#headLine span{display:block;}
#headLine span.headcopy {font-size: 1.2em; margin-bottom:15px;}
#headLine span.subcopy {font-size: 1.1em; line-height:1.3em;}
#headLine span.strong {color: #fc9b02;}

.visualConBox {margin: 25px auto 0;display: flex;flex-wrap: wrap;}
.visualConBox li {width: 25%;position: relative;box-sizing: border-box;padding:25px;color: #333;}
.visualConBox li:first-child { background: rgba(3,60,130,0.8);color: #fff; }
.visualConBox li:nth-child(2) { background: rgba(3,149,82,0.8); }
.visualConBox li:nth-child(3) { background: rgba(187,223,45,0.8); }
.visualConBox li:nth-child(4) { background: rgba(255,255,255,0.8); }
.visualConBox li h3 {font-weight: 500;padding-top: 13px;background: url('../../img/asis/sub_bg.png') no-repeat left -195px;}
.visualConBox li h3 a {color: #333;display: block;font-size:19px;height: 48px;line-height: 1.2em;}
.visualConBox li:first-child h3 a {color: #fff;}
.visualConBox li:nth-child(2) h3 a {color: #fff;}
.visualConBox li p {margin:8px 0 14px 0;line-height: 1.3;font-size: 13px;color: #222;font-weight: 300;}
.visualConBox li:first-child p { color: #fff; }
.visualConBox li:nth-child(2) p {color: #fff;}
.visualConBox li dl { display: flex;}
.visualConBox li dl dt {width:100px;height:136px;margin-right: 20px;overflow: hidden;}
.visualConBox li dl dt img {position: absolute;width: 100%;bottom: 25px;max-width:100px;display: block;margin: 0;padding: 0;}
.visualConBox li dl dd {box-sizing: border-box;font-size: 0.875em;}
.visualConBox li dl dd a {position: absolute;bottom: 25px; background:url('../../img/asis/more_arrow.png') 63px center no-repeat; text-align: left;width: 78px;height: 22px;line-height: 20px;font-size: 0.95em;border-radius: 10px;background-color: rgba(255,255,255,0.6);padding: 0 15px;box-sizing: border-box;}


/* content */
#mainCon { margin:30px auto 0; }

#mainCon01{width:100%; box-sizing:border-box;}
#mainCon01 > li {position:relative; float:left; box-sizing: border-box;}
#mainCon01 > li h4 {font-size:20px; font-weight: 500; line-height:1.2em; margin:0 0 10px 0;}
#mainCon01 > li.researchCenter{width:calc(100% - 360px);}
#mainCon01 > li.researchCenter > ul{display:flex; justify-content: space-between; width: 100%;  margin-right:-10px; padding-right: 35px;box-sizing: border-box;}
#mainCon01 > li.researchCenter > ul > li{position:relative; width:155px; height:155px; font-size:14px;}
#mainCon01 > li.researchCenter > ul > li > a{ display:flex; align-items:center; justify-content:center; position:relative; height:100%; text-align:center; border-radius:50%; border:8px solid #dfdfdf; font-weight:400; padding:6px; letter-spacing:-0.5px; transition:border .6s;}
#mainCon01 > li.researchCenter > ul > li > a:after{content:''; position:absolute; display:inline-block; width:36px; height:3px; background:#333; bottom:28px; left:50%; margin-left:-18px;}
#mainCon01 > li.researchCenter > ul > li > a:hover{border:8px solid #6588c3; color:#3d64a5; font-weight:500;}
#mainCon01 > li.researchCenter > ul > li > a:hover:after{background:#3d64a5;}
#mainCon01 > li.message{float:right; width:360px; background:#f2f2f2; border:1px solid #d0d0d0; border-top: 3px solid #000; padding:20px;}
#mainCon01 > li.message:before{content:''; display:table-cell; width:140px; height:140px; border:1px solid #bdbdbd; background:url('../../img/asis/main_massage.png') center no-repeat; margin-right:20px;}
#mainCon01 > li.message .director{font-size:13px;}
#mainCon01 > li.message h4 {margin:0 0 5px 0;}
#mainCon01 > li.message > div{display:table-cell; vertical-align:top; padding:15px 0 0 20px;}
#mainCon01 > li.message a.moreBtn {position:absolute; bottom:20px; right:20px; background: url('../../img/asis/more_arrow_L1.png') no-repeat right 70%; padding:0 15px 0 0; font-size:14px;}

/* main icon */
#mainCon02 {display: flex;width:100%;flex-wrap: wrap;justify-content: space-between;}
#mainCon02 > li {position:relative;width:49%;margin:30px 0;background: #e9eff3;}
#mainCon02 > li:first-child > ul{margin-left:0;}
#mainCon02 > li:last-child > ul{margin-right:0;}
#mainCon02 > li.bannerlink > ul{display:flex;width: 100%;height: 100%;}
#mainCon02 > li.bannerlink > ul > li{position:relative;display:flex;width: 50%;height: 100%;padding:25px 20px;box-sizing:border-box;}
#mainCon02 > li.bannerlink > ul > li:first-child{background: url('../../img/asis/main_icon001.png') 20px 83% no-repeat;}
#mainCon02 > li.bannerlink > ul > li:last-child{background: url('../../img/asis/main_icon02.png') 20px 85% no-repeat;}
#mainCon02 > li.bannerlink > ul > li:first-child:after{content:''; position:absolute; right:0; float:right; width:1px; height:calc(100% - 50px); border-right:1px solid #dcdcdc;}
#mainCon02 > li.bannerlink h4{color:#3d64a5; font-size:18px; line-height:26px; font-weight:500;}
#mainCon02 > li.bannerlink a.moreBtn {position:absolute;bottom:20px;right:20px;background: url('../../img/asis/more_arrow_L1.png') no-repeat right 70%;padding:0 15px 0 0;font-size:14px;}
#mainCon02 > li.academicEvents{padding:15px 20px 7px 20px;box-sizing:border-box;}
#mainCon02 > li.academicEvents h4{color:#3d64a5;font-size:20px;font-weight:500;padding-bottom:10px;border-bottom:1px solid #dcdcdc;}
#mainCon02 > li.academicEvents > ul > li{position:relative; border-bottom:1px solid #dcdcdc;}
#mainCon02 > li.academicEvents > ul > li:last-child{border:0;}
#mainCon02 > li.academicEvents > ul > li:after{content:''; position:absolute; top:13px; right:5px; float:right; width:11px; height:7px; background:url('../../img/asis/icon_arrow.png') center no-repeat;}
#mainCon02 > li.academicEvents > ul > li > a{display:block;width:100%;background:url('../../img/asis/bul_arrow.png') left 10px no-repeat;font-size:14px;line-height:1.3em;padding: 7px 40px 7px 15px;box-sizing:border-box;}