@charset "UTF-8";
@import url("./reset.css");


* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}


body {
  height: 100%;
  color: #1c1c1c;
	font-family: Helvetica, Arial, "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;}	

img { border: 0; height: auto;}

a {text-decoration: none;}

a:hover{text-decoration: none;}

.btn{ 
  width: 160px;
  margin: 10px;
  padding: 15px;
  font-size:15px;
  border-radius:4px;
  border:1px solid #5fc7b9;
  background-color: #5fc7b9; 
  color: #fff;
  cursor:pointer;
  display: inline-block;
  text-align: center;  
  vertical-align: middle;
  }

.btn:hover{
  opacity: 0.7;
} 

.btn-line{
  width: 160px;
  margin: 10px;
  padding: 15px;
  font-size:15px;
  border-radius:4px;
  background-color: #fff;
  border:1px solid #5fc7b9;
  color: #5fc7b9;
  cursor:pointer;
  display: inline-block;
  text-align: center;  
  vertical-align: middle;
}

.btn-line:hover{
  opacity: 0.7;
} 


@media (max-width: 450px){
  .btn, .btn-line{ width: 200px;
    margin: 5px;
    border-radius: 30px;
  }
}

/* kv */
.col2{
  width: 100%;
  margin: auto;
  font-size: 0;
  background-image: url("../experience-css/png/bg.png");
  background-size: cover;
}
.col2 img{
  width: 55%;
  vertical-align: middle;
}

.txt{
  display: inline-block;
  vertical-align: middle;
  width: 45%;
  font-size: 40px;
  color: #448e83;
  line-height: 70px;
  padding: 0 20px 0 80px;  
}

.txt h2{
  font-size: 70px;
}

@media (max-width: 1024px){
  .col2 img{
  width: 50%;
  }
  .txt{
    width: 50%;
  }
  .txt h2{
  font-size: 60px;
  }
}


@media (max-width: 701px){
  .col2 img{
    width: 100%;
  }
  .txt {
    width: 100%;
    padding: 100px 10px 20px 10px;
    font-size: 30px;
    text-align: center;
    line-height: 60px;
  }
  .txt h2{
  font-size: 50px;
}
}



/* bg */
.bg{
  background-image: url("../experience-css/svg/line.svg");
  background-repeat: no-repeat;
  background-position: center center;  
  background-size: cover;
}

.bg-2{
  margin: 0 auto;
  text-align: center;
  padding-bottom: 50px;
  background-color: #e1efef;
  background-image: url("../experience-css/svg/line-2.svg");
  background-repeat: no-repeat;
  background-position: right;  
  background-size: ;
}

/* card */
.line{
    content: "";
    width: 300px;
    height: 1px;
    background-color: #ccc;
    text-align: center;
    margin: 5px auto;
}

.card{ 
  text-align:center; 
  margin:0 auto;
  position: relative; 
  z-index: 1;}
.cardList li{ 
  display: inline-block; 
  vertical-align: top; 
  width: 45%; 
  margin-top: 50px;
  margin-right: -0.3em; 
  padding: 4px; 
  box-sizing: border-box;}
.cardList h2{
  font-size: 28px;
  line-height: 40px;
  color: #1C1C1C;
}
.cardList p{ 
  color: #1C1C1C;
  font-size: 16px; 
  line-height: 30px;
  margin: 0px;
}
.cardList p span{
  color: #F8524C;
  font-weight: bold;}
.cardList_brand{ 
  padding: 10px; }

.cardList_brand img{ 
  margin: 0 auto;
  width: auto;
  height: 600px; 
  padding:15px; }

/*平板*/
@media (min-width: 701px){
  .card{ padding: 35px 0 55px; }
  .cardList li{ width: 100%;padding: 10px; }
  .cardList_brand img{ padding:0px; }
}
/*電腦*/
@media (min-width: 1024px){
  .cardList li{  width: 45%;padding: 7px; }
  .cardList_brand img{ padding:0px;}
  .card-1{background-size: 200px;}
}
/*手機*/
@media (max-width: 700px){
  .cardList{  
    text-align: center; 
    padding: 30px 0;}
  .cardList li{ 
    width: 95%; 
    margin-top: 20px; 
    padding: 0px;}
  .cardList li:empty{ display: none; }
  .cardList img{
    width: 100%;
    height: auto;
  }
  .cardList p{
    font-size: 16px; 
    margin: 0px;}
  .cardList p span{
    font-size: 16px;}
  .cardList_brand img{ 
    padding:0px; }
}