@font-face {
  font-family: 'Yuanti-SC-Light';
  src:url('/fonts/Yuanti-SC-Light.woff') format('woff'),
        url('/fonts/Yuanti-SC-Light.woff2') format('woff2'),
        url('/fonts/Yuanti-SC-Light.svg#Yuanti-SC-Light') format('svg'),
        url('/fonts/Yuanti-SC-Light.eot'),
        url('/fonts/Yuanti-SC-Light.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Yuanti-SC-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "DIN Pro Condensed Regular";
    src: url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.eot");
    src: url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/6f6329b9e45fded07b61b159efbeebcf.svg#DIN Pro Condensed Regular")format("svg");
}

@font-face {
    font-family: "DINOT-Light";
    src: url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.eot");
    src: url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/28b5efd56dd0967c557de7d5f34fca2c.svg#DINOT-Light")format("svg");
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

	html,body{
		margin: 0;
		padding: 0;
		background: #FFF;
		font-family: "Noto Sans TC", sans-serif;
		font-weight: 300;
	}
	a{
	   color: #395ca6;
	}
	#head{
	    position: relative;
        z-index: 100;
	}
	#logo{
	    position: absolute;
        top: 0;
        left: 8.2%;
        margin-top: 1.9%;
        width: 13%;
	}
	.en #logo{
	     width: 15%;
	}
	#logo.inside{
	    margin-top: .5%;
	}
	#bgLogo{
	    position: absolute;
        top: 0;
        left:0;
        width:100%;
	}
	#main{
		/*max-width: 1480px;*/
		position: relative;
		margin:auto;
		position: relative;
	}
	img{
		width: 100%;
        display: block;
	}
	#map{
		 overflow: hidden;
    	position: relative;
	}
	#frontContent{
        background-image: url(../images/bg_front.svg);
	}
	#outLine{
		position: absolute;
		top:0;
		left:0;
		width:100%;
	}
	#outLine img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
    	transform-origin: 75% 35%;
	}
	#outLine img.an{
	    opacity: 0;
	    animation: outLine 2s cubic-bezier(0, 0, 0.81, 0.26) infinite;
	}
	/*
	#outLine img:nth-child(2){
		animation-delay: 3s;
	}
	#outLine img:nth-child(3){
		animation-delay: 6s;
	}
	#outLine img:nth-child(4){
		animation-delay: 9s;
	}
	#outLine img:nth-child(5){
		animation-delay: 8s;
	}*/
	#outLine img:nth-child(5){
	    opacity: 1;
		animation:none;
	}
	@keyframes outLine {
  		0% {transform: scale(1);opacity: 0;}
  		50% {transform: scale(1);opacity: 1;}
  		100% {transform: scale(1);opacity: 0;}
	}
	#title1{
		position: absolute;
		top: 0;
		left: 13%;
		margin-top: 21%;
		width: 24.5%;
		opacity: 0;
		animation: fadeIn 3s ease-in-out;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 0;
		z-index: 100;
	}
	.en #title1{
	    left: 10%;
        width: 33%;
        margin-top: 22.5%;
	}
	#title2{
		position: absolute;
		top: 0;
		left: 15%;
		margin-top: 25.8%;
		width: 26.5%;
		opacity: 0;
		animation: fadeIn 3s ease-in-out;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		animation-delay: 1s;
		z-index: 100;
	}
	.en #title2{
	    width: 30%;
	}
	#title1 h1, #title2 h2{
	    margin: 0;
	}
	#text1 {
	    position: absolute;
		top: 0;
	    left: 50%;
    	margin-top: 23%;
    	width: 4%;
    	opacity: 0;
    	animation: fadeIn 3s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 4s;
		z-index: 100;
	}
	.en #text1{
	    width: 8%;
	    left: 47%;
	}
	#text2 {
	    position: absolute;
		top: 0;
	    left: 66%;
    	margin-top: 42%;
    	width: 4%;
    	opacity: 0;
    	animation: fadeIn 3s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 4s;
		z-index: 100;
	}
	.en #text2{
	    width: 8%;
	}
	@keyframes fadeIn1 {
  		0% {filter: blur(10px);opacity: 0;}
  		100% {filter: blur(0px);opacity: 1;}
	}
	@keyframes fadeIn {
  		0% {filter: blur(10px) drop-shadow(2px 2px 10px #32797e) drop-shadow(2px 2px 10px #32797e) drop-shadow(2px 2px 10px #32797e);opacity: 0;}
  		100% {filter: blur(0px) drop-shadow(2px 2px 10px #32797e) drop-shadow(2px 2px 10px #32797e) drop-shadow(2px 2px 10px #32797e);opacity: 1;}
	}
	@keyframes fadeInLine {
  		0% {opacity: 0;}
  		100% {opacity: 1;}
	}
	#icon1{
		position: absolute;
		top: 0;
	    left: 49%;
    	margin-top: 48%;
    	width: 3.8%;
		opacity: 0;
		animation: fadeIn1 3s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 3s;
		z-index: 2000;
	}
	#icon2{
		position: absolute;
		top: 0;
	    left: 20%;
    	margin-top: 37%;
    	width: 3.8%;
		opacity: 0;
		animation: fadeIn1 2s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 3s;
		z-index: 2000;
	}
	#icon3{
		position: absolute;
		top: 0;
	    left: 34%;
    	margin-top: 45%;
    	width: 3.8%;
		opacity: 0;
		animation: fadeIn1 2s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 3s;
		z-index: 2000;
	}
	#icon4{
		position: absolute;
		top: 0;
	    left: 64%;
    	margin-top: 48%;
    	width: 3.8%;
		opacity: 0;
		animation: fadeIn1 2s ease-in-out;
    	animation-iteration-count: 1;
    	animation-fill-mode: forwards;
    	animation-delay: 3s;
		z-index: 2000;
	}
	#icon1 a, #icon2 a{
		animation: orbit 10s linear infinite;
		display: block;
	}
	#icon3 a, #icon4 a{
		animation: orbit2 10s linear infinite;
		display: block;
	}
	#icon1, #icon2, #icon3, #icon4{
        width:6%;
        animation-delay: 3s;
    }
    /*
    #icon1 img, #icon2 img, #icon3 img, #icon4 img{
        animation: none;
    }*/
	@-webkit-keyframes orbit {
    	from {  -webkit-transform: rotate(0deg) translateX(8px) rotate(0deg); }
    	to   {  -webkit-transform: rotate(360deg) translateX(8px) rotate(-360deg); }
	}
	@-webkit-keyframes orbit2 {
    	from   {  -webkit-transform: rotate(360deg) translateX(8px) rotate(-360deg); }
		to {  -webkit-transform: rotate(0deg) translateX(8px) rotate(0deg); }
	}
	.liness{
		position: absolute;
    	top: 12%;
    	left: -10%;
    	width: 100%;
	}
	.lines{
	position:relative;
		
		position: absolute;
    	top: 62%;
    	left: -10%;
    	width: 100%;
		
    width: 100%;
    perspective: 50px;
    transform-style: preserve-3d;
    perspective-origin: 0% 100%;
    transform-origin: 50% 40%;
		

	opacity: 0;
	animation: fadeInLine 2s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;

	}
	
	.l2{
		transform: scale(1.5);
	}
	.l3{
		transform: scale(2);
	}
	.l4{
		transform: scale(2.5);
	}
	.l5{
		transform: scale(3);
	}
	.l6{
	transform: scale(3.5);
}
	.l2 svg{
    	filter: blur(.5px);
    stroke-width: .1;
	}
	.l3 svg {
    	filter: blur(1px);
    stroke-width: .09;
	}
	.l4 svg {
    	filter: blur(1.5px);
	stroke-width: .08;
	}
	.l5 svg{
    	filter: blur(2px);
	stroke-width: .07;
	}
	.l6 svg{
	    filter: blur(2.5px);
	stroke-width: .06;
}
	.lines svg{
		stroke-width: .15;
		transform-origin: 0% 0% 0%;
		transform: rotateX(2deg) rotateY(-2deg) rotateZ(50deg) scale3d(2, 2, 1);
	}
	
	.js-block-flipboard .block-front,
