@charset "utf-8";

/* CSS Document */
html {padding: 0px;margin: 0; font-size: 22px; position:relative;}
body {position: relative;font-family: 'Noto Sans TC', "微軟正黑體", "蘋果儷中黑", sans-serif, Helvetica, Arial;line-height: 160%;color: #333;}
.clear {clear: both;}
.clearfix {zoom: 1;}
.clearfix:after {content: '.';display: block;visibility: hidden;clear: both;height: 0px;}
.word_break {word-break: break-all;word-wrap: break-word;display: block;}
a {text-decoration: none;color: #000;}


/*Text*/
.color_01{ color: #d70c19;}
.color_02{ color: #f39800;}


/*Content*/
main section .box{ position: relative; padding:80px 0 120px 0;}
.location{position: absolute; top: -6.3vw; left: 0;}
section h1{margin: 0 0 40px; text-align:center;}
section h2{ font-size: 1.2rem; color: #000; letter-spacing: 0px;}
section h3{ font-size: 0.9rem; font-weight: bold;}
section p{ letter-spacing: 1px;}
time{ font-size: 0.5rem; color: #747474;}

a.btn_top {position:absolute;z-index: 998;right: 10px;display: inline-block;background: url(../images/btn_top.png) no-repeat;width: 66px;height: 159px;}

@media(max-width:1400px) {
a.btn_top {display:none;}
}

a.btn_top:hover {
background-position: left bottom;
}


header {
	width: 100%; height: 6.3vw; min-height: 60px;
	position: fixed; z-index: 999; top: 0px; left: 0px;
	border-top: 5px solid #D70C19;
	background-color: #fff;
}

nav {
	height: 6.3vw;
	min-height: 60px;
	position: absolute;top: 0;left: 3.1vw;z-index: 999;
	display: flex; flex-flow:row wrap;justify-content: center;align-items: center;
}

nav ul.pc_menu{display: none; }

nav ul.pc_menu li {
	float: left;margin: 0 40px 0 0; font-size: 1.2rem;
}

nav li a {
	display: inline-block;
	font-family: 'Noto Sans TC';font-weight: 500;
	border-bottom: 1px #fff solid;padding-bottom: 5px;
}
/*
nav .nav01 a {
	background: url(../images/nav01.gif) no-repeat;
}

nav .nav02 a {
	background: url(../images/nav02.gif) no-repeat;
}

nav .nav03 a {
	background: url(../images/nav03.gif) no-repeat;
}

nav .nav04 a {
	background: url(../images/nav04.gif) no-repeat;
}

nav .nav05 a {
	background: url(../images/nav05.gif) no-repeat;
}*/

nav li a:hover {
	color: #d70c19;
	border-bottom: 1px #d70c19 solid;padding-bottom: 5px;
}
/*header .btn_menu{
	display: block;
	cursor:pointer;
	background: url("../images/btn_menu.png") no-repeat; background-size: contain; width: 18px; height: 18px;
	position: absolute;top: 0;left: 60px;z-index: 999;}*/

/*mobile_menu*/
#btn_menu{
	display: block;position: relative;width: 33px;height: 27px; z-index: 1;-webkit-user-select: none;user-select: none; cursor:pointer;
}

#btn_menu a{
  text-decoration: none;color: #232323;transition: color 0.3s ease;
}

#btn_menu a:hover{color: #d70c19;}


#btn_menu input{
  display: block;width: 40px;height: 32px;position: absolute;top: -7px;left: -5px;cursor: pointer;opacity: 0; z-index: 2; -webkit-touch-callout: none;
}

#btn_menu span{
  display: block;width: 33px;height: 4px;margin-bottom: 5px;position: relative;background: #333;border-radius: 1px;z-index: 1;transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#btn_menu span:first-child{transform-origin: 0% 0%;}

#btn_menu span:nth-last-child(2){transform-origin: 0% 100%;}

#btn_menu input:checked ~ span{
  opacity: 1;transform: rotate(45deg) translate(-2px, -1px);background: #232323;
}

#btn_menu input:checked ~ span:nth-last-child(3){
  opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);
}


#btn_menu input:checked ~ span:nth-last-child(2){
  transform: rotate(-45deg) translate(0, -1px);
}

#mobile_menu{
  position: absolute;
  width: 100vw;
  margin: -100px 0 0 -3.1vw;padding-top: 125px;
  background: #f2f2ec;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(0, -100%);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#mobile_menu li{width: 100%; text-align: center; font-size: 1rem;border-top: 1px #fff solid;
	padding: 10px 0;}
