@import url('https://fonts.googleapis.com/css2?family=Barlow&family=Noto+Sans+HK:wght@100;400;700;900&family=Noto+Sans+SC:wght@100;400;700;900&display=swap');
	html, body{
		padding:0;
		margin:auto;
		width:100%;
		background: #FFF;
		font-family: 'Noto Sans HK', 'Noto Sans SC', sans-serif;
		font-size: 20px;
	}

	html.en body{
	    font-size: 16px;
	}
	h1,h2,h3,h4,h5,h6{
	    font-size:inherit;
	    line-height:inherit;
	    padding:0;
	    margin:0;
	    font-weight: normal;
	    font-weight: normal;
	   display: inline;
	}
	h1{
	    display:none;
	}
	@media (max-width: 768px){
	    html.en body{
	        font-size: 14px;
	    }
	}
	img{
		max-width: 100%;
		width:100%;
	}
	.maxwidth{
		max-width: 1920px;
		width:100%;
		margin: auto;
	}
	#menu{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		padding: 20px 40px 15% 40px;
		height: 0;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(245, 245, 245, 0.8) 36.41%, #FFFFFF 100%);
		box-sizing: border-box;
		z-index:1000;
		transition: .5s;
		font-size: 90%;
	}

	#menu.s{
	    padding: 20px 40px 100px 40px;
	    background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(245, 245, 245, 0.8) 30%, #FFFFFF 100%);
	}
	#menu.s .maxwidth{
	    grid-template-columns: 330px 1fr;
	}
	html.en #menu.s .maxwidth{
	     grid-template-columns: 450px 1fr;
	}
	#menu.s #menuText{
	    bottom:0;
	}
	#menu.s .rightIcon{
	    top:-40px;
	    transition: .5s;
	}
	html.en #menu.s .rightIcon{
	    top:-30px;
	}
	#menuSet{
	    display:none;
	}
	#menu .maxwidth{
		display: grid;
		grid-template-columns: 524px 1fr;
		box-sizing: border-box;
		transition: all .5s;
		align-items: start;
	}
html.en #menu .maxwidth{
	     grid-template-columns: 850px 1fr;
	}
	#menu .maxwidth > div:nth-child(3){
		position: relative;
		margin-left:40px;
	}
	#menuText > div > a, #menuText .a, #menuText .a > a{
    	color: #000;
    	text-decoration: none;
    	padding: 10px 0;
		display: inline-block;
    	border-bottom: 2px solid transparent;
    	margin-bottom: 0px;
		margin-right:60px;
		cursor: pointer;
		transition: all .5s;
	}
	
	html.en #menuText > div > a, html.en #menuText .a{
	    margin-right: 20px;
	}
	#menuText .icon{
	    margin-right:20px;
	}
	#menuText .a > a{
	    margin-right: 0;
	}
	#menuText .a{
	    margin-bottom:0px;
	    padding: 0;
	}
	#menuText > div > .a:last-child{
	    margin-right:0;
	}
	html.en #menuText > div > .a:last-child .submenu{
	    right:0;
	}
	#menuText > div > a.on, #menuText .a.on{
		border-bottom: 2px solid #4187a3;
	}
	#menuText > div > a:hover{
		border-bottom: 2px solid #000;
		color: #4187a3;
	}
	#menuText > div > a:hover:first-child{
		border-bottom:none;
	}
	#menuText > div > a > img, #menuText .a > img, #menuText .a > a > img{
		 width: 20px;
    	 vertical-align: middle;
    	 margin-right: 5px;
	}
	#menuText{
		position: absolute;
    	top: 40px;
		width:100%;
		box-sizing: border-box;
		/*display: grid;
		grid-template-columns: 1fr 130px;
		grid-column-gap: 20px;*/
		transition: all .5s;
	}

	#menuText > div:nth-child(1){
		text-align: center;
		display: flex;
		justify-content: end;
	}
	.rightIcon{
		text-align: right;
		position: absolute;
        right: -5px;
        top: -50px;
	}
	html.en .rightIcon{
        top: -40px;
	}
	.rightIcon > a, .rightIcon .a{
		margin-right:5px !important;
		border-bottom: 2px solid transparent !important;
	}
	.rightIcon > a:hover, .rightIcon .a:hover img{
		margin-right:5px !important;
		border-bottom: 2px solid transparent !important;
		transform: scale(1.2);
	}
	.rightIcon > a:last-child{
		margin-right:0px !important;
	}
	#menuText .a:hover{
		color: #4187a3;
	}
	#menuText .a:hover .submenu, .submenu:focus-within{
		opacity: 1;
		top: 60px;
		border-bottom: 2px solid #4187a3;
		z-index:0;
	}
	.submenu{
		opacity: 0;
		position: absolute;
    	text-align: left;
    	background: rgba(255,255,255,.7);
    	padding: 10px 10px;
    	top: 40px;
    	border-radius: 10px;
		color:#000;
		border-bottom: 2px solid transparent;
		transition: all .5s;
		z-index: -1;
	}
	.rightIcon .submenu{
		margin-left: -20px;
		background: rgba(255,255,255,.8);
		margin-right: 20px;
	}
	.rightIcon .a:last-child .submenu{
		margin-left: -12px;
	}
	.submenu a{
		display: block;
    	color: inherit;
    	text-decoration: none;
    	margin-bottom: 5px;
		transition: all .5s;
	}
	.submenu a:hover{
		color: #4187a3;
		text-decoration: underline;
	}
	#menu .maxwidth > div:nth-child(2){
		display: none;
	}
	#logoMobile{
		display:none;
	}
    @media (max-width: 1550px){
        #menuText > div > a, #menuText .a{
	        margin-right: 20px;
	    }
	    html.en #menu{
	        font-size: 80%;
	    }
    }
    
    @media (max-width:1443px){
    	html.en #menuText{
	    /*bottom: -30px;*/
	    }
    }
	
    @media (max-width:1150px){
        
        /*eng meun*/
		html.en #menuText > div > .a:hover{
		border-bottom: 2px solid #000;
		color: #4187a3;
	    }
		html.en #menu{
			padding: 20px 20px 100px 20px;
		}
		html.en #menu .maxwidth > div:nth-child(3){
			position: fixed;
			top: -140%;
			left: 0;
			margin-left: 0;
			width: 100%;
			padding: 15px;
			box-sizing: border-box;
			background: #FFF;
			transition: all .5s;
		}
		html.en #menuSet.on{
			top:0 !important;
		}
		html.en #menu .maxwidth{
			position: relative;
			display: block;
		}
		html.en #menu .maxwidth > div:nth-child(2){
			display:block;
			width: 20px;
    		position: absolute;
    		top: 10px;
    		right: 0;
			box-sizing: border-box;
			cursor: pointer;
			
		}
		html.en #logo{
			position: absolute;
			width: 450px;
		}
		html.en #menuText {
			display: block;
			position: relative;
			bottom: auto;
			top: auto;
		}
		html.en #menuText > div > a, html.en #menuText .a {
			display: block;

			margin-right: 0px;
			padding: 0;
			margin-bottom: 5px;
		}
		html.en #menuText .a > a{

		    padding: 0;
		    margin-bottom: 5px;
		}
		html.en #menuText > div > a > img, html.en #menuText .a > img, html.en #menuText .a > a > img {
			width: 25px;
			margin-right: 15px;
		}
		html.en #menuText > div:nth-child(1){
			text-align: left;
			display: block;
		}
		html.en .rightIcon{
			text-align: left;
			margin-top: 20px;
			position: relative;
			top:auto;
		}
		html.en .rightIcon a, .rightIcon .a{
			display: inline-block !important;
		}
		html.en .rightIcon a:last-child img{
			margin-right:0 !important;
		}
		html.en .rightIcon .a:hover img{
			margin-right: 15px !important;
			transform: scale(1);
			border-bottom: 0px solid transparent !important;
		}
		html.en .rightIcon .a div{
			opacity: 1;
			display: block;
		}
		html.en #menuText .rightIcon .a .submenu{
			opacity: 1;
			top: 40px;
			border-bottom: 0px solid #4187a3;
			padding: 0;
		}
		html.en #menuText .rightIcon .a .submenu a{
    		padding: 0px 5px;
		}
		html.en .rightIcon .submenu {
			margin-left: -25px;
		}
		html.en #menuText > div:nth-child(1) .submenu{
			position: relative;
			padding: 0;
			height:0;
			top:0;
			margin-top: 10px;
			display:none;
		}
		html.en #menuText > div:nth-child(1) .a .submenu{
			opacity: 1;
			height: auto;
			top:0;
			border-bottom: 0px solid #4187a3;
			display: block;
            margin-left: 20px;
            margin-top: 0;
            margin-bottom: 10px;
		}
		html.en #menuText > div:nth-child(1) .submenu a{
			margin-left: 40px;
		}
		html.en #menuText .a.icon > img{
		    display:none;
		}
		html.en #menuText .a.icon > .submenu{
		    margin-left: 0 !important;
		    top:0 !important;
		    position: relative !important;
		}
		html.en #menuText .icon{
		    display: inline-flex;
		    margin-right: 0px;
		}
		html.en #menuText .icon > img{
		    width: 20px;
		}
		html.en #menuText .icon.iconT > img {
            margin-bottom: 8px;
            width: 16px;
        }
		html.en #menuText .icon .submenu a{
		    display: inline;
            margin-left: 0 !important;
            margin-right: 15px;
		}
        
    }
    
	@media (max-width: 1420px){
	    
	    #menuText > div > a > img, #menuText .a > img, #menuText .a > a > img {
            width: 18px;
        }
	    #menu{
            font-size: 80%;
	    }
	}
	@media (max-width: 1340px){
		#menu .maxwidth {
			grid-template-columns: 330px 1fr;
		}
		html.en #menu .maxwidth{
	     grid-template-columns: 650px 1fr;
	}
		#menuText {
			/*bottom: -15px;*/
		}
		
	}
	@media (max-width: 1240px){
	    html, body{
		font-size: 16px;
	    }

		#menuText .a:hover .submenu{
		top: 40px;
	    }
	}
	@media (max-width: 1180px){
	    #menuText > div > .a:hover{
		border-bottom: 2px solid #000;
		color: #4187a3;
	    }
		#menu{
			padding: 20px 20px 100px 20px;
		}
		#menu .maxwidth > div:nth-child(3){
			position: fixed;
			top: -140%;
			left: 0;
			margin-left: 0;
			width: 100%;
			padding: 15px;
			box-sizing: border-box;
			background: #FFF;
			transition: all .5s;
			visibility: hidden;
		}
		#menuSet.on{
			top:0 !important;
			visibility: visible !important;
		}
		#menu .maxwidth{
			position: relative;
			display: block;
		}
		#menu .maxwidth > div:nth-child(2){
			display:block;
			width: 20px;
    		position: absolute;
    		top: 10px;
    		right: 0;
			box-sizing: border-box;
			cursor: pointer;
			z-index: 100;
		}
		#logo{
			position: absolute;
			width: 250px;
		}
		#menuText {
			display: block;
			position: relative;
			bottom: auto;
			top: auto;
		}
		#menuText > div > a, #menuText .a {
			display: block;

			margin-right: 0px;
			padding: 0;
			margin-bottom: 5px;
		}
		#menuText .a > a{

		    padding: 0;
		    margin-bottom: 5px;
		}
		#menuText > div > a > img, #menuText .a > img, #menuText .a > a > img {
			width: 25px;
			margin-right: 15px;
		}
		#menuText > div:nth-child(1){
			text-align: left;
			display: block;
		}
		.rightIcon{
			text-align: left;
			margin-top: 20px;
			position: relative;
			top:auto;
		}
		.rightIcon a, .rightIcon .a{
			display: inline-block !important;
		}
		.rightIcon a:last-child img{
			margin-right:0 !important;
		}
		.rightIcon .a:hover img{
			margin-right: 15px !important;
			transform: scale(1);
			border-bottom: 0px solid transparent !important;
		}
		.rightIcon .a div{
			opacity: 1;
			display: block;
		}
		#menuText .rightIcon .a .submenu{
			opacity: 1;
			top: 40px;
			border-bottom: 0px solid #4187a3;
			padding: 0;
		}
		#menuText .rightIcon .a .submenu a{
    		padding: 0px 5px;
		}
		.rightIcon .submenu {
			margin-left: -25px;
		}
		#menuText > div:nth-child(1) .submenu{
			position: relative;
			padding: 0;
			height:0;
			top:0;
			margin-top: 10px;
			display:none;
		}
		#menuText > div:nth-child(1) .a .submenu{
			opacity: 1;
			height: auto;
			top:0;
			border-bottom: 0px solid #4187a3;
			display: block;
            margin-left: 20px;
            margin-top: 0;
            margin-bottom: 10px;
		}
		#menuText > div:nth-child(1) .submenu a{
			margin-left: 40px;
		}
		#menuText .a.icon > img{
		    display:none;
		}
		#menuText .a.icon > .submenu{
		    margin-left: 0 !important;
		    top:0 !important;
		    position: relative !important;
		}
		#menuText .icon{
		    display: inline-flex;
		    margin-right: 0px;
		}
		#menuText .icon > img{
		    width: 20px;
		}
		#menuText .icon.iconT > img {
            margin-bottom: 8px;
            width: 16px;
        }
		#menuText .icon .submenu a{
		    display: inline;
            margin-left: 0 !important;
            margin-right: 15px;
		}
	}
	
	.homeBanner {
    	position:fixed;
    	display: block;
    	overflow: hidden;
		width:100%;
		z-index: 0;
		top: 0;
	}
	.homeBanner.notTop{
	   position: relative;
	}
	.homeBanner .container {
    	transition: 1s;
    	height: 0px;
    	padding-bottom: 56.27%;
    	position: relative;
	}
	.homeBanner .container div {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    height: 100%;
    width: 100%;
	}
	.homeBanner .container div img{
    position: absolute;
    top: -50%;
    transform: translateY(50%);
    left: 0;
    width: 100%;
    height: 100%;
    transition: .4s;
    object-fit: cover;
	}
	.homeBanner.notTop .container div img{
    object-fit: contain;
	}
	.btnSet{
		position: absolute;
		left:0;
		right:0;
		bottom:30px;
		text-align: center;
	}
	.homeBanner.notTop .btnSet{
    top: 5px;
    padding: 10px;
	}
	.btnSet span{
		width: 16px;
		height: 16px;
		background: #FFFFFF;
		display: inline-block;
		border-radius: 16px;
		margin-right: 16px;
		box-shadow: 0px 0px 10px rgb(0 0 0 / 50%);
	}
	.btnSet a:last-child span{
		margin-right: 0;
	}
	.btnSet a.on span{
		background: #6E6F71;
	}
	@media (max-width: 768px){
		.homeBanner .container {
		    padding-bottom: 100%;
		}
		.btnSet span{
		width: 10px;
		height: 10px;
		border-radius: 10px;
		margin-right: 10px;
		}
	}
	
	#homeContent, #insideContent{
		/* margin-top: 56.27%;*/
		position: relative;
		z-index: 1;
	}
	@media (max-width: 768px){
		#homeContent, #insideContent{
			/* margin-top: 100%;*/
		}
	}
	#timeline{
		padding: 50px 0;
		background: #FFF;
	}
	#timeline .maxwidth{
		
	}
	#timeline .title{
		color: #F26B24;
		text-align: center;
		font-size: 200%;
	}
	
	html.en #timeline .title{
		font-size: 150%;
	}
	#timelineContent{
		position: relative;
		width:100%;
		margin-top: 4%;
		z-index: 1;
	}
	#timelineContent .line{
		position: absolute;
		background-color: #939598;
		left:0;
		width: 0%;
		height:8px;
		text-align: right;
		border-radius: 8px;
		margin-top: 5%;
		overflow: hidden;
		/*transition: all .5s;*/
	}
	#timelineContent .line img{
		height: 8px;
		width: auto;
		position: absolute;
		display: block;
    	background-color: #FFF;
		right:0;
		border-radius: 8px;
		padding-left: 8px;
	}
	#timelineContent .boxes{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		align-items: end;
	}
	#timelineContent .boxes > div{
		position: relative;
		padding-bottom: 100%;
		height: 0;
		transition: all .5s;
		opacity: 0;
	}
	#timelineContent .boxes div:nth-child(1) img{
		padding: 0 20%;
		box-sizing: border-box;
	}
	#timelineContent .boxes div:nth-child(2) img{
		padding: 0 40% 0 30%;
		box-sizing: border-box;
	}
	#timelineContent .boxes div:nth-child(3) img{
		padding: 0 30% 0 20%;
		box-sizing: border-box;
	}
	#timelineContent .boxes div:nth-child(4) img{
		padding: 0 15% 0 25%;
		box-sizing: border-box;
	}
	#timelineContent .boxes .boxContent{
		position: absolute;
		top:0;
		left:0;
		margin-top: 26%;
		width: 80%;
	}
	#timelineContent .boxes .boxContent.ball:before{
		content:'';
		background-image: url('images/icon_timeline_o.svg');
		background-size:contain;
		width: 46px;
    	height: 46px;
    	position: absolute;
    	transform: translate(-50%,-50%);
		animation: enlarge 2s infinite;
	}
	@keyframes enlarge {
    0% { transform: translate(-50%,-50%) scale(.8)}
    50% { transform: translate(-50%,-50%) scale(1.2) }
    100% { transform: translate(-50%,-50%) scale(.8) }
    }
	#timelineContent .boxes .boxContent .year{
		font-size: 320%;
		font-family: 'Barlow', sans-serif;
		color: #F26B24;
		padding-top: 10%;
	}
	#timelineContent .boxes .boxContent .text{
		color: #6B6B6B;
		padding-bottom: 50%;
	}
	
	html.en #timelineContent .boxes .boxContent .text{
		font-size:80%;
	}
	#timelineContent .boxes div:nth-child(5) .boxContent{
		margin-top: 30%;
		text-align: right;
	}
	#timelineContent .textRemain{
	    font-size: 80%;
	    color: #7F959F;
        text-align: right;
        position: absolute;
        right: 5px;
        top: 0;
        margin-top: 6%;
        transition: all .5s;
	}
	html #timelineContent .boxes .boxContent .text br{
         display:none;
	}
	@media (max-width: 1300px){
		#timelineContent .boxes > div {
		    padding-bottom: 140%;
		}
	}
	@media (max-width: 1000px){
		#timelineContent .boxes > div {
		    padding-bottom: 190%;
		}
	}
	@media (max-width: 420px){
		#timelineContent .boxes > div {
		    padding-bottom: 250%;
		}
	}
	@media (max-width: 800px){
		#timelineContent .boxes .boxContent.ball:before {
		    content: '';
		    width: 20px;
    		height: 20px;
		}
		#timelineContent .boxes > div {
		    /*padding-bottom: 140%;*/
		}
	}
	@media (max-width: 768px){
		#timelineContent .boxes > div {
		    /*padding-bottom: 160%;*/
		}
		#timelineContent .line img{
			right: -50px;
		}
		#timelineContent .boxes .boxContent .year {
    		font-size: 250%
		}
		html #timelineContent .boxes .boxContent{
		    width:90%;
		}
		html #timelineContent .boxes .boxContent .year {
    		font-size: 200%
		}
		html #timelineContent .boxes .boxContent .text {
            font-size: 70%;
		}
		html #timelineContent .boxes .boxContent .text br{
            display:block;
	    }
		#timelineContent .boxes {
			grid-template-columns: 20px 1fr 1fr 1fr 10px;
		}
		
		html #timelineContent .boxes {
			grid-template-columns: 20px 1fr 1fr 1fr 50px;
			padding-top: 1%;
		}
		#timelineContent .textRemain{
		  margin-top: 11%;
            width: 100px;
            line-height: 1;
		}
		
		html #timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: 0% !important
		}
		#timelineContent .boxes .boxContent {
    		margin-top: 30%;
		}
		#timelineContent .boxes div:nth-child(1) img{
			display: none;
		}
		#timelineContent .line {
    		margin-top: 8%;
		}
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -450%;
		}
		/*
		html.en #timelineContent .boxes div:nth-child(5) .boxContent .text{
    		    transform: rotate(90deg);
                white-space: nowrap;
                transform-origin: 0px 0px;
		}*/
	}
	@media (max-width: 550px){
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -400%;
		}
	}
	@media (max-width: 500px){
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -350%;
		}
	}
	@media (max-width: 450px){
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -300%;
		}
	}
	@media (max-width: 400px){
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -250%;
		}
	}
	@media (max-width: 350px){
		#timelineContent .boxes div:nth-child(5) .boxContent {
    		margin-top: -200%;
		}
	}
	