.js-block-flipboard .block-back {
  width: 100%; 
  transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.js-block-flipboard .block-front img,
.js-block-flipboard .block-back img {
  width: 100%;
}

.js-block-flipboard .block-front {
  position: relative;
  z-index: 1;
}

.js-block-flipboard .block-back {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.js-block-flipboard.isFlippedTouch .block-front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.js-block-flipboard.isFlippedTouch .block-back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.js-block-flipboard.isFlippedHover:hover .block-front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.js-block-flipboard.isFlippedHover:hover .block-back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

@-webkit-keyframes upNdown {
0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
#icon1 a:hover, #icon2 a:hover, #icon3 a:hover, #icon4 a:hover{
    display:block;
    animation: upNdown 5s linear infinite;
}
#icon1 a:hover img, #icon2 a:hover img, #icon3 a:hover img, #icon4 a:hover img{
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, .8));
}

	#hexagonals{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		
		opacity: 0;
	animation: fadeInLine 2s ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 3s;
	}
	#hexagonals div{
		 position: absolute;
    	top: 0;
    	left: 20%;
    	width: 3%;
    	margin-top: 46%;
	}
	#hexagonals div.m1 img{
		animation: orbit2 10s linear infinite;
	}
	#hexagonals div.m2 img{
		animation: orbit 10s linear infinite;
	}
	#topMask{
        position: absolute;
        bottom: 0;
        width: 100%;
	}

	#btnSet{
    margin: auto;
    width: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 5% 0;
	}
	#btnSet a{
		display: block;
    	transition: all .5s;
		transform: scale(1);
		line-height: 0;
	}
	#btnSet a:hover{
		transform: scale(1.05);
		z-index:1000;
	}
	#topMenu{
	    font-family: 'Yuanti-SC-Light', sans-serif;
    position: absolute;
    left: 24.5%;
    top: 0;
    
    width: 75.5%;
    height: 0;
    padding-bottom: 5.3%;
	}
	#topMenu:before{
	    content: url(/images/bg_menu.svg);
        position: absolute;
        top: 0;
        right: 0;
        width:100%;
	}
	#topMenu > nav{
	position: absolute;
    width: 96%;
    margin-top: 1.6%;
    padding: 0 1% 0 3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color:#888a8c;
    font-size: 19px;
    text-align: center;
    line-height: 1;
	/*line-height: 20px;*/
	}
	.en #topMenu > nav{
	    font-size: 15.2px;
	}
	#topMenu > nav img{
	    height:19px;
	}
	#topMenu > nav a{
	    color:#888a8c;
        text-decoration: none;
        transition: all .3s;
        display: inline-block;
        -webkit-text-stroke: 1px;
	}
	#topMenu > nav a.on{
	    color:#2bade1;
	}
	#topMenu > nav a:hover, #topMenu > nav label:hover{
		transform: scale(1.2);
	}
	    #topMenu input, #divLang{
        display:none;
    }
    #topMenu label{
        cursor: pointer;
        display: inline-block;
        transition: all .3s;
    }
    
    a.small > span {
    font-size: 80%;
    }
    a.large > span {
    font-size: 120%;
    }
    #divLangSet, #divLangSet2{
        position: relative;
    }
    #divLangSet img, #divLangSet2 img{
        cursor: pointer;
    }
    #divLangSet.on, #divLangSet2.on{
        margin-top: -15px;
    }
    #divLangSet:hover  #divLang, #divLangSet2:hover  #divLang2{
        display: block
    }
    #divLang, #divLang2{
        display: none;
        position: absolute;
        left: 50%;
        width: 120px;
        text-align: center;
        transform: translateX(-50%);
        padding-top: 1px;
    }
    #topMenu input:checked ~ #divLang{
        display:block;
    }
	@media only screen and (max-width: 1480px) {
        #topMenu > nav{
            font-size: 1.276vw;
            line-height: 1.276vw;
        }
        
        .en #topMenu > nav{
            font-size: 1.0208vw;
        }
        #topMenu > nav img{
	        height: 1.276vw;
            line-height: 1.276vw;
	    }
	    
	    .en #topMenu > nav img{
	        height: 1.0208vw;
            line-height: 1.0208vw;
	    }
    }
    #footer{
        font-family: 'Yuanti-SC-Light', sans-serif;
        display: grid;
        grid-template-columns: 1fr .2fr 1fr;
        position: relative;
        z-index: 10;
    }
    #footer a{
        color:#FFF;
        text-decoration: none;
    }
    #footer > div:nth-child(1){
        background-image: url(../images/img_bottom_1.svg?v3);
    }
    #footer p{
        color:#FFF;
        font-size: 19px;
        margin:0;
    }
    .en #footer p{
        font-size: 15.2px;
 
    }
    #footer > div:nth-child(1) p:nth-child(1){
        padding-left: 25px;
        margin-top: 8%;
    }
    #footer > div:nth-child(1) p:nth-child(2){
        padding-left: 25px;
    }
    @media only screen and (max-width: 1480px) {
         #footer p{
            font-size: 1.276vw;
        }
        .en #footer p{
            font-size: 1.0208vw;
        }
    }
    #footer > div:nth-child(3){
        background-image: url(../images/img_bottom_3.svg?v3);
    }
    #footer > div:nth-child(3) div{
        margin-right:25px;
        display: grid;
        grid-template-columns: 1fr 1fr .6fr .96fr;
        align-items: center;
        gap: 20px;
        margin-top:10%;
    }
    
    #insideContent{
        background-color: #eff8ef;
        background-image: url(../images/bg_inside_c.svg);
        background-size: 100%;
    }
    #insideContent.noimage{
        background-image: none;
    }
    #contentBox{
        max-width:1110px;
        width: 75%;
        /*max-width:870px;*/
        padding:0 20px;
        margin: auto;
        font-size: 21px;
        color:#4a4a4a;
        position: relative;
        z-index: 1;
    }
    .en #contentBox{
        font-size: 16.8px;
    }
    #contentBox p:last-child{
        margin-bottom:0;
    }
    #insideContent h1{
        font-family: 'Yuanti-SC-Light', sans-serif;
        max-width:1100px;
        width:75%;
        margin:30px auto 0 auto;
        padding:0 20px;
        color:#395ca6;
        font-size:48px;
        font-weight: bold;
        line-height: 1.5;
        position: relative;
        z-index: 1;
    }
    .en #insideContent h1{
        font-size:38.4px;
        -webkit-text-stroke-width: 1px;
    }
    @media only screen and (max-width: 1480px) {
        #insideContent h1{
            font-size: 3.25vw;
        }
        .en #insideContent h1{
            font-size: 2.6vw;
        }
        #contentBox{
            font-size: 1.41vw;
        }
        .en #contentBox{
            font-size: 1.128vw;
        }
    }
    
    .highlightBox{
        display: grid;
        grid-template-columns: 2fr 1fr;
        margin-bottom: 12%;
        transition: all .8s;
        opacity: 0;
        transform: translateY(50px);
    }
    
    .show{
        opacity: 1 !important;
        transform: translateY(0) scale(1) rotate(0) !important;
        
    }
    .highlightBox.re{
        grid-template-columns: 1fr 2fr;
    }
    .highlightBox.re .icon{
        order: -1
    }
    
    .highlightBox:first-child .icon{
        margin-top: -20%;
    }
    
    .highlightBox:not(:first-child) .icon{
        margin-top: 50%;
    }
    .highlightBox .icon img{
        margin-left:20%;
        width:50%;
    }
    
    .highlightBox .text{
        display: grid;
        grid-template-columns: 12fr 88fr;
    }
    
    .highlightBox .text div:nth-child(1){
        color:#62ba5c;
        font-size:164px;
        font-family: "DINOT-Light";
    }
    .highlightBox .text > div:nth-child(2){
        color:#7e8f98;
        font-size:21px;
        margin-top: 20%;
    }
    .highlightBox .text h2{
        font-weight: bold;
        color:#62ba5c;
        font-size:30px;
        margin:0;
    }
    
    @media only screen and (max-width: 1480px) {
        .highlightBox .text div:nth-child(1) {
            font-size: 11vw;
        }
        .highlightBox .text h2 {
            font-size: 2vw;
        }
        .highlightBox .text > div:nth-child(2) {
            font-size: 1.41vw;
        }
    }
    
    		        #frontBackground{
                    position: absolute;
                    overflow: hidden;
                    width: 100%;
                    margin-top:-3%;
		        }
		        #frontBackground img:nth-child(1){
		            position: absolute;
		            left:5%;
                    width: 19.2%;
                    top:0;
                    margin-top: 22%;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }
		        #frontBackground img:nth-child(2){
		            position: absolute;
		            right: 2%;
                    width: 28.4%;
                    top:0;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }
		        #frontBackground img:nth-child(3){
		            position: absolute;
                    right: -9%;
                    width: 52%;
                    top:0;
                    margin-top: -3%;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }
		        #frontBackground img:nth-child(1).show, #frontBackground img:nth-child(2).show, #frontBackground img:nth-child(3).show{
		            transform: rotate(0deg);
                    opacity: 1;
		        }
		        
		        #insideBackground{
                    position: absolute;
                    overflow: hidden;
                    width: 100%;
                    height:100%;
                    z-index: 0;
		        }
		        /*
		        #insideBackground img:nth-child(1){
		            position: absolute;
		            left:10%;
                    width: 20%;
                    top:0;
                    margin-top: 25%;
                    transition: .8s all;
                    transform: rotate(-180deg);
                    opacity: 0;
		        }
		        #insideBackground img:nth-child(2){
		            position: absolute;
		            left: -27.9%;
                    width: 55.8%;
                    top:0;
                    margin-top: 76%;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }
		        #insideBackground img:nth-child(3){
		            position: absolute;
                    right: -32.9%;
                    width: 65.8%;
                    margin-top: 16%;
                    top:0;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }
		        #insideBackground img:nth-child(4){
		            position: absolute;
                    right: 6%;
                    width: 27%;
                    top:0;
                    margin-top: 60%;
                    transition: .8s all;
                    transform: rotate(-180deg);
                    opacity: 0;
		        }
		        #insideBackground img:nth-child(5){
		            position: absolute;
                    right: 8%;
                    width: 66.2%;
                    top:0;
                    margin-top: 72%;
                    transition: .8s all;
                    transform: rotate(180deg);
                    opacity: 0;
		        }*/
		        #insideBackground .show{
		            transform: rotate(0deg) !important;
                    opacity: 1 !important;
		        }
