/*CSS Information
File name: flash-list.css,flash-list.scss
Description: 隨身碟著陸頁設計
Editors: Kevin Huang
Last Editors: Kevin Huang
Date: 2012/08/28
Last Date: 2012/11/16
Path: syf/promote/css/flash-list.css
*/
img {
  border: 0;
}

h2 {
  margin: 0 auto;
  display: inline;
}

h3 {
  margin: 0 auto;
  display: inline;
  font-size: 14px;
  text-decoration: underline;
}

body {
  margin: 0 auto;
  width:100%;
  height: auto;
  font-family: Verdana, Geneva, sans-serif, "微軟正黑體";
  font-size: 14px;
}

/*--------------------Footer--------------------*/
.footer {
  float: left;
  margin-top: 10px;
  width: 960px;
  height:200px;;
  color: #636363;
  font-size: 12px;
  background-color: #f0efef;
}
.footer a {
  color: #636363;
  text-decoration: none;
}
.footer a:hover {
  color: #636363;
  text-decoration: underline;
}

.link {
  float: left;
  margin: 25px 0 0 60px;
  padding-left: 50px;
  width: 800px;
}

#container-outter .info {
  float: left;
  margin: 10px 0 0 60px;
  padding-left: 50px;
  width: 700px;
  height: 80px;
  line-height: 1.8;
}

#container-outter .logo {
  float: left;
  margin: 20px 0 0 10px;
  height: 70px;
}

.w3c {
  float: left;
  margin: 10px 0 0 60px;
  padding-left: 50px;
  width: 830px;
  height: 31px;
}

/*--------------------Footer end--------------------*/
.counter{
  display: none;
}
.spanlist {
  color: #5c5858;
  font-size: 13px;
}

/*------------------隨身碟燒--------------------*/
.flash-burn {  
  width: 100%;
  height: auto;
  margin-top: 10px;
}

/*------------------項目標題--------------------*/
.list-titbox {
  float: left;
  width: 900px;
  height: 33px;
  margin: 0px 0 0 35px;
}

.list-tit {
  float: left;
  width: 660px;
  height: 28px;
  margin-left: 10px;
  padding-left: 20px;
  background: url(../images/flash/tit_bg.gif) 5px 5px no-repeat;
}

.morebox {
  float: right;
  width: 205px;
  height: 33px;
}

.morebtn {
  float: left;
  width: 151px;
  height: 33px;
}

.moretop {
  float: left;
  width: 44px;
  padding: 7px 0 0 10px;
  height: 26px;
}

.explain {
  /*項目闡述*/
  float: left;
  width: 823px;
  height: auto !important;
  height: 20px;
  min-height: 20px;
  margin: 10px 0 0 70px;
  font-size: 13px;
}

.list-explain {  
  width: 100%;
  height: auto !important;  
  min-height: 300px;display: flex;flex-wrap: wrap;justify-content: center;
}

.explain-tit {
  /*列表說明標題*/
  float: left;
  width: 822px;
  height: 39px;
  margin: 10px 0 0 10px;
  background: url(../images/flash/flash-bg04.gif) no-repeat;
}

.eptit01 {
  float: left;
  margin: 10px 0 0 33px;
}

.eptit02 {
  float: left;
  margin: 10px 0 0 97px;
}

.eptit03 {
  float: left;
  margin: 10px 0 0 170px;
}

.eptit04 {
  float: left;
  margin: 10px 0 0 205px;
}

/*---------------列表說明內容-------------------*/
.explain-cont {
  float: left;
  width: 819px;
  height: auto !important;
  height: 50px;
  min-height: 50px;
  margin-left: 10px;
  border: 1px solid #d9d9d9;
  padding-bottom: 10px;
}

