/* 
Color Light 
1st #51a4ad → #aadfef (Blue Sky)
2nd #000000 → #212428 (Black)
3rd #888888 → #666666 (Gray)
4th #ffffff (White)
*/
/*
Color Dark
1st #074368 → #041e41 (Dark Blue)
2nd #84754e → #cda256 (Gold)
3rd #000000 → #484241 (Black)
4th #ffffff (White)
*/
body * {transition: color .5s, background-color .5s, border-color .5s}
body{position:relative;font-family:'Kanit','Prompt','Noto Thai','Sarabun',Tahoma,Arial,sans-serif;font-size:14px;background:#fff;color:#000}
a{text-decoration:none}
a:hover,a:focus,a:active{text-decoration:none;color:#048}

.clear,
.nav-con:after {display:block;content:'';clear:both;margin:0 auto}

.navbar-fixed {position:fixed;top:0;left:0;right:0;background:#51a4ad;color:#fff;z-index:100;white-space:nowrap}
.navbar-fixed a {color:#fff}
.navbar-fixed a:hover {color:#aadfef}

.navbar-fixed header {padding:8px 16px;font-size:20px}
.navbar-fixed nav {padding:12px 16px;font-size:24px}
.navbar-fixed {box-shadow:0 2px 6px #8888}

.nav-con {width:100%;margin:0 auto;max-width:1920px}
.nav-con .t-left {float:left}
.nav-con .t-right {float:right;text-align:right}
.nav-con .t-right a {margin-left:16px}
.nav-con .m-left {float:left}
.nav-con .m-right {float:right;text-align:right}
.nav-con .m-right a {display:inline-block;margin-left:32px;height:48px;line-height:48px}
.nav-con .m-left a {display:block;height:48px}

.navbar-fixed nav {background:#fff;color:#000}
.navbar-fixed nav a {color:#000}
.navbar-fixed nav a:hover {color:#aadfef}

.light-off {display:inline}
.light-on {display:none}
.dark .light-off {display:none}
.dark .light-on {display:inline}

.dark .navbar-fixed {background:#041e41;color:#fff}
.dark .navbar-fixed a:hover {color:#cda256}
/*.dark .navbar-fixed nav {background:#074368;color:#fff}
.dark .navbar-fixed nav a {color:#fff}*/
.dark .navbar-fixed nav a:hover {color:#cda256}

.empty-menu {height:118px}

.atm-logo {display:inline-block}
.atm-logo-main {width:48px;height:48px;margin-right:8px;background:url(/svg/alltimage-logo-light.svg) center no-repeat;background-size:contain}
.atm-logo-text {width:226px;height:48px;background:url(/imgs/alltimage_text_black.svg) center no-repeat;background-size:contain}
.dark .atm-logo-main {background-image:url(/svg/alltimage-logo.svg)}
.dark .atm-logo-text {background-image:url(/imgs/alltimage_text_gold.svg)}

/* Footer */
footer {padding:24px 16px 0;background:#51a4ad;color:#fff}
footer img {max-width:100%}
footer table {width:100%;margin:0 auto 24px}
footer table td {vertical-align:top;padding-bottom:24px}
footer p {margin:0 auto}
footer ul {list-style:square inside;margin:12px auto 24px;padding:4px}
footer li {padding-top:2px;padding-bottom:11px;font-size:14px}
.ft-title {color:#fff;text-transform:uppercase;font-size:24px}
.ft-text,.ft-text a {color:#fff;font-size:16px}
.ft-text small {font-size:14px}
.ft-icon {display:inline-block;width:40px;height:40px;line-height:40px;font-size:24px;border-radius:12px;border:1px solid #fff;color:#fff;text-align:center}
.ft-sns {text-align:right;padding-top:8px;padding-bottom:32px}
.social-bar a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 38px;
	background: #51a4ad;
	color: #fff;
	border: 1px solid #fff;
	text-align: center;
	font-size: 20px;
	border-radius: 12px;
	margin: 4px;
	transition: .3s all;
}
.social-bar a:hover {
	background: #fff;
	color: #51a4ad;
}
.copyright {background:#fff;color:#51a4ad;padding:12px 16px;text-align:center;font-size:22px}

/* News */
.news-cat {margin:24px auto 24px;text-align:center;color:#51a4ad}
.news-cat a {display:inline-block;height:32px;line-height:32px;padding:0 16px;margin:4px;font-size:16px;background:#51a4ad;color:#fff;transition:.3s all}
.news-cat a:hover,
.news-cat a.active {background:#888;color:#fff}
.goods-item{position:relative;margin:24px auto 16px}
.goods-item .nowrap{text-overflow:ellipsis;white-space:nowrap}
.goods-item .isnew{position:absolute;background:#51a4ad;left:16px;top:0;transform:translateY(-50%);padding:0 12px;color:#fff;font-weight:700}
.goods-item .gi-desc{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;background:#51a4ad;color:#fff;padding:32px 16px;transition:.5s all}
.goods-item:hover .gi-desc{opacity:.96}
.btn-news{background:#51a4ad;color:#fff;transition:.5s all;box-shadow:0 0 #51a4ad inset}
.btn-news:hover{background:#51a4ad;color:#fff;box-shadow:96px 0 #51a4ad inset}
.newsbox{display:block;position:relative;border-left:1px solid #eee;border-right:1px solid #eee;overflow:hidden}
.newsbox:first-child{margin-top:24px;border-top:1px solid #eee;border-top-right-radius:32px}
.newsbox:last-child{border-bottom:3px solid #eee;width:100%;margin:0 auto 16px;background:#fff;transition:.2s all}
.n-pic{position:relative}
.n-dark{background:#888a;margin:0 auto;left:0;right:0;top:50%;transform:translateY(-50%);position:absolute;width:30%;height:40%;overflow:hidden;opacity:0;border-radius:50%;transition:.7s all}
.n-eye{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:10px}
.n-tbox{padding:16px 12px;min-height:160px;overflow:hidden;position:relative}
.n-date{font-size:12px;color:#444}
.n-title{font-size:20px;color:#51a4ad;height:38px;line-height:38px;margin:12px auto 4px;transition:.3s all}
.n-desc{font-size:16px;color:#444;height:56px;line-height:28px;margin-bottom:18px}
.n-type{font-size:12px;position:absolute;right:12px;top:12px;display:inline-block;padding:2px 8px;color:#000;background:#eee;border-radius:16px}
.n-more{font-size:12px;position:absolute;right:12px;bottom:2px;display:inline-block;padding:8px;color:#000;transition:.3s all}
.newshover:hover .newsbox:last-child{border-bottom:3px solid #51a4ad}
.newshover:hover .newshover,a:hover .n-more{color:#51a4ad}
.newshover:hover .n-dark{width:100%;height:100%;opacity:1;border-radius:0;transition:.3s all}
.nnv {position:absolute;top:32%;transform:translateY(-50%);z-index:5}
.nnvl {left:-64px}
.nnvr {right:-64px}
.news-hl {color:#51a4ad}
.btn-a-news {background:#51a4ad;color:#fff;padding:0 32px;border-radius:24px;height:48px;line-height:48px;font-size:24px;display:inline-block;margin:16px 0}
.btn-a-news:hover {background:#aadfef;color:#000}

.cover-info {width:100%;padding:96px 16px;background:linear-gradient(to left,#aadfef,#fff,#fff,#51a4ad) center no-repeat;background-size:cover;color:#51a4ad;text-align:center}
.cover-info .title {font-size:64px;margin:0 auto;text-transform:uppercase;font-weight:500}
.cover-info .text {font-size:24px;margin:0 auto}

/* Smart Phone */
.navbar-smart {display:none}
@media screen and (max-width:1200px) {
	.ft-sns {text-align:center}
	.navbar-fixed {display:none}
	.navbar-smart {display:block;position:fixed;top:0;left:0;right:0;z-index:1001;white-space:nowrap}
	.navbar-smart img {max-width:80%}
	.navbar-smart .m-top {background:#51a4ad;color:#fff;height:64px;padding:8px 8px 8px 20px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
	.navbar-smart .smn-icon {position:absolute;z-index:1010;top:20px;right:24px;width:32px;height:24px;border-top:3px solid #fff;border-bottom:3px solid #fff;transition:.5s all}
	.navbar-smart .smn-icon:before,
	.navbar-smart .smn-icon:after {position:absolute;z-index:1011;left:0;right:0;top:50%;transform:translateY(-50%);display:block;content:'';width:100%;height:3px;background:#fff;margin:0 auto;transition:.5s all}
	.navbar-smart.active .smn-icon {border-top:3px solid transparent;border-bottom:3px solid transparent}
	.navbar-smart.active .smn-icon:before {transform:translateY(-50%) rotate(45deg)}
	.navbar-smart.active .smn-icon:after {transform:translateY(-50%) rotate(-45deg)}
	.navbar-smart .m-bot {width:0;height:0;padding:16px 0;background:#51a4ad;white-space:nowrap;overflow:hidden;transition:.5s all}
	.navbar-smart.active .m-bot {width:100%;height:auto}
	.navbar-smart .m-bot a {display:block;padding:10px 24px;color:#fff;font-size:18px;transition:.5s all}
	.navbar-smart .m-bot a:hover,
	.navbar-smart .m-bot a:active,
	.navbar-smart .m-bot a:focus {background:#aadfef;color:#fff}
	.empty-menu {height:64px}
}
@media screen and (max-width:768px) {
	.ft-sns {text-align:center}
	.cover-info {padding:64px 20px}
	.cover-info .title {font-size:40px;margin:4px auto}
	.cover-info .text {font-size:20px;margin:4px auto}
}

/* Dark */
.dark footer {background:#074368;color:#fff}
.dark .ft-title {color:#cda256}
.dark .ft-icon {border-color:#cda256;color:#cda256}
.dark .social-bar a {background:#074368}
.dark .social-bar a:hover {background:#fff;color:#074368}
.dark .copyright {background:#041e41;color:#fff}
.dark .news-hl {color:#074368}
.dark .cover-info {background:#fff url('/imgs/the-lost-key.jpg') center no-repeat;background-size:cover;color:#074368}

/* WIP Dark News */
.dark .news-cat {margin:24px auto 24px;text-align:center;color:#074368}
.dark .news-cat a {display:inline-block;height:32px;line-height:32px;padding:0 16px;margin:4px;font-size:16px;background:#074368;color:#fff;transition:.3s all}
.dark .news-cat a:hover,
.dark .news-cat a.active {background:#888;color:#fff}
.dark .goods-item{position:relative;margin:24px auto 16px}
.dark .goods-item .nowrap{text-overflow:ellipsis;white-space:nowrap}
.dark .goods-item .isnew{position:absolute;background:#074368;left:16px;top:0;transform:translateY(-50%);padding:0 12px;color:#fff;font-weight:700}
.dark .goods-item .gi-desc{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;background:#074368;color:#fff;padding:32px 16px;transition:.5s all}
.dark .goods-item:hover .gi-desc{opacity:.96}
.dark .btn-news{background:#074368;color:#fff;transition:.5s all;box-shadow:0 0 #074368 inset}
.dark .btn-news:hover{background:#074368;color:#fff;box-shadow:96px 0 #074368 inset}
.dark .newsbox{display:block;position:relative;border-left:1px solid #eee;border-right:1px solid #eee;overflow:hidden}
.dark .newsbox:first-child{margin-top:24px;border-top:1px solid #eee;border-top-right-radius:32px}
.dark .newsbox:last-child{border-bottom:3px solid #eee;width:100%;margin:0 auto 16px;background:#fff;transition:.2s all}
.dark .n-pic{position:relative}
.dark .n-dark{background:#888a;margin:0 auto;left:0;right:0;top:50%;transform:translateY(-50%);position:absolute;width:30%;height:40%;overflow:hidden;opacity:0;border-radius:50%;transition:.7s all}
.dark .n-eye{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:10px}
.dark .n-tbox{padding:16px 12px;min-height:160px;overflow:hidden;position:relative}
.dark .n-date{font-size:12px;color:#444}
.dark .n-title{font-size:20px;color:#074368;height:38px;line-height:38px;margin:12px auto 4px;transition:.3s all}
.dark .n-desc{font-size:16px;color:#444;height:56px;line-height:28px;margin-bottom:18px}
.dark .n-type{font-size:12px;position:absolute;right:12px;top:12px;display:inline-block;padding:2px 8px;color:#000;background:#eee;border-radius:16px}
.dark .n-more{font-size:12px;position:absolute;right:12px;bottom:2px;display:inline-block;padding:8px;color:#000;transition:.3s all}
.dark .newshover:hover .newsbox:last-child{border-bottom:3px solid #074368}
.dark .newshover:hover .newshover,a:hover .n-more{color:#074368}
.dark .newshover:hover .n-dark{width:100%;height:100%;opacity:1;border-radius:0;transition:.3s all}
.dark .nnv {position:absolute;top:32%;transform:translateY(-50%);z-index:5}
.dark .nnvl {left:-64px}
.dark .nnvr {right:-64px}
.dark .news-hl {color:#074368}
.dark .btn-a-news {background:#074368;color:#fff;padding:0 32px;border-radius:24px;height:48px;line-height:48px;font-size:24px;display:inline-block;margin:16px 0}
.dark .btn-a-news:hover {background:#cda256;color:#000}

/* Mstyle Mod */
.scroller {
	scrollbar-color: #146d #0241;
	scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.scroller::-webkit-scrollbar-track-piece  {
	background-color: #0241;
}
.scroller::-webkit-scrollbar-thumb,
.scroller::-webkit-scrollbar-thumb:vertical,
.scroller::-webkit-scrollbar-thumb:horizontal {
	height: 8px;
	background-color: #146d;
}
.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1;}
.line-clamp-2 { -webkit-line-clamp: 2;}
.line-clamp-3 { -webkit-line-clamp: 3;}
.line-clamp-4 { -webkit-line-clamp: 4;}
.line-clamp-5 { -webkit-line-clamp: 5;}

/* WIP */
.WIP {padding:128px 0px;text-align:center;font-size:64px;background:#822 url(/imgs/buildings.jpg) center bottom no-repeat;background-size:cover;color:#fff}
.WIP p {display:inline-block;background:#fa0;color:#000;padding:32px;border-radius:16px;border:8px solid #000;margin:0 auto}
.dark .WIP {background-image:url(/imgs/buildings_blueflat.jpg)}