/* New site style*/
#keyV {
  /* position: fixed;*/
    display: relative;
    overflow: hidden;
    width: 100%;
    z-index: 0;
    top: 0;
}
#keyV .bg{
    position: absolute;
	width: 100%;
    top: 0;
	 z-index: -1;
}
.infobtn{
	width: 46%;
	padding: 5px 1%;
	display: inline-block;
}
@media (max-width: 768px){
		.infobtn{
	width: 96%;
	margin: 10px 1%;
	display: inline-block;
}
	}

#homeSlide{
	max-width: 1280px;
		width:100%;
		margin: auto;
		padding: 50px 0;
		position: relative;
	}

	#homeSlide .maxwidth{
		max-width: 1280px;
		width:100%;
		margin: auto;
	}

	#homeSlide .title{
		color: #FFFFFF;
		text-align: center;
		font-size: 200%
	}
	html.en #homeSlide .title{
	    font-size: 160%
	}
	#homeSlide .contentBox{
		display: block;
    	overflow: hidden;
    	width: 100%;
		margin: auto;
		margin-top: 20px;
		position: relative;
		height: 0;
		padding-bottom: 25%;
	}
	#homeSlide .container{
    	transition: 1s;
    	height: 0px;
		padding-top: 2%;
    	padding-bottom: calc(33% + 100px);
    	position: relative;
	}

	#homeSlide .innerWidth{
	   width: calc(100% * 4/3);
	   transition: all .5s;
	}
	@media (max-width: 768px){
	    #homeSlide .innerWidth{
            width: 400%;
	    }
	}
	
	@media (max-width: 768px){
	    #homeSlide .contentBox{
	        padding-bottom: 80%;
	    }
	}

