@font-face {
    font-family: 'ComicSansMS';
    src: url('../fonts/ComicSansMS.eot');
    src: url('../fonts/ComicSansMS.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ComicSansMS.woff2') format('woff2'),
        url('../fonts/ComicSansMS.woff') format('woff'),
        url('../fonts/ComicSansMS.ttf') format('truetype'),
        url('../fonts/ComicSansMS.svg#ComicSansMS') format('svg');
}

@font-face {
    font-family: 'ComicSansMS-Bold';
    src: url('../fonts/ComicSansMS-Bold.eot');
    src: url('../fonts/ComicSansMS-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ComicSansMS-Bold.woff2') format('woff2'),
        url('../fonts/ComicSansMS-Bold.woff') format('woff'),
        url('../fonts/ComicSansMS-Bold.ttf') format('truetype'),
        url('../fonts/ComicSansMS-Bold.svg#ComicSansMS-Bold') format('svg');
}

@font-face {
    font-family: 'ComicSansMS-BoldItalic';
    src: url('../fonts/ComicSansMS-BoldItalic.eot');
    src: url('../fonts/ComicSansMS-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ComicSansMS-BoldItalic.woff2') format('woff2'),
        url('../fonts/ComicSansMS-BoldItalic.woff') format('woff'),
        url('../fonts/ComicSansMS-BoldItalic.ttf') format('truetype'),
        url('../fonts/ComicSansMS-BoldItalic.svg#ComicSansMS-BoldItalic') format('svg');
}

@font-face {
    font-family: 'ComicSansMS-Italic';
    src: url('../fonts/ComicSansMS-Italic.eot');
    src: url('../fonts/ComicSansMS-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ComicSansMS-Italic.woff2') format('woff2'),
        url('../fonts/ComicSansMS-Italic.woff') format('woff'),
        url('../fonts/ComicSansMS-Italic.ttf') format('truetype'),
        url('../fonts/ComicSansMS-Italic.svg#ComicSansMS-Italic') format('svg');
}

@font-face {
    font-family: '華康方圓體W7';
    src: url('../fonts/華康方圓體W7.ttc') format('truetype');
}

/** {
   font-family:     ComicSansMS, "微軟正黑體", Arial;
}*/

/* Safari syntax */
:-webkit-full-screen {
  background-color:  #f8f4d3;
}

/* IE11 */
:-ms-fullscreen {
  background-color:  #f8f4d3;
}

/* Standard syntax */
:fullscreen {
  background-color:  #f8f4d3;
}

/* Style the button */
#close-btn, #full-btn {
  padding: 7px 13px;
    font-size: 20px;
    margin: 24px 20px;
    border-radius: 50px;
    position: fixed;
    background-color: rgba(0,0,0,0.75);
    border: 0;
    color: #fff;
	    z-index: 10;
}

#version {
  padding: 7px 13px;
    font-size: 20px;
    margin: 24px 20px;
    border-radius: 50px;
    position: fixed;
    background-color: #e59120;
	font-weight:700;
    border: 0;
    color: #fff;
	    z-index: 10;
		RIGHT: 0;
}
#version:hover {
	background-color: #ed7408;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
.green-title, .txt-SHOW, .conten-txt, .txt-SHOW, big {
	font-family: RockwellNova-Bold, "華康方圓體W7", Arial;
}

.green-number {
	font-family: ComicSansMS-Bold, Arial;
	font-weight: 600;
}
.green-number big {
	font-family:  "華康方圓體W7";
	font-weight: 100;
}

 .conten-txt, .green-number,  .conten-txt big  {
	font-family: ComicSansMS, "華康方圓體W7", Arial;
}


.w3-badge {
	font-family: ComicSansMS, "華康方圓體W7", Arial;
	font-weight: 700;
}



