a{
  color: #212529;
}
a:hover{
  color: #212529;
}
.contactstyle > .contact-icon > a{
  color: #ffffff;
}
.contactstyle > .contact-icon2 > a{
  color: #ffffff;
}
.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 35rem;
  padding: 15rem 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000000 100%), url("../ups/fore.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.masthead h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  letter-spacing: 0.8rem;
  background:#FFFFFF;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.masthead h2 {
  max-width: 20rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .masthead h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}

@media (min-width: 992px) {
  .masthead {
    height: 100vh;
    padding: 0;
  }
  .masthead h1 {
    line-height: 6.5rem;
    letter-spacing: 0.8rem ;
  }
  .masthead h2 {
    color:#FFFFFF !important;
    max-width: 30rem;
    font-size: 1.25rem;
  }
}
@media screen and (min-width:375px)  {
.masthead {
  padding: 17rem 0;
}
}
@media screen and (max-width:320px)  {
.masthead .container {
  padding:0;
}
.masthead h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0.3rem;
  }
}

@media screen and (min-width:768px)  {
  .masthead {
      padding: 24rem 0;
}
}
.tittleset h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  letter-spacing: 0.8rem;
  color:#FFFFFF;
  background-clip: text;
}
.tittleset h2 {
  max-width: 20rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .tittleset h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}
#tittleset-phone h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  letter-spacing: 0.8rem;
  color:#FFFFFF;
  background-clip: text;
}
#tittleset-phone h2 {
  max-width: 20rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
#tittleset-phone h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}

@media (min-width: 992px) {
  .banner {
    height: 100vh;
    padding: 0;
  }
  .tittleset h1 {
    line-height: 6.5rem;
    letter-spacing: 0.8rem ;
  }
  .tittleset h2 {
    color:#FFFFFF !important;
    max-width: 30rem;
    font-size: 1.25rem;
  }
  #tittleset-phone h1 {
    line-height: 6.5rem;
    letter-spacing: 0.8rem ;
  }
  #tittleset-phone h2 {
    color:#FFFFFF !important;
    max-width: 30rem;
    font-size: 1.25rem;
  }
}

.bgcolor{
  background-color: #F2F2F2;
  transition: background-color 0.3s ease-in-out;
}
.mt14{
  margin-top: 140px;
}
.cardbox{
	width:auto;
	height: 547px;
	display: block;
	position: relative;
	overflow: hidden;
}

.card .cardbox .imgstyle{
height: 100%;
	line-height: 50px;
	transition: .5s;
	position: absolute;
}
.card .cardbox a:hover img{
	transform: scale(1.2,1.2);
	opacity: .8;
}
.card .p-l1 h3{
	line-height: 0;
}
.cardbox2 a .mask{
	position: absolute;
	width: 90%;
	height: 90%;
  margin: 25px 18px 25px 18px;
}
.cardbox2 a:hover .mask {
  border: 3px solid #ffffff;
  z-index: 99;
	opacity: 1;
}
.mask{
	text-align: center;
}
.cardbox3 a .mask button{
	margin: 0;
	z-index: 2;
	align-items: center;
	transform: translateY(-50px);
  transition: all .3s ease-in-out;
}
.cardbox3 a:hover .mask button{
  transform: translateY(550%);
	opacity: 1;
}

.cardboxstyle2{
  width:auto;
  height: 365px;
  display: block;
  position: relative;
  overflow: hidden;
}
.cardbox2style2 a .mask {
  position: absolute;
  width: 90%;
  height: 90%;
  margin: 20px 26px 20px 26px;
}
.cardbox2style2 a:hover .mask {
  border: 3px solid #ffffff;
  z-index: 99;
	opacity: 1;
}
.cardboxstyle2 img{
  width: auto;
  height: auto;
	line-height: 50px;
	transition: .5s;
	position: absolute;
  max-height: 100%;
  max-width: 100%;
}

.cardboxstyle2 a:hover img{
	transform: scale(1.2,1.2);
	opacity: .8;
}

.cardbox3style2 a:hover .mask button {
  transform: translateY(350%);
  opacity: 1;
}
.cardbox3style2 a .mask button {
  margin: 0;
  z-index: 2;
  align-items: center;
  transform: translateY(-50px);
  transition: all .3s ease-in-out;
}