#insideContents {
    background-size: 180%;
    background-repeat: no-repeat;
    background-position: bottom;
    /*background-color: rgba(138,160,169,.5);*/
    position: relative;
}
#insideContents .bg {
    position: absolute;
    background: linear-gradient(0deg, rgba(138,160,169,.2) 0px, #FFFFFF 191px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#insideContents .title {
    color: #2F748F;
    text-align: center;
    font-size: 200%;
}
@media (max-width: 768px){
    html.en #insideContents .title {
        font-size: 150%;
    }
}
#insideContents .maxwidth{
    max-width: 1280px;
    position: relative;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
}
#insideContents a{
    color: #0000FF;
}
/* New site style*/

	#homeNews{
		padding: 50px 0;
		background: linear-gradient(0deg, #FFFFFF 0%, #1993C1 100%);
		position: relative;
	}
	#homeNews:before{
		content: '';
		background-image: url('images/icon_tri_top.svg');
		background-size: contain;
		width:90px;
		height: 90px;
		position: absolute;
		left:0;
		right:0;
		margin: auto;
		top:-55px;
	}
	#homeNews .maxwidth{
		max-width: 1280px;
	}
	#homeNews .title{
		color: #FFFFFF;
		text-align: center;
		font-size: 200%
	}
	html.en #homeNews .title{
	    font-size: 160%
	}
	#homeNews .contentBox{
		display: block;
    	overflow: hidden;
    	width: 100%;
		margin: auto;
		margin-top: 20px;
		position: relative;
		height: 0;
		padding-bottom: 25%;
	}
	#homeNews .container{
    	transition: 1s;
    	height: 0px;
		padding-top: 2%;
    	padding-bottom: calc(33% + 100px);
    	position: relative;
	}
	#homeNews a{
    	position: relative;
    	display: inline-block;
    	width:calc((100% - 20px)/4);
		padding: 20px 10px;
		text-decoration: none;
		box-sizing: border-box;
		/*top: 50%;
        lefT: 50%;
        transform: translate(-50%, -50%);
        transition: 1s;
        opacity: 1;
        z-index:1;*/
	}
	#homeNews .innerWidth{
	   width: calc(100% * 4/3);
	   transition: all .5s;
	}
	@media (max-width: 768px){
	    #homeNews .innerWidth{
            width: 400%;
	    }
	}
	#homeNews a.left{
	    top: 50%;
    position: absolute;
	    left: 0px;
    background: #FFF;
    height: 30px;
    width: 30px;
    padding: 0;
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 30px;
    color: #1893c1;
        cursor: pointer;
        transform:none;
	}
	#homeNews a.right{
	    top: 50%;
    position: absolute;
	    left:auto;
	right: 0px;
    background: #FFF;
    height: 30px;
    width: 30px;
    padding: 0;
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 30px;
    color: #1893c1;
        cursor: pointer;
        transform:none;
	}
	#homeNews a.l{
	    transform: translate(-150%,-50%);
        z-index:0;
	}
	#homeNews a.r{
	    transform: translate(50%,-50%);
        z-index:0;
	}
	#homeNews a.b{
        z-index:0;
	}
	#homeNews a:hover{
		opacity:1;
	}
	#homeNews a:hover .img .text{
		background: rgba(0,0,0, .7);
	}
	#homeNews a .title{
		background-color: #FFF;
		font-size: 120%;
		line-height: 120%;
		padding: 10px 20px;
		border-radius: 38px;
		color: #1993C1;
		text-align: left;
	}
	
	html.en #homeNews a .title{
	    font-size:100%;
	}
	@media (max-width: 1180px){
	    #homeNews a .title{
	        font-size: 100%;
	        line-height: 100%;
	    }
	}
	#homeNews a .title img{
		width: 20px !important;
		height:auto !important;
    	margin-right: 10px;
	}
	#homeNews a .border{
		margin-top: 20px;
		position: relative;
		overflow: hidden;
	}
	#homeNews a .border > img{
		padding-top: 15px;
	}
	@media (max-width: 900px){
	    #homeNews a .border > img{
		    padding-top: 100px;
	    }
	    #homeNews .contentBox{
    	padding-bottom: 45%;
	    }
	}
	#homeNews a .border .bg{
		position: absolute;
    	top: 0;
    	left: 0;
    	margin: 0 2% 2% 2%;
    	width: 96%;
    	height: 93%;
    	border-radius: 0 0 10px 10px;
		background-size: cover;
    	background-position: center;
		border-radius: 15px;
	}
	#homeNews a .border .text{
		background: rgba(0,0,0, 0.6);
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		border-radius: 15px;
		position: absolute;
		transition:.2s;
	}
	#homeNews a .border .text > div{
		position: absolute;
		top:50%;
		left:50%;
		width: 90%;
		transform: translate(-50%, -50%);
		color: #FFF;
	}
	#homeNews a .border .text > div .date{
	}
	
	html.en #homeNews a .border .text > div .content{
	    font-size: 80%;
	}
	@media (max-width: 730px){
		#homeNews a{
		padding: 1px 10px;
		}
		#homeNews a .border {
    	margin-top: 10px;
		}
		#homeNews a .title{
		padding: 7px 13px;
		}
		#homeNews a .border .text > div .date{

		}
		#homeNews a .border .text > div .content{
		    font-size: 80%;
		}
	}
	@media (max-width: 768px){
	    #homeNews .contentBox{
	        padding-bottom: 80%;
	    }
	}
	
	#homeConcept{
		background-color: #FFF;
		position: relative;
	}
	#homeConcept .maxwidth{
		position: relative;
		height: 100%;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
		max-width: 1280px;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.bgLeft{
		background-image:url('/images/bg_top.png');
		background-position: right;
		background-size:700px;
		height: 100%;
		width:50%;
		position: absolute;
		right:0;
		top:0;
		transform: rotateY(-180deg);
		transform-origin: left;
	}
	.bgRight{
		background-image:url('/images/bg_top.png');
		background-position: right;
		background-size:700px;
		height: 100%;
		width:50%;
		position: absolute;
		right:0;
		top:0;
	}
	#homeConcept .subtitle{
	    position: absolute;
		left:0;
		top:0;
	}
	#homeConcept .title{
	    color: #4186A1;
        text-align: center;
        font-size: 200%;
        margin-bottom:5%;
	}
	html.en #homeConcept .title{
	    font-size: 160%;
	}
	#homeConcept .content{
	    position: relative;
	    height: 0;
        padding-bottom: 80%;
	}
	#homeConcept .subtitle .line1, #insideContent .subtitle .line1{
	    color:#4186A1;
	    font-size:110%;
	}
	/*
	html.en #homeConcept .subtitle .line1{
	    font-size:88%;
	}*/
	#homeConcept .subtitle .line2, #insideContent .subtitle .line2{
	    color:#F06A23;
	    font-size:200%;
	}
	/*
	html.en #homeConcept .subtitle .line2{
	    font-size:160%;
	}*/
    #homeConcept .img_HHHHH{
        position: absolute;
        top:50%;
        left:50%;
        width:55%;
        transform: translate(-50%,-50%);
        transition: all .5s;
    }
    #homeConcept .img_HHHHH img{
        animation: littleRotate 2s infinite;
    }
    @keyframes littleRotate {
    0% { transform: rotate(5deg) scale(.9)}
    50% { transform: rotate(0deg) scale(1);}
    100% { transform: rotate(5deg) scale(.9);}
    }
    
    #homeConcept .tit_H1{
        position: absolute;
        top: 0;
        left: 30%;
        margin-top: 30%;
        transition: all .5s;
        transform: translate(-100%,-100%);
        -webkit-transform: translate(-100%,-100%);
    }
    #homeConcept .tit_H2{
        position: absolute;
        top: 0;
        left: 65%;
        margin-top: 18%;
        transition: all .5s;
        transform: translate(0%,-100%);
        -webkit-transform: translate(0%,-100%);
    }
    #homeConcept .tit_H3{
        position: absolute;
        top: 0;
        left: 36%;
        margin-top: 58%;
        transition: all .5s;
        transform: translate(-100%,0%);
        -webkit-transform: translate(-100%,0%);
    }
    #homeConcept .tit_H4{
        position: absolute;
        top: 0;
        left: 70%;
        margin-top: 48%;
        transition: all .5s;
        transform: translate(0%,0%);
        -webkit-transform: translate(0%,0%);
    }
    #homeConcept .tit_H1:hover{
        transform: translate(-100%,-100%) scale(1.1);
    }
    #homeConcept .tit_H2:hover{
        transform: translate(0%,-100%) scale(1.1);
    }
    #homeConcept .tit_H3:hover{
        transform: translate(-100%,0%) scale(1.1);
    }
    #homeConcept .tit_H4:hover{
        transform: scale(1.1);
    }
    #homeConcept .tit_H1 img, #homeConcept .tit_H2 img, #homeConcept .tit_H3 img, #homeConcept .tit_H4 img{
        height:50px;
        width: auto;
    }
    @media (max-width: 768px){
        #homeConcept .subtitle .line1 {
        }
        #homeConcept .subtitle .line2, #insideContent .subtitle .line2 {
            font-size: 130%;
        }
        #homeConcept .tit_H1 img, #homeConcept .tit_H2 img, #homeConcept .tit_H3 img, #homeConcept .tit_H4 img {
            height: 30px;
        }
        #homeConcept .img_HHHHH{
            top:55%;
        }
        #homeConcept .content{
            padding-bottom: 115%;
        }
        #homeConcept .tit_H1 {
            margin-top: 55%;
        }
        #homeConcept .tit_H2 {
            margin-top: 44%;
        }
        #homeConcept .tit_H3 {
            margin-top: 85%;
        }
        #homeConcept .tit_H4 {
            margin-top: 75%;
        }
    }
    @media (max-width: 500px){
        #homeConcept .tit_H1 img, #homeConcept .tit_H2 img, #homeConcept .tit_H3 img, #homeConcept .tit_H4 img {
            height: 20px;
        }
    }
    @media (max-width: 420px){
        #homeConcept .img_HHHHH {
            width: 50%;
        }
        
    }
    .img_line{
        position: relative;
        display: block;
    }
    #homeConcept .content2{
        color:#6B6B6B;
        background:none;
    }
    /*
    html.en #homeConcept .content2{
        font-size:80%;
    }*/
    #homeConcept .groupH{
        display: flex;
        padding: 5% 0;
    }
    #homeConcept .tit_H{
        margin-left: -28px;
    }
    #homeConcept .groupH.r46 > div:nth-child(1){
        width:25%;
    }
    #homeConcept .groupH.r46 > div:nth-child(2){
        width:65%;
    }
     #homeConcept .groupH.r64 > div:nth-child(1){
        width:60%;
    }
    #homeConcept .groupH.r64 > div:nth-child(2){
        width:40%;
    }
    #homeConcept .groupH.g1{
        padding: 0px 0 0px 0;
        align-items: flex-end;
    }
    #homeConcept .groupH.g1 .imgGroup{
        margin-bottom: 5%;
    }
    #homeConcept .groupH.g1 > div:nth-child(1){
        margin-left: 10%;
        margin-top: -15%;
    }
    #homeConcept .groupH.g1 > div:nth-child(2){
        margin-top: -15%;
    }
    #homeConcept .groupH.g2 > div:nth-child(1), #homeConcept .groupH.g4 > div:nth-child(1){
        margin-left: 5%;
        margin-right: 5%;
    }
    #homeConcept .groupH.g3 > div:nth-child(1){
        margin-left: 10%;
    }
    #homeConcept .groupH.g2{
        flex-direction: row-reverse;
        padding: 5% 0 0px 0;
    }
    #homeConcept .groupH.g2 .textGroup{
        margin-top: -10%;
    }
    #homeConcept .groupH.g4{
        flex-direction: row-reverse;
        margin-top: 5%;
    }
    #homeConcept .tit_H img{
        height:55px;
        padding-bottom:10px;
        width: auto;
    }
    #homeConcept .img_Home{
        display: block;
        width: 130%;
        margin-left: -25%;
        margin-top: 5%;
        padding-top: 10px;
        transition: all .5s;
    }
    #homeConcept .img_Hub{
        display: block;
        padding-top: 15%;
        transform: scale(1.2);
        transition: all .5s;
    }
    #homeConcept .img_Health{
        transform: scale(1.8) translate(0px,0);
        transform-origin: top center;
        transition: all .5s;
        z-index: 1;
        position: relative;
    }
     #homeConcept .img_Heritageh{
        margin-top: 10%;
    }
    #homeConcept .imgGroup{
        position: relative;
        overflow: hidden;
        border-radius: 40px;
    }
    #homeConcept .imgGroup img:nth-child(1){
        display: block;
    }
    #homeConcept .imgGroup img:nth-child(2){
        position: absolute;
        top: 0;
        left: 20%;
        height: 18%;
        width: auto;
        opacity: .5;
        animation: bgtextMove 20s infinite;
    }
    @keyframes bgtextMove {
    0% { transform: translateX(0);}
    50% { transform: translateX(100%);}
    100% { transform: translateX(0);}
    }
    #homeConcept .g3 .imgGroup img:nth-child(2), #homeConcept .g4 .imgGroup img:nth-child(2){
        bottom:0;
        top: auto;
    }
    @media (max-width: 768px){
        #homeConcept .groupH.g2 > div:nth-child(1), #homeConcept .groupH.g4 > div:nth-child(1){
        margin-left: 5%;
        margin-right: 5%;
        width: 90% !important;
        }
        #homeConcept .tit_H img{
        height:35px;
    }
        #homeConcept .groupH br{
            display:none;
        }
        #homeConcept .groupH {
            display: block;
            padding: 20px 0!important;
        }
        #homeConcept .groupH > div:nth-child(1){
            width: 100% !important;
        }
        #homeConcept .groupH > div:nth-child(2){
            width: 50% !important;
            margin-top: 20px;
        }
        #homeConcept .textGroup{
            display: grid;
            grid-template-columns: 5fr 5fr;
            align-items: start;
        }
        #homeConcept .textGroup > div:nth-child(2){
            position: relative;
        }
        #homeConcept .groupH .imgGroup {
            width: 100%;
            margin: auto;
        }
         #homeConcept .groupH.g1 .imgGroup {
            margin-top: 0;
        }
        #homeConcept .groupH.g1 > div:nth-child(1), #homeConcept .groupH.g3 > div:nth-child(1){
            margin-left: 5%;
            margin-top: 0;
            margin-bottom: 20px;
            width: 95% !important;
        }
        #homeConcept .groupH.g1 > div:nth-child(2) {
            margin-top: 0;
        }
        #homeConcept .img_Home {
            display: block;
            width: 90%;
            padding-top: 20%;
            position: absolute;
            top: 0;
            right: 0;
            left:0;
            margin:auto;
            transform: translate(0, 20%);
        }
        #homeConcept .groupH.g2 .textGroup {
            margin-top: 0
        }
        #homeConcept .groupH.g4 {
            margin-top: 0%
        }
        #homeConcept .img_Hub {
            display: block;
            width: 90%;
            margin-left: 10%;
            transform: none;
            padding-top: 0px;
            position: absolute;
            top: 0;
            right: 0;
        }
        #homeConcept .img_Health{
            position: absolute;
            top: 0;
            right: 0;
            transform: none;
        }
        #homeConcept .img_Heritageh {
            width: 90%;
            margin-left: 10%;
            position: absolute;
        }
    }
    #footer{
        position: relative;
        background-color:#FFF;
    }
    #footer a{
        color: inherit;
        text-decoration: none;
    }
    #footer .maxwidth{
        padding:50px 20px;
        display: flex;
        color: #6E6F71;
        box-sizing: border-box;
        max-width: 1280px;
        font-size: 80%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
    position: relative;
	}
	#footer .maxwidth > div:nth-child(1){
        width:40%;
	}
	#footer .maxwidth > div:nth-child(1) > div{
        padding-top:10px;
	}
	#footer .maxwidth > div:nth-child(1) > div img{
	   width: 13px;
        vertical-align: middle;
        margin-right: 6px;
	}
	#footer .maxwidth > div:nth-child(2){
        width:60%;
        display: flex;
        flex-direction: column;
	}
	#footer .maxwidth > div:nth-child(2) > div{
	    text-align:right;
	}
	#footer .maxwidth > div:nth-child(2) > div:nth-child(1) a:nth-child(1) img{
        height:70px;
        width:auto;
        padding-bottom: 10px;
        vertical-align: middle;
	}
	html.en #footer .maxwidth > div:nth-child(2) > div:nth-child(1) a:nth-child(1) img{
	    padding-right:10px;
	}
	#footer .maxwidth > div:nth-child(2) > div:nth-child(1) a:nth-child(2) img{
        height:60px;
        width:auto;
        margin-left:15px;
        padding-bottom: 10px;
        vertical-align: middle;
	}
	html.en #footer .maxwidth > div:nth-child(2) > div:nth-child(1) a:nth-child(2) img{
	    margin-left:0;
	}
	#footer .maxwidth > div:nth-child(2) > div:nth-child(1) img:last-child{
        margin-right:0;
	}
	#footer .maxwidth > div:nth-child(2) > div:nth-child(2){
	    display: flex;
        flex-direction: row;
        align-self: flex-end;
        margin-top: 20px;
        align-items: center;
	}
	#footer .maxwidth > div:nth-child(2) > div:nth-child(2) > a{
	    display:inline-block;
	    margin-left:30px;
	}
	#logo_w3c{
        height:30px;
        width:auto;
	}
	#logo_webForAll{
	    height:50px;
        width:auto;
	}
	@media (max-width: 870px){
	    #footer .maxwidth > div:nth-child(2) > div:nth-child(2) > a{
	        margin-left:20px;
	    }
	}
	@media (max-width: 770px){
	    #footer .maxwidth {
	        flex-direction: column;
	    }
	    #footer .maxwidth > div{
	       width: 100% !important;
	    }
	    #footer .maxwidth > div:nth-child(2) {
	        margin-top: 30px;
	    }
	    #footer .maxwidth > div:nth-child(2) > div {
            text-align: left;
        }
        #footer .maxwidth > div:nth-child(2) > div:nth-child(1) img:first-child {
            margin-left: 0;
            margin-right: 30px;
        }
        #footer .maxwidth > div:nth-child(2) > div:nth-child(1) img:last-child {
            margin-left: 0;
            margin-right: 0;
        }
        #footer .maxwidth > div:nth-child(2) > div:nth-child(2) {
            align-self: flex-start;
        }
        #footer .maxwidth > div:nth-child(2) > div:nth-child(2) > a {
            margin-left: 0px;
            margin-right:20px;
        }
	}
	@media (max-width: 480px){
	    #footer .maxwidth > div:nth-child(2) > div:nth-child(2) {
            display: block;
        }
        #footer .maxwidth > div:nth-child(2) > div:nth-child(2) > a {
            vertical-align: middle;
            margin-bottom: 20px;
        }
	}
	
	
