html, body {
		min-height: 100%;
		padding-bottom: 56px;
	}
	body {
		background: url(/sites/default/files/2022-05/universe.jpg	) top center no-repeat;
		background-size: cover;
		font-family: sans-serif;
	}
	.pc-overview h1 {
		color: white;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 46px;
		padding: 128px 0 56px 0;
	}
	.pc-overview h1 img{
		padding: 32px 0;
	}
	.pc-overview h1 img, 
	.pc-overview h1 span {
		display: block;
	}
	.pc-overview h1 span {
		font-size: 50%;
	}
	.pc-overview ul {
		display: block;
		width: 56%;
		height: auto;
		border: 1px solid #B6B9D5;
		border-radius: 100%;
		position: relative;
		list-style-type: none;
		aspect-ratio: 2 / 2;
		padding: 0;
		margin: 0 auto;
	}
		.pc-overview ul:after {
			content: "";
			border: 1px solid #B6B9D5;
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 50%;
			z-index: 0;
			opacity: .75;
			transform: scale(.75);
			top: 0;
			left: 0;
		}
		.pc-overview ul:before {
			content: "";
			border: 1px solid #B6B9D5;
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 50%;
			z-index: 0;
			opacity: .5;
			transform: scale(.5);
			top: 0;
			left: 0;
		}
	.pc-overview ul li {
		width: fit-content;
		position: absolute;
		z-index: 5;
		padding: 8px 16px 8px 8px;
		background: none;
		display: flex;
		align-items: center;
		column-gap: 8px;
		transition: all .25s ease-in-out;

	}
	.pc-overview ul li img {
		width: 82px;
		height: 82px;
    	float: left;
	}
	.pc-overview {
		max-width: 1122px;
		margin: 0 auto;
	}
	.pc-overview-content {
		background: #F3F6FA;
		border-radius: 9px;
		padding: 60px 60px 100px 60px;
		position: relative;
	}
	.pc-overview-content:after {
		content: "";
    background: url(/sites/default/files/2020-12/world.png);
    background-size: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
    z-index: 0;
	}
	.flag-c-c span {
		color: #001489;
		font-weight: bolder;
	}
	.flag-c-c a {
		color: #001489;
		border: 2px solid #001489;
		text-decoration: none;
		border-radius: 8px;
		line-height: 24px;
		font-size: 13px;
		padding: 2px 16px;
	}
	.flag-c-c a:hover {
		background: #f3f6fa;
	}
	.pc-overview li.spec {
	    position: absolute;
	    top: 0;
	    align-items: flex-start;
	    width: 0%;
	    height: 50%;
	    left: 50%;
	    transform-origin: bottom;
			padding: 1px;
	}
	.spec .flag-s {
		position: absolute;
		width: 42px;
		transition: all .25s ease;
		display: flex;
		align-items: center;
		height: 0%;
		border-radius: 18px;
		left: 0;
		z-index: -1;
	}
	.spec-c:hover .flag-s {
		position: absolute;
		padding-left: 102px;
		background: white;
		z-index: -1;
		width: 136px;
		height: 82px;
		transition: all .25s ease;
		box-shadow:5px 5px 15px #8080801a;
	}
	.spec .flag-s .flag-c-c {
		transition: all .5s ease;
	}
	.spec-c:hover .flag-s .flag-c-c {
		transition: all .05s ease;
	}
	.flagname {
	    position: absolute;
	    bottom: -18px;
	    visibility: visible;
	    pointer-events: none;
	    color: #001489;
	    font-weight: bolder;
	    transition: all .15s ease-in-out;
	    transform: scale(1) translate(0, 0);
	    opacity: 1;
	    z-index: 0;
	    left: 0;
			width: max-content;
	    text-align: center;
	    min-width: 100%;
	}
	li .spec-c:hover .flagname {
		visibility: hidden;
		transition: all .15s ease-in-out;
		transform: scale(.5) translate(0, -40px);
		opacity: 0;
		z-index: -1;
	}
	li .flag-c-c {
		transition: all .25s ease-in-out;
		display: flex;
		flex-direction: column;
		gap: 10px;
		opacity: 0;
		transform: scale(.15);
	}
	.spec-c:hover .flag-c-c {
		float: left;
		transition: all .25s ease-in-out;
		visibility: visible;
		opacity: 1;
		transform: scale(1) translate(0, 0);
		animation: .35s ease 0s normal forwards 1 fadein;
	}
	@keyframes fadein {
		0% { opacity:0; }
		40% { opacity:0; }
		66% { opacity:0.7; }
		100% { opacity:1; }
	}

	.spec-c {
	    position: absolute;
	    left: -41px;
	    top: -41px;
	}
	li.my.spec {
    	transform: rotateZ(-5deg);
	}
	li.my.spec .spec-c {
		transform: rotateZ(5deg);
	}
	li.me.spec {
    	transform: rotateZ(-150deg);
	}
	li.me.spec .spec-c {
		transform: rotateZ(150deg);
	}
	li.ph.spec {
		transform: rotate(65deg);
	}
	li.ph.spec .spec-c {
		transform: rotateZ(-65deg);
	}
	li.tw.spec {
			transform: rotateZ(-100deg);
			z-index: 8;
	}
	li.tw.spec .spec-c {
		transform: rotateZ(100deg);
	}

	li.cn.spec {
	    transform: rotateZ(-65deg);
			z-index: 11;
	}
	li.cn.spec .spec-c {
		transform: rotateZ(65deg);
	}