.cardboxstyle3{
  width:auto;
  height: 206px;
  display: block;
  position: relative;
  overflow: hidden;
}
.cardbox2style3 a .mask {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: 10px 20px 10px 20px;
}
.cardbox2style3 a:hover .mask {
  border: 3px solid #ffffff;
  z-index: 99;
	opacity: 1;
}

.card .cardboxstyle3 .imgstyle2{
width:  100%;
	line-height: 50px;
	transition: .5s;
	position: absolute;
}

.card .cardboxstyle3 a:hover img{
	transform: scale(1.2,1.2);
	opacity: .8;
}

.cardbox3style3 a:hover .mask button {
  transform: translateY(180%);
  opacity: 1;
}
.cardbox3style3 a .mask button {
  margin: 0;
  z-index: 2;
  align-items: center;
  transform: translateY(-50px);
  transition: all .3s ease-in-out;
}

.mlr-1{
  margin-left: 10px;
  margin-right: 10px;
}

.oncontact{
  background-color: #242630;
  color: #FFFFFF;
}
h1{
  font-size: 30px;
}
.line{
	border-style: outset;
	border-bottom: #FFFFFF;
}
.copyrightstyle{
  color: #CCCCCC;
  font-size: 24px;
  margin-bottom: 60px;
}
.font60{
  font-size: 60px;
}
.mt6{
  margin-top: 60px;
}
.mb3{
  margin-bottom: 30px;
}
.contact-icon img {
  width: 60px;
}
.contact-icon2 img {
  width: 45px;
}
.contactstyle{
  margin: 0 90px 0 90px;
}
.contactstyle-left img{
  margin: 10px;
}
.contactstyle p{
  margin-top: 15px;
}
.pl5{
  padding-left: 50px;
}
.border-last{
  border-right: solid;
}

/*這裡下麵都是整理的響應*/
@media screen and (min-width:280px)  {
  .cardboxstyle2 {
      height: 170px;
  }
}
@media screen and (max-width:992px)  {
  .contactstyle{
    margin: 0;
  }
}
.mb3{
  margin-bottom: 30px;
}
a:hover{
  text-decoration: none;
}
.alsobox{
  max-width: 2%;
  padding: 0;
  height: 55px;
  background: #000000;
}
.alsostyle{
  padding: 0;
  margin: 1%;
}
.plr15p{
  padding-left: 15px;
  padding-right: 15px;
}
.article2line{
  margin: 0 0 0 50%;
  width: 2px;
  background-color: #666666;
  height: 90%;
}
.p0{
  padding: 0;
}
.article2line2{
  padding: 0 30px 0 15px;
}

.mb6{
  margin-bottom: 50px;
}
.h1title{
  font-size: 40px;
  font-weight: 700;
}
.h2title{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
}
.h3title{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.titlebox{
  border-left: 15px solid #000000;
}
.ml25{
  margin-left: 25px;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  margin-bottom: 30px;
}
.video-container iframe{
  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media (min-width: 576px){
.sm-mg1{
  margin: 0;
}
.mb6{
  margin-bottom: 30px;
}
}
@media (max-width: 576px){
.sm-mg1{
  margin: 0;
}
.mb6{
  margin-bottom: 30px;
}
}
@media (min-width: 768px){
  .mt6{
    margin-top: 60px;
  }
}
.articleright{
  padding: 0;
}
@media (max-width: 576px){
  .articleright{
    padding: 0 15px;
  }
}
.abouttextp{
    padding: 5% 5% 1% 5%;
}
.xiaotitle{
  font-size: 40px;
  font-family: Frontage-outline;
  color: #ffffff;
}
.indextitle{
  font-family: BigCaslon-Medium;
  color: #ffffff;
}
@media (max-width: 768px){
  .xiaotitle{
    font-size: 20px;
}
}
@media screen and (max-width:320px)  {
.tittleset .container {
  padding:0;
}
.tittleset h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0.3rem;
  }
#tittleset-phone .container {
    padding:0;
  }
#tittleset-phone h1 {
      font-size: 2rem;
      line-height: 2.5rem;
      letter-spacing: 0.3rem;
    }
}