.sectionTitle{
    position: fixed;
    left: 0;
    bottom: 0;
    margin-bottom:5%;
    background-color: rgba(255,255,255,.8);
    border-radius: 0 40px 40px 0;
    padding: 2% 2% 2% 5%;
    width: 20%;
    min-width: 280px;
    transition: .5s;
    opacity: 0;
}
.sectionTitle > span:nth-child(1){
    color: #2F748F;
    display: block;
    font-size: 130%;
}
.sectionTitle > span:nth-child(2){
    color: #2F748F;
    display: block;
    font-size: 230%;
    white-space:nowrap;
}
.sectionTitle > span:nth-child(3){
    color: #2F748F;
    display: block;
    font-size: 230%;
    margin-left:15%;
    white-space:nowrap;
}
#insideOrientation{
    padding: 50px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #d8f3fb 100%);
    position: relative;
}
#insideOrientation .title {
    color: #607985;
    text-align: center;
    font-size: 200%;
}
html.en #insideOrientation .title {
    font-size: 150%;
}
#insideOrientation .contentBox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    max-width: 1000px;
    margin: 30px auto;
}
@media (max-width: 808px){
    #insideOrientation .contentBox{
        grid-template-columns: auto;
        grid-row-gap: 20px;
        margin:20px;
    }
    #insideOrientation .contentBox img{
        max-width:100px;
    }
}
#insideOrientation .contentBox > div:nth-child(1){
    background: #2D9CC6;
    padding: 20px;
    border-radius: 20px;
    color: #FFFFFF;
}
#insideOrientation .contentBox > div:nth-child(2){
    background: #c94c08;
    padding: 20px;
    border-radius: 20px;
    color: #FFFFFF;
}
#insideOrientation .contentBox > div:nth-child(3){
    background: #607985;
    padding: 20px;
    border-radius: 20px;
    color: #FFFFFF;
}
/*
html.en #insideOrientation .contentBox > div:nth-child(1), html.en #insideOrientation .contentBox > div:nth-child(2), html.en #insideOrientation .contentBox > div:nth-child(3){
    font-size:80%;
}*/
#insideOrientation .contentBox > div img{
    width: 30%;
    margin-bottom: 20px;
}
.contTo{
    font-size:300%;
}
/*
html.en .contTo{
    font-size:240%;
}*/
#insideConcepts{
    padding: 50px 0;
    background: #d8f3fb;
    position: relative;
    overflow: hidden;
}
#insideConcepts .maxwidth{
    max-width: 1480px;
}
#insideConcepts .title {
    color: #59808b;
    text-align: center;
    font-size: 200%;
}
@media (max-width: 760px){
    html.en #insideConcepts .title {
        font-size: 150%;
    }
}
#insideConcepts .contentBox{
    width: 100%;
    padding-bottom: 59%;
    height: 0;
    position: relative;
    margin-top: 30px;
}
html.en #insideConcepts .contentBox{
    margin-top: 45px;
}
.card{
    position:relative;
    width:16%;
    height:0;
    padding-bottom:16%;
    position: absolute;
    top:0;
}
.card.o{
    cursor: pointer;
}
.card:nth-child(1){
    left:42%;
}
.card:nth-child(2){
    left:52%;
    margin-top:10%;
}
.card:nth-child(3){
    left:72%;
    margin-top:10%;
}
.card:nth-child(4){
    left:42%;
    margin-top:20%;
}
.card:nth-child(5){
    left:62%;
    margin-top:20%;
}
.card:nth-child(6){
    left:82%;
    margin-top:20%;
}
.card:nth-child(7){
    left:32%;
    margin-top:30%;
}
.card:nth-child(8){
    left:52%;
    margin-top:30%;
}
.card:nth-child(9){
    left:72%;
    margin-top:30%;
}
.card:nth-child(10){
    left:42%;
    margin-top:40%;
}
.card:nth-child(11){
    left:2%;
}
.card:nth-child(12){
    left:77%;
    margin-top:-5%;
}
.card:nth-child(13){
    left:27%;
    margin-top:10%;
}
.card:nth-child(14){
    left:-8%;
    margin-top:30%;
}
.card:nth-child(15){
    left:17%;
    margin-top:35%;
}
.card:nth-child(16){
    left:92%;
    margin-top:30%;
}
.card:nth-child(17){
    left:82%;
    margin-top:45%;
}
.card:nth-child(18){
    left:62%;
    margin-top:40%;
}
.card:nth-child(19){
    left:57%;
    margin-top:55%;
}
@media (max-width: 808px){
#insideConcepts .contentBox {
    padding-bottom: 150%;
}
.card{
    width:32%;
    padding-bottom:32%;
}
.card:nth-child(1){
    left:10%;
}
.card:nth-child(2){
    left:30%;
    margin-top:20%;
}
.card:nth-child(3){
    left:70%;
    margin-top:20%;
}
.card:nth-child(4){
    left:10%;
    margin-top:40%;
}
.card:nth-child(5){
    left:50%;
    margin-top:40%;
}
.card:nth-child(6){
    left:30%;
    margin-top:60%;
}
.card:nth-child(7){
    left:70%;
    margin-top:60%;
}
.card:nth-child(8){
    left:10%;
    margin-top:80%;
}
.card:nth-child(9){
    left:50%;
    margin-top:80%;
}
.card:nth-child(10){
    left:30%;
    margin-top:100%;
}
.card:nth-child(11){
    display:none;
}
.card:nth-child(12){
    left:77%;
    margin-top:-12%;
}
.card:nth-child(13){
    left:-20%;
    margin-top:20%;
}
.card:nth-child(14){
    display: none;
}
.card:nth-child(15){
    display: none;
}
.card:nth-child(16){
    display: none;
}
.card:nth-child(17){
    left:82%;
    margin-top:140%;
}
.card:nth-child(18){
    left:62%;
    margin-top:120%;
}
.card:nth-child(19){
    left: 7%;
    margin-top: 130%;
}
}
.card.o:hover > div{
    transform: rotateY(180deg);
}
.card.o:hover > div::after{
    opacity: 1;
}
.card > div{
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transform-origin: 50%;
    z-index: 2;
    perspective: 1500px;
    transition:.5s;
    text-indent: -9999px;
}
.card > div::after{
    content: "";
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transform-origin: 50%;
    transform: rotateY(180deg);
    transition:.25s;
}
.card_a{
    background-image: url(images/s1_d0a.svg?v3);
}
.card_a2{
    background-image: url(images/s1_d0a2.svg?v3);
}
.card_a3{
    background-image: url(images/s1_d0a3.svg?v3);
}
.card_a4{
    background-image: url(images/s1_d0a4.svg?v3);
}
.card_b{
    background-image: url(images/s1_d0b.svg?v3);
}
.card_c{
    background-image: url(images/s1_d0c.svg?v3);
}
.card_d{
    background-image: url(images/s1_d0d.svg?v3);
}
#card_1{
    background-image: url(images/s1_d1.svg?v3);
}
html.sc #card_1{
    background-image: url(images/s1_d1_sc.svg?v3);
}
html.en #card_1{
    background-image: url(images/s1_d1_en.svg?v3);
}
#card_1::after {
    content: "";
    background-image: url(images/s1_img1.png);
}
#card_2{
    background-image: url(images/s1_d2.svg?v3);
}
html.sc #card_2{
    background-image: url(images/s1_d2_sc.svg?v3);
}
html.en #card_2{
    background-image: url(images/s1_d2_en.svg?v3);
}
#card_2::after {
    content: "";
    background-image: url(images/s1_img2.png);
    background-position: 50% 65%;
}
#card_3{
    background-image: url(images/s1_d3.svg?v3);
}
html.sc #card_3{
    background-image: url(images/s1_d3_sc.svg?v3);
}
html.en #card_3{
    background-image: url(images/s1_d3_en.svg?v3);
}
#card_3::after {
    content: "";
    background-image: url(images/s1_img3.png?v2);
}
#card_4{
    background-image: url(images/s1_d4.svg?v3);
}
html.sc #card_4{
    background-image: url(images/s1_d4_sc.svg?v3);
}
html.en #card_4{
    background-image: url(images/s1_d4_en.svg?v3);
}
#card_4::after {
    content: "";
    background-image: url(images/s1_img4.png);
    background-position: 50% 70%;
}
#card_5{
    background-image: url(images/s1_d5.svg?v3);
}
html.sc #card_5{
    background-image: url(images/s1_d5_sc.svg?v3);
}
html.en #card_5{
    background-image: url(images/s1_d5_en.svg?v3);
}
#card_5::after {
    content: "";
    background-image: url(images/s1_img5.png);
}
#card_6{
    background-image: url(images/s1_d6.svg?v3);
}
html.sc #card_6{
    background-image: url(images/s1_d6_sc.svg?v3);
}
html.en #card_6{
    background-image: url(images/s1_d6_en.svg?v3);
}
#card_6::after {
    content: "";
    background-image: url(images/s1_img6.png);
    background-position: 50% 30%;
}
#card_7{
    background-image: url(images/s1_d7.svg?v3);
}
html.sc #card_7{
    background-image: url(images/s1_d7_sc.svg?v3);
}
html.en #card_7{
    background-image: url(images/s1_d7_en.svg?v3);
}
#card_7::after {
    content: "";
    background-image: url(images/s1_img7.png);
    background-position: 50% 75%;
}
#card_8{
    background-image: url(images/s1_d8.svg?v4);
}
html.sc #card_8{
    background-image: url(images/s1_d8_sc.svg?v4);
}
html.en #card_8{
    background-image: url(images/s1_d8_en.svg?v3);
}
#card_8::after {
    content: "";
    background-image: url(images/s1_img8.png);
    background-position: 50% 75%;
}
#card_9{
    background-image: url(images/s1_d9.svg?v3);
}
html.sc #card_9{
    background-image: url(images/s1_d9_sc.svg?v3);
}
html.en #card_9{
    background-image: url(images/s1_d9_en.svg?v3);
}
#card_9::after {
    content: "";
    background-image: url(images/s1_img9.png);
    background-position: 50% 75%;
}
#card_10{
    background-image: url(images/s1_d10.svg?v5);
}
html.sc #card_10{
    background-image: url(images/s1_d10_sc.svg?v5);
}
html.en #card_10{
    background-image: url(images/s1_d10_en.svg?v3);
}
#card_10::after {
    content: "";
    background-image: url(images/s1_img10.png);
    background-position: 50% 70%;
}