.contentBox ul{
    padding-left: 20px;
}	        
.contentBox h2{
    font-weight: bold;
    color: #62ba5c;
    font-size: 30px;
    margin: 0;
    scroll-margin-top: 1vw;
}

.en .contentBox h2{
    font-size: 24px;
}
.contentBox ::marker {
    color: #62ba5c;
}
@media only screen and (max-width: 1480px) {
    .contentBox h2 {
        font-size: 2vw;
    }
    .en .contentBox h2 {
        font-size: 1.6vw;
    }
}
.contentBox p{
    color: #7e8f98;
}
.en .contentBox p{
}

.remark{
    font-style: italic;
}
#contentBox:after{
    content:"";
    display:block;
    padding-bottom: 12%;
}

.countNum{
    font-family: "DIN Pro Condensed Regular";
}

#btnToBottom{
	position: fixed;
    bottom: 20px;
    right: 20px;
    margin: auto;
    width: 5%;
    z-index: 91;
}
		    
#insideContent.research{
    background-image: url(/images/bg_research.svg);
    position: relative;
}
#insideContent.research #insideBackground img:nth-child(1){
    position: absolute;
    left: 40%;
    width: 23%;
    top: 0;
    margin-top: -6%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
}
#insideContent.research #insideBackground img:nth-child(2){
    position: absolute;
    left: -25%;
    width: 50%;
    top: 0;
    margin-top: 37%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
}
#insideContent.research #insideBackground img:nth-child(3) {
    position: absolute;
    right: -50%;
    width: 100%;
    margin-top: 16%;
    top: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(180deg);
    opacity: 0;
}
#insideContent.research #insideBackground img:nth-child(4) {
    position: absolute;
    right: 12%;
    width: 20%;
    margin-top: 55%;
    top: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(180deg);
    opacity: 0;
}
#pic_research_chart2{
    position: absolute;
    width: 40%;
    top: 0;
    right: 2%;
    margin-top: -10%;
    opacity: 0;
    transition: .8s opacity, .8s transform;
    transform: scale(.5) rotate(20deg);
}
#insideContent.research #contentBox:after{
    content: "";
    display: block;
    padding-bottom: 15%;
}
#pic_research_chart{
    position: absolute;
    width: 60%;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    margin-top: 12%;
}
#pic_research_chart img{
    width: 100%;
    opacity: 0;
    transition: .8s all;
    transform: rotate(-20deg);
}
#pic_research_chart img:nth-child(2){
    position: absolute;
    top:0;
    left:0;
    transform: scale(.5)  rotate(-20deg);
}
#contentBox.research p{
    width:50%;
}
#insideContent.research #t2{
    padding-bottom: 52%;
    padding-top: 6%;
}
#insideContent.research #t3{
    padding-top: 3%;
    padding-bottom: 3%;
}
#insideContent.research .part2{
    padding-bottom: 8%;
}
#insideContent.research .part2 .table{
    position: relative;
    width: 90%;
}
#insideContent.research .countNum{
    position: absolute;
    top: 0;
    text-align: center;
    color: #FFFFFF;
}
#insideContent.research .num1{
    left: 2.2%;
    margin-top: 10.5%;
    width: 20%;
    font-size: 100px;
}
.en #insideContent.research .num1{
        left: 8.2%;
    }
#insideContent.research .num2{
    left: 6.5%;
    width: 4%;
    margin-top: 25.5%;
    font-size: 25px;
}
.en #insideContent.research .num2{
        left: 9.4%;
        margin-top: 26.3%;
    }
#insideContent.research .num3{
    left: 28.5%;
    width: 4%;
    margin-top: 25.5%;
    font-size: 25px;
}
.en #insideContent.research .num3{
    left: 31.3%;
    margin-top: 26.3%;
}
#insideContent.research .num4{
    left: 6.5%;
    width: 4%;
    margin-top: 32.5%;
    font-size: 25px;
}
.en #insideContent.research .num4{
    left: 9.4%;
    margin-top: 33.5%;
}
#insideContent.research .num5{
    left: 28%;
    width: 4%;
    margin-top: 32.5%;
    font-size: 25px;
}
.en #insideContent.research .num5{
     left: 31.3%;
    margin-top: 33.5%;
}
#insideContent.research .num6{
    left: 47%;
    margin-top: 22%;
    font-size: 100px;
    text-align: left;
}
.en #insideContent.research .num6{
    left: 44.8%;
}
#insideContent.research .num7{
    left: 74.7%;
    margin-top: 10.5%;
    width: 14%;
    font-size: 74px;
}
.en #insideContent.research .num7 {
    left: 79.7%;
}
#insideContent.research .num8{
    left: 74.51%;
    width: 4%;
    margin-top: 29.3%;
    font-size: 25px;
}
.en #insideContent.research .num8 {
    left: 77%;
    margin-top: 28.5%;
}
#insideContent.research .num9{
    left: 89%;
    width: 4%;
    margin-top: 29.3%;
    font-size: 25px;
}
.en #insideContent.research .num9 {
    left: 92.1%;
    margin-top: 28.5%;
}
@media only screen and (max-width: 1480px) {
    #insideContent.research .num2, #insideContent.research .num3, #insideContent.research .num4, #insideContent.research .num5, #insideContent.research .num8, #insideContent.research .num9 {
        font-size: 1.7vw;
    }
    #insideContent.research .num1,#insideContent.research .num6, #insideContent.research .num7 {
        font-size: 6.8vw;
    }
}
.research h2{
    font-family: 'Yuanti-SC-Light', sans-serif;
    color: #395ca6;
    font-size: 48px;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}