@media screen and (min-width:360px)  {
  .pl5{
    padding: 0 10px;
  }
}
@media screen and (min-width:320px)  {
  .pl5{
    padding: 0 10px;
  }
}
@media screen and (max-width:1200px)  {
.cardbox2style2 a .mask {
    position: absolute;
    width: 90%;
    height: 85%;
    margin: 20px 26px 20px 26px;
}
.cardbox3 a:hover .mask button {
    transform: translateY(700%);
}
.cardbox2 a .mask {
    margin: 7% 5%;
  }
.cardbox {
    height: 690px;
  }
.cardboxstyle2 {
    height: 305px;
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(300%);
  }
}
@media screen and (max-width: 992px){
.cardboxstyle2 {
    height: 226px;
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(170%);
}
.cardbox2style2 a .mask {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: 3% 5%;}
.cardbox {
    height: 516px;
  }
  .cardbox3 a:hover .mask button {
    transform: translateY(500%);
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(210%);
}
}
@media screen and (max-width: 767px){
    .cardbox {
    height: 780px;
}
.cardboxstyle2 {
    height: 340px;
}
.cardbox3 a:hover .mask button {
    transform: translateY(800%);
}
.cardboxstyle3 {
    width: auto;
    height: 346px;
  }
  .cardbox3style3 a:hover .mask button {
    transform: translateY(330%);
}
.cardbox2style3 a .mask {
    margin: 3% 5%;
  }
.cardbox2style2 a .mask {
    position: absolute;
    width: 90%;
    height: 90%;
    margin: 3% 5%;
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(300%);
}
}
@media screen and (max-width: 540px){
    .cardboxstyle2 img{
      margin: 0;
    }
  }
  @media screen and (max-width: 441px){
  .cardbox2style2 a .mask {
  height: 90%;
}
.cardbox {
    height: 590px;
}
.cardbox3 a:hover .mask button {
    transform: translateY(580%);
}
.cardbox3style2 a:hover .mask button {
  transform: translateY(250%);
}
.cardboxstyle2 {
    height: 265px;
}
}
  @media screen and (max-width: 375px){
.cardboxstyle2 {
    height: 210px;
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(190%);
}
}

  @media screen and (max-width: 360px){
  .cardbox2style2 a .mask {
  height: 90%;
}
.cardbox3style2 a:hover .mask button {
  transform: translateY(230%);
}
.cardbox {
    height: 500px;
}
.cardbox3 a:hover .mask button {
    transform: translateY(500%);
}
.cardbox3style2 a:hover .mask button {
    transform: translateY(210%);
}
}
  @media screen and (min-width: 320px) and (max-width: 359px)
{
.cardbox2style2 a .mask {
    height: 90%;
  }
  .cardbox {
    height: 450px;
}
  .cardbox3style2 a:hover .mask button {
    transform: translateY(180%);
}
  .cardboxstyle2 {
      height: 205px;
    }
}

  @media screen and (max-width: 280px){
.cardbox3style2 a:hover .mask button {
    transform: translateY(130%);
}
}
  @media screen and (max-width: 576px){
.cardboxstyle2 {
  height: 371px;
}
}
  @media screen and (max-width: 540px){
.cardboxstyle2 {
    height: 340px;
}
.alsobox {
    max-width: 4%;
  }
  .alsostyle {
    padding: 0 15px;
    margin: 2% 0;
}
}
  @media screen and (max-width: 360px){
.cardbox3style3 a:hover .mask button {
    transform: translateY(200%);
}
}
@media screen and (max-width: 441px){
.cardboxstyle2 {
    height: 260px;
}
.cardboxstyle3 {
    height: 260px;
}
.alsobox {
    max-width: 5%;
  }
  .alsostyle {
    padding: 0 15px;
    margin: 3% 0;
}
}
  @media screen and (max-width: 320px){
.cardbox3style3 a:hover .mask button {
    transform: translateY(180%);
}
}
  @media screen and (max-width: 375px){
.cardboxstyle2 {
    height: 237px;
}
.cardboxstyle3 {
    height: 240px;
}
.cardbox3style3 a:hover .mask button {
    transform: translateY(230%);
}
}
  @media screen and (max-width: 414px){
.cardbox3style3 a:hover .mask button {
    transform: translateY(250%);
}
}
  @media screen and (max-width: 280px){
.cardbox {
    height: 390px;
}
.cardbox3 a:hover .mask button {
    transform: translateY(400%);
}
.cardbox2style2 a .mask {
    height: 90%;
}
.cardboxstyle3 {
    height: 170px;
}
.cardbox3style3 a:hover .mask button {
    transform: translateY(150%);
}
}
@media screen and (min-width: 360px) and (max-width: 374px)
{
.cardboxstyle2 {
  height: 225px;
}
.cardboxstyle3 {
    height: 220px;
}
.alsobox {
    max-width: 5%;
  }
  .alsostyle {
    padding: 0 15px;
    margin: 3% 0;
}
}
@media screen and (min-width: 320px) and (max-width: 359px){
.cardboxstyle2 {
    height: 200px;
}
.cardboxstyle3 {
    height: 200px;
}
.alsostyle {
    padding: 0 15px;
    margin: 3% 0;
}
.alsobox {
max-width: 6%;
}
}
@media screen and (min-width: 280px) and (max-width: 319px){
.cardboxstyle2 {
    height: 170px;
}
}
@media screen and (min-width: 1200px){
.cardboxstyle2 {
    width: auto;
    height: 365px;
  }
}