/* --------------------------------- */
		li.sk.spec {
				transform: rotateZ(-335deg);
		}
		li.sk.spec .spec-c {
			transform: rotateZ(335deg);
		}
		li.th.spec {
				transform: rotateZ(-215deg);
		}
		li.th.spec .spec-c {
			transform: rotateZ(215deg);
		}


/* -------------------------------------- */
	li.hk.spec {
			transform: rotateZ(-35deg);
	}
	li.hk.spec .spec-c {
		transform: rotateZ(35deg);
	}
	li.id.spec {
			transform: rotateZ(-275deg);
	}
	li.id.spec .spec-c {
		transform: rotateZ(275deg);
	}
	li.sg.spec {
			transform: rotateZ(-155deg);
			z-index: 9;
	}
	li.sg.spec .spec-c {
		transform: rotateZ(155deg);
	}
/* ------------------ */
/* 1 */

/* 2 */
	li.tw.spec .spec-c,
	li.sk.spec .spec-c,
	li.th.spec .spec-c,
	li.sg.spec .spec-c {
		top: 12%;
	}
/* 3 */
	li.sg.spec .spec-c,
	li.id.spec .spec-c,
	li.hk.spec .spec-c {
		top:39%;
	}
	/* ------------------------ */
	li.spec .spec-c {
		height: 82px;
		display: block;
	}
	@media screen and (max-width: 1920px) {
		.pc-overview h1 {
		    padding: 18px 0 6px 0;
		}
		.pc-overview h1 img {
			max-width: 60%;
			padding: 24px 0;
		}
	}
	@media screen and (max-width: 1367px) {
		.pc-overview h1 {
		    padding: 0;
				font-size: 36px;
			}
		.pc-overview h1 img {
	    max-width: 50%;
			padding: 16px 0;
		}
		.pc-overview {
		  max-width: 980px;
		  margin: 0 auto;
		}
		li.my.spec {
    	transform: rotateZ(-15deg);
		}
		li.my.spec .spec-c {
    	transform: rotateZ(15deg);
		}
		.spec-c:hover .flag-s {
      padding-left: 86px;
		}
	}
	@media screen and (max-width: 769px) {
		.pc-overview-content ul {
	    width: 76%;
		}
	}
	@media screen and (max-width: 600px) {
		.pc-overview ul {
			display: block;
			width: 100%;
			height: 100%;
			border: 1px solid #B6B9D5;
			margin: 0 auto;
			border-radius: 100%;
			position: relative;
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
		.pc-overview ul:before {
			content: "";
			border: 1px solid #B6B9D5;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
			z-index: 0;
			opacity: .5;
			transform: scale(0.70);
		}
		.pc-overview ul:after {
			content: "";
			border: 1px solid #B6B9D5;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50%;
			z-index: 0;
			opacity: .5;
			transform: scale(0.40);
		}
	}

	@media screen and (max-width: 460px) {
		.pc-overview-content {
		    padding: 60px 20px 100px 20px;
		}
		.pc-overview-content ul {
		    width: 90%;
		    padding: 0;
        margin: 0 auto;
		}
		.pc-overview ul li img {
	    width: 52px;
	    height: 52px;
	    float: left;
		}
		.pc-overview ul li img {
	    width: 52px;
	    height: 52px;
		}
		.spec-c:hover .flag-s {
		    position: absolute;
		    padding-left: 62px;
		    background: white;
		    z-index: -1;
		    width: 126px;
		    height: 72px;
		    transition: all .25s ease;
		    box-shadow: 5px 5px 15px #8080801a;
		}
		.spec-c:hover .flag-s {
		    position: absolute;
		    background: white;
		    z-index: -1;
		    width: max-content;
		    height: fit-content;
		    transition: all .25s ease;
		    box-shadow: 5px 5px 15px #8080801a;
		    padding: 50px 10px 10px 10px;
		}
		li.spec {
		    top: 15px;
		}
		li.spec {
		    position: absolute;
		    top: 15px;
		    align-items: flex-start;
		    width: 0%;
		    height: 50%;
		    left: 50%;
		    transform-origin: bottom;
		    padding: 1px;
		}
		li .flag-c-c {
		    grid-row: 2;
		}
		span.flagname {
		    font-size: 12px;
		    bottom: 12px;
		    left: 0;
		}
		span.flagname {
		    font-size: 12px;
		    bottom: 19px;
		    left: 0px;
		}
		.spec-c:hover .flag-s {
		    left: -73%;
		}
		.flag-c-c span {
			    font-size: 14px;
			    text-align: center;
			    padding-top: 4px;
			}
			li.ph.spec {
			    z-index: 9;
			}
			li.hk.spec {
			    z-index: 14;
			}
			li.my.spec {
			    z-index: 12;
			}
			li.sg.spec {
					z-index: 11;
			}
			li.tw.spec {
			    transform: rotateZ(-100deg);
			    z-index: 13;
			}
			li.tw.spec .spec-c {
				  transform: rotateZ(100deg);
			}
			li.sg.spec {
          transform: rotateZ(-145deg);
      }
			li.sg.spec .spec-c {
			    transform: rotateZ(145deg);
			}
			li.me.spec {
      transform: rotateZ(-160deg);
      }
      li.me.spec .spec-c {
			 transform: rotateZ(160deg);
		  }
		  li.ph.spec {
        transform: rotate(95deg);
      }
      li.ph.spec .spec-c {
			 transform: rotateZ(-95deg);
		  }
      li.tw.spec .spec-c, li.sk.spec .spec-c, li.th.spec .spec-c, li.sg.spec .spec-c {
        top: 0%;
      }
      li.sg.spec .spec-c {
        top: 29%;
      }
      .ph .spec-c:hover .flag-s {
          left: -133%;
      }
      .cn .spec-c:hover .flag-s {
          left: -33%;
      }
      li.sk.spec {
         z-index: 12;
      }
      li.my.spec {
          z-index: 15;
      }
      li.cn.spec {
          z-index: 15;
      }
      li.id.spec {
        z-index: 11;
      }
      li.ph.spec {
          z-index: 12;
      }
      li.ph.spec .spec-c {
          top: -31px;
      }
      .pc-overview h1 img {
          max-width: 80%;
          padding: 16px 0;
      }
      .pc-overview h1 {
          padding: 0;
          font-size: 26px;
      }
	}
	
	a.dissabled-btn {
    background: #e8e8e8;
    color: gray;
    border: 1px solid gray;
  }
  .pc-overview ul li:hover,
 .country_active {
   z-index: 20;
 }