@charset "utf-8";
/* CSS Document */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
	padding: 0;
	margin: 0;
}

fieldset {
	border: 0;
}
ul {
	list-style: none;
	clear: both;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, table {
	display: block;
}

a {
	text-decoration: none;
	cursor: pointer;
	outline: none;
}
.clear {
	clear : both;
}
.display{
	display:none;	
}

img {
	vertical-align: middle;
	border: 0;
	text-align: center;
	height: auto;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
img, fieldset {
	border: 0 none;
}
ul, ol, li {
	list-style: none;
}
em, address {
	font-style: normal;
}
table {
	border-collapse: collapse;
}
em, i {
	font-style: normal;
}
strong, b {
	font-weight: normal;
}
input, img {
	vertical-align: middle;
}
input {
	outline: none;
	border: none;
  -webkit-appearance:none;/*去掉IOS預設樣式*/
  border-radius: none;
}

*{
	-webkit-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	box-sizing: border-box;	
}

body {
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "微軟正黑體 Light", "itc-avant-garde-gothic-lt-bold",'Helvetica Neue', 'Open Sans', sans-serif ,"Adobe 繁黑體 Std B";;
	font-size: 1rem;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background-color: #eff9ff;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
.wrapper {
	width: 100%;
	min-height: 700px;
	position: relative;
	overflow: hidden;
}
.container {
	width: 1200px;
  margin: 0 auto;
  position: relative;
}
section , footer{
  container-type: inline-size;/*和clamp一起*/
}

a
{
  --min-size: 14;
  --max-size: 22;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((100cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}

a:hover
{
  --min-size: 16;
  --max-size: 24;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((100cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

.header {
	width: 100%;
  height: 900px;
	position: relative;
	padding: 0;
	margin: 0 auto;
	z-index: 999;
  background-image: url("../images/kardsweb-banner.png");
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.Logo {
	width: 363px;
  height: 86px;
	position: relative;
	padding: 0;
	margin: 20% auto 0;
  background-image: url("../images/h_01.png");
  background-repeat: no-repeat;
  animation: 1s fadeInDown 0.5s forwards;
  opacity: 0;
}
.Logo:hover {
	width: 363px;
  height: 86px;
	position: relative;
	padding: 0;
	margin: 20% auto 0;
  background-image: url("../images/h_01.png");
  background-repeat: no-repeat;
  animation: 0.5s fadeIn 0.2s infinite;
  opacity: 0;
}


.HeaderTitle{
	width: 449px;
  height: 39px;
	position: relative;
	padding: 0;
	margin: 8% auto 0;
  background-image: url("../images/h_02.png");
  background-repeat: no-repeat;
  animation: 1s fadeInRight 0.8s forwards;
  opacity: 0;
}
.header p{
	width: 50%;
  height: 30px;
	position: relative;
	padding: 0;
	margin: 2% auto 0;
	color: #fff;
	font-size: 24px;
	line-height: 30px;
  text-align: center;
  animation: 1s fadeInRight 1s forwards;
  opacity: 0;
}



@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
.MainKards {
	width: 100%;
	display: block;
  position: relative;
  margin: 5% auto;
}

.MainKards ul {
	width: 100%;
	display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.MainKards ul li{
	width: 26%;
  margin: 3%;
}
.MainKards ul li img{
	width: 100%;
}

.MainKards ul li:hover{
	width: 30%;
  margin: 3%;
}



/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*-----footer----*/
.Footer {
	width: 100%;
	min-height: 100px;
	text-align: center;
	background-color: #19191c;
	position: relative;
}
.Footer .FooterBox {
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex-direction: row;
}
.Footer .FooterBox .FooterBigLogo {
  width: 40%;
  margin: 2% 0;
  padding: 0 2%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-right: thin solid #B8B8B8;
}
.Footer .FooterBox .FooterBigLogo img {
	width: 22%;
	display: block;
}

.Footer .FooterBox .FooterBigLogo p{
	color: #a1a1a1;
	font-size: 12px;
	line-height: 30px;
	position: relative;
}

.Footer .FooterBox .FooterAbout {
	width: 60%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
  padding: 0 2%;
  text-align: left;
}
.Footer .FooterBox .FooterAbout p {
	color: #fff;
	font-size: 14px;
	line-height: 30px;
  font-weight: bold;
	position: relative;
}
.Footer .FooterBox .FooterAbout p a {
	color: #fff;
	font-size: 14px;
	line-height: 30px;
  font-weight: bold;
	position: relative;
}
.Footer .FooterBox .FooterAbout p a:nth-child(1) {
  padding: 0 2% 0 0;
}

.Footer .FooterBox .FooterAbout p a:hover {
	color: #3e87b8;
	font-size: 14px;
	line-height: 30px;
  font-weight: bold;
	position: relative;
}

.Footer .FooterBox .FooterAbout p:nth-child(2) {
	color: #a1a1a1;
	font-size: 12px;
	line-height: 30px;
	position: relative;
}



/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/