@media screen and (min-width: 500px) and (max-width: 531px){
.cardboxstyle2 {
    height: 320px;
}
}
@media screen and (max-width: 280px){
.contactstyle .pl5{
padding: 10px;
}
.contact-icon{
  padding: 0;
}
.contact-icon2{
  padding: 0;
}
.alsostyle {
    padding: 0 10px;
    margin: 4% 0;
}
.alsobox {
  max-width:none;
}
}


@media screen and (min-width: 576px) and (max-width: 991px){
  .article2line2{
    margin-bottom: 60px;
  }
  .article2line {
    height: 100%;
}
}
@media screen and (min-width: 280px) and (max-width: 365px){
  .h1title{
      font-size: 25px;
  }
  .h2title {
        font-size: 20px;
  }
}
@media screen and (min-width: 280px) and (max-width: 767px){
  .mb10-1{
    margin-bottom: 10%;
  }
}
@media screen and (min-width: 528px)and (max-width: 531px){
   .cardboxstyle2 img{
     width: 100%;
   }
  .cardboxstyle3 {
    height: 340px;
}
}
.dis-fx{
  display: flex;
}
.name-style{
  padding: 0px 5%;
  font-size: 22px;
}
@media screen and (min-width: 279px)and (max-width: 281px){
.name-style{
    font-size: 20px;
  }
}