.contbar {
  float: left;
  width: 819px;
  height: auto !important;
  height: 50px;
  min-height: 50px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.epcont01 {
  float: left;
  margin: 10px 0 0 25px;
}

.epcont01t {
  float: left;
  margin: 10px 0 0 15px;
}

.epcont02 {
  float: left;
  width: 170px;
  margin: 10px 0 0 25px;
}

.epcont02t {
  float: left;
  width: 170px;
  margin: 10px 0 0 19px;
}

.epcont03 {
  float: left;
  width: 250px;
  margin: 10px 0 0 25px;
}

.epcont04 {
  float: left;
  width: 220px;
  margin: 10px 0 0 25px;
}

/*----------------隨身碟Logo印刷----------------*/
.flash-logo {  
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.logobox {
  float: left;
  width: 425px;
  height: 110px;
  margin-top: 15px;
}

.logoimg {
  float: left;
  width: 125px;
  height: 110px;
  margin: 0 10px 0 10px;
}

.logotit {
  float: left;
  width: 280px;
  height: 30px;
  font-size: 18px;
}

.logotxt {
  float: left;
  width: 280px;
  height: 80px;
  line-height: 1.6;
}

/*------------------隨身碟配件------------------*/
.flash-package { 
  width: 100%;
  height: auto;
  margin-top: 24px;
}

.explain-tit2 {
  /*列表說明標題*/
  float: left;
  width: 822px;
  height: 39px;
  margin: 10px 0 0 10px;
  background: url(../images/flash/flash-bg05.gif) no-repeat;
}

.eptit-p01 {
  float: left;
  margin: 10px 0 0 60px;
}

.eptit-p02 {
  float: left;
  margin: 10px 0 0 370px;
}

.epcontp01 {
  float: left;
  width: 100px;
  margin: 13px 0 0 20px;
  text-align: center;
}

.epcontp02 {
  float: left;
  width: 370px;
  margin: 13px 0 0 150px;
  text-align: center;
}

/*-----------------隨身碟包裝-------------------*/
.flash-fitting {  
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.explain-tit2 {
  /*列表說明標題*/
  float: left;
  width: 822px;
  height: 39px;
  margin: 10px 0 0 10px;
  background: url(../images/flash/flash-bg05.gif) no-repeat;
}

.eptit-p01 {
  float: left;
  margin: 10px 0 0 60px;
}

.eptit-p02 {
  float: left;
  margin: 10px 0 0 370px;
}

.epcontp01 {
  float: left;
  width: 100px;
  margin: 13px 0 0 20px;
  text-align: center;
}

.epcontp02 {
  float: left;
  width: 370px;
  margin: 13px 0 0 150px;
  text-align: center;
}

/*--------------隨身碟配件包裝圖示--------------*/
.imglist {
  float: left;
  width: 819px;
  margin: 35px 0 0 10px;
}

.imgbox {
  float: left;
  width: 130px;
  height: 157px;
  margin: 0 17px 20px 16px;
  text-align: center;
}
.imgbox .img01 {
  height: 132px;
}
.imgbox .imgtxt {
  height: 25px;
  font-size: 15px;
}
@media  only screen and (max-width: 960px){
    #container{overflow: hidden;}
    .flash-header{display: none;}
    .menu{width: 100%; height: auto;}
    .menubox{width:100%; height: auto; box-sizing: border-box; margin: 0; display: flex; justify-content: space-around; flex-wrap: wrap;}
    .menusyf, .menuflash, .menuauto, .menulogo, .menufit, .menupack{margin: 0; width: calc(100%/6) !important; height: 47px; min-width: 0;}
    .menubox img{width: 100%; height: 100%;}
    .measure{width: 100%;}
    .measure .maintit{width: 100%; box-sizing: border-box; margin: 20px 0 0; height: auto;}
    .measure .mealist{width: 100%; margin:8px 0; height: auto;}
    .measure .mealist:before,.measure .mealist:after{clear: both; content: ""; display: block;}
    .chart{width: 100%; height: auto;}
    .measure-img{width: 100%; margin: auto; height: auto;}
    .menubox:before,.menubox:after{
            clear: both; content: "";display: block;
    }
    .list-tit{margin:12px 0 0; box-sizing: border-box; width: 100%; height: auto;}
    .morebox{display: none;}
    .list-titbox{margin: 0; width: 100%; float: none; height: auto;}
    .flash-burn{width: 100%;}
    .explain{width: 100%; margin: 12px 0; float: none; display: block;}
    .flash-logo{margin: 0; width: 100%; float: none; height: auto;}
    .flash-logo:before,.flash-logo:after{clear: both; content: "";display: block;}
    .list-explain{margin: 0; width: 100%; float: none; height: auto;}
    .flash-package{margin: 0; width: 100%; float: none; height: auto;}
    .flash-package:before,.flash-package:after{clear: both; content: "";display: block;}
    .flash-package .epcontp01,.epcontp02{width: 20%; margin: 0;}
    .imglist{margin: 0; width: 100%; float: none; height: auto;}
    .flash-fitting{margin: 0; width: 100%; float: none; height: auto;}
    .flash-fitting:before,.flash-fitting:after{clear: both; content: "";display: block;}
    .flash-fitting .epcontp01,.flash-package .epcontp02{margin: 0;}
    .menusyf, .menuflash, .menuauto, .menulogo, .menufit, .menupack{height: 67px; width: calc(100%/3) !important;}
    .shell,.cape,.print{width: 100%; margin:0; height: auto; padding:0 8px; box-sizing: border-box; text-align: center; margin-bottom: 10px}
    .shelllist,.capelist,.printlist{width: 100%; margin: 0; display: flex; justify-content: center; margin: 3px 0;}
    .measure .maintit,.typetit{background: none; margin-bottom: 8px}
    .burn,.package,.fitting{margin: 0; width:50%; height: auto;}.fitlist{margin: 10px 0 0 10px; width: auto;}
    .mea-imgbox{width: calc(100%/3)}
    .list-explain{height: auto; }
    .explain-tit,.explain-cont{float: none; margin: 0; width: 100%; height: auto;background: #e4e4e4; padding: 0;}
    .explain-tit{display: none;}
    .epcont01,.epcont01t{width: 100%; padding:8px 18px; box-sizing: border-box; margin: 0; background: #fff}
    .epcont01t br{display: none;}
    .epcont02,.epcont03,.epcont04,.epcont02t{width: 100%;margin: 0; border-bottom: 1.5px solid #fff; padding: 8px; box-sizing: border-box;}   
    
    .explain-tit:before,.explain-tit:after,.explain-cont:before,.explain-cont:after{clear: both;content: "";display: block;}
    .contbar{width: 100%; display: flex; justify-content:center; align-items: center; border-bottom: 1px solid #d4d1d1; float: none; flex-wrap: wrap;margin: 0;}    
    .list-titbox:before,.list-titbox:after{clear: both; content: "";display: block;}
    .explain-tit2{width: 100%; margin: 0; float: none; text-align: center; display: flex; justify-content: center; align-items: center; background: none;border:1px solid #ccc; border-bottom: 3px solid red;}
    .eptit-p01{width: 20%; margin: 0;}
    .eptit-p02{width: 80%; margin: 0;}
    .list-tit{float: none;}
    .flash-package .contbar>div:nth-child(1){width: 20%; text-align: center}
    .flash-package .contbar>div:nth-child(2){width: 80%;}
    .flash-fitting .contbar>div:nth-child(1){width: 20%; text-align: center}
    .flash-fitting  .contbar>div:nth-child(2){width: 80%;}
    .logobox{width: 50%;}.logoimg{width: 125px; margin: 0;}.logotit,.logotxt{width: calc(100% - 125px); float: right}
    .imgbox{margin: 0 0 12px; width: 20%;}
}
@media  only screen and (max-width: 667px){
    .imgbox{width: 25%;}
    .logobox{width: 100%; padding-left: 8px; box-sizing: border-box;}
}
@media  only screen and (max-width: 480px){
    .menusyf, .menuflash, .menuauto, .menulogo, .menufit, .menupack{height: 47px;}
    .burn,.package,.fitting{margin: 0; width:100%;}
    .burnlist,.packlist,.fitlist{margin-top: 0}
    .measure .maintit, .typetit{margin: 5px 0}
    .imgbox{width: 33.33333%;}
}
@media  only screen and (max-width: 350px){
    .imgbox{width: 50%;}
}