#insideMilestones{
    /*background-image:url(/images/bg.png);*/
    background-size: 180%;
    background-color:rgb(89,191,228);
    position: relative;
}
#insideMilestones .ol, #insideCompensation .ol{
    display: grid;
    grid-template-columns: 40px 1fr;
}
#insideCompensation .ol.ol2{
    grid-template-columns: 80px 1fr;
}
#insideMilestones .bg{
    position: absolute;
    background: linear-gradient(180deg, #FFFFFF 50%, rgb(216 242 252 / 80%) 100%);
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#insideMilestones .maxwidth{
    position: relative;
    max-width: 1280px;
}
#insideMilestones .title {
    color: #2F748F;
    text-align: center;
    font-size: 200%;
}
html.en #insideMilestones .title{
    font-size: 150%;
}
@media (max-width: 760px){
#insideMilestones .title {
}
}
#insideMilestones .contentBox{
    display: grid;
    grid-template-columns: 4fr 5fr;
    margin: 0 2%;
    margin-top: 30px;
}
#insideMilestones .contentBox2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 30px 2% 0 2%;
    grid-gap: 20px;
}
@media (max-width: 650px){
    #insideMilestones .contentBox2{
        grid-template-columns:1fr;
    }
}
.timeline{
    position: relative;
    overflow: hidden;
}
#insideMilestones .line {
    margin-left:4%;
    position: absolute;
    left: 0;
    width: 10px;
    text-align: right;
    border-radius: 10px;
    margin-top: 5%;
    overflow: hidden;
    height:100%;
    top: -100%;
    transition: 1s;
}
#insideMilestones .lineIn {
    position: relative;
    background-color: #939598;
    left: 0;
    top:0;
    width: 100%;
    height: 0;
    border-radius: 10px;
    transition: 1s;
}
#insideMilestones .boxes {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    /*align-items: end;*/
    margin-left: calc(4% + 5px);
}
#insideMilestones .boxes > div {
    position: relative;
    transition: all .5s;
    padding-bottom:10%;
    opacity: 0;
    transition: .5s;
}
#insideMilestones .boxes > div a{
    color: inherit;
    text-decoration: none;
}
#insideMilestones .boxes .boxContent{
    /*cursor: pointer;*/
}
#insideMilestones .boxes .boxContent.ball:before {
    content: '';
    width: 46px;
    height: 46px;
    border-radius: 46px;
    position: absolute;
    transform: translate(-50%,0%);
    background-color:#303030;
}
#insideMilestones .boxes .boxContent.ball{
    color:#303030;
}
#insideMilestones .boxes .boxContent.ball.s12:before {
    background: linear-gradient(180deg, rgba(38,74,100,1) 0%, rgba(38,74,100,1) 50%, rgba(209,73,0,1) 50%, rgba(209,73,0,1) 100%);
}
#insideMilestones .boxes .boxContent.ball.s12{
    color:#264a64;
}

#insideMilestones .boxes .boxContent.ball.s1:before {
    background-color:#264a64;
}
#insideMilestones .boxes .boxContent.ball.s1{
    color:#264a64;
}
#insideMilestones .boxes .boxContent.ball.s2:before {
    background-color:#d14900;
}
#insideMilestones .boxes .boxContent.ball.s2{
    color:#d14900;
}
#insideMilestones .boxes .boxContent.ball.s3:before {
    background-color:#565655;
}
#insideMilestones .boxes .boxContent.ball.s3{
    color:#565655;
}
#insideMilestones .boxes .boxContent .year {
    font-size: 320%;
    font-family: 'Barlow', sans-serif;
    padding-left:10%;
}
#insideMilestones .boxes .boxContent .text {
    padding-left:10%;
}
.map{
    position: relative;
    margin-left: 5%;
}
.base{
    position: relative;
    z-index:100;
}
.frame1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:3;
    opacity: 0;
    transition: .5s;
}
.frame2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:2;
    opacity: 0;
    transition: .5s;
}
.frame3{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index:1;
    opacity: 0;
    transition: .5s;
}
@media (max-width: 808px){
#insideMilestones .contentBox {
    grid-template-columns: auto;
}
}
.consultant .remark{
    position: absolute;
    bottom: 5px;
    font-size: 80%;
    right: 10px;
}
.menu_arrangement{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    max-width:320px;
    margin: 26px auto 0 auto;
    text-align: center;
    color: #FFF;
}

.menu_arrangement div:nth-child(1) a{
    display:block;
    background:#264a64;
    padding: 2px;
    border-radius: 5px;
    margin-bottom: 2px;
    color: inherit;
    text-decoration: none;
}
.menu_arrangement div:nth-child(1) a:nth-child(2){
    background: #326a93;
}
.menu_arrangement div:nth-child(1) a:nth-child(3){
    background: #326a93;
}
.menu_arrangement div:nth-child(1) a:nth-child(4){
    background:#326a93;
}
.menu_arrangement div:nth-child(2) a:nth-child(2){
    background:#d14900;
}
.menu_arrangement div:nth-child(2) a:nth-child(3){
    background:#d14900;
}
.menu_arrangement div:nth-child(2) a{
    display:block;
    background:#a1400d;
    padding: 2px;
    border-radius: 5px;
    margin-bottom: 2px;
    color: inherit;
    text-decoration: none;
}
.menu_arrangement a.on{
    text-decoration: underline !important;
    border-bottom: 3px solid #000000;
    /*transform: scale(1.1);*/
}
#insideInfo .title {
    color: #2F748F;
    text-align: center;
    font-size: 200%;
    line-height: 120%;
}
@media (max-width: 768px){
    html.en #insideInfo .title {
        font-size: 150%;
    }
}
#insideInfo .maxwidth{
    max-width: 1280px;
    position: relative;
}

#insideInfo .maxwidth.p1{
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
}
#insideInfo .maxwidth.p2{
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #D7F2FC 10%, #D7F2FC 90%, rgba(255,255,255,0) 100%);
}
#insideInfo .maxwidth.p3{
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #1893c1 10%, #1893c1 90%, rgba(255,255,255,0) 100%);
}
.groupNews{
    margin:20px 20px 0 20px;
    position: relative;
}
.groupNews .showall{
    display: block;
    max-width: 300px;
    margin: 30px auto;
}
.groupNews:before{
    content: "";
    background-image: url(images/s6_icon1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 44px;
    display: block;
    position: absolute;
    top: -50px;
}
.groupNews .news{
    border-top:1px solid #2F748F;
    padding:20px 10px;
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-gap: 20px;
    color:#2F748F;
}
@media (max-width: 768px){
    .groupNews .news{
        grid-template-columns:1fr;
    }
}
.groupNews .news .date{
    font-size:130%;
}
.groupNews .news .text{
}
.btn:before{
    content:'>>';
}
#insideInfo a{
    color: #0000FF
}

.groupDocument{
    margin:20px 20px 0 20px;
    position: relative;
}
.groupDocument:before{
    content: "";
    background-image: url(images/s6_icon2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 44px;
    display: block;
    position: absolute;
    top: -50px;
}
.groupDocument.none:before{
    content: "";
    background-image: none;
    width: auto;
    height: auto;
    display: block;
    top: auto;
}
.groupDocument .document{
    border-top:1px solid #2F748F;
    padding:20px 10px;
    display: grid;
    grid-template-columns: 22px 1fr;
    grid-gap: 30px;
    color:#2F748F;
}
.groupDocument .document > img{
    cursor: pointer;
    transition: .3s;
}
.groupDocument .document .text.scroll{
    overflow: auto;
}
.groupDocument .document .text.scroll > div:nth-child(2){
    min-width: 850px;
}
.groupDocument .document .text > div:nth-child(1){
    font-size:130%;
    cursor: pointer;
}
.groupDocument .document .text > div:nth-child(2){
    display:none;
}
.groupDocument .document .btn:before{
    content:'';
}
.lower-roman{
    counter-reset: list;
}
.lower-roman > li{
    list-style: none;
    position: relative;
}
.lower-roman > li:before{
    content: "(" counter(list, lower-roman) ") ";
    counter-increment: list;
    position: absolute;
    left: -35px;
    width: 30px;
    text-align: right;
}
.disc{
    list-style: disc;
    margin: 15px 0;
}
.groupConsultant{
    margin:20px 20px 0 20px;
    position: relative;
    padding-bottom: 50px;
}
.groupConsultant:before{
    content: "";
    background-image: url(images/s6_icon4.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 44px;
    display: block;
    position: absolute;
    top: -50px;
}
.groupConsultant .consultant{
    padding: 30px 10px 25px 10px;
    /*display: grid;
    grid-template-columns: 22px 1fr;
    grid-gap: 30px;*/
    color:#FFF;
    position: relative;
}
.groupConsultant .consultant:after{
    content: "";
    width: 100%;
    height: 5px;
    background: #FFF;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.groupConsultant .consultant > img{
    cursor: pointer;
    transition: .3s;
}
.groupConsultant .consultant .text > div:nth-child(1){
    font-size:130%;
}
html.en .groupConsultant .consultant .text > div:nth-child(1){
    font-size:110%;
}
.groupConsultant .consultant .btnTitle{
    font-weight: bold;
}
.groupConsultant .consultant .text > div:nth-child(2){
    display:none;
}
.groupConsultant .consultant .btn:before{
    content:'>>';
}
.captionGroup{
    position: relative;
    overflow: hidden;
}
.captionGroup img{
    display: block;
}
.captionGroup:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background: #1893c1;
    top: 0;
    right: 0;
    transform: rotate(45deg) translate(50%, -50%);
    transform-origin: 100% 0%;
    z-index: 1;
}
.captionGroup:after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background: #1893c1;
    bottom: 0;
    left: 0;
    transform: rotate(45deg) translate(-50%, 50%);
    transform-origin: 0% 100%;
    z-index: 1;
}
.captionGroup .text{
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    color:rgb(53 102 124);
}
@media (max-width: 768px){
    .captionGroup .text{
        position: relative;
        padding: 10px;
        font-size: 80%;
    }
    .consultant .captionGroup{
        display: flex;
        flex-direction: column-reverse;
    }
.captionGroup:before {
    width: 30px;
    height: 30px;
}
.captionGroup:after {
    width: 30px;
    height: 30px;
}
}

#insideCompensation {
    /*background-image: url(/images/bg.png);*/
    background-size: 180%;
    background-repeat: no-repeat;
    background-position: bottom;
    /*background-color: rgba(138,160,169,.5);*/
    position: relative;
}
#insideCompensation .bg {
    position: absolute;
    background: linear-gradient(0deg, rgba(138,160,169,.2) 0px, #FFFFFF 191px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#insideCompensation .title {
    color: #2F748F;
    text-align: center;
    font-size: 200%;
}
@media (max-width: 768px){
    html.en #insideCompensation .title {
        font-size: 150%;
    }
}
#insideCompensation .maxwidth{
    max-width: 1280px;
    position: relative;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
}
#insideCompensation a{
    color: #0000FF;
}
.disc.margin li{
    margin:15px;
}
.infoSubtitleIn{
    font-size:130%;
}
.infoSubtitle{
    display: block;
    background: #3E87AA;
    padding: 2px 10px;
    border-radius: 5px;
    margin-bottom: 2px;
    color: inherit;
    text-decoration: none;
    color:#FFF;
    font-size:130%;
}

#insideCommunity{
    position: relative;
    color:#526269;
    background: #FFF;
}
#insideCommunity .title {
    color: #2F748F;
    text-align: center;
    font-size: 200%;
}
#insideCommunity .subtitle{
    color: #526269;
    text-align: center;
    font-size: 160%;
}
#insideCommunity .maxwidth{
    max-width: 1280px;
    position: relative;
}
#insideCommunity .contentBox{
    display: grid;
    grid-template-columns: 3fr 5fr;
    padding: 0 20px;
}
#insideCommunity .icon_1{
    width:36px;
    display:block;
    margin-bottom:20px;
}
#insideCommunity .icon_2, #insideContent .icon_2{
    width: 16px;
    display: inline-block;
    margin-right: 20px;
}
#insideCommunity .btn_1{
    background: #F26B25;
    color: #FFF;
    text-decoration: none;
    display: block;
    border-radius: 100px;
    padding: 5px 15px;
    width: 140px;
    text-align: center;
}
#insideCommunity .btn_1 img{
    width: 36px;
    vertical-align: middle;
    margin-right:10px;
}
#insideCommunity a {
    color: #0000FF;
}

