/* About 01 */
.about-01{width:100%; margin:1rem 0 0 0;}
.about-01 .top-container{
    width:100%; position:relative; background-size:auto calc(100% - 7.5rem);
    background-position:center top; background-repeat:no-repeat; padding:70% 0 0 0;
}
.about-01 .top-container .hero{
    position:absolute; bottom:0; display:block; width:auto; height:70%; cursor:pointer;
    transform:translateX(50%); transition:right .6s, height .6s;
}
.about-01 .top-container .hero.pos-0{right:19%; height:90%; z-index:5;}
.about-01 .top-container .hero.pos-1{right:46%; z-index:3;}
.about-01 .top-container .hero.pos-2{right:65%; z-index:2;}
.about-01 .top-container .hero.pos-3{right:84%; z-index:1;}
.about-01 .top-container > .text-container{
    position:absolute; bottom:0; left:0; right:0; z-index:4;
    background-size:cover; background-position:center;
}
.about-01 .top-container .text-wrapper{
    display:block; position:relative; width:60%; text-align:right; padding:3.25rem 0 1rem 0;
}
.about-01 .top-container h1{font-size:1.375rem; font-weight:500; margin:0; color:#fff;}
.about-01 .top-container p{font-size:1.125rem; font-weight:100; margin:0; color:#fff;}
.about-01 .top-container .signature{
    position:absolute; top:.5rem; right:0; width:auto; max-width:11.5rem;
    height:auto; max-height:6.25rem;
}
.about-01 .bottom-container > .wrapper{width:100%; padding:.75rem 2rem 3rem 2rem;}
.about-01 .about-row{width:100%; padding:1.25rem 0;}
.about-01 .about-title{font-size:1.125rem; font-weight:600; margin:0;}
.about-01 .about-row .ss-list > li{font-size:.9375rem; font-weight:200;}
.about-01 table.table td{text-align:left; font-size:.9375rem; font-weight:200;}
.about-01 table.table td:nth-child(1){font-weight:500; min-width:8rem;}
.about-01 table.table td:nth-child(2){min-width:18rem;}
@media screen and (max-width:767.98px){
    .about-01{margin:.5rem 0 0 0;}
    .about-01 .top-container{background-size:auto calc(100% - 5.375rem);}
    .about-01 .top-container .text-wrapper{padding:2.5rem 0 .5rem 0;}
    .about-01 .top-container h1{font-size:1rem; font-weight:400;}
    .about-01 .top-container p{font-size:.8125rem;}
    .about-01 .top-container .signature{top:.25rem; max-width:8.75rem; max-height:4.75rem;}
    .about-01 .bottom-container > .wrapper{width:100%; padding:.25rem 1rem 2rem 1rem;}
    .about-01 .about-row{width:100%; padding:1rem 0;}
}
.about-01-target{transition:opacity .45s, transform .45s;}
.about-01-target.out, .about-01-target.in{opacity:0; transform:translateX(5rem);}
.about-01-target:not(.active){display:none!important;}


/* Banner 01 */
.banner-01{position:relative; width:100%;}
.banner-01 > .slide-container{position:relative; width:100%; padding:0;}
.banner-01 .slide{
    height:450px; display:flex; align-items:center; text-align:center; line-height:1;
    background-size:cover; background-position:center;
    padding:0;
}
.banner-01 h1{font-size:4.5rem; font-weight:600; margin:0; letter-spacing:.875rem; line-height:.75;}
.banner-01 h2{font-size:3.25rem; font-weight:100; margin:0; letter-spacing:.0625rem;}
.banner-01 h3{font-size:2.125rem; font-weight:300; margin:.5rem 0 0 0;}
.banner-01 .dots{padding:1.1875rem 1rem; height:3rem;}
.banner-01 .dots li{padding:.5625rem;}
.banner-01 .dots li > .desc{
    position:absolute; bottom:100%; left:-7.5rem; width:16.5rem; text-align:center; 
    padding:.25rem 1rem; pointer-events:none; font-size:.9375rem; overflow:hidden; 
    white-space:nowrap; text-overflow:ellipsis; font-weight:300; border-radius:.25rem; 
    opacity:0; transition:bottom .3s, opacity .3s;
}
.banner-01 .dots li:hover > .desc{bottom:calc(100% + .25rem); opacity:1;}
.banner-01 .dots li.slick-active > button{width:.6875rem; height:.6875rem;}

.banner-01 .dots button:before{
    content:''; position:absolute; top:-.3125rem; left:-.3125rem; width:1.3125rem; height:1.3125rem;
    border-radius:50%; opacity:0; transition:opacity .3s;
}
.banner-01 .dots li.slick-active > button:before{opacity:1;}
.banner-01 .arrows{bottom:3rem; left:0; right:0; padding:0 1rem;}
.banner-01 .slide-container:hover .arrows > .slick-prev, 
.banner-01 .slide-container:hover .arrows > .slick-next{opacity:.8;}
@media screen and (max-width:991.98px){
    .banner-01 .slide{height:440px;}
    .banner-01 h1{font-size:3.875rem; letter-spacing:.75rem;}
    .banner-01 h2{font-size:3.125rem; letter-spacing:.0625rem;}
    .banner-01 h3{font-size:1.875rem; margin:.4375rem 0 0 0;}
}
@media screen and (max-width:767.98px){
    .banner-01 .slide-container{padding:0 0 2.5rem 0;}
    .banner-01 .slide{height:400px;}
    .banner-01 h1{font-size:3.125rem; letter-spacing:.575rem;}
    .banner-01 h2{font-size:3rem; letter-spacing:0;}
    .banner-01 h3{font-size:1.5rem; margin:.4375rem 0 0 0;}
    .banner-01 .dots{padding:1rem 1rem; height:2.625rem;}
    .banner-01 .dots li{padding:0 .5rem;}
}

.banner-01 .slide .animate{
    opacity:0; transform:translateY(4rem); transition:opacity .75s, transform .75s;
}
.banner-01 .slide.slick-active .animate{
    opacity:1; transform:translateY(0); transition-delay:var(--delay);
}
.loading .banner-01 .slide .animate{opacity:0!important; transform:translateY(4rem)!important;}

.banner-01.img-only .slide{height:auto!important; padding:0!important;}
.banner-01.img-only .slide > img{
    display:block; width:100%; height:auto; transition:transform 10s linear;
}
.banner-01.img-only .slide.slick-active > img{transition-delay:.75s; transform:scale(1.2);}
.loading .banner-01.img-only .slide.slick-active > img{transform:scale(1);}


/* Call to Action 01 */
.call-01{width:100%; padding:3rem 0 16rem 0;}
@media screen and (max-width:767.98px){
    .call-01{padding:2.5rem 0 15rem 0;}
}


/* Call to Action 02 */
.call-02{width:100%; position:relative; overflow:hidden; padding:4rem 0 0 0;}
.call-02 .subject{
    position:relative; display:block; width:280px; height:auto; margin:0 auto;
    transform:translateY(1rem);
}
.call-02 > .call-container{
    width:100%; padding:3rem 0 2rem 0; background-size:cover; background-position:center;
}
.call-02 .call-text{position:relative; margin:0; font-weight:300;}
.call-02 .call-text.title{font-size:2.125rem;}
.call-02 .call-text.desc{font-family:'TH Sarabun NEW'; font-size:1.625rem;}
.call-02 .call-text.desc.desc-lg{font-family:'TH Sarabun NEW'; font-size:2rem; line-height:1.1;}
.call-02 .slide-container{width:100%; margin:.625rem 0 0 0;}
.call-02 .slide > .wrapper{display:block; padding:0 .375rem;}
.call-02 .slide-container{position:relative;}
.call-02 .slide-container .slick-track{padding:1rem 0;}
.call-02 .slide-container .client{
    display:block; width:100%; height:50px; border-radius:1000em;
    background-size:cover; background-position:center;
}
.call-02 .slide-container .arrows{left:-4rem; right:-4rem; padding:0 1rem;}
.call-02 .slide-container  .arrows > .slick-prev, 
.call-02 .slide-container  .arrows > .slick-next{
    width:2.5rem; height:2.25rem; line-height:2.25rem;
}
.call-02 .slide-container  .slide-container:hover .arrows > .slick-prev, 
.call-02 .slide-container  .slide-container:hover .arrows > .slick-next{opacity:.8;}
.call-02 .slide-container  .arrows > .slick-prev::before, 
.call-02 .slide-container  .arrows > .slick-next::before{font-size:1.5rem;}
.call-02 .input-group{width:100%; max-width:26rem; margin:0 auto 2rem auto;}
.call-02 .input-group > input{
    border-radius:1000em!important; font-size:1rem; text-align:center; z-index:2;
}
.call-02 .input-group > .input-group-append{margin-left:-1rem; z-index:1;}
.call-02 .input-group > .input-group-append > button{
    border-radius:0 1000em 1000em 0!important; padding-left:1.5rem; font-size:1rem;
}
@media screen and (max-width:767.98px){
    .call-02{padding:3rem 0 0 0;}
    .call-02 > .call-container{padding:3rem 0 2.5rem 0;}
}


/* Call to Action 03 (with 02) */
.call-03{padding:0;}
.call-03 .top-container{padding:4rem 0 0 0; background-size:cover; background-position:center;}
.call-03 .input-group{margin:1rem auto 0 auto;}
.call-03 .subject{transform:translateY(3rem);}
.call-03 .call-container{padding:5.5rem 0 3rem 0;}
.call-03 .slide > .wrapper{padding:0 .75rem;}
.call-03 .slide-container .client{height:60px; border-radius:5px;}
.call-03 .slide-container p{
    display:block; width:100%; margin:.75rem 0 0 0; text-align:center; font-size:.8125rem;
    font-weight:300;
}


/* Call to Action 04 */
.call-04{position:relative; width:100%; overflow:hidden;}
.call-04 .text-container{position:absolute; top:0; bottom:0; left:0; right:0; padding:3rem 0 16rem 0;}
.call-04 .img-bg{
    position:relative; display:block; width:130vw; height:auto; transform:translateX(-15vw);
}
.call-04 .kite{display:block; position:absolute; height:auto; transform-origin:bottom right;}
.call-04 .kite.kite-1{
    width:19.5vw; bottom:15.5vw; right:56vw; animation:kite1 ease-in-out 3.75s infinite;
}
.call-04 .kite.kite-2{
    width:11vw; bottom:17.4vw; right:37.6vw; animation:kite2 ease-in-out 3.6s infinite;
}
.call-04 .kite.kite-3{
    width:14vw; bottom:16vw; right:16vw; animation:kite2 ease-in-out 3.4s infinite;
}
@media screen and (max-width:1299.98px){
    .call-04 .img-bg{width:140vw; transform:translateX(-20vw);}
    .call-04 .kite.kite-1{width:calc(19.5vw * 140 / 130); bottom:16.8vw; right:56.5vw;}
    .call-04 .kite.kite-2{width:calc(11vw * 140 / 130); bottom:18.8vw; right:36.8vw;}
    .call-04 .kite.kite-3{width:calc(14vw * 140 / 130); bottom:17vw; right:13vw;}
}
@media screen and (max-width:1199.98px){
    .call-04 .img-bg{width:150vw; transform:translateX(-25vw);}
    .call-04 .kite.kite-1{width:calc(19.5vw * 150 / 130); bottom:18vw; right:56.7vw;}
    .call-04 .kite.kite-2{width:calc(11vw * 150 / 130); bottom:20vw; right:35.6vw;}
    .call-04 .kite.kite-3{width:calc(14vw * 150 / 130); bottom:18.6vw; right:10.7vw;}
}
@media screen and (max-width:991.98px){
    .call-04 .img-bg{width:200vw; transform:translateX(-50vw);}
    .call-04 .kite.kite-1{width:calc(19.5vw * 200 / 130); bottom:24vw; right:59.4vw;}
    .call-04 .kite.kite-2{width:calc(11vw * 200 / 130); bottom:26.6vw; right:31vw;}
    .call-04 .kite.kite-3{width:calc(14vw * 200 / 130); bottom:25.8vw; right:-2vw;}
}
@media screen and (max-width:767.98px){
    .call-04 .text-container{padding:2.5rem 0 15rem 0;}
    .call-04 .img-bg{width:300vw; transform:translateX(-100vw);}
    .call-04 .kite.kite-1{width:calc(19.5vw * 300 / 130); bottom:36vw; right:64.5vw;}
    .call-04 .kite.kite-2{width:calc(11vw * 300 / 130); bottom:40vw; right:22vw;}
    .call-04 .kite.kite-3{width:calc(14vw * 300 / 130); bottom:38vw; right:-28vw;}
}
@media screen and (max-width:575.98px){
    .call-04 .img-bg{width:480vw; transform:translateX(-190vw);}
    .call-04 .kite.kite-1{width:calc(19.5vw * 480 / 130); bottom:57.5vw; right:76.5vw;}
    .call-04 .kite.kite-2{width:calc(11vw * 480 / 130); bottom:64vw; right:9vw;}
    .call-04 .kite.kite-3{width:calc(14vw * 480 / 130); bottom:60vw; right:-70vw;}
}

@keyframes kite1{
    0% {transform:rotate(10deg)scale(1);}
    50% {transform:rotate(-5deg)scale(1.1);}
    100% {transform:rotate(10deg)scale(1);}
}
@keyframes kite2{
    0% {transform:rotate(-20deg)scale(1.1);}
    50% {transform:rotate(0)scale(1);}
    100% {transform:rotate(-20deg)scale(1.1);}
}
@keyframes kite3{
    0% {transform:rotate(14deg)scale(1);}
    50% {transform:rotate(0)scale(1.1);}
    100% {transform:rotate(14deg)scale(1);}
}


/* Contact 01 */
.contact-01{width:100%;}
.contact-01 .wrapper{width:100%; padding:1.5rem; border:1px solid transparent;}
.contact-01 h1, .contact-01 h2, .contact-01 h3{margin:0;}
.contact-01 p{font-size:.9375rem; margin:.25rem 0 2rem 0;}
.contact-01 .btn-container{
    width:100%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.contact-01 .btn-container .captcha-container{width:300px; margin:0;}
.contact-01 .btn-container .captcha-container > img{display:block; width:100%; height:auto;}
.contact-01 .btn-container .btns{margin:1.5rem 0;}


/* Content 01 */
.content-01{width:100%;}
.content-01 > .content-header{width:100%; position:relative;}
.content-01 > .content-header::after{
    content:''; position:absolute; top:100%; left:0; right:0; height:3px; z-index:1;
}
.content-01 .content-tabs{width:100%; position:relative; display:flex; flex-wrap:wrap;}
.content-01 .content-tabs > .header > *, .content-01 .content-tabs > .tab > *{
    position:relative; margin:0; white-space:nowrap; transition:color .3s;
}
.content-01 .content-tabs > .header{padding:.625rem 4rem .5rem 0;}
.content-01 .content-tabs > .header > p{font-family:'TH Sarabun New';}
.content-01 .content-tabs > .tab{
    padding:.625rem .75rem 2rem .75rem; cursor:pointer; position:relative; width:7.5rem;
    transition:background .3s, width .3s;
}
.content-01 .content-tabs > .tab.active{width:11.5rem;}
.content-01 .content-tabs > .header > h3, .content-01 .content-tabs > .tab > h3{font-size:1.125rem;}
.content-01 .content-tabs > .tab > p{
    position:absolute; left:.75rem; right:.75rem; overflow:hidden; text-overflow:ellipsis;
    font-family:'TH Sarabun New'; font-size:1.125rem; opacity:0; transition:opacity .3s;
}
.content-01 .content-tabs > .tab.active > p{opacity:1;}
.content-01 .content-tabs > .tab h3::after{
    content:'\f054'; position:absolute; bottom:-1.125rem; right:-.25rem; line-height:1.125rem;
    font-family:'Font Awesome 5 Free'; width:1rem; height:1rem; border-radius:50%; font-weight:900;
    font-size:.5625rem; text-align:center; transition:background .3s, color .3s;
}
.content-01 .content-tabs > .tab::before{
    content:''; position:absolute; top:0; bottom:0; left:0; right:0; opacity:0; transition:opacity .3s;
}
.content-01 .content-tabs > .tab.active::before{opacity:1;}
.content-01 .content-tabs > .tab::after{
    content:''; position:absolute; bottom:0; left:0; right:0; height:.4375rem;
}
.content-01 > .contents{width:100%;}
.content-01 > .contents > .content{display:none; position:relative; width:100%; padding:2.625rem 0 0 0;}
.content-01 > .contents > .content.active{display:block;}
.content-01 .content > .img-bg-container{
    position:absolute; top:0; bottom:10rem; left:0; right:0;
    -webkit-mask-image:linear-gradient(to bottom, #000, #000, #000, #000, #000, #000,
        rgba(0,0,0,.6666), rgba(0,0,0,.3333), rgba(0,0,0,0));
}
.content-01 .content > .img-bg-container > .img-bg{
    width:100%; height:100%; background-size:cover; background-position:center top;
   
}
.content-01 .content > .container{position:relative;}
.content-01 .content .tab-container{margin:6.5rem 0 0 0!important;}
@media screen and (max-width:991.98px){
    .content-01 .content .tab-container{margin:4.5rem 0 0 0!important;}
}
@media screen and (max-width:767.98px){
    .content-01 .content .tab-container{margin:3rem 0 0 0!important;}
}


/* Content 02 */
.content-02{width:100%; padding:4rem 0;}
.content-02 .contents{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;}
.content-02 .content{
    display:block; width:calc((100% - 2rem) / 3); margin:1rem 0 0 0;
    transition:transform .3s;
}
.content-02 .content:hover{transform:translateY(-.5rem);}
.content-02 .content > .wrapper{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:1.25rem .75rem; height:100%; transition:all .3s;
}
.content-02 .content .icon{width:4rem; text-align:center; font-size:2.5rem; transition:color .3s;}
.content-02 .content .text{width:calc(100% - 4.5rem); font-size:1.0625rem; font-weight:400;}
@media screen and (max-width:1199.98px){
    .content-02 .content{width:calc((100% - 1rem) / 2);}
}
@media screen and (max-width:575.98px){
    .content-02 .content{width:100%;}
}


/* Content 03 */
.content-03{position:relative; width:100%;}
.content-03 .slide-container{position:relative; width:100%; padding:0;}
.content-03 .slick-track{padding:1rem 0;}
.content-03 .slide{padding:0 1rem;}

        
/* Content 04 */
.content-04{width:100%; padding:0 0 2rem 0;}
.content-04 > .top-container{
    width:100%; padding:4.5rem 0 0 0; background-size:100% auto; 
    background-position:center top; background-repeat:no-repeat;
}
.content-04 > .top-container img.img-content{display:block; width:100%; height:auto;}
.content-04 .box-wrapper{display:block; position:relative; width:100%; padding:1.5rem;}
@media screen and (max-width:767.98px){
    .content-04 .box-wrapper{padding:1rem;}
}


/* Content 05 */
.content-05{
    position:relative; width:100%; height:calc(100vh - 8rem); background-size:cover;
    background-position:center; display:flex; align-items:center;
}
.content-05 .filter{position:absolute; top:0; bottom:0; left:0; right:0;}
.content-05 .text-container, .content-05 .text-container-02{
    position:relative; display:block; width:100%; max-width:40rem; margin:0 auto;
    padding:1.75rem 1.5rem;
}
.content-05 .text-container-02{width:23rem; margin:0 0 5.5rem 7%;}
.content-05 h1{margin:0 0 .625rem 0;}
.content-05 p{margin:0; font-size:1.0625rem; font-weight:100; line-height:1.5;}
@media screen and (max-width:991.98px){
    .content-05 .text-container-02{margin:0 0 4.5rem 3%;}
}
@media screen and (max-width:767.98px){
    .content-05 .text-container, .content-05 .text-container-02{padding:1.25rem 1rem;}
    .content-05 .text-container-02{width:18rem; margin:0 0 4rem 0; padding:0;}
    .content-05 p{font-size:.9375rem;}
}
@media screen and (max-width:575.98px){
    .content-05 .text-container-02{width:100%; margin:0;}
}


/* Content 06 */
.content-06{position:relative; width:100%; background:#dcdcdc;}
.content-06 > .img-bg{
    position:absolute; top:0; bottom:0; left:0; right:0; background-size:100% auto;
    background-position:center top; background-repeat:no-repeat;
}


/* Content 07 */
.content-07{position:relative; width:100%;}
.content-07 .slide-container{
    display:block; position:relative; width:100%; max-width:40rem; margin:0 auto;
    padding:2rem 0 2.5rem 0;
}
.content-07 .arrows{left:-4.25rem; right:-4.25rem;}
.content-07 .dots button{background:#fff;}
.content-07 .dots li.slick-active button{width:.6875rem; height:.6875rem; background:#0478b6;}


/* FAQ 01 */
.faq-01{width:100%;}
.faq-01 .faq{width:100%; padding:0; margin:.75rem 0 0 0;}
.faq-01 .faq:last-child{border-bottom:0;}
.faq-01 .question{width:100%; position:relative; display:flex; cursor:pointer;}
.faq-01 .question *{margin:0;}
.faq-01 .question.active::after{transform:rotate(180deg);}
.faq-01 .ftag{
    display:block; width:3.75rem; text-align:center; font-size:1.5rem; font-weight:600;
    padding:.5rem 0; margin:0; border:1px solid transparent;
}
.faq-01 .question > *:nth-child(2){
    padding:1rem 3rem 1rem 1.25rem; width:calc(100% - 3.75rem); font-size:1.125rem;
    font-weight:500; border:1px solid transparent; border-left:0;
    transition:color .15s, background .15s, border-color .15s;
}
.faq-01 .question > *:nth-child(2)::before, .faq-01 .question > *:nth-child(2)::after{
    content:''; position:absolute; top:1.75rem; right:.875rem; width:20px; height:3px;
    transition:background .15s, transform .3s;
}
.faq-01 .question > *:nth-child(2)::after{transform:rotate(90deg);}
.faq-01 .question.active > *:nth-child(2)::after{transform:rotate(0deg);}
.faq-01 .answer{width:100%; position:relative; display:flex; padding:0;}
.faq-01 .answer .ftag{height:3.75rem; display:flex; align-items:center; justify-content:center;}
.faq-01 .answer .content{display:block; width:calc(100% - 3.75rem); padding:1.5rem;}
.faq-01 .answer p{margin:0; font-size:.9375rem; font-weight:200; line-height:1.7;}
.faq-01 .wrapper{display:none;}
.faq-01 .answer .content table td{padding:.5rem 0; border:0; border-bottom:1px solid transparent;}
.faq-01 .answer .content table tr:last-child > td{border:0;}

.faq-01.faq-01-custom{display:flex; justify-content:space-between; align-items:flex-start;}
.faq-01.faq-01-custom img.hero{display:block; width:5.1875rem; height:auto; margin:.75rem .75rem 0 0;}
.faq-01.faq-01-custom .faqs{width:calc(100% - 5.9375rem);}
.faq-01.faq-01-custom .ftag{
    width:4rem; padding-right:.25rem; margin-right:-.75rem;
    clip-path:polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}
.faq-01.faq-01-custom .question > *:nth-child(2){width:calc(100% - 3rem); padding-left:2rem;}

@media screen and (max-width:767.98px){
    .faq-01.faq-01-custom img.hero{display:none;}
    .faq-01.faq-01-custom .faqs{width:100%;}
}
@media screen and (max-width:575.98px){
    .faq-01 .question > *:nth-child(2){padding:1rem 3rem 1rem 1rem; font-size:.9375rem;}
    .faq-01 .answer .content{padding:1.25rem 1rem;}
}


/* Intro 01 */
.intro-01{width:100%; height:100vh; display:flex; align-items:center;}
.intro-01 .hero{display:block; width:100%; max-width:46rem; height:auto; margin:0 auto;}
.intro-01 .btns{margin:.5rem 0 0 0; text-align:center;}
.intro-01 .btn{margin:.25rem .625rem; box-shadow:rgba(0,0,0,.2) 0px 15px 30px; transition:all .3s;}
 

/* Intro 02 */
.intro-02{padding:7rem 0 1rem 0;}
.intro-02.with-tag{padding:8rem 0 0 0;}
.intro-02 p{font-size:1.25rem; font-weight:100;}
.intro-02 p.tag{
    position:relative; width:100%; max-width:34rem; font-size:1rem;
    padding:1.25rem 0; margin:0;
}
.intro-02 p.tag::before{
    content:''; position:absolute; top:0; bottom:0; left:calc(50% - 35vw); right:0; z-index:-1;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.7), 
        rgba(0,0,0,.85), rgba(0,0,0,.85),rgba(0,0,0,.85), 
        rgba(0,0,0,.7), rgba(0,0,0,0));
}
@media screen and (max-width:1199.98px){
    .intro-02 p.tag::before{left:calc(50% - 38vw);}
}
@media screen and (max-width:991.98px){
    .intro-02{padding:5rem 0 1rem 0;}
    .intro-02.with-tag{padding:7rem 0 0 0;}
    .intro-02 p.tag{max-width:100%; padding:1rem 0;}
    .intro-02 p.tag::before{left:calc(50% - 50vw); right:calc(50% - 50vw);}
}
@media screen and (max-width:767.98px){
    .intro-02{padding:4rem 0 1rem 0;}
    .intro-02.with-tag{padding:6rem 0 0 0;}
    .intro-02 p.tag{font-size:.9375rem;}
    .intro-02 p.tag > br{display:none;}
}


/* Intro 03 */
.intro-03{width:100%;}
.intro-03 .wrapper{width:100%; position:relative; padding:4rem 0 0 0;}
.intro-03 .text-container{width:100%; max-width:440px; margin:0 0 1.5rem 0;}
.intro-03 h1{margin:0;}
.intro-03 .img-bg{width:100%; height:180px; background-size:cover; background-position:center;}
.intro-03 .hero{
    display:block; position:absolute; bottom:0; right:0; width:auto; height:100%;
}
@media screen and (max-width:1199.98px){
    .intro-03 .img-bg{height:150px;}
    .intro-03 .hero{height:calc(100% - 3rem);}
}
@media screen and (max-width:767.98px){
    .intro-03 .img-bg{height:130px; margin:calc(120px - 1.5rem) 0 0 0;}
    .intro-03 .hero{height:220px;}
}


/* Mission 01 */
.mission-01{width:100%; background-size:cover; background-position:center;}
.mission-01 .text-wrapper{padding:2.5rem 2rem 20rem 2rem;}
.mission-01 ul{list-style:none; width:100%; max-width:440px; margin:0; padding:0;}
.mission-01 ul > li{
    display:block; position:relative; padding:0 0 0 1.75rem; margin:1rem 0; font-size:1.125rem;
    color:#000;
}
.mission-01 ul > li:first-child{margin-top:0;}
.mission-01 ul > li:last-child{margin-bottom:0;}
.mission-01 ul > li::before{
    content:''; position:absolute; top:.4375rem; left:0; width:.625rem; height:.625rem;
    background:#500c6f;
}
@media screen and (max-width:767.98px){
    .mission-01 .text-wrapper{padding:1.5rem 1.5rem 18rem 1.5rem;}
    .mission-01 ul > li{font-size:1rem; padding:0 0 0 1.5rem;}
    .mission-01 ul > li::before{top:.4375rem; width:.5rem; height:.5rem;}
}
@media screen and (max-width:575.98px){
    .mission-01 .text-wrapper{padding:1.25rem 1rem 18rem 1rem;}
}


/* Sitemap 01 */
.sitemap-01{padding:1rem 0 0 0;}
.sitemap-01 > .img-bg{
    width:100%; height:400px; background-size:cover; background-position:center;
}
.sitemap-01 .sitemap-container{margin:.75rem 0 0 0;}
.sitemap-01 .grid{border-left:1px solid transparent;}
.sitemap-01 .grid:nth-child(3n+1){border-left:0;}
.sitemap-01 .title > a{
    display:block; position:relative; width:100%; padding:.25rem 0 .25rem 3rem; font-weight:600;
    font-size:1.0625rem; transition:color .3s;
}
.sitemap-01 .title > a::before{
    content:''; position:absolute; top:.6875rem; left:1.5rem; width:.625rem; height:.625rem;
}
.sitemap-01 ul{list-style:none; width:100%; padding:0 0 0 3rem; margin:.5rem 0 0 0;}
.sitemap-01 ul > li{padding:0; margin:0 0 .5rem 0;}
.sitemap-01 ul > li > a{
    display:block; position:relative; width:100%; padding:0 0 0 1.75rem; font-weight:300;
    font-size:.9375rem; transition:color .3s;
}
.sitemap-01 ul > li > a::before{
    content:''; position:absolute; top:.4rem; left:.5rem; width:.4375rem; height:.4375rem;
}
@media screen and (max-width:1199.98px){
    .sitemap-01 > .img-bg{height:350px;}
}
@media screen and (max-width:991.98px){
    .sitemap-01 > .img-bg{height:300px;}
    .sitemap-01 .ss-icon-title > .icon{line-height:2.4375rem;}
    .sitemap-01 .grid:nth-child(3n+1){border-left:1px solid transparent;}
    .sitemap-01 .grid:nth-child(2n+1){border-left:0;}
}
@media screen and (max-width:767.98px){
    .sitemap-01 > .img-bg{height:240px;}
    .sitemap-01 .ss-icon-title > .icon{line-height:2.125rem;}
}
@media screen and (max-width:575.98px){
    .sitemap-01 > .img-bg{height:220px;}
    .sitemap-01 .grid{border:0!important;}
}


/* Sitemap 02 */
.sitemap-02{width:100%; padding:2rem 0 6rem 0;}
.sitemap-02 a{transition:color .3s;}
.sitemap-02 .grids{margin-top:.5rem;}
.sitemap-02 .grid{margin-top:3rem;}
.sitemap-02 .title-wrapper{text-align:center;}
.sitemap-02 .title{
    display:inline-block; border:4px solid transparent; padding:.625rem 1.5rem .4375rem 1.5rem;
    font-size:1.5rem; font-weight:600; margin:0;
}
.sitemap-02 .sitemap-title{
    width:100%; display:flex; align-items:flex-end; font-size:1rem; font-weight:600;
    border-bottom:4px solid transparent; padding:.375rem 0;
}
.sitemap-02 .sitemap-title .num{
    font-size:1.875rem; font-weight:500; margin:0 .75rem 0 0; line-height:1;
}
.sitemap-02 ul{width:100%; padding:0; margin:1rem 0 0 0; list-style:none;}
.sitemap-02 ul > li{
    position:relative; width:100%; padding:.8125rem 0 .6875rem 2rem; margin:0;
    border-bottom:1px solid transparent; font-size:1rem; font-weight:300;
}
.sitemap-02 ul > li::before{
    content:''; position:absolute; top:1rem; left:.75rem; width:.5rem; height:.875rem
}
.sitemap-02 ul > li > ul{position:relative; margin:.5rem 0 1rem 0;}
.sitemap-02 ul > li > ul::before{
    content:''; position:absolute; top:.25rem; bottom:.375rem; left:-1.0625rem; width:.125rem;
}
.sitemap-02 ul > li > ul > li{
    border-bottom:0; padding:.4375rem 0 .3125rem 1rem; font-size:.875rem;
}
.sitemap-02 ul > li > ul > li::before{
    top:.8125rem; left:0; width:.4375rem; height:.4375rem; border-radius:50%;
}


/* Stat 01 */
.stat-01{width:100%;}
.stat-01 .grid{text-align:center; border-right:2px solid transparent;}
.stat-01 .grid:nth-child(4n){border-right:0;}
.stat-01 .grid h1{
    font-size:5.5rem; font-weight:200; line-height:.75; margin:0; letter-spacing:-.25rem;
}
.stat-01 .grid p{font-size:1.125rem; font-weight:100; margin:0;}
.stat-01 .grid p:last-child{margin:.5rem 0 0 0;}
@media screen and (max-width:991.98px){
    .stat-01 .grids > .grid{margin-bottom:1.5rem;}
    .stat-01 .grid:nth-child(2n){border-right:0;}
    .stat-01 .grid h1{font-size:5rem; line-height:.8;}
    .stat-01 .grid p:last-child{margin:.1875rem 0 0 0;}
}
@media screen and (max-width:575.98px){
    .stat-01 .grid{border-right:0;}
}


/* Tab Container */
.tab-container{position:relative; display:block; width:100%; margin:2.5rem 0 0 0;}
.tab-container .tabs{
    position:relative; width:100%; display:flex; flex-wrap:wrap; margin:0;
    display:flex; justify-content:center;
}
.tab-container .tab{cursor:pointer;}
.tab-container .tab-contents{position:relative; width:100%;}
.tab-container .tab-content{display:none; position:relative; padding:0; margin:0; flex-wrap:wrap;}
.tab-container .tab-content.active{display:flex;}

/* Tab Container 01 */
.tab-container.tab-container-01 .tabs::before{
    content:''; position:absolute; bottom:-1px; left:calc(50% - 50vw); right:calc(50% - 50vw);
    height:.4375rem;
}
.tab-container.tab-container-01 .tab{
    width:20%; position:relative; line-height:1; padding:0; margin:1rem 0 0 0; opacity:1;
}
.tab-container.tab-container-01 .tab .icon{width:100%; height:3.5rem;}
.tab-container.tab-container-01 .tab .icon > img{
    display:block; width:auto; max-width:100%; height:auto; max-height:100%; margin:0 auto;
}
.tab-container.tab-container-01 .tab h5{
    display:block; position:relative; width:100%; margin:.5rem 0 0 0; height:calc(100% - 4rem);
    padding:.75rem 1rem 1rem 1rem; border-radius:.25rem .25rem 0 0; overflow:hidden;
    font-weight:300; line-height:1.25; font-size:.9375rem; transition:color .3s, background .3s;
}
.tab-container.tab-container-01 .tab h5 > *{position:relative;}
.tab-container.tab-container-01 .tab h5::before{
    content:''; position:absolute; top:0; bottom:0; left:0; right:0; opacity:0;
    background:url('../images/bg/21.jpg') center/cover no-repeat;
    transition:opacity .3s;
}
.tab-container.tab-container-01 .tab.active .text-container{color:#fff; background:#63337e;}
.tab-container.tab-container-01 .tab-content > .content-wrapper{
    width:100%; display:flex; position:relative;
}
.tab-container.tab-container-01 .tab-content > .content-wrapper > .hero{
    position:relative; width:20%; height:100%; background-size:cover; background-position:center;
   
}
.tab-container.tab-container-01 .tab-content .contents{
    position:relative; width:80%; padding:0 0 0 1.5rem;
    box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none;
}
.tab-container.tab-container-01 .tab-content .filter-bg{
    position:absolute; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
    background-size:cover; background-position:center;
}
@media screen and (max-width:991.98px){
    .tab-container.tab-container-01 .tab h5{font-size:.875rem; padding:.625rem .25rem 1rem .25rem;}
    .tab-container.tab-container-01 .tab-content > .content-wrapper > .hero{width:0; height:0;}
    .tab-container.tab-container-01 .tab-content .contents{width:100%; padding:0;}
}
@media screen and (max-width:767.98px){
    .tab-container.tab-container-01 .tab{width:calc(100% / 2);}
}

/* Tab Container 02 */
.tab-container.tab-container-02{margin:.5rem 0 0 0;}
.tab-container.tab-container-02 .tab{width:10rem; line-height:1; padding:0 .5rem; margin:1.5rem 0 0 0;}
.tab-container.tab-container-02 .tab .icon{
    position:relative; width:100%; text-align:center; line-height:2.5rem; font-size:2.5rem;
    transition:color .3s;
}
.tab-container.tab-container-02 .tab .icon > .img-icon{
    display:block; margin:0 auto; width:4rem; height:auto; filter:grayscale(100%);
    transition:all .3s;
}
.tab-container.tab-container-02 .tab:hover .icon > .img-icon,
.tab-container.tab-container-02 .tab.active .icon > .img-icon{filter:grayscale(0%);}
.tab-container.tab-container-02 .tab h4{
    font-size:1.4375rem; margin:.375rem 0 0 0; font-weight:300;
    font-family:'TH Sarabun New';
}
.tab-container.tab-container-02 .tab-contents{margin:1.75rem 0 0 0;}
.tab-container.tab-container-02 .tab-content > .filter-bg{
    position:relative; width:100vw; height:240px; margin:0 calc(50% - 50vw);
    background-size:cover; background-position:center;
}
.tab-container.tab-container-02 .tab-content > .filter-img{
    position:relative; display:block; width:100vw; height:auto; margin:0 calc(50% - 50vw);
}
.tab-container.tab-container-02 .slide-container{position:relative; width:100%; margin:0;}
.tab-container.tab-container-02 .post-card{padding-bottom:6.5rem; transition:background .3s;}
.tab-container.tab-container-02 .btns{
    border-top:1px solid transparent; border-bottom:1px solid transparent;
    transition:border-color .3s;
}
.tab-container.tab-container-02 .arrows{left:-5rem; right:-5rem; padding:0 1rem;}
.tab-container.tab-container-02 .arrows > .slick-prev, 
.tab-container.tab-container-02 .arrows > .slick-next{opacity:1; transform:none;}
.tab-container.tab-container-02 .slide-container:hover .arrows > .slick-prev, 
.tab-container.tab-container-02 .slide-container:hover .arrows > .slick-next{opacity:.75;}
.tab-container.tab-container-02 .arrows > .slick-prev:hover, 
.tab-container.tab-container-02 .arrows > .slick-next:hover{opacity:1;}
.tab-container.tab-container-02 .slide{position:relative;}
.tab-container.tab-container-02 .slide > .img-bg{
    position:absolute; top:0; bottom:0; left:0; right:0; background-size:auto 100%;
    background-position:center bottom; transition:opacity .3s;
}
.tab-container.tab-container-02 .slide.slick-current > .img-bg.on-default,
.tab-container.tab-container-02 .slide > .img-bg.on-active{opacity:0;}
.tab-container.tab-container-02 .slide.slick-current > .img-bg.on-active{opacity:1;}
.tab-container.tab-container-02 .slide > .post-card{position:relative;}
@media screen and (max-width:991.98px){
    .tab-container.tab-container-02 .arrows{left:-3.5rem; right:-3.5rem;}
}
@media screen and (max-width:767.98px){
    .tab-container.tab-container-02 .slide.slick-current > .img-bg.on-default,
    .tab-container.tab-container-02 .slide > .img-bg.on-default{opacity:1;}
    .tab-container.tab-container-02 .slide.slick-current > .img-bg.on-active,
    .tab-container.tab-container-02 .slide > .img-bg.on-active{opacity:0;}
}
@media screen and (max-width:575.98px){
    .tab-container.tab-container-02 .arrows{left:-2.5rem; right:-2.5rem;}
    .tab-container.tab-container-02 .arrows > .slick-prev::before, 
    .tab-container.tab-container-02 .arrows > .slick-next::before{font-size:1.75rem;}
}

/* Tab Container 03 */
.tab-container.tab-container-03 .tabs{justify-content:flex-start;}
.tab-container.tab-container-03 .tab{
    padding:.625rem 1rem; border-right:1px solid transparent; transition:background .3s;
    display:flex; align-items:center;
}
.tab-container.tab-container-03 .tab > h4{
    font-weight:300; margin:0; white-space:nowrap; font-size:.875rem;
}
.tab-container.tab-container-03 .tab > .icon{
    display:block; width:1.5rem; height:1.5rem; border-radius:50%; text-align:center;
    line-height:1.75rem; font-size:.9375rem; margin:0 .5rem 0 0;
    transition:color .3s, background .3s;
}
.tab-container.tab-container-03 .tab-contents .grids{
    -webkit-mask-image:linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, 
        #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, 
        rgba(0,0,0,.5), rgba(0,0,0,0));
}
.no-fading .tab-container.tab-container-03 .tab-contents .grids{
    -webkit-mask-image:none; box-shadow:rgba(0,0,0,.25) 0px 15px 30px;
}
.tab-container.tab-container-03 .tab-content .grid{padding:1.75rem 1.5rem 2.25rem 1.5rem;}

/* Tab Container 04 */
.tab-container.tab-container-04{display:flex; justify-content:space-between;}
.tab-container.tab-container-04.vertical{display:block;}
.tab-container.tab-container-04 .tabs{display:block; width:calc(38% - 2rem); margin:0 2rem 0 0;}
.tab-container.tab-container-04.vertical .tabs{
    display:flex; justify-content:space-between; width:100%; margin:0;
}
.tab-container.tab-container-04 .tab-contents{width:62%;}
.tab-container.tab-container-04.vertical .tab-contents{width:100%;}
.tab-container.tab-container-04 .tab{
    position:relative; width:100%; display:flex; align-items:center; margin:0 0 1rem 0;
}
.tab-container.tab-container-04.vertical .tab{width:calc(25% - .5rem);}
.tab-container.tab-container-04 .tab::before, .tab-container.tab-container-04 .tab::after{
    content:''; position:absolute; top:100%; left:0; height:1px;
}
.tab-container.tab-container-04 .tab::before{right:0;}
.tab-container.tab-container-04 .tab::after{height:4px; width:0; transition:width .3s;}
.tab-container.tab-container-04 .tab.active::after{width:100%;}
.tab-container.tab-container-04 .tab .num{
    width:2.5rem; height:2.5rem; border-radius:.25rem .25rem 0 0; line-height:2.5rem;
    text-align:center; font-size:1.25rem; transition:color .3s, background .3s;
}
.tab-container.tab-container-04 .tab > *:nth-child(2){
    margin:0; width:calc(100% - 2.5rem); white-space:nowrap; padding:0 0 0 .625rem;
    font-size:.9375rem;
}
@media screen and (max-width:1199.98px){
    .tab-container.tab-container-04 .tabs{width:calc(40% - 2rem);}
    .tab-container.tab-container-04 .tab-contents{width:60%;}
}
@media screen and (max-width:991.98px){
    .tab-container.tab-container-04.vertical .tab{width:calc(50% - .5rem);}
}
@media screen and (max-width:767.98px){
    .tab-container.tab-container-04{flex-wrap:wrap;}
    .tab-container.tab-container-04 .tabs{width:100%; margin:0 0 1.25rem 0;}
    .tab-container.tab-container-04 .tab-contents{width:100%;}
}
@media screen and (max-width:575.98px){
    .tab-container.tab-container-04.vertical .tab{width:100%;}
}


/* Theme Selector */
.theme-selector{
    position:fixed; top:10rem; right:0; border-radius:.25rem 0 0 .25rem; background:#fff;
    box-shadow:0 0 12px 2px rgba(0,0,0,.15); padding:.25rem .25rem .5rem .5rem;
}
.theme-selector > .wrapper{
    width:100%; max-width:8rem; position:relative; display:flex; align-items:center; flex-wrap:wrap;
}
.theme-selector .color{
    display:block; width:1.75rem; height:1.75rem; border-radius:50%; margin:.25rem .25rem 0 0;
}
.theme-selector .color.color-0{background:#6d2b6b;}
.theme-selector .color.color-1{background:#2a9d8f;}
.theme-selector .color.color-2{background:#282b84;}
.theme-selector .color.color-3{background:#007344;}
.theme-selector .color.color-4{background:#6a1514;}
.theme-selector .color.color-5{background:#ddcd00;}
.theme-selector .color.color-6{background:#0164aa;}
.theme-selector .color.color-7{background:#182241;}
.theme-selector .color.color-8{background:#35a28d;}
.theme-selector .color.color-9{background:#872e22;}
.theme-selector .color.color-10{background:#78672b;}