@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+Thai:wght@100..900&display=swap");
html{scroll-behavior:smooth}
body{font-family:"Kanit", sans-serif;color:#ffff}a>img:hover{filter:drop-shadow(2px 4px 6px #b48457) brightness(1.25)}
.bt-250{padding-bottom:150px}
.container-fluid{overflow-x:hidden}
.txt-brown{color:#401c00}
.w-75{width:75%}
.txt-pink{color:#ff459d}
.sec-home{background-image:url("../img/bg.png");
background-repeat:no-repeat;
background-size:100% auto;
background-position:top center;}
.sec-2 .box-count{background-image:url("");
background-repeat:no-repeat;background-size:100% auto;
background-position:top center;
padding:13rem 3rem 0rem}
.sec-2 .box-count .counting{background-image:url("../img/counting.png");
background-repeat:no-repeat;
background-size:100%;
background-position:top center;
padding:2rem 3rem 2rem}
.sec-2 .box-count .counting p{font-size:2.0rem;
font-weight:600;
letter-spacing:2px}
.sec-2 .bg-detail{background-image:url("../img/bg-detail.png");
background-repeat:no-repeat;
background-size:100% 100%;
background-position:top center;
color:#fff;font-size:14px}
.sec-2 .bg-box-share{background-image:url("../img/bg-box-share.png");
background-repeat:no-repeat;
background-size:100% 100%;
background-position:top center;
padding:7rem 8rem 0}
.sec-pdt{background-image:url("../img/BG-pdt.png");
background-repeat:no-repeat;
background-size:100% 100%;
background-position:top center;
background-attachment:fixed;
padding:50px;font-size:15px;
font-weight:300}
.shadow--pyc{filter:drop-shadow(1px 1px 6px #e19df1)}
.tbl-4th thead{background-color:#0072bc}
.tbl-4th thead tr th{font-weight:400}
.tbl-4th tbody{background-color:#011d3e}
.tbl-4th tbody tr td{font-weight:200}
.tbl-4th td,.tbl-4th th{padding:0.5rem;font-size:14px}
.box-reward{border:solid 2px #fbaf5d}
.box-reward .tt--rw{color:#fbaf5d;width:100px;display:inline-block}
.img-on-tooltips{width:300px;margin-left:-50px}
.sec-pyc{background-image:url(../img/pyc/bg.jpg);
background-size:cover;
background-position:top center;
background-repeat:no-repeat;
background-color:#090417;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-wrap:wrap;
justify-content:center}
.sec-pyc .note--janssen{background-image:url(../img/pyc/Group10.png);
background-size:100% 100%;
background-position:50% 50%;
padding:3rem 13rem;
color:black;
font-weight:500;
font-size:14px;
padding:3rem 14rem;
margin:2rem 0}
.sec-pyc .note--janssen p{margin-bottom:0.25rem}
.sec-pyc .note--janssen .txt--dtl{color:#790000}
@media (min-width: 767px) and (max-width: 991px){.sec-pyc .note--janssen{background-size:cover;padding:3rem}}
@media (min-width: 576px) and (max-width: 766px){.sec-pyc .note--janssen{background-size:cover;padding:3rem 2rem}}
@media (max-width: 575px){.sec-pyc .note--janssen{background-size:cover;padding:3rem 2rem}}
.sec-pyc .areapyc{background-image:url(../img/pyc/bg-PaoyingChub.png);
background-size:100% 100%;
background-position:50% 50%;
height:730px;
padding:2rem 4rem;margin:3rem 0}
.sec-pyc .areapyc .btn-play{width:200px;display:block;margin:auto}
#choosing--pyc .select-img{width:5vw;height:auto;padding:0.3vw;margin:auto;transition:transform .2s;filter:drop-shadow(2px 2px 6px #fff)}
#choosing--pyc .select-img:hover{cursor:pointer}
#choosing--pyc .select-img:active{cursor:pointer}
#choosing--pyc input[type=radio]{display:none}
#choosing--pyc input[type=radio]:checked+label>img{transform:scale(1.15);
filter:brightness(1.25) drop-shadow(2px 4px 6px purple)}
.shadow--txt{text-shadow:1px 1px 5px black}
.shadow--pyc{filter:drop-shadow(1px 1px 6px #e19df1)}
.bg-modal-pyc{background:transparent;border:none}
.bg-modal-pyc .modal-footer{border-top:none}
.constant-tilt-shake{animation:tilt-shaking 0.5s infinite}
@keyframes tilt-shaking{0%{transform:rotate(0deg)}25%{transform:rotate(8deg)}50%{transform:rotate(0eg)}75%{transform:rotate(-8deg)}100%{transform:rotate(0deg)}}
.constant-tilt-shake-2{animation:tilt-shaking2 0.5s infinite}
@keyframes tilt-shaking2{0%{transform:rotate(0deg)}25%{transform:rotate(-8deg)}50%{transform:rotate(0eg)}75%{transform:rotate(8deg)}100%{transform:rotate(0deg)}}
.bg-pp{background-color:#653471c4 !important;
padding:10px;margin-top:18px}
.box--choose--pyc{height:400px;display:grid;align-items:center}
.box--choose--pyc .chooing{width:500px;justify-content:space-around;display:inline-flex}
.form-control{background-color:#401c00;color:#fff}
.custom-select{background-color:purple;
color:#fff;
border:none;
background-image:url(../img/pyc/arrow-select.png)}
.history-tab .nav-link{background-color:#653471 !important;
color:white;
border:solid 2px #6e007d}
.history-tab .active{background-color:#fff !important;
color:#653471 !important}
.history-tab .tab-content{height:800px;overflow-y:scroll}
button.back-to-top{margin:0 !important;
padding:0 !important;
background:#fff;
height:0px;
width:0px;
overflow:hidden;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
color:transparent;
clear:both;
visibility:hidden;
position:fixed;
cursor:pointer;
display:block;
border:none;
right:50px;
bottom:75px;
font-size:0px;
outline:0 !important;
z-index:99;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out}
button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus{outline:0 !important}
button.back-to-top::before,
button.back-to-top::after{content:"";
display:block;
vertical-align:middle;
border-bottom:solid 13px #007bff;
border-left:solid 13px transparent;
line-height:0;
border-right:solid 13px transparent;
height:0;
margin:18px auto 0;
width:0;
border-radius:20px;
visibility:hidden}
button.back-to-top.show::after,
button.back-to-top.show::before{visibility:visible}
button.back-to-top::after{border-bottom-color:#fff;position:relative;top:-24px}
button.back-to-top.show
{display:block;
background:#fff;
color:#00ab6c;
font-size:25px;
right:25px;
bottom:50px;
height:50px;
width:50px;
visibility:visible;
box-shadow:0px 2px 4px 1px rgba(0,0,0,0.25);
-webkit-box-shadow:0px 2px 4px 1px rgba(0,0,0,0.25);
-moz-box-shadow:0px 2px 4px 1px rgba(0,0,0,0.25)}
button.back-to-top.show:active
{box-shadow:0px 4px 8px 2px rgba(0,0,0,0.25);
-webkit-box-shadow:0px 4px 8px 2px rgba(0,0,0,0.25);
-moz-box-shadow:0px 4px 8px 2px rgba(0,0,0,0.25)}
/*# sourceMappingURL=style.css.map */