#insideCommunity .map{
    margin-left: -10%;
    width: 110%;
    max-width: 110%;
    margin-bottom: -10%;
    position: relative;
    z-index:1;
}
#insideCommunity .boxName1{
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    margin-left: 3%;
    margin-top: 6%;
    z-index:3;
    animation: jump 1s infinite;
    animation-timing-function: ease-out;
    transform-origin: 50% 100%;
}
#insideCommunity .boxName2{
    position: absolute;
    left: 0;
    top: 0;
    width: 35%;
    margin-left: -7.5%;
    margin-top: 15%;
    z-index: 2;
    animation: jump2 1s infinite;
    animation-timing-function: ease-out;
    transform-origin: 50% 100%;
}
#insideCommunity .contentBox2{
    position: relative;
    padding: 0 20px;
}
#insideCommunity .pic{
    display: block;
    width: 80%;
    margin-left: 20%;
    margin-top: -15%;
    margin-bottom:-5%;
    position: relative;
    z-index: 0;
}
html.en #insideCommunity .pic{
    margin-top: -11%;
}
@keyframes jump{
0% {transform: translateY(0%) scaleY(1);}
50% {transform: translateY(-50%) scaleY(.9) scaleX(1.1); }
100% {transform: translateY(0%) scaleY(1);}
}
@keyframes jump2{
0% {transform: translateY(0%) translateX(0%) scaleY(1);opacity: 1;}
50% {transform: translateY(-50%) translateX(-10%) scaleY(.9);opacity: .3; }
100% {transform: translateY(0%) translateX(0%) scaleY(1);opacity: 1;}
}
#insideCommunity .contentBox3{
    position: relative;
    padding: 0 20px;
    overflow: hidden;
}
#insideCommunity .circ div{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FFF;
    font-size:120%;
}
#insideCommunity .circ.on{
    border:2px solid #FFF;
    z-index:9;
}
#insideCommunity .circ{
    transition: .2s;
}
#insideCommunity .circ:hover{
    transform: scale(1.1);
    z-index:10;
}
#insideCommunity .btn1{
    position: absolute;
    top: 0;
    left: 4%;
    background: #0096B9;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
    margin-top: 2%;
}
#insideCommunity .btn2{
    position: absolute;
    top: 0;
    left: 2%;
    width: 12%;
    margin-top: 16%;
    background: #2d870d;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
}
#insideCommunity .btn3{
    position: absolute;
    top: 0;
    left: 7%;
    width: 12%;
    margin-top: 30%;
    background: #18866b;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
}
#insideCommunity .btn4{
    position: absolute;
    top: 0;
    right: 4%;
    width: 12%;
    background: #a1680c;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
     margin-top: 2%;
}
#insideCommunity .btn5{
    position: absolute;
    top: 0;
    right: 2%;
    width: 12%;
    margin-top: 16%;
    background: #F26B25;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
}
#insideCommunity .btn6{
    position: absolute;
    top: 0;
    right: 4%;
    width: 12%;
    margin-top: 30%;
    background: #707070;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    width: 12%;
    height: 0;
    padding-bottom: 12%;
    border-radius: 100px;
}
#insideCommunity .part3content{
    margin-top:30px;
    padding: 0 20px 20px 20px;
}
.video{
    position: relative;
    width:100%;
    height:0;
    padding-bottom:56.225%;
}
.video iframe{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#insideCommunity .title_t{
    margin-bottom: -15%;margin-top: -8%;width: 90%;margin-left: 5%;
}
@media (max-width: 760px){
#insideCommunity .contentBox {
    grid-template-columns: 1fr;
}
#insideCommunity .map{
    margin-left: 0;
    width: 100%;
    margin-bottom: 0;
}
#insideCommunity .boxName1{
    margin-left: 10%;
    margin-top: 4%;
}
#insideCommunity .boxName2{
    margin-left: -.5%;
    margin-top: 12%;
}
#insideCommunity .circ div {
    font-size: 12px;
}
#insideCommunity .pic{
    margin-top: 0%;
}
#insideCommunity .contentBox3{
    padding-bottom:22%;
}
#insideCommunity .btn1{
    left:1%;
    width: 15.5%;
    padding-bottom:15.5%;
    margin-top:72%;
}
#insideCommunity .btn2{
    left:17.5%;
    width: 15.5%;
    padding-bottom:15.5%;
     margin-top:72%;
}
#insideCommunity .btn3{
    left:34%;
    width: 15.5%;
    padding-bottom:15.5%;
     margin-top:72%;
}
#insideCommunity .btn4{
    left:50.5%;
    width: 15.5%;
    padding-bottom:15.5%;
     margin-top:72%;
}
#insideCommunity .btn5{
    left:67%;
    width: 15.5%;
    padding-bottom:15.5%;
     margin-top:72%;
}
#insideCommunity .btn6{
    left:83.5%;
    width: 15.5%;
    padding-bottom:15.5%;
     margin-top:72%;
}
#insideCommunity .title_t{
width: 120%;
margin-left: -13%;
max-width: 120%;
}
}

