@charset "utf-8";
/* CSS Document */

/*--------------------------------------reset 此區塊請勿更動*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, /*p, */blockquote, pre,
/*a, */abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family:微軟正黑體;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*---------------------------------------------------------------------*/


body {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;

}
a img {border: none;}
a {color: #fff; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}
*:focus{outline:none;}


hr {
	margin: 0;
	padding: 0;
	clear: both;
	visibility:hidden;
}

ul,li,p{
	margin:0;
	padding:0;
}

h1,h2,h3 {
	text-decoration: inherit;
	font: inherit;
	font-weight: inherit;
}

header h1,#r0 h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

.container {width:100%;}

.a1 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/bg-green.jpg); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:80px 0px; overflow: hidden; clear: both;}
.a2 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/bg-orange.jpg); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:80px 0px; overflow: hidden; clear: both;}
.a3 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/bg-blue.jpg); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:80px 0px; overflow: hidden; clear: both;}
.a4 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/bg-pink.jpg); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:80px 0px; overflow: hidden;}


.songkran-a1 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/loykrathong/loykrathong-bg1.webp); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:80px 0px; overflow: hidden; clear: both;}
.songkran-a2 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/loykrathong/loykrathong-bg2.webp); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:40px 0px; overflow: hidden; clear: both;}
.songkran-a3 {position: relative; float:left; width: 100%; height:100%; background-image: url(../images/loykrathong/loykrathong-bg3.webp); background-repeat:no-repeat; background-position: 0 0; background-size:cover; padding:40px 0px; overflow: hidden; clear: both;}



.img-responsive {display: block; max-width: 100%; height: auto;}