#mobile_menu li a{border-bottom: 0px #fff solid;padding:0;}

/*
 * And let's slide it in from the left
 */
#btn_menu input:checked ~ ul{transform: none;}


header .rela_logo {
	position: absolute;right: 1.7vw;top: 0;
	display: flex; flex-flow:row wrap;justify-content: center;align-items: center; 
	height: 6.3vw; min-height: 60px;
}

header .rela_logo a {
}

header .rela_logo .logo_01 {
	display: block;width: 6.8vw; min-width:69px;  height: 3.5vw; min-height: 35px; margin: 0 1vw 0 0;
	background: url(../images/rela_logo_01.png) no-repeat;background-size: contain;
}

header .rela_logo .logo_02 {
	display: block;width: 7.7vw;  min-width:78px; height: 3.4vw; min-height: 35px;
	background: url(../images/rela_logo_02.png) no-repeat;background-size: contain;
}

.vision_header{display: block;height: 6.3vw; min-height: 60px;}

.vision {
	position: relative;
	display: block; width: 100%; height: 42vw;
	background: url(../images/vision_pc.jpg) no-repeat;background-size: contain;
}

@media(min-width: 320px) {
	.vision {
	width: 100%; height: 100vw;
	background: url(../images/vision_phone.jpg) no-repeat;background-size: contain;
	}
}

@media(min-width: 768px) {
	.vision {
	width: 100%; height: 71vw;
	background: url(../images/vision_ipad.jpg) no-repeat;background-size: contain;
	}
}

@media(min-width:1024px) {
	.vision {
	display: block; width: 100%; height: 42vw;
	background: url(../images/vision_pc.jpg) no-repeat;background-size: contain;
	}
}

.vision .logo_03 {
	position: absolute;right: 0px;top: 0px;
	display: block; width: 18vw; min-width: 165px; height: 12vw; min-height: 110px;
	background: url(../images/rela_logo_03.png) no-repeat;background-size: contain;
}

section.intro {}

section.intro .box {
	max-width: 1200px;width: 100%;margin: 0 auto;
}

section.intro h1 { width: 100%; text-align: center;}
section.intro h2 { width: 100%; margin: 0 0 40px; padding: 0 10%; font-size: 2rem; font-weight: bold; text-align: center;line-height: 120%; }
section.intro .img{position: relative;text-align: center;}
section.intro .img img{ width: 90%; padding: 5% 5% 0 5%;}
section.intro .text { margin: 0 auto; padding: 4% 5% 0 5%;}
section.intro .text p{ margin: 0 0 5%;}


section.space { height: 250px; background: url(../images/bg_pic.jpg) fixed; background-size: cover;}
@supports (-webkit-touch-callout:inherit ) {  
	section.space {
		background-attachment:scroll !important ;
	}
}
section.space .box { max-width: 1200px; margin: 0 auto; position: relative;}
section.space .box .car{ background: url(../images/car01.png); background-size: contain; display: inline-block; width:7.5vw;  max-width:144px; min-width:72px; height:12.2vw; max-height:235px; min-height:117px;   position: absolute; z-index: 9; top: -70px; left: 5%; }