.pWP{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #FFF;
    align-items: start;
}
.textWPic{
    display: grid;
    grid-template-columns: 100px 2fr 1fr;
    background: #FFF;
    margin-bottom: 20px;
    align-items: start;
}
.textWPic .p{
    padding:20px 0 0 20px;
    box-sizing: border-box;
}
.textWText{
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-gap: 20px;
    align-content: center;
    padding: 20px;
}
@media (max-width: 760px){
    .pWP, .textWText{
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
    .textWText > div:nth-child(even){
        padding-bottom:10px;
    }
    .textWPic{
    grid-template-columns: 100px 1fr;
    }
    .textWPic > div:nth-child(3){
        grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    }
}

.btnLeft{
    position: absolute;
    top: 50%;
    left: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 15px;
    line-height: 50px;
    color: #000;
    cursor: pointer;
    background-color: rgba(255,255,255,.5);
    transform: translateY(-50%);
}
.btnLeft:after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0px 10px 10px;
    border-color: transparent transparent transparent #666666;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(180deg);
}
.btnRight{
    position: absolute;
    top: 50%;
    right: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 15px;
    line-height: 50px;
    color: #000;
    cursor: pointer;
    background-color: rgba(255,255,255,.5);
    transform: translateY(-50%);
}
.btnRight:after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0px 10px 10px;
    border-color: transparent transparent transparent #666666;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#menuSet .shareBtn {
    display: none;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: background 0.25s ease 0s;
    display: inline-block !important;
    margin:0 5px;
    font-size: 18px;
}
#menuSet a.email{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23000000%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M2.7%2C17.1c-1.2%2C0-2.1-0.9-2.1-2V4.9c0-1.1%2C0.9-2%2C2.1-2h14.6c1.2%2C0%2C2.1%2C0.9%2C2.1%2C2v10.2c0%2C1.1-0.9%2C2-2.1%2C2H2.7z%0A%09%20M2.2%2C15.4l0.4%2C0.1l14.8%2C0l0.4-0.1l0.1-0.4l0-9.3l-6.5%2C5.5c-0.4%2C0.3-0.9%2C0.5-1.4%2C0.5h0c-0.5%2C0-1-0.2-1.3-0.5L2.2%2C5.9V15.4z%20M10%2C10.3%0A%09l6.9-5.9H3.1L10%2C10.3z%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.email:hover, #menuSet a.email:focus{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%234187A3%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M2.7%2C17.1c-1.2%2C0-2.1-0.9-2.1-2V4.9c0-1.1%2C0.9-2%2C2.1-2h14.6c1.2%2C0%2C2.1%2C0.9%2C2.1%2C2v10.2c0%2C1.1-0.9%2C2-2.1%2C2H2.7z%0A%09%20M2.2%2C15.4l0.4%2C0.1l14.8%2C0l0.4-0.1l0.1-0.4l0-9.3l-6.5%2C5.5c-0.4%2C0.3-0.9%2C0.5-1.4%2C0.5h0c-0.5%2C0-1-0.2-1.3-0.5L2.2%2C5.9V15.4z%20M10%2C10.3%0A%09l6.9-5.9H3.1L10%2C10.3z%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.fb{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23000000%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M10%2C0C4.5%2C0%2C0%2C4.5%2C0%2C10c0%2C5%2C3.7%2C9.1%2C8.4%2C9.9v-7H5.9V10h2.5V7.8c0-2.5%2C1.5-3.9%2C3.8-3.9c1.1%2C0%2C2.2%2C0.2%2C2.2%2C0.2%0A%09v2.5h-1.3c-1.2%2C0-1.6%2C0.8-1.6%2C1.6V10h2.8l-0.4%2C2.9h-2.3v7C16.3%2C19.1%2C20%2C15%2C20%2C10C20%2C4.5%2C15.5%2C0%2C10%2C0z%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.fb:hover, #menuSet a.fb:focus{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%234187A3%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M10%2C0C4.5%2C0%2C0%2C4.5%2C0%2C10c0%2C5%2C3.7%2C9.1%2C8.4%2C9.9v-7H5.9V10h2.5V7.8c0-2.5%2C1.5-3.9%2C3.8-3.9c1.1%2C0%2C2.2%2C0.2%2C2.2%2C0.2%0A%09v2.5h-1.3c-1.2%2C0-1.6%2C0.8-1.6%2C1.6V10h2.8l-0.4%2C2.9h-2.3v7C16.3%2C19.1%2C20%2C15%2C20%2C10C20%2C4.5%2C15.5%2C0%2C10%2C0z%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.weibo{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23000000%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M16.2%2C10.2C15.8%2C10%2C15.4%2C9.8%2C15%2C9.7c-0.1%2C0-0.2-0.1-0.2-0.1c0%2C0-0.1%2C0-0.1-0.1c-0.1%2C0-0.1-0.1-0.1-0.1%0A%09c0-0.1%2C0-0.1%2C0.1-0.2c0.3-0.9%2C0.3-1.5%2C0-2c-0.3-0.5-0.9-0.7-1.7-0.7c-0.8%2C0-1.7%2C0.2-2.7%2C0.7l-0.1%2C0c0%2C0-0.1%2C0-0.2%2C0%0A%09c-0.1%2C0-0.1%2C0-0.2%2C0c-0.1%2C0-0.1%2C0-0.1-0.1c0%2C0%2C0-0.1%2C0-0.2c0.3-1.1%2C0.3-1.9-0.2-2.3C9%2C4.1%2C8.1%2C4%2C6.8%2C4.5C5.5%2C5%2C4.2%2C5.9%2C3%2C7.2%0A%09c-1%2C1-1.7%2C1.9-2.2%2C2.9C0.3%2C11%2C0%2C11.9%2C0%2C12.8c0%2C0.8%2C0.2%2C1.5%2C0.7%2C2.2c0.5%2C0.7%2C1.1%2C1.2%2C1.9%2C1.7c0.8%2C0.4%2C1.7%2C0.8%2C2.7%2C1%0A%09c1%2C0.2%2C2%2C0.4%2C3.1%2C0.4c1%2C0%2C2.1-0.1%2C3-0.3c1-0.2%2C1.8-0.5%2C2.5-0.9c0.7-0.4%2C1.3-0.8%2C1.9-1.3c0.5-0.5%2C0.9-1%2C1.2-1.5%0A%09c0.3-0.5%2C0.4-1.1%2C0.4-1.6c0-0.5-0.1-0.9-0.4-1.3C16.8%2C10.7%2C16.5%2C10.4%2C16.2%2C10.2L16.2%2C10.2z%20M12.5%2C15.3c-1.1%2C0.9-2.5%2C1.4-4.1%2C1.6%0A%09c-1.1%2C0.1-2.1%2C0-3.1-0.2c-1-0.3-1.7-0.7-2.3-1.2c-0.6-0.6-0.9-1.2-1-1.9c-0.1-1.1%2C0.4-2.1%2C1.5-3C4.6%2C9.7%2C6%2C9.2%2C7.6%2C9%0A%09c1.1-0.1%2C2.1%2C0%2C3.1%2C0.2c1%2C0.3%2C1.7%2C0.7%2C2.3%2C1.2c0.6%2C0.6%2C0.9%2C1.2%2C1%2C1.9C14.1%2C13.5%2C13.6%2C14.5%2C12.5%2C15.3L12.5%2C15.3z%20M12.5%2C15.3%0A%09%20M8.7%2C10.7c-0.8-0.2-1.6-0.1-2.3%2C0.2c-0.8%2C0.3-1.3%2C0.9-1.7%2C1.6c-0.3%2C0.7-0.4%2C1.4-0.1%2C2.1c0.3%2C0.7%2C0.8%2C1.2%2C1.6%2C1.4%0A%09c0.8%2C0.3%2C1.7%2C0.2%2C2.5-0.1c0.8-0.4%2C1.4-0.9%2C1.8-1.7c0.3-0.7%2C0.3-1.5%2C0-2.1C10.1%2C11.4%2C9.6%2C10.9%2C8.7%2C10.7L8.7%2C10.7z%20M7.5%2C14.3%0A%09c-0.2%2C0.3-0.4%2C0.4-0.7%2C0.5c-0.3%2C0.1-0.6%2C0.1-0.8%2C0c-0.3-0.1-0.4-0.3-0.5-0.6c-0.1-0.3%2C0-0.5%2C0.1-0.8C5.8%2C13.3%2C6%2C13.1%2C6.3%2C13%0A%09c0.3-0.1%2C0.6-0.1%2C0.8%2C0c0.3%2C0.1%2C0.4%2C0.3%2C0.5%2C0.6C7.7%2C13.8%2C7.7%2C14.1%2C7.5%2C14.3L7.5%2C14.3z%20M8.6%2C13c-0.1%2C0.1-0.1%2C0.2-0.2%2C0.2%0A%09c-0.1%2C0-0.2%2C0-0.3%2C0c-0.2-0.1-0.3-0.3-0.1-0.5c0.1-0.1%2C0.1-0.2%2C0.2-0.2c0.1%2C0%2C0.2%2C0%2C0.3%2C0c0.1%2C0%2C0.2%2C0.1%2C0.2%2C0.2%0A%09C8.7%2C12.8%2C8.6%2C12.9%2C8.6%2C13L8.6%2C13z%20M8.6%2C13%20M15.9%2C8.1c0.1%2C0.2%2C0.2%2C0.3%2C0.4%2C0.3c0.2%2C0.1%2C0.3%2C0%2C0.5%2C0C17%2C8.3%2C17.1%2C8.2%2C17.1%2C8%0A%09c0.1-0.4%2C0.2-0.9%2C0.1-1.3c-0.1-0.5-0.3-0.9-0.6-1.2c-0.3-0.3-0.7-0.6-1.1-0.7c-0.4-0.1-0.9-0.2-1.3-0.1c-0.2%2C0-0.3%2C0.1-0.4%2C0.3%0A%09c-0.1%2C0.2-0.1%2C0.3-0.1%2C0.5c0%2C0.2%2C0.1%2C0.3%2C0.3%2C0.4C14.1%2C6%2C14.3%2C6%2C14.4%2C6c0.5-0.1%2C0.9%2C0%2C1.2%2C0.4C16%2C6.7%2C16%2C7.1%2C15.9%2C7.6%0A%09C15.8%2C7.8%2C15.9%2C7.9%2C15.9%2C8.1L15.9%2C8.1z%20M15.9%2C8.1%20M19.9%2C6.1c-0.2-0.9-0.6-1.8-1.3-2.5c-0.6-0.7-1.4-1.2-2.3-1.5%0A%09c-0.9-0.3-1.8-0.3-2.7-0.1c-0.2%2C0-0.4%2C0.2-0.5%2C0.3C13%2C2.5%2C13%2C2.7%2C13%2C2.9c0%2C0.2%2C0.2%2C0.4%2C0.3%2C0.5c0.2%2C0.1%2C0.4%2C0.2%2C0.6%2C0.1%0A%09c0.6-0.1%2C1.3-0.1%2C1.9%2C0.1c0.6%2C0.2%2C1.2%2C0.6%2C1.7%2C1.1c0.5%2C0.5%2C0.8%2C1.1%2C0.9%2C1.8c0.1%2C0.7%2C0.1%2C1.3-0.1%2C1.9c-0.1%2C0.2%2C0%2C0.4%2C0.1%2C0.6%0A%09c0.1%2C0.2%2C0.2%2C0.3%2C0.4%2C0.4c0.2%2C0.1%2C0.4%2C0.1%2C0.6%2C0c0.2-0.1%2C0.3-0.2%2C0.4-0.4C20%2C8%2C20.1%2C7.1%2C19.9%2C6.1L19.9%2C6.1z%20M19.9%2C6.1%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.weibo:hover, #menuSet a.weibo:focus{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%234187A3%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M16.2%2C10.2C15.8%2C10%2C15.4%2C9.8%2C15%2C9.7c-0.1%2C0-0.2-0.1-0.2-0.1c0%2C0-0.1%2C0-0.1-0.1c-0.1%2C0-0.1-0.1-0.1-0.1%0A%09c0-0.1%2C0-0.1%2C0.1-0.2c0.3-0.9%2C0.3-1.5%2C0-2c-0.3-0.5-0.9-0.7-1.7-0.7c-0.8%2C0-1.7%2C0.2-2.7%2C0.7l-0.1%2C0c0%2C0-0.1%2C0-0.2%2C0%0A%09c-0.1%2C0-0.1%2C0-0.2%2C0c-0.1%2C0-0.1%2C0-0.1-0.1c0%2C0%2C0-0.1%2C0-0.2c0.3-1.1%2C0.3-1.9-0.2-2.3C9%2C4.1%2C8.1%2C4%2C6.8%2C4.5C5.5%2C5%2C4.2%2C5.9%2C3%2C7.2%0A%09c-1%2C1-1.7%2C1.9-2.2%2C2.9C0.3%2C11%2C0%2C11.9%2C0%2C12.8c0%2C0.8%2C0.2%2C1.5%2C0.7%2C2.2c0.5%2C0.7%2C1.1%2C1.2%2C1.9%2C1.7c0.8%2C0.4%2C1.7%2C0.8%2C2.7%2C1%0A%09c1%2C0.2%2C2%2C0.4%2C3.1%2C0.4c1%2C0%2C2.1-0.1%2C3-0.3c1-0.2%2C1.8-0.5%2C2.5-0.9c0.7-0.4%2C1.3-0.8%2C1.9-1.3c0.5-0.5%2C0.9-1%2C1.2-1.5%0A%09c0.3-0.5%2C0.4-1.1%2C0.4-1.6c0-0.5-0.1-0.9-0.4-1.3C16.8%2C10.7%2C16.5%2C10.4%2C16.2%2C10.2L16.2%2C10.2z%20M12.5%2C15.3c-1.1%2C0.9-2.5%2C1.4-4.1%2C1.6%0A%09c-1.1%2C0.1-2.1%2C0-3.1-0.2c-1-0.3-1.7-0.7-2.3-1.2c-0.6-0.6-0.9-1.2-1-1.9c-0.1-1.1%2C0.4-2.1%2C1.5-3C4.6%2C9.7%2C6%2C9.2%2C7.6%2C9%0A%09c1.1-0.1%2C2.1%2C0%2C3.1%2C0.2c1%2C0.3%2C1.7%2C0.7%2C2.3%2C1.2c0.6%2C0.6%2C0.9%2C1.2%2C1%2C1.9C14.1%2C13.5%2C13.6%2C14.5%2C12.5%2C15.3L12.5%2C15.3z%20M12.5%2C15.3%0A%09%20M8.7%2C10.7c-0.8-0.2-1.6-0.1-2.3%2C0.2c-0.8%2C0.3-1.3%2C0.9-1.7%2C1.6c-0.3%2C0.7-0.4%2C1.4-0.1%2C2.1c0.3%2C0.7%2C0.8%2C1.2%2C1.6%2C1.4%0A%09c0.8%2C0.3%2C1.7%2C0.2%2C2.5-0.1c0.8-0.4%2C1.4-0.9%2C1.8-1.7c0.3-0.7%2C0.3-1.5%2C0-2.1C10.1%2C11.4%2C9.6%2C10.9%2C8.7%2C10.7L8.7%2C10.7z%20M7.5%2C14.3%0A%09c-0.2%2C0.3-0.4%2C0.4-0.7%2C0.5c-0.3%2C0.1-0.6%2C0.1-0.8%2C0c-0.3-0.1-0.4-0.3-0.5-0.6c-0.1-0.3%2C0-0.5%2C0.1-0.8C5.8%2C13.3%2C6%2C13.1%2C6.3%2C13%0A%09c0.3-0.1%2C0.6-0.1%2C0.8%2C0c0.3%2C0.1%2C0.4%2C0.3%2C0.5%2C0.6C7.7%2C13.8%2C7.7%2C14.1%2C7.5%2C14.3L7.5%2C14.3z%20M8.6%2C13c-0.1%2C0.1-0.1%2C0.2-0.2%2C0.2%0A%09c-0.1%2C0-0.2%2C0-0.3%2C0c-0.2-0.1-0.3-0.3-0.1-0.5c0.1-0.1%2C0.1-0.2%2C0.2-0.2c0.1%2C0%2C0.2%2C0%2C0.3%2C0c0.1%2C0%2C0.2%2C0.1%2C0.2%2C0.2%0A%09C8.7%2C12.8%2C8.6%2C12.9%2C8.6%2C13L8.6%2C13z%20M8.6%2C13%20M15.9%2C8.1c0.1%2C0.2%2C0.2%2C0.3%2C0.4%2C0.3c0.2%2C0.1%2C0.3%2C0%2C0.5%2C0C17%2C8.3%2C17.1%2C8.2%2C17.1%2C8%0A%09c0.1-0.4%2C0.2-0.9%2C0.1-1.3c-0.1-0.5-0.3-0.9-0.6-1.2c-0.3-0.3-0.7-0.6-1.1-0.7c-0.4-0.1-0.9-0.2-1.3-0.1c-0.2%2C0-0.3%2C0.1-0.4%2C0.3%0A%09c-0.1%2C0.2-0.1%2C0.3-0.1%2C0.5c0%2C0.2%2C0.1%2C0.3%2C0.3%2C0.4C14.1%2C6%2C14.3%2C6%2C14.4%2C6c0.5-0.1%2C0.9%2C0%2C1.2%2C0.4C16%2C6.7%2C16%2C7.1%2C15.9%2C7.6%0A%09C15.8%2C7.8%2C15.9%2C7.9%2C15.9%2C8.1L15.9%2C8.1z%20M15.9%2C8.1%20M19.9%2C6.1c-0.2-0.9-0.6-1.8-1.3-2.5c-0.6-0.7-1.4-1.2-2.3-1.5%0A%09c-0.9-0.3-1.8-0.3-2.7-0.1c-0.2%2C0-0.4%2C0.2-0.5%2C0.3C13%2C2.5%2C13%2C2.7%2C13%2C2.9c0%2C0.2%2C0.2%2C0.4%2C0.3%2C0.5c0.2%2C0.1%2C0.4%2C0.2%2C0.6%2C0.1%0A%09c0.6-0.1%2C1.3-0.1%2C1.9%2C0.1c0.6%2C0.2%2C1.2%2C0.6%2C1.7%2C1.1c0.5%2C0.5%2C0.8%2C1.1%2C0.9%2C1.8c0.1%2C0.7%2C0.1%2C1.3-0.1%2C1.9c-0.1%2C0.2%2C0%2C0.4%2C0.1%2C0.6%0A%09c0.1%2C0.2%2C0.2%2C0.3%2C0.4%2C0.4c0.2%2C0.1%2C0.4%2C0.1%2C0.6%2C0c0.2-0.1%2C0.3-0.2%2C0.4-0.4C20%2C8%2C20.1%2C7.1%2C19.9%2C6.1L19.9%2C6.1z%20M19.9%2C6.1%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.twitter{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23000000%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M20%2C3.8c-0.7%2C0.3-1.5%2C0.5-2.4%2C0.6c0.8-0.5%2C1.5-1.3%2C1.8-2.3c-0.8%2C0.5-1.7%2C0.8-2.6%2C1c-0.7-0.8-1.8-1.3-3-1.3%0A%09c-2.3%2C0-4.1%2C1.8-4.1%2C4.1c0%2C0.3%2C0%2C0.6%2C0.1%2C0.9C6.4%2C6.7%2C3.4%2C5.1%2C1.4%2C2.6C1%2C3.2%2C0.8%2C3.9%2C0.8%2C4.7c0%2C1.4%2C0.7%2C2.7%2C1.8%2C3.4%0A%09C2%2C8.1%2C1.4%2C7.9%2C0.8%2C7.6c0%2C0%2C0%2C0%2C0%2C0.1c0%2C2%2C1.4%2C3.6%2C3.3%2C4c-0.3%2C0.1-0.7%2C0.1-1.1%2C0.1c-0.3%2C0-0.5%2C0-0.8-0.1c0.5%2C1.6%2C2%2C2.8%2C3.8%2C2.8%0A%09c-1.4%2C1.1-3.2%2C1.8-5.1%2C1.8c-0.3%2C0-0.7%2C0-1-0.1c1.8%2C1.2%2C4%2C1.8%2C6.3%2C1.8c7.5%2C0%2C11.7-6.3%2C11.7-11.7c0-0.2%2C0-0.4%2C0-0.5%0A%09C18.8%2C5.3%2C19.4%2C4.6%2C20%2C3.8L20%2C3.8z%20M20%2C3.8%22%2F%3E%0A%3C%2Fsvg%3E");
}
#menuSet a.twitter:hover, #menuSet a.twitter:focus{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22icons%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%234187A3%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M20%2C3.8c-0.7%2C0.3-1.5%2C0.5-2.4%2C0.6c0.8-0.5%2C1.5-1.3%2C1.8-2.3c-0.8%2C0.5-1.7%2C0.8-2.6%2C1c-0.7-0.8-1.8-1.3-3-1.3%0A%09c-2.3%2C0-4.1%2C1.8-4.1%2C4.1c0%2C0.3%2C0%2C0.6%2C0.1%2C0.9C6.4%2C6.7%2C3.4%2C5.1%2C1.4%2C2.6C1%2C3.2%2C0.8%2C3.9%2C0.8%2C4.7c0%2C1.4%2C0.7%2C2.7%2C1.8%2C3.4%0A%09C2%2C8.1%2C1.4%2C7.9%2C0.8%2C7.6c0%2C0%2C0%2C0%2C0%2C0.1c0%2C2%2C1.4%2C3.6%2C3.3%2C4c-0.3%2C0.1-0.7%2C0.1-1.1%2C0.1c-0.3%2C0-0.5%2C0-0.8-0.1c0.5%2C1.6%2C2%2C2.8%2C3.8%2C2.8%0A%09c-1.4%2C1.1-3.2%2C1.8-5.1%2C1.8c-0.3%2C0-0.7%2C0-1-0.1c1.8%2C1.2%2C4%2C1.8%2C6.3%2C1.8c7.5%2C0%2C11.7-6.3%2C11.7-11.7c0-0.2%2C0-0.4%2C0-0.5%0A%09C18.8%2C5.3%2C19.4%2C4.6%2C20%2C3.8L20%2C3.8z%20M20%2C3.8%22%2F%3E%0A%3C%2Fsvg%3E");

}

