.swiper-container { height: 370px; } .language { position: absolute; right: 10%; color: #ffffff; top: 0%; padding: 12px 13px; background: #e60741; font-size: 14px; font-weight: 700; text-decoration: none; } .language:hover { background: red; } .bgColor-234693 { background: #234693; } .l-attraction a { font-size: 16px; } .l-attractions l-clear { font-size: 14px; } .l-attractions { column-count: 4; margin-bottom: 40px; display:flex; } .l-m-display-inline-block { display: inline-block; } .l-attraction { margin-bottom: .625rem; } .l-width-max { width: 100%; } .l-width-max p { margin-bottom: 0; font-size: 14px; } .soicalth { overflow: hidden; margin: 0; padding: 0; } .soicalth li { float: right; padding: 10px 5px; text-align: right; list-style-type: none; } .soicalth li img { transition: all .5s ease-out; } .soicalth li:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } html { font-size: 62.5%; } body { margin: 0; padding: 0; color: #2b2b2b; -webkit-tap-highlight-color: transparent; } .anchor { padding-top: 90px; margin-top: -90px; display: inline-block; } .text-red { color: red; } .font12 { font-size: 12px; } #back-box a, #back-box a:link, #back-box a:hover { width: auto!important; } .top-logo-menu { position: absolute; max-width: 1440px; width: 100%; top: 0; left: 50%; transform: translateX(-50%); padding: 24px 0 0 0; } .top-logo { position: relative; padding: 0; } .keynote-speaker-img img { transition: all .5s ease-out; vertical-align: bottom; background:#ffffff; border-radius: 3px; } .keynote-speaker-img:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .text-white { color: #ffffff; } #allmap { height: 300px; border: 1px solid #7696b5; } .about-map:first-child { width: 70%; } .h80,.h60 ,.h40 ,.h20 ,.h30 { width: 100%; overflow: hidden; clear: both; } .h80 { height: 80px; } .h60 { height: 60px; } .h40 { height: 40px; } .h30 { height: 30px; } .h20 { height: 20px; } .font26 { font-size: 26px; } .font18 { font-size: 18px; } .font16 { font-size: 16px; } .font14 { font-size: 14px; } .center { text-align: center; } .dlyNpc { display: none; } .top-banner-container { position: relative; height: auto; width: 100%; max-width: 1920px; margin: 0 auto; min-height: 650px; background: url(/gsimages/event/top-bar-synbioforum-4th.jpg?src=20210918) center no-repeat; } .top-banner-container img { /* width: 100%;*/ } .section { position: relative; width: 100%; padding-top: 30px; overflow: hidden; } .mgbox { max-width: 1024px; margin: 0 auto; padding: 40px 0; } .mg-menu ul { list-style-type: none; display: flex; margin: 0; padding: 0; } .mg-menu ul li { flex: 1; text-align: center; border-right: 1px solid #ffffff; padding: 18px 0; background: #1c2b7d; } .mg-menu ul li a { color: #ffffff; font-weight: 400; text-decoration: none; font-size: 24px; white-space: nowrap; } .mg-menu ul li:last-child { border-right-width: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .mg-menu ul li:nth-child(1) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .mg-menu { max-width: 1024px; margin: 0 auto; } .titleh1 { font-size: 36px; color: #00278b; text-align: center; font-weight: normal; padding: 0 0 18px 0; } .titleh3 { font-size: 18px; color: #00278b; font-weight: bold; padding: 0 0 18px 0; } p { font-size: 16px; color: #555555; line-height: 1.6em; margin: 16px 0; } .btn-box { text-align: center; margin: 20px 0; } .button-face { margin-top: 10px; width: auto; padding: 6px 20px; border: 1px solid #00278b; color: #ffffff!important; background-color: #00278b; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; margin: 0; border-radius: 3px; cursor: pointer; line-height: 1.4; font-weight: bold; text-align: center; text-decoration: none!important; font-size: 13px; font-size: 12px; -webkit-text-shadow: 0 1px 0 #00278b; -moz-text-shadow: 0 1px 0 #00278b; -o-text-shadow: 0 1px 0 #00278b; text-shadow: 0 1px 0 #00278b; outline: none } .button-face-ffffff { color: #0F167A!important; border: 1px solid #ffffff; background: #ffffff; } .button-face:hover { background-color: #3880aa; color: #ffffff!important; text-decoration: none!important; border: 1px solid #3880aa; } .button-face-plus, .button-face-plus:hover { font-size: 2.6em; padding: 10px 45px; font-weight: normal; } .button-face-box { color: #00278b!important; border: 1px solid #00278b; background: transparent!important; text-shadow: none; } .button-face-box:hover { background: #00278b!important; color: #ffffff!important; text-decoration: none!important; border-color:#00278b!important; } .tab-div { max-width: 1024px; margin: 0 auto; } .section-title { position: relative; text-align: center; margin: 36px 0; margin-bottom: 60px; } .section-title>span { display: inline-block; font-size: 3.8em; color: #00278b; } .keynote-speaker-content { position: relative; } .keynote-speaker-photo { position: relative; display: flex; flex-grow: wrap; text-align: center; margin: 10px 0; } .keynote-speaker-photo>div { flex: 1; padding: 0 10px; } .keynote-speaker-name { font-weight: bold; margin-bottom: 5px; margin-top: 5px; } .keynote-speaker-title { font-size: 14px; line-height: 1.4em; } .organizer-wrapper { width: 100%; position: relative; } .summit-bg { min-height: 650px; background: url('/gsimages/event/synbioforum-4th-b.jpg') center; } .bgColor-000352 { min-height: 579px; background-color: #000352; } .bgColor-0F167A { padding: 0 0 114px 0; background-color: #0F167A; } .bgColor-A3BCE2 { min-height: auto; background-color: #A3BCE2; padding-bottom:30px; } .bgColor { background-color: #000352; } .bgColor h4 { padding: 40px 15px; color: #fff; text-align: center; font-size: 14px; margin: 0; font-weight: normal; } .content-wrapper { position: relative; width: 100%; max-width: 1024px; margin: 0 auto; } .contact-content { width: 100%; } .target_audience { color: #ffffff!important; } .l-display-flex { display: flex; color: #ffffff; } .l-display-flex-wrap { flex-wrap: wrap; } .l-l-col-4 { width: calc(99.9% * 4/12 - 0.833333333333333rem); } .t-line-height-l { line-height: 1.4em; font-size: 14px; margin-bottom: 20px; font-size: 1.6rem; padding: 0 20px 0 0; } .l-display-block { display: block; } .module-center { text-align: center; padding: 40px 0 0 0; } .link { color: #0066cc; text-decoration: underline; } .flex-between { display:flex; justify-content: space-between; } .flex-between-item { width: 40%; margin: 20px 0; } .flex-between-int{ width: 20%; } .flex-between .flex-between-item img { border: 1px solid #dddddd; margin-right: 10px; margin-bottom: 10px; } .bbs-address-content , .about-content{ position: relative; margin: 0 auto; display: flex; } .location-map , .about-map{ position: relative; width: 48%; display: inline-block; margin-right: 35px; text-align: left; } #allmap, #allmap1 { height: 328px; } .bbs-address-content div:nth-child(2) { margin-right: 0; padding-left: 30px; border-width: 0; } .location { list-style-type: none; margin: 20px 0 0 0; padding: 0; } .location li { position: relative; line-height: 1.8em; margin-bottom: 10px; font-size: 16px; padding-left: 40px; } .location li img { width: 16px; height: 16px; margin-right: 10px; } .locationem { width: 32px; display: block; background-image: url(/gsimages/event/synbioforum-4th-icon1.png); background-position: left top; background-repeat: no-repeat; height: 32px; margin-right: 8px; position: absolute; left: 0; top: 0; } .locationem2 { background-image: url(/gsimages/event/synbioforum-4th-icon2.png); } .about-map-item { display: inline-block; padding: 0 20px; text-align: center; } .linkus, .linkus a{ color: #ffffff; } .linkus { padding: 0 20px; } .button-face-white { background-color:#ffffff!important; border-color:#ffffff; color:#0066cc!important; font-size:1.8em!important; font-size:18px!important; text-shadow: none; } .button-face-white:hover { background-color: transparent!important; border-color:#ffffff; color:#ffffff; text-shadow: none; } .button-face-box-white { color: #ffffff!important; border: 1px solid #ffffff; background: transparent!important; text-shadow: none; font-size:1.8em!important; font-size:18px!important; } .button-face-box-white:hover { color: #0066cc!important; border: 1px solid #ffffff; background: #ffffff!important; text-shadow: none; } @media only screen and (min-width: 375px) { #mgmenu.active { position: fixed; top: 0; left: 50%; width: 100%; transform: translateX(-50%); background: rgba(6, 64, 121, 0.55); padding: 25px 0; z-index: 1000; } #mgmenu.active .mg-menu { max-width: 630px; } #mgmenu.active .mg-menu ul li { padding: 10px; border-color: #ffffff; } #mgmenu.active .mg-menu1 ul li.active { background: #3880aa; } #mgmenu.active .mg-menu ul li a:link, #mgmenu.active .mg-menu ul li a:visited { color:#ffffff } #mgmenu.active .mg-menu ul li a:hover, #mgmenu.active .mg-menu ul li a:active { color:#3880aa; } #mgmenu.active .mg-menu1 ul li.active:hover { background: #1c2b7d; } } @media only screen and (max-width: 767px){ .bgColor-0F167A { padding: 0 0 20px 0; } .section-title { padding: 30px 0; margin: 0px!important; } .top-logo-menu { background: #01005d; } .top-banner-container { text-align: center; margin-top: 0px; background-position: center 89px; background-size: 130%; min-height: 262px; } .top-banner-text h1 { font-size: 30px; margin:0; } .section { padding-left: 10px; padding-right: 10px; padding-top: 0; overflow: hidden; width: auto; } #mgmenu.active { position: fixed; top: 0; left: 50%; width: 100%; transform: translateX(-50%); background: rgba(50, 104, 157, 0.55); padding: 12px 0; z-index: 1000; } .mg-menu ul li { padding: 6px 0!important; } .mg-menu ul li a { font-size: 12px; } #mgmenu.active .mg-menu ul li a { font-size: 12px; color: #ffffff; } .titleh1 { font-size: 24px!important; padding: 0; } .dlyNpc { display: block; } .keynote-speaker-photo,.bbs-address-content ,.location-map, .about-content{ position: relative; display: block!important; } .keynote-speaker-photo>div { width: auto; } .keynote-speaker-photo>div { flex: none; padding: 0 10px; margin-bottom: 20px; } .content-wrapper { padding: 0 20px; width: auto; } .section-title>span { font-size: 28px!important; } .l-l-col-4 ,.flex-between-item, .location-map , .about-map{ width: 100%!important; } .about-map{ margin-bottom:20px!important; } .dlyB { display: none; } .mgbox { padding: 5px 0; } #allmap1 { height: auto; } .button-face-plus, .button-face-plus:hover { font-size: 2.0em!important; } }