.en .research h2{
    font-size: 38.4px;
}
@media only screen and (max-width: 1480px) {
    .research h2 {
        font-size: 3.25vw;
    }
    .en .research h2 {
        font-size: 2.6vw;
    }
}
.research.bg2{
    background-image: url(/images/bg_research_p2.svg?v9);
    background-size: 100%;
}

#insideContent.highlight{
    background-image: url(/images/bg_highlight.svg?v6);
    position: relative;
    background-size: cover;
}
#insideContent.highlight #insideBackground > img:nth-child(1){
    position: absolute;
    left: 40%;
    width: 60%;
    top: 0;
    margin-top: 12%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
}
#insideContent.highlight #insideBackground > img:nth-child(2){
    position: absolute;
    left: -5%;
    width: 22%;
    top: 0;
    margin-top: 62%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
}
#insideContent.highlight #insideBackground > img:nth-child(3) {
    position: absolute;
    left: 2%;
    width: 35%;
    margin-top: 95%;
    top: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(180deg);
    opacity: 0;
}
#insideContent.highlight #insideBackground > img:nth-child(4) {
    position: absolute;
    right: -25%;
    width: 50%;
    margin-top: 170%;
    top: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(180deg);
    opacity: 0;
}

#contentBox.concept{
    /*color: #7e8f98;*/
    font-size: 21px;
}
.en #contentBox.concept{
    font-size: 16.8px;
}
#contentBox.concept .tit{
    background:#FFFFFF;
    color: #395ca6;
    margin-left: -1%;
    margin-top: 3%;
    padding: 1% 5% 1% 6%;
    display: inline-block;
    border-radius: 0 100px 100px 0;
    font-size: 25px;
    position: relative;
}
/*
.en #contentBox.concept .tit{
    font-size: 20px;
}*/
#contentBox.concept .tit sup{
    vertical-align: initial;
    font-size: 81px;
    font-family: "Arial";
    font-weight: bold;
    position: absolute;
    bottom: 20%;
    top:0;
    margin-top:-3vw;
    left: .5vw;
}
#contentBox.concept .tit.re{
    margin-left: 0;
    padding: 1% 5% 1% 7%;
    border-radius: 100px 0 0 100px;
    text-align: left;
}
#contentBox.concept .tit.re sup{
    left: 1.5vw
}
.en #contentBox.concept .tit.re sup{
        left: 1.5vw;
}
#contentBox.concept .p1{
    margin-top:5%;
    position: relative;
}
#contentBox.concept .p1 p{
    width: 45%;
    text-align: justify;
}
#contentBox.concept .p1 .pic{
    position: absolute;
    top: 0;
    left: 55%;
    width: 50%;
    margin-top: -30%;
    opacity: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(-20deg);
}
#contentBox.concept .group{
    display: grid;
    font-size: 18px;
    gap: 15px;
    width: 90%;
}
.en #contentBox.concept .group{
    font-size: 14.4px;
}
#contentBox.concept .group > div {
    display: grid;
    grid-template-columns: 1fr 4fr;
    padding: 1vw;
    gap: 1vw;
    border-radius: 1500px 30vw 30vw 1500px;
    text-align: justify;
    align-items: center;
    color: #FFFFFF;
}
#contentBox.concept .group > div.right {
    grid-template-columns: 4fr 1fr;
    border-radius: 30vw 1500px 1500px 30vw;
}
#contentBox.concept .group > div.tit{
    display:block;
    border-radius:0;
    background: transparent;
    margin:0;
    padding:0;
    margin-bottom:0;
    color: #395ca6;
    font-weight: bold;
}
#contentBox.concept .group > div > div span{
    display:block;
    border-radius:0;
    color:#FFFFFF;
    background: transparent;
    margin:0;
    padding:0;
    font-weight: bold;
    border-bottom: 1px solid #FFFF;
    margin-bottom: 10px;
    padding-bottom: 10px;
}
#contentBox.concept .group > div:nth-child(2) {
    background: #64a367;
}
#contentBox.concept .group > div:nth-child(3){
    background: #696ba5;
}

#contentBox.concept .group > div:nth-child(5){
    background: #b7b63d;
}

