@keyframes shapren {
		  from { -webkit-filter: blur(3px);
		    -moz-filter: blur(3px);
		    -o-filter: blur(3px);
		    -ms-filter: blur(3px);
		    filter: blur(3px);}
		  to { -webkit-filter: blur(0px);
		    -moz-filter: blur(0px);
		    -o-filter: blur(0px);
		    -ms-filter: blur(0px);
		    filter: blur(0px);}
		}
		.curtainsharpen {
		  animation: shapren 2s forwards;
		}
		.gradient-top{
		  position: absolute;
		  left:0;
		  right:0;
		  top: 0;
		  width: 100%;
		  height: 100px;
		  background: rgb(0,0,0);
		  background: -moz-linear-gradient(0deg, rgba(4,13,30,0) 0%, rgba(4,13,30,1) 150%);
		  background: -webkit-linear-gradient(bottom, rgba(4,13,30,0) 0%, rgba(4,13,30,1) 150%);
		  background: -o-linear-gradient(0deg, rgba(4,13,30,0) 0%, rgba(4,13,30,1) 150%);
		  background: -ms-linear-gradient(0deg, rgba(4,13,30,0) 0%, rgba(4,13,30,1) 150%);
		  z-index: 1;
		}
		.top{
		  position: absolute;
		  text-align: center;
		  font-family:Sarabun;
		  font-size:24px;
		  color:#ffffff;
		  line-height: 1;
		  left:0;
		  right:0;
		  top: 10px;
		  width: 100%;
		  z-index: 2;
		  opacity: 0;
		  -webkit-transition: opacity 0.5s ease-in;
		  -moz-transition: opacity 0.5s ease-in;
		  -o-transition: opacity 0.5s ease-in;
		  -ms-transition: opacity 0.5s ease-in;
		  transition: opacity 0.5s ease-in;
		}
		.menu{
		  position: absolute;
		  text-align: right;
		  left:0;
		  right:0;
		  top: 15px;
		  width: 100%;
		  margin-left: -15px;
		  z-index: 2;
		  opacity: 0;
		  -webkit-transition: opacity 0.5s ease-in;
		  -moz-transition: opacity 0.5s ease-in;
		  -o-transition: opacity 0.5s ease-in;
		  -ms-transition: opacity 0.5s ease-in;
		  transition: opacity 0.5s ease-in;
		}
		.menu img {
		  width: 18px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		}
		.menu img:hover {
		  -moz-border-radius: 10px;
		  -webkit-border-radius: 10px;
		  border-radius: 20px;
		  background-color: rgba(0,0,0, 0.1);
		}
		.iconbar{
		  position: absolute;
		  text-align: center;
		  left:0;
		  right:0;
		  top: 55px;
		  width: 100%;
		  z-index: 2;
		  opacity: 0;
		  -webkit-transition: opacity 0.5s ease-in;
		  -moz-transition: opacity 0.5s ease-in;
		  -o-transition: opacity 0.5s ease-in;
		  -ms-transition: opacity 0.5s ease-in;
		  transition: opacity 0.5s ease-in;
		}
		.iconbar img {
		  width: 16px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		}
		.iconbar img:hover {
		  transform: scale(1.1);
		  transition: transform .2s;
		}
		.zoneselect{
		  position: absolute;
		  top:50%;
		  bottom: 0%;
		  right:0%;
		  height:20%;
		  width:75px;
		  z-index: 2;
		  opacity: 1;
		  -webkit-transition: opacity 0.5s ease-in;
		  -moz-transition: opacity 0.5s ease-in;
		  -o-transition: opacity 0.5s ease-in;
		  -ms-transition: opacity 0.5s ease-in;
		  transition: opacity 0.5s ease-in;
		}
		.zoneselect img {
		  width: 50px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		}
		.zoneselect img:hover {
		  transform: scale(1.1);
		  transition: transform .2s;
		}
		.arrow{
		  position: absolute;
		  text-align: center;
		  left:0;
		  right:0;
		  bottom: 7px;
		  width: 100%;
		  z-index: 2;
		  opacity: 0;
		  -webkit-transition: opacity 0.5s ease-in;
		  -moz-transition: opacity 0.5s ease-in;
		  -o-transition: opacity 0.5s ease-in;
		  -ms-transition: opacity 0.5s ease-in;
		  transition: opacity 0.5s ease-in;
		}
		.arrow img {
		  width: 30px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		}
		.arrow img:hover {
		  transform: scale(1.1);
		  transition: transform .2s;
		}
		.intro{
		  position: absolute;
		  text-align: center;
		  font-family:Sarabun;
		  font-size:34px;
		  left:0;
		  right:0;
		  top: 35%;
		  height: 100%;
		  z-index: 3;
		  padding:20px;
		  opacity: 0;
		  -webkit-transition: opacity 1s ease-in;
		  -moz-transition: opacity 1s ease-in;
		  -o-transition: opacity 1s ease-in;
		  -ms-transition: opacity 1s ease-in;
		  transition: opacity 1s ease-in;
		  z-index: 4;
		}
		.intro img {
		  width: 120px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 4;
		}

		.tooltip {
		  position: relative;
		  display: inline-block;
		}

		.tooltip .tooltiptext {
		  visibility: hidden;
		  display: inline-block;
		  top: 100%;
		  left: 50%;
		  width:40px;
		  margin-left: -25px;
		  background-color: rgba(0,0,0, 0.5);
		  color: #fff;
		  font-family:Sarabun;
		  font-size:20px;
		  text-align: center;
		  border-radius: 6px;
		  padding: 7px 7px 7px 7px;

		  /* Position the tooltip */
		  position: absolute;
		  z-index: 1;
		}

		.tooltip .tooltiptext::after {
		  content: "";
		  position: absolute;
		  bottom: 100%;
		  left: 50%;
		  margin-left: -5px;
		  border-width: 5px;
		  border-style: solid;
		  border-color: transparent transparent rgba(0,0,0, 0.5) transparent;
		}
		.tooltip_zone {
		  position: relative;
		  display: inline-block;
		}

		.tooltip_zone .tooltiptext_zone {
		  /*visibility: hidden;*/
		  top: 10px;
  		  right: 105%;
  		  width:40px;
		  background-color: rgba(0,0,0, 0.5);
		  color: #fff;
		  font-family:Sarabun;
		  font-size:14px;
		  text-align: center;
		  border-radius: 6px;
		  padding: 10px 10px 10px 10px;
		  /* Position the tooltip */
		  position: absolute;
		  z-index: 1;
		}
		.tooltip_zone .tooltiptext_zone::after {
		  content: " ";
		  position: absolute;
		  top: 50%;
		  left: 100%; /* To the right of the tooltip */
		  margin-top: -5px;
		  border-width: 5px;
		  border-style: solid;
		  border-color: transparent transparent transparent rgba(0,0,0, 0.5) ;
		}
		.tooltip_arrow {
		  position: relative;
		  display: inline-block;
		}

		.tooltip_arrow .tooltiptext_arrow {
		  visibility: hidden;
		  display: inline-block;
		  bottom: 100%;
		  left: 50%;
		  width:60px;
		  margin-left: -36px;
		  background-color: rgba(0,0,0, 0.5);
		  color: #fff;
		  font-family:Sarabun;
		  font-size:20px;
		  text-align: center;
		  border-radius: 6px;
		  padding: 6px 6px 6px 6px;

		  /* Position the tooltip */
		  position: absolute;
		  z-index: 1;
		}
		.tooltip_arrow .tooltiptext_arrow::after {
		  content: " ";
		  position: absolute;
		  top: 100%; /* At the bottom of the tooltip */
		  left: 50%;
		  margin-left: -5px;
		  border-width: 5px;
		  border-style: solid;
		  border-color: rgba(0,0,0, 0.5) transparent transparent transparent;
		}

		.tooltip:hover .tooltiptext {
		  visibility: visible;
		}
		.tooltip_zone:hover .tooltiptext_zone {
		  visibility: visible;
		}
		.tooltip_arrow:hover .tooltiptext_arrow {
		  visibility: visible;
		}
		.footer{
		  position: absolute;
		  display: inline-block;
		  right:0;
		  bottom: 0px;
		  z-index: 1;
		  font-size:10px;
		  color:#ffffff;
		  background: rgba(0,0,0, 0.7);
		  padding: 2px;
		}
		.noselect {
		  -webkit-touch-callout: none; /* iOS Safari */
		    -webkit-user-select: none; /* Safari */
		     -khtml-user-select: none; /* Konqueror HTML */
		       -moz-user-select: none; /* Old versions of Firefox */
		        -ms-user-select: none; /* Internet Explorer/Edge */
		            user-select: none; /* Non-prefixed version, currently
		                                  supported by Chrome, Opera and Firefox */
		}
		a:link { color:#FFFFFF; text-decoration: none; }
		a:visited { color:#FFFFFF; text-decoration: none; }
		a:hover { color:yellow; text-decoration: none; }
		a:active { color:#FFFFFF; text-decoration: underline; }

		        /* You can remove this css ( start ) */
        .header-menu {
            position: absolute;
            width: 100%;
            text-align: right;
            z-index: 3;
            opacity: 0;
            color: #fff;
			font-family:Sarabun;
			font-size:20px;
			font-weight: bold;
            -webkit-transition: opacity 0.5s ease-in;
			  -moz-transition: opacity 0.5s ease-in;
			  -o-transition: opacity 0.5s ease-in;
			  -ms-transition: opacity 0.5s ease-in;
			  transition: opacity 0.5s ease-in;
        }

        /* You can remove this css ( end )*/
        .popup-menu {
            position: relative;
            display: inline-block;
            text-align: right;
            right:30px;
            top:10px;
            z-index: 3;
        }

        .popup-btn {
            display: block;
            height: 40px;
            width: 40px;
            border-radius: 40px;
            line-height: 40px;
            text-align: center;
            z-index: 3;
        }
        
        .dropdown-menu {
            top: 130%;
            position: absolute;
            right: -15px;
            min-width: 130px;
            background: rgba(255, 255, 255, .7);
            padding: 18px 13px 0;
            visibility: hidden;
            opacity: 0;
            box-shadow: 0 25px 55px 0 rgba(0, 0, 0, .21), 0 16px 28px 0 rgba(0, 0, 0, .22);
            border-radius: 15px;
            text-align: left;
            -webkit-animation-name: hidemenu;
            animation-name: hidemenu;
            -webkit-animation-duration: .3s;
            animation-duration: .3s;
            -webkit-transform-origin: 0 20%;
            -ms-transform-origin: 0 20%;
            transform-origin: 0 20%;
            -webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-ms-transition: all .3s ease;
			-o-transition: all .3s ease;
			transition: all .3s ease;
			z-index: 3;
        }

        .dropdown-menu.active {
            display: block;
            visibility: visible;
            opacity: 1;
            -webkit-animation-duration: .7s;
            animation-duration: .7s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-transform-origin: top;
            -ms-transform-origin: top;
            transform-origin: top;
            -webkit-animation-name: menuAnimation;
            animation-name: menuAnimation;
        }

        .dropdown-menu ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .dropdown-menu ul li {
        	margin-left: 8px;
            margin-bottom: 5px;
        }

        .dropdown-menu ul li a, .dropdown-menu ul li a:visited {
            display: block;
            padding: 5px 0;
            text-decoration: none;
            color: #707070;
            word-wrap: none;
        }
        .dropdown-menu ul li a:hover{
            color: #000;
        }
        .parent-menu {
            text-decoration: none;
            color: #333;
            word-wrap: none;
        }
        .parent-menu img{
        	margin-top:10px;
            width:20px;
        }
		.dropdown-menu:before{
		    bottom: 100%;
		    right: 15px;
		    border: solid transparent;
		    content: " ";
		    height: 0;
		    width: 0;
		    position: absolute;
		    pointer-events: none;
		    border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,.7);
		    border-width: 8px;
		    z-index: 2;
		    margin-left: -8px;
		}
        /**
		 * ----------------------------------------
		 * animation
		 * ----------------------------------------
		 */
        @-webkit-keyframes menuAnimation {
            0% {
                opacity: 0;
                -webkit-transform: scaleY(0) translate3d(0, 0, 0);
                transform: scaleY(0) translate3d(0, 0, 0);
            }

            40%,
                {
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }

            65% {
                opacity: 1;
                -webkit-transform: scaleY(.99) translate3d(0, 0, 0);
                transform: scaleY(.99) translate3d(0, 0, 0);
            }

            100% {
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }
        }

        @keyframes menuAnimation {
            0% {
                opacity: 0;
                -webkit-transform: scaleY(0) translate3d(0, 0, 0);
                transform: scaleY(0) translate3d(0, 0, 0);
            }

            40%,
                {
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }

            65% {
                opacity: 1;
                -webkit-transform: scaleY(.99) translate3d(0, 0, 0);
                transform: scaleY(.99) translate3d(0, 0, 0);
            }

            100% {
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }
        }

        @-webkit-keyframes hidemenu {
            0% {
                opacity: 1;
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }

            100% {
                opacity: 0;
                -webkit-transform: scaleY(0) translate3d(0, 0, 0);
                transform: scaleY(0) translate3d(0, 0, 0);
            }
        }

        @keyframes hidemenu {
            0% {
                opacity: 1;
                -webkit-transform: scaleY(1) translate3d(0, 0, 0);
                transform: scaleY(1) translate3d(0, 0, 0);
            }

            100% {
                opacity: 0;
                -webkit-transform: scaleY(0) translate3d(0, 0, 0);
                transform: scaleY(0) translate3d(0, 0, 0);
            }
        }

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

		 .intro{
		  position: absolute;
		  text-align: center;
		  font-family:Sarabun;
		  font-size:24px;
		  left:0;
		  right:0;
		  top: 25%;
		  height: 100%;
		  z-index: 4;
		  padding:20px;
		  -webkit-transition: opacity 1s ease-in;
		  -moz-transition: opacity 1s ease-in;
		  -o-transition: opacity 1s ease-in;
		  -ms-transition: opacity 1s ease-in;
		  transition: opacity 1s ease-in;
		}
		.intro img {
		  width: 100px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 4;
		}

		.arrow{
		  bottom: 15px;
		}

		.arrow img {
		  width: 22px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		  background-color: rgba(0,0,0, 0.5);
		  border-radius: 20px;
		}

		.top{
		  font-size:20px;
		}

		.iconbar{
		  top: 45px;
		}

		.iconbar img {
		  width: 14px;
		  padding:10px;
		  cursor: pointer;
		  z-index: 2;
		}
		.popup-menu {
            right:15px;
        }
		.tooltip .tooltiptext {
		  visibility: hidden;
		  display:none;
		}
		.tooltip_zone .tooltiptext_zone {
		   display:none;
		   visibility: hidden;
		}
		.tooltip_arrow .tooltiptext_arrow {
		   display:none;
		   visibility: hidden;
		}

		.header-menu {
            display:none;
		   visibility: hidden;
        }

		}