@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(https://fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype'),
       url(https://fonts.cdnfonts.com/css/rog-lyonstype);
}
@font-face {
  font-family: CustomHeaderFont;
  font-style: normal;
  font-weight: normal;
  src: local("Microsoft JhengHei UI Bold"),local("Microsoft JhengHei Bold");
}
body {
  overflow-x: hidden;
  font-family: Arial, 文泉驛正黑, "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", 微軟正黑體, "Microsoft JhengHei", 標楷體, DFKai-SB, sans-serif;
  margin:0 auto;
  color:#333;
  background: #000;
  max-width: 1440px;
}

a {outline: none; }
a:hover, a:focus, a:active, a.active {outline: none; }
h1, h2, h3, h4, h5, h6 {font-family: Arial, 文泉驛正黑, "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", 微軟正黑體, "Microsoft JhengHei", 標楷體, DFKai-SB, sans-serif; letter-spacing: 2px; }
input,select,button {font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", "DFKai-SB", "sans-serif"; letter-spacing: 2px; }


/*ui*/
.ui-input{display:inline-block;box-sizing:border-box;border-radius:0px;border:1px solid #ddd;padding:10px 16px;background:#fff;font-size:18px;}
.ui-input__lock{background:#e6e6e6;}
.ui-select{display:inline-block;box-sizing:border-box;border-radius:4px;border:0px solid #ddd;padding:10px 20px;background:rgba(255,255,255,.2);font-size:1.2rem;color: #fff;}
.ui-select optgroup{color: #333;}
.ui-select option{color: #333;}
.ui-option-first{color: #999;}
.ui-option-disabled{color: #999; text-decoration:line-through}
.ui-link{text-decoration: none;color:#666;}
.ui-link:hover{text-decoration: underline;color:var(--text-primary);}
.ui-btn{box-sizing:border-box;display:inline-block;border:none;border-radius:4px;padding:8px 20px;background: transparent;background-image: linear-gradient(155deg, var(--color1alpha) 35%, var(--color2alpha) 85%); color:#fff;font-size:1.2rem;font-weight: bold;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn:hover{background-image: linear-gradient(155deg, var(--color1) 35%, var(--color2) 85%);box-shadow: 0 0 16px rgba(228,0,127,1)}
.ui-btn.active{background-image: linear-gradient(155deg, var(--color1) 35%, var(--color2) 85%);}
.ui-btn-secondary{box-sizing:border-box;display:inline-block;border:none;border-radius:3px;padding:8px 20px;background:var(--btn-secondary);color:#fff;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn-secondary:hover{background:var(--btn-secondary-hover);}
.ui-btn.disabled{background:#ccc;}
.ui-btn-light{box-sizing:border-box;display:inline-block;border:none;border:2px solid #aaa;border-radius:3px;padding:10px 20px;background:#fff;color:#999;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s}
.ui-btn-light:hover{background:#aaa;color:#fff;}
.ui-btn-gray{box-sizing:border-box;display:inline-block;border:none;border-radius:3px;padding:8px 20px;background:#ccc;color:#fff;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn-gray:hover{background:#999;}
.ui-btn-info{border: 1px solid rgba(0,0,0,0.2);padding:7px 25px;border-radius:30px;color:#333;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-info-white{border: 1px solid rgba(255,255,255,.2);padding:7px 25px;border-radius:30px;color:#fff;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info-white:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-favorite{border:none;border-radius: 4px;margin-right: -4px;;padding:4px 4px;color: #999;background: none;font-size: 1.2rem;cursor:pointer}
.ui-btn-favorite.active:after;{content:"\f004";}
.ui-btn-favorite:after{content:"\f08a";font-family:"FontAwesome";}
.ui-btn-favorite:hover{color: var(--color1)}
.ui-btn-favorite:hover:after{content:"\f004";}
.ui-file{padding:10px;border:1px dashed #ccc}

@media (max-width: 768px) {
  .ui-btn-shine{padding:10px 24px;font-size:1rem;}
  .ui-select{font-size:1.1rem}
  .ui-btn{padding:6px 16px;font-size:1.1rem}
}

@media (max-width: 480px) {
  .ui-select{font-size:1rem}
  .ui-btn{font-size:1rem}
}

/*form*/
.ui-form{margin:0;padding:0;list-style:none}
.ui-form-item{}
.ui-form-title{width:100%;padding:10px 0 10px 24px;color:var(--color1);font-size: 1.2rem;background:url(../images/icon-arrow_hold.png) no-repeat left center;}
.ui-form .ui-form-control{display: inline-block; width: auto;margin-right: 10px;}
.ui-form .ui-label{display:block;margin-bottom:5px;color:#999;font-size:16px;}
.ui-form .half{width: calc(50% - 8px);}
.ui-form .warning{color:#f3ea00;}
.ui-form hr{margin-bottom:16px;}
.ui-form-foot{margin-top:20px}
.ui-form-control{display:flex;flex-wrap:wrap;align-items: center;margin-bottom: 10px}

@media (max-width: 768px) {
  .ui-form-title { font-size: 1.1rem}
}

@media (max-width: 480px) {
  .ui-form .half{width:100%;}
  .ui-form-control {width: 100%!important; margin-top: 5px;margin-bottom:5px;margin-right: 0!important}
  .ui-form-control .ui-input{margin-bottom:10px;}
  .ui-form-control .ui-input:last-child{margin-bottom:0;}
  .ui-form-control .ui-input,.ui-form-control .ui-select{width:100%!important;}
}

/*table*/
.ui-table {margin:0 auto;width:100%;border-spacing: 0 0px;}
.ui-table th{border-right:1px solid #fff;padding:10px 10px ;background:#999; text-align:center;color:#fff;font-size:18px;}
.ui-table td{border-right:1px solid #fff;padding:10px 10px; }
.ui-table tr{transition: .2s}
.ui-table tr:hover td{background-color: #fef4e5!important}
.ui-table tr:hover{position: relative; outline: 1px #333; box-shadow: 0 0 15px rgba(0,0,0,.15)}
.ui-table tr:nth-child(2n) td{background-color: #f2f7fc}
.ui-table tr th:last-child,.ui-table tr td:last-child{border-right:none;}
.ui-table td a{color:#333;}
.ui-table .active{background:#fef4e5;}
.ui-table .danger{background:#ffeeba;box-shadow: 0 0 10px rgba(204,0,0,.3)}
.ui-table .delete {display: inline-block; margin:0 14px 0 0;width:16px;height:16px;border-radius:50%;text-align:center;background:#5cc2cf;color:#fff;font-size:13px;font-weight: bold;line-height: 16px;cursor: pointer}
.ui-table .add,.ui-table .subtract{display: inline-block;box-sizing:border-box;width:25px;height:25px;line-height:25px;border:1px solid #bcbcbc;vertical-align: middle;cursor: pointer;transition: 0.2s}
.ui-table .add:hover,.ui-table .subtract:hover{border-color:#f39800;background:#f39800;color:#fff;}
.ui-table a{text-decoration:none;color:#1472bc;}
.ui-table a:hover{text-decoration:underline;}
.ui-table .label{display:inline-block;padding:6px 10px;border-radius:5px;background:#f39800;color:#fff;font-size: 15px}

.ui-table-clear {margin:0 auto;width:100%;border-spacing: 0 0px;}
.ui-table-clear th{border-top:1px solid #ddd;padding:10px 10px ;background:#005dc7; text-align:center;color:#fff;font-size:18px;}
.ui-table-clear td{border-top:1px solid #ddd;padding:10px 10px; }
.ui-table-clear tr{transition: .2s}
.ui-table-clear tbody tr:last-child td{border-bottom:1px solid #ddd;}
.ui-table-clear td a{color:#333;}
.ui-table-clear a{text-decoration:none;color:#1472bc;}
.ui-table-clear a:hover{text-decoration:underline;}


@media screen and (max-width: 640px) {
  .ui-table-rwd thead {display: none; }
  .ui-table-rwd tr {display: block; margin-bottom:10px;border:1px solid #e6e6e6;}
  .ui-table-rwd td {display: block; border: none; text-align:left!important;}
  .ui-table-rwd td:before {content: attr(data-th) " : "; font-weight: bold; }
  .ui-table-rwd td {padding:10px;background:#f2f7fc;text-align:left;}
  .ui-table-rwd tbody tr td:nth-child(even) {background:#fff;}
}

/*ui law*/
.ui-law ol { margin: 0; padding: 0;counter-reset: item }
.ui-law ol ol { padding-bottom: 20px; }
.ui-law li{ display: block ; }
.ui-law li::before { content: counters(item, ".") " "; counter-increment: item }

/* imgtool */
.ui-imgtool{position:relative;margin:30px auto 30px auto;width:280px;}
.ui-imgtool .fileinput{position:absolute;top:0;width:100%;height:280px;opacity:0;}
.ui-imgtool .fileimage{position:relative;margin:0 auto;width:100%;height:280px;border: 1px dashed #ccc;border-radius: 5px;background:no-repeat center;background-image:url(../images/icon-photo-camera.png);background-size: contain;cursor: pointer;transition: .2s}
.ui-imgtool .filestate{width:100%;text-align: center;pointer-events:none}
.ui-imgtool .fileupload{display:none;}
.ui-imgtool.fileready .fileimage{background-size:cover;opacity:.5;}
.ui-imgtool .fileprogress{position: absolute;bottom:0;left:0;right:0;margin:0 auto;width: 280px; height: 6px;background: #ccc}
.ui-imgtool .fileprogress-precent{width: 20px;height:100%;background: #9de4e1 }
.ui-imgtool-menu{display:flex;justify-content: center;margin:0 auto ;width:280px;}
.ui-imgtool-menu .ui-btn{flex:1;border-radius:0;font-size:16px;}
.ui-imgtool-menu .ui-btn:first-child{background:var(--color1);}
.ui-imgtool-info{text-align: center;}
.ui-imgtool-info span{line-height: 24px}

/*inputtool*/
.inputtool {margin:10px 0 0 0;padding:0;list-style:none;}
.inputtool li{display:flex;margin:0;padding:6px 0;border-top:1px solid rgba(0,0,0,.05);}
.inputtool li:last-child{margin-bottom:5px;border-bottom:1px solid rgba(0,0,0,.05);}
.inputtool li .dragli{width:30px;height:50px;background:url(images/tool-drag.png) no-repeat center;cursor:pointer}
.inputtool li div{position:relative;display:table-cell;vertical-align:middle;}
.inputtool li input{width:auto!important;display:inline-block;box-sizing:border-box;border-radius:0px;border:1px solid #ddd;padding:10px 16px;background:#fff;font-size:18px;}
.inputtool li select{width:auto!important;display:inline-block;box-sizing:border-box;border-radius:0px;border:1px solid #ddd;padding:10px 16px;background:#fff;font-size:18px;}
.inputtool .rowdelete{display:table-cell;;width:50px;background:url(images/tool-close-black.png) no-repeat center center;cursor:pointer}
.inputtool .placeholder{height:45px;background-color:#c4dbeb!important;border:dashed 1px #8db1cb !important;}
.inputtool .ui-sortable-helper{border:none;background:#fff;opacity:.9;box-shadow: 2px 2px 10px rgba(0,0,0,.1)}
/*.inputtool-inner{width:calc(100% - 50px);}*/
.ui-inputtool .btn-gray{box-sizing:border-box;display:inline-block;border:none;border:2px solid #aaa;border-radius:3px;width: 100%;padding:10px 20px;background:#fff;color:#999;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s}
.ui-inputtool .btn-gray:hover{background:#aaa;color:#fff;}

/*fileupload*/
.ui-fileupload{position:relative;display:flex;flex-wrap:wrap;align-self:center;align-content: center;box-sizing:border-box;padding:10px;width:100%;height:140px;border:1px dashed #ccc;line-height: 26px;}
.ui-fileupload-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;}
.ui-fileupload-state{width:100%;text-align: center;pointer-events:none}
.ui-fileupload-btn{display:none;}
.ui-fileupload-progress{margin:0 auto 10px auto;max-width:500px;width: 80%; height: 15px;background: #ccc}
.ui-fileupload-precent{width: 20px;height:100%;background: #005dc7 }
.ui-fileupload-info{width:100%;text-align: center;pointer-events:none}

/*tag*/
.ui-tag{}
.ui-tag-item{display: inline-block;border-radius:16px;margin-right: 10px;border: 2px solid var(--color1);padding:2px 16px;font-size: .9rem;color:#000;text-decoration: none;transition: .2s}
.ui-tag-item:hover{background: var(--color1);}

/*file*/
.filelist{margin:0;padding:0;list-style:none;width:100%;text-align: left}
.filelist-item{position: relative;box-sizing:border-box;margin-bottom: 12px;border:1px solid #e6e6e6;padding:16px 16px 16px 72px;background:no-repeat 20px center;transition:.2s;}
.filelist-item:hover{box-shadow: 0 0 15px rgba(0,0,0,.15)}
.filelist-item .delete{position: absolute;right:10px;top:50%;display:block;border:none;background:transparent;cursor:pointer;transform: translateY(-50%);transition: .2s}
.filelist-item .delete:hover{color:#cc0000;}
.filelist-link{display:block;color:#333;text-decoration: none}
.filelist-type-pdf{background-image: url(../images/icon-pdf.png)!important}
.filelist-type-doc{background-image: url(../images/icon-doc.png)!important}
.filelist-type-folder{background-image: url(../images/icon-folder.png)!important}
.filelist-type-link{background-image: url(../images/icon-link.png)!important}

/* numbertool */
.ui-numbertool{display:flex;flex-wrap: wrap;justify-content: space-around;margin:30px auto;max-width:280px;}
.ui-numbertool-btn{box-sizing:border-box;display:flex;justify-content: center;align-content: center;margin-bottom:10px;border:1px solid rgba(255,255,255,.0);border-radius:5px;width:calc(33.333% - 10px);padding:15px 8px;background:rgba(255,255,255,1);color:#333;font-size:1.5rem;text-decoration: none;transition: .2s;user-select:none;}
.ui-numbertool-btn:hover{color:#fff;background:var(--color1);box-shadow: 0 0 20px var(--color1)}
.ui-numbertool-btn:focus{color:#fff;background:var(--color1);outline: none}

/*effect*/
.fx-opacity0{opacity:0;}
.fx-opacity25{opacity:.25;}
.fx-opacity50{opacity:.5;}
.fx-opacity100{opacity:1;}

.d-flex{display:flex!important;}
.d-block{display:block!important;}
.d-none{display:none!important;}
.d-inline-block{display:inline-block!important;}
.w-10{width:10%!important;}
.w-20{width:20%!important;}
.w-30{width:30%!important;}
.w-33{width:33.33%!important;}
.w-50{width:50%!important;}
.w-60{width:60%!important;}
.w-66{width:66.7%!important;}
.w-70{width:70%!important;}
.w-100{width:100%!important;}
.w-20px{width:10px!important;}
.w-30px{width:30px!important;}
.w-40px{width:40px!important;}
.w-50px{width:50px!important;}
.w-60px{width:60px!important;}
.w-70px{width:70px!important;}
.w-100px{width:100px!important;}

/*flaticon*/
.fa-sign-out-option{background-image: url(../images/icon-sign-out-option.svg)}

/*color or bg*/
.color-primary{color:var(--primary);}
.color-secondary{color:var(--secondary);}
.color-success{color:var(--success);}
.color-info{color:var(--info);}
.color-warning{color:var(--warning);}
.color-danger{color:#ff5f5f;}
.color-blue{color:#87cf73;}
.color-purple{color:#9de4e1;}
.color-orange{color:#ea7a48}
.color-orangelight{color:#fde7d5}
.color-red{color:#c00!important}
.color-gray{color: #999}
.bg-cover{background-repeat:no-repeat;background-position:center;background-size:cover;}
.bg-primary{background-color: var(--primary)!important;}
.bg-secondary{background-color: var(--secondary)!important;}
.bg-success{background-color: var(--success)!important;}
.bg-info{background-color: var(--info)!important;}
.bg-danger{background:#ff5f5f!important;}
.bg-gray{background-color: #999!important}
.bg-graylight{background-color: #eee!important}
.bg-red{background-color:#c00!important}
.bg-orangelight{background-color:#fccfab!important}
.bg-pruplewhite{background-color: #e7e3f6!important}
.bg-color{background-color: var(--color2)!important}
.bg-linear{background: linear-gradient(0deg, rgba(0, 0, 0,.1) 0%,  rgba(0, 0, 0,0) 20%);}

/*float align*/
.flex-center{display:flex;justify-content:center;align-items:center}
.flex-vcenter{display:flex;align-items:center}
.float-left{float:left;}
.float-right{float:right;}
.float-center{margin:0 auto;}
.text-left{text-align:left !important}
.text-right{text-align:right !important}
.text-center{text-align:center !important}
.text-justify {text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; /*IE9*/ -moz-text-align-last:justify; /*Firefox*/ -webkit-text-align-last:justify; /*Chrome*/ }
.text-justify:after {content: ''; display: inline-block; width: 100%; height:0; line-height:0; font-size:0; }
.valign-box{display:inline-block;vertical-align:middle;width:0;height:100%;visibility:hidden;}

/*clear*/
.clear-left{clear:left;}
.clear-right{clear:right;}
.clear-both{clear:both;width:100%}
.clear-fix{clear:both;}
.clear-fix:after{content:".";clear:both;display:block;font-size:0;height:0;line-height:0;visibility: hidden;}


/*--------------------------------------------------------------*/
/*  Header
/*--------------------------------------------------------------*/

/* navbar */
.navbar{z-index:999;box-sizing: border-box; position: absolute; top:0; left:0;right:0;margin:auto;width: 100%; max-width: 1440px; transition: 0.2s}
.navbar-header {position: relative;margin: 0 auto;vertical-align: middle }
.navbar-brand {z-index: 998;position: absolute;top:min(3.6vw,52px);left:min(6.4vw,100px);display:inline-block; vertical-align: middle; font-size: 0;}
.navbar-logo {width:100%;padding:19px 0;transition: 0.2s}
.navbar-logo-print {display: none;}
.navbar-toggle {z-index: 999;display:none; position:absolute;left:30px;top:28px;border: none; padding: 0; background: none; font-size: 2rem; color: var(--navbar-toggle); cursor: pointer;}
.navbar-toggle:focus {outline: none}
.navbar-toggle .fa{text-shadow:2px 2px 12px rgba(0,0,0,.8);transition: .2s}
.navbar-toggle .fa:hover{text-shadow: 0 0 20px var(--color1);}
.navbar-collapse {vertical-align: middle ; position: absolute; top:0 ;left:0;right:0; margin: 0 auto; width:100%; max-width: 1440px; }
.navbar-nav {display:flex;justify-content: right;margin: min(8.2vw,120px) min(4.3vw,125px) auto 0; padding: 0; list-style: none; }
.nn-list-item {position: relative;padding:0 min(2.8vw,40px);line-height:28px; text-align:center;font-weight: bold;transition: .2s}
.nn-link{display:inline-block; font-size: 1.2rem; text-decoration: none; color:#fff; text-shadow: 3px 3px 15px rgba(0, 0, 0, .8);;transition: 0.2s }
.nn-link:hover{color:var(--color2); }

@media (max-width: 1366px) {
  .navbar-nav { margin-right: min(4vw,125px); }
  .nn-list-item {padding:0 min(2.5vw,40px);}
}

@media (max-width: 1280px) {
  .navbar-brand {top:min(3.2vw,52px);left:min(6vw,100px);}
  .navbar-nav {margin-top:min(8vw,120px);margin-right: min(3.9vw,125px); }
  .nn-list-item {padding:0 min(2.2vw,40px);}
}

@media (max-width: 1100px) {
  .navbar-nav {margin-right: min(3.5vw,125px); }
  .nn-link{font-size: 1.1rem; }
}

@media (max-width: 1024px) {
  .navbar-toggle{display:block;width:45px;}
  .navbar-brand {left:calc(50% - 100px);top:18px}
  .navbar-logo { width: 200px;padding:0;}
  .navbar-nav {z-index:998;display:none;box-sizing: border-box;position:fixed;left:0;top:0;margin-top: 0;width:100%;padding:10px 0 ;background:var(--navbar); text-align: center;box-shadow: 2px 2px 15px rgba(0,0,0,0.8);}
  .nn-list-item {position: relative; display:block;width:100%;padding: 0;line-height:40px !important;}
}

@media (max-width: 768px) {
  .navbar-toggle{left:calc(5% - 3px);top:30px;}
}

@media (max-width: 640px) {
  .navbar-brand {left:calc(50% - 90px)}
  .navbar-logo { width: 180px;}
}

@media (max-width: 480px) {
  .navbar-toggle{top:20px;font-size: 1.6rem;width: 36px}
  .navbar-brand {left:calc(50% - 80px)}
  .navbar-logo{width:160px}
}

@media (max-width: 375px) {
  .navbar-toggle{top:12px;}
  .navbar-brand {left:calc(50% - 70px);top:10px}
  .navbar-logo{width:140px}
}

/* header */
.header {position:relative;margin:min(16.5vw,240px) auto 0px auto; width:100%; }
.header .owl-theme {position: relative; padding-bottom: 20px;background: linear-gradient(#000 90%, #272727 98%);}
.header-empty{ height:0px; margin-bottom: 0;}
.header-title{ margin:0 auto;width: 80%; font-size: 2.7rem; line-height:3.2rem; text-shadow:3px 3px 10px rgba(0,0,0,.5);}
.header-subtitle{margin:0 auto;width: 80%;font-size: 1.2rem;text-shadow:3px 3px 10px rgba(0,0,0,.5);}
.header-banner{overflow: hidden;display: flex;border-radius: 20px;background: var(--color2)}

@media (max-width: 1024px) {
  .header {margin-top: 16vw;}
  .header-title{ width: 86%; font-size:2.2em ;}
  .header-subtitle{ width: 86%; }
}

@media (max-width: 768px) {
  .header {margin-top: 20vw;}
  .header-title{ width: 90%; }
  .header-subtitle{ width: 90%; margin-bottom: -2px}
}

@media (max-width: 480px) {
  .header {margin-top: 26vw;}
  .header .owl-theme { padding-bottom: 10px;}
  .header-title{ font-size:2rem }
  .header-subtitle{ font-size:1rem ;margin-bottom: -6px}
}

@media (max-width: 375px) {
  .header .owl-theme { padding-bottom: 2px;}
  .header {margin-top: 94px;}
  .owl-theme .owl-nav.disabled+.owl-dots {margin-top: 2px }
}


/* owl.carousel */
.owl-theme .owl-text {position: absolute; bottom: 10px; left: 2em; }
.owl-theme .owl-dots {top:auto; bottom: 20px; width: 100%; height:20px!important;text-align: center; }
.owl-theme .owl-dots .owl-dot span{background: rgba(255,255,255,.3);}
.owl-theme .owl-dots .owl-dot.active span{background: rgba(255,255,255,1);}


/*--------------------------------------------------------------*/
/*  Article, Layout
/*--------------------------------------------------------------*/

.container{margin:0 auto;max-width: 1440px;padding-top: 1px;background: url(../images/bg.jpg);background-repeat: no-repeat;background-position:center top;background-size: 100%;}
.container-inner{background:url(../images/footer.jpg) no-repeat center bottom; background-size: 100%;}

/*article*/
.article{display: flex;flex-wrap: wrap;justify-content: center;margin:20px auto 70px auto;min-width:320px;}
.article-header{box-sizing: border-box;margin:20px auto 20px auto;width:80%;padding:0 0;}
.article-hr{margin:0 auto 20px auto;width:86%;height:5px;background:#87cf73;}
.article-title{ font-size: 2.7rem;letter-spacing: 0;line-height:3.2rem;text-shadow:3px 3px 10px rgba(0,0,0,.5);}
.article-subtitle{width: 100%;font-size: 1.2rem;text-shadow:3px 3px 10px rgba(0,0,0,.5);}
.article-content{box-sizing: border-box;margin:0 auto;width:80%;padding:0 0;color: #fff;font-size: 1.1rem;line-height:1.8rem;text-align: justify; text-justify: inter-ideograph;}
.article-content h2{margin-bottom: 40px;color:#333;font-size: 1.6em;font-weight: 800;}
.article-content h2 span{display: inline-block;border-bottom: 3px solid var(--color2);padding-bottom: 4px}
.article-content h3{color:#333;font-size:1.5rem}
.article-content hr{display:block;border:none;width:100%;height:35px;background:url(../images/page-hr.png);}
.article-content img{display: block;width: 100%;height: auto;}
.article-content .article-p:last-child{margin-bottom:0;}
.font-linear{ font-weight: 1000; color:var(--color1);-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(var(--color1) 35%, var(--color2) 85%);}
.font-rog{font-size: 1.2rem;font-family: 'ROG LyonsType';color:var(--color1);line-height: .8rem;transform: translateX(3px);text-shadow:0 0 16px rgba(0,0,0,.5);}

@media (max-width: 1024px) {
  .container{background-size: 120%;background-position:90% top}
  .container-inner{background-size: 110%;}
  .article{margin-top: 10px;margin-bottom: 40px;}
  .article-title{font-size:2.2em ;margin: 0;}
  .article-content{width:86%}
}

@media (max-width: 768px) {
  .container{background-size: 140%;}
  .container-inner{background-size: 120%;}
  .article{margin-bottom: 20px;}
  .article-header{margin:30px auto 20px auto;width:90% ;padding:0;}
  .article-subtitle{margin-bottom: -2px}
  .article-content{width:90% ;padding:0 ;font-size:1rem ;}
  .article-content h2{font-size: 1.4rem;}
  .article-content h3{font-size:1.2rem}
}

@media (max-width: 640px) {
  .container{background-size: 160%;background-position:80% top}
  .container-inner{background-image:url(../images/footer-mobile.jpg);background-size: 160%;background-position:30% bottom;}
}

@media (max-width: 480px) {
  .container-inner{background-size: 240%;background-position:20% bottom;}
  .article{margin-top: 6px;}
  .article-header{margin:20px auto ;}
  .article-title{font-size:2rem ;}
  .article-subtitle{font-size:1rem ;margin-bottom: -6px}
}

/*page*/
.page-control{padding-top:20px;text-align:center;}
.page-link{display:inline-flex;justify-content:center;align-content: center;align-items: center;margin:0 8px;border-radius:50%;border:1px solid #fff;padding:0;background: #fff;color:#000;width:30px;height:30px;font-size:1.2em;text-decoration: none;transition: .2s}
.page-link:hover{color:var(--color1)}
.page-link.active{border:1px solid #000;color:#000}
.page-arrow{border:1px solid #000;}
.page-arrow:hover{border:1px solid var(--color1);}

@media (max-width: 768px) {
  .page-control{padding-top:10px;}
  .page-link{width:24px;height:24px;}
}


/*--------------------------------------------------------------*/
/*  Footer
/*--------------------------------------------------------------*/

.footer{clear:both;padding:min(6vw,80px) 0 0 0;color:#fff}
.footer-inner{display:flex;flex-wrap: wrap;justify-content: space-between;box-sizing:border-box;margin:0 auto;width:80%;max-width:1680px;padding-bottom:min(7.5vw,116px);font-size: 1rem;line-height: 26px;}
.footer-title{margin-bottom: 10px;font-size: 1rem;font-family: 'ROG LyonsType';color:var(--color1);transform: translateX(3px);text-shadow:0 0 16px rgba(0,0,0,.5);}
.footer-logo{}
.footer-logo img{}
.footer-contact{line-height: 2rem;}
.footer-contact-item{display:flex;flex-wrap:wrap;align-items:center;}
.footer-contact-item img{margin-right: 10px;}
.footer-social{margin-left: -100px;}
.footer-social-link{display:inline-block;margin-right: 12px;}
.footer-social-link img{}
.footer-foot{display: flex;justify-content: center;padding:22px 36px ;align-items: center;background-image: linear-gradient(var(--color1) 25%, var(--color2) 240%); color: #fff;font-size: .9rem;text-shadow:0 0 6px rgba(0,0,0,.3)}
.footer a{text-decoration: none;color:#000;}
.footer a:hover{text-decoration: underline;color:#000;}


@media (max-width: 1280px) {
  .footer-inner{padding-bottom:6.6vw;}
  .footer-logo img{width: 200px}
}

@media (max-width: 1024px) {
  .footer-inner{width: 86%}
  .footer-social{margin-left: -50px;}
}

@media (max-width: 768px) {
  .footer-inner{width: 90%}
  .footer-logo img{width: 200px}
  .footer-foot{padding:16px 36px;}
}

@media (max-width: 640px) {
  .footer{background: linear-gradient(rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 10%);}
  .footer-inner{width: 90%;justify-content: left}
  .footer-social{margin-left: 0px;margin-top: 30px;width: 100%;}
  .footer-logo{margin-top: 30px;width: 100%;}
  .footer-foot{padding:16px 16px;}
}

@media (max-width: 480px) {
  .footer{font-size: .9em;}
}


/*--------------------------------------------------------------*/
/*  Index
/*--------------------------------------------------------------*/

/* index-box */
.index-block{clear:both;box-sizing:border-box;margin: 0 auto;padding:30px 10px 60px 10px;width: 100%;text-align: center;color: #fff;}
.index-block-header{position: relative;margin:0 auto;width:80%;max-width:1680px;padding: 30px 0}
.index-block-content{margin:0 auto;width:80%;max-width:1680px;font-size: 1.1rem;line-height: 1.8rem}
.ibh-subtitle{margin-bottom: 0}
.ibh-text{font-size: 1.2rem;}
.ibh-icon{font-size: 1.2rem;}
.ibh-more{position: absolute;top:70px;right:75px;display: block;width: 47px;height: 47px;text-decoration: none;background: url("../images/icon-more.png");background-size: contain;transition: .2s;}

/*index other*/
.index-sheet{background:url(../images/index-sheet.jpg) no-repeat center;background-size: cover;}
.index-sheet .sheet-list{margin-bottom: 0;margin-top: 30px;}
.index-sheet .sheet-list-item{margin-bottom: 0;}
.index-map{margin-top: 2px!important;}
.index-map-total{display:inline-block;padding:0 8px;font-size:1.2em;color:var(--color3);text-shadow:0 0 12px var(--color3);transform:scale(1.4,1.4)}
.index-about{display: flex;margin-top: 2px;padding: 0 30px;background:url(../images/index-about.jpg) no-repeat center;background-size: cover;color: #000;}
.index-about-pic{width: 45%;height: auto}
.index-about .ibh-title{text-shadow:none}
.index-about .ibh-subtitle{text-shadow:none}
.index-about-content{display:flex;flex-wrap:wrap;align-content: center;box-sizing: border-box;width: 55%;;padding: 60px 50px;text-align: left;}
.index-about-t1{margin-top: 30px;font-weight: bold;}
.index-about-t2{margin-top: 12px;font-weight: bold;}
.index-fw{display: flex;flex-wrap: wrap;margin-top: 2px;padding: 0 0 min(8.5vw,125px) 0;text-align: left}
.index-fw .ibh-title{color:#fff!important;font-weight: 1000;}
.index-fw .ibh-subtitle{color:#fff!important}
.index-faq{position: relative;box-sizing: border-box;width: 50%;padding: 60px 80px 60px 80px;background:url(../images/index-faq.jpg) no-repeat center;background-size: cover;color: #fff;text-shadow:3px 3px 10px rgba(0,0,0,.5);}
.index-faq .faq-list{margin-top: 40px;margin-bottom: 0;margin-left: 0;}
.index-faq .faq-list-item a{color: #fff;text-decoration: none;}
.index-wallpaper{position: relative;box-sizing: border-box;width: 50%;padding: 60px 80px 0px 80px;;background:url(../images/index-wallpaper.jpg) no-repeat center;background-size: cover;color: #fff;}
.index-wallpaper-pic{margin-left: -5%;padding-top: 60px;width: 110%;}

@media (max-width: 1280px) {
  .index-fw{padding-bottom:min(7.5vw,95px);}
}

@media (max-width: 1100px) {
  .index-about-content{padding: 60px 50px;}
  .index-fw{padding-bottom:min(6vw,70px);}
}

@media (max-width: 1024px) {
  .ibh-subtitle{font-size: 1.2rem}
  .ibh-title{font-size: 2rem}
  .ibh-more{top:50px;right:45px;}
  .index-about-content{padding: 40px 30px;}
  .index-about-t1{margin-top: 20px}
  .index-faq{padding: 50px 40px 30px 40px;}
  .index-faq .faq-list{margin-top: 30px;}
  .index-wallpaper{padding: 50px 40px 20px 40px;}
  .index-wallpaper-pic{margin:0 auto;width: 100%;padding-top: 40px;}
}

@media (max-width: 768px) {
  .ibh-more{top:50px;right:45px;width: 40px;height: 40px;}
  .ibh-subtitle{margin-bottom: -6px}
  .index-about-pic{width: 40%}
  .index-about-content{width: 60%;font-size: 1rem}
  .index-about-t1{margin-top: 10px}
  .index-about-t2{margin-top: 0px}
  .index-faq{width: 100%;padding: 50px 50px 40px 50px;}
  .index-wallpaper{width: 100%;padding: 50px 50px 0px 50px;}
  .index-wallpaper-pic{width: 80%;display:block; }
}

@media (max-width: 640px) {
  .index-sheet .sheet-list-item{margin-bottom: 24px;}
  .index-about{padding: 50px 40px 40px 40px;}
  .index-about-pic{display: none}
  .index-about-content{padding: 0px;width: 100%;font-size: 1.2rem}
}

@media (max-width: 480px) {
  .ibh-more{top:40px;right:35px;}
  .index-sheet{padding-top: 10px;padding-bottom: 20px;}
  .index-sheet .index-block-header{padding-bottom: 12px}
  .index-sheet-content br{display: none}
  .index-faq{width: 100%;padding: 50px 40px 30px 40px;}
  .index-faq .faq-list{margin-top: 20px;}
  .index-wallpaper{width: 100%;padding: 50px 40px 0px 40px;}
  .index-wallpaper-pic{padding-top: 30px;width: 100%;}
}

@media (max-width: 375px) {
  .index-about{padding: 40px 30px 30px 30px;}
  .index-about-content{font-size: 1.1rem}
  .index-faq{padding: 40px 30px 30px 30px;}
  .index-wallpaper{width: 100%;padding: 40px 30px 0px 30px;}
  .index-wallpaper-pic{padding-top: 20px;}
}

/*--------------------------------------------------------------*/
/*  sheet
/*--------------------------------------------------------------*/

.sheet{background-image: url(../images/bg-sheet.jpg)}
.sheet-logo{display: none;position: fixed;right:24px;top:24px;opacity: .5;width: 34%;}
.sheet-list{display:flex;flex-wrap: wrap;margin:64px -20px 34px -20px;padding: 0;width:calc(100% + 36px);list-style: none;}
.sheet-list-item{box-sizing: border-box;margin: 0 20px 40px 20px; width:calc(33.333% - 40px); padding: 0;box-shadow:0 0 16px rgba(0,0,0,.15);transition: .2s}
.sheet-list-item:hover{box-shadow: 0 0 25px rgba(0,0,0,.05)}
.sli-pic{width:100%;}
.sheet-total{margin-top: 48px;margin-bottom: 24px;border-top: 4px double var(--color1);border-bottom: 4px double var(--color1);padding-top: 18px;padding-bottom: 18px;font-size: 1.4rem}
.sheet .ui-form-title{margin-top: 30px;}
.img-screen{}
.img-print{display: none!important;}


@media (max-width: 1024px) {
  .sheet{background-image: url(../images/bg-sheet-mobile.jpg)}
}

@media (max-width: 768px) {
  .sheet-list{margin:34px -20px 34px -20px;}
  .sheet-article-content{line-height: 1.6rem}
  .sheet .ui-form-title{margin-top: 20px;}
}

@media (max-width: 640px) {
  .sheet-list{margin:34px -20px 0 -20px;}
  .sheet-list-item{width:calc(50% - 40px); }
}

@media (max-width: 480px) {
  .sheet-list-item{width:100%;padding: 0 24px}
  .sheet .ui-form-title{padding-bottom: 4px;padding-top: 4px}
}

@media print { 
  @page {
    size: A4 portrait;
  }

  body{-webkit-print-color-adjust: exact; }
  .break-inside{page-break-inside: avoid;}
  .container {background: #fff!important}
  .sheet .container-inner {background: #fff!important}
  .sheet .header{margin-top: 36px;}
  .sheet .navbar-toggle{display: none}
  .sheet .navbar-logo{display: none}
  .sheet .footer{padding-top: 0;}
  .sheet .footer-inner{display: none}
  .sheet .sheet-logo{display: block!important}
  .sheet .sheet-article{margin-bottom: 0;}
  .sheet .sheet-article-content{color: #000!important;margin-bottom: 0;}
  .sheet .font-linear{background-image: none!important;-webkit-background-clip: inherit; -webkit-text-fill-color:inherit;text-shadow: none}
  .sheet .font-rog{text-shadow: none}
  .sheet .ui-form-title{margin-top: 12px;}
  .sheet .ui-select{color: #000!important;border: 1px solid #999;background: #eee;}
  .img-screen{display: none!important;}
  .img-print{display: block!important;}
}

/*--------------------------------------------------------------*/
/*  prodcut
/*--------------------------------------------------------------*/

.product{background-image: url(../images/bg-product.jpg)}
.product-list{display:flex;flex-wrap: wrap;margin:0 -20px 34px -20px;padding: 0;width:calc(100% + 40px);list-style: none;}
.product-list-item{box-sizing: border-box;margin: 0 20px 40px 20px; width:calc(33.333% - 40px); padding: 0;box-shadow:0 0 16px rgba(0,0,0,.15);transition: .2s;cursor: pointer;}
.product-list-item:hover{box-shadow: 0 0 25px rgba(0,0,0,.05)}
.pli-pic{position: relative;width:100%;height:0;border-radius: 4px; border:1px solid var(--color1);padding-top:100%; background:no-repeat center;background-size: cover}
.pli-title{position: absolute;left:0px;bottom:14px;box-sizing: border-box;width: 100%;padding:12px 4px 12px 4px ;text-align: center;font-size:1.2rem;color:#fff;background: rgba(0,0,0,.5) url(../images/icon-product.png) no-repeat left center; background-size: auto 100%}
.pli-price{padding-top:12px;font-size:1.2rem;color:var(--color1);}
.product-article{box-sizing: border-box;display: flex;flex-wrap: wrap;justify-content: space-between;color: #fff;}
.product-article::-webkit-scrollbar{width:8px;background-color:rgba(0,0,0,0);}
.product-article::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(255,255,255,.3);}
.product-article-head{}
.pah-title{margin:0 0 10px 0;color:var(--color1);}
.pah-price{font-size: 1.2rem}
.pah-link{margin:12px 0 24px 0;}
.product-article-content{width:calc(50% - 10px);padding-top: 20px;line-height: 30px}
.product-slider{width:calc(50% - 10px);padding-top: 20px;}
.product-slider-item{width:100%;height:auto;background: no-repeat center;background-size: contain}

@media (max-width: 1024px) {
  .product{background-image: url(../images/bg-product-mobile.jpg)}
}

@media (max-width: 768px) {
  .product-list-item{width:calc(50% - 40px); font-size: 1em;line-height: 1.4em}
  .product-article{height:100%;overflow-y: scroll;}
  .product-article .article-header{width:100%;}
  .product-slider{width:100%;padding-top: 20px;}
}

@media (max-width: 640px) {
  .product-list{margin:0 -10px 34px -10px;width:calc(100% + 20px);}
  .product-list-item{margin: 0 10px 20px 10px;width:calc(50% - 20px); font-size: 1em;line-height: 1.4em}
}

@media (max-width: 480px) {
  .product-list-item{width:100%;}
}


/*--------------------------------------------------------------*/
/*  dealer
/*--------------------------------------------------------------*/

.dealer{background-image: url(../images/bg-dealer.jpg)}
.map{position: relative;margin-top: 40px;box-shadow:4px 4px 16px rgba(0,0,0,.3);opacity: .9;}
.map-tool{z-index:999; position: absolute;top:40px;left: 40px;width: 30%;color: #fff;}
.map-menu{display: flex;border: 1px solid rgba(255,255,255,.2);border-radius:4px;background:rgba(0,0,0,.8);box-shadow:4px 4px 24px rgba(0,0,0,.5);}
.map-area{width: 40%;background: none;padding: 16px;}
.map-search{width: 60%;display: flex;box-sizing: border-box;border-left: 1px solid rgba(255,255,255,.2);}
.map-search-input{width:calc(100% - 60px);border: none;background: none;padding: 16px;color: #fff;font-size: 1rem}
.map-search-input:focus{outline:0}
.map-search-btn{display: block;width:60px;border: none;background: none;color: #fff;font-size: 1.4rem;cursor: pointer;}

.map-list-icon{display: none;border: 1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.8);text-align:center;font-size: 1.8rem;box-shadow:4px 4px 24px rgba(0,0,0,.5);transition: .2s;cursor: pointer;}
.map-list-icon:hover{color: var(--color1);}
.map-list-open{border-radius:4px;}
.map-list-close{border-bottom-left-radius:4px;border-bottom-right-radius:4px;}
.map-list{overflow-x:hidden ;overflow-y:auto ;margin:10px 0 0 0;border: 1px solid rgba(255,255,255,.2);border-top-left-radius:4px;border-top-right-radius:4px;height:100% ;padding:0;list-style:none;background:rgba(0,0,0,.8);box-shadow:4px 4px 24px rgba(0,0,0,.5);}
.map-list::-webkit-scrollbar{width:8px;background-color:rgba(0,0,0,0);}
.map-list::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(255,255,255,.3);}
.map-item{padding:16px 18px;border-top: 1px solid rgba(255,255,255,.2);transition: .2s}
.map-item:hover{background: rgba(255,255,255,.2);}
.map-item-title{font-size: 1.2rem}
.map-item-text{font-size: 1rem;color: rgba(255,255,255,.5);}
.map-info{margin:10px 0 0 0;border: 1px solid rgba(255,255,255,.2);border-radius:4px;padding: 18px;background:rgba(0,0,0,.8);box-shadow:4px 4px 24px rgba(0,0,0,.5);line-height: 1.6rem}
.map-info-back{background: none;color: var(--color1);border: none;font-size: 1rem;display:flex;flex-wrap:wrap;align-items:center;padding: 0;font-weight: bold;cursor: pointer;}
.map-info-back .fa{font-size: 1.6rem;padding-right: 4px;}
.map-info-title{margin-top: 10px;font-size: 1.2rem}
.map-info-content{margin-bottom: 10px;color: rgba(255,255,255,.7);}
.map-info-google{background-color: transparent;text-align: center;}
.map-gps{z-index: 999;position: absolute;left:50%;bottom:30px;background-color: transparent;box-shadow:0 0 16px rgba(0,0,0,.15);transform: translateX(-50%);}
.map-space{height: min(7vw,120px);}

/*google map*/
.gmnoprint{display: none;}

@media (max-width: 1024px) {
  .dealer{background-image: url(../images/bg-dealer-mobile.jpg)}
  .map-tool{width:calc(100% - 80px)}
}

@media (max-width: 1024px) {
  .map{margin-top: 16px}
  .map-space{height: 5.4vw;}
}

@media (max-width: 768px) {
  .map-space{height: 5vw;}
}

@media (max-width: 640px) {
  .map-tool{top:20px;left: 20px;width:calc(100% - 40px)}
  .map-space{height: 3px;}
}


/*--------------------------------------------------------------*/
/*  Faq
/*--------------------------------------------------------------*/

.faq{background-image: url(../images/bg-faq.jpg)}
.faq-list{margin:34px 0 80px 0;width:100%;padding:0 0 0 18px;}
.faq-list-item{box-sizing: border-box;margin-bottom:20px;width:100%;padding:0;list-style: none;font-size: 1.3rem;transition:.2s;cursor:pointer;}
.faq-list-item:hover{box-shadow: 0 0 20px rgba(0,0,0,.05)}
.faq-list-item a{color: var(--color1);}
.faq-open{}
.faq-open .faq-question{color:var(--color1);font-weight:bold;background-image:url(../images/icon-arrow_hold.png)}
.faq-open .faq-ans{display: block}
.faq-question{margin:5px 0;padding-left: 28px;;background:url(../images/icon-arrow.png) no-repeat left center; font-weight: normal;transition: 0.2s}
.faq-ans{display:none;margin-left: 22px;;margin-bottom: 20px;border-radius:4px;padding:16px 24px;background: rgba(255,255,255,.1);line-height: 2rem;box-shadow: 0 0 20px rgba(0,0,0,.15);font-size: 1.1rem;}

@media (max-width: 1024px) {
  .faq{background-image: url(../images/bg-faq-mobile.jpg)}
  .faq-list{margin-top: 24px;margin-bottom: 50px}
  .faq-list-item{margin-bottom: 10px}
}

@media (max-width: 768px) {
  .faq-list{padding-left: 12px;margin-bottom: 16px;margin-bottom: 48px}
  .faq-list-item{margin-bottom: 6px;}
  .faq-ans {padding:14px 20px;line-height: 1.6em}
}

@media (max-width: 480px) {
  .faq-list-item{font-size: 1.1rem}
  .faq-ans {padding:10px 16px;line-height: 1.6em;font-size: 1rem;}
}


/*--------------------------------------------------------------*/
/*  wallpaper
/*--------------------------------------------------------------*/

.wallpaper-list{display:flex;flex-wrap: wrap;margin:34px -20px 34px -20px;padding: 0;width:calc(100% + 40px);list-style: none;}
.wallpaper-list-item{box-sizing: border-box;margin: 0 20px 40px 20px; width:calc(33.333% - 40px); padding: 0;box-shadow:0 0 16px rgba(0,0,0,.15);transition: .2s}
.wallpaper-list-item:hover{box-shadow: 0 0 25px rgba(0,0,0,.05)}
.wli-pic{width:100%;height:0;padding-top:100%; background:no-repeat center;background-size: cover}
.wli-file{display:flex;flex-wrap: wrap;margin:8px -4px 4px -4px;padding: 0;list-style: none;}
.wli-file-item{box-sizing: border-box;display: block;text-align:center;margin: 0 4px 8px 4px; border-radius:4px; width:calc(50% - 10px); padding: 10px 2px; background-image: linear-gradient(155deg, var(--color1alpha) 35%, var(--color2alpha) 85%); color: #fff;font-size: .9rem;text-decoration: none;text-shadow:0 0 6px rgba(0,0,0,.5); transition: .2s}
.wli-file-item:hover{background-image: linear-gradient(155deg, rgba(228,0,127,1) 35%, rgba(0,168,233,1) 85%); }

@media (max-width: 1024px) {
  .wallpaper-list{margin-top: 24px;margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);}
  .wallpaper-list-item{margin: 0 16px 32px 16px;width:calc(50% - 32px);}
}

@media (max-width: 768px) {
  .wallpaper-list{margin-top: 16px;}
  .wallpaper-list-item{margin: 0 10px 20px 10px;width:calc(50% - 20px);}
}

@media (max-width: 480px) {
  .wallpaper-list-item{margin: 0 16px 16px 16px;width:100%;}
}


/*--------------------------------------------------------------*/
/*  download
/*--------------------------------------------------------------*/

.download{background-image: url(../images/bg-download.jpg)}
.download-list{display:flex;flex-wrap: wrap;margin:34px -5px 54px -5px;padding: 0;width:100%;list-style: none;}
.download-list-item{box-sizing: border-box;margin: 0 5px 10px 5px; border-radius:4px; width:calc(50% - 10px); background-image: linear-gradient(0deg, rgba(255,255,255,.2) 35%, rgba(255,255,255,.3) 85%); transition: .2s}
.download-list-item:hover{background-image: linear-gradient(0deg, rgba(255,255,255,.3) 35%, rgba(255,255,255,.4) 85%);}
.dli-link{box-sizing: border-box;display: block; padding: 13px 26px; color: #fff;font-size: 1rem;text-decoration: none;text-shadow:0 0 6px rgba(0,0,0,.5); transition: .2s}
.dli-link .fa{margin-right: 6px;}

@media (max-width: 1024px) {
  .download{background-image: url(../images/bg-download-mobile.jpg)}
  .download-list{margin-top: 24px;margin-bottom: 34px}
}

@media (max-width: 768px) {
  .download-list{margin-top: 16px}
  .download-list-item{width:100%;}
  .dli-link{padding:10px 20px}
}

@media (max-width: 480px) {
  .download-list-item{padding:10px 12px ;}
  .dli-link{padding:4px 12px}
}


/*--------------------------------------------------------------*/
/*  Module
/*--------------------------------------------------------------*/

/*popup*/
.popup{box-sizing:border-box;width:60%;min-width: 600px;border: 1px solid rgba(255,255,255,.2);border-radius:4px;background:rgba(0,0,0,.7);box-shadow:4px 4px 24px rgba(0,0,0,.3);}
.popup-container{padding:40px 30px;}
.popup-close{z-index: 999;position:absolute;top:10px;right:10px;font-size:1rem;border:none;background: none;color: #fff;cursor: pointer;transition: .2s}
.popup-close:hover{color:var(--color1);}

@media screen and (max-width: 1024px) {
  .popup{width:70%;}
}

@media screen and (max-width: 768px) {
  .popup{width:100%;height:100%;min-width: auto;}
}