#contentBox.concept .group > div:nth-child(6){
    background: #4baadb;
}
@media only screen and (max-width: 1480px) {
    
    #contentBox.concept{
        font-size: 1.41vw;
    }
    #contentBox.concept .tit{
        font-size: 1.7vw;
    }
    #contentBox.concept .tit sup{
        font-size: 5.5vw;
        left: 1vw;
    }
    #contentBox.concept .group{
        font-size: 1.22vw;
    }
    
    .en #contentBox.concept{
        font-size: 1.128vw;
    }
    /*
    .en #contentBox.concept .tit{
        font-size: 1.36vw;
    }*/
    .en #contentBox.concept .tit sup{
        font-size: 4.4vw;
        left: 1.5vw;
        margin-top: -2.5vw;
    }
    .en #contentBox.concept .group{
        font-size: 0.976vw;
    }
}
#contentBox.concept .alignRight{
    text-align: right;
}
#contentBox.concept .p2{
    margin-top:12%;
    position: relative;
}
#contentBox.concept .p2 p{
    text-align: justify;
    width: 42%;
    margin-right: 0;
    margin-left: 58%;
}
#insideBackground .p2, #insideBackground .p3{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#contentBox.concept .p2 .pic{
    position: absolute;
    top: 0;
    left: 5%;
    width: 50%;
    margin-top: -10%;
    opacity: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(-20deg);
}
.en #contentBox.concept .p2 .pic{
    left: -5%;
}
#contentBox.concept .p3{
    margin-top:12%;
    position: relative;
}
#contentBox.concept .p3 p{
    text-align: justify;
    width: 65%;
}
#contentBox.concept .p3 p.right{
    margin-left:50%;
    width:50%;
}
#contentBox.concept .p3 .pic{
    position: absolute;
    top: 0;
    right: -5%;
    width: 35%;
    margin-top: 5%;
    opacity: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(-20deg);
}
#contentBox.concept .point{
    display:block;
    color:#395ca5;
}
#contentBox.concept .p4{
    margin-top:12%;
    position: relative;
}
#contentBox.concept .p4 p{
    text-align: justify;
    width: 50%;
    margin-right: 0;
    margin-left: 50%;
}
#insideBackground .p4{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#contentBox.concept .p4 .pic{
    position: absolute;
    top: 0;
    left: -10%;
    width: 55%;
    margin-top: -35%;
    opacity: 0;
    transition: .8s opacity, .8s transform;
    transform: rotate(-20deg);
}
#contentBox.concept .pic .caption{
    position:absolute;
    color:#FFFFFF;
}
.en #contentBox.concept .pic .caption{
    line-height: 1;
}
#contentBox.concept .p1 .pic .caption:nth-child(2){
    bottom:0;
    margin-bottom:7%;
    left:0;
    right:0;
    text-align: center;
}
#contentBox.concept .p1 .pic .caption:nth-child(3){
    top: 0;
    right: -5%;
    text-align: left;
    width: 25%;
    margin-top: 89%;
    color: #65a367;
}
#contentBox.concept .p2 .pic .caption:nth-child(3){
    top:0;
    left:20%;
    text-align: left;
    margin-top: 52%;
    /*animation: glow 1s infinite alternate;*/
}
.en #contentBox.concept .p2 .pic .caption:nth-child(3){
    left:10%;
    margin-top: 49%;
    
}
@keyframes glow {
    to {
        text-shadow: 0 0 10px #FFFFFF, 0 0 5px #FFFFFF;
    }
}
#contentBox.concept .p2 .pic .animation{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    animation: glow2 2s infinite alternate;
}
#contentBox.concept .p2 .pic .caption:nth-child(4){
    top: 0;
    right: -12%;
    text-align: left;
    width: 20%;
    margin-top: 12%;
    color: #65a367;
}
.en #contentBox.concept .p2 .pic .caption:nth-child(4){
    right: -16%;
    width: 25%;
    margin-top: 5%;
}
#contentBox.concept .p2 .pic .caption:nth-child(5){
    bottom:0;
    margin-bottom:7%;
    left:0;
    right:0;
    text-align: center;
}
#contentBox.concept .p3 .animation{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    animation: glow2 2s infinite alternate;
}
@keyframes glow2 {
    0% {
        opacity: 0;
        filter:  drop-shadow(0 0 0 #FFFF);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 5px #FFFF);
    }
    100% {
        opacity: 0;
        filter:  drop-shadow(0 0 0 #FFFF);
    }
}
#contentBox.concept .p4 .pic .caption:nth-child(2){
    bottom:0;
    margin-bottom:5%;
    left:0;
    right:0;
    text-align: center;
}
#contentBox.concept .p4 .pic .caption:nth-child(3){
    top: 0;
    right: 0%;
    text-align: left;
    width: 25%;
    margin-top: 98%;
    transform: translateY(-50%);
    color: #65a367;
}
@media only screen and (max-width: 768px) {
    #contentBox.concept .p4 .pic .caption:nth-child(3){
        /*color: #4a4a4a;*/
        right: -12%;
        margin-top: 90%;
    }
}
    .Public-Engagement p{
        color:#4a4a4a;
    }
    #insideContent.Public-Engagement{
        background-image: url(/images/bg_Public-Engagement.svg);
        background-size: cover;
    }
    #insideContent.Public-Engagement #insideBackground img:nth-child(1) {
    position: absolute;
    right: 0;
    width: 30%;
    top: 0;
    margin-top: 14%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Public-Engagement #insideBackground img:nth-child(2) {
    position: absolute;
    left: 50%;
    width: 20%;
    top: 0;
    margin-top: 70%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Public-Engagement #insideBackground img:nth-child(3) {
    position: absolute;
    left: 60%;
    width: 70%;
    top: 0;
    margin-top: 75%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Public-Engagement #insideBackground img:nth-child(4) {
    position: absolute;
    left: -12%;
    width: 24%;
    top: 0;
    margin-top: 105%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Public-Engagement #insideBackground img:nth-child(5) {
    position: absolute;
    right: 5%;
    width: 40%;
    top: 0;
    margin-top: 180%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Public-Engagement a{
        color: inherit;
        text-decoration: none;
    }
    .Public-Engagement h2{
        color:#395ca6;
        margin-top: 5.4%;
    }
    .Public-Engagement h2:first-child{
        margin-top:0;
    }
    .Public-Engagement .part_video{
        width:70%;
    }
    .Public-Engagement .part_print{
        width: 60%;
        display: grid;
        grid-template-columns: 1fr .865fr;
        gap: 3vw;
    }
    .Public-Engagement .part_table{
        width: 60%;
        margin-top: 3.6%;
        display:none;
    }
    .Public-Engagement .part_table.on{
        display:block;
    }
    .Public-Engagement .part_table_content{
        margin: 3% 0;
        padding-bottom: 3%;
        border-bottom: 1px solid #FFFFFF;
    }
    .Public-Engagement .part_table_content > div{
        display: grid;
        grid-template-columns: 10vw 1fr;
        padding: .7% 0;
    }
    .Public-Engagement #next + p{
        margin:0;
        width:70%;
    }
    .Public-Engagement.bg{
    background-image: url(/images/bg_research_p2.svg?v9);
    background-size: 100%;
    }
    .Public-Engagement h2{
    padding-top: 3%;
    padding-bottom: 1%;
    }
    .Public-Engagement #form{
        width:70%;
    }
    .Public-Engagement #form .two-columns{
        display:grid;
        grid-template-columns: 1.2fr 1fr;
            gap: 5vw;
    }
    .Public-Engagement #form input, .Public-Engagement #form textarea, .Public-Engagement #form select{
        width: calc(100% - 20px);
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
    .Public-Engagement #form select{
        width: 100%;
    }
    .Public-Engagement #form label{
        padding: 0 5px;
        cursor: pointer;
    }
    .Public-Engagement #form label:first-child{
        padding: 0 5px 0 0;
    }
    .Public-Engagement #form label:has(> input[type="radio"]:checked){
        text-decoration: underline;
    }
    .Public-Engagement #form button{
        border: none;
        background: transparent;
        font-size: 21px;
        cursor: pointer;
    }
    .en .Public-Engagement #form button{
        font-size: 16.8px;
    }
    .Public-Engagement #form #submitBtn{
        width: 100%;
        padding: 10px;
        background-color: #68b07e;
        color: #FFFFFF;
        font-size: 21px;
        border: none;
    }
    .en .Public-Engagement #form #submitBtn{
        font-size: 16.8px;
    }
    @media only screen and (max-width: 1480px) {
    .Public-Engagement #form #submitBtn{
        font-size: 1.41vw;
    }
    .Public-Engagement #form button{
        font-size: 1.41vw;
    }
    .en .Public-Engagement #form #submitBtn{
        font-size: 1.128vw;
    }
    .en .Public-Engagement #form button{
        font-size: 1.128vw;
    }
    }
    .Public-Engagement #form textarea{
        height:10vw;
    }
    .Public-Engagement .error-message {
    color: red;
    font-size: 12px;
    display: block;
    margin-bottom: 20px;
}

