html,body{
	font-family: 'Kanit', sans-serif;
	font-weight: 300;
	color: #5e5f5f;
}
body{
	padding-top: 130px;
}
a{
	color: #333;
}
a:hover{
	color: #f47b20;
}
h1,h2,h3,h4,h5,strong{
	font-weight: 400;
}
#ifm{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	height: 300px;
	z-index: 9999;
}

.Error404{
	padding: 150px 0;
	text-align: center;
	color: #ccc;
	font-size: 30px;
}
#mainloading{
	display: none;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}
.lds-ripple {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0;
  }
}

.mainnav{
	border-radius: 0;
	border: none;
	text-align: center;
	margin-bottom: 0;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	background: #fff;
	justify-content: space-between;
    align-items: stretch;
    z-index: 999;
}
.mainnav .smenu{
	width: 100%;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    min-height: 100%;
    justify-content: flex-end;
}
.mainnav .smenu .top_menu{
	position: absolute;
	top: 0;
	right: 30px;
	display: flex;
	color: #fff;
	font-size: 20px;
	border-radius: 0 0 15px 15px;
	background: #7ab5b1;
}
.mainnav .smenu .top_menu > div{
	padding: 15px 20px;
}
.mainnav .smenu .top_menu .m_right{
	border-radius: 0 0 15px 15px;
	padding-left: 70px;
	background: #676b69 url('../img2/i-phone.png') 30px center no-repeat;
}
.mainnav .logo > img{
	height: 130px;
	padding: 20px 30px;
}
.mainnav .navbar-nav{
	float: none;
}
.mainnav .navbar-nav>li{
	display: inline-block;
	float: none;
}
.mainnav .navbar-nav>li>a{
	color: #7ab5b1;
	font-size: 18px;
	padding-left: 25px;
	padding-right: 25px;
	font-weight: 400;
}
.mainnav .navbar-nav>li>ul{
	border: none;
	border-radius: 0;
}
.mainnav .navbar-nav>li>ul > li > a{
	padding: 10px 25px;
	font-size: 16px;
	font-weight: 300;
}
.mainnav .navbar-nav>li > .dropdown-menu>li>a:focus, 
.mainnav .navbar-nav>li > .dropdown-menu>li>a:hover{
	background: rgba(109, 174, 170, 0.9);
	color: #fff;
}
.mainnav .navmenu{
	background: #fff;
}
.mainnav .navmenu .nav>li.open>a,
.mainnav .navmenu .nav>li>a:focus,
.mainnav .navmenu .nav>li>a:hover{
	color: #333;
	background: rgba(255, 255, 255, 1);
}
.mainnav .submenu{
	background: rgba(252, 242, 226, 0.9);
	padding: 40px 0;
	padding-bottom: 20px;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
}
.mainnav .submenu a{
	display: inline-block;
}
.mainnav .submenu .name{
	padding: 10px 0;
	font-size: 18px;
	color: #666;
}
footer .row1{
	background: #99ece8;
	padding: 60px 0;
}
footer .row1 ul.navfooter > li{
	display: block;
}
footer .row1 ul.navfooter > li > a{
	font-size: 18px;
	font-weight: 400;
	display: block;
	margin-bottom: 10px;
}
footer .row1 ul.navfooter > li > a:hover{
	color: #6DAEAA;
}
footer .row1 ul.navfooter > li > ul{
	list-style: none;
	padding: 0;
}
footer .row1 ul.navfooter > li > ul > li > a{
	color: #666;
	font-size: 16px;
	padding: 5px 0;
	display: block;
}
footer .row1 .col4 ul.navfooter > li address .name{
	font-size: 32px;
	color: #6DAEAA;
}
footer .row1 .col4 ul.navfooter > li address p{
	color: #666;
}
footer .row1 .col5 a{
	color: #666;
}
footer .row1 .col5 .icon{
	margin-bottom: 25px;
}
footer .row1 .col5 .icon > a{
	display: inline-block;
	margin-right: 5px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
footer .row1 .col5 .icon > a:hover{
-webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
     -o-transform: scale(1.1);
        transform: scale(1.1);
}
footer .row1 .col5 .info > a{
	display: block;
	color: #6DAEAA;
	font-size: 18px;
}
footer .row1 .col5 .info > a:hover{
	color: #6DAEAA;
}
footer .row2{
	background: #fff;
	padding: 30px 0;
	padding-bottom: 50px;
}
footer .row2{
	color: #666;
}
footer .row2 .col2{
	text-align: right;
}
footer .row2 .ms1{
	color: #333;
	padding-bottom: 5px;
}
footer .row2 .ms1 strong{
	color: #6DAEAA;
	font-weight: 400;
	font-size: 16px;
}
.innerheadname{
	background: #6DAEAA;
	color: #fff;
	text-align: center;
	padding: 15px 0;
	font-size: 24px;
	position: relative;
}
.innerheadname::before{
	content: '';
	height: 58px;
	width: 163px;
	background: url('/web-assets/img/i-h-top.png') center bottom no-repeat;
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	margin: auto;
}
.innerheadname::after{
	content: '';
	height: 58px;
	width: 163px;
	background: url('/web-assets/img/i-h-bottom.png') center bottom no-repeat;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: auto;
}
.innerheadname img{
	margin-right: 15px;
}
.boxcuslists{
	padding: 50px 0;
	padding-top: 90px;
	background: #e7e7e7;
}
.boxcuslists ul>li{
	float: left;
	width: 25%;
	padding: 0 10px;
	padding-bottom: 50px;
}
.boxcuslists ul>li a{
	display: block;
	border-radius: 5%;
	overflow: hidden;
}
.boxcuslists ul>li a > img{
	width: 100%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxcuslists ul>li a:hover > img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.boxcuslists ul>li p{
	text-align: center;
	margin: 0;
	margin-top: 15px;
	font-size: 18px;
	color: #5e5f5f;
}
.boxroomslide{
	padding: 80px 0;

}
.boxroomslide #roomslide{
	float:left;
	width: calc(100% - 100px);
}
.boxroomslide #roomslide .roomimg{
	float: left;
	width: 50%;
}
.boxroomslide #roomslide .roomimg > img{
	width: 100%;
}
.boxroomslide #roomslide .roominfo{
	padding-left: 55%;
	font-size: 18px;
	color: #5e5f5f;
}
.boxroomslide #roomslide .roominfo .type{
	color: #666;
	font-size: 26px;
}
.boxroomslide #roomslide .roominfo .name{
	color: #6daeaa;
	font-size: 48px;
	margin-bottom: 5px;
}
.boxroomslide #roomslide .roominfo p{
	margin-bottom: 40px;
}
.roommenu{
	float: right;
}
.roommenu > ul > li{
	display: block;
	padding-bottom: 5px;
}
.roommenu > ul > li > a{
	display: block;
	font-size: 30px;
	background: #cfcfcf;
	color: #fff;
	padding: 10px 20px;
	font-weight: 400;
}
.roommenu > ul > li.active > a{
	background: #6DAEAA;
}
#roomslide .roomlists{
	display: none;
}
a.seemore{
	border: 1px solid #fff;
	padding: 10px 25px;
	font-size: 18px;
	display: inline-block;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxnews{
	background: #6DAEAA;
	color: #fff;
	padding: 50px 0;
	padding-bottom: 70px;
}
.boxnews .container > h3,
.boxnews .container > p{
	text-align: center;
}
.boxnews .container > h3{
	font-size: 30px;
	font-weight: 400;
}
.boxnews .newslists{
	margin-top: 30px;
}
.boxnews .newslists > ul{
	margin-left: -15px;
	margin-right: -15px;
}
.boxnews .newslists > ul > li{
	width: 25%;
	float:left;
	padding: 15px;
}
.boxnews .newslists > ul > li a.img{
	display: block;
	margin-bottom: 15px;
	overflow: hidden;
}
.boxnews .newslists > ul > li a.img > img{
	width: 100%;
	overflow: hidden;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxnews .newslists > ul > li:hover a.img > img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.boxnews .newslists > ul > li p{
	margin-bottom: 30px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.boxnews a.seemore{
	color: #fff;
	font-size: 16px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.boxnews a.seemore:hover{
	background: rgba(255, 255, 255, 0.2);
}
.innerpage img{
	max-width: 100%;
}
.innertg{
	width: 100%;
}
.innerhtml{
	
}
.abouttop{
	margin-bottom: 40px;
	padding-top: 100px;
}
.aboutsec{
	padding-bottom: 100px;
}
.abouttop h1,
.aboutsec h4{
	color: #6DAEAA;
}
.abouttop .img-responsive,
.aboutsec .img-responsive{
	margin-bottom: 20px;
	margin-top: 15px;
}
.definition1{
	padding: 150px 0;
}
.definition2{
	position: relative;
	background: url('/web-assets/img/care-bg.jpg') center center no-repeat;
	background-size: cover;
	padding: 50px 0;
}
.definition2 ul.careinfo{
	list-style: none;
	padding: 0;
	padding-left: 50%;
}
.definition2 ul.careinfo > li{
	padding: 20px 25px;
	padding-left: 0;
	color: #fff;
	min-height: 120px;
}
.definition2 ul.careinfo > li .icon{
	font-size: 70px;
	float: left;
	width: 120px;
	text-align: center;
	line-height: 1;
}
.definition2 ul.careinfo > li .desc{
	padding-left: 120px;
}
.definition2 ul.careinfo > li .desc strong{
	font-size: 16px;
}
.definition2 ul.careinfo > li.bg1{
	background: rgba(252, 183, 166, 0.9);
	margin-left: -90px;
}
.definition2 ul.careinfo > li.bg2{
	background: rgba(242, 211, 140, 0.9);
}
.definition2 ul.careinfo > li.bg3{
	background: rgba(198, 208, 175, 0.9);
}
.definition2 ul.careinfo > li.bg4{
	background: rgba(149, 204, 199, 0.9);
}
.serviceinner{
	padding-top: 100px;
	padding-bottom: 50px;
}
.serviceinner > h1{
	text-align: center;
	margin-bottom: 50px;
	color: #6DAEAA;
	font-size: 40px;
	font-weight: 300;
}
.servicehtml{
	padding: 56px 0;
	font-size: 20px;
}
.about4{
	padding: 150px 0;
	padding-bottom: 250px;
}
.about4 .aboutbox1{
	padding-bottom: 60px;
}
.about4 .aboutbox1 .col1{
	padding-right: 40px;
}
.about4 .aboutbox1 h1{
	color: #6DAEAA;
	font-weight: 300;
	margin-bottom: 20px;
}
.about4 .aboutbox1 p{
	font-size: 18px;
}
.aboutbox2 .row{
	position: relative;
	display: flex;
}
.aboutbox2 .col1,
.aboutbox2 .col2{
	padding: 0;
}
.aboutbox2 .col1{
	background: #3e9898;
	color: #fff;
	padding: 50px 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 55%;
}
.aboutbox2 .col2{
	width: 45%;
}
.aboutbox2 .col1 h2{
	font-weight: 200;
	line-height: 50px;
	text-align: center;
	font-size: 24px;
	margin: 0;
}
.managerbox{
	padding: 150px 0;	
}
.managerbox .row{
	padding-bottom: 100px;
}
.managerbox .coluser{
	position: relative;
}
.managerbox .coluser img{
	max-width: 80%;
}
.managerbox .coluser .positiontitle{
	background: #6DAEAA;
	color: #fff;
	font-size: 50px;
	padding: 20px 40px;
	display: inline;
	position: absolute;
	bottom: -30px;
	right: 0;
}
.managerbox .coluser .positiontitle.bg2{
	background-color: #20b4c2;
}
.managerbox .colright .colinfo{
	text-align: right;
	padding-right: 140px;
}
.managerbox .colinfo .name{
	color: #6DAEAA;
	font-size: 34px;
	margin-bottom: 15px;
}
.managerbox .colinfo .position{
	color: #333;
	font-size: 28px;
}
.managerbox .colinfo .company{
	color: #999;
	font-size: 28px;
	margin-bottom: 40px;
}
.managerbox .colinfo .seemore{
	font-size: 24px;
}
.mfp-bg{
    opacity: 0.95;
    background: #fff;
}
.mdpopup{
    background: #FFF;
    text-align: left;
    padding: 70px 50px;
    padding-bottom: 50px;
    position: relative;
    max-width:1080px;
    margin: 20px auto;
    position: relative;
    border: 1px solid #6DAEAA;
}
.mdpopup .mfp-close{
	background: #6DAEAA;
	color: #fff;
	font-size: 40px;
	top: -22px;
	right: -22px;
	opacity: 1;
}
.mdpopup .managerbox{
	padding-top: 0;
}
.mdpopup .managerbox .colinfo p{
	font-size: 18px;
	color: #999;
}
.managerbox .coluser{
	width: 40%;
}
.managerbox .colinfo{
	width: 60%;
}
.mdpopup .managerbox .coluser .positiontitle{
	font-size: 30px;
	right: 20px;
}
.newsinner{
	background: #7bbbb7;
	color: #fff;
	padding-top: 80px;
}
.newsinner.views{
	padding-bottom: 150px;
}
.newsinner .infotitle{
	text-align: center;
	padding-bottom: 50px;
}
.newsinner .infotitle h1{
	font-weight: 300;
	font-size: 50px;
	margin-bottom: 20px;
}
.newsinner .infotitle p{
	font-size: 22px;
}
.newslists{
	display: block;
	margin-left: -15px;
	margin-right: -15px;
	display: flex;
	flex-wrap: wrap;
}
.newslists > li{
	width: 25%;
	float: left;
	height: 400px;
	padding: 0 15px;
}
.newslists > li a.img{
	display: block;
	height: 200px;
	overflow: hidden;
}
.newslists > li a.img > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.newslists > li:hover a.img > img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.newslists > li .info a.subject{
	display: block;
	color: #fff;
	font-size: 16px;
	margin: 10px 0;
	margin-bottom: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.newslists > li .info a.seemore{
	color: #fff;
}
.newslists > li .info a.seemore:hover{
	background: rgba(255, 255, 255, 0.2);
}
.rightnews .newslists > li{
	width: 100%;
	height: auto;
	padding-bottom: 20px;
}
.rightnews .newslists > li .info a.subject{
	margin-bottom: 15px;
}
.rightnews .newslists > li .info a.seemore{
	display: none;
}
/* pagination */
.innerPagination {
    text-align: center;
    padding: 25px 0;
}
.innerPagination .pagination {
    margin: 0;
}

.innerPagination .boxleft {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0
}
.innerPagination .boxleft .form-group label{
	display: inline-block;
	padding: 0 15px;
}
.innerPagination .boxleft>li,
.innerPagination .boxright>li {
    white-space: nowrap;
    text-align: center;
}

.innerPagination .boxright {
    list-style: none;
    padding: 0;
    margin: 0
}

.page-item.active .page-link{
    background-color: #fbcf8c;
    border-color: #fbcf8c;
    border-radius: 0;
}
.page-item.active .page-link:hover{
    background-color: #fcb146;
    border-color: #fcb146;
}
.pagination>li>a,
.pagination>li>span {
    color: #333;
    border-radius: 0!important;
    border: none;
    font-size: 18px;
    padding: 10px 20px;
    margin-left: 2px;
    margin-right: 2px;
    color: #bbb;
    font-weight: 400;
}
.pagination.mini>li>a {
    padding: 3px 7px;
}
.newsinner.views .innerheader{
	font-weight: 300;
}
#TopSlide .img{
	height: 580px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
#TopSlide .img > img{
	height: 100%;
}
#TopSlideNav .img{
	padding: 10px;
	height: 100px;
	overflow: hidden;
}
.leftnews{
	width: 75%;
}
.rightnews{
	width: 25%;
}
/* gallery */
.galleryinner{
	background: #e5e5e5;
	padding-top: 80px;
	padding-bottom: 80px;
}
.galleryinner.views{
	padding-bottom: 150px;
}
.galleryinner .infotitle{
	text-align: center;
	padding-bottom: 50px;
}
.galleryinner .infotitle h1{
	font-weight: 300;
	font-size: 50px;
	margin-bottom: 20px;
}
.galleryinner .infotitle p{
	font-size: 22px;
}
.gallerylists{
	display: block;
	margin-left: -15px;
	margin-right: -15px;
}
.gallerylists > li{
	width: 25%;
	float: left;
	padding: 10px;
}
.gallerylists > li a.img{
	display: block;
	height: 200px;
	overflow: hidden;
	position: relative;
}
.gallerylists > li a.img::before{
	content: '';
	position: absolute;
	background: rgba(248, 179, 73, 0.7) url(/web-assets/img/i-search.png) center center no-repeat;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.gallerylists > li:hover a.img::before{
	opacity: 1;
}
.gallerylists > li a.img > img{
	min-width: 100%;
	height: 100%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.gallerylists > li:hover a.img > img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}

.contactinner{
	padding: 100px 0;
}
.contact_address .contact_title{
	font-size: 50px;
}
.contact_address .contact_title strong{
	color: #6DAEAA;
}
.contact_address address{
	font-size: 22px;
	max-width: 50%;
}
.contact_info{
	float: right;
	width: 400px;
}
.contact_info .icon{
	height: 80px;
	padding-left: 100px;
	display: flex;
	/* justify-content: center; */
	align-items: center;
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 18px;
	margin-bottom: 15px;
	background-size: 80px 80px;
}
.contact_info .icon.i_phone{
	background-image: url('/web-assets/img/i-phone.png');
}
.contact_info .icon.i_email{
	background-image: url('/web-assets/img/i-email.png');
}
.contact_info .icon.i_line{
	background-image: url('/web-assets/img/i-line.png');
}
.formcontact{
	float: left;
	width: calc(100% - 400px);
	padding-right: 100px;
}
.formcontact ul.list-inline{
}
.formcontact ul.list-inline > li{
	width: 50%;
	display: block;
	float: left;
	margin: 10px 0;
}
.formcontact ul.list-inline > li.full{
	width: 100%;
}
.formcontact ul.list-inline > li .form-control{
	border-radius: 0;
	font-size: 16px;
}
.formcontact ul.list-inline > li input.form-control{
	height: 45px;
}
.formcontact .btn-main{
	background: #6DAEAA;
	color: #fff;
	border-radius: 0;
	padding: 10px 30px;
}
.contactmap{
	height: 35vw;
}
.contactmap iframe{
	width: 100%;
	height: 100%;
}
.roominner{
	padding-top: 100px;
}
.roomhtml1{
	padding-bottom: 100px;
}
.roomhtml2 p{
	margin-bottom: 0;
}
.roomslidebox > .row > div{
	padding: 0;
}
.room_menu.roommenu{
	float: none;
}
.room_menu.roommenu > ul > li{
	display: inline-block;
}
#roomslide .slick-dots{
	bottom: 20px;
	width: auto;
	left: 20px;
}
#roomslide .slick-dots li button:before{
	font-size: 14px;
	color: #fff;
	opacity: 0.8;
}
#roomslide .slick-dots li.slick-active button:before{
	color: #6DAEAA;
	opacity: 1;
}
.roomhtml1 .room_tye{
	font-size: 20px;
}
.roomhtml1 .room_name{
	font-size: 40px;
	color: #6DAEAA;
	margin-bottom: 20px;
}
.roomhtml1 .room_tye{
	font-size: 20px;
}
.roomhtml1 .room_desc{
	font-size: 18px;
	padding-bottom: 20px;
}
.customerbox{
	padding: 100px 0;
}
.cusdropdown{
	background: #6DAEAA;
}
.cusdropdown > a{
	display: block;
	color: #fff;
	padding: 12px 20px;
	font-size: 20px;
}
.cusdropdown > a > b{
	float: right;
	font-size: 30px;
}
.cusdropdown .dropdown-menu{
	border-radius: 0;
	width: 100%;
}
.cusmessage{
	padding-top: 10px;
}
.cushtml{
	padding-top: 15px;
}
.cushtml h1{
	color: #6DAEAA;
	font-weight: 400;
}
.share_icon{
	position: fixed;
	right: 50px;
	bottom: 50px;
}
.share_icon > a{
	display: flex;
	width: 90px;
	height: 90px;
	background: url('/web-assets/share/icon1-1.png');
	border-radius: 50%;
	position: relative;
	align-items: center;
	z-index: 1;
	background-size: cover;
}
.share_icon.open > a{
	background: url('/web-assets/share/icon1-2.png');
	background-size: cover;
}
.share_icon > a > span{
	position: absolute;
	right: calc(100% + 15px);
	white-space: nowrap;
	background: rgb(10 92 88 / 100%);
	color: #fff;
	padding: 15px 30px;
	font-size: 18px;
	display: block;
	border-radius: 30px;
	/* display: none; */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.share_icon > a > span::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(100% - 2px);
	margin: auto;
	width: 0px;
	height: 0px;
	border-left: 15px solid rgb(10 92 88 / 100%);
	border-bottom: 8px solid transparent; /* ซ่อนขอบขวา */
	border-top: 8px solid transparent; /* ซ่อนขอบล่าง */
	z-index: 1;
}
/* .share_icon:hover > a > span{
	background: rgb(10 92 88 / 100%);
}
.share_icon:hover > a > span::before{
	border-left: 15px solid rgb(10 92 88 / 100%);
} */
/* .share_icon.open > a > span,
.share_icon:hover > a > span{
	display: block;
} */
.share_icon > ul{
	list-style: none;
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 0;
	padding: 0;

}
.share_icon > ul > li{
	height: 0;
	opacity: 0;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.share_icon.open > ul > li{
	opacity: 1;
	height: 90px;
}
.share_icon > ul > li > a{
	position: relative;
	display: flex;
	align-items : center;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.share_icon > ul:hover > li:not(:hover) > a{
	-webkit-transform: scale(0.9);
	   -moz-transform: scale(0.9);
	    -ms-transform: scale(0.9);
	     -o-transform: scale(0.9);
	        transform: scale(0.9);	
}
.share_icon > ul > li > a:hover{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.share_icon > ul > li > a > img{
	width: 100%;
	height: 100%;
}
.share_icon > ul > li > a::before{
	display: block;
	content: attr(data-title);
	right: calc(100% - 15px);
	white-space: nowrap;
	position: absolute;
	right: calc(100% + 15px);
	white-space: nowrap;
	background: #4eada7;
	color: #fff;
	padding: 15px 30px;
	font-size: 18px;
	display: block;
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	display: none;
}
.share_icon > ul > li > a::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(100% + 5px);
	margin: auto;
	width: 0px;
	height: 0px;
	border-left: 15px solid #4eada7;
	border-bottom: 8px solid transparent; /* ซ่อนขอบขวา */
	border-top: 8px solid transparent; /* ซ่อนขอบล่าง */
	display: none;
}
.share_icon > ul > li.i_facebook > a::before{
	background: #007eff;
}
.share_icon > ul > li.i_facebook > a::after{
	border-left-color: #007eff;
}
.share_icon > ul > li.i_line > a::before{
	background: #01c758;
}
.share_icon > ul > li.i_line > a::after{
	border-left-color: #01c758;
}
.share_icon > ul > li:hover > a::after,
.share_icon > ul > li:hover > a::before{
	display: block;
}
@media (max-width: 767px) {
	.share_icon{
		right: 15px;
		bottom: 15px;
	}
	.share_icon.open > ul > li{
		height: 70px;
	}
	.share_icon > ul > li > a,
	.share_icon > a{
		width: 70px;
		height: 70px;
	}
	.share_icon > a > span{
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 14px;
	}
	.share_icon > ul > li > a::before{
		font-size: 14px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 20px;
		padding-right: 20px;
	}
}