/*
    support-service.css
*/
/*
    For reset.
*/

	*{
        -webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}

	button, input, select, textarea {
		font-family : inherit;
		font-size   : 100%;
	}

/************************************** For PC. **************************************/
	div.SERVICE_WP{
		width:100%;
        border-bottom:1px solid #434343;
        margin-bottom:10px;
        line-height:1.8em;
	}
	div.SERVICE_WP_TH{
		width:100%;
        border-bottom:1px solid #434343;
        margin-bottom:10px;
        line-height:1.8em;
        overflow-x: scroll;
	}

	div.SERVICE_SCR_TH{
		width:1450px;
	}
  /* ---------------------------------
      For Top Section 
    --------------------------------- */
	div.SERVICE_MAIN{
		width:100%;
		height:500px;
		background:url(../imgs/service_top_bg.jpg) no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		position:relative;
	}

	div.SERVICE_MAIN_BOX{
		width:320px;
		height:300px;
		padding:40px;
        background:#000;
        color:#fff;
		position:absolute;
        left:5%;
        top:100px;
	}

	div.SERVICE_MAIN_BOX h2{
		font-size:220%;
        font-weight:bold;
        margin-bottom:40px;
        text-align:center;
	}

	div.SERVICE_MAIN_BOX p{
		font-size:90%;
		margin:0;
		padding:0;
        line-height:1.5em;
	}

	div.SERVICE_BOX01{
		width:86%;
        margin:0 auto;
        padding:80px 0 50px 0;
		position:relative;
	}

	div.SERVICE_BOX01 h3{
		font-size:240%;
        font-weight:bold;
        margin-bottom:40px;
        color:#000;
	}

	div.SERVICE_BOX01 p{
		margin:0;
		padding:0;
        font-weight:bold;
        margin-bottom:30px;
        display:flex;
        align-items: center;
		font-size:120%;
	}

	div.SERVICE_BOX01 p img{
		width:auto;
        height:1.3em;
        margin-right:20px;
	}

	div.SERVICE_BOX02{
		width:100%;
        background:#E9F5F5;
        padding:0 0 80px 0;
		position:relative;
        margin-bottom:100px;
	}

	div.SERVICE_BOX02_01{
		max-width:1000px;
		position:absolute;
        top:0;
        left:0;
        background:#72C3C6;
        display:flex;
        align-items: center;
	}

	div.SERVICE_BOX02_01:lang(th){
		max-width:1300px;
	}

	div.SERVICE_BOX02_01 img{
		width:38%;
        height:auto;
	}

	div.SERVICE_BOX02_01 p{
		width:62%;
		color:#fff;
        text-align:center;
        padding:0 100px;
		font-size:120%;
	}

	div.SERVICE_BOX02_02_WP{
		border-top:140px solid #fff;
        padding-top:230px;
	}

	div.SERVICE_BOX02_02{
		width:86%;
        margin:0 auto;
	}

	div.SERVICE_BOX02 h3{
		font-size:240%;
        font-weight:bold;
        margin-bottom:70px;
        color:#000;
	}

	div.SERVICE_BOX02_02 p{
        margin:0;
        padding:0;
        margin-bottom:40px;
	}

	div.SERVICE_BOX02_02 h4{
        margin-bottom:10px;
	}

	div.SERVICE_BOX03{
		width:100%;
        background:#E6F1FF;
        padding:0 0 80px 0;
		position:relative;
	}

	div.SERVICE_BOX03_01{
		max-width:1000px;
		position:absolute;
        top:0;
        right:0;
        background:#9AC5F8;
        display:flex;
        align-items: center;
        flex-direction: row-reverse;
	}

	div.SERVICE_BOX03_01:lang(th){
		max-width:1300px;
	}

	div.SERVICE_BOX03_01 img{
		width:38%;
        height:auto;
	}

	div.SERVICE_BOX03_01 p{
		width:62%;
        text-align:center;
        padding:0 100px;
		font-size:120%;
	}

	div.SERVICE_BOX03_02_WP{
		border-top:140px solid #fff;
        padding-top:200px;
	}

	div.SERVICE_BOX03_02{
		width:86%;
        margin:0 auto;
	}

	div.SERVICE_BOX03 h3{
		font-size:240%;
        font-weight:bold;
        margin-bottom:70px;
        color:#000;
	}

	div.SERVICE_BOX03_02 p{
        margin:0;
        padding:0;
        margin-bottom:40px;
	}

	div.SERVICE_BOX03_02 h4{
        margin-bottom:10px;
	}

	div.SERVICE_BOX03_02 ul{
        margin:0;
        padding:0;
		width:50%;
	}

	div.SERVICE_BOX03_02 ul:lang(th) {
		width:50%;
	}

	div.SERVICE_BOX03_02 ul:lang(zh) {
		width:40%;
	}

	div.SERVICE_BOX03_02 ul li{
        display: flex;
		justify-content: space-between;
	}

	div.SERVICE_BOX03_02 ul li span{
        display: block;
		width:240px;
	}

	div.SERVICE_BOX05{
		width:86%;
        margin:0 auto;
        padding:80px 0;
        display:flex;
		justify-content: space-between;
	}

	div.SERVICE_BOX05_LEFT{
		width:40%;
	}

	div.SERVICE_BOX05_LEFT h3{
		font-size:200%;
        font-weight:bold;
        margin-bottom:40px;
        color:#000;
	}

	div.SERVICE_BOX05_LEFT hr{
        margin-bottom:40px;
	}

	div.SERVICE_BOX05 p{
		margin:0;
		padding:0;
	}

	div.SERVICE_BOX05_LEFT div.sns_link{
		display:flex;
        margin-top:20px;
	}

	div.SERVICE_BOX05_LEFT div.sns_link p{
		width:40px;
		height:40px;
        margin-right:20px;
        cursor:pointer;
	}

	div.SERVICE_BOX05_LEFT div.sns_link p img{
		width:100%;
		height:auto;
	}

	div.SERVICE_BOX05_RIGHT{
		width:49%;
        background:#CDE0E9;
        padding:60px 60px 40px 60px;
	}

	div.SERVICE_BOX05_RIGHT h3{
		font-size:180%;
        font-weight:bold;
        margin-bottom:30px;
        color:#000;
	}

	div.SERVICE_BOX05_RIGHT p{
        margin-bottom:20px;
	}

	div.SERVICE_BOX05_RIGHT p.line_btn{
        margin-top:30px;
        margin-bottom:20px;
	}

	div.SERVICE_BOX05_RIGHT input[type="text"]{
	  width:100%;
		padding: 14px 30px;
		font-size:1.0em;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
	  -ms-box-sizing: border-box;
	  box-sizing: border-box;
	}


	div.SERVICE_BOX05_RIGHT input[type="text"]:focus {
		box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	}

	div.SERVICE_BOX05_RIGHT textarea {
	  width:100%;
	  height: calc( 1.3em * 16 );
	  line-height: 1.3;
		padding: 14px 30px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -o-box-sizing: border-box;
	  -ms-box-sizing: border-box;
	  box-sizing: border-box;
	  font-size:1.0em;
	}


	div.SERVICE_BOX05_RIGHT textarea:focus {
		box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	}

	div.SERVICE_BOX05_RIGHT input[type="button"] {
	  width:100%;
		padding: 10px 30px;
		background: #71C5E8;
		font-size: 1.0em;
		color: #ffffff;
	}

	div.SERVICE_BOX05_RIGHT input[type="button"]:hover {
		cursor: pointer;
		background: #fff;
		color:#71C5E8;
	  transition: all .5s;
	}