#insideCommunity .pic img:nth-child(1){
		        position: absolute;
                left: 43.5%;
                width: 27%;
                opacity: 0;
                transition: .5s;
		    }
		    #insideCommunity .pic img:nth-child(2){
		        position: absolute;
                left: 72.5%;
                width: 27%;
                opacity: 0;
                transition: .5s;
		    }
		    #insideCommunity .pic img:nth-child(3){
		        position: absolute;
                left: 0%;
                width: 27%;
                margin-top: 25%;
                opacity: 0;
                transition: .5s;
		    }
		    #insideCommunity .pic img:nth-child(4){
		        position: absolute;
                left: 29%;
                width: 27%;
                margin-top: 25%;
                opacity: 0;
                transition: .5s;
		    }
		    #insideCommunity .pic img:nth-child(5){
		        position: absolute;
                left: 58%;
                width: 27%;
                margin-top: 25%;
                opacity: 0;
                transition: .5s;
		    }
		    #insideCommunity .pic img:nth-child(6){
		        position: absolute;
                left: 43.5%;
                width: 27%;
                margin-top: 50%;
                opacity: 0;
                transition: .5s;
		    }
		    
		    
/* slider */
.g_slide {
  /*  position: fixed;*/
    display: relative;
    overflow: hidden;
    width: 100%;
    /*  z-index: 0;
    top: 0;*/
}

.g_slide .item {
  display: none;
  position: absolute;
  width:100%;
  left: 0;
  top: 0;
}

.switch_main {
    height: 0px;
    padding-bottom: 56.27%;
    position: relative;
}

.switch_main .on img{
    animation-name: zoomIn;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
.switch_main .on:nth-child(2) img, .switch_main .on:nth-child(4) img{
    animation-name: zoomIn2;
}
.switch_main a:nth-child(1) img, .switch_main a:nth-child(3) img{
    transform: scale(1.05);
}
@keyframes zoomIn{
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}
@keyframes zoomIn2{
  0% {transform: scale(1.05);}
  50% {transform: scale(1);}
  100% {transform: scale(1.05);}
}
.g_slide .switch_nav {
	width: 100%;
  position: relative;
  right: 0;
  bottom: 30px;
  z-index: 11;
  text-align: center;
}
.allTitle{
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 11;
}
.allTitle > div{
    color: #FFF;
    position: relative;
    display: inline-block;
    padding: 7px 40px;
    border-radius: 100px;
    font-size: 220%;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    transition: 1s;
    opacity: 0;
}
.allTitle > div.move{
    animation-name: moveto;
}
.allTitle > div.on{
    opacity: 1;
    
}

@keyframes moveto{
  0% {transform: translateY(0%);}
  50% {transform: translateY(20%);}
  100% {transform: translateY(0%);}
}
.allTitle .t1{
    background: rgba(242,102,29,.8);
    margin-left: 60px;
    margin-top: 10%;
    bottom: 0;
    left:0;
}
.allTitle .t2{
    background: rgba(242,102,29,.8);
    margin-right: 10%;
    margin-top: 10%;
    bottom: 0;
    right:0;
}
.allTitle .t3{
    background: rgba(192,85,39,.8);
    margin-left: 10%;
    margin-top: 20%;
    bottom: 0;
    left:0;
}
.allTitle .t4{
    background: rgba(92, 149, 175,.8);
    margin-right: 10%;
    margin-top: 20%;
    bottom: 0;
    right:0;
}
.allTitle .t5 img{
    width: 45px;
    margin-right: 25px;
    margin-bottom: -.5%;
}
@media (max-width: 768px){
.allTitle > div {
    font-size: 150%;
}
html.en .allTitle > div {
    font-size: 120%;
}
.allTitle .t5 img{
    width: 20px;
    margin-right: 8px;
    margin-bottom: -.5%;
}
}
.allTitle .t5{
    background: rgba(192,85,39,.8);
    margin-left:0;
    margin-right: 10%;
    margin-bottom: 10%;
    bottom: 0;
    right:0;
}
.g_slide .switch_nav_item {
  display: inline-block;
  margin: 0 10px 0 0;
  width: 13px;
  height: 13px;
  line-height: 100px;
  overflow: hidden;
  font-size: 0;
  border-radius: 100%;
  background: #b7b7b7;
  text-align: center;
  font-size: 18px;
  color: #fff;
  border: 1px solid #FFF;
}

.g_slide .switch_nav_item:hover { text-decoration: none; }

.g_slide .switch_nav_item_current { background: #eb6100; }

.g_slide .prev,
.g_slide .next {
  position: absolute;
  top: 55%;
  z-index: 10;
  margin-top: -15px;
  width: 20px;
  height: 40px;
  overflow: hidden;
  background: url(../images/slide.png) no-repeat;
  background-size:40px;
  transition: margin-left .3s ease, margin-right .3s ease;
}

.g_slide .prev {
  left: 0px;
  _left: 10px;
	opacity: 0;
}

.g_slide .next {
  right: 0px;
  _right: 10px;
	opacity: 0;
  background-position: -20px 0;
}

.g_slide:hover .prev { margin-left: 10px; 
	opacity: 1;}

.g_slide:hover .next { margin-right: 10px; 
	opacity: 1;}


@media (max-width: 768px){
    .switch_main{
        padding-bottom: 100%
    }
    .g_slide .item{
        height:100%;
    }
    .g_slide .item img{
        height:100%;
        object-fit: cover;
    }
}
.btnMore{
    background: #cf4a07;
    color: #FFF !important;
    text-decoration: none;
    display: block;
    border-radius: 100px;
    padding: 3px 15px;
    width: 120px;
    text-align: center;
    display: inline;
    vertical-align: text-top;
    margin-left: 15px;
    font-size: 80%;
}
.btnMore.inside{
    display: inline-block;
     margin-left: 0;
     margin-top:10px;
}
.grid12{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: stretch;
    grid-gap: 20px;
}
@media (max-width: 768px){
    .grid12{
        grid-template-columns: 1fr;
    }
}
.grid111{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
    /*border-top: 1px solid #000;*/
}
.grid1112{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    align-items: stretch;
    border-top: 1px solid #2f748f;
}
.grid1111{
    display: grid;
    grid-template-columns: .5fr .8fr 1fr 1fr;
    align-items: stretch;
}
.grid1111r{
    grid-template-columns: .8fr 1fr 1fr 1fr;
}
.grid1111 div{
    border-bottom: 1px solid #2f748f;
    padding: 5px 0;
}
.grid1111 div:last-child{
    padding-left: 20px;
}
.grid1111r div{
    border-bottom: 0;
    padding: 5px;
}
.grid1111 div:first-child{
    border-bottom: none;
}
.grid111:first-child, .grid1112:first-child{
    margin-top:20px;
}
.grid111 > div, .grid1112 > div{
    text-align: center;
}

.grid211111{
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 2fr 1fr 1fr;
    align-items: stretch;
    border-top: 1px solid #2f748f;
}
.grid211111.a{
    grid-template-columns: 1fr 1fr 3fr 1fr 1fr 1fr;
}
.grid211111:last-child{
    border-bottom: 1px solid #2f748f;
    margin-bottom: 20px;
}
.grid211111 > div{
    text-align: center;
    padding:5px;
    /*border-right: 1px solid #000;*/
}
.grid211111 > div:first-child{
    text-align: left;
    /*border-left: 1px solid #000;*/
}
.grid211111 > div:nth-child(3), .grid211111 > div:nth-child(6){
    text-align: left;
    padding-left: 20px;
}
.grid211111.a > div:nth-child(6){
    text-align: center;
    padding-left: 0px;
}

.grid2112{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    align-items: stretch;
    border-top: 1px solid #2f748f;
}
.grid2112:last-child, .grid1112:last-child, .grid111:last-child, .grid111.bottom{
    border-bottom: 1px solid #2f748f;
    margin-bottom: 20px;
}
.grid2112 > div, .grid111 > div, .grid1112 > div{
    text-align: center;
    padding:5px;
    /*border-right: 1px solid #000;*/
}
.grid2112 > div:first-child, .grid111 > div:first-child, .grid1112 > div:first-child, .grid1112 > div:nth-child(5){
    text-align: left;
    /*border-left: 1px solid #000;*/
}
.grid2112 > div:nth-child(3), .grid111 > div:nth-child(3), .grid1112 > div:nth-child(3), .grid1112 > div:nth-child(7){
    text-align: left;
    padding-left: 20px;
}
.grid1112 > div:last-child,.grid1112 > div:nth-child(2), .grid1112 > div:nth-child(3), .grid1112 > div:nth-child(4), .grid1112 > div:nth-child(6), .grid1112 > div:nth-child(7){
    text-align: left;
}
.grid1112 > div:nth-child(4){
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.grid1112 > div:nth-child(5),.grid1112 > div:nth-child(6),.grid1112 > div:nth-child(7){
    border-top: 1px solid #2f748f;
}
.alphaWbracket{
  counter-reset: list;
  padding-left: 30px;
  margin: 0;
}
.alphaWbracket > li {
  list-style: none;
}
.alphaWbracket > li:before {
    content: "(" counter(list, lower-alpha) ")";
    counter-increment: list;
    width: 30px;
    display: inline-block;
    margin-left: -30px;
}

#blank{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    z-index:10000;
    display:none;
}
#popup{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index:10001;
    transform: translate(-50%,-50%);
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 8px;
    max-width: 680px;
    padding:20px;
    box-sizing: border-box;
    overflow: hidden;
    display:none;
}

html.en #popup{
    font-size: 80%;
}
#popup .bg{
    position: absolute;
    top: -12%;
    transform: rotate(-60deg);
    width: 35%;
    right: 50px;
    opacity: .5;
}
#btnClose{
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background-color: #374abe;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 42.1 42.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.53'%3E%3Cpath d='m13.2 13.2 14.83 14.83'/%3E%3Cpath d='m28.03 13.2-14.83 14.83'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    cursor: pointer;
}
#popup .titleOuter{
    position: relative;
}
#popup .title{
    color: #526269;
    font-size: 25px;
    margin-bottom: 20px;
    display: inline;
}
html.en #popup .title{
    font-size: 18px;
}
#popup .title img{
    width: 25px;
    margin-right: 5px;
}
#popup a{
    color: inherit;
}
.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin-top:15px;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 768px){
    .table > div{
        margin-bottom: 20px;
    }
    .table > div > div{
        display: block !important;
        width: auto !important;
    }
}
.pause{
    color: #FFF;
    text-decoration: none;
    transform: scaleY(1.2);
    display: inline-block;
    transform-origin: bottom;
}

.innerWidth{
	   width: calc(100% * 4/3);
	   transition: all .5s;
	}
	@media (max-width: 768px){
	    #homeNews .innerWidth{
            width: 400%;
	    }
	}