﻿/* Responsive for smaller screens */

@media (max-width: 760px) {
	#menu_button_wrapper {
		display: block;
		padding: 0.5em;
		color: #9d9d9d;
		border-bottom: 1px solid #E0F3F9;
		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
		box-shadow: 0 1px 0 rgba(255,255,255,.1);
		background-color:#E0F3F9;
	}

	#menu_button {
		box-sizing: border-box;
		float: left;
		padding: .1em .5em;
		border: 1px solid #df003c;
		border-radius: 5px;
		color: #df003c;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.sm_logo {
		position: absolute;
		width: 100px;
		left: 50%;
		margin-left: -50px;
		top: 5px;
	}

	#menu_button:hover {
		cursor: pointer;
		background-color: #E0F3F9;
	}

	#hamburger {
		float: right;
		padding-top: .15em;
	}

	#menu_button span {
		display: block;
		background-color: #df003c;
		width: 1.2em;
		height: .15em;
		border-radius: 1px;
		margin-bottom: .2em;
	}

	nav ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}

	.box_logo {
		display: none;
	}

	nav ul li {
		display: block;
	}

	nav ul li a {
		width: 100%;
		text-align: left;
		padding: 0.5rem;
		padding-left:1rem;
		font-size: 0.875rem;
	}

	.box_ihdintro img {
		width: 50%;
		max-width: 160px;
		margin-left: 90px;
	}

	.section00 .box_ihd img {
		width: 70% !important;
	}

	.box_ihdintro {
		padding: 10px 0 0 0px !important;
	}

	.section:not(:first-child) {
		padding-top: 4.5rem!important;
	}

	.section00 {
		min-height: 500px !important;
	}

	.section:not(:first-child) .bg_flower img {
		height: 80% !important;
	}

	.sec_title h1 {
		font-size: 1.125rem !important;
		display: inline-block;
	}

	.sec_title p {
		font-size: 0.875rem !important;
	}

	.section:first-child::before {
		content: '';
		width: 15%;
		height: 15%;
		min-width: 350px;
		background: url(../images/icon_cloud_left.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 0%;
		left: 1%;
		z-index: 999;
		animation: cloudLeft infinite 8s linear;
		-moz-animation: cloudLeft infinite 8s linear;
		-webkit-animation: cloudLeft infinite 8s linear;
	}
	.container >.section::before{
		content:'';
		display:none;
	}
	.section:first-child::after {
		content: '';
		width: 15%;
		min-width: 350px;
		height: 15%;
		background: url(../images/icon_cloud_right.png) no-repeat;
		background-size: contain;
		position: absolute;
		left: 80%;
		top: 60%;
		animation: cloudRight infinite 8s linear;
		-moz-animation: cloudRight infinite 8s linear;
		-webkit-animation: cloudRight infinite 8s linear;
	}

	.section_contanier .section::before {
		content: '';
		width: 15%;
		height: 15%;
		min-width: 350px;
		background: url(../images/icon_cloud_left.png) no-repeat;
		background-size: contain;
		position: absolute;
		top:0%;
		left: 1%;
		z-index: 99;
		animation: cloudLeft infinite 8s linear;
		-moz-animation: cloudLeft infinite 8s linear;
		-webkit-animation: cloudLeft infinite 8s linear;
	}

	.section_contanier .section::after {
		content: '';
		width: 15%;
		min-width: 350px;
		height: 15%;
		background: url(../images/icon_cloud_right.png) no-repeat;
		background-size: contain;
		position: absolute;
		left: 80%;
		top: 60%;
		animation: cloudRight infinite 8s linear;
		-moz-animation: cloudRight infinite 8s linear;
		-webkit-animation: cloudRight infinite 8s linear;
	}

	.container .section {
		padding-top: 5rem;
		margin-bottom: 3rem;
	}

	.section > ul > li > div {
		font-size: 0.875rem;
		padding-left: 8%;
		margin: auto;
		width: 220px;
		padding-bottom: 5px;
	}

	.section > ul > li > div .content_text{
		font-size: 0.75rem;
		padding-left: 1.595rem;
	}
	.section > ul > li > div .content_title_extend{
		    margin-left: 1.595rem;
	}
	.section > ul > li > div p img {
		width: 16px;
		vertical-align:sub;
	}

	.sec_title img {
		width: 20px;
		vertical-align: sub;
	}

	.section > ul > li > div::after {
    content: '';
    width: 70%;
    height: 0;
    position: absolute;
    border-bottom: #2E4579 2px dashed;
    left: 15%;
		bottom: 0;
	}

	.section > ul > li > div p {
		text-align: left;
		padding-top: 6px;
		padding: 0;
	}

	.section {
		min-height: 480px;
	}

	.section01 {
		min-height: 480px;
	}
	.section01> ul > li{
		padding: 10px 0;
	}
	.section01 > ul > li > div {
		/*padding-bottom: 10px;*/
		padding-left: 15%;
	}
	.section02{
		min-height:565px;
	}
	.section02 > ul > li {
		padding: 0.3rem 0!important;
	}

	.section02 > ul > li > div {
		/*padding-bottom: 10px;*/
		padding-left: 15%;
	}
	.section03 {
		min-height: 410px;
	}

	.section03 > ul > li {
		/*padding: 10px 0;*/
	}

	.section03 > ul > li > div {
		/*padding-bottom: 10px;*/
		padding-left: 15%;
	}

	.section04 {
		min-height: 680px;
	}

	.section04 > ul > li > div::after {
		content: '';
		width: 70%;
		height: 0;
		position: absolute;
		border-bottom: #2E4579 2px dashed;
		left: 10%;
		bottom: 3px;
	}
	.section04 > ul > li > div {
		/*padding-bottom: 8px;*/
		padding: 0 0 5px 10%;
	}
	.section > ul > li {
		margin: auto;
		min-width: 200px;
		padding: 0.5rem 0;
	}
	.section04 > ul > li{
		padding: 0.5rem 0;
	}
	.section05{
		min-height: 355px;
	}
	.section05 > ul > li > div {
		padding-left: 0;
		width: 200px !important;
		padding-top: 10%;
	}
	.section05 > ul > li{
		width:200px!important;
	}
	.container .section_contanier div.section{
    padding-top: 6rem!important;
	}
	.sec_title{
		padding-bottom: 1rem;
	}
	footer{
		font-size: 0.75rem;
	}
	nav{
		background-color:rgba(0,0,0,0);
	}
	#menu_list {
		background-color: rgb(224, 243, 249);
		width: 25%;
		left: 0;
		position: absolute;
		display:none;
		padding-bottom: 5px;
	}
	#menu_list_PC{
		display:none;
	}
}