a:hover img {
    opacity: 1;
}
body {
background-color: #f8f4d3;
    padding:0;
    margin: 0;position: relative;
    height: 100vh;
}
.hor-block {
    display: block;
}
.jc-btn, .m-jc-btn {
  position: relative;
  animation-name: jc-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes jc-btn {
  0%   {left:12.5%; top:32%;}
  50%  {left:12.5%; top:30%;}
  100% {left:12.5%; top:32%;}
}

.draw-btn, .m-draw-btn {
  position: relative;
  animation-name: draw-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes draw-btn {
  0%   {left:21.5%; top:15%;}
  50%  {left:21.5%; top:13%;}
  100% {left:21.5%; top:15%;}
}


.gate-btn, .m-gate-btn {
  position: relative;
  animation-name: gate-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes gate-btn {
  0%   {left:31.5%; top:3.5%;}
  50%  {left:31.5%; top:0.5%;}
  100% {left:31.5%; top:3.5%;}
}



.fram-btn, .m-fram-btn {
  position: relative;
  animation-name: fram-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes fram-btn {
  0%   {left:43.3%; top:53%;}
  50%  {left:43.3%; top:51%;}
  100% {left:43.3%; top:53%;}
}

.boat-btn, .m-boat-btn {
  position: relative;
  animation-name: boat-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes boat-btn {
  0%   {left:53%; top:32%;}
  50%  {left:53%; top:30%;}
  100% {left:53%; top:32%;}
}

.sun-btn, .m-sun-btn {
  position: relative;
  animation-name: sun-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes sun-btn {
  0%   {left:65%; top:2%;}
  50%  {left:65%; top:0%;}
  100% {left:65%; top:2%;}
}

.sleep-btn, .m-sleep-btn {
  position: relative;
  animation-name: sleep-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes sleep-btn {
  0%   {left:71%; top:42%;}
  50%  {left:71%; top:40%;}
  100% {left:71%; top:42%;}
}

.size-btn, .m-size-btn {
  position: relative;
  animation-name: size-btn;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes size-btn {
  0%   {right:8%; top:5%;}
  50%  {right:8%; top:3%;}
  100% {right:8%; top:5%;}
}


.boat, .m-boat {
  position: relative;
  animation-name: boat;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes boat {
  0%   {left:58.5%; top:58.5%;}
  10%   {left:58.5%; top:58.5%;}
  90%  {left:46%; top:45%;}
  100% {left:46%; top:45%;}
}

.sun, .m-sun {
  width:5%; height:10%; position:absolute; z-index: 2;display:block; overflow:hidden;
  
  animation-name: sun;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  
  width:12.5%; height:22.5%; position:absolute; z-index: 1;display:block; overflow:hidden;
}
@keyframes sun {
  0%   {left:57.5%; top:0%;}
  10%   {left:57.5%; top:0%;}
  50%  {left:57.5%; top:25.5%;}
  90%  {left:57.5%; top:0%;}
  100% {left:57.5%; top:0%;}
}

.bus, .m-bus {
	width:5%; height:10%; position:absolute; z-index: 2;display:block; overflow:hidden;
  
  animation-name: bus;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bus {
  0%   {left:25%; top:40%;}
  20%   {left:25%; top:40%;}
  80% {left:12.0%; top:55.5%;}
  100% {left:12.0%; top:55.5%;}
}

.cloud-1 {
  position: relative;
  animation-name: cloud-1;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes cloud-1 {
  0%   {right:20%; top:0%;}
  100% {right:15%; top:2.5%;}
}
.cloud-2 {
  position: relative;
  animation-name: cloud-2;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes cloud-2 {
  0%   {right:5%; top:7.5%;}
  10%   {right:5%; top:7.5%;}
  90% {right:2.5%; top:10%;}
  100% {right:2.5%; top:10%;}
}
.cloud-3 {
  position: relative;
  animation-name: cloud-3;
  animation-duration: 1.4s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes cloud-3 {
  0%   {right:6%; top:13%;}
  10%   {right:6%; top:13%;}
  90% {right:0.5%; top:15.5%;}
  100% {right:0.5%; top:15.5%;}
}

.z {
	width: 5%;
    height: 10%;
    top: 50%;
    left: 70%;
    position: absolute;
    z-index: 4;
    display: block;
    overflow: hidden;
}

.rim-hotspot.m-pic, .m-pic {
	display: none;
	
}

.w3-modal {
    background-color: rgba(0,0,0,0.7);
}

.w3-modal-content {
    background-color: transparent;
    max-width: 1400px;
    width: 100% !important;
	top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);position:absolute; width:95%;
  padding: 20px !important;
}


.w3-button:hover {
    color: #000!important;
    background-color: unset !important;
}
.w3-modal.qna {

}
 #close-btn, {
	 display:none !important;
 }
.w3-display-topright {
    position: absolute;
    right: -20px;
    top: -60px;
	text-align: right;
}

.know-pic {
	    width: auto !important;
    bottom: -20px;
    left: 50%;
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    position: absolute;
	/*height: 75%;*/
	    height: 65%;
    max-height: 370px;;
}
.know-pic:hover {
	cursor: pointer;
}
.model-txt {
	/*top: 3%;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    position: absolute;*/
    width: 100%;
    color: #fdfae1;
    text-align: center;
    margin: 0;
	padding: 30px ;
    overflow: auto;
}
.close-model {
	z-index:10;
}

.outer-wrapper {
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position:absolute;
	width: 100%;
    MAX-WIDTH: 1600px;
}


}


/* width */
::-webkit-scrollbar {
  width: 10px;
  margin-right:10px;
  border-radius:10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; border-radius:10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius:10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius:10px;
}
h2 {
	
	font-size: 36px;
	line-height: 1.5;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    -webkit-overflow-scrolling: auto;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.w3-modal .w3-container {
    margin: 0;
    padding: 0;
}
.model-border.showme {
	position: relative;
    width: 100%;
    height: 75vh;
	
  border-radius: 50px;
   background: rgb(254,222,118);
background: linear-gradient(180deg, rgba(254,222,118,1) 0%, rgba(233,157,44,1) 16%, rgba(251,221,81,1) 38%, rgba(251,221,81,1) 52%, rgba(229,145,32,1) 82%, rgba(229,145,32,1) 100%);
      box-shadow: 0px 0px 15px 5px rgb(0 0 0 / 50%);

}
.model-border.showme.showme-bg {
    padding: 80px 30px 30px;
	padding: 80px 1.5vw 1.5vw;

}
.do-you-know {
	margin-top: -140px;
    max-width: 100%;
    width: auto;
    position: absolute;
}
.txt-detail {
	position: relative;
	display: none;
    flex-direction: row;
    height: calc(100% - 0px);
    PADDING: 40PX 10px 20px;
    background-color: #fff;
    border-radius: 30px;
	box-shadow: 0px 0px 12px 5px rgb(0 0 0 / 40%) inset;
}
.know {
	padding: 80px 30px 30px;
}
.konw-bg {
	background-color: #000;
	width: 100%;
    height: 100%;
    border-radius: 30px;
}
.flex {
	display: FLEX ;
}

.detail-pic {
	    position: absolute;
	width: 110%;
    height: auto;
    left: 50%;
    TOP: 50%;
    transform: translate(-50%,-50%);
}
.green-title {
	color: #009844;
	FONT-SIZE: 44PX;
    LINE-HEIGHT: 50PX;
	FONT-SIZE: 1.8vw;
    LINE-HEIGHT: 1.9vw;
}
.green-number {
	color: #8dc21f;
	FONT-SIZE: 50PX;
	FONT-SIZE: 1.5vw;
	PADDING: 1vw 0 5PX;
	font-weight: 600;
}
.w3-badge {
	width: 75PX;
	height: 75px;
	    width: 2.6vw;
    height: 2.6vw;
	background-color: #8dc21f;
}
.conten-txt {
	font-size: 28px;
	font-size: 1.1vw;
    line-height: 1.3vw;
}
.arrow-btn {
	    width: 50%;
    position: absolute;
    RIGHT: 0;
    BOTTOM: 20px;
	PADDING: 15PX 50PX 15PX 15px;
	display: none;
	z-index: 4;
}
.arrow-btn img {
    HEIGHT: 40PX;
}

.arrow-left {
	float:left;
	width:70px;
	text-align: left;
	overflow: hidden;
	display: none;
}
.arrow-right {
	float:right;
	width:70px;
	text-align: right;
	overflow: hidden;
	MARGIN-RIGHT: 0PX;
	display: none;
}
.arrow-right img {
	float:right;
}
.prevBtn:hover, .nextBtn:hover {
	filter: grayscale(50%);
	
}
.t-change {
	display: none;
}
.right-2 {
	display: block;
 }

.col-sm-6.left, .col-sm-6.right {
	z-index: 1;
	position: relative;
    display: table-row;
}
.col-sm-6.right {
	BORDER: 5PX SOLID #A38A77;
    PADDING: 25px;
    MARGIN-RIGHT: 15PX;
    BORDER-RADIUS: 15PX;
    background: rgb(244,224,173);
    background: linear-gradient(90deg, rgba(244,224,173,1) 7%, rgba(249,243,229,1) 86%);
	float:right;
	box-shadow: 0px 0px 10px 4px rgb(0 0 0 / 25%) ;
}
.cloud-pic {
	    position: absolute;
    left: 50%;
	 transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
    width: 115%;
	max-width: 1720px;
	bottom:30px;
}
.hill-pic {
	    position: absolute;
    left: 50%;
	 transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
    width: 94%;
	max-width: 1600px;
	bottom:0;
	z-index:1;
	HEIGHT:auto;
	display: none;
}
.top-sun-pic {
	    position: absolute;
    left: 50%;
	 transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
    width: 94%;
	max-width: 1600px;
	top:-15%;
	HEIGHT:auto;
}
.sun-title {
	display: none;
}
 .play-link {
	display: none;
position: absolute; left: 0%; top: 50%; width: 27.82%; height: 60%; z-index: 4;
}

video {
  width: 100%;
  height: auto;
}
#video-model .close-model-btn {
    position: absolute;
        right: 15px;
    top: 5px;
    padding: 0;
    border-radius: 100px;
        z-index: 999;
}


.jc-txt .detail-pic.t-2 {
	content: url("../web/img/D-01-2-TROT-EN-v2.gif");
}
.jc-txt .detail-pic.t-3 {
	content: url("../web/img/D-01-3-Canter-EN-v2.gif");
}
.jc-txt .detail-pic.t-4 {
	content: url("../web/img/D-01-4-run-EN-v2.gif");
}

.gate-txt .detail-pic.t-2 {
	content: url("../web/img/D-03-2-gate.gif");
}
.gate-txt .detail-pic.t-3 {
	content: url("../web/img/D-03-3-close.gif");
}
.gate-txt .detail-pic.t-4 {
	content: url("../web/img/D-03-4-run.gif");
}

.draw-txt .detail-pic.t-2 {
	content: url("../web/img/D-02-2-Chestnut.gif");
}
.draw-txt .detail-pic.t-3 {
	content: url("../web/img/D-02-3-Bay.gif");
}
.draw-txt .detail-pic.t-4 {
	content: url("../web/img/D-02-4-Grey.gif");
}
.draw-txt .detail-pic.t-5 {
	content: url("../web/img/D-02-5-White.gif");
}


.boat-txt .detail-pic.t-2 {
	content: url("../web/img/D-07-2-conditions.gif");
}
.boat-txt .detail-pic.t-3 {
	content: url("../web/img/D-07-3-thirsty.gif");
}
.boat-txt .detail-pic.t-4 {
	content: url("../web/img/D-07-4-dirty.gif");
}


.sun-txt .detail-pic.t-2 {
	content: url("../web/img/D-04-2-saliva.gif");
}
.sun-txt .detail-pic.t-3 {
	content: url("../web/img/D-04-3-stop.gif");
}
.sun-txt .detail-pic.t-4 {
	content: url("../web/img/D-04-4-why.gif");
}


.z-txt .detail-pic.t-2 {
	content: url("../web/img/D-08-2-GetOff.gif");
}
.z-txt .detail-pic.t-3 {
	content: url("../web/img/D-08-3-4Hrs.gif");
}
.z-txt .detail-pic.t-4 {
	content: url("../web/img/D-08-4-30Minss.gif");
}


.fram-txt .detail-pic.t-2 {
	content: url("../web/img/D-06-2-scream.gif");
}
.fram-txt .detail-pic.t-3 {
	content: url("../web/img/D-06-3-over.gif");
}
.fram-txt .detail-pic.t-4 {
	content: url("../web/img/D-06-4-30Minss.gif");
}


.size-txt .detail-pic.t-2 {
	content: url("../web/img/D-05-2-measure.gif");
}
.size-txt .detail-pic.t-3 {
	content: url("../web/img/D-05-3-hand.gif");
}


.play-btn {
	position: absolute;
	bottom: 25%;
	left: 5%;
	z-index: 1;
	margin-bottom:10px;
}


@media screen and (max-width: 1720px){
	.cloud-pic {
	width: 107%;
}
.green-title {
	FONT-SIZE: 1.8vw;
    LINE-HEIGHT: 2vw;
}
.green-number {
	FONT-SIZE: 1.7vw;
	PADDING: 1.2vw 0 5PX;
	font-weight: 600;
}
.w3-badge {
	    width: 2.8vw;
    height: 2.8vw;
}
.conten-txt {
	font-size: 1.3vw;
    line-height: 1.6vw;
}
}




@media screen and (max-width: 1450px){
	.w3-display-topright img {
		width: 12vw;

	}
.close-model img {
	width: 50%;
}
.col-sm-6.right {
    PADDING: 10px 25px 15PX;
}
.w3-display-topright {
    top: -30px;
}
.model-border.showme {
    height: 75vh;
}
.top-sun-pic {
	top:-12%;
}
.green-title {
	FONT-SIZE: 2.4vw;
    LINE-HEIGHT: 2.5vw;
	
}
.green-number {
	FONT-SIZE: 2.2vw;
    PADDING: 2vw 0 5PX;
}
.w3-badge {
	width: 3.4vw;
    height: 3.4vw;
}
.conten-txt {
	font-size: 1.4vw;
    line-height: 1.9vw;
}
}




@media (max-width: 1200px){
h2 {
    font-size: 35px;
}
.model-txt {
	padding: 20px 25px;
}
.model-border.showme {
    height: 85vh;
}
.do-you-know {
    margin-top: -90px;
    max-width: 400px;
    width: 50%;
}
.txt-detail {
  border-radius: 20px; 
}

.detail-pic {
    width: 115%;
}
.top-sun-pic {
	top:-50px;
}
.model-border.showme {
    
}

}



@media screen and (max-width: 1024px){

.col-sm-6.right {
    PADDING: 10px 15px 10PX;
}
.model-border.showme {
border-radius: 25px;
}

.model-border.showme.showme-bg {
    padding: 70px 25px 25px;
}
.green-title {
    FONT-SIZE: 34PX;
    LINE-HEIGHT: 40PX;
}
.green-number {
    FONT-SIZE: 34PX;
    PADDING: 30PX 0 5PX;
}
.w3-badge {
    width: 50PX;
    height: 50px;
}
.conten-txt {
    font-size: 18px;
	line-height: 1.5;
}
.txt-detail {
    PADDING: 30PX 10px 20px;
}
.know {
	padding: 50px 15px 15px
}
.konw-bg {
    background-color: #000;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

h2 {
    font-size: 30px;
	
}
}



@media screen and (max-width: 999px){
/*.w3-modal-content {
    max-width: 600px;
    width: 100% !important;
}*/

h2 {
    font-size: 28px;
	
}

.model-border.showme {
    height: 90vh;
	    max-height: 1100px;
}

.model-border.showme.showme-bg {
    padding: 60px 15px 15px;
}
.col-sm-6.left, .col-sm-6.right {
	width:50% !important;
}
.col-sm-6.left {
	float: left;
	HEIGHT: AUTO;
}
 .col-sm-6.right {
	 float: right;
	 overflow: auto;
 }
 .detail-pic {
    position: relative;
	max-width: 480px;
}
.top-sun-pic {
}
.arrow-btn img {
    HEIGHT: 35PX;
}
.hill-pic {
	content: url("../web/img/M-HILL.png");
	WIDTH: 75%;
	    max-width: 400px;
}

}


@media screen and (max-width: 920px){
.model-border.showme {
    
    border-radius: 30px;
    
}
.konw-bg {
    border-radius: 15px;
}
h2 {
    font-size: 30px;
	line-height: 1.2;
}
.arrow-right {
	MARGIN-RIGHT: 30PX;
}

}




@media screen and (max-width: 900px){
	#close-btn, #full-btn {
		display:none;
		opacity:0;
	}
	.do-you-know {
	    margin-top: -55px;
    max-width: 55%;

}
.model-txt {
    padding: 20px 25px;
}


.detail-pic {
    width: 100%;
    left: -10px;
}
#video-model img {
	width: 35px !important;
}
}


@media screen and (max-width: 860px){

.model-border.showme.showme-bg {
    padding: 60px 15px 15px;
}
.txt-detail {
    border-radius: 10px;
	    PADDING: 10PX 0px 0px;
}
}



@media screen and (max-width: 768px){
	.outer-wrapper {
	width:100%;
}
.w3-modal-content {
    margin: auto;
}
.know {
	padding: 60px 15px 15px;
}
}




@media screen and (max-width: 767px){
	.model-border.showme {
	   
    border-radius: 20px;
	
}
	.model-txt {
    text-align: center;
	    padding: 20PX 15px;
	width:100%;
	}
/*.w3-modal-content {
    max-width: 560px;
}*/
.model-border {
	/*padding:10px;*/
}
h2 {
    font-size: 23px;
	line-height: 1.2;
}

.do-you-know {
	/*max-width: 90%;
	margin-top: -85px;*/
}

}



@media screen and (max-width: 700px){
	.w3-modal .w3-container {
    margin:0;
}
/*.w3-modal-content {
    max-width: 450px;
}*/

.close-model img {
    width: 50px;
	padding: 5px 0px 5px 5px;
}
.detail-pic {
    top: 0;
}
.col-sm-6.right {
    PADDING: 10px 10px 15PX;
}
.know {
	padding: 50px 10px 10px;
}
}


@media screen and (max-width: 670px){

/*.detail-pic {
    position: static;
	    width: 110%;
		margin: -30px auto 0;
		left: 0;
	text-align: center;
	top: 0px;
}*/
.col-sm-6.left {
}
}



@media screen and (max-width: 600px){
	.w3-modal .w3-container {
    margin:0;
}
/*.w3-modal-content {
    max-width: 400px;
}*/
.w3-modal-content {
    margin: 0px;
}
.close-model img {
    width: 40%;
}

.do-you-know {
    max-width: 300px;
    width: 90%;
}
.know-pic {
    width: 90% !important;
    height: auto;
}
h2 {
    font-size: 30px;
}
.detail-pic {
    position: static;
	    width: 100%;
		margin: -10px auto 0;
		left: 0;
    max-width: 400px;
	text-align: center;
	top: 0px;
}
.col-sm-6.left {
    top: 0;
    left: 0;
	text-align: center;
	HEIGHT: AUTO;

}
/*.col-sm-6.left, .col-sm-6.right {
	width:100% !important;
}*/
}


@media screen and (max-width: 550px){
	.model-txt {
	top: 10%;
}
.know-pic {
    width: 80% !important;
	max-width: 350px;
}
}

@media (orientation: landscape) {

    @media screen and (max-width: 921px){
		 
.hill-pic {
    content: url(../web/img/D-HILL.png);
    WIDTH: 75%;
}
.model-txt {
    padding: 10px 25px;
}
.know {
    padding: 50px 15px 15px;
}
.know-pic {
	height:70%;
}
        .w3-modal-content {
            height: 100%;
        }
.col-sm-6.left {
    
}
	 .txt-detail {
    PADDING: 10PX 0px 10px;
}
.detail-pic {
    Position: ABSOLUTE;
    left: 50%;
    TOP: 50%;
    transform: translate(-50%,-50%);
	width: 105%;
}

.green-title {
    FONT-SIZE: 22PX;
    LINE-HEIGHT: 25PX;
}
.arrow-left img, .arrow-right img {
	height:25px;
	width: auto;
    }
	.green-number {
    FONT-SIZE: 23PX;
    PADDING: 15PX 0 5PX;
}
.w3-badge {
    width: 35PX;
    height: 35px;
}
.conten-txt {
    font-size: 15px;
	LINE-HEIGHT: 20PX;
}
.arrow-btn {
    PADDING: 15PX 15PX 5PX;
}
.top-sun-pic {
}
.outer-wrapper {
	width:88%;
}
	}
	
	
	 @media screen and (max-width: 900px){
		 .detail-pic {
    width: 100%;
}
.do-you-know {
    max-width: 300px;
}
.know {
    padding: 50px 10px 10px;
}
.know-pic {
	height: 70%;
}
h2 {
    font-size: 24px;
}
	 }
	 



	 @media screen and (max-width: 750px){
		 .top-sun-pic {
	top:-15%;
}
.green-title {
    FONT-SIZE: 21PX;
    LINE-HEIGHT: 24PX;
}
.w3-badge {
    width: 30PX;
    height: 30px;
}
.green-number {
    FONT-SIZE: 20PX;
    PADDING: 10PX 0 5PX;
}
.conten-txt {
    font-size: 15px;
    LINE-HEIGHT: 18PX;
}
.model-border.showme {
    max-height: 400px;
}
.w3-modal .w3-container {
margin: AUTO;
    padding: 0;
    TOP: 50%;
    TRANSFORM: TRANSLATEY(-50%);
	 }
#video-model.w3-modal .w3-container {
    margin: AUTO;
    padding: 0;
    TOP: 0;
    TRANSFORM: TRANSLATEY(0%);
}
	 }
	
	 
	 

	 @media screen and (max-width: 700px){
		 .detail-pic {
    width: 100%;
}
/*
.green-number {
    FONT-SIZE: 23PX;
    PADDING: 20PX 0 0PX;
}
.w3-badge {
    width: 35PX;
    height: 35px;
}
.conten-txt {
    font-size: 18px;
}*/
.top-sun-pic {
	top:-17%;
}
.model-border.showme.showme-bg, .know {
    padding: 50px 10px 10px;
}
.arrow-right {
    MARGIN-RIGHT: 20PX;
}
.do-you-know {
    max-width: 250px;
}
h2 {
    font-size: 22px;
}
	 }

}

@media (orientation: portrait) {

  @media screen and (max-width: 920px){
	
	  .outer-wrapper {
		  max-width: 90%;
	  }
	  .bg-cover {
		  content: url(../web/img/m-cover.png);
}
.bg-pic {
		  content: url(../web/img/m-bg.png);
	  }
	  .bg-space {
		  content: url(../web/img/m-bg-space.gif);
	  }
	  
.m-sun {
	width:17.5%; 
	height:27.5%;
}	  
@keyframes sun {
  0%   {left:26.5%; top:0%;}
  10%   {left:26.5%; top:0%;}
  50%  {left:26.5%; top:20.5%;}
  90%  {left:26.5%; top:0%;}
  100% {left:26.5%; top:0%;}
}


.z {
	width: 10%;
    height: 20%;
    top: 27%;
    left: 40%;
}


.m-boat {
	width: 14% !important;
}
@keyframes boat {
  0%   {left:25.5%; top:89.5%;}
  10%   {left:25.5%; top:89.5%;}
  90%  {left:9%; top:84%;}
  100% {left:9%; top:84%;}
}

.m-bus {
	width: 14% !important;
}
  @keyframes bus {
  0%   {left:50.5%; top:46%;}
  20%   {left:50.5%; top:46%;}
  80% {left:30.0%; top:54.5%;}
  100% {left:30.0%; top:54.5%;}
}
@keyframes fram-btn {
  0%   {left:83.3%; top:71%;}
  50%  {left:83.3%; top:69%;}
  100% {left:83.3%; top:71%;}
}

@keyframes draw-btn {
  0%   {left:81%; top:48%;}
  50%  {left:81%; top:46%;}
  100% {left:81%; top:48%;}
}
	@keyframes jc-btn {
  0%   {left:14.5%; top:58%;}
  50%  {left:14.5%; top:56%;}
  100% {left:14.5%; top:58%;}
}  
@keyframes gate-btn {
  0%   {left:9%; top:33%;}
  50%  {left:9%; top:31%;}
  100% {left:9%; top:33%;}
}
@keyframes boat-btn {
  0%   {left:6%; top:76%;}
  50%  {left:6%; top:74%;}
  100% {left:6%; top:76%;}
}
@keyframes size-btn {
  0%   {right:16.5%; top:6%;}
  50%  {right:16.5%; top:4%;}
  100% {right:16.5%; top:6%;}
}
@keyframes sleep-btn {
  0%   {left:49%; top:27%;}
  50%  {left:49%; top:25%;}
  100% {left:49%; top:27%;}
}
@keyframes sun-btn {
  0%   {left:15%; top:6%;}
  50%  {left:15%; top:4%;}
  100% {left:15%; top:6%;}
}


.cloud-1 {
	width:15% !IMPORTANT; 
	height:AUTO !IMPORTANT;
}
.cloud-2, .cloud-3 {
	width:9% !IMPORTANT; 
	height:AUTO !IMPORTANT;
}
.m-drink-cloud-2 {
	width:10%; height:AUTO; position:absolute; z-index: 4;display:block; overflow:hidden;
	animation-name: m-drink-cloud-2;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes m-drink-cloud-2 {
  0%   {left:10%; top:20%;}
  10%   {left:10%; top:20%;}
  90% {left:5%; top:18.5%;}
  100% {left:5%; top:18.5%;}
}

.m-drink-cloud-3 {
	width:10%; height:AUTO; position:absolute; z-index: 4;display:block; overflow:hidden;
	animation-name: m-drink-cloud-3;
    animation-duration: 1.8s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes m-drink-cloud-3 {
  0%   {left:22%; top:26%;}
  10%   {left:22%; top:26%;}
  90% {left:20%; top:24.5%;}
  100% {left:20%; top:24.5%;}
}

.m-gate-cloud-2 {
width:15%; height:auto; position:absolute; z-index: 1;display:block; overflow:hidden;
  animation-name: m-gate-cloud-2;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@keyframes m-gate-cloud-2 {
  0%   {left:-2%; top:38%;}
  100% {left:4%; top:35.5%;}
}

.m-sleep-cloud-2 {
	width:10%; height:AUTO; position:absolute; z-index: 4;display:block; overflow:hidden;
	animation-name: m-sleep-cloud-2;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes m-sleep-cloud-2 {
  0%   {right:18%; top:35%;}
  10%   {right:18%; top:35%;}
  90% {right:14%; top:36.5%;}
  100% {right:14%; top:36.5%;}
}

.m-sleep-cloud-3 {
	width:10%; height:AUTO; position:absolute; z-index: 4;display:block; overflow:hidden;
	animation-name: m-sleep-cloud-3;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes m-sleep-cloud-3 {
  0%   {right:15%; top:38.5%;}
  10%   {right:15%; top:38.5%;}
  90% {right:13%; top:39.5%;}
  100% {right:13%; top:39.5%;}
}

.m-jc-cloud-2 {
width:10%; height:auto; position:absolute; z-index: 1;display:block; overflow:hidden;
  animation-name: m-jc-cloud-2;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
@keyframes m-jc-cloud-2 {
  0%   {left:10%; top:60%;}
  100% {left:13%; top:58.5%;}
}

.m-jc-cloud-3 {
width:10%; height:auto; position:absolute; z-index: 4;display:block; overflow:hidden;
  animation-name: m-jc-cloud-3;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@keyframes m-jc-cloud-3 {
  0%   {left:10%; top:50%;}
  100% {left:6%; top:52%;}
}

.m-color-cloud-2 {
width:10%; height:auto; position:absolute; z-index: 2;display:block; overflow:hidden;
  animation-name: m-color-cloud-2;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@keyframes m-color-cloud-2 {
  0%   {right:10%; top:46.5%;}
  100% {right:13%; top:48%;}
}

.m-water-cloud-3 {
width:10%; height:auto; position:absolute; z-index: 1;display:block; overflow:hidden;
  animation-name: m-water-cloud-3;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes m-water-cloud-3 {
  0%   {left:-2%; top:77%;}
  100% {left:4%; top:80%;}
}

.m-talk-cloud-2 {
	width:10%; height:AUTO; position:absolute; z-index: 4;display:block; overflow:hidden;
	animation-name: m-talk-cloud-2;
    animation-duration: 1.7s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes m-talk-cloud-2 {
  0%   {right:4%; top:63%;}
  10%   {right:4%; top:63%;}
  90% {right:-1%; top:64.5%;}
  100% {right:-1%; top:64.5%;}
}
.m-talk-cloud-3 {
width:10%; height:auto; position:absolute; z-index: 4;display:block; overflow:hidden;
  animation-name: m-talk-cloud-3;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

@keyframes m-talk-cloud-3 {
  0%   {right:20%; top:67.5%;}
  100% {right:16%; top:65%;}
}
.rim-hotspot.m-pic, .m-pic {
    display: block;
}
.hor-block {
    display: none;
}

	  
	  
	  

.w3-modal {
    background-color: rgba(0,0,0,0.7);
}
    .col-sm-6.left, .col-sm-6.right {
        width:100% !important;
    }
	.w3-modal-content {
    width: 80% !important;
	max-width: 600px;
  }
  .detail-pic {
    width: 100%;
    left: 50%;
    TOP: 50%;
    transform: translate(-50%,0%);
}
.txt-detail {
PADDING: 0PX 10px 00px;
background: rgb(244,224,173);
    background: linear-gradient(90deg, rgba(244,224,173,1) 7%, rgba(249,243,229,1) 86%);
}
.col-sm-6.right {
    PADDING: 0 30PX;
}
.arrow-btn {
	    width: 100%;
}
.flex {
	display: block ;
}
.arrow-right {
    MARGIN-RIGHT: 0PX;
}
.col-sm-6.right {
    BORDER: 0;
    PADDING: 0 30PX;
    MARGIN-RIGHT: 0;
    background: transparent;
	box-shadow: unset;
  }
  .do-you-know {
    max-width: 400px;
	min-width: 320px;
}
.top-sun-pic {
	display: none;
}
.cloud-pic {
    width: 120%;
    BOTTOM: 20%;
}
h2 {
    font-size: 35px;
}
  }
  
  
  	 @media screen and (max-width: 820px) {
.detail-pic {
    width: 100%;
}
.hill-pic {
	WIDTH: 59%;
}
.arrow-btn {
    PADDING: 15PX 15PX 0PX;
}
	 }
	 
	 
	 
  @media screen and (max-width: 600px){
	  h2 {
    font-size: 28px;
}
.hill-pic {
	WIDTH: 55%;
	max-width: 350px;
}
.cloud-pic {
    width: 115%;
    BOTTOM: 15%;
}
  .w3-modal-content {
    width: 95% !important;
	max-width: 400px;
  }
  .detail-pic {
    width: 120%;
    position: RELATIVE;
}
.col-sm-6.right {
    PADDING: 0 15PX;
}
.green-title {
    FONT-SIZE: 24PX;
    LINE-HEIGHT: 28PX;
}
.arrow-btn img {
    HEIGHT: 30PX;
}
.arrow-btn {
    PADDING: 15PX 10PX 0PX;
}
.green-number {
    FONT-SIZE: 23PX;
    PADDING: 20PX 0 0PX;
}
.w3-badge {
    width: 35PX;
    height: 35px;
}
.conten-txt {
    font-size: 16px;
}
 #version {
    padding: 5px 9px;
    font-size: 16px;
 }
  }
  
  
  
    @media screen and (max-width: 540px){
.hill-pic {
	WIDTH: 55%;
}

  }
  
  
    @media screen and (max-width: 500px){
		.outer-wrapper {
		  max-width: 100%;
	  }
.hill-pic {
	WIDTH: 65%;
}
.conten-txt {
    font-size: 14px;
    line-height: 20px;
}
.do-you-know {
    max-width: 300px;
    width: 80%;
	min-width: unset;
}
.arrow-btn {
	bottom:10px;
}
.green-title {
    FONT-SIZE: 22PX;
    LINE-HEIGHT: 25PX;
}
	}
	
	
    @media screen and (max-width: 300px){	
	.green-number {
    FONT-SIZE: 21PX;
    LINE-HEIGHT: 32PX;
}
}
}