.biglogo2 {
position: fixed; /* want to see this */
display:block;
margin-left:auto;
margin-right:auto;
opacity:1;
}
.fast {
  -moz-animation-duration: 0.75s;
  -moz-animation-delay: 0.15s;
  -webkit-animation-duration: 0.75s;
  -webkit-animation-delay: 0.15s;
}
.slow {
  -moz-animation-duration: 1.25s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-duration: 1.25s;
  -webkit-animation-delay: 0.3s;
}
.reallyslow {
    -moz-animation-duration: 1.5s;
    -moz-animation-delay: 0.45s;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-delay: 0.45s;
}
.card-text-flow{
  display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-title-flow{
  display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-title-hight{
  min-height:1.2em;
}
.card-text-hight{
  min-height:4.5em;
}
.title-sm-hight{
  min-height: 1.4em;
}
@keyframes fade-in {
0% {opacity: 0;}/*初始狀態 透明度為0*/

40% {opacity: 0;}/*過渡狀態 透明度為0*/

100% {opacity: 1;}/*結束狀態 透明度為1*/
}
@-webkit-keyframes fade-in {/*針對webkit內核*/

0% {opacity: 0;}

40% {opacity: 0;}

100% {opacity: 1;}

}
.wrapper {
  animation: fade-in;/*動畫名稱*/
  animation-duration: 1.5s;/*動畫持續時間*/
  -webkit-animation:fade-in 1.5s;/*針對webkit內核*/
}

.wrapperone {
  animation: fade-in;/*動畫名稱*/
  animation-duration: 1.7s;/*動畫持續時間*/
  animation-delay: 0.15s;
  -webkit-animation:fade-in 1.7s;/*針對webkit內核*/
}

.wrappertwo {
  animation: fade-in;/*動畫名稱*/
  animation-duration: 1.9s;/*動畫持續時間*/
    animation-delay: 0.15s;
  -webkit-animation:fade-in 1.9s;/*針對webkit內核*/
}
.alsoreadcard{
  overflow: hidden;;
  height: 169px;
  display: flex;
align-items: center;
}
.alsoreadcard img{
align-items: center;
}

.alsoreadcardson{
  overflow: hidden;;
  height: 125px;
  display: flex;
align-items: center;
}
.alsoreadcardson img{
align-items: center;
}
@media screen and (min-width: 992px) and (max-width: 1999px){
.alsoreadcard{
    height: 139px;
}
.alsoreadcardson{
    height: 105px;
}
}
@media screen and (min-width: 1200px){
  .alsoreadcard{
    height: 169px;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px){
  .alsoreadcard{
    height: 219px;
  }
  .alsoreadcardson{
      height: 359px;
  }
}
@media screen and (min-width: 576px) and (max-width: 767px){
  .alsoreadcard{
    height: 159px;
  }
  .alsoreadcardson{
      height: 299px;
  }
}
@media screen and (min-width: 539px) and (max-width: 575px){
  .alsoreadcard{
    height: 339px;
  }
  .alsoreadcardson{
      height: 360px;
  }
}
@media screen and (min-width: 527px) and (max-width: 538px){
  .alsoreadcard{
    height: 330px;
  }
  .alsoreadcardson{
      height: 330px;
  }
}
@media screen and (min-width: 410px) and (max-width: 527px){
  .alsoreadcard{
    height: 253px;
  }
  .alsoreadcardson{
      height: 253px;
  }
}
@media screen and (min-width: 411px) and (max-width: 414px){
  .alsoreadcard{
    height: 255px;
  }
  .alsoreadcardson{
      height: 255px;
  }
}
@media screen and (min-width: 360px) and (max-width: 410px){
  .alsoreadcard{
    height: 229px;
  }
  .alsoreadcardson{
      height: 229px;
  }
}
@media screen and (min-width: 320px) and (max-width: 360px){
  .alsoreadcard{
    height: 219px;
  }
  .alsoreadcardson{
      height: 219px;
  }
}
@media screen and (min-width: 280px) and (max-width: 320px){
  .alsoreadcardson{
      height: 192px;
  }
  .alsoreadcard{
    height: 192px;
  }
}
@media screen and (min-width: 200px) and (max-width: 280px){
  .alsoreadcardson{
      height: 165px;
  }
}
.banner{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items:center;
}
.banner video{
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  object-fit: cover;
}
.tittleset2{
  position: absolute;
  z-index: 1000;
}
.tittleset{
    margin-top: 10%;
}
#tittleset-phone{
    margin-top: 20%;
}
@media screen and (min-width: 280px) and (max-width: 991px){
.banner {
  margin-top: 0%;
  height: 500px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px){
.tittleset {
    margin-top: 25%;
  }
  #tittleset-phone{
    margin-top: -15%
  }
  .banner{
    margin-top: -27%;
  }
}
@media screen and (min-width: 415px) and (max-width: 769px){
.tittleset {
    margin-top: 10%;
  }
  #tittleset-phone{
    margin-top: 1%;
padding-bottom: 5%;
  }
}
@media screen and (min-width: 400px) and (max-width: 414px){
.tittleset {
    margin-top: 60%;
  }
#tittleset-phone {
      margin-top: 0%;
    }
}
@media screen and (min-width: 375px) and (max-width: 399px){
.tittleset {
    margin-top: 60%;
  }
#tittleset-phone {
      margin-top: -10%;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px){
.tittleset {
    margin-top: 50%;
  }
#tittleset-phone {
      margin-top: -15%;
    }
}
@media screen and (min-width: 320px) and (max-width: 359px){
.tittleset {
    margin-top: 60%;
  }
#tittleset-phone {
      margin-top: -45%;
    }
}
@media screen and (min-width: 280px) and (max-width: 319px){
.tittleset {
    margin-top: 70%;
  }
#tittleset-phone {
      margin-top: -45%;
    }
