/* kanit-600 - latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/kanit-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kanit-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kanit-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kanit-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kanit-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kanit-v12-latin-600.svg#Kanit') format('svg'); /* Legacy iOS */
}
/* kanit-700 - latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/kanit-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kanit-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kanit-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kanit-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kanit-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kanit-v12-latin-700.svg#Kanit') format('svg'); /* Legacy iOS */
}
/* noto-sans-500 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-v27-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-v27-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v27-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v27-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v27-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v27-latin-500.svg#NotoSans') format('svg'); /* Legacy iOS */
}
/* noto-sans-700 - latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-v27-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-v27-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-v27-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-v27-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-v27-latin-700.svg#NotoSans') format('svg'); /* Legacy iOS */
}
/* noto-sans-tc-500 - chinese-traditional */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-tc-v26-chinese-traditional-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-tc-v26-chinese-traditional-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-500.svg#NotoSansTC') format('svg'); /* Legacy iOS */
}
/* noto-sans-tc-700 - chinese-traditional */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-tc-v26-chinese-traditional-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-tc-v26-chinese-traditional-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-tc-v26-chinese-traditional-700.svg#NotoSansTC') format('svg'); /* Legacy iOS */
}
/* noto-sans-sc-500 - chinese-simplified */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-sc-v26-chinese-simplified-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-sc-v26-chinese-simplified-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-500.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}
/* noto-sans-sc-700 - chinese-simplified */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-sc-v26-chinese-simplified-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-sc-v26-chinese-simplified-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-sc-v26-chinese-simplified-700.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}


#consoleText{position:fixed;left:0;top:0;z-index:999;background:#fff;width:100px;height:20px;}

* {margin:0;padding:0;max-height:999999px;}

body {
	color:#464646;text-align:center;margin:0 auto;padding:0;
	line-height:1.5;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	font-family: 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif;  font-weight:normal;
}