.en .Public-Engagement .error-message {
    font-size: 9.6px;
}

    #insideContent.Broad-Land-Use{
        background-image: url(/images/bg_Broad-Land-Use.jpg);
        position: relative;
        overflow: hidden;
    }
    #Broad-Land-Use-map{
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 5.7%;
        z-index: 90;
        width: 55%;
        transition: opacity .8s;
        opacity: 0;
    }
    #Broad-Land-Use-map .animation{
        position: absolute;
        top: 0;
        left:0;
        width:100%;
        animation: glow2 2s 3 alternate;
        opacity: inherit;
        animation-fill-mode: forwards
    }
    .Broad-Land-Us-Icon{
        width: 50%;
        margin-top: 24%;
        z-index:2000;
        position: relative;
        transition: opacity .8s;
        opacity: 0;
    }
    #contentBox.Broad-Land-Use:after{
        padding-bottom: 5%;
    }
    #Broad-Land-Use-map img{
        
    }
    #Broad-Land-Use-map .icon1{
        position: absolute;
        top: 0;
        right: 78%;
        margin-top: 20%;
        width: 28%;
        transform-origin: top right;
    }
    .en #Broad-Land-Use-map .icon1{
        right: 77%;
        width: 32%;
    }
    #Broad-Land-Use-map .icon2{
        position: absolute;
        top: 0;
        right: 60.5%;
        margin-top: 28.5%;
        width: 24%;
        transform-origin: 40% 0%;
    }
    #Broad-Land-Use-map .icon3{
        position: absolute;
        top: 0;
        right: 36%;
        margin-top: 68%;
        width: 36%;
        transform-origin: 90% 0%;
    }
    .en #Broad-Land-Use-map .icon3{
        right: 40%;
        margin-top: 58%;
    }
    #Broad-Land-Use-map .icon4{
        position: absolute;
        top: 0;
        right: 14.5%;
        margin-top: 75%;
        width: 20%;
        transform-origin: 50% 0%;
    }
    .en #Broad-Land-Use-map .icon4{
        right: 16%;
        width: 26%;
    }
    #hexagonals, .lines{
        animation-delay:0s;
    }
    #Broad-Land-Use-map a{
        transition: all .8s;
        display:block;
    }
    #Broad-Land-Use-map a:hover{
        transform: scale(1.05);
    }
    
    
    #insideContent.Contact-Us{
        background-image: url(/images/bg_g.svg?v6);
    }
    .Contact-Us .point{
        display: grid;
        grid-template-columns: 3vw 1fr;
        gap: 1vw;
        align-items: center;
        padding-top:20px;
        align-items: start;
    }
    .Contact-Us .point2{
        display: grid;
        grid-template-columns: 3.9vw 1fr;
        gap: 1vw;
        align-items: baseline;
    }
    .en .Contact-Us .point2{
        grid-template-columns: 7vw 1fr;
    }
    .Contact-Us p{
        color: #4a4a4a;
    }
    #insideContent.Contact-Us #insideBackground img:nth-child(1) {
    position: absolute;
    left: 65%;
    width: 20%;
    top: 0;
    margin-top: 2%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Contact-Us #insideBackground img:nth-child(2) {
    position: absolute;
    left: 80%;
    width: 40%;
    top: 0;
    margin-top: 20%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Contact-Us #insideBackground img:nth-child(3) {
    position: absolute;
    left: 10%;
    width: 40%;
    top: 0;
    margin-top: 30%;
    transition: .8s opacity, .8s transform;
    transform: rotate(-180deg);
    opacity: 0;
    }
    #insideContent.Contact-Us a{
            color: inherit;
    }
    .Contact-Us #contentBox:after {
    content: "";
    padding-bottom: 22%;
    }
    
    #insideContent.Information-Centre{
        background-image: url(/images/bg_g.svg?v6);
    }
    .Information-Centre .point{
        display: grid;
        grid-template-columns: 3vw 1fr;
        gap: 1vw;
        align-items: center;
        padding-top:20px
    }
    .Information-Centre .point2{
        display: grid;
        grid-template-columns: 3.2vw 1fr;
        gap: 1vw;
        align-items: baseline;
    }

    #insideContent.Information-Centre a{
            color: inherit;
    }
    .Information-Centre #contentBox:after {
    content: "";
    padding-bottom: 22%;
    }
    .Information-Centre #contentBox p{
    color: #4a4a4a;
    }
    
    .Public-Engagement nav.sub {
    display: flex;
    margin: auto;
    align-items: center;
    text-align: center;
    position: relative;
}

.Public-Engagement nav.sub a {
    padding: 0 2%;
    display: block;
    text-transform: uppercase;
    color: #FFFFFF;
}
.Public-Engagement nav.sub a:nth-child(1) {
    padding-left: 0;
}
.Public-Engagement nav.sub div {
    border-right: 1px solid #000000;
    padding-bottom: 2%;
}
.Public-Engagement nav.sub a.on {
    font-weight: 600;
}
@media only screen and (max-width: 768px) {
    .Public-Engagement .mobileMenu {
        display: flex !important;
        margin: 5%;
        align-items: center;
    }
        .Public-Engagement .mobileMenu a {
        width: 5%;
        padding: 0 10%;
    }
    .Public-Engagement .mobileMenu h3 {
        padding: 0;
        margin: 0;
        width: 50%;
            text-align: center;
    }
}

 .folding{
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
}
.folding img{
    height:30px;
    width: auto;
    transform: rotate(180deg);
} 
@media only screen and (max-width: 1480px) {
    .folding img{
        font-size: 2vw;
    }
    .en .folding img{
        font-size: 1.6vw;
    }
}
.Public-Engagement .contentBox > p{
    width: 60%;
}
@media only screen and (max-width: 768px) {
    .Public-Engagement .contentBox > p{
        width: 100%;
    }
}
#btnToForm{
    background: #395ca6;
    padding: 5px 10px;
    border-radius: 500px;
    color: #FFFFFF !important;
}
.remark{
    font-size: 15px;
}
.en .remark{
    font-size: 12px;
}
@media only screen and (max-width: 1480px) {
.remark{
    font-size: 1.01vw;
}
.en .remark{
    font-size: 0.8vw;
}
}