.box {width:95%; }
.align-left {float:left;}
.align-right {float:right;}
.align-center {margin:0 auto;}
.title-align-left {float:left;}
.title-align-right {float:right;}
.text-align-left {text-align:left;}
.text-align-right {text-align:right;}
.text-align-center {text-align:center;}
.notch-left {background: linear-gradient(135deg, transparent 80px, #ffffff 0) top left;}
.notch-right {background: linear-gradient(-135deg, transparent 80px, #ffffff 0) top left;}
.loykrathong-title {font-size: 33px; font-weight: bold; font-style: italic; background: url(../images/loykrathong/loykrathong-title.webp) center center no-repeat; color: #ffffff; padding: 10px 25px; min-width:280px; height:86px; text-align: center; line-height: 40px;}



.theme-title {width:100%; float:left; margin-top:30px; margin-bottom:30px; clear: both; display: block;}
.theme-title img {margin-top:30px;}
.theme-title-tt {}
.theme-title-tt img {margin:0 auto;}
/*.theme-title img {float:left; max-width:250px;}*/
.content {width:40%; padding:0px 0px 25px 0px;}
.theme-pic {width:60%;}
.theme-pic-carousel {width:60%;}
.theme-pic-carousel img {width:100%;}
.content p {float:left;  padding:15px 35px; font-size:19px; line-height: 40px; font-weight: bold; color:#626262;}

.button-group {padding:0px 15px; width:95%; margin:0 auto;}
.button-group-btn {float:left; width:45%; margin:0px 5px;}
.btn-align-1 {text-align:right;}
.btn-align-2 {text-align:left;}
.button-group-one {padding:0px 15px; width:95%; margin:0 auto;}
.button-group-one-btn {width:90%; text-align: center; margin:0 auto; clear: both;}

.content-theme {width:43%; }
.content-theme p {float:left; padding:15px 15px 15px 45px; font-size:19px; line-height: 40px; font-weight: bold; color:#626262; text-align: left;}

.title-introduce {font-size:17px; font-weight: bold; color:#626262; padding:20px;}
.recommend {width:90%; margin:0 auto; }
.recommend-bg {float:left; background:#ffffff;}
.featured-img {width:55%; float:left;}
.featured-img img {width:100%;}
.featured-content {width:42%; float:left; padding:20px 10px 5px 40px;}
.featured-tt {font-size:30px; font-weight: bold; color:#82ae23; border-bottom: 1px dotted #dcdcdc; line-height: 46px;}
.featured-special {font-size:24px; font-weight: bold; color:#fc4c02; padding:10px 0px;}
.featured-con {font-size:17px; font-weight: bold; color:#626262; min-height:150px;}
.featured-content ul {padding:10px;}
.featured-content ul li {width:100%; float:left; padding:5px;}
.list-icon {text-indent: -10px; padding-left:10px;}
.big-price {font-size:36px; font-weight: bold; color:#ffff00; padding:0px 5px;}
.btn-order {width:100%; margin:0 auto; text-align: center;}

.stroke {width:90%; margin:20px auto;}
.icon-location {width:100%; height:25px; float:left; background: url(../images/loykrathong/icon-location.png) 0 0 no-repeat; padding-left:20px; line-height: 24px; text-align: left;}

.txt-sp {color:#fc4c02;}

@media screen and (max-width:1850px) {
.content-theme {width:36%;}
}

@media screen and (max-width:1645px) {
.content-theme {width:30%;}
}

@media screen and (max-width:1510px) {
.content-theme {width:100%;}
}

@media screen and (max-width:1300px) {
.featured-img {width:50%;}
.featured-content {width:42%; padding:20px 20px 5px 25px;}
.featured-con {min-height:0px;}
}

@media screen and (max-width:1024px) {
	
.featured-img {width:100%;}
.featured-img img {float:left; width:100%;}
.featured-content {width:94%; padding:20px 20px 15px 25px;}
.featured-con {min-height:0px;}
.btn-order {width:90%; margin:0 auto; text-align: center;}
}

@media screen and (min-width:1251px) {
.theme-big {display: block;}	
.theme-small {display: none;}	
}


@media screen and (max-width:1250px) {
.content {width:100%; padding:0px 0px 25px 0px;}
.theme-pic {width:100%;}
	
.theme-big {display: none;}	
.theme-small {display: block;}
	
.theme-pic-carousel {width:100%;}

}

@media screen and (min-width: 961px) {
.bigpic {display:block;}
.smallpic {display: none;}
.phonepic {display: none;}
}

@media screen and (max-width:960px) {
.bigpic {display: none;}
.smallpic {display: block;}
.phonepic {display: none;}
}
@media screen and (min-width: 769px) {
.songkran-bigpic {display: block;}
.songkran-smallpic {display: none;}
}

@media screen and (max-width: 768px) {
.songkran-bigpic {display: none;}
.songkran-smallpic {display: block;}

.content-theme p {float:left; padding:0px 15px 15px 25px; font-size:16px; line-height: 36px; font-weight: bold; color:#626262;}
}

@media screen and (max-width: 680px) {
.loykrathong-title {font-size: 33px; font-weight: bold; font-style: italic; background: url(../images/loykrathong/loykrathong-title.webp) center center no-repeat; color: #ffffff; padding: 10px 25px; min-width:280px; height:110px; text-align: center; line-height: 40px;}
}

@media screen and (max-width:467px) {
.bigpic {display: none;}
.smallpic {display: none;}
.phonepic {display: block;}

.button-group-btn {float:left; width:100%; margin:0px 5px;}
.btn-align-1 {text-align:center;}
.btn-align-2 {text-align:center;}
	
/*.theme-title {margin:0 auto; margin-top:-50px;}*/
.theme-title img {max-width:75%; margin:0 auto;}
/*.title-align-left {float:none;}*/
.title-align-right {float:none;}	
	
.content-theme {margin-top:30px;}
}




/*
==============================================
head-route1
==============================================
*/
.head-route1 {
		
    -webkit-animation-name: head-route1;
          animation-name: head-route1;

    animation-duration: 0.5s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}



@-webkit-keyframes head-route1 {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes head-route1 {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

/*
==============================================
head-route2
==============================================
*/
.head-route2 {
		
    -webkit-animation-name: head-route2;
          animation-name: head-route2;

    animation-duration: 0.5s;	
	-webkit-animation-duration: 2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}



@-webkit-keyframes head-route2 {
  0%, 30%, 63%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  43%, 46% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes head-route2 {
  0%, 30%, 63%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  43%, 46% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}



.btn-more a {
	background:#ff8c6a;
    color:#ffffff;
    padding:10px;
    float:right;
    margin-right:10px;
    text-decoration: none;
}
.btn-more a:hover {
	background:#f67853;
    color:#ffffff;
    padding:10px;
    float:right;
    margin-right:10px;
    text-decoration: none;
}

.stroke-btn {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.stroke-btn:after {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.stroke-btn:hover {
	-webkit-transform: translateY(1%);
	-moz-transform: translateY(1%);
	-ms-transform: translateY(1%);
	transform: translateY(1%);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}