h1, h2, h3, h4, h5, h6, address {font-size:1em; font-weight:normal; font-style:normal; color:#000;margin:0;padding:0;line-height:1;}
li { list-style-type:none; }
a { color:#333;cursor:pointer; text-decoration: none; }
a img { border:none; }
a:hover { border-style:none; }
a:link { border-style:none; }
a:link img { border-style:none; }
p,dl,dt,dd,ul,ol,li,table{ margin:0; padding:0; }
table { border-collapse:collapse; }
img { border:0; vertical-align:bottom; }

.att {padding-left: 1em;text-indent: -1em;}
.yellow{color:#fdff54;}
.hide{ display:none;}
.large{ font-size:larger;}
.small{ font-size:smaller; }
.alt {position:absolute;width:0;height:0;overflow:hidden;}


/***********************************************/
/*COMMON*/
/***********************************************/
html,body { width:100%; height:100%; }
body {position:relative;background:#fff;}

.wrapper {position:relative;width:100%; height: auto; padding-top: 44px;}

section{position:relative;width:100%; margin: 0; padding: 2em 0 ;}
section .wrap{ position:relative; margin: 0 auto; width: 92%; height: auto; max-width:1000px;}

.spOnly{ display:none;} 

h2{ position:relative; font-weight: 700; font-size:3.8em; margin: 0 auto 0.8em auto;letter-spacing: 3px;
	font-family: 'Kanit', 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif; }

h3{ font-weight: 700; font-size:1.6em; }

table{ border-collapse: separate; border-spacing: 5px 10px; width: 100%; line-height: 1.2em;  }
th,td{ padding:5px 1em;}
th{ background:#fdd000; color: #000000;} td{ background: #ffffff;}
table a{ text-decoration:underline;}
.ip-data td{ text-align: left; background: #ededed; }
.ip-data table{ width: auto; max-width: 100%; margin: 0 auto;}

.dot {
  position: absolute;
  background-image: 
    radial-gradient(rgb(8, 0, 0) 11.2%, transparent 15.2%);
  background-position: center center;
  background-size: 16px 16px;
  background-color: rgba(255, 255, 255,0);
} 
.yellow-bg{
background: #fdd000; /* Old browsers */
background: -moz-linear-gradient(top, #f7d809 0%, #f4c800 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f7d809 0%,#f4c800 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f7d809 0%,#f4c800 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7d809', endColorstr='#f4c800',GradientType=0 ); /* IE6-9 */}

.flex{ display:flex; justify-content:center;align-items:center; flex-direction: row; flex-wrap: wrap;}
/***********************************************/
/*BUTTON*/
/***********************************************/
.button{ position:relative; margin: 0px auto; width:64vw; max-width:280px; height:14vw;max-height: 68px; background:#014099; color: #fff; font-weight: 700; font-size: 1.2em; display: flex;justify-content:space-around;align-items:center; border: none; border-radius: 50px;
  transition: all 0.3s ease; outline: none;cursor: pointer;}

.button:after{
  content: "";
  	position: absolute; top: 50%; right: 6%;
	width:  0.5em;
	height:  0.5em;
	background: transparent;
	border-top: 3px solid white;
	border-right: 3px solid white;
	box-shadow: 0 0 0 lightgray;
	transition: all 0.3s ease;
	transform: translate3d(0,-50%,0) rotate(45deg);}

.button:hover{ background:#1559b9;}
.button:hover:after { right: 3%;}

.backtotop{ position:relative; margin: 0px auto; display: block; width:calc(64vw - 8px); max-width:272px; height:calc(14vw - 8px); max-height: 60px; background:#fff; 
border:3px solid #014099; border-radius: 50px;}

.backbutton{ position:relative; margin: 0px auto;  width:100%;  height:calc(100% - 0.4em); padding-top: 0.4em; background:#fff; color:#014099; font-weight: 700; font-size: 1.2em; display: flex;justify-content:center;align-items:center;  flex-direction: column;
border:3px solid #014099; border-radius: 50px;transition: all 0.3s ease; outline: none;cursor: pointer; }
.mt{margin-top: 1.5em;}

a.backbutton:before{
  content: "";
  	position: absolute; top:0.8em;
	width:  0.5em;
	height:  0.5em;
	background: transparent;
	border-top: 3px solid #014099;
	border-right: 3px solid #014099;
	box-shadow: 0 0 0 lightgray;
	transition: all 0.3s ease;
	transform: translate3d(0,-50%,0) rotate(-45deg);}

a.backbutton:hover{ background:#96c1fd;}
a.backbutton:hover:before {top:0.5em;}

@media screen and (min-width:0px) and (max-width:299px) {
a.backbutton:before{ top:8px;}

}
@media screen and (min-width:300px) and (max-width:768px) {
a.backbutton:before{ top:11px;}
a.backbutton:hover:before {top:8px;}

}

/***********************************************/
/*TOP PAGE*/
/***********************************************/
.mainvisual{position:relative; width:100%; height:calc(100vh - 60px); padding:0;
	background:url(../img/mainvisual.jpg?v=20250513) center center no-repeat;background-size: cover;
	display: flex;justify-content:space-around;align-items:center;
	color: #fff; font-size: 5.4vmin; letter-spacing: 2px;
	font-family: serif;font-weight:700;
	 }

.mainvisual img{ width:98%; max-width:900px; margin: 0 auto;filter: drop-shadow( 0px 0px 20px rgba(32, 32, 32, 1));}

#about{ border-top:solid 16px #ffdb00; padding-top: 44px;}

#about p{ margin:0 auto 20px auto; padding: 0 1em; max-width: 1000px;}
#about p:last-of-type{ margin-bottom:3em;}

#works{ overflow:hidden;padding-top: 44px;}
#works .block{ position:relative; width: 100%; margin-bottom:2em;}
#works .block:last-of-type{ margin-bottom:1em;}
#works .box{ position:relative;  background: #fff;  display: flex;justify-content:space-around;align-items:center; flex-direction:column; align-content: space-between;}

#works p{ padding:20px 10px;}
#works .img img{ width:100%;}
#works .button{ width:52%; max-width: 240px; height: 6vmin; min-height:38px; font-size:1em; margin: 0 auto; }

#works-link { padding:3em 0;}
#works-link a{ position:relative; margin: 0px auto 2em auto; display: block; width:90vw; max-width:600px; height:21vw; max-height:154px;  color: #fff; border: none; border-radius: 15px;outline: none;cursor: pointer;transition: all 0.3s ease; font-size:9px;  font-weight: 700;}
#works-link a:last-of-type{ margin-bottom:0;}

#works-link a div{  position:absolute; bottom:0; width:100%; height: 2.5em; line-height: 2.5em; background:#014099;-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;}
#works-link a div:after{
 	content: "";
  	position: absolute; top: 50%; right: 4%;
	width:  0.5em;
	height:  0.5em;
	background: transparent;
	border-top: 3px solid white;
	border-right: 3px solid white;
	box-shadow: 0 0 0 lightgray;
	 transition: all 0.3s ease;
	transform: translate3d(0,-50%,0) rotate(45deg);}

#works-link a:hover div{ background:#1559b9;}#works-link a:hover div:after { right: 2%;}
#works-link a:hover{ background-size:105% 105%;}
a#rxd{ background: url('../img/link-rxd.jpg') center center no-repeat; background-size:100% 100%; }
a#rxd-demo{ background: url('../img/link-rxddemo.jpg') center center no-repeat; background-size:100% 100%; }



#recruit{ background:url(../img/bg_recruit.jpg) center center no-repeat #d7d7d7; background-size:cover; padding-top: 44px;}

#recruit h3{ text-align:left; padding-left: 6px;}
#recruit p{ padding-bottom:1.5em;}
#recruit .text{ position:absolute; left: 0; width: 54%; z-index: 100;}
#recruit .picture{ position: relative; right: 0;width: 100%;}
#recruit .picture .img{position: relative; } #recruit img{ width:auto; max-width: 100%;}
.recruit1{  margin-left: 60%; right:0; text-align: right; width:40%;}
.recruit2{  max-width:80%;  margin:0 auto;}
#recruit .picture .dot{ width: 40%; height: 90%; right: 2em; bottom: 2em;background-position: right bottom;}
#about .button, #recruit .button{ margin-top:1.5em;}


@media screen and (min-width:0px) and (max-width:768px) {
	.mainvisual{height:60vh; }
	#works .block{ width: 90%; margin:0 auto 2em;}
	#works .box{padding: 20px 0px;}
	
}

@media screen and (min-width:0px) and (max-width:868px) {
	#recruit .text{ position:relative; width: 90%; margin: 0 auto 1em auto;}
	#recruit .picture .img,#recruit .picture .dot{ display:none;}
	#recruit {overflow: hidden; background-image:none;}
	#recruit .wrap{ width: 100%;}
	#recruit .picture { margin:0; padding: 0;
  width: 1600px;
  height: 240px;
  background-image: url("../img/rc-showcase.jpg");
  background-size: 1600px 240px;
  -webkit-animation: slide 40s linear infinite;
          animation: slide 40s linear infinite;
}

}
@media screen and (min-width:869px) {
#recruit .text{ position:absolute; width: 50%; left: 0; }
}
@media screen and (min-width:769px) {
#works .block{ display: flex; justify-content:center;align-items:flex-start; }
#works .block.work1{ flex-direction: row-reverse;}
#works .box{  width:34vw; max-width: 380px; height:30vw;  max-height: 360px;}
#works h3{  width:100%; margin: 0;}
#works p{ padding:0 1em;}
#works .img{position:relative; width: 60%; margin-top: 40px;  } 
.work1 .dot{ width: 100%; height: 70%; left: -2.5em; bottom: 2em;background-position: left bottom;}
.work2 .dot{ width: 100%; height: 70%; right: -2.5em;bottom: 2em;background-position: right bottom;}

}

/***********************************************/
/*CONTENT PAGE*/
/***********************************************/

.content h2{font-family: 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif; font-size:2em;  margin: 0.8em auto;
filter: drop-shadow( 0px 0px 8px rgba(32, 32, 32, 1)); color: #fff;   }
.content h3{ margin-bottom: 1em;}
.privacy h3{color:#464646; font-size: 1.2em; margin-bottom:0.3em;}

.privacy ul{ margin-left: 2em; margin-bottom:1em;}
.privacy li{ margin-bottom:0.3em; text-indent: -2em;}

.privacy.en ul{ margin-left: 1.5em; }
.privacy.en li{text-indent: -1.5em;}


.ip-title h2{display: flex; justify-content:center;align-items:center; flex-direction: column; flex-wrap: wrap; margin: 0 auto; padding: 0;
filter: drop-shadow( 0px 0px 20px rgba(50, 50, 50, 0.3)); }
.ip-title h2 img{ max-height:140px; max-width: 80%; margin-bottom: 8px;}
.ip02 h2,.ip08 h2,.ip17 h2{ color:#000000;filter: drop-shadow( 0px 0px 20px rgba(255,255,255, 0.3));}
.ip17 h2{filter: drop-shadow( 0px 0px 10px rgba(255,225,5, 1)); text-shadow: 0px 0px 5px #ffffff; }

.navigation{ padding:10px 0 5px 0; font-weight: 700; }
.navigation .wrap{display: flex; justify-content:left;align-items:center;flex-wrap: wrap;}
.navigation span{ padding-right: 8px;white-space:nowrap; margin-bottom: 5px; }
.introduction, .example,.grey-bg{ background:#e9e9e9; }
.introduction p,.ip-intro p,.privacy p{ margin:0 auto 1em auto;}
.ip-intro p,.privacy p,.privacy li{text-align:justify;}

.ip-intro p{font-size:larger;}
.introduction p:last-of-type,.ip-intro p:last-of-type{ margin-bottom:0;}
.text-left { text-align:left;}

.links{background:#cecece;}

.navigation a{background:#dbdbdb;border: none;border-radius: 50px; padding:0 14px; }

.page-title.license{padding-top: 44px;background:url(../img/iplist/title.jpg) center center no-repeat; background-size:cover; }
.ip01{background:url(../img/detail/detail01_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip02{background:url(../img/detail/detail02_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip03{background:url(../img/detail/detail03_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip04{background:url(../img/detail/detail04_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip05{background:url(../img/detail/detail05_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip06{background:url(../img/detail/detail06_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip07{background:url(../img/detail/detail07_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip08{background:url(../img/detail/detail08_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip09{background:url(../img/detail/detail09_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip10{background:url(../img/detail/detail10_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip11{background:url(../img/detail/detail11_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip12{background:url(../img/detail/detail12_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip13{background:url(../img/detail/detail13_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip14{background:url(../img/detail/detail14_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip15{background:url(../img/detail/detail15_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip16{background:url(../img/detail/detail16_title_bg.jpg) center center no-repeat; background-size:cover; }
.ip17{background:url(../img/detail/detail17_title_bg.jpg) center center no-repeat; background-size:cover; }

.page-title.yellow-bg h2{font-family: 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif; font-size:2em;
filter: drop-shadow( 0px 0px 0px rgba(32, 32, 32, 0)); color: #000; padding:0px; margin: 0 auto;  }

.case{ position:relative; width: 31%; background: #fff; margin-right: 2%; margin-bottom: 1em;}
.case:nth-child(3n) ,.case:last-of-type{ margin-right:0;}
.case img{ width:100%;}
.case .label{ width:100%; background:#fdd000; color: #000; font-weight: 700; padding: 2px 0;}

.flex-item{margin-right: 1em;}
.flex-item:last-of-type{ margin-right:0;}

@media screen and (min-width:0px) and (max-width:768px) {
.page-title,.page-title.license{padding-top: 2em;}

}
@media screen and (min-width:0px) and (max-width:768px) {

.case{ width: 100%; max-width: 420px; margin-right: 0; margin-bottom: 1em;}
.case:last-of-type{ margin-bottom:0;}
}
@media screen and (min-width:0px) and (max-width:639px) {

.flex-item{margin-right: 0%;margin-bottom: 1em;}
.flex-item:last-of-type{ margin-bottom:0;}
}

/* -------------------------------------------------------------------------- **
** QA
** -------------------------------------------------------------------------- */
#qa{
		width:100%;
		overflow: hidden;
		margin:0 auto;
}


#qa dl{
	background:#fff;
	box-sizing: border-box;
	box-shadow: 1px 1px 3px rgba(50,50,50,0.1);
	padding: 1em 1.5em;
	margin-bottom: 1em;
}
#qa dl:last-of-type{margin-bottom: 0;}
#qa dl dt{
	padding-bottom: 0.5em;
	box-sizing: border-box;
	display: flex; align-items:baseline;
	border-bottom: 1px dotted #ccc;
	font-weight: bold;
	font-size: 120%;
}

#qa dl dt::before{
	content:"Q";font-family: 'Kanit', 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif;
	font-size: 140%;
	margin-top: 0;
	margin-right: 1em;
	display: block;
	color: #004098;
	font-weight: 700;
}

#qa dl dd{
	text-align:justify;
	width:100%;
	padding-top:0.5em;
	box-sizing: border-box; align-items:baseline;
	display: flex;
}

#qa dl dd::before{
	content:"A";font-family: 'Kanit', 'Noto Sans','Noto Sans TC','Noto Sans SC', Helvetica, sans-serif;
	font-size: 180%;
	margin-top: 0;
	margin-right: 0.8em;
	display: block;
	color: #949494;
	font-weight: 700;
}


/***********************************************/
/*IP*/
/***********************************************/
#ip-list{ overflow:hidden; border-bottom: solid 10px #fff;}
#ip-list .box,.ip-intro .box{ position:relative; background: #fff;  padding: 16px;}
.ip-intro .box{ padding: 30px 20px; text-align: left;}

#ip-list ul{ display: flex; align-items:center; justify-content:center;flex-wrap: wrap; position: relative; width: 100%; padding-top: 16px;}
#ip-list li{position: relative; width: 31%; margin-right:2%; margin-bottom: 16px; }

#ip-list a{ position:relative; margin: 0px auto; display: block; width:100%; color: #fff; border: none; border-radius: 15px; outline: none; cursor: pointer; font-size:10px;  font-weight: 500;box-shadow: 0 0px 5px 0 rgba(138, 155, 165, 0.3);}
#ip-list a:hover{　-webkit-filter: brightness(120%); /* Safari */filter: brightness(120%);}

#ip-list a div{  position:absolute; bottom:0; width:100%;line-height: 1em; padding: 6px 0; background:#014099;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;}
#ip-list a div:after{
 	content: "";
  	position: absolute; top: 50%; right: 3%;
	width:  0.5em;
	height:  0.5em;
	background: transparent;
	border-top: 3px solid white;
	border-right: 3px solid white;
	box-shadow: 0 0 0 lightgray; transition: all 0.3s ease;
	transform: translate3d(0,-50%,0) rotate(45deg);}

#ip-list .dot,.ip-intro .dot{ width:110%; height: 90%; top: 5%; left: -5%;}

@media screen and (min-width:0px) and (max-width:299px) {
#ip-list li{ width: 90%; margin-right:0; margin-bottom: 10px; }
#ip-list a{height:30vw;border-radius: 10px;}
#ip-list a div{  line-height: 1em; padding: 4px 0;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;}
#ip-list a div:after{top: 45%; right: 4%;}
#ip-list .dot,.ip-intro .dot{ display: none;}
}

@media screen and (min-width:300px) and (max-width:768px) {
#ip-list li{ width: 48%; margin-right:3%; margin-bottom: 10px; }
#ip-list li:nth-child(2n),#ip-list li:last-of-type{ margin-right:0;}
#ip-list a{height:18vw;border-radius: 10px;}
#ip-list a div{ line-height: 1em; padding: 4px 0;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;}
#ip-list a div:after{top: 45%; right: 4%;}
#ip-list .dot,.ip-intro .dot{ display: none;}
}
@media screen and (min-width:769px) {
	#ip-list li{width: 31%; margin-right:2%;  }
	#ip-list li:nth-child(3n),#ip-list li:last-of-type{margin-right:0;}
	#ip-list a{height:11vw; max-height:130px;}
	#ip-list a:hover div:after{ right: 2%;}
}

a#ip01{ background: url('../img/iplist/ip01.jpg') center top no-repeat; background-size:102% auto; }
a#ip02{ background: url('../img/iplist/ip02.jpg') center top no-repeat; background-size:102% auto; }
a#ip03{ background: url('../img/iplist/ip03.jpg') center top no-repeat; background-size:102% auto; }
a#ip04{ background: url('../img/iplist/ip04.jpg') center top no-repeat; background-size:102% auto; }
a#ip05{ background: url('../img/iplist/ip05.jpg') center top no-repeat; background-size:102% auto; }
a#ip06{ background: url('../img/iplist/ip06.jpg') center top no-repeat; background-size:102% auto; }
a#ip07{ background: url('../img/iplist/ip07.jpg') center top no-repeat; background-size:102% auto; }
a#ip08{ background: url('../img/iplist/ip08.jpg') center top no-repeat; background-size:102% auto; }
a#ip09{ background: url('../img/iplist/ip09.jpg') center top no-repeat; background-size:102% auto; }
a#ip10{ background: url('../img/iplist/ip10.jpg') center top no-repeat; background-size:102% auto; }
a#ip11{ background: url('../img/iplist/ip11.jpg') center top no-repeat; background-size:102% auto; }
a#ip12{ background: url('../img/iplist/ip12.jpg') center top no-repeat; background-size:102% auto; }
a#ip13{ background: url('../img/iplist/ip13.jpg') center top no-repeat; background-size:102% auto; }
a#ip15{ background: url('../img/iplist/ip15.jpg') center top no-repeat; background-size:102% auto; }
a#ip16{ background: url('../img/iplist/ip16.jpg') center top no-repeat; background-size:102% auto; }
a#ip17{ background: url('../img/iplist/ip17.jpg') center top no-repeat; background-size:102% auto; }

.en-ver a#ip15{ background: url('../img/iplist/ip15_gl.jpg') center top no-repeat; background-size:102% auto; }

/***********************************************/
/*GAME LIST
/***********************************************/
section#recruit{ padding-bottom:0; }
#gamelistlink{ width:100%; background: #b7b7b7;padding: 2em 0; margin-top: 3em;}

#gamelistlink a:hover{filter:alpha(Opacity=80 , Style=0);/*for ie*/ -moz-opacity:0.8;/* Moz + FF */ opacity:0.8;}

#gamelistlink a{ position:relative; margin: 0px auto; width:calc(64vw - 0.5em); max-width:calc(280px - 0.5em); height:14vw;max-height: 52px; background: #1a67d7;  color: #fff; font-weight: 700; font-size: 1em; display: flex;justify-content:space-around;align-items:center; border: none; border-radius: 50px; padding-right: 0.5em;
  transition: all 0.3s ease; outline: none;cursor: pointer;}

#gamelistlink a:after{
  content: "";
  	position: absolute; top: 50%; right: 6%;
	width:  0.5em;
	height:  0.5em;
	background: transparent;
	border-top: 3px solid white;
	border-right: 3px solid white;
	box-shadow: 0 0 0 lightgray;
	transition: all 0.3s ease;
	transform: translate3d(0,-50%,0) rotate(45deg);}
#gamelistlink a:hover:after { right: 3%;}
/***********************************************/
/*FOOTER*/
/***********************************************/
footer{ position: relative;font-size:85%; padding: 0 20px 2em 20px; margin: 0 auto; max-width: 1160px; }
footer a { display:block; border: none; border-radius: 50px; margin-right:1em;}
footer a:last-of-type{ margin-right:0;}
footer a:hover{filter:alpha(Opacity=80 , Style=0);/*for ie*/ -moz-opacity:0.8;/* Moz + FF */ opacity:0.8;}

#link,#sns{ position: relative;display: flex; justify-content:center;align-items:center; margin: 2em 0 ; }
#link a{ width: 12em; background:  #c5c5c5; height: 2.4em; line-height: 2.4em; font-weight: 700;}
#sns a { width: 2.4em; height: 2.4em;}#sns p{ margin-right:1em;}

#sns a#yt{  background: url(../img/sns-yt.png) center center no-repeat #b7b7b7; background-size: auto 1em; }
#sns a#fb{  background: url(../img/sns-fb.png) center bottom no-repeat #b7b7b7; background-size: auto 1.9em;}
#sns a#ig{  background: url(../img/sns-ig.png) center center no-repeat #b7b7b7; background-size: auto 1.4em; }
#sns a span{ display:none;}

@media screen and (min-width:769px) {footer .wrap{display: flex; justify-content:space-between;align-items:center;margin-bottom:1em; }}



/***********************************************/
@media screen and (min-width:0px) and (max-width:768px) {
body { font-size:13px;}.pcOnly{ display:none;}
}
@media screen and (min-width:0px) and (max-width:639px) {
.flex{ flex-direction: column; }
}
@media screen and (min-width:769px) {
body { font-size:16px;}
.wrapper.start-style {padding-top: 60px;transition : all 0.25s ease-out;}
.wrapper.scroll-on { padding-top: 44px;transition : all 0.25s ease-out;}
}

/***********************************************/
.catch{ color:/*#04429a*/#000111; font-weight: 900; font-size: larger; margin-bottom: 1em;}
.case.past .label{background: #c4c0ab;}
.status-box{    position: relative; 
    margin: 0 auto;
    width: 92%;
    height: auto;
    max-width: 1000px;display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;gap:1em;}
@media screen and (min-width:0px) and (max-width:768px) {
	.status-box{ padding-top:1em;}
}
/* 每一組 */
.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* 圓點本體 */
.status  {
	
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: inline-block; flex-shrink: 0; background-color: currentColor;
}

/* 狀態顏色 */
.status.live {
  background-color: #fdd000; 
}

.status.past {
  background-color: #c4c0ab; /* 灰色 */
}