.banner{
  margin-top: -45%;
}
}
.op1{
  opacity: 1!important;
}
.indexbgset{
  background: #000000;
}
.indexcolorset{
  color: #ffffff;
}
.hvr-underline-from-left:before{
  background:  #000000;
}
#voiceid{
  margin-top: -2px;
}
@media screen and (min-width: 415px) and (max-width: 540px){
.banner {
  margin-top: -30%;
}
#tittleset-phone {
    margin-top: -25%;
}
  .banner{
    height: 330px;
    margin-top: 0;
  }
  .banner2 {
    margin-top: 15%;
    height: 300px;
}
}
@media screen and (min-width: 281px) and (max-width: 320px){
  .banner2 {
    height: 210px;
    margin-top: 25%;
  }
}
@media screen and (min-width: 411px) and (max-width: 414px){
.banner{
    margin-top: -5%;
    height: 410px;
  }
.banner2 {
    margin-top: 20%;
    height: 270px;
}
.banner2 .tittleset2 .tittleset3 h1  {
    font-size: 2rem;
  }
}
@media screen and (min-width: 360px) and (max-width: 400px){
  .banner{
      margin-top: -5%;
      height: 410px;
    }
    .banner2{
      margin-top: 22%;
      height: 240px;
    }
    .banner2 .tittleset2 .tittleset3 h1 {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
}
@media screen and (min-width: 603px) and (max-width: 745px){
  .banner2{
    margin-top: 0;
    height: 400px;
  }
}
@media screen and (min-width: 541px) and (max-width: 603px){
  .banner2{
    margin-top: 0;
    height: 360px;
  }
}
.tittleset3 h1 {
  font-size: 2.5rem;
  line-height: 3.5rem;
  letter-spacing: 0.8rem;
  color:#FFFFFF;
  background-clip: text;
}
@media (min-width: 768px) {
  .tittleset3 h1 {
    font-size: 4rem;
    line-height: 5rem;
  }
}
@media (min-width: 992px) {
  .tittleset3 h1 {
    line-height: 6.5rem;
    letter-spacing: 0.8rem ;
  }
}
@media screen and (max-width:320px)  {
.tittleset3 .container {
  padding:0;
}
.tittleset3 h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: 0.3rem;
  }
.banner2 .tittleset2 .tittleset3 h1  {
    font-size: 1rem;
    line-height: 2rem;
  }
}
@media screen and (min-width: 541px) and (max-width: 3000px){
  #tittleset-phone{
    display:none;
  }
  #tittleset-notphone{
    display:block;
  }
  #link img{
    margin-bottom: 5%;
  }
}
@media screen and (min-width: 279px) and (max-width: 991px){
  #tittleset-phone{
    display:block;
  }
  #tittleset-notphone{
    display:none;
  }
  #link2 img{
    margin-bottom: 5%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px){
  .tittleset {
    margin-top: 10%;
}
.banner {
    margin-top: 0%;
}
  #tittleset-notphone{
    margin-bottom: 10%;
  }
}

@media screen and (min-width: 769px) and (max-width: 991px){
#tittleset-phone {
    margin-top: 5%;
    padding-bottom: 5%;
  }
  .banner {
    height: 500px;
    margin-top: -5%;
}
}

.ytp-watermark {
  display: none!important;
}
.yt-uix-sessionlink{
  display: none!important;
}
@media screen and (max-width:280px)  {
  #tittleset-phone {
      margin-top: -55%;
  }
  .banner {
    height:530px ;
}
.banner2 {
  height:180px ;
  margin-top: 27%;
}
.banner2 tittleset2 tittleset3 a{
  font-size: 10px;
  margin-top: -15%;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px){
  .banner {
    margin-top: -30%;
}
#tittleset-phone {
    margin-top: -20%;
  }
  .banner2 {
      margin-top: 0;
  }
}
.clear-btn{
  color: #fff;
background-color: #343a40;
border: 0;
border-left: solid;
border-radius: 0;
margin: 5px 0;
}
.clear-btn:hover {
    color: #fff;
    background-color: #343a40;
}
.clear-page{
  text-decoration: none;
  color: #000000;
  background-color: #FFFFFF;
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  border: 1px solid #000000;
}
.clear-page:hover {
  text-decoration: none;
  border-color: #000000;
  color: #000000;
  background-color: #FFFFFF;
}
@media screen and (min-width:992px)  {
  .banner{
    height: 100%
  }
}

@media screen and (min-width: 280px) and (max-width: 414px){
.banner2 .tittleset2 .tittleset3 h1 {
    font-size: 1.5rem;
    line-height: 2.5rem;
  }
}
.ml10{
  margin-left: 10px;
}