.lv1{
    position: relative;
}
.lv2{
    position: absolute;
    background: #FFFFFF;
    padding: 1vw;
    width: 100%;
    left: -1vw;
    display:none;
}
.en .lv2.long{
    width: 100%;
}
.lv2.long{
    width: 150%;
}
.lv2 a{
    display:block !important;
    padding: .3vw 0;
}
.lv1:hover .lv2{
    display:block;
}
#mobileMenu{
    display:none;
}
.sp{
    display:none !important;
}
@media only screen and (max-width: 768px) {
    .sp{
        display:block !important;
    }
    .pc{
        display:none!important;
    }
    #logo {
        margin-top: 3.8%;
        width: 20%!important;
    }
    #mobileMenu{
        display:block;
        position: relative;
        z-index: 91001;
    }
    #mobileMenu img{
        height: 8vw;
        margin-top: 4%;
        position: absolute;
        right: 5%;
        width: 8vw;
        transition: all .5s;
    }
    #mobileMenu.index img{
        filter: brightness(10);
    }
    #mobileMenu.index.off img{
        filter: brightness(1);
    }
    #topMenu > nav {
        display: block;
        font-size: 4vw;
        line-height: 1.5;
        margin-top: 0;
        background-color: #FFFFFF;
        position: fixed;
        width: 42%;
        right: -52%;
        padding: 5vw;
        z-index: 91000;
        transition: right .5s;
        text-align: left;
    }
    .en #topMenu > nav{
        font-size: 3.2vw;
        line-height: 1;
    }
    .en #topMenu > nav br{
        display:none;
    }
    #topMenu > nav.on {
        right:0;
    }
    #topMenu > nav a{
        display:block;
        padding: 5px 0;
    }
    .en #topMenu > nav a{
        padding: 10px 0;
    }
    #black{
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .5);
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
    }
    #topMenu > nav img {
        height: 5vw;
        width: auto;
        margin-top: 2vw;
    }
    /*
    .en #topMenu > nav img {
        height: 4vw;
    }*/
    #divLangSet, #divLangSet2{
        margin-top: 5px;
    }
    #divLangSet img, #divLangSet2 img{
        display:none;
        
    }
    .en #divLangSet, .en #divLangSet2{
        margin-top: 10px;
    }
    #divLangSet label, #divLangSet2 label{
        display:none;
    }
    #divLang, #divLang2{
        position: relative;
        display: block;
        width: 100%;
        text-align: left;
    }
    #divLangSet a, #divLangSet2 a{
        display: inline !important;
    }
    .lv2 {
        display:none !important;
    }
    html.on, body.on {overflow: hidden}
    
    #contentBox{
        font-size: 18px !important
    }
    .en #contentBox{
        font-size: 14.4px !important
    }
    #contentBox, #insideContent h1{
        width: calc(100% - 40px);
    }
    #insideContent h1{
        font-size: 35px;
    }
    .en #insideContent h1{
        font-size: 28px;
    }
    .contentBox h2{
        font-size: 25px;
    }
    .en .contentBox h2{
        font-size: 20px;
    }

    #footer{
        display:block;
        background: #FFFFFF;
    }
    #footer p{
        font-size:15px
    }
    .en #footer p{
        font-size:12px
    }
    #footer div:nth-child(2){
        display:none;
    }
    #footer > div:nth-child(1) {
        background-size: cover;
    }
    #footer > div:nth-child(1) p:nth-child(1) {
    padding-top: 20px;
    margin-top: 0;
    }
    #footer > div:nth-child(1) p:nth-child(2) {
    padding-bottom: 20px;
    }
    #footer > div:nth-child(3) {
    background: #FFFFFF;
    background-image: none !important;
    }
    #footer > div:nth-child(3) div{
            margin: 25px;
    }
    
    .Contact-Us .point{
        grid-template-columns: 35px 1fr;
    }
    .Contact-Us .point2 {
        grid-template-columns: 50px 1fr;
    }
    .en .Contact-Us .point2{
        grid-template-columns: 90px 1fr;
    }
    #insideContent.Contact-Us {
        background-size: cover;
    }
    .Contact-Us #contentBox:after {
        content: "";
        padding-bottom: 10%;
    }
    
    .Public-Engagement .part_video {
        width:100%;
    }
    .Public-Engagement .part_print {
        width: 100%;
    }
    .Public-Engagement .part_table {
        width: 100%;
    }
    .Public-Engagement .part_table_content > div {
        grid-template-columns: 120px 1fr;
    }
    .Public-Engagement #form {
        width: 100%;
    }
    .Public-Engagement #form #submitBtn {
        font-size: 18px;
    }
    .en .Public-Engagement #form #submitBtn {
        font-size: 14.4px;
    }
    .Public-Engagement #video {
        margin-bottom: 3%;
    }
    .Public-Engagement #next + p {
        width: 100%;
    }

    #insideContent.highlight {
        background-position: center;
    }
    #contentBox.concept {
       overflow: hidden;
    }
    #contentBox.concept .tit {
        font-size: 20px;
        padding: 1% 5% 1% 30px;
    }
    .en #contentBox.concept .tit {
        font-size: 16px;
    }
    #contentBox.concept .tit sup {
        font-size: 45px;
    }
    .en #contentBox.concept .tit sup {
        font-size: 36px;
    }
    #contentBox.concept .caption{
        font-size: 15px !important
    }
    .en #contentBox.concept .caption{
        font-size: 12px !important
    }
    #contentBox.concept .p1 p{
        width:100%;
    }
    #contentBox.concept .group {
        font-size: 18px;
        width:100%;
    }
    .en #contentBox.concept .group {
        font-size: 14.4px;
    }
    #contentBox.concept .alignRight{
        text-align:left;
    }
    #contentBox.concept .group > div{
        grid-template-columns: 2fr 4fr;
        border-radius: 30vw 10vw 10vw 30vw;
        padding: 10px;
    }
    #contentBox.concept .group > div.right {
        grid-template-columns: 4fr 2fr;
        border-radius: 10vw 30vw 30vw 10vw;
        padding: 10px;
    }
    #contentBox.concept .tit.re{
        margin-left: -1%;
        border-radius: 0 100px 100px 0;
        padding: 1% 5% 1% 30px;
    }
    #contentBox.concept .tit.re sup {
        right:auto;
        left: 2%;
    }
    #contentBox.concept .p2 p{
        width:100%;
        margin-left: 0;
    }
    #contentBox.concept .p3 p{
        width:100%;
    }
    #contentBox.concept .p3 p.right {
        width: 100%;
        margin-left:0;
    }
    #contentBox.concept .p4 p {
        width: 100%;
        margin-left: 0;
    }
    .en #contentBox.concept .p4 .pic{
        left: 0;
        width: 95%;
        margin-bottom: 15%;
    }
    .en #contentBox.concept .p4 .pic .caption:nth-child(3) {
        right: -5%;
        margin-top: 100%;
        width: 25%;
    }
    #contentBox.concept .p1 .pic, #contentBox.concept .p2 .pic, #contentBox.concept .p3 .pic, #contentBox.concept .p4 .pic{
        position: relative;
        top: 0;
        left: 5%;
        width: 90%;
        margin-top: 5%;
    }
    #insideContent.Broad-Land-Use h1 {
        color: #FFF;
    }
    #insideContent.Broad-Land-Use {
        background-image: url(/images/bg_Broad-Land-Use_m.jpg);
        background-size: 100% 100%;
    }
    #Broad-Land-Use-map {
        margin-top: calc(27% + 52px);
        width: 90%;
    }
    .Broad-Land-Us-Icon {
        width: 100%;
        margin-top: 95%;
    }
    
    #insideContent.research {
        background-size: cover;
    }
    #contentBox.research p {
        width: 100%;
    }
    #pic_research_chart2 {
        position: relative;
        width: 90%;
        left: 5%;
        margin-top: 5%;
    }
    #pic_research_chart{
        position: relative;
        width: 90%;
        margin-top:0;
    }
    #insideContent.research #t2 {
        padding-bottom: 0;
    }
    #insideContent.research .num1 {
        left: 26%;
        margin-top: 18.5%;
        font-size: 15vw;
    }
    .en #insideContent.research .num1 {
    left: 36%;
}
    #insideContent.research .num2 {
        left: 26.5%;
        margin-top: 44%;
        font-size: 4vw;
    }
.en #insideContent.research .num2 {
    left: 31.5%;
    margin-top: 45.5%;
}
    #insideContent.research .num3 {
        left: 65%;
        margin-top: 44%;
        font-size: 4vw;
    }
.en #insideContent.research .num3 {
    left: 69.5%;
    margin-top: 45.5%;
}
    #insideContent.research .num4 {
        left: 26.5%;
        margin-top: 56%;
        font-size: 4vw;
    }
    .en #insideContent.research .num4 {
    left: 31.5%;
    margin-top: 57.5%;
}
    #insideContent.research .num5 {
        left: 64%;
        margin-top: 56%;
        font-size: 4vw;
    }
    .en #insideContent.research .num5 {
    left: 69.5%;
    margin-top: 57.5%;
}
    #insideContent.research .num6 {
        left: 8%;
        margin-top: 103%;
        font-size: 15vw;
    }
    .en #insideContent.research .num6 {
    left: 3.5%;
    }
    #insideContent.research .num7 {
        left: 60%;
        margin-top: 82%;
        width: 14%;
        font-size: 15vw;
    }
    .en #insideContent.research .num7 {
    left: 67%;
    }
    #insideContent.research .num8 {
        left: 56.5%;
        width: 4%;
        margin-top: 115.5%;
        font-size: 4vw;
    }
    .en #insideContent.research .num8 {
    left: 60.2%;
    margin-top: 115%;
}
    #insideContent.research .num9 {
        left: 82.6%;
        width: 4%;
        margin-top: 115.5%;
        font-size: 4vw;
    }
    .en #insideContent.research .num9 {
    left: 87.4%;
    margin-top: 115%;
}
    
    #frontContent #topMenu:before {
         content: "";
    }
    #main{
        overflow: hidden;
    }
    #btnSet {
        width: 90%;
        grid-template-columns: 1fr 1fr;
    }
    #frontContent {
        background-size: cover;
    }
    
    .research h2 {
        font-size: 25px;
    }
    .remark {
        font-size: 12px;
        line-height:normal;
    }
    #bgLogo {
    width: 150%;
    }
    #logo.inside{
        margin-top:3.8%
    }
    #insideContent.highlight #insideBackground > img:nth-child(1){
        left: 80%;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .video {
    height: 0;
    padding-bottom: 39.5%;
    position: relative;
}
  .video iframe, .video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.nowrap{
    white-space: nowrap
}


