/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    #################################################### */

    /* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */

    .nav-brand img {
        height: 45px;
    }
    @media (max-width: 576px) {
        .nav-brand img {
            height: 16px;
        }
    }

    /* Basic */
		html {
			margin: env(safe-area-inset); 
			/* your css to create a cover image*/ 
			padding: env(safe-area-inset); /* <- this is the missing piece. Add it.*/
		}
		body {
			background-color: #f4d846 !important;
			-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, Edge, Opera and Firefox */
		}

  		h1, h2, h3, h4, h5, h6 {
			font-weight: 400 !important;
			color: #483949;
			line-height: 1.25em;
		}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border-bottom-color: transparent;
			font-weight: 400!important;
			font-size: 1.25rem !important;
		}

		h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
			font-weight: 600;
		}

		h2 {
			font-size: 2.85em;
		}

		h3 {
			font-size: 1.25em;
		}

		h4 {
			font-size: 1em;
			margin: 0 0 0.25em 0;
		}

		strong, b {
			font-weight: 400;
			color: #483949;
		}

		a {
			color: inherit;
			text-decoration: none;
			-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
			-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
			-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
			transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		}

			a:hover {
				color: #ef8376;
				border-bottom-color: transparent;
			}

		ol, ul {
			list-style: none;
		}

		.timestamp {
			color: #4a90e2;
			font-size: 0.8em;
		}
  		/* Sections/Article */
		section, article {
			margin-bottom: 3em;
		}

			section > :last-child, section:last-child, article > :last-child, article:last-child {
				margin-bottom: 0;
			}

			section.special > header, section.special > footer, article.special > header, article.special > footer {
				text-align: center;
			}

		.row > section, .row > article {
			margin-bottom: 0;
		}

		header {
			margin: 0 0 1em 0;
		}

			header > p {
				display: block;
				font-size: 1.5em;
				margin: 1em 0 2em 0;
				line-height: 1.5em;
				text-align: inherit;
			}

		/* List */
		ul.default {
			list-style: disc;
			padding-left: 1em;
		}

			ul.default li {
				padding-left: 0.5em;
			}

		ul.actions {
			margin: 3em 0 0 0;
		}

			form ul.actions {
				margin-top: 0;
			}

			ul.actions li {
				display: inline-block;
				margin: 0 0.75em 0 0.75em;
			}

				ul.actions li:first-child {
					margin-left: 0;
				}

				ul.actions li:last-child {
					margin-right: 0;
				}

		ul.divided li {
			border-top: solid 1px rgba(128, 128, 128, 0.2);
			padding-top: 1.5em;
			margin-top: 1.5em;
		}

			ul.divided li:first-child {
				border-top: 0;
				padding-top: 0;
				margin-top: 0;
			}

		ul.menu {
			height: 1em;
			line-height: 1em;
		}

			ul.menu li {
				display: inline-block;
				border-left: solid 1px rgba(128, 128, 128, 0.2);
				padding-left: 1.25em;
				margin-left: 1.25em;
			}

				ul.menu li:first-child {
					border-left: 0;
					padding-left: 0;
					margin-left: 0;
				}

		ul.icons {
			position: relative;
			background: rgba(128, 128, 128, 0.05);
			border-radius: 4em;
			display: inline-block;
			padding: 0.35em 0.75em 0.35em 0.75em;
			font-size: 1.25em;
			cursor: default;
		}

			ul.icons li {
				display: inline-block;
			}

				ul.icons li a {
					display: inline-block;
					background: none;
					width: 2.5em;
					height: 2.5em;
					line-height: 2.5em;
					text-align: center;
					border-radius: 100%;
					border: 0;
					color: inherit;
				}

					ul.icons li a:hover {
						color: #ef8376;
					}

		ol.default {
			list-style: decimal;
			padding-left: 1.25em;
		}

			ol.default li {
				padding-left: 0.25em;
			}

  		.navbar {
  			height: 60px;
			background-color: #acd059;
			position: fixed;
			width: 100vw;
			z-index: 9999;
  		}

  		.nav-link {
  			font-family: NotoSansCJKtc;
			font-size: 1.25em;
			font-stretch: normal;
			font-style: normal;
			line-height: normal;
			letter-spacing: normal;
			text-align: left;
			border-left:20%;
			color: #4a4a4a !important;
			background-color: rgba(255, 255, 255, 0) !important;
			padding-left: 2rem !important;
  		}

  		.nav-link.active, .nav-link:hover {
            font-size: 1.25em;
  			font-weight: bold;
			color: #00756f !important; 
  		}
		.back_menu{
			width: 100%;
			height: 74px;
			background: #ecf9f4;
			font-size: 1.428em;
		}
		.back_menu_content{
			position: relative;
			left:5%;
			width: 90%;
			top: 20px;
		}
		.back_menu_click{
			color: #338615;
		}
		.title-images {
			background: #acd059;
			width: 100%;
		}
		.title-images img {
			width: 100%;
		}

  		.block1 {
  			background-color: #a7e6f2;
  		}
  		/* .block1::before {
  			content: "";
  			background: url("/images/public/bg/index/bg2@4x.png") top center no-repeat;
  			height: 389px;
		    width: 100%;
		    position: absolute;
		    background-size: contain;
  		} */
		.block1_top {
			content: url("/images/public/bg/index/bg2@4x.png");
			width:100%;
		}
		.block1_bottom {
			content: url("/images/public/bg/index/bg4@4x.png");
			width:100%;
		}
		.block1_bottom2 {
			content: url("/images/public/bg/index/boy1@4x.png");
		}

  		.googlemap_frame {
			/* top: -120px; */
  			position: relative;
  			left: 5vw;
  			width: 90vw;
  			height: 40rem;
  			border-radius: 20px;
  			border: solid 20px #8b572a;
  			background-color: #FFFFFF;
			z-index: 1;
  		}

  		.block2 {
  			position: relative;
			top: -1px;
  		}
  		.block2 .container-fluid {
            padding-top: 20px;
			height: 850px;
            background-color: #14c19f;
			/* background: url(/images/public/bg/index/elephant@4x.png) #14c19f bottom center no-repeat; */
  		}
		  .block2 .news{
			z-index: 1;
		}
		.block2 .elephant {
			position: absolute;
			top: -211px;
			z-index: 0;
			right: 0px;
			content: url("/images/public/bg/index/elephant@3x.png");
		}
  		.block2 .w-100 {
			content: url("/images/public/bg/index/bg6@4x.png");
		    position: absolute;
		    bottom: -1px;
  		}
		.block2::after {
			/* background: url("/images/public/bg/index/elephant@4x.png") #000000 top center no-repeat; */
			height: 100px;
		}
  		/*
  		.block2::after {
  			content: "";
  			background: url("/images/public/bg/index/bg6.png") #000000 top center no-repeat;
  			height: 174px;
		    width: 100%;
		    position: absolute;
  		}
  		*/
  		
  		.news {
			position: relative;
  			left: 20vw;
  			width: 60vw;
  			padding: 20px;
  			border-radius: 5px;
			background-color: rgba(255,255,255,0.8);
  		}

  		.news ul {
  			padding-left: 0px;
			  line-height:1 !important;
  		}
		h3{
			line-height:1 !important;
		}
		h3 a{
			font-size: 0.8em !important;
			font-weight: 350px !important;
		}
		.block3{
			position: relative;
		}
		.block3 .bg{
			position: absolute;
			content: url("/images/public/bg/index/bg7@4x.png");
			width: 100%;
		}
		.block3 .w-25 {
			position: absolute;
    		z-index: 10;
			background: url("/images/public/bg/index/sun@4x.png") top center no-repeat;
			height: 380px;
		}
  		.block3 .container-fluid {
			/* background: #FFFFFF; */
  			width: 100vw;
  		}
  		.block3 .w-100 {
			position: relative;
  			content: url("/images/public/bg/index/bg8@4x.png");
  			width: 100vw;
  		}
		.block3 .container-fluid {
			padding: 30px;
			padding-top: 170px;
			width: 100%;
		}

  		footer {
  			position: relative;
			background-color: #f4d846;
  		}

  		footer .container-fluid {
  			background: url("/images/public/bg/index/bg9_bottom@4x.png") #f4d846 top center no-repeat;
  			height: 467px;
  			padding-top: 150px;
  		}
		
		.footer3   {
			color: #FFFFFF;
			background: #845932;
			width: 100%;
		}
        @media screen and (max-width: 1440px) {
			.back_menu{
				font-size: 1.428em;
			}
			/* .block1::before {
                background: url("/images/public/bg/index/bg2@3x.png") top center no-repeat;
                height: 292px;
				width:100%;
                background-size: contain;
            } */
		  .block1_top {
				content: url("/images/public/bg/index/bg2@3x.png");
				width:100%;
			}
			.block1_bottom {
				content: url("/images/public/bg/index/bg4@3x.png");
				width:100%;
			}
			.block1_bottom2 {
				position: absolute;
				content: url("/images/public/bg/index/boy1@3x.png");
				z-index: 0;
				top: 540px;
			}
            .googlemap_frame {
				/* height: 625px; */
				height: 40rem;
                border-radius: 10px;
                border: solid 10px #8b572a;
            }

            .block2 .container-fluid {
                height: 760px;
				/* background: url(/images/public/bg/index/elephant@3x.png) #14c19f bottom center no-repeat; */
				background:  #14c19f;
            }
			.block2 .news{
				z-index: 1;
			}
            .block2 .elephant {
				position: absolute;
				top: -158px;
				z-index: 0;
                right: 0px;
                content: url("/images/public/bg/index/elephant@3x.png");
            }
			.block2 .w-100 {
				content: url("/images/public/bg/index/bg6@3x.png");
				position: absolute;
				bottom: -1px;
			  }
			.block3 .bg{
				position: absolute;
				content: url("/images/public/bg/index/bg7@3x.png");
				width: 100%;
			}
			.block3 .w-25 {
				background: url("/images/public/bg/index/sun@3x.png") top center no-repeat;
				height: 370px;
			}
            .block3 .container-fluid {
                /* background:#FFFFFF ; */
                width: 100vw;
            }
            .block3 .w-100 {
				position: relative;
                content: url("/images/public/bg/index/bg8@3x.png") ;
            }
			.block3 .container-fluid {
				padding-top: 130px;
			}
            footer .container-fluid {
				background: url("/images/public/bg/index/bg9_bottom@3x.png") #f4d846 top center no-repeat;
                height: 350px;
                padding-top: 150px;
            }
			.footer3   {
                background: #845932;
				width: 100%;
            }
        }

  		@media screen and (max-width: 960px) {
			.back_menu{
				font-size: 1em;
			}
			.block1::before {
	  			background: url("/images/public/bg/index/bg2@2x.png") top center no-repeat;
	  			height: 195px;
				  width:100%;
                background-size: contain;
	  		}
			.block1_bottom {
				content: url("/images/public/bg/index/bg4@2x.png");
				width:100%;
			}
			.block1_bottom2 {
				content: url("/images/public/bg/index/boy1@2x.png");
			}
  			.googlemap_frame {
				/* top: 50px; */
  				height: 450px;
	  			border-radius: 10px;
	  			border: solid 10px #8b572a;
	  		}
			
            .block2 .container-fluid {
                height: 750px;
				background: url(/images/public/bg/index/elephant@2x.png) #14c19f bottom center no-repeat;
            }
			.block2 .elephant {
				display: none;
			}
			/*
            .block2 .elephant {
				position: absolute;
				top: 325px;
                right: 0px;
                content: url("/images/public/bg/index/elephant@2x.png");
            }*/
			.block2 .w-100 {
				content: url("/images/public/bg/index/bg6@2x.png");
				position: absolute;
				bottom: -1px;
			  }

            .news {
                left: 5vw;
                width: 85vw;
            }

			.block3 .w-25 {
				background: url("/images/public/bg/index/sun@2x.png") top center no-repeat;
				height: 190px;
			}
			.block3 .container-fluid {
	  			background: url("/images/public/bg/index/bg7@2x.png") #FFFFFF top center no-repeat;
	  			height: 891px;
	  		}
	  		.block3 .w-100 {
	  			background: url("/images/public/bg/index/bg8@2x.png") top center no-repeat;
	  			height: 126px;
	  		}
			.block3 .container-fluid {
				padding-top: 80px;
			}
	  		footer .container-fluid {
	  			background: url("/images/public/bg/index/bg9_bottom@2x.png") #f4d846 top center no-repeat;
	  			height: 348px;
	  			padding-top: 126px;
	  		}
			.footer3   {
                background: #845932;
				width: 100%;
            }

			.classynav{
				height: 100%;
				overflow: hidden;
			}
			.navbackground{
				flex-direction: column;
				background-color:  #77D1CD ;
				width: 100%;
				height: 100%;
				display: "";
			}
			.navi-mg{
				content: url("/images/public/bg/index/bg7@2x.png") ;
				background-color: #FFFFFF;
				max-width: 100%;
			}
  		}

  		@media screen and (max-width: 480px) {
			.back_menu{
				font-size: 1em;
			}
	  		h2 {
				font-size: 1.75em !important;
			}

			h3 {
				font-size: 1.25em !important;
			}

			h4 {
				font-size: 1em !important;
			}

			h5 {
				font-size: 0.8em !important;
			}
			h5 a{
				font-size: 0.8em !important;
			}
			/* .block1::before {
	  			/* background: url("/images/public/bg/index/bg2.png") top center no-repeat;
	  			 height: 97px; 
				width:100%;
                background-size: contain; 
	  		} */
			  .block1_top {
				content: url("/images/public/bg/index/bg2.png");
				width:100%;
			}
			.block1_bottom {
				/* padding-top:45px; */
				content: url("/images/public/bg/index/bg4.png");
				width:100%;
			}
			.block1_bottom2 {
				content: url("/images/public/bg/index/boy1.png");
			}
  			.googlemap_frame {
				/* top: 50px; */
  				height: 372px;
	  			border-radius: 10px;
	  			border: solid 10px #8b572a;
	  		}

            .block2 .container-fluid {
                height: 750px;
				background: url(/images/public/bg/index/elephant.png) #14c19f bottom center no-repeat;
            }
			.block2 .elephant {
				display: none;
			}
			/*
            .block2 .elephant {
                position: absolute;
                top: 347px;
                right: 0px;
                content: url("/images/public/bg/index/elephant.png");
            }*/
            .block2 .w-100 {
				content: url("/images/public/bg/index/bg6.png");
				position: absolute;
				bottom: -1px;
			  }

  			.news {
	  			left: 5vw;
	  			width: 85vw;
	  		}

			/* Section/Article */
			section, article {
				margin-bottom: 2em;
			}

				section:last-child, article:last-child {
					margin-bottom: 0;
				}

			.row > section, .row > article {
				margin-bottom: 2em;
			}

			header > p {
				font-size: 1.25em;
			}

			/* List */
			form ul.actions {
				margin-top: 0;
			}

			ul.actions li {
				display: block;
				margin: 0.75em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

			ul.menu {
				height: auto;
				text-align: center;
			}

				ul.menu li {
					display: block;
					border: 0;
					padding: 0.75em 0 0 0;
					margin: 0;
				}

					ul.menu li:first-child {
						padding-top: 0;
					}

			ul.icons {
				font-size: 1em;
				padding: 0.35em 0.5em 0.35em 0.5em;
			}

				ul.icons li a {
					width: 2.25em;
				}

	  		
			.block3 .w-25 {
				background: url("/images/public/bg/index/sun.png") top center no-repeat;
				height: 92px;
			}
			.block3 .container-fluid {
	  			background: url("/images/public/bg/index/bg7.png") #FFFFFF top center no-repeat;
	  			height: 446px;
	  		}
	  		.block3 .w-100 {
	  			background: url("/images/public/bg/index/bg8.png") top center no-repeat;
	  			height: 63px;
	  		}
			.block3 .container-fluid {
				padding: 10px;
				padding-top: 40px;
			}
	  		footer .container-fluid {
	  			background: url("/images/public/bg/index/bg9_bottom.png") #f4d846 top center no-repeat;
	  			height: 151px;
	  			padding-top: 50px;
	  		}
			.footer3   {
                background: #845932;
				width: 100%;
            }
			.classynav{
				height: 100%;
				overflow: hidden;
			}
			.navbackground{
				flex-direction: column;
				background-color:  #14c19f ;
				width: 100%;
				height: 100%;
				display: "";
			}
			.navi-mg{
				content: url("/images/public/playground/boy1@2x.png") ;
				background-color: #FFFFFF;
				max-width: 100%;
			}
  		}