/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;400;500;600;700;800&display=swap");
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

html { font-size: 62.5%; overflow-x: hidden; height: 100%; }

body { line-height: 1; color: black; background: white; overflow-x: hidden; letter-spacing: 0.5px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

body ::-moz-selection { background: #111111; color: #fff; }

body ::selection { background: #111111; color: #fff; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; vertical-align: middle; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: " "; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; }

img { max-width: 100%; height: auto; }

a img { border: none; }

input, textarea, select, div, ul, li, a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }

/* # Fonts
================================================== */
@font-face { font-family: 'Algerian'; src: url("../fonts/algerian/Algerian.eot"); src: url("../fonts/algerian/Algerian.eot?#iefix") format("embedded-opentype"), url("../fonts/algerian/Algerian.woff2") format("woff2"), url("../fonts/algerian/Algerian.woff") format("woff"), url("../fonts/algerian/Algerian.ttf") format("truetype"), url("../fonts/algerian/Algerian.svg#Algerian") format("svg"); font-weight: normal; font-style: normal; font-display: swap; }

:root { --tx-body: 	#333333; --tx-head: 	#2E3192; --tx-hover: 	#0C4C89; --tx-gray: 	#888888; --tx-white: 	#ffffff; --tx-error: 	#d70000; --tx-color1: #888888; --tx-color2: #a1474c; --tx-color3: #c3a9cb; --tx-color4: #00AEEF; --bg-head: 	#ffffff;--bg-head2: 	#15A69E;--bg-main-content: #eaeaea;--bg-footer:#0C4C89; --ff-header: 'Sarabun'; --ff-body:   'Sarabun'; }

/* # Set SASS Function
================================================== */
/* #Basic Set
================================================== */
body { font-size: 1.6rem; line-height: 1.8; font-family: var(--ff-body); font-weight: 400; letter-spacing: 0.5px; color: var(--tx-body); text-align: center; background-color: #ffffff; }

h1, h2, h3, h4, h5, h6 { font-weight: 400; color: var(--tx-head); text-align: center; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: 400; }

h1 { font-family: var(--ff-header); font-size: 3.6rem; line-height: 1.2; text-shadow: 2px 1px 4px #00000040; }

h2 { font-size: 4rem; line-height: 1.2; font-weight: 800; text-shadow: 2px 1px 4px #00000040; margin-bottom: 50px; }

h2.sub { margin-bottom: 10px; line-height: 1.3; }

h2 + span { font-size: 2.2rem; color: var(--tx-gray); font-family: var(--ff-header); text-shadow: 2px 1px 4px #00000040; }

h3 { font-size: 3rem; line-height: 1; display: inline-block; background-color: var(--tx-head); color: var(--tx-white); padding: 20px 60px; border-radius: 30px; margin-bottom: 50px; }

img { box-sizing: border-box; }

strong { font-weight: 700; }

hr { position: relative; clear: both; margin: 0 10px; height: 0; border-top: 1px solid var(--tx-gray); }

sub { vertical-align: sub; font-size: smaller; }

sup { vertical-align: super; font-size: smaller; }

ol { list-style: decimal; margin-left: 30px; }

ul { list-style: none; margin-left: 30px; }

ul.square { list-style: square; }

ul.circle { list-style: circle; }

ul.disc { list-style: disc; }

.detail p { margin-bottom: 10px; }

.detail p:last-child { margin-bottom: 0; }

.detail ul { list-style-type: disclosure-closed; }

.detail ul ul, .detail ul ol { font-size: 90%; }

a { position: relative; color: var(--tx-head); text-decoration: none; cursor: pointer; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

a:hover, a:active { color: var(--tx-hover); }

.clear { display: block; visibility: hidden; clear: both; overflow: hidden; width: 0; height: 0; }

/* #Set Font
================================================== */
h1 { font-family: var(--ff-header); }

body, h2, h3, h4, h5, input, textarea, select, button, p { font-family: var(--ff-body); }

/* #Textbox style
================================================== */
input, textarea, select, button { background: var(--tx-white); font-size: 1.4rem; line-height: 1.4; color: var(--tx-body); border: 1px solid var(--tx-head); border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; outline: inherit; width: 100%; padding: 10px; }

button { background-color: var(--tx-gray); border: 1px solid var(--tx-gray); color: var(--tx-color1); cursor: pointer; font-size: 2.2rem; letter-spacing: 1.4px; font-weight: 300; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

button:hover { background-color: var(--tx-color1); border: 1px solid var(--tx-color1); color: var(--tx-white); }

select { -moz-appearance: none; -webkit-appearance: none; padding: 13px 10px 12px; outline: 0px; line-height: 1; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: url(../images/icon--select.svg) right center no-repeat var(--tx-white); background-size: 35px auto; }

button::-moz-focus-inner { border: 0; }

input[type="submit"] { background-color: var(--tx-head); cursor: pointer; color: var(--tx-white); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

input[type="submit"]:hover { background-color: var(--bg-head); }

/* #Helper Class
================================================== */
._text-j { text-align: justify; }

._small { font-size: 0.6em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }

._red { color: var(--tx-error); }

._set-tablet { /* 800 */ display: none; }

._set-mobile { /* 560 */ display: none; }

/* #Grid
================================================== */
section { position: relative; z-index: 0; }

.box { position: relative; }

.container { position: relative; margin: 0 auto; padding: 0 60px; max-width: 1600px; width: 100%; }

.container_full { position: relative; margin: 0 auto; padding: 0; }

.pd__intro { padding-top: 80px; padding-bottom: 80px; }

@media screen and (max-width: 768px) { .pd__intro { padding-top: 80px; padding-bottom: 100px; } }

@media screen and (max-width: 480px) { .pd__intro { padding-top: 60px; padding-bottom: 70px; } }

.pd__sub1 { padding-top: 100px; padding-bottom: 100px; }

@media screen and (max-width: 768px) { .pd__sub1 { padding-top: 80px; padding-bottom: 80px; } }

@media screen and (max-width: 480px) { .pd__sub1 { padding-top: 60px; padding-bottom: 60px; } }

/* #Button and Link style
================================================== */
.btn__readmore { color: var(--tx-white); background-color: var(--tx-head); width: 180px; display: inline-block; padding: 10px; text-align: center; font-size: 1.8rem; line-height: 1.4; font-weight: 700;border: 2px solid #fff; }

/*
.btn__readmore:before { position: absolute; content: ""; height: 2px; width: 100%; left: 0; bottom: -4px; background-color: var(--tx-head); }

.btn__readmore:after { position: absolute; content: ""; height: 2px; width: 100%; left: 0; bottom: -7px; background-color: var(--tx-head); }
*/

.btn__readmore:hover { background-color: var(--bg-head); }

._btn--booknow { color: var(--tx-white); background-color: var(--tx-color1); padding: 6px 20px 4px; display: inline-block; min-width: 90px; text-align: center; text-transform: initial; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0); }

._btn--booknow:before { height: 0; }

._btn--booknow:hover { background-color: var(--tx-color1); }

/* #Font style
================================================== */
/* #Icon
================================================== */
.icon { position: relative; display: inline-block; width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat; }

/* #Photo Effect
================================================== */
._bg-full { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }

._bg-full img { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* #Etc
================================================== */
.fixed_scroll { height: 100%; overflow: hidden; }

.bg1 { background-color:var(var(--bg-head)); }

.bg2 { background-color:var(--bg-main-content); background-image: linear-gradient(180deg, #96CBEB, #ffffff); }

.bg3 { background-image: linear-gradient(180deg, #D5F1FD, #ffffff);background-color:#D5F1FD; background-size: 100% auto; }

.bg4 { background: url(../images/bg-aboutus.jpg) no-repeat top center; background-size: 100% auto; }

.bg5 { background-image: linear-gradient(180deg, #82dad4, #ffffff);background-size: 100% auto; }

.bg__ribbon { background: url(../images/bg--intro.png) repeat-x top center; height: 70px; position: relative; margin-bottom: 40px; }

.bg__ribbon .ribbon { position: relative; z-index: 10; }

.bg__ribbon .ribbon img { width: 115px; margin: -30px auto 0; position: relative; }

.bg__ribbon .ribbon-line { background-color: #1AA399; background-size: auto 13px; width: 100%; height: 13px; position: absolute; left: 0; top: 0; z-index: 8;background-image:linear-gradient(#fff,#1AA399); }

.box__time { display: inline-block; margin: auto; padding: 10px 20px; background-color: var(--tx-head); color: var(--tx-white); border-radius: 30px; margin-top: 20px; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; }

.box__time:before { position: relative; content: ""; height: 30px; width: 30px; background: url(../images/icon--time.svg) no-repeat center center; background-size: 100% auto; display: inline-block; margin-right: 10px; }

/* #Slide slide
================================================== */
.slick-list { height: auto !important; }

.slick-track { height: 100%; }

.slick-arrow { position: absolute; top: 50%; background: none; border: 0; width: 150px; z-index: 400; font-size: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }

.slick-arrow:hover { border: 0; background-color: inherit; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

.slick-arrow:before { position: absolute; content: ""; height: 1px; width: 130px; top: 50%; background-color: var(--tx-white); -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.slick-arrow:hover:before { width: 80px; }

.slick-prev { left: 30px; background: url(../images/icon--arrow-prev.png) no-repeat left center; }

.slick-prev:before { left: 10px; }

.slick-next { right: 30px; background: url(../images/icon--arrow-next.png) no-repeat right center; }

.slick-next:before { right: 10px; }

.slick-dots { width: 50%; bottom: 70px; left: 80px; position: absolute; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; }

@media screen and (max-width: 1320px) { .slick-dots { left: 30px; bottom: 30px; margin: 0; } }

@media screen and (max-width: 768px) { .slick-dots { left: 20px; bottom: 20px; margin: 0; } }

.slick-dots li { display: inline-block; }

.slick-dots li button { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; width: 9px; height: 9px; padding: 0; margin: 0 4px; border: 1px solid var(--tx-white); background: none; font-size: 0; }

.slick-dots li.slick-active button { background-color: var(--tx-white); width: 10px; height: 10px; }

/* #Back to top
================================================== */
#back-to-top { display: none; position: fixed; z-index: 9999; width: 35px; height: 33px; cursor: pointer; background-color: rgba(102, 102, 102, 0.7); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; top: auto; right: 20px; bottom: 20px; left: auto; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }

#back-to-top:before { height: 0; }

#back-to-top.show { display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }

#back-to-top:hover { background-color: #202020; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

#back-to-top i.icon--backtotop { background: url(../images/icon--arrow-backtotop.svg) no-repeat center center; display: block; width: 100%; height: 100%; background-size: 15px; }

/* #box layout
================================================== */
div[class*="sty__boxc"] { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

div[class*="sty__boxc"] .box { position: relative; overflow: hidden; margin-bottom: 20px; }

.sty__introbox { max-width: 720px; margin: auto; }

.sty__introbox .title { margin-bottom: 30px; }

.sty__introbox .video { padding-top: 60px; }

.sty__introbox span.subtitle { font-family: var(--ff-body); font-size: 2rem; font-weight: bold; color: var(--tx-color1); }

.sty__photomenu { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; padding-top: 10px; padding-bottom: 10px; }

@media screen and (max-width: 1024px) { .sty__photomenu { grid-gap: 5px; padding-top: 5px; padding-bottom: 5px; } }

.sty__photomenu .box a { display: block; position: relative; }

.sty__photomenu .box .photo { z-index: 1; position: relative; }

.sty__photomenu .box .photo img { width: 100%; }

.sty__photomenu .box .text { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 5; font-size: 1.8rem; background: url(../images/bg--hlmemu.png) repeat-y center left; background-size: 100% auto; text-align: left; color: var(--tx-white); padding: 5px 10px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

@media screen and (max-width: 1024px) { .sty__photomenu .box .text { font-size: 1.6rem; line-height: 1.3; } }

@media screen and (max-width: 800px) { .sty__photomenu .box .text { font-size: 1.3rem; line-height: 1.3; text-shadow: 0 1px 1px var(--tx-color2); } }

@media screen and (max-width: 480px) { .sty__photomenu .box .text { bottom: 10px; } }

.sty__photomenu .box:hover .text { text-shadow: 0 2px 2px var(--tx-color2); padding-left: 20px; }

@media screen and (max-width: 768px) { .sty__photomenu .box:hover .text { padding-left: 15px; } }

.sty__servicemenu { padding-bottom: 60px; }

.sty__servicemenu .boxrow { padding-bottom: 100px; position: relative; }

.sty__servicemenu .boxrow .detail { padding-bottom: 40px; max-width: 800px; margin: auto; }

.sty__servicemenu .box .photo { border: 5px solid var(--tx-white); }

.sty__servicemenu .box .photo img { width: 100%; }

.sty__servicemenu .box .name { color: var(--tx-body); display: inline-block; padding: 13px 10px; width: calc(100% - 80px); margin: -30px auto 0; text-transform: uppercase; font-size: 2rem; line-height: 1.3; font-weight: 600; border-radius: 5px; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: #0BB7F8; background: -webkit-gradient(linear, left top, left bottom, from(#0BB7F8), to(white)); background: linear-gradient(180deg, #0BB7F8 0%, white 100%);border: 4px solid #ffffff; }

.sty__servicemenu a:hover .name { color: var(--tx-body); text-shadow: 0 2px 2px #c5999c; -webkit-transform: translateY(-10px); transform: translateY(-10px); }

.sty__servicemenu .svbox3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px; }

.sty__servicemenu .svbox5 { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 40px; -webkit-box-pack: center; justify-content: center; }

.sty__servicemenu .svbox5 .box { grid-column: span 2; }

.sty__servicemenu .svbox5 .box:last-child:nth-child(3n - 1) { grid-column-end: -2; }

.sty__servicemenu .svbox5 .box:nth-last-child(2):nth-child(3n + 1) { grid-column-end: 4; }

.sty__servicemenu .svbox5 .box:last-child:nth-child(3n - 2) { grid-column-end: 5; }

.sty__sd3box { margin-left: -20px; margin-right: -20px; width: auto; }

.sty__sd3box .box { padding: 0 20px; }

.sty__sd3box .slick-dots { bottom: auto; left: auto; right: auto; top: auto; position: relative; margin: auto; padding: 40px 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; }

.sty__sd3box .slick-dots li { margin: 0 3px; }

.sty__sd3box .slick-dots li button { background-color: #3fcdfd; width: 14px; height: 14px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0; }

.sty__sd3box .slick-dots li.slick-active button { background-color: #00aeef; }

.sty__sd3box .slick-arrow { width: 50px; height: 150px; top: calc(50% - 60px); background: url(../images/arrow--slide1.svg) no-repeat center center; background-size: 21px auto; }

.sty__sd3box .slick-arrow:before { display: none; }

.sty__sd3box .slick-prev { right: 100%; left: auto; }

.sty__sd3box .slick-next { left: 100%; right: auto; -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.sty__2col { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0px; text-align: left; -webkit-box-align: center; align-items: center; }

@media screen and (max-width: 800px) { .sty__2col { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }
  .sty__2col .video { width: 100%; padding-top: 60px; } }

.sty__2col h4 { margin-left: -10px; }

.sty__2col .link { padding-top: 30px; }

.sty__2col iframe { width: 100%; border: 5px solid #fff; box-sizing: border-box; }

@media screen and (max-width: 800px) { .sty__2col iframe { height: 49vw; } }

@media screen and (max-width: 800px) { .sty__2col .photo { padding-bottom: 30px; width: 100%; } }

.sty__2col .photo img { width: 100%; border: 5px solid #fff; }

.sty__2col .tx_left { padding-right: 80px; }

@media screen and (max-width: 1320px) { .sty__2col .tx_left { padding-right: 60px; } }

@media screen and (max-width: 1024px) { .sty__2col .tx_left { padding-right: 30px; } }

@media screen and (max-width: 800px) { .sty__2col .tx_left { padding-right: 0px; } }

.sty__2col .tx_right { padding-left: 80px; }

@media screen and (max-width: 1320px) { .sty__2col .tx_right { padding-left: 60px; } }

@media screen and (max-width: 1024px) { .sty__2col .tx_right { padding-left: 30px; } }

@media screen and (max-width: 800px) { .sty__2col .tx_right { padding-left: 0px; } }

.sty__3col { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; }

@media screen and (max-width: 1024px) { .sty__3col { grid-gap: 20px; } }

.sty__3col iframe { width: 100%; border: 5px solid #fff; box-sizing: border-box; }

@media screen and (max-width: 1320px) { .sty__3col iframe { height: 19vw; } }

.sty__hcontact { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 80px; text-align: left; padding-top: 40px; grid-auto-flow: row; }

@media screen and (max-width: 1320px) { .sty__hcontact { grid-gap: 30px; } }

@media screen and (max-width: 1160px) { .sty__hcontact { grid-gap: 20px; } }

@media screen and (max-width: 1024px) { .sty__hcontact { grid-gap: 10px; } }

@media screen and (max-width: 980px) { .sty__hcontact { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; max-width: 660px; margin: auto; } }

.sty__hcontact .box { padding: 35px 25px 35px 160px; }

@media screen and (max-width: 1320px) { .sty__hcontact .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; flex-flow: wrap; align-content: center; padding-left: 130px; } }

@media screen and (max-width: 980px) { .sty__hcontact .box { width: 320px; } }

@media screen and (max-width: 375px) { .sty__hcontact .box { width: 100%; padding-left: 140px; } }

@media screen and (max-width: 320px) { .sty__hcontact .box { padding-left: 108px; padding-top: 20px; padding-bottom: 20px; } }

.sty__hcontact .title { font-size: 2.4rem; line-height: 1; font-weight: 600; width: 100%; }

.sty__hcontact .link { font-size: 1.4rem; }

@media screen and (max-width: 1024px) { .sty__hcontact .link { font-size: 1.2rem; } }

.sty__hcontact .box__line { color: #63ad5c; }

.sty__hcontact .box__line a:hover { color: #63ad5c; }

.sty__hcontact .box__facebook { color: #3371a6; }

.sty__hcontact .box__facebook a:hover { color: #3371a6; }

.sty__hcontact .box__hotline { color: #e13621; }

.sty__hcontact .box__hotline a:hover { color: #e13621; }

.sty__abcontent .title { margin-bottom: 30px; }

.sty__abcontent .title h2 { display: block !important; }

.sty__abcontent .detail { padding-top: 30px; }

.sty__abcontent .detail + .detail { padding-top: 60px; }

.sty__abcontent table.timeline { max-width: 800px; margin: auto; }

.sty__abcontent table.timeline tr td:nth-child(1) { font-weight: bold; width: 100px; }

.sty__abcontent table.timeline tr td { vertical-align: top; }

.sty__map { padding-top: 60px; }

.sty__box2colv2, .sty__box2col { padding-bottom: 80px; }

.sty__box2colv2 .box, .sty__box2col .box { margin-bottom: 30px; }

.sty__box2colv2 .box .wrap_row1, .sty__box2col .box .wrap_row1 { background: #ffffffa6; padding: 30px 30px 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.sty__box2colv2 .box .photo, .sty__box2col .box .photo { width: 40%; padding-right: 60px; }

.sty__box2colv2 .box .photo img, .sty__box2col .box .photo img { width: 100%; border: 5px solid #fff; }

.sty__box2colv2 .box .text, .sty__box2col .box .text { width: 60%; text-align: left; padding-top: 20px; padding-bottom: 20px; }

.sty__box2colv2 .box .text .title h4, .sty__box2col .box .text .title h4 { text-align: left; font-weight: bold; font-size: 2.6rem; line-height: 1.2; margin-bottom: 10px; }

.sty__box2colv2 .box .text ul, .sty__box2col .box .text ul { margin-bottom: 15px; }

.sty__box2colv2 .box .text h5.ribbon, .sty__box2col .box .text h5.ribbon { position: relative; text-decoration: none; text-align: left; font-weight: bold; text-decoration: underline; font-size: 2rem; margin-top: 15px; }

.sty__box2colv2 .box .text h5.ribbon:before, .sty__box2col .box .text h5.ribbon:before { position: relative; display: inline-block; content: ""; height: 30px; width: 30px; left: 0; top: 12px; margin-right: 10px; background: url(../images/icon--ribbon.png) no-repeat center center; background-size: 100% auto; }

.sty__box2colv2 .box .text .promotext, .sty__box2col .box .text .promotext { background-color: var(--tx-color2); color: var(--tx-white); display: inline-block; padding: 3px 20px; border-radius: 20px; margin-top: 10px; margin-bottom: 5px; }

.sty__box2colv2 .box .wrap_row2, .sty__box2col .box .wrap_row2 { padding: 20px 30px 20px; background-color: #fff; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; }

.sty__box2colv2 .box .wrap_row2 .deadline, .sty__box2col .box .wrap_row2 .deadline { width: 50%; text-align: left; font-style: italic; padding-top: 5px; }

.sty__box2colv2 .box .wrap_row2 .link, .sty__box2col .box .wrap_row2 .link { width: 50%; text-align: right; padding-bottom: 5px; }

.sty__box2col { padding-bottom: 0; padding-top: 20px; }

.sty__box2col .box .wrap_row1 { background-color: #f1f1f1ba; }

.sty__review { padding-bottom: 60px; }

.sty__review .box,.sty__review .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 880px; margin: 0 auto 60px; }

.sty__review .box .photo { width: 160px; }

.sty__review .box-2 .photo-2 { width: 250px; }

.sty__review .box .photo img { width: 160px; height: 160px; -o-object-fit: cover; object-fit: cover; border-radius: 0%; }

.sty__review .box-2 .photo-2 img { width: 250px; height: 250px; -o-object-fit: cover; object-fit: fill; border-radius: 50%; }

.sty__review .box .text { width: calc(100% - 160px - 100px); background-color: #fff; padding: 30px; border-radius: 20px; position: relative; }

.sty__review .box-2 .text-2 { width: calc(100% - 250px - 50px); background-color: #fff; padding: 30px; border-radius: 20px; position: relative;text-align: left; }

.sty__review .box .text:before,.sty__review .box-2 .text:before { position: absolute; content: ""; height: 20px; width: 20px; left: -10px; top: calc(50% - 10px); background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.sty__review .box .text p { line-height: 1.4; }

.sty__review .box .text .detail { padding-bottom: 20px; }

.sty__review .box .text .name { font-style: italic; }
.sty__review .box .text-2 .name h6 { font-style: italic; }


.sty__review .box:nth-child(even),.sty__review .box-2:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-flow: row-reverse; }

.sty__servicedetail h3 { font-size: 2.2rem; line-height: 1.3; padding: 15px 30px; }

.sty__servicedetail h4, .sty__servicedetail h5 { text-align: left; font-weight: bold; font-size: 2rem; }

.sty__servicedetail h5 { color: var(--tx-color2); }

.sty__servicedetail .wrapbox { background-color: #ffffffa6; padding: 30px; max-width: 880px; margin: 0 auto 30px; text-align: left; }

.sty__servicedetail .wrapbox p + h4, .sty__servicedetail .wrapbox p + h5, .sty__servicedetail .wrapbox ul + h4, .sty__servicedetail .wrapbox ul + h5 { margin-top: 30px; }

.sty__servicedetail .wrapbox p + h3 { margin-top: 30px; margin-bottom: 20px; }

.sty__servicedetail .boxcontact { background-color: #fff; padding: 30px; max-width: 880px; text-align: left; margin: 0 auto 30px; border: 5px solid var(--tx-head); }

.sty__servicedetail .boxcontact img { width: 25px; margin-right: 10px; }

.sty__servicedetail .boxcontact p { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; }

.sty__servicedetail .boxcontact a { margin-left: 5px; }

.sty__servicedetail .boxphoto { max-width: 880px; margin: 0 auto 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }

.sty__servicedetail .boxphoto img { width: 100%; box-sizing: border-box; border: 3px solid #fff; grid-column: 2 span; }

.sty__servicedetail .boxphoto img:last-child:nth-child(3n - 1) { grid-column-end: -2; }

.sty__servicedetail .boxphoto img:nth-last-child(2):nth-child(3n + 1) { grid-column-end: 4; }

.sty__servicedetail .boxphoto img:last-child:nth-child(3n - 2) { grid-column-end: 5; }

.sty__servicepromotion { max-width: 880px; margin: auto; padding-top: 30px; }

.sty__servicepromotion .sty__2col { -webkit-box-align: start; align-items: flex-start; }

.sty__servicepromotion h3 { padding: 10px 30px 13px; display: inline-block; }

.sty__servicepromotion h4, .sty__servicepromotion h5 { text-align: left; font-weight: bold; font-size: 2rem; line-height: 1.3; margin-bottom: 10px; margin-left: 0; }

.sty__servicepromotion em { font-style: italic; }

.sty__servicepromotion p + h4, .sty__servicepromotion ul + h4 { margin-top: 30px; }

.sty__servicepromotion img { display: block; margin: auto; }

.sty__servicepromotion .photo { padding-right: 60px; }

.sty__servicepromotion .text { padding-top: 20px; }

/* #Header
================================================== */
header .h_row1 { border-bottom: 2px solid var(--bg-head); margin-bottom: 1px; }

header .h_row1 .container { font-size: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; max-width: 1600px; padding-left: 0; padding-right: 0; }

@media screen and (max-width: 1600px) { header .h_row1 .container { padding-left: 40px; padding-right: 40px; } }

@media screen and (max-width: 1024px) { header .h_row1 .container { padding-left: 30px; padding-right: 30px; } }

@media screen and (max-width: 768px) { header .h_row1 .container { padding-left: 20px; padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; } }

@media screen and (max-width: 480px) { header .h_row1 .container { padding-left: 10px; padding-right: 10px; font-size: 1.2rem; -webkit-box-pack: center; justify-content: center; } }

@media screen and (max-width: 430px) { header .h_row1 .container { padding-top: 5px; } }

header .h_row1 .container .header_tag { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; text-align: left; line-height: 1.3; }

@media screen and (max-width: 430px) { header .h_row1 .container .header_tag { width: 100%; -webkit-box-pack: center; justify-content: center; } }

header .h_row1 .container .lang { text-align: right; position: relative; top: 2px; }

@media screen and (max-width: 430px) { header .h_row1 .container .lang ul { margin: 0 auto; } }

header .h_row1 .container .lang ul li { display: inline-block; margin-left: 5px; }

@media screen and (max-width: 430px) { header .h_row1 .container .lang ul li { margin: 0 3px; } }

header .logo { background-color: var(--bg-head); padding: 50px 0 30px; }

@media screen and (max-width: 768px) { header .logo { padding: 30px 0 20px; } }

@media screen and (max-width: 560px) { header .logo { padding: 30px 0 15px; } }

header .logo img { width: 300px; }

@media screen and (max-width: 1024px) { header .logo img { width: 50%; min-width: 300px; } }

header .h_row3 { background: url(../images/logo--laserpremiumclinic-3.svg) repeat-x center center var(--bg-head); background-size: auto 13px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

header .h_row3 img { width: 125px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

@media screen and (max-width: 560px) { header .h_row3 img { width: 90px; } }

@media screen and (max-width: 375px) { header .h_row3 img { width: 80px; } }

header .wrap__mainmenu { background-color: var(--bg-head2); padding: 10px 0; }

header .wrap__mainmenu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; }

header .wrap__mainmenu ul li { display: inline-block; margin: 0 20px; }

header .wrap__mainmenu ul li #sec__submenu-service { position: absolute; left: 0; right: 0; z-index: 80; overflow: hidden; max-height: 0; margin: 0px 0px; padding-top: 0px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; box-shadow: 0 0 10px #00000040; }

header .wrap__mainmenu ul li #sec__submenu-service:before { position: absolute; content: ""; height: 15px; width: 15px; left: calc(50% - 20px); top: 6px; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

header .wrap__mainmenu ul li:hover #sec__submenu-service { max-height: 500px; padding-top: 10px; }

header .wrap__mainmenu ul li:hover #sec__submenu-service:before { opacity: 1; }

header .wrap__mainmenu a { color: var(--tx-white); font-size: 1.8rem; line-height: 1.4;text-transform:uppercase; }

header .wrap__mainmenu a:hover { color: var(--tx-hover); }

header .wrap__mainmenu .sty__submenu { background-color: #fff; padding: 20px; box-shadow: 0 0 10px #00000040; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; text-align: left; max-width: 1600px; margin: auto; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col .photo img { width: 100%; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col .title { background-color: #87D6E4; font-weight: bold; padding: 7px 10px 5px; line-height: 1.3; font-size: 1.6rem; color: var(--tx-body);text-align: center;}

header .wrap__mainmenu .sty__submenu .wrap__menu3col ul { margin: 10px 0 0 15px; padding: 0; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col ul li { text-align: left; display: block; margin: 0; width: 100%; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col ul li a { line-height: 1.6; font-size: 1.4rem; color: var(--tx-body); padding-left: 0; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; padding-left: 15px; position: relative; left: 0; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col ul li a:before { position: absolute; content: ""; height: 5px; width: 5px; left: 0; top: calc(50% - 1px); background-color: var(--tx-body); border-radius: 50%; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

header .wrap__mainmenu .sty__submenu .wrap__menu3col ul li a:hover { color: #caa371; left: -5px; }

header.fixedtop { position: fixed; top: 0; left: 0; right: 0; z-index: 99; }

header.fixedtop .h_row1 { display: none; }

header.fixedtop .h_row2 { display: none; }

header.fixedtop .h_row3 { border-top: 10px solid var(--bg-head); }

header.fixedtop .h_row3 img { width: 75px; }

.sd__mainslide img { width: 100%; }

.sd__mainslide .slick-dots li button { border-radius: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); height: 10px; width: 10px; margin: 0 6px; }

.idlinkto { position: absolute; height: 0; width: 1px; top: -140px; left: 0; }

/* #footer
================================================== */
footer { background-color: var(--bg-footer); color: var(--tx-white); padding-top: 80px; }

@media screen and (max-width: 1024px) { footer { padding-top: 60px; } }

footer a { color: var(--tx-white); }

footer .wrap__copyright { font-size: 1.4rem; padding-bottom: 20px; }

@media screen and (max-width: 480px) { footer .wrap__copyright { padding-top: 10px; } }

footer .content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; padding-bottom: 60px; }

@media screen and (max-width: 890px) { footer .content { display: block; } }

footer h6 { font-family: var(--ff-body); background-image: -webkit-gradient(linear, left top, right top, from(#18A69A), to(#5f96cc)); background-image: linear-gradient(90deg, #15A69E, #5f96cc); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px 0 0; font-size: 2rem; position: relative; z-index: 2;font-weight: bold; }

@media screen and (max-width: 480px) { footer h6 { padding: 0 10px; } }

footer .col1 { width: 55%; text-align: left; }

@media screen and (max-width: 890px) { footer .col1 { width: 100%; } }

footer .col1 .title { position: relative; }

@media screen and (max-width: 480px) { footer .col1 .title { text-align: center; margin-bottom: 15px; } }

footer .col1 .title:after { position: absolute; content: ""; height: 1px; width: 100%; right: 0; top: 100%; xbackground-color: #5f96cc; }

footer .col1 .bgtitle { display: inline-block; position: relative; z-index: 10; }

footer .col1 .fmenu { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 10px; padding-bottom: 20px; }

@media screen and (max-width: 480px) { footer .col1 .fmenu { display: block; }
  footer .col1 .fmenu .box { margin-bottom: 20px; text-align: center; } }

footer .col1 .fmenu ul { padding-left: 0; margin-left: 0; }

footer .col1 .fmenu ul li { text-align: left; font-size: 1.4rem; }

@media screen and (max-width: 480px) { footer .col1 .fmenu ul li { display: inline-block; margin: 0 7px; } }

footer .col1 .fmenu ul li a { color: #a4c6e8; }

footer .col1 .fmenu ul li a:hover { color: #f0d1b4; }

footer .col1 .hmenu { font-size: 1.5rem; }

@media screen and (max-width: 480px) { footer .col1 .hmenu { font-weight: bold; display: inline-block; margin: 0 auto 5px; background-color: #5f96cc4f; border-radius: 20px; padding: 3px 15px 3px; } }

footer .col2 .fsocial { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; }

@media screen and (max-width: 890px) { footer .col1 .fsocial { -webkit-box-pack: center; justify-content: center; } }

footer .col2 .fsocial h6 { padding-right: 20px; }

footer .col2 .fsocial img { height: 20px; width: auto; }

footer .col2 .fsocial .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center; }

footer .col2 .fsocial a { display: inline-block; margin-right: 20px; }

footer .col2 { width: 350px; }

@media screen and (max-width: 890px) { footer .col2 { width: 100%; } }

footer .footer__ribbon { height: 30px; }

footer .footer__ribbon .ribbon { position: relative; z-index: 10; }

footer .footer__ribbon .ribbon img { width: 90px; margin-left: -50%; position: relative; top: -20px; }

@media screen and (max-width: 480px) { footer .footer__ribbon .ribbon img { margin: auto; } }

footer .footer__ribbon .ribbon-line { background-color: #5f96cc; background-size: auto 10px; width: 100%; height: 4px; position: absolute; left: 0; top: 0; z-index: 8; }

footer .clinic__map .box__map { background: url(../images/bg--map.png) no-repeat center center; background-size: 100% auto; width: 340px; height: 120px; margin: 20px auto 30px; padding: 30px 15px 20px 150px; text-align: left; }

@media screen and (max-width: 375px) { footer .clinic__map .box__map { width: 100%; } }

footer .clinic__map .box__map .title { font-size: 2.4rem; line-height: 1; font-weight: 600; color: #ea4999; margin-bottom: 5px; }

footer .clinic__map .box__map .link a { color: var(--tx-body); font-size: 1.4rem; }

footer .clinic__map .box__map .link a:hover { color: #ea4999; }

footer .clinic__info { font-size: 1.4rem;text-align: left; }
@media screen and (max-width: 560px) { footer .clinic__info {text-align: center;} }

/* # Newsletter
================================================== */
.wrap__newsletter input { text-align: center; margin-bottom: 1px; }

.wrap__newsletter .subject { text-align: right; }

.wrap__newsletter .wrap--loading { position: absolute; width: 320px; font-size: 1.2rem; display: none; }

.wrap__newsletter .wrap--loading.active { display: block; }

.wrap__newsletter .wrap--loading .wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

.wrap__newsletter .wrap--loading svg { width: 40px; }

/* #Main slide -- fullpage
================================================== */
#sec__mainslide { max-width: 1600px; margin: auto;border-bottom:5px solid var(--bg-head2); }

.sd__mainbanner { position: relative; }

.sd__mainbanner:before { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: url(../images/bg--slidemain-top.png) repeat-x top; z-index: 2000; }

.sd__mainbanner:after { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: url(../images/bg--slidemain-bottom.png) repeat-x bottom; z-index: 2000; }

.sd__mainbanner .box { height: 100vh; width: 100%; }

#sec__highlightmenu .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 1600px; padding-left: 0; padding-right: 0; }

@media screen and (max-width: 1600px) { #sec__highlightmenu .container { padding-left: 10px; padding-right: 10px; } }

@media screen and (max-width: 1024px) { #sec__highlightmenu .container { padding-left: 5px; padding-right: 5px; } }

@media screen and (max-width: 560px) { #sec__highlightmenu .container { grid-template-columns: repeat(2, 1fr); } }

/* #Home
================================================== */
#sec__h_promotion { padding-bottom: 80px; }

#sec__h_promotion h2 { background-image: -webkit-gradient(linear, left top, right top, from(var(--tx-color4)), to(var(--bg-head2))); background-image: linear-gradient(90deg, var(--tx-color4), var(--bg-head2)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px; }

#sec__h_aboutus { padding-bottom: 120px; }

#sec__h_aboutus h4 { font-size: 4.8rem; font-weight: 800; text-shadow: 2px 1px 4px #00000040; margin-bottom: 20px; display: inline-block; background-image: -webkit-gradient(linear, left top, right top, from(#855e3e), to(#00264b)); background-image: linear-gradient(90deg, #855e3e, #00264b); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px; }

#sec__h_aboutus .sty__2col { padding-bottom: 60px; }

@media screen and (max-width: 560px) { #sec__h_aboutus .sty__2col { padding-bottom: 20px; } }

#sec__award { padding-bottom: 120px; }

#sec__award h4 { font-size: 4.8rem; line-height: 1.4; font-weight: 800; text-align: left; text-shadow: 2px 1px 4px #00000040; margin-bottom: 20px; display: inline-block; background-image: -webkit-gradient(linear, left top, right top, from(#3361be), to(#00264b)); background-image: linear-gradient(90deg, #3361be, #00264b); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px; }

#sec__h_contact h5 { font-size: 3rem; line-height: 1.2; color: #004c96; font-weight: 700; padding-bottom: 5px; }

#sec__h_contact .sub { color: #ff4200; font-size: 1.8rem; font-weight: 300; }

#sec__h_contact .box__line { background: url(../images/bg--line.png) no-repeat center center; background-size: 100% auto; }

#sec__h_contact .box__facebook { background: url(../images/bg--facebook.png) no-repeat center center; background-size: 100% auto; }

#sec__h_contact .box__hotline { background: url(../images/bg--hotline.png) no-repeat center center; background-size: 100% auto; }

#sec__h_contact .photo { width: 300px; margin: auto; position: relative; right: -50px; margin-bottom: 30px; }

@media screen and (max-width: 480px) { #sec__h_contact .photo { right: -60px; } }

#sec__h_contact .photo img { width: 100%; }

#sec__h_contact .photo a { display: block; }

#sec__servicedetail { padding-bottom: 120px; }

#sec__servicedetail .bg__ribbon { margin-bottom: 20px; }

#sec__service-video { padding-bottom: 80px; }

#sec__service-video .bg__ribbon { margin-bottom: 20px; }

#sec__service-video h4 { font-size: 4.8rem; font-weight: 800; text-shadow: 2px 1px 4px #00000040; margin-bottom: 20px; display: inline-block; background-image: -webkit-gradient(linear, left top, right top, from(#855e3e), to(#00264b)); background-image: linear-gradient(90deg, #855e3e, #00264b); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px; }

/* # About us
================================================== */
#sec__educational { padding-bottom: 140px; }

#sec__educational h2 { background-image: -webkit-gradient(linear, left top, right top, from(#9a249a), to(#00264b)); background-image: linear-gradient(90deg, #9a249a, #00264b); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px; }

/* #Contact us
================================================== */
#sec__formcontact { padding-bottom: 140px; }

#sec__formcontact .map { text-align: right; }

#sec__formcontact .map img { width: 80%; }

.wrap__contactform { max-width: 800px; }

.wrap__contactform label.error { color: var(--tx-error); font-size: 0.9em; float: left; padding: 5px 0 0; }

.wrap__contactform .row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; margin-bottom: 20px; }

.wrap__contactform .subject { width: 30%; text-align: right; padding: 0 20px 0 0; }

.wrap__contactform .inputfield { width: 70%; text-align: left; }

.wrap__contactform .-pass .inputfield { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.wrap__contactform .-pass .wrap_verify { width: 80px; background-color: #efefef; padding-top: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; }

.wrap__contactform .-pass .wrap_pass { width: calc(100% - 90px); }

.wrap__contactform .-btn button[value="Submit"] { width: calc(50% - 5px); margin-right: 10px; float: left; }

.wrap__contactform .-btn button[value="Reset"] { width: calc(50% - 5px); float: left; }

.wrap__contactform .-remark { font-size: 1.4rem; text-align: left; }

.custom-select { position: relative; }

.custom-select select { display: none; }

.custom-select .select-hide { display: none; }

.custom-select .select-selected { background-color: var(--tx-white); border: 1px solid #172625; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 10px 10px; text-align: left; font-size: 1.4rem; line-height: 1.6; color: var(--tx-body); }

.custom-select .select-selected:after { position: absolute; content: ""; height: 30px; width: 30px; right: 5px; top: 8px; background: url(../images/icon--select.svg) center center no-repeat; background-size: 40px auto; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.custom-select .select-selected.select-arrow-active:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.custom-select .select-items { position: absolute; border: 1px solid #ccc; background-color: #fdfdfd; top: calc(100% - 1px); left: 0; right: 0; z-index: 99; box-shadow: 2px 2px 4px 0px #f1f1f1; padding: 5px; }

.custom-select .select-items div { color: var(--tx-body); padding: 8px 16px; cursor: pointer; text-align: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.custom-select .select-items div:hover { font-weight: bold; background-color: #f1f1f1; }

.custom-select .same-as-selected { font-weight: bold; }

/* #Map
================================================== */
.sec__map .wrap__map { height: 35vw; }

.sec__map #map-canvas { height: 100%; }

.sec__map #product-right { padding: 20px 12px 20px 10px; text-align: center; }

.sec__map #product-right img { margin-bottom: 15px; width: 120px; }

/* #Gallery
================================================== */
#page__gallery .sec__maincontentpage { padding-bottom: 50px; }

#page__gallery #sec__gallery { padding-bottom: 40px; }

.filter-button-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: center; justify-content: center; flex-flow: wrap; padding: 0 0 30px; }

.filter-button-group button { background: none; border: 0; border-top: 1px solid var(--tx-body); border-bottom: 1px solid var(--tx-body); color: var(--tx-body); display: inline-block; width: auto; font-size: 1.6rem; height: 30px; margin: 0 7px; padding: 5px 10px; position: relative; margin-bottom: 15px; }

.filter-button-group button:hover { color: var(--tx-white); border-top: 1px solid var(--tx-body); border-bottom: 1px solid var(--tx-body); }

.filter-button-group button.active { color: var(--tx-white); }

.filter-button-group button:before { content: ""; z-index: -1; width: 100%; height: 0%; background: var(--tx-body); bottom: 0; left: 0; position: absolute; -webkit-transition: height 250ms; transition: height 250ms; }

.filter-button-group button:hover:before, .filter-button-group button.active:before { height: 100%; }

.box_gallery-list .box { width: 20%; padding: 5px; position: relative; }

.box_gallery-list .box img { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=80); -webkit-opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.box_gallery-list .box ._detail { position: absolute; top: 0; left: 10%; width: 80%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: var(--tx-white); z-index: 110; font-size: 1.6rem; line-height: 1.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }

.box_gallery-list .box a { display: block; border: 0; padding: 0; }

.box_gallery-list .box a:before { border: 1px solid rgba(255, 255, 255, 0); z-index: 99; width: calc(100% - 2px); height: calc(100% - 2px); top: 0; left: 0; background: none; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; }

.box_gallery-list .box a:hover:before { border: 1px solid white; -webkit-transform: scale(0.8); transform: scale(0.8); }

.box_gallery-list .box a:hover img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; }

.box_gallery-list .box a:hover ._detail { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

#sec__promotion .bg__ribbon, #sec__review .bg__ribbon { margin-bottom: 30px; }

.mobilemenu { display: none; }

#sec__mobilemenu { display: none; }

/* # responsive
================================================== */
@media screen and (max-width: 1024px) { #sec__award h4, #sec__h_aboutus h4 { line-height: 1.2; } }

@media screen and (max-width: 980px) { .sty__servicemenu .box .name { font-size: 1.8rem; width: calc(100% - 60px); }
  .sty__box2colv2 .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo { padding-right: 30px; }
  #sec__formcontact .map img { width: calc(100% - 60px); }
  #sec__formcontact .sty__2col { -webkit-box-align: start; align-items: flex-start; } }

@media screen and (max-width: 800px) { h3 { font-size: 2.6rem; margin-bottom: 30px; }
  .sty__servicemenu .svbox5, .sty__servicemenu .svbox3 { grid-gap: 20px; grid-row-gap: 30px; }
  .sty__servicemenu .box .name { font-size: 1.6rem; width: calc(100% - 30px); }
  .sty__box2colv2 .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo { width: 100%; padding: 0 0 30px; }
  .sty__box2colv2 .box .text, .sty__box2col .box .text, .sty__box2col .box .text { width: 100%; }
  #sec__formcontact .sty__2col .col { width: 100%; }
  #sec__formcontact .sty__2col .map { text-align: center; padding-top: 60px; }
  .wrap__contactform .subject { width: 140px; }
  .wrap__contactform .inputfield { width: calc(100% - 200px); }
  .sty__servicepromotion .photo { padding-right: 0; }
  header .wrap__mainmenu .sty__submenu { padding: 10px; }
  header .wrap__mainmenu .sty__submenu .wrap__menu3col { grid-gap: 10px; } }

@media screen and (max-width: 768px) { #sec__award, #sec__h_aboutus { padding-bottom: 100px; }
  .sty__sd3box { margin: 0 -10px; }
  .sty__sd3box .box { padding: 0 10px; }
  #sec__formcontact, #sec__servicedetail { padding-bottom: 100px; }
  .sty__servicedetail .boxphoto { grid-template-columns: repeat(2, 1fr); }
  .sty__servicedetail .boxphoto img:nth-last-child(2):nth-child(3n + 1), .sty__servicedetail .boxphoto img:last-child:nth-child(3n - 1) { grid-column-end: auto; }
  .sty__servicedetail .boxphoto img:nth-last-child(1):nth-child(2n + 1) { grid-column: 2 / 2 span; }
  .sty__servicedetail h4, .sty__servicedetail h5 { line-height: 1.4; margin-bottom: 10px; }
  #sec__service-video h4 { line-height: 1.4; }
  header .wrap__mainmenu { display: none; }
  header .logo { text-align: left; }
  header .h_row3 { text-align: left; background-position: center 23px; padding-bottom: 10px; }
  header .h_row3 img { width: 100px; margin-left: 140px; }
  header .logo img { width: 340px; }
  header.fixedtop .h_row3 { border-top: 0; padding: 10px 0; }
  header.fixedtop .h_row3 img { margin-left: 60px; }
  .mobilemenu { display: block; width: 40px; height: 40px; position: absolute; z-index: 20; right: 30px; top: 66px; cursor: pointer; }
  .mobilemenu span { width: 100%; height: 2px; background-color: var(--bg-footer); display: block; margin: 8px 0; }
  header.fixedtop .h_row2 { display: block; padding: 0; }
  header.fixedtop .h_row2 > .container { display: none; }
  header.fixedtop .h_row2 .mobilemenu { top: 10px; background-color: var(--bg-head); }
  header.fixedtop .h_row2 .mobilemenu:before { position: absolute; content: ""; left: -90px; right: -60px; top: -10px; bottom: -10px; background: url(../images/bg--mobilemenu.png) repeat-y right center; background-size: 100% auto; z-index: -1; }
  #sec__mobilemenu { display: block; position: fixed; top: 0px; height: 100vh; left: 0; right: 0; background-color: #fff; z-index: 999; display: none; }
  #sec__mobilemenu.active { display: block; }
  #sec__mobilemenu .btn_closemenu { position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; align-content: center; cursor: pointer; }
  #sec__mobilemenu .btn_closemenu span { background-color: var(--bg-footer); display: block; width: 100%; height: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
  #sec__mobilemenu .btn_closemenu span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: relative; top: -2px; }
  #sec__mobilemenu .wrap { padding: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100%; }
  #sec__mobilemenu .wrap > ul { margin: 0; text-align: left; max-width: 420px; }
  #sec__mobilemenu .wrap > ul > li { font-size: 2.2rem; margin-bottom: 10px; }
  #sec__mobilemenu .wrap .btn-arrowmenu { width: 20px; height: 20px; position: absolute; right: 0; top: 10px; cursor: pointer; background: url(../images/icon--select.svg) no-repeat center center; background-size: 100% auto; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
  #sec__mobilemenu .wrap .has_submenu { position: relative; }
  #sec__mobilemenu .wrap .has_submenu.active .btn-arrowmenu { -webkit-transform: rotate(90deg); transform: rotate(-180deg); }
  #sec__mobilemenu .wrap .has_submenu.active #sec__submenu-service { max-height: 360px; }
  #sec__mobilemenu .wrap .has_submenu li { font-size: 1.4rem; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service { max-height: 0; overflow: hidden; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; text-align: left; padding-top: 10px; padding-bottom: 10px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col ul { margin-left: 10px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col .title { background-color: #f3dfc6; padding: 5px 10px; font-size: 1.6rem; line-height: 1.4; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col .list { margin-top: 5px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col .list a { padding-left: 15px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col .list a:before { width: 5px; height: 5px; border-radius: 50%; background-color: #f3dfc6; position: absolute; content: ""; left: 0; top: 8px; } }

@media screen and (max-width: 560px) { #sec__h_aboutus .sty__3col { grid-gap: 5px; }
  #sec__award h4, #sec__h_aboutus h4 { font-size: 4rem; line-height: 1.4; }
  .sty__servicemenu .svbox5 .box:nth-last-child(2):nth-child(3n + 1) { grid-column-end: auto; }
  .sty__servicemenu .svbox5, .sty__servicemenu .svbox3 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; }
  .sty__servicemenu .svbox5 .box, .sty__servicemenu .svbox3 .box { width: auto; grid-column: 2 span; }
  .sty__servicemenu .svbox5 .box:last-child:nth-child(2n - 1), .sty__servicemenu .svbox3 .box:last-child:nth-child(2n - 1) { grid-column: 2/ 2 span; }
  .sty__introbox .video iframe { height: 49vw; }
  .sty__servicemenu .boxrow { padding-bottom: 60px; }
  .sty__servicemenu .boxrow .detail { padding-bottom: 30px; }
  #sec__promotion .sty__servicemenu { padding-bottom: 30px; }
  .sty__review .box, .sty__review .box:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-flow: column-reverse; }
  .sty__review .box .photo { width: 100%; }
  .sty__review .box .text { width: 100%; margin-bottom: 30px; }
  .sty__review .box .text:before { bottom: -10px; top: auto; left: calc(50% - 10px); }
  #sec__service-video .sty__3col { grid-template-columns: repeat(4, 1fr); grid-gap: 20px; }
  #sec__service-video .sty__3col .box { width: auto; grid-column: 2 span; }
  #sec__service-video .sty__3col .box:last-child:nth-child(2n - 1) { grid-column: 2/ 2 span; }
  #sec__service-video .sty__3col iframe { height: 27vw; }
  header .logo .container { padding-left: 20px; padding-right: 20px; }
  header .logo img { width: 300px; }
  header .h_row3 img { width: 90px; margin-left: 130px; }
  header .h_row3 { background-position: center 19px; }
  header.fixedtop .h_row3 { background-position: center 24px; } }

@media screen and (max-width: 480px) { html { font-size: 59%; }
  body { line-height: 1.7; }
  h3 { padding: 13px 30px; font-size: 2.4rem; line-height: 1.3; margin-bottom: 30px; }
  .bg__ribbon { margin-bottom: 30px; }
  #sec__formcontact, #sec__servicedetail { padding-bottom: 80px; }
  #sec__award, #sec__h_aboutus { padding-bottom: 80px; }
  #sec__award h4, #sec__h_aboutus h4 { padding-top: 10px; margin-top: -10px; }
  #sec__h_promotion h2 { padding-top: 10px; margin-top: -10px; }
  #sec__h_aboutus .sty__2col { padding-bottom: 5px; }
  .sty__servicemenu .box .name { font-size: 1.4rem; margin-top: -25px; }
  .sty__servicemenu .boxrow { padding-bottom: 60px; }
  .sty__abcontent table.timeline tr td:nth-child(1) { width: 80px; }
  .wrap__contactform .subject { width: 100%; text-align: left; }
  .wrap__contactform .inputfield { width: calc(100% - 0px); }
  .wrap__contactform .row { margin-bottom: 10px; }
  #sec__formcontact .map img { width: 100%; }
  .sty__map iframe { height: 60vw; }
  .sty__review .box .photo img { width: 100px; height: 100px; }
  .sty__review { padding-bottom: 10px; }
  .mobilemenu { top: 62px; }
  header.fixedtop .h_row2 .mobilemenu:before { left: -90px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col { grid-gap: 10px; } }

@media screen and (max-width: 430px) { #sec__award h4, #sec__h_aboutus h4 { line-height: 1.2; }
  .bg__ribbon { margin-bottom: 10px; }
  #sec__award, #sec__h_aboutus { padding-bottom: 70px; }
  .sty__box2colv2 .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo, .sty__box2col .box .photo { padding-bottom: 0px; }
  .sty__box2colv2 .box .wrap_row1, .sty__box2col .box .wrap_row1, .sty__box2col .box .wrap_row1 { padding: 20px; }
  .sty__box2colv2 .box .wrap_row2, .sty__box2col .box .wrap_row2, .sty__box2col .box .wrap_row2 { padding-left: 20px; }
  .sty__box2colv2 .box .wrap_row2 .link, .sty__box2col .box .wrap_row2 .link, .sty__box2col .box .wrap_row2 .link { width: 100%; }
  .sty__box2colv2 .box .wrap_row2 .link .deadline, .sty__box2col .box .wrap_row2 .link .deadline, .sty__box2col .box .wrap_row2 .link .deadline { padding-bottom: 10px; }
  .sty__box2colv2 .box .wrap_row2 .link .btn__readmore, .sty__box2col .box .wrap_row2 .link .btn__readmore, .sty__box2col .box .wrap_row2 .link .btn__readmore { width: 100%; }
  .sty__servicedetail .wrapbox { padding: 20px; }
  .sty__servicedetail .boxphoto { grid-gap: 10px; }
  header .logo img { width: 250px; min-width: inherit; }
  header .h_row3 img { width: 70px; margin-left: 110px; }
  header .h_row3 { background-position: center 15px; background-size: auto 9px; }
  header.fixedtop .h_row3 { background-position: center 26px; }
  .mobilemenu { top: 30px; right: 20px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col { grid-template-columns: 1fr; }
  #sec__mobilemenu .wrap > ul > li { line-height: 1.3; font-size: 2.4rem; margin-bottom: 15px; }
  #sec__mobilemenu .wrap .has_submenu.active #sec__submenu-service { max-height: 400px; }
  #sec__mobilemenu .btn_closemenu { top: 20px; right: 20px; }
  #sec__mobilemenu .wrap .has_submenu #sec__submenu-service .wrap__menu3col .title { font-weight: bold; } }

@media screen and (max-width: 375px) { #sec__award h4, #sec__h_aboutus h4 { font-size: 3.4rem; }
  .sty__servicemenu .svbox5, .sty__servicemenu .svbox3 { display: block; }
  .sty__servicemenu .svbox5 .box, .sty__servicemenu .svbox3 .box { width: 100%; margin-bottom: 20px; }
  .sty__servicemenu .svbox5 .box .name, .sty__servicemenu .svbox3 .box .name { font-size: 1.6rem; }
  .sty__abcontent table.timeline tr td:nth-child(1) { width: 60px; }
  #sec__service-video .sty__3col { display: block; }
  #sec__service-video .sty__3col .box { width: auto; grid-column: auto; margin-bottom: 10px; }
  #sec__service-video .sty__3col iframe { height: 55vw; }
  header .logo img { width: 200px; }
  header .h_row3 img { width: 60px; margin-left: 90px; }
  header .h_row3 { background-position: center 12px; }
  header.fixedtop .h_row3 img { margin-left: 30px; }
  .mobilemenu { top: 30px; width: 30px; }
  header.fixedtop .h_row2 .mobilemenu:before { left: -70px; } }

/*# sourceMappingURL=main.css.map */