/* CSS Reset */
@charset "utf-8";
/* CSS Reset */
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, textarea, p, blockquote, th, td, span, applet,
object, iframe,  a,abbr {padding: 0; margin: 0;}
table {border-collapse:collapse; border-spacing:0;}
address, caption, cite, code, dfn, em, th, var {font-weight: normal; font-style: normal;}
caption, th, td {text-align: left;}
fieldset, img, div, iframe {border: 0;}
div, li{ box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 100%;}
a, a:link, a:visited, a:hover, a:active {text-decoration: none;} 
ol, ul {list-style: none;} 
input, textarea, select, button {font-size: 100%; font-family: inherit;}
body, html { background:#fff; width: 100%; height: 100%;font-family: 'Noto Sans TC',Helvetica,Arial,Hiragino Sans GB,
WenQuanYi Zen Hei,儷黑 Pro,LiHei Pro,微軟正黑體,sans-serif; color: #4d4d4d;}
h1, h3{ display: none;}
a, button{ text-decoration:none; transition: all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;
-moz-transition:all .3s ease;}

/*----- common -----*/	
.wrap{ width: 1440px; margin: 0 auto; padding-top: 98px; }
.clearFloat{ clear: both; }
.m-mb10{ margin-bottom: 0 }
.mt15{ margin-top: 15% }
.mb80{ margin-bottom: 80px }
nav img, .footer img, .index-banner img, .index-row img, .page-content img, .pd-info img, .kv-wld img{ 
	width: 100%; height: auto; display: block; 
	image-rendering: -moz-crisp-edges; /*Firefox*/
	image-rendering: -o-crisp-edges; /*Opera*/
	image-rendering: -webkit-optimize-contrast; /*Webkit*/
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /*IE*/
}
.index-banner, .c-box, .page-banner, .page-intro, .agenda-t, .t-box, .pd-box, .product, .kv-wld, .reason-a, .kv-ai, .kv-shs, .kv-sm, .kv-srs, .srs-box, .container .title, .container .date, .a-txt, .second{ visibility: hidden; }

/*----- header -----*/  
.logo { float: left; width: 196px; position: relative; z-index: 1000; margin-top: 5px;}
nav{ padding: 25px 0 25px 20px; width: 1440px; margin: 0 auto; left: 0; right: 0; position: fixed; background: #fff; box-sizing: border-box; z-index: 1001; }
nav li{ top:0; list-style-type: none; display: inline-block; padding: 13px 0; transition: .3s; color: #18334E; font-weight: bold; font-size: 0.93rem;}
nav li.join{ color: #b33d29;}
nav ul { margin-top: 0; top: 0; background: #fff; display: block; width: 100%; height: 3em; text-align: right; padding-left: 0; padding-right: 0;}
nav li:hover{ color: #E08373;}
.arrow { display: inline-block; height: 5px; width: 5px;border-left: 2px solid #18334E;border-bottom: 2px solid #18334E;transform: rotate(-45deg) translateY(-4px); margin-left: 10px;}
.main{ position: relative; }
.main li { position: relative;}
.dropdown li { display: block; padding: 10px 20px; text-align: left; font-size: 0.87rem;}
.dropdown li.m{display: none;}
.drop{ padding: 13px; }
.drop:hover + .dropdown, .dropdown:hover { height: 10.5em;}
.drop:hover + .d5, .d5:hover, .drop:hover + .d1, .d1:hover { height: 9.5em;}
.drop:hover { color: #496E91;}
.dropdown { top: 50px; background: #fff; height: 0; overflow: hidden; width: auto; right: 0; transition: .3s; z-index: 2000; position: absolute; box-shadow: 0px 2px 5px #bfbfbf;}
.d1{ right: 700px; width: 220px;}
.d3{ right: 490px; }
.d4{ right: 335px; }
.d5{ right: 170px; }
.d6{ right: -15px; width: 180px; }
#hamburger { display: none !important;}
#hamburger span{ background-color:#18334E; width:2em; height:.2em; margin:0.51em 0; display:block; transition: all .3s ease; transform-origin:0 0;}
.diam span:nth-child(1) { transform: rotate(45deg) translate(1px, -1px);}
.diam span:nth-child(2) { Transform: scaleX(0);}
.diam span:nth-child(3) { transform: rotate(-45deg) translate(1px, 0);}
#ctrl { display: none;}

/*----- footer -----*/  
.footer{ width: 100%; position: relative; padding: 40px 20px 0;}
.footer .menu{ float: right; }
.footer .logo{ float: left; width: 196px;}
.footer .menu ul{ text-align: center; }
.menu-box{ padding: 0 35px; font-size: 0.93rem; display: inline-block; text-align: left; vertical-align: top; width: 230px; line-height: 1.5;}
.menu-box:last-child { padding-right: 0;}
.menu-box p{ color: #18334E; font-weight: bold; margin-bottom: 20px; }
.menu-box a{ display: block; color: #4d4d4d; margin: 15px 0; }
.copyright{ font-size: 0.75rem; color: #18334E; font-weight: bold; padding: 17px; border-top: 1px #979797 solid; margin-top: 50px; text-align: right; }
.copyright a{color: #18334E; display: inline-block; margin: 0 5px;}
.copyright a:hover, .menu-box a:hover{color: #E08373;}
.contact {border: 1px #979797 solid ; padding: 0px 10px;}
.c-logo{ float: left; }

/*----- btn -----*/
.btn{ font-size: 1rem; padding: 13px 40px; display: inline-block; border-radius: 999px; margin: 0 10px; font-weight: bold; text-align: center; }
.btn-main{ background: #E08373; margin-top: 30px; color: #fff; border: 3px #E08373 solid; }
.btn-main:hover{ background: #b33d29;border: 3px #b33d29 solid; }
.btn-normal{ border: 3px #fff solid; margin-top: 30px; color: #fff; }
.btn-normal:hover{ background: #3494BA; border: 3px #3494BA solid; }
.btn-pd{ color: #3494BA; border: 1px solid #3494BA; padding: 13px 50px; position: absolute; width: 100%; bottom: 0; left: 0; box-sizing: border-box; margin:0; }
.btn-pd:hover, .btn-ex:hover{ background: #3494BA; color: #fff;color: }
.btn-ex{ text-align: center; width: 40%; margin-top: 40px ;color: #3494BA; border: 1px solid #3494BA; box-sizing: border-box; }
.btn-page{ width: 200px; background: #3494BA; padding: 13px 0; text-align: center;color: #fff; margin-top: 40px; }
.btn-page:hover{ background: #246e8c;}
.btn-page-m{ background: #E08373; }
.btn-page-m:hover{ background: #c16353; }
.btn-web{ background: #D3503A; margin-top: 30px; color: #fff; text-shadow: none;border:3px #D3503A solid;}
.btn-web:hover{ background: #b33d29;border:3px #b33d29 solid; }
.btn-web-n{ border: 3px #D3503A solid; color: #D3503A; text-shadow: none; margin-top: 30px; }
.btn-web-n:hover{background: #D3503A; color: #fff;}

.showbutton{ display: inline-block; } 
.hidebutton{ display: none; }
.winner{ margin-top: 50px; padding: 13px 40px; border-radius: 10px; border: 1px #3494BA solid; color: #3494BA; text-align: center; font-weight: bold;}

/*----- index -----*/
.index-banner{ margin-bottom: 10px;background: url(../images/banner_index.jpg) center no-repeat; height: 600px; display: flex; position: relative;}
.countdown{ position: absolute; left: 50px; bottom: 40px; color: #fff; font-size: 2.5rem; font-weight: bold; }
.countdown .t{ background: none; border:none; font-weight: bold; color: #fff; text-align: right; width: 50px; }
.countdown input:focus{outline:none}
.countdown .day{ color: #FDCB66; font-size: 1.5rem; margin: 0 5px;}
.container{font-weight: bold; width: 60%;margin: 50px 0 0 50px; }
.container .title{ color: #FDCB66; font-size: 5rem; line-height: 1; font-weight: bolder;}
.container .date{ color: #fff; font-size: 3rem; margin: 40px 0 10px; }
.container li{display: inline-block; border-bottom: 1px solid #fff; padding: 40px 0px 10px; font-size: 1rem; color: #FDCB66; margin-right: 25px; width: 150px; }
.container li p.location{ color: #fff; font-size: 1.31rem; }
.index-row{ display: flex; margin-bottom: 10px; }
.c-box{ margin-right: 10px; position: relative; width: 50%; }
.c-box .web{ position: absolute; z-index: 1; color: #ffffff; font-size: 1.31rem; text-align: center; font-weight: bold;text-shadow:0px 2px 4px #3e3e3e; left: 0; right: 0; margin: auto; top: 75px;}
.c-box .web p.t{ font-size: 5.25rem; color: #D3503A; -webkit-text-stroke: 1.2px #FDCB66; letter-spacing: -6px; line-height: 0.9; font-weight: bolder;}
.c-box .web p{ padding-top: 20px;}
.c-box .web a{ color: #D3503A; font-size: 1.5rem; padding: 5px 0; display: block; text-shadow: none; background: #FDCB66; border-radius: 999px; width: 300px; margin: 30px auto 0; box-shadow: 0px 2px 4px #3e3e3e; }
.c-box .web a:hover{ background: #D3503A; color: #FDCB66; }
.c-box .name{ position: absolute; bottom: 20px; left: 20px; z-index: 1; color: #E08373; font-weight: bold; font-size: 2rem; line-height: 1.1; }
.c-box .name p span{font-size: 1.5rem; position: absolute;}
.c-box .name p.t{ color: #fff; font-size: 1.87rem; }
.c-box dl{ position: relative; }
.c-box dl:first-child{ margin-bottom: 10px; }
.c-box:nth-last-child(odd){ margin-right: 0; }
.c-box a{ overflow: hidden; display: block;}
.img{ width:100%;transition: all .3s;}
.img:hover{ transform: scale(1.1);}

/*----- page -----*/
.kv-shs{ background: url(../images/banner_shs.jpg) 38% center no-repeat; }
.kv-srs{ background: url(../images/banner_srs.jpg) 30% center no-repeat; }
.kv-sm{ background: url(../images/banner_sm.jpg) 30% center no-repeat; }
.kv-ai{background: url(../images/banner_ai.jpg) 30% center no-repeat;}
.kv-ai .date{ width: 310px !important ;}
.kv-ie{background: url(../images/banner_iecs_1.jpg) 30% center no-repeat;}
.kv-ie2{background: url(../images/banner_iecs_2.jpg) 30% center no-repeat;}
.kv-wld{ width: 1440px; position: relative; display: flex; align-items: center; justify-content: center; }

.page-banner{ height: 600px; display: flex; align-items: center; }
.banner-d{ margin-top: 70px; }
.banner-container{ font-weight: bold; width: 70%; margin-left: 50px; text-align: left;}
.banner-container .title{ color: #FDCB66; font-size: 4.5rem; line-height: 1; letter-spacing: -5px; margin-bottom: 40px;text-shadow:0px 2px 4px #3e3e3e; }
.banner-container .title span{font-size: 2rem; font-weight: normal; letter-spacing: normal; }
.banner-container .date{ color: #ffffff; font-size: 2.25rem; position: relative; }
.banner-container .date span{font-size: 1.5rem; position: absolute;}
.banner-container p, .banner-container li{ color: #fff; font-size: 1.31rem; text-shadow: 0px 2px 4px #3e3e3e;}
.banner-container ul{ padding-left: 30px;}
.banner-container li{ text-indent: -5px; list-style-type: square; }
.banner-web{ text-align: center; width: 50%; margin-left: 0; position: absolute; font-weight: bold;text-shadow: 0px 2px 4px #3e3e3e; color: #fff; font-size: 1.31rem; }
.banner-web .title{ font-size: 6.25rem; color: #D3503A; -webkit-text-stroke: 1.2px #FDCB66; letter-spacing: -6px; line-height: 0.9; margin-bottom: 30px; }
.kv-wld .title-m{ font-size: 3rem; color: #D3503A; -webkit-text-stroke: 1.2px #FDCB66; letter-spacing: -3px; line-height: 0.9; margin: 10px auto 30px; display: none; text-align: center; font-weight: bold;}
.page-content{ padding: 80px 120px; text-align: center; }
.page-content p{ margin-top: 20px; text-align: left; }
.page-t{ color: #2A6373; font-weight: bold;font-size: 2.5rem; text-align: center;}
.page-date{color: #E08373; font-size: 2.25rem; font-weight: 300;}
.web-date{color: #E08373; font-size: 3.5rem; font-weight: bold;}
.timeline{ margin: 80px 0 50px; }
.agenda-t{ font-weight: bold; font-size: 1.31rem; border-bottom: 1px solid #4A7090; padding: 0 50px 10px; text-align: left; }
.agenda-t p{ font-size: 1rem; font-weight: normal; }

.t-box{ border-bottom: 1px solid #4A7090; padding: 50px; display: flex;text-align: left; }
.t-box .tt li, .t-box .pd li{ display: inline-block; }
.t-box .tt{ width: 56%; font-weight: bold; }
.t-box .tt .t-date{ width: 20%; font-size: 2.25rem; vertical-align: top; text-align: center; margin: 20px 0; }
.t-box .tt .t-date p{ font-size: 4.5rem; position: relative; margin-top: -15px; text-align: center; }
.t-box .tt .t-date p span{ font-size: 1.87rem; position: absolute; }
.t-box .tt .t-feature{ width: 71%; margin-left: 8%; font-size: 1.31rem; color: #2A6373; }
.t-box .tt .t-feature p span{font-size: 1rem; }
.t-box .tt .t-feature ul{ margin-top: 10px; }
.t-box .tt .t-feature li{ color: #4D4D4D; font-size: 1rem; font-weight: normal; display: list-item; background: url(../images/dot.png)0 11px no-repeat; padding-left: 15px; }
.t-box .pd{ width: 44%; }
.t-box .pd .pd-p{ width: 38%; vertical-align: top; }
.t-box .pd .pd-n{ width: 40%; margin-left: 20%; font-size: 1rem; }
.t-box .pd .pd-n div{ width: 40%; padding-top: 30%;}
.t-box .pd .pd-n div.prize{ background-color: #f5f5f5; width: 100%; height: 100%; padding: 10px;}
.t-box .pd .pd-n p{ font-size: 0.5rem; font-weight: normal; margin: 0; }
.t-box .pd .pd-p a{ color: #fff; margin: 70px 0; }
.item{ padding: 15px 50px; }
.item .tt .t-date{ width: 20%; font-size: 0.93rem; font-weight: normal; text-align: left; margin: 0; }
.item .tt .t-feature{ width: 71%; font-size: 0.93rem; color: #4d4d4d;font-weight: normal; }
.item .pd .pd-p, .item .pd .pd-n{font-size: 0.93rem;font-weight: normal;}
.t-web{ margin-top: 30px !important; }
.pink .tt .t-date{ color: #E08373; }
.pink .pd .pd-p a{ background: #E08373; }
.pink .pd .pd-p a:hover{ background: #c16353; }
.yellow .tt .t-date{ color: #FDCB66; }
.yellow .pd .pd-p a{ background: #FDCB66; }
.yellow .pd .pd-p a:hover{ background: #e4b047; }
.blue .tt .t-date{ color: #3494BA; }
.blue .pd .pd-p a{ background: #3494BA; }
.blue .pd .pd-p a:hover{ background: #246e8c; }
.navy .tt .t-date{ color: #2A6373; }
.navy .pd .pd-p a{ background: #2A6373; }
.navy .pd .pd-p a:hover{ background: #143e4a; }

.time{ width: 25%;}
.p-pic{ width: 120px; margin-right: 40px; }
.p-intro{ width: 60%; }
.p-intro .name{ color: #3494BA; font-weight: bold; font-size: 1.31rem; }
.p-intro .j-title{ font-size: 0.87rem; color: #E08373; }
.p-intro .event{ color: #000000;font-weight: bold; font-size: 1.31rem; margin: 10px 0; }
.p-intro ul li{ display: list-item;background: url(../images/dot.png)0 11px no-repeat; padding-left: 15px;  }
.pd-info{ text-align: center; margin: 70px 0 100px; }
.pd-box{ margin: 0 20px; font-size: 1rem; font-weight: bold; position: relative; display: inline-block; width: 17%; vertical-align: top; min-height: 400px;}
.pd-box img, .srs-box dt img{transform:scale(1,1);transition: all .3s ease-out;}
.pd-box img:hover, .srs-box dt img:hover{transform:scale(1.1,1.1);}
.pd-box p{ color: #2A6373; margin: 40px 0; }
.reason{ background: #F8F8F8; font-size: 1.12rem; padding: 50px 200px; margin-top: 100px; text-align: center; }
.reason p{ text-align: left; margin: 20px 0; }
.reason p span{ font-size: 0.8rem; }
.reason p span.title{ font-size: 1.12rem; font-weight: bold; color: #E08373; }
.reason .page-t{ text-align: center; margin-top: -80px; margin-bottom: 20px; }
.reason li, .tzone li{ display: inline-block; border-bottom: 1px solid #b3b3b3; padding-bottom: 15px; font-size: 1rem; color: #4D4D4D; width: 200px; font-weight: bold; margin: 30px 10px 40px;}
.reason li p, .tzone li p{ margin: 0; text-align: center; }
.reason li p.location, .tzone li p.location{ color: #E08373; font-size: 1.31rem; }

.winner_bg{ background:none; padding-bottom: 0px;}
.winner_bg p{ text-align: center; }

/* Smart retail Solution */
.srs-c, .expire-c{ margin-bottom: 60px; }
.srs-box{ display: inline-block; margin:0 120px 120px 0; width: 44%; text-align: left; vertical-align: top;}
.srs-box:nth-last-child(odd){ margin-right: 0; }
.srs-box dd{ color: #E08373; font-weight: bold; font-size: 1.5rem; margin: 15px 0 30px; letter-spacing: -1px; line-height: 34px; }
.srs-box dd p{ color: #4D4D4D; font-size: 1.87rem; }
.srs-box dt{ overflow: hidden; }
.line{ width: 20%; height: 1px; border-top: 1px solid #979797; margin: 0 auto; }

/* About */
.icon{ margin-top: 80px; }
.icon ul{ padding-left: 50px; }
.icon li{ display: inline-block; width: 28%; margin: 40px 2.5%; }
.icon li .i{ width: 30%; margin: 0 90px 0; }
.icon li p{ color: #2A6373; font-weight: bold; }
.a-pic{width: 80%; margin: 80px auto;}
.about-c{}
.about-c ul{ margin: 30px 0; text-align: left; }
.about-c li{ background: url(../images/dot.png)0 11px no-repeat; padding-left: 15px;}
.about-line{ width: 100%; height: 1px; border-top: 1px solid #ccc; margin: 80px auto; }


/*----- RWD -----*/
@media screen and (max-width: 1439px){
/* header */  
nav{ width: 100%; }
/* common */ 
.wrap{ width: 100%; }
/* footer */ 
.footer{ padding: 80px 20px 0; }
.footer .logo{ float: none; margin: 0 auto 40px; }
.footer .menu{ float: none; margin: 0 auto; }
.menu-box{ padding: 0 40px; font-size: 0.87rem; }
.menu-box:last-child{ padding-right: 40px; }
/* index */ 
.index-banner{ width: 100%; }
/* page */ 
.pd-box{ width: 16%; }
.kv-wld{ width: 100%; }
.t-box .pd .pd-p a{ padding: 13px 25px; }
.icon ul{ padding-left: 30px; }
}

@media screen and (max-width: 1280px){
/* header */  
.logo {width: 130px;}
nav{ padding: 20px 0 10px 20px; }
nav li{ padding: 10px 0; font-size: 0.87rem; }
.drop{ padding: 10px; }
.arrow{ height: 4px; width: 4px; margin-left: 7px;}
.d1{ right: 695px; }
.d3{ right: 435px; }
.d4{ right: 300px; }
.d5{ right: 145px; }
.d6{ right: -15px; }
/* common */ 
.wrap{ margin: 0 auto; padding-top: 78px;}
/* footer */ 
.footer{padding: 60px 20px 0;}
.footer .logo{ width: 130px; }
.menu-box{ padding: 0 20px; width: 190px;}
.menu-box:last-child{ padding-right: 20px; }
/* index */ 
.container{ width: 66%; }
.container .title{ font-size: 4.8rem; }
.container li{ padding: 10px; margin-right: 20px; }
.c-box .web, .c-box .name{ font-size: 1.5rem; }
.c-box .web p.t{ font-size: 4rem; }
.c-box .name p span{ font-size: 1rem; }
.c-box .name p.t{ font-size: 1.25rem; }
/* page */ 
.page-content{ padding: 60px 70px; }
.pd-info{ margin: 70px 0; }
.pd-box{ width: 15%; min-height: 350px; }
.btn-pd{ padding: 13px 30px; }
.reason{ padding:50px 80px; }
.banner-web{ width: 70%; }
.t-box .pd .pd-n{ width: 30%; }
.t-box-web{ padding: 30px 0; }
.t-box .tt{ width: 51%; margin-right: 3%; }
.t-box .tt .t-date{ font-size: 2rem; }
.item{ padding: 15px 20px; }
.item .tt .t-date{ font-size: 0.93rem; }
.t-box .tt .t-date p{ font-size: 3.5rem; }
.t-box .tt .t-date p span{ font-size: 1.5rem; }
.t-box .pd{ width: 46%; }
/* Smart retail Solution */
.srs-box{ width: 42%; }
/* About */
.icon li .i{margin: 0 80px 0;}
}

@media (max-width: 1024px) {
/* header */  
.logo { padding: 3px 0; }
.main { height: 0; overflow: hidden; z-index: 3000;text-align: left; transition: .3s;}
.main li, .drop, .index-row {display: block;}
.dropdown {position: static;}
.drop:hover + .dropdown, .dropdown:hover { height: 10.5em;}
.drop:hover + .d5, .d5:hover, .drop:hover + .d6, .d6:hover { height: 8.5em;}
.drop:hover + .d1, .d1:hover{ height: 8em;}
.dropdown {position: relative;top:0;right: 0em;width: 100%;box-shadow: none; background: #f3f3f3;}
.dropdown li.m{display: block;}
#hamburger {display: inline-block !important; cursor: pointer; float: right;}
#ctrl:checked + .main {height: auto;padding-top: 1em;}
nav{ padding: 20px; padding: 10px 20px;}
.drop{ padding: 5px 0; }
#ctrl:checked + .main{ padding: 1em 0; }
/* common */ 
.wrap{ margin: 0 auto ; padding-top: 62px; }
.mb80{ margin-bottom: 60px; }
/* index */ 
.container{ width: 82%;}
.container .date{ font-size: 2.75rem; }
.container li{ width: 170px; }
.c-box{ width: 100%; }
.m-mb10{ margin-bottom:10px;}
.c-box .web p.t{ font-size: 5.25rem; }
/* page */ 
.page-content{ padding:60px 40px; }
.agenda-t{ padding: 0 20px 10px; }
.t-box{ margin: 0 auto; display: block; }
.p-pic{ margin: 20px auto; }
.p-intro{ width: 100%; }
.p-intro .name, .p-intro .j-title{ text-align: center; }
.p-intro .event{ margin: 30px 0; text-align: center; }
.time{ width: 100%; text-align: center !important;}
.pd-info{ margin: 20px 0; }
.pd-box{ width: 27%; min-height: 420px; margin: 50px 20px; }
.reason{ margin-top: 80px; }
.banner-d{ margin-top: 0; }
.reason li, .tzone li{ padding: 13px 15px; width: 180px; margin: 30px 9px 40px; }
.t-box .tt{ width: 100%; }
.t-box .pd{ width: 100%; margin-top: 40px; padding: 0 50px; }
.t-box .pd .pd-n div{ width: 20%; padding-top: 0%; }
.t-box .tt .t-date, .t-box .pd .pd-p{ width: 30%; }
.t-box .tt .t-feature, .t-box .pd .pd-n{ width: 61%; margin-left: 8%; }
.t-box .tt .t-date p{ text-align: center; }
.banner-web{ width: 70%; margin-bottom: 30px; }
.banner-web .title{ font-size: 4.5rem; letter-spacing: -4px; }
.banner-web p{ font-size: 1rem; }
.btn-web, .btn-web-n{ padding: 8px 30px; margin-top: 20px; }
.btn-web-n{ border: 2px #D3503A solid; }
.item{ display: none; }
.icon ul{ padding-left: 0; }
.icon li{ width: 40%; margin: 40px 4%; }
.icon li .i{ margin: 0 90px 0; }
.icon{ margin-top: 30px; }
}

@media screen and (max-width: 1023px){
/* footer */ 
.footer .logo{ margin: 0 auto 30px; padding-left: 40px; width: 670px;}
.footer .logo img{ width: 130px; }
.footer{ padding: 40px 20px 0; }
.footer .menu ul{ width: 670px; margin: 0 auto; }
.menu-box{ margin: 0 20px 30px;display: block; width: 27%; float: left; }
.menu-box p{ margin-bottom: 10px; }
/* Smart retail Solution */
.srs-box{  margin: 0 60px 60px 0; }
.srs-c{ margin-bottom: 30px; }
}

@media screen and (max-width: 767px){
/* footer */ 
.footer .logo, .footer .menu ul{ width: 100%; }
.menu-box{ width: 100%; float: none; }
.footer .logo{ padding-left: 40px; }
/* index */ 
.index-banner{ height: 550px; }
.container{ width: 90%; margin:30px auto 0; }
.container .title{ font-size: 3rem; }
.container .date{ font-size: 1.875rem; }
.container li{ width: 100%; font-size: 0.87rem; padding:7px; margin: 10px 0;  }
.container li p.location{ font-size: 0.93rem; }
.container .date{ font-size: 1.5rem; }
.c-box .web p.t{ font-size: 3rem; letter-spacing: -3px; }
.countdown{ left: 20px; bottom: 40px; font-size: 2rem; }
.countdown .t{ width: 40px; }
.countdown .day{ font-size: 1rem; }
/* page */ 
.page-banner{ height: 500px;}
.page-content{ padding: 50px 20px; }
.banner-container{ width: 90%; margin: 0 auto; }
.banner-container .date{ font-size: 1.5rem; width: 165px; margin-bottom: 10px; }
.banner-container .date span{ font-size: 1rem; }
.banner-container .title{ font-size: 3.5rem; letter-spacing: -2px; margin-bottom: 20px; }
.banner-container li{ font-size: 1rem; }
.page-t{ line-height: 1; }
.btn-main, .btn-normal{ margin-top: 20px; }
.btn{ padding: 10px 30px; }
.btn-ex{ width: 100%; }
.btn-page{ margin-top: 20px; }
.pd-box{ width: 70%; margin: 50px auto; display: block; min-height: inherit; }
.pd-box p{ margin: 30px 0; }
.btn-pd{ position: inherit; }
.page-date, .web-date{ font-size: 2rem; }
.reason{ padding: 50px 30px; }
.reason p{ font-size: 1rem; margin-top: 30px; }
.t-box .tt, .t-box .tt .t-date, .t-box .tt .t-feature, .t-box .pd .pd-n{ width: 100%; }
.t-box .pd .pd-p{ width: 80%; margin-bottom: 20px; }
.t-box .pd .pd-p a{ width: 100%; margin: 0; box-sizing: border-box; }
.t-box .pd .pd-n div{ margin: 0 auto; }
.t-box .pd .pd-n p{ text-align: center; }
.t-box .pd{ padding: 0; }
.t-box .pd ul{ text-align: center; }
.t-box .tt .t-feature, .t-box .pd .pd-n{ margin-left: 0; }
.t-box .pd .pd-n a{ width: 100%; box-sizing: border-box; }
.t-box-web{ padding: 20px 20px 40px; }
.reason li, .tzone li{ width: 100%; margin: 10px auto; }
.kv-wld{ display: block; }
.banner-web{ position: relative; margin: 0 auto; width: 90%; text-shadow: none; margin-top: 20px;}
.banner-web .title{ display: none; }
.kv-wld .title-m{ display: block; width: 90%; }
.banner-web p{ color: #4d4d4d; }
.kv-ai .date{ width: 220px !important; }
/* Smart retail Solution */
.srs-box{ margin: 0 30px 60px 0; width: 40%; }
.srs-box dd{ margin: 15px 0; line-height: 1.3; font-size: 1.25rem; }
.srs-box dd p{ font-size: 1.5rem; }
.srs-box{ margin: 0 auto 50px; width: 95%; }
/* About */
.icon li{ width: 100%; margin: 20px auto 40px; }
.icon li .i{ margin: 0 auto; }
.icon li p{ text-align: center; }
.a-pic{ width: 90%; margin: 50px auto; }
.c-logo{ float: none; margin-bottom: 10px; }
.copyright{ text-align: center; padding: 25px 17px; height: 150px; }
}

@media screen and (max-width: 414px){
/* footer */ 
.footer .logo{ padding-left: 20px; }
.menu-box{ margin: 0 0 30px; }
/* index */
.container li{ width: 100%; margin: 5px 0; }
.c-box .web{ top: 40px; }
.c-box .web p.t{ font-size: 2.25rem; }
.c-box .web a{ margin: 20px auto 0; font-size: 1.25rem; }
.countdown{ font-size: 1.6rem; }
.countdown .day{ margin: 0 3px 0 2px; }
.countdown .t{ width: 32px; }
/* page */
.banner-container .date{ font-size: 1.25rem; width: 140px; }
.banner-container .date span{ font-size: 0.87rem; }
.banner-container .title{ font-size: 2.5rem; }
.banner-container li{ font-size: 0.93rem; }
.btn{ margin: 20px auto 0; box-sizing: border-box; }
.btn-main, .btn-normal{ width: 90%; text-align: center; }
.page-t{ font-size: 1.87rem; }
.page-date{ font-size: 1.5rem;margin: 10px 0; }
.btn-page{ width: 90%; }
.timeline{ margin: 50px 0 20px; }
.p-intro .event{ margin: 20px 0; }
.banner-web{ width: 80%; }
.t-box{ padding: 50px 30px; }
.t-box-web{ padding: 30px 20px 40px; }
.kv-ai .date{ width: 190px !important ;}
.reason li, .tzone li{width: 32%; padding: 2px; border:none; }
.reason li p.location, .reason p, .tzone li p.location, .tzone p{ font-size: 0.87rem; }
.about-line{ margin: 50px auto; }
}

/*----- animation -----*/
.animated { animation-fill-mode: both;-webkit-animation-fill-mode: both;}
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
.fadeIn{
	animation-duration: .7s;
	-webkit-animation-duration: .7s;
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;
	visibility: visible !important;
}
.fadeIn-1 { animation-delay: .5s;-webkit-animation-delay: .5s;}
.fadeIn-2 {animation-delay: 1s;-webkit-animation-delay: 1s;}
.fadeIn-3 {animation-delay: 1.5s;-webkit-animation-delay: 1.5s;}
.fadeIn-4 {animation-delay: 2s;-webkit-animation-delay: 2s;}
.fadeIn-5 {animation-delay: 2.5s;-webkit-animation-delay: 2.5s;}


@keyframes fadeIndown {
  0% { opacity: 0;transform: translateY(-6%);}
  100% { opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes fadeIndown {
  0% { opacity: 0;transform: translateY(-6%);}
  100% { opacity: 1;transform: translateY(0);}
}
.fadeIndown{
	animation-name: fadeIndown;
	-webkit-animation-name: fadeIndown;
	visibility: visible !important;
	animation-duration: .6s;
	-webkit-animation-duration: .6s;
}
.fadeIndown-1 {animation-delay: .5s;-webkit-animation-delay: .5s;}
.fadeIndown-2 {animation-delay: .8s;-webkit-animation-delay: .8s;}
.fadeIndown-3 {animation-delay: 1.1s;-webkit-animation-delay: 1.1s;}


@media screen and (max-width: 414px){

@keyframes fadeIndown {
  0% { opacity: 0;transform: translateY(-3%);}
  100% { opacity: 1;transform: translateY(0);}
}
@-webkit-keyframes fadeIndown {
  0% { opacity: 0;transform: translateY(-3%);}
  100% { opacity: 1;transform: translateY(0);}
}
}