section.project {background:#f2f2eb;}
section.project .car_box{ position: relative; min-height: 799px;}
section.project .car_box .car{background: url(../images/car02.png) no-repeat; background-size: contain; display: inline-block; width:9.5vw; max-width:184px; min-width: 92px; height: 16.1vw; max-height:311px; min-height: 155px; position: absolute; z-index: 9; bottom: 1.5vw; right: 2.8vw; }
section.project .text{ position: relative; padding:7.5vw; max-width: 800px; margin: 0 auto;}
section.project .text h1{ text-align: left;}

@media(max-width:1024px) {
section.project .text{ padding:80px 5% 120px;}
section.project .text h1{ text-align: center;}
}

section.project .text p{ margin: 0 0 5%;}
section.project .text ul{ margin:10% 0 0 0;}
section.project .text .school{ max-width: 80%;}
section.project .text .school li{ float: left; width: 50%; margin: 0 0 50px;}
section.project .text .school li a{border-bottom: 1px #000 solid; padding: 0 35px 5px 0;}
section.project .img{ position: relative;display:block; width: 100%; min-height: 799px; height: 100%; background: #1D879F; text-align: center;vertical-align: middle/*background: url("../images/map_school.jpg") no-repeat top center; background-size: cover;*/}

section.project .img a.school_01{ display: inline-block; width: 80px; height: 60px; position: absolute; top:8%; left: 51.5%;}
section.project .img a.school_02{ display: inline-block; width: 100px; height: 60px; position: absolute; top:13%; left: 43.3%;}
section.project .img a.school_03{ display: inline-block; width: 100px; height: 100px; position: absolute; top:34%; left: 38%;}
section.project .img a.school_04{ display: inline-block; width: 100px; height: 100px; position: absolute; top:56%; left: 25%;}

@media(max-width:1024px) {
section.project .img a.school_03{ display: inline-block; width: 100px; height: 100px; position: absolute; top:34%; left: 25%;}
section.project .img a.school_04{ display: inline-block; width: 100px; height: 100px; position: absolute; top:56%; left: 10%;}
}

section.project .img img{ position: absolute;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;height:auto; width: 100%; max-width: 449px; justify-content: center;}
section.project .text .school li a.school_01{ background: url(../images/icon_color_01.png) no-repeat right center;}
section.project .text .school li a.school_02{ background: url(../images/icon_color_02.png) no-repeat right center;}
section.project .text .school li a.school_03{ background: url(../images/icon_color_03.png) no-repeat right center;}
section.project .text .school li a.school_04{ background: url(../images/icon_color_04.png) no-repeat right center;}

section.feature {}


section.feature .card_box{position: relative; background: #FFE2E3; max-width: 1500px; padding:1.3vw 2.6vw;; margin: 0 auto;}
section.feature .card_box .flexbox_1_4{ margin: 25px 0;}
section.feature .card_box .car{background: url(../images/car03.png) no-repeat; background-size: contain; display: inline-block; width: 6vw; max-width:116px; min-width: 58px; height: 12.7vw; max-height:245px; min-height: 122px; position: absolute; z-index: 9; top: -190px; right: 5%; }
section.feature .card_box .card{ background: #fff; margin: 0 10px; min-height: 100%;}

section.feature .card_box .card .hd img{width: 100%;}
section.feature .card_box .card .bd{ padding:25px 40px;}
section.feature .card_box .card .bd h2{ font-weight: bold; padding:0 0 20px;  margin: 0 0 20px; background: url(../images/line_h2.png) no-repeat left bottom;}

section.record { background:#5E489A ; padding: 0 25px;}
section.record .box{position: relative;  max-width: 1200px; width: 100%; margin: 0 auto;}
section.record .box .car{ background: url(../images/car04.png) no-repeat; background-size: contain; display: inline-block; width: 6.9vw; max-width:133px; min-width: 66px; height: 12.3vw; max-height:237px; min-height: 118px; position: absolute; z-index: 9; top: -50px; left: 25%; }

section.record .card{ background: #fff; margin: 0 10px; min-height: 100%;}
section.record .box .card .hd img{width: 100%;}
section.record .box .card .bd{ padding:25px 40px;}
section.record .box .card .bd h2{ min-height:107px; font-weight: bold; margin: 0 0 20px;}


section.works {background:#f2f2ec; padding: 0 25px;}
section.works .box{position: relative;  max-width: 1200px; width: 100%; margin: 0 auto;}
section.works .car{ background: url(../images/car05.png) no-repeat; background-size: contain; display: inline-block; width: 8.8vw; max-width:170px; min-width: 85px; height: 11.5vw; max-height:222px; min-height: 111px; position: absolute; bottom: -20px; left: 5%; }

section.works .card{ background: #fff; margin: 0 10px; min-height: 100%;}
section.works .box .card .hd img{width: 100%;}
section.works .box .card .bd{ padding:25px 40px;}
section.works .box .card .bd h2{ min-height:107px; font-weight: bold; margin: 0 0 20px;}

footer{ font-size: 0.7rem;}
footer .hd{ max-width: 900px; margin: 0 auto; align-items: center;padding:15px 0;}
footer .hd .rela_logo{ display: flex; flex-flow:row nowrap; justify-content: center; height: 59px;padding:10px 0;}
footer .hd .data{ padding:10px;justify-content: center;}
footer .hd .data span{ display: block;padding: 0 5px;text-align: center; }
footer .rela_logo .logo_01 {
	display: inline-block;
	background: url(../images/rela_logo_01.png) no-repeat; 
	background-size: contain;
	width: 118px;
	margin: 0 20px 0 0;
}

footer .rela_logo .logo_02 {
	display: inline-block;
	background: url(../images/rela_logo_02.png) no-repeat; 
	background-size: contain;
	width: 131px;
}


footer .ft{ color: #fff; padding:30px 0; background: #d70c19;justify-content: center;}
footer .ft span{ padding:0 10px; text-align: center;}