/************************************** For SP. **************************************/
@media screen and (max-width:767px){
	div.SERVICE_WP{
        border-bottom:0;
        line-height:2.0em;
	}

	div.SERVICE_WP_TH{
		width:100%;
        margin-bottom:10px;
        border-bottom:0;
        line-height:2.0em;
        overflow-x: hidden;
	}

	div.SERVICE_SCR_TH{
		width:100%;
	}

	div.SERVICE_MAIN{
		height:400px;
		background-size: 230% auto;
		background-position: 70% 54%;
	}

	div.SERVICE_MAIN_BOX{
		width:100%;
		padding:20px;
		height:220px;
        position:absolute;
        top:180px;
       left: 0;
		background: rgba(0,0,0,0.4);
	}

	div.SERVICE_MAIN_BOX h2{
		font-size:160%;
		font-weight:bold;
		-webkit-text-stroke: 0;
		margin-bottom:20px;
        text-align:left;
	}

	div.SERVICE_BOX01{
		width:100%;
		padding: 40px 20px;
	}

	div.SERVICE_BOX01 h3{
		font-size:160%;
        margin-bottom:20px;
	}

	div.SERVICE_BOX01 p{
		font-size:100%;
        margin-bottom:10px;
	}

	div.SERVICE_BOX02{
        background:#fff;
        margin-bottom:20px;
        padding-bottom:40px;
	}

	div.SERVICE_BOX02_01{
		width:100%;
		position:relative;
        display:block;
        background:#fff;
        margin-bottom:0;
	}

	div.SERVICE_BOX02_01 img{
		width:90%;
        height:auto;
        margin-left:5%;
	}

	div.SERVICE_BOX02_01 p{
		width:100%;
        padding:20px;
		font-size:100%;
        background:#72C3C6;
	}

	div.SERVICE_BOX02_02_WP{
		border-top:0;
        padding-top:60px;
        background:#E9F5F5;
        margin-top:-20px;
	}

	div.SERVICE_BOX02_02{
		width:100%;
		padding:20px;
	}

	div.SERVICE_BOX02 h3{
		font-size:160%;
        margin-bottom:20px;
	}

	div.SERVICE_BOX03{
        background:#fff;
        margin-bottom:40px;
        padding-bottom:0;
	}

	div.SERVICE_BOX03_01{
		width:100%;
		position:static;
        display:block;
        background:#fff;
        margin-bottom:0;
	}

	div.SERVICE_BOX03_01 img{
		width:90%;
        height:auto;
        margin-left:5%;
	}

	div.SERVICE_BOX03_01 p{
		width:100%;
        padding:20px;
		font-size:100%;
        background:#9AC5F8;
	}

	div.SERVICE_BOX03_02_WP{
		border-top:0;
        padding-top:60px;
        background:#E6F1FF;
        margin-top:-20px;
	}

	div.SERVICE_BOX03_02{
		width:100%;
		padding:20px;
	}

	div.SERVICE_BOX03_02 ul{
		width:100%;
	}

	div.SERVICE_BOX03_02 ul:lang(th) {
		width:100%;
	}

	div.SERVICE_BOX03_02 ul:lang(zh) {
		width:100%;
	}

	div.SERVICE_BOX03 h3{
		font-size:160%;
        margin-bottom:20px;
	}

	div.SERVICE_BOX05{
		width:100%;
		padding:20px;
		flex-wrap: wrap;
	}

	div.SERVICE_BOX05_LEFT{
		width:100%;
        margin-bottom:20px;
	}

	div.SERVICE_BOX05_LEFT h3{
		font-size:160%;
        margin-bottom:20px;
	}

	div.SERVICE_BOX05_LEFT hr{
        display:none;
	}

	div.SERVICE_BOX05_RIGHT{
		width:100%;
        padding:30px 30px 20px 30px;
        margin-top:20px;
	}

	div.SERVICE_BOX05_RIGHT h3{
		font-size:140%;
	}





}