@font-face {
    font-family:'Calibri';
    src: url('../fonts/Calibri.eot');
    src: url('../fonts/Calibri?#iefix') format('embedded-opentype'),
        url('../fonts/Calibri.woff') format('woff'),
		url('../fonts/Calibri.ttf'),
        url('../fonts/Calibri.svg#Calibri') format('svg');
    font-weight:normal;
    font-style: normal;
}
@font-face {
  font-family: 'BrandonGrotesque-Bold';
  src: url('../fonts/BrandonGrotesque-Bold.eot');
  src: url('../fonts/BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold') format('svg'),
       url('../fonts/BrandonGrotesque-Bold.ttf') format('truetype'),
       url('../fonts/BrandonGrotesque-Bold.woff') format('woff'),
       url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*{
	box-sizing: border-box;
}
body{  
    padding: 0; 
    margin: 0;  
    line-height: 23px;
    overflow: hidden; 
	line-height: 1.4;
	font-size:1.25rem;
	background:#150ba1;
	background-size:100%;
    font-family:'Arial'; 
	text-size-adjust:none; 
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}
body.bg{background:#def8ed;}
h1, h2, h3, h4, h5, h6, ul, ol, ul li, ol li {padding:0; margin:0; list-style:none;}
img{max-width:100%;}
.hide{display: none;}
.main_container{
	position: absolute;
	width: 100%;
	height: 100%; 	
}
 
.main_sec{position:fixed; width:100%; height:100%;  overflow-x: hidden; overflow-y:auto;}
.bg1{background:url(../images/iceberg.png) no-repeat top right; background-size:100%; position:absolute; width:100%; min-height:100%;} 
.bg2{ ackground:url(../images/sea_ice1_top.png) no-repeat top right; background-size:100%; position:absolute; width:100%; min-height:100%;}
.bg3{background:url(../images/bg.jpg) no-repeat top center #150ba1; background-size:100%; position:absolute; width:100%; min-height:100%;}

.bg1.position,.bg2.position,.bg3.position{min-height:600px;}

.top_sea{width:100%;  position:relative; left:0; top:0; z-index:1; float:left; padding:0 10% 0 25%; background:#fff;}
.top_sea::before{content: ''; width:100%; background:url(../images/line_bg.png) no-repeat bottom center; background-size:cover; height:10px; position:absolute; z-index:1; top:97%; left:0;}
.top_sea img{display:block;}
.bot_ice{float:right; width:22.8%; margin:0 18% 0 0; position:relative; z-index:2;}
.ice_under{opacity:0;}
.bot_ice .bot_bg{background:url(../images/ice_bot.png) no-repeat top center; width:100%; height:0%; position:absolute; left:0; top:0; background-size:100%; z-index:0; -webkit-transition:all 1s linear;-ms-transition:all 1s linear;transition:all 1s linear;}
.bot_bg.heigt_half{
	height: 50%;
}
.bot_bg.heigt_full{
	height: 100%;
}
.opac{opacity:0;}
container {
	width: 100%;
	height: 100%;
	position: relative;
	display: block;
	font-size: 1.5vw; 
	z-index: 1; 
	min-height:600px;
}
section {
	width: 100%;
	margin: 0 auto;
	position: relative;
	height: 100%;
}
.iceberg_container{
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
}
.introduction {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	z-index: 2;
	min-height:600px;
}
.intro_tittle {
	position: relative;
	width: 45%;
	margin-top: 5%;
	padding-top: 2%;
	font-size: 6vw;
	color: #fff;
	left: 5%;
	font-family: 'Arial';
	font-weight: bold;
	height: 26vw;
	float: left;
	line-height:1;
}
.intro_tittle::before {
	content: '';
	position: absolute;
	width: 30%;
	background-color: #33d196;
	height: 0.9vw;
	bottom: 99%;
	left: 1%;
	border-radius: 0.5vw;
}
.top_tittle{
	position: absolute;
	width: 40%;
	margin:3% 0 0 2%;
	padding:1.5% 0 0 0;
	font-size:5vw;
	color: #2314a5;
	left:0;
	top:0;
	font-family: 'Arial';
	font-weight: bold; 
	line-height:1.1;
	z-index:3;
}
.top_tittle::before{
	content: '';
	position: absolute;
	width: 30%;
	background-color: #33d196;
	height: 0.9vw;
	bottom: 99%;
	left: 1%;
	border-radius: 0.5vw;
}

.objective {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(68, 139, 174, 0.75);
	padding: 2% 4%;
	z-index: 2;
	min-height:600px;
}
.objective_tittle{
	position: relative;
	float: left;
	width: 100%;
	font-size: 4vw;
	font-weight: bold;
	color: #fff;
}
.objective_body {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 3%;
}
.objective_graphic {
	position: relative;
	float: left;
	width: 42%;
	margin: 2% 0 0 7%;
}
.objective_text {
	position: absolute;
	width: 95%;
	bottom: 85%;
	left: 95%;
	font-size: 1.6vw;
	color: #fff;
}
.objective_text.objtext1 {
	bottom: 40%;
	left: 105%;
}
.objective_text.objtext2 {
	bottom: 0%;
}
.start_section {
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.start_set {
	position: relative;
	width: 100%;
	float:left;
}
.start_instruction {
	position: relative;
	float: left;
	width: 45%;
	font-size: 2vw;
	color: #fff;
	margin-left: 5%;
}
.start_instruction::before {
	content: '';
	position: absolute;
	width: 20%;
	background-color: #33d196;
	height: 0.8vw;
	bottom: 110%;
	left: 0%;
	border-radius: 0.2vw;
	display:none;
}
.start_button {
    position: absolute;
    float: none;
    width: 180px;
    padding: 12px 5px;
    background: #33d196;
    border-radius: 50px;
    font-size: 25px;
    color: #10069f; 
    text-transform: none;
    margin: 2% auto 0 auto;
    text-align: center;
    left: 40%;
    right: 0;
	opacity: 0.5 !important;
	line-height:1;
}
.start_button.enable{
	opacity: 1 !important;
	cursor: pointer;
	transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
}
.start_button.enable:hover{
	box-shadow: 0 0 9px 5px rgb(90, 134, 172);
}
.intract_section {
	position: relative;
	float: left;
	width: 45%;
	height: 100%;
	z-index: 1;
}
.intract_content {
	position: absolute;
	width: calc(100% - 20px);
	bottom: auto;
	top:370px;
	left: 20px;
	min-height: 50%;
}
 
.arrow_button {
	position: absolute;
	width: 35px;
	right: 102%;
	top: 5px;
	display:none !important;
}
.arrow_button.enable{
	cursor: pointer;
}

.bounceing {
	-moz-animation: bounceing 3s infinite;
	-webkit-animation: bounceing 3s infinite;
	animation: bounceing 3s infinite;
	transition:0.1s all linear;
}

.nav_btn.next.enable.bounceing{background:#33d196; border-color:#33d196;}

@-moz-keyframes bounceing {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(30px);
    transform: translateX(30px);
  }
  60% {
    -moz-transform: translateX(15px);
    transform: translateX(15px);
  }
}
@-webkit-keyframes bounceing {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  60% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
}
@keyframes bounceing {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  60% {
    -moz-transform: translateX(15px);
    -ms-transform: translateX(15px);
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
}

.content_dynamic, .content_body {
	position: relative;
	float: left;
	width: 100%;
	color: #242424;
	font-weight: bold;
	margin:0; 
}
.content_body{
	margin:0 0 0 0; 
	padding:10px;
	font-weight: normal;
	font-family:arial;
}

.inner_content{
	float: left;
	width: 100%;
}
.inner_content span {
	float: left;
	width: 100%;
	margin-bottom: 15px;
}
.content_button {
    position: relative;
    float: none;
    width: 180px;
    padding: 12px 5px;
    text-align: center;
    background: #33d196;
    border-radius: 50px; 
    font-size: 25px;
    color: #10069f;
    font-weight: normal;
    text-transform: normal;
    margin: 0 auto;
    clear: both;
    top: 10px;
	opacity: 0.5 !important;
	margin-bottom: 20px;
	line-height:1;
}
.content_button.enable{
	cursor: pointer;
	opacity: 1 !important;
	transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
}
.content_button.enable:hover{
	box-shadow: 0 0 9px 5px rgb(90, 134, 172);
}
.ui_highlight {
	color: #33d196;
	font-weight:bold;
}
.points_block,.icons_container {
	position: absolute;
	width: 130%;
	height: 145%;
	top: -63%;
	z-index:1;
	left: -20%;
}
.point_text {
	position: absolute;
	top: 5%;
	left: 10%;
	transition:0.5s all;
	-ms-transition:0.5s all;
	-webkit-transition:0.5s all;
}
.point_line {
	position: absolute;
	width: 9vw;
	left: 110%;
	top: 0;
	bottom: 0;
	margin: auto 0;
	height: 8px;
}
.point_content {
	float: left;
	width: 125px;
	color: #10069f;
	font-size: 16px; 
}
.point_right{
	left: auto;
	right: 110%;
}
.point_right img,.point_line img{display:block;}
.point_text.text1{
	width:65px;
}
.point_text.text2 {
	top: 17%;
	left: auto;
	right: 88%;
	text-align: right;
}
.point_text.text3 {
	top: 24%;
	left: auto;
	right: 90%; 
	text-align: right;
}
.point_text.text4 {
	left: 82%;
	top: 12%;
	text-align: left; 
}
.point_text.text5 {
	top: 46%;
	left: auto;
	right: 90%; 
	text-align: right;
} 
.point_text.text6 {
	top: 60%;
	left: auto;
	right: 96%;
	text-align: right;
}
.point_text.text7 {
	top: 70%;
	left: auto;
	right: 87%; 
	text-align: right;
}
.point_text.text8 {
	top: 80%;
	left: auto;
	right: 80%;
	text-align: right;
}
.point_text.text9 {
	top: 95%;
	left: auto;
	right: 75%; 
	text-align: right;
}
.point_text.text10 {
	left: 100%;
	top: 53%; 
}
.point_text.text11 {
	left: 95%;
	top: 65%; 
}
.point_text.text12 {
	left: 87%;
	top: 74%; 
}
.point_text.text13 {
	left: 92%;
	top: 87%; 
}
.point_text.text13 .point_content{width:135px;}
.point_text.text1.shuffle {
	top: 60%;
	left: auto;
	right: 95%; 
}
.point_text.text2.shuffle {
	top: 70%; 
	left: auto;
	right: 90%;
}
.point_text.text3.shuffle {
	top: 48%;
}
.point_text.text5.shuffle {
	top: 78%;
}
.point_text.text6.shuffle {
	top: 93%;
	right: 73%;
}
.point_text.text7.shuffle {
	top: 18%;
	right: 85%;
}
.point_text.text8.shuffle {
	top: 32%;
	right: 94%;
}
.point_text.text9.shuffle {
	top: 8%;
	right: 80%;
}
.point_text.text10.shuffle {
	top: 20%;
	left: 90%;
}
.point_text.text12.shuffle {
    left: 98%;
    top: 50%;
}
.point_text.text4.shuffle {
	top: 85%;
	left: 90%;
}
.point_text.text13.shuffle {
	top: 65%;
}
.point_text.text11.shuffle {
	top: 4%;
	left: 85%;
}
.point_text.text1.shuffle_1 {
    top: 60%;
	left:0;
}
.point_text.text2.shuffle_1 {
    top: 50%;
	left: auto;
	right: 98%;
}
.point_text.text5.shuffle_1 {
    top: 70%;
	right: 81%;
}
.point_text.text3.shuffle_1 {
	top: 85%;
	right: 80%; 
}
.point_text.text7.shuffle_1 {
    top: 102%;
	right: 78%;
}
.point_text.text6.shuffle_1 {
    top: 20%;
	right: 80%;
}
.point_text.text9.shuffle_1 {
    top: 30%;
	right: 93%;
}
.point_text.text8.shuffle_1 {
    top: 5%;
	right: 76%;
}
.point_text.text4.shuffle_1 {
	top: 95%;
	left: 88%;
}
.point_text.text10.shuffle_1{ 
    top: 35%; 
    left: 98%;
}
.point_text.text11.shuffle_1 {
    top: 64%;
}
.point_text.text12.shuffle_1 {
    left: 90%;
    top: 82%; 
}
.point_text.text13.shuffle_1 {
    top: 12%;
	left: 85%;
}
.icon_box {
	position: absolute;
	width: 20%;
	top: 14%;
	left: 35%; 
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	-ms-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.icon_box.enable{
	cursor: pointer;
}
.icon_box.enable:hover{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.icon_box img {
	z-index: 2;
	position: relative;
	margin:auto 0;
	top:0;
	bottom:0;
	z-index:1;
}
.icon_content {
	position: absolute;
	width: 430%;
	bottom: -10px;
	left: 55%;
	font-size: 1vw;
	color: #000;
	background: rgba(227,231,244,0.9);
	padding: 15% 35% 15% 55%;
	border-radius:10vw; 
} 
.box2 {
	top: 49%;
	left: 35%;
}
.box3 {
	top: 76%;
	left: 25%;
} 
.box2 .icon_content {  
	background: rgba(227,231,244,0.8);
} 
.box3 .icon_content { 
	width:510%;
	bottom: auto;
	top: -35%;
	background: rgba(227,231,244,0.8);
} 
 
.content_button.back_button{position:relative; float:left; margin:20px 0 40px 20px; font-size:18px; width:120px;}

.ice_under,.ice_under1{display:none;}
.navigation_contain {
	position: fixed;
	width: 200px;
	right: 5%;
	bottom: 0;
	z-index: 1; 
	padding:10px;
}
.nav_btn {
	position: relative;
	float: left;
	width: 50px;
	height:50px;
	margin: 0 5px;
	opacity: 0.5;
	transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	background: #e9e9e9;
	text-align:center;
	padding: 10px 0;
	border-radius: 50%;
	box-shadow:0 0 3px rgba(0,0,0,0.2);
	border:2px solid #4c4c4c;
	
}
.nav_btn.enable{
	opacity: 1;
	cursor: pointer;
}
.nav_btn.enable:hover{
	/*transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);*/
	background:#33d196;
	border-color:#33d196;
}
.mute i{
	font-size: 28px;
}
/*----- Play_begin -----*/
.begin_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	z-index: 10;
}
.courseBegin {
	position: absolute;
	width: 110px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 160px;
	cursor: pointer;
	z-index: 1;
}
.courseBegin span {
	font-style: italic;
	position: absolute;
	top: 125px;
	left: -40px;
	width: 200px;
	color: #fff;
	font-weight: bold;
}
/*----- Preloader -----*/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 9;
}

#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #3498db;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

#loader::after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #f9c922;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
#loader::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #e74c3c;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}	
		
@keyframes spin {	
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}	
		
@-webkit-keyframes spin {	
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
} 

/*----- sidebar -----*/
.swipe_contain {
	position: fixed;
	text-align: center;
	transform: translate3d(0px, 0px, 0px);
	transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	z-index: 10;
	height: 92%;
	width: 40px;
	right: 15px;
	top:4%;
}
.swipe_contain::before{
	background:#484848;
    width:3px;
    height:100%;
	content:'';	
	position:absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}
.swipe_contain.active::before{background:#33d196;}
.swipe{
	background:#33d196;
    width:3px;
    position:absolute;
	margin: 0 auto;
	left: 0;
	right: 0;	
	transition:0.5s all;
	-ms-transition:0.5s all;
	-webkit-transition:0.5s all;
}
.swipe.ht1::after,.swipe.ht2::after,.swipe.ht3::after,.swipe.ht4::after,.swipe.ht5::after{
	background: url('../images/arrow.png') no-repeat center; 
	width: 40px;
	height: 24px;
	position: absolute;
	content: "";
	left: -19px;
	bottom: 0;
	background-size: 100%;
}
.swipe.ht1.enable{ 
    height:18%;
	z-index:2;
}
.swipe.ht2{ 
    height:35%;
	z-index:2;
}
.swipe.ht3{ 
    height:52%;
	z-index:2;
}
.swipe.ht4{ 
    height:70%;
	z-index:2;
}
.swipe.ht5{ 
    height:86%;
	z-index:2;
}
.swiper_bullet {
	background: #33d196;
	display:block;
	height: 15px;
	opacity: 1;
	width: 15px;
	margin:0 13px;
	-webkit-transition: all .5s;
	transition: all .5s;
	border-radius:50%;
	border:2px solid #fff;
	position:relative;
	z-index:1;
	top:20%;
}
.swiper_bullet.enable {
	cursor: pointer;
	background: #4c5da8;
	z-index: 2;
}
.swiper_bullet.enable:hover {
	background: #33d196;
}
.swiper_bullet:nth-child(1){top:0;}
.swiper_bullet:nth-child(2){top:15%;}
.swiper_bullet:nth-child(3){top:30%;}
.swiper_bullet:nth-child(4){top:45%;}
.swiper_bullet:nth-child(5){top:61%;}
.swiper_bullet:nth-child(6){top:76%;}
.swiper_bullet.active { 
	opacity: 0;
	background: #33d196;
	display:block;
	height: 15px;
	width: 15px;
	margin:0 13px; 
	border-radius:50%;
	border:2px solid #fff;
	position:relative;
	z-index:0;
	-webkit-transition: all 1s;
	transition: all 1s; 
}
.toolTip {
	position: absolute;
	font-size: 0.9rem;
	background-color: #C6EAF2;
	display: none;
	padding: 5px 10px;
	border-radius: 3px;
	white-space: nowrap;
	top: -45px;
	right: 0;
	z-index: 12;
	line-height: normal;
}
.toolTip::after {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-top: 16px solid #C6EAF2;
	border-right: 8px solid transparent;
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	right: 0;
	margin: auto;
}
.mute .toolTip {
    right:-10px;
    width:70px;
}
.previous{display:none;}
.previous span{right:-15px;}
.previous:hover span{display:block;}
.next:hover span{display:block;}
.mute:hover span{display:block;}

@media(max-width:1600px){   
 .intract_content{top:280px;}
 container{font-size:20px;}
}

@media(max-width:1366px){ 
 container{font-size:18px;} 
 .content_button.back_button{font-size:17px;}  
 .icon_content{font-size:1.15vw; bottom:-30px; width:420%;}
 .icon_box{left:25%;}
 .box2{top:45%; left:10%;}
 .box2 .icon_content{width:470%; bottom:-20px;}
 .box3{top:67%;}
 .box3 .icon_content{top:70%; padding:20% 50%; left:-280%; width:730%;}
 .intract_content{top:260px;}
 .top_sea{padding:0 5% 0 30%;}
 .bot_ice{width:22.8%; margin:0 13% 0 0;}
 .point_text.text1{left:6%;}
 .point_content{width:130px;}
} 

@media(max-width:1280px){
 .point_content{font-size:1.35vw;} 
 .icon_content{font-size:1.20vw;} 
 .intract_content{top:240px;}
 .top_sea{padding:0 8% 0 25%;}
 .bot_ice{width:23.8%; margin:0 16% 0 0;}
}

@media(max-width:1025px){  	 
 .bg1.position, .bg2.position, .bg3.position{min-height:500px;}
 .objective_graphic{margin:2% 0 0 1%;}
 .objective_text{width:110%; font-size:2vw;} 
 .intract_content{top:200px;}
 .start_instruction{font-size:2.2vw;}
 .content_body{font-size:18px;}
 .content_button{font-size:20px;}
 .point_content{font-size:15px; width:115px;}
 .point_text.text1{left:2%;}
 .point_text.text3{top:24%; right:90%;}
 .point_text.text6{top:60%;} 
 .point_text.text13 .point_content{width:100px;}
 .point_text.text7.shuffle{top:20%;}
 .icon_box{left:35%; top:4%}
 .box2{left:65%; top:75%;}
 .icon_content{font-size:1.4vw; padding:25% 50%; bottom:auto; top:75%; left:-280%; width:700%;}
 .box2 .icon_content{width:700%; bottom:80%; top:auto; left:-430%;}
 .box3{left:30%; top:80%;}
 .box3 .icon_content{top:70%; padding:25% 70%; left:-280%; width:750%;}
 .swipe_contain{right:10px;}
}

@media(max-height:1079px){
 .swiper_bullet:nth-child(2){top:15%;}
 .swiper_bullet:nth-child(3){top:32%;}
 .swiper_bullet:nth-child(4){top:48%;}
 .swiper_bullet:nth-child(5){top:63%;}
 .swiper_bullet:nth-child(6){top:80%;} 
}

@media(max-height:900px){
 .swiper_bullet:nth-child(2){top:15%;}
 .swiper_bullet:nth-child(3){top:30%;}
 .swiper_bullet:nth-child(4){top:46%;}
 .swiper_bullet:nth-child(5){top:62%;}
 .swiper_bullet:nth-child(6){top:78%;} 
}

@media(max-height:800px){
 .swiper_bullet:nth-child(2){top:15%;}
 .swiper_bullet:nth-child(3){top:30%;}
 .swiper_bullet:nth-child(4){top:45%;}
 .swiper_bullet:nth-child(5){top:61%;}
 .swiper_bullet:nth-child(6){top:76%;} 
}

@media(max-height:700px){ 
 .bg3{background-size:95%; background-position:top center;}
}
 
@media(max-height:600px){
 .bg3{background-size:90%; background-position:top center;}
 .swiper_bullet:nth-child(2){top:14%;}
 .swiper_bullet:nth-child(3){top:30%;}
 .swiper_bullet:nth-child(4){top:43%;}
 .swiper_bullet:nth-child(5){top:58%;}
 .swiper_bullet:nth-child(6){top:73%;} 
} 

@media(max-height:500px){
 .swiper_bullet:nth-child(2){top:14%;}
 .swiper_bullet:nth-child(3){top:27%;}
 .swiper_bullet:nth-child(4){top:41%;}
 .swiper_bullet:nth-child(5){top:55%;}
 .swiper_bullet:nth-child(6){top:70%;} 
}
 
@media(max-height:420px){
 .swiper_bullet:nth-child(2){top:11%;}
 .swiper_bullet:nth-child(3){top:25%;}
 .swiper_bullet:nth-child(4){top:39%;}
 .swiper_bullet:nth-child(5){top:52%;}
 .swiper_bullet:nth-child(6){top:66%;} 
}

@media(max-height:360px){
 .swiper_bullet:nth-child(2){top:10%;}
 .swiper_bullet:nth-child(3){top:23%;}
 .swiper_bullet:nth-child(4){top:36%;}
 .swiper_bullet:nth-child(5){top:49%;}
 .swiper_bullet:nth-child(6){top:62%;} 
}

@media(max-width:900px){
 .start_instruction{font-size:20px;}	
 .bg1.position, .bg2.position, .bg3.position,container{min-height:550px;}	 
 .points_block{top:-48%;} 
 .content_dynamic{padding:0;}	
 .arrow_button{right:100%;} 	
 .point_content{letter-spacing:0.1px;}
 .point_text{top:0; left:auto; right:80%;}
 .point_text.text1{left:0;}
 .point_text.text2{top:12%; right:85%;}
 .point_text.text3{right:85%; top:20%;}
 .point_text.text4{top:8%;}
 .point_text.text5{right:100%; top:35%;}
 .point_text.text6{top:50%;}
 .point_text.text7{top:60%;}
 .point_text.text9{top:90%; right:78%;}
 .point_text.text10{top:44%; left:98%;}
 .point_text.text11{left:90%; top:60%;}
 .point_text.text12{left:82%; top:72%;}
 .point_text.text13{left:82%; top:84%;}
 .point_text.text2.shuffle{top:68%; right:85%;}
 .point_text.text4.shuffle{top:75%; left:80%;}
 .point_text.text5.shuffle{top:78%; right:75%;}
 .point_text.text6.shuffle{right:78%; top:93%;}
 .point_text.text7.shuffle{top:20%; right:98%;}
 .point_text.text8.shuffle{top:38%; right:90%;}
 .point_text.text9.shuffle{top:6%; right:84%;}
 .point_text.text10.shuffle{top:15%; left:92%;}
 .point_text.text11.shuffle{top:0;}
 .point_text.text12.shuffle{left:90%; top:45%;}
 .point_text.text13.shuffle{left:85%; top:60%;}
 .point_text.text1.shuffle_1{top:50%; left:auto; right:95%;}
 .point_text.text2.shuffle_1{top:40%; right:100%;}
 .point_text.text3.shuffle_1{top:74%; right:80%;}
 .point_text.text4.shuffle_1{top:43%; left:100%;}
 .point_text.text5.shuffle_1{top:60%; right:90%;}
 .point_text.text6.shuffle_1{top:12%; right:90%;}
 .point_text.text7.shuffle_1{top:90%; right:78%;}
 .point_text.text8.shuffle_1{top:0;} 
 .point_text.text9.shuffle_1{top:22%; right:100%;}
 .point_text.text10.shuffle_1{top:25%; left:100%;}
 .point_text.text11.shuffle_1{top:70%; left:83%;}
 .point_text.text12.shuffle_1{top:82%; left:83%;}
 .point_text.text13.shuffle_1{top:5%;}
 .intract_content{top:180px;}
 .icon_content{font-size:1.6vw; top:65%;} 
 .box2 .icon_content{bottom:75%;}
 .intro_tittle{margin-top:6%;}
 .content_body{margin:0 0 20px 0;}
 .intract_content{position:relative; width: calc(100% - 20px);} 
 .navigation_contain{position:relative; right:8%; bottom:0; float:right; clear:both; margin:0;}
}

@media(max-width:800px){ 
  .content_body{font-size:17px;} 
  .objective_text{font-size:16px;}
  .start_button{font-size:22px; left:45%;}  
  .point_content{font-size:14px;}
  .intract_content{top:150px;}
}
 
@media(max-width:769px){
  .bg1.position, .bg2.position, .bg3.position,.bg1, .bg2, .bg3{position:relative; height:auto; min-height:820px;}
  .top_sea{background:#fff;}
  .top_sea img{max-width:150%; margin:0 0 0 -52%; display:block;}
  .bot_ice{width:52%; margin:0 21% 0 0;}
  .points_block{width:100%; left:0;}
  .start_section{margin:0 0 100px 0;}
  .intract_section{width:98%; padding:0 1%; min-height:20%; height:auto;}
  .content_dynamic{min-height:100px; width:calc(100% - 10px);}
  .intract_content{top:10px; width:calc(100% - 60px); left:30px; padding:0;}
  .objective_body{margin-top:20px;}
  .objective_text{width:130%;}
  .objective_text.objtext1{bottom:35%;}
  .content_body{font-size:18px;} 
  .point_content{font-size:15px; width:145px;}
  .point_line{width:15vw; height:15px; bottom:-5px; left:100%; margin:auto 5px;} 
  .point_right{left:auto; right:100%;}
  .point_text.text3{right:95%;}
  .point_text.text5{right:100%;}
  .point_text.text7{right:90%;}
  .point_text.text7 .point_content{float:right;}
  .point_text.text8{right:85%;}
  .point_text.text9{right:78%; top:92%;}
  .point_text.text9 .point_content{float:right;}
  .point_text.text13{left:82%;}  
  .point_text.text13 .point_content{width:130px;}
  .point_text.text6.shuffle{right:80%;}
  .point_text.text8.shuffle{right:100%;}
  .icon_content{font-size:2vw; border-radius:13vw; left:-250%; padding:30% 35% 25% 35%; width:620%;}
  .box2 .icon_content{width:620%; bottom:auto; top:65%; left:-130%;}
  .box3 .icon_content{top:70%; padding:25% 50%; left:-300%; width:620%;}
  .box2{left:10%; top:45%;}
  .icon_box img,.box2 img{top:auto;}
  .box3{left:45%; top:75%;}
  .bg2{background:none;}
  .introduction,container{min-height:500px;}
  .iceberg_container,container{height:auto;}  
  .navigation_contain{margin:0;}
  .top_sea{padding:50px 0 0 0;}
  .top_tittle{position:fixed; width:100%; margin:0; padding:10px 0; font-size:30px; color:#fff; background:#2314a5; text-align:center;}
  .top_tittle::before{display:none;}
  .swipe_contain{height:calc(100% - 70px); top:60px;} 
}

@media(max-width:640px){ 
  .bg1, .bg2, .bg3{min-height:700px;} 	
  .bg1.position, .bg2.position, .bg3.position{z-index:3; min-height:700px;}
  .intract_content{padding:30px 0 0 0;}
  .intro_tittle{margin:30% 0 50px 0; width:55%; height:auto;} 
  .objective_tittle{font-size:5vw;}
  .objective_text{width:140%;}
  .objective_graphic{margin:2% 0 0 0;}
  .objective_body{margin-top:50px;}
  .objective_text{left:92%;}
  .objective_text.objtext1{bottom:25%;}
  .objective_text.objtext2{bottom:auto; top:90%;} 
  .start_instruction{width:90%;}
  .start_button{position:relative; clear:both; left:0; right:0; top:30px;}
  .icon_content{font-size:2.45vw; left:-280%;}
  .icon_box{top:4%; left:45%;}
  .box3{left:30%; top:78%;}
  .box2{top:42%; left:5%;}
  .box2 .icon_content{right:auto; left:-100%; padding:25% 50%; top:70%; bottom:auto; width:610%;}
  .box3 .icon_content{top:70%; padding:25% 50%; left:-230%; width:630%; border-radius:15vw;}
  .point_text.text7.shuffle_1{right:82%;}
  .point_text.text13.shuffle{top:64%; left:80%;}
  .navigation_contain{width:180px;}
  .nav_btn{width:40px; height:40px; padding:7px 0;}
  .nav_btn img{max-width:20px;}
  .toolTip{right:-7px;}
  .previous span{right:-20px;}
  .nav_btn.mute.enable{padding:4px 0;}
  .navigation_contain{margin:10px 0 0 0;}
  .mute i{font-size:24px;}
  .nav_btn.mute.enable{padding:6px 0;}
} 

@media(max-width:560px){
  .point_content{width:115px;}  	 
  .point_text.text13 .point_content{width:90px;}
  .point_text.text11 .point_content{width:80px;}
  .point_text.text12 .point_content{width:80px;}
} 

@media(max-width:500px){
  .bg1, .bg2, .bg3{min-height:560px;} 	
  .bg1.position, .bg2.position, .bg3.position{z-index:3; min-height:560px;}	
  .intro_tittle{font-size:36px; width:260px;}
  .objective_tittle{font-size:24px;}
  .objective_body{margin-top:100px;} 
  .objective_text{bottom:115%; left:10%; width:220%;} 
  .objective_text.objtext2{top:110%;}
  .objective_text.objtext1{bottom:10%; left:105%; width:140%;}
  .start_section{margin:20px 0 50px 0;} 
  .point_text.text13{left:80%;}
  .point_text.text10{left:96%;}
  .point_content{font-size:13px;}
  .point_text.text1{width:55px;}
  .content_button{font-size:18px;}
  .content_body{font-weight:normal; font-size:16px;}
  .content_dynamic, .content_body{min-height:100px;} 
  .intract_content{width:calc(100% - 40px); left:15px; padding:15px 0 0 0;}
  .swipe_contain{right:6px;}
  .swipe::after{width:36px; height:20px; left:-17px;} 
} 
 
@media(max-width:420px){
  .bg1, .bg2, .bg3{min-height:480px;} 	
  .bg1.position, .bg2.position, .bg3.position{z-index:3; min-height:480px;}    
  .objective_text.objtext1{font-size:14px;}
  .objective_body{margin-top:120px;} 
  .content_button{font-size:16px;}
  .icon_box img, .box2 img{top:5px;}
  .icon_box{top:20%; left:25%;}
  .icon_content{font-size:12px; top:auto; bottom:70%; width:600%; left:-210%; border-radius:20px; padding:20% 30%; background:rgba(227,231,244,0.9);}
  .box2{top:65%; left:65%;}
  .box2 .icon_content{left:-410%; top:auto; bottom:32px; width:600%;}
  .box3{top:72%; left:30%;}
  .box3 .icon_content{top:78%; padding:25% 45% 25% 60%; left:-230%; width:600%; border-radius:20px; padding:20% 30%; background:rgba(227,231,244,0.9);}
  .content_body{font-weight:normal; font-size:15px;}
  .point_content{font-size:12px; width:100px;} 
  .point_text.text1{width:45px;}
  .point_text.text11{width:60px;}
  .point_text.text12.shuffle{left:96%;}
  .point_text.text12.shuffle .point_content{width:60px;}
  .point_text.text11 .point_content{width:70px;}
  .point_text.text12 .point_content{width:70px;}
  .point_text.text9.shuffle_1{top:20%;} 
  .point_text.text4.shuffle_1{left:92%;} 
  .point_text.text10.shuffle_1{top:16%; left:92%;}
  .point_text.text13.shuffle_1{top:1%;}
  .top_tittle{font-size:24px;}
}
 
@media(max-width:380px){
  .bg1.position, .bg2.position, .bg3.position{position:relative; height:auto;} 
  .icon_content{font-size:11px;}
  .content_body{font-weight:normal; font-size:14px;}
  .point_text.text10{left:90%;}
}

@media(max-width:360px){
  .bg1.position, .bg2.position, .bg3.position{min-height:450px;}
}