@media (prefers-color-scheme: dark) {
:root{
    --native-dark-brightness: 1 !important;
    --native-dark-visited-link-color: #c76ed7;
}
#footer a {
    color: #FFF !important;
}
#topMenu > nav a {
    color: #888a8c !important;
}
#footer {
    background: #FFFFFF;
}
img {
    filter: none !important;
}
}
#divLangSet a.selected, #divLangSet2 a.selected{
color: #1a94bc !important;
}

body.large #topMenu > nav{
    font-size: 20.9px;
}
body.large #insideContent h1{
    font-size: 52.8px;
}
body.large #contentBox{
    font-size: 23.1px;
}
body.large #footer p {
    font-size: 20.9px;
}
body.large #contentBox.concept .tit {
    font-size: 27.5px;
}
body.large #contentBox.concept .group {
    font-size: 19.8px;
}
body.large .contentBox h2{
    font-size: 33px;
}

body.small #topMenu > nav{
    font-size: 17.1px;
}
body.small #insideContent h1{
    font-size: 43.2px;
}
body.small #contentBox{
    font-size: 18.91px;
}
body.small #footer p {
    font-size: 17.1px;
}
body.small #contentBox.concept .tit {
    font-size: 22.5px;
}
body.small #contentBox.concept .group {
    font-size: 16.2px;
}
body.small .contentBox h2{
    font-size: 27px;
}

body.large #topMenu > nav{
    font-size: 20.9px;
}
body.large #insideContent h1{
    font-size: 52.8px;
}
body.large #contentBox{
    font-size: 23.1px;
}
body.large #footer p {
    font-size: 20.9px;
}
body.large #contentBox.concept .tit {
    font-size: 27.5px;
}
body.large #contentBox.concept .group {
    font-size: 19.8px;
}
body.large .contentBox h2{
    font-size: 33px;
}

body.small #topMenu > nav{
    font-size: 17.1px;
}
body.small #insideContent h1{
    font-size: 43.2px;
}
body.small #contentBox{
    font-size: 18.91px;
}
body.small #footer p {
    font-size: 17.1px;
}
body.small #contentBox.concept .tit {
    font-size: 22.5px;
}
body.small #contentBox.concept .group {
    font-size: 16.2px;
}
body.small .contentBox h2{
    font-size: 27px;
}

/*EN*/
body.large.en #topMenu > nav{
    font-size: 16.72px;
}
body.large.en #insideContent h1{
    font-size: 42.24px;
}
body.large.en #contentBox{
    font-size: 18.48px;
}
body.large.en #footer p {
    font-size: 16.72px;
}
body.large.en #contentBox.concept .tit {
    font-size: 22px;
}
body.large.en #contentBox.concept .group {
    font-size: 15.84px;
}
body.large.en .contentBox h2{
    font-size: 26.4px;
}

body.small.en #topMenu > nav{
    font-size: 13.68px;
}
body.small.en #insideContent h1{
    font-size: 34.56px;
}
body.small.en #contentBox{
    font-size: 15.128px;
}
body.small.en #footer p {
    font-size: 13.68px;
}
body.small.en #contentBox.concept .tit {
    font-size: 18px;
}
body.small.en #contentBox.concept .group {
    font-size: 12.96px;
}
body.small.en .contentBox h2{
    font-size: 21.6px;
}
@media only screen and (max-width: 1480px) {
    body.large #insideContent h1{
        font-size: 3.575vw;
    }
    body.large #contentBox {
        font-size: 1.551vw;
    }
    body.large #footer p {
        font-size: 1.4036vw;
    }
    body.large #topMenu > nav{
        font-size: 1.4036vw;
    }
    body.large #contentBox.concept .tit {
        font-size: 1.87vw;
    }
    body.large #contentBox.concept .group {
        font-size: 1.342vw;
    }
    body.large .contentBox h2{
        font-size: 2.2vw;
    }
    
    body.small #insideContent h1{
        font-size: 2.925vw;
    }
    body.small #contentBox {
        font-size: 1.269vw;
    }
    body.small #footer p {
        font-size: 1.1484vw;
    }
    body.small #topMenu > nav{
        font-size: 1.1484vw;
    }
    body.small #contentBox.concept .tit {
        font-size: 1.53vw;
    }
    body.small #contentBox.concept .group {
        font-size: 1.098vw;
    }
    body.small .contentBox h2{
        font-size: 1.8vw;
    }
    
    /*EN*/
    body.large.en #insideContent h1{
        font-size: 2.86vw;
    }
    body.large.en #contentBox {
        font-size: 1.2408vw;
    }
    body.large.en #footer p {
        font-size: 1.12288vw;
    }
    body.large.en #topMenu > nav{
        font-size: 1.12288vw;
    }
    body.large.en #contentBox.concept .tit {
        font-size: 1.496vw;
    }
    body.large.en #contentBox.concept .group {
        font-size: 1.0736vw;
    }
    body.large.en .contentBox h2{
        font-size: 1.76vw;
    }
    
    body.small.en #insideContent h1{
        font-size: 2.34vw;
    }
    body.small.en #contentBox {
        font-size: 1.0152vw;
    }
    body.small.en #footer p {
        font-size: 0.91872vw;
    }
    body.small.en #topMenu > nav{
        font-size: 0.91872vw;
    }
    body.small.en #contentBox.concept .tit {
        font-size: 1.224vw;
    }
    body.small.en #contentBox.concept .group {
        font-size: 0.8784vw;
    }
    body.small.en .contentBox h2{
        font-size: 1.44vw;
    }
}
@media only screen and (max-width: 768px) {
    body.large #insideContent h1 {
        font-size: 38.5px;
    }
    body.large #contentBox {
        font-size: 19.8px !important;
    }
    body.large #footer p {
        font-size: 16.5px;
    }
    body.large #contentBox.concept .tit {
        font-size: 22px;
    }
    body.large #contentBox.concept .group {
        font-size: 19.8px;
    }
    body.large .contentBox h2{
        font-size: 27.5px;
    }
    
    body.small #insideContent h1 {
        font-size: 31.5px;
    }
    body.small #contentBox {
        font-size: 16.2px !important;
    }
    body.small #footer p {
        font-size: 13.5px;
    }
    body.small #contentBox.concept .tit {
        font-size: 18px;
    }
    body.small #contentBox.concept .group {
        font-size: 16.2px;
    }
    body.small .contentBox h2{
        font-size: 22.5px;
    }
    
    body.large #topMenu > nav{
        font-size: 4.4vw;
    }
     body.small #topMenu > nav{
        font-size: 3.6vw;
    }
    body.large.en #topMenu > nav{
        font-size: 3.52vw;
    }
     body.small.en #topMenu > nav{
        font-size: 2.88vw;
    }
    
    /*EN*/
    body.large.en #insideContent h1 {
        font-size: 30.8px;
    }
    body.large.en #contentBox {
        font-size: 15.84px !important;
    }
    body.large.en #footer p {
        font-size: 13.2px;
    }
    body.large.en #contentBox.concept .tit {
        font-size: 17.6px;
    }
    body.large.en #contentBox.concept .group {
        font-size: 15.84px;
    }
    body.large.en .contentBox h2{
        font-size: 22px;
    }
    
    body.small.en #insideContent h1 {
        font-size: 25.2px;
    }
    body.small.en #contentBox {
        font-size: 12.96px !important;
    }
    body.small.en #footer p {
        font-size: 10.8px;
    }
    body.small.en #contentBox.concept .tit {
        font-size: 14.4px;
    }
    body.small.en #contentBox.concept .group {
        font-size: 12.96px;
    }
    body.small.en .contentBox h2{
        font-size: 18px;
    }
}