/*@import url("a1Pro_2019.css");*/

section .linkBox{ text-align:center;}
.paper .pic{ background:#fff;}
.container{width: 100%;max-width: 1200px;margin-left: auto;margin-right: auto;position: relative;}
.p01{font-size: calc(1vw + 1vh + .5vmin);}

/*----------------概述----------------*/
/*
.content-description {    background: none;}
.content section [class*="content-"] .wrap {
    max-width: 1200px !important;
}
.p01 h2 {    font-size: 60px !important;    font-weight: 400 !important;    width: 100%;    margin: 0 !important;}
.p01 h3 {    width: 380px;    margin: 10px auto 30px;    font-size: 20px;    border-top: 2px solid #16c7ba;    padding-top: 20px;}
.desktop {    width: 50%;    margin-left: -2%;    margin-top: 5%;    margin: 0 auto;}
.content-description article img {    width: 100%;    max-width: 974px;    margin: 0 auto;}
*/
/*----------------概述end----------------*/
.p01 {
    padding-left: 15px;
    padding-right: 15px;
}
.p01{padding-top: 4vh;}
.p01 .container{}
.p01 .pic{width: 90%;}
.p01 .pic img {
    width: 100%;
}
.p01 .text {
    margin-top: 8%;
}
.p01 .text h1{font-size: 60px;border-bottom: 2px solid #16c7ba;margin-bottom: .2em;}
.p01 .text p {
    font-size: 18px;
/*    padding-left: 10px;*/
    margin-bottom: 20px;    letter-spacing: 1px;
}


@media (max-width: 767px) {
   
    .p01 .pic{}
    .p01 .text{width:90%;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 40px;}
    .p01 .text h1{font-size: 3.6em;}
    .p01 .text p{font-size:20px;}

}



/*----------------痛點----------------*/
.p02-wrap {
    background: rgb(233,255,254);
    background: linear-gradient(180deg, rgba(233,255,254,1) 60%, rgba(255,255,255,1) 100%);
    margin: 40px 0 60px;
    padding: 20px 0;
}
section.p02 {    text-align: center;    margin: 100px auto;    position: unset;}
.problem {
    display: inline-block;
    min-width: 300px;
    vertical-align: top;
    margin-top: 4%;
}
.solution {    display: inline-block;    width: 350px;    vertical-align: top;    margin-top: 4%;}
.solution * {    display: inline-block;}
h4.multi {    font-size: 42px;    line-height: 1.3;}
.multi span {    font-size: 32px;    font-weight: 600;    color: #0097a7;    line-height: 0.2;}
canvas {    width: 85% !important;    max-width: 650px !important;}
.flow {
    display: inline-block;
    margin-top: 40px;
    margin-left: -95px;
}


/*----------------痛點end----------------*/
.grtyoutube-popup-content {
/*    margin-top: 100px;*/
    width: 100%;
}
.video_slide {
    padding: 45px 0 30px;
}
.video_slide .swiper-container {
    max-width: 1200px;
    margin: 0 auto;
}
.video_slide .swiper-slide {
    text-align: center;
}
.video_word {
    display: inline-block;
    width: 30%;
    vertical-align: top;
    margin-top: 7%;
    margin-left: 5%;
    text-align: left;
}
.video-title {
    color: #09bb97;
    font-size: 30px;
    font-weight: bold;
    border-left: 10px solid #09bb97;
    padding-left: 15px;
    line-height: 1.2;
    margin-bottom: 15px;
}
.video_word p {
    color: #777777;
    font-size: 18px;
    width: 80%;
    margin-left: 25px;
}



.video_img {
    display: inline-block;
    width: 50%;
    /* opacity: .8; */
    -webkit-filter: brightness(.9);
    max-width: 600px;    transition: .5s;
}

.video_img img {
    width: 100%;
}
.video_img:hover {
    cursor: pointer;
    -webkit-filter: brightness(1);
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    color: #a4a5a7;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    width: 33% !important;
}
span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    --swiper-theme-color: #09bb97;
    width: 20px;
    border-radius: 30px;
}
.video_slide a.swiper-button-next:hover,.video_slide a.swiper-button-prev:hover  {
    text-decoration: none;
}



/*----------------特色----------------*/
.feature_wrap {    min-width: 1000px;    margin: 0 auto;    text-align: center;}
.title {
    text-align: center;
    font-size: 50px;
    margin-bottom: 10px;
}
section.p03 {
    margin: 100px 0 10px;
}
.p03 .feature {    display: inline-block;    width: 20%;    margin: 20px;    min-width: 240px;    max-width: 240px;    vertical-align: top;}
.p03 a:hover {    color: #fff;    background-color: #017986;    text-decoration: none;}
.p03 .icon {    display: inline-block;    border-radius: 50%;    padding: 30px;    box-shadow: #e3e3e3 0px 6px 8px;    margin-bottom: 15px;}
.p03 .icon img {    display: inline-block;    text-align: center;    width: 60px;    vertical-align: middle;}
.p03 .sec-title {    font-size: 24px;    font-weight: 600;    letter-spacing: 2px;}
.p03 .word {    letter-spacing: 1px;}
.fancybox {    color: #fff;    letter-spacing: 2px;    background: #0097a7;    display: inline-block;    padding: 5px 30px;    margin: 15px 0;}

.p03-link a.fancybox:hover {    color: #fff;    text-decoration: none;    background-color: #01707d;}
.p03-link {
    width: 100%;
    max-width: 600px;
    margin: 20px auto 80px;
    text-align: center;
}
.p03-link a.fancybox {
    display: inline-block;
    padding: .6em 0;
    font-size: 18px;
    width: 40%;
    text-align: center;
    margin: 0 20px;
}

/*----------------特色end----------------*/

.p04-plus {
    background-color: #e9fcff;
    max-width: unset;
    margin-bottom: 130px;
}
.plus-slide {
    max-width: 1200px;
    margin: 0 auto;
}
.plus-wrap {
    max-width: 1100px;
    margin: 90px auto 15px;
    padding: 50px 0;
}
.plus-img {    display: inline-block;}
.plus-title {
    display: inline-block;
    vertical-align: top;
    color: #545454;
    font-size: 48px;
    line-height: 1.2;
/*    margin-top: 65px;*/
   margin-left: 30px;letter-spacing: 3px;
}
.plus-title span {
    color: #0097a7;
    font-size: 26px;
    display: block;
    margin-left: 5px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.plus-title p {
    font-size: 18px;
    margin-top: 10px;
    margin-left: 5px;
    line-height: 1.5;
    letter-spacing: 2px;
}


.plus-title .fancybox {
    font-size: 18px;
    padding: 10px 40px;
    margin-left: 5px;
}
.plus-title .fancybox:hover {
    color: #fff;
    text-decoration: none;
    background-color: #01707d;
}


/*----------------規格說明----------------*/



@media screen and (max-width: 1024px) {
.related-links .pic { display:none;}
}


/*
------ 右方線條的標題 ------

	.title-R-line{ color:#333; font-size:1.8em; font-weight:bold; position:relative; margin-bottom:10px; line-height:1.5em; margin:1.2em 0}
	.title-R-line:before{ content:""; border-bottom:1px solid #333; width:100%; position:absolute; left:0; top:52%}
	.title-R-line span{ background:#fff; position:relative; z-index:2; padding-right:10px;}
	

@media screen and (max-width: 640px) {

.title-R-line{  font-size:1em;}

}
*/

/*-----大小----*/

.text-large{ font-size:2em !important;}
.text-normal{ font-size:1em !important;}
.text-small{ font-size:.9em !important;}



h4.multi {
    width: 100%;
}

.solution {
    width: auto;
    display: unset;
}
section.p02 {
    margin: 50px auto 0;
}

.video_wrap {
    vertical-align: top;
    margin-top: 100px;
/*    margin-left: -70px;*/
    width: 560px;
    height: 300px;
    display: inline-block;
}
.video_wrap img {
    width: 100%;
}

/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ RWD ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/


@media screen and (max-width: 1366px) {
	
/*----------------流程圖----------------*/
.p03{ background-size:99%;}

.plus-wrap {
    margin: 50px auto;
    padding: 0 15px;
}
.plus-img {
    width: 58%;
}
.plus-img img {
    width: 90%;
    padding: 0 10px;
    margin: 0 auto;
}	
.problem {
    width: 50%;
    margin-top: 5%;
}
.flow img {
    width: 100%;
    max-width: 580px;
}
.flow {
    width: 55%;
}	
	
}

@media screen and (max-width: 1024px) {
.content-description article .imgBox img{display: none;}
.content-description article .imgBox img:first-child{display: block; margin:0 auto;}

[class*="content-intro"]{ background-position: center top;}
[class*="content-intro"] .imageNB img{ width:85%;}


	
}

@media screen and (max-width: 768px) {
/*canvas {    width: 90% !important;}	*/
	canvas{display: none;}	
.content section {
    height: auto;
    min-height: auto;
    margin: 30px 0 0;
}
.process { padding:0 5%;}
.process img {padding-top:0;}
.process .check {margin-left:0;}
.process .check span{ width:50%;}

	
h4.multi {    font-size: 24px !important;}
.multi span {    font-size: 22px !important;}
section.p02 {    margin: 20px auto;}
.flow img {    width: 98%;}
.flow { width: 100%;   margin: 0;}	
	
.feature_wrap {    min-width: 300px !important;}
	
.video_wrap {    padding: 0 15px;    width: 100%;    margin: 15px auto;}
.video_word {    width: 80%;    margin-top: 0;    margin-bottom: 5%;}	
	.video_img {    width: 75%;}
	.video_slide .swiper-slide {    padding-bottom: 35px;}
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    width: 100% !important;
}
	.plus-img {
    width: 100%;
}
.plus-title br {    display: none;}	
.plus-title {    margin-top: 0;    margin-bottom: 10px;}	
	
}

@media screen and (max-width: 480px) {
.header_text {
    width: auto;
}
.p01 h3 {
    width: 100%;    max-width: 330px;
}	
.title {
    font-size: 36px;
}	
.content section{ height:auto;}
.p02-wrap {
    padding-bottom: 0;
    margin: 0;
}
.content-description { background-size: 100%; background-position: left 5%;}

[class*="content-intro"] { height:480px;}

.process .check span{ width:100%; margin-left:15%;}

.content section.p05{ margin-top:0px;}

.content section.p06{ margin-top:0px;}
.p06 .link{text-align:center; margin:0px; padding:0px;}
.content-btn{ margin-top:0px; padding-top:0px;}
.content-btn .image{ margin-top:0px; padding-top:0px;}
.content-btn .image a { width:95%;}
.content-btn .image a:nth-child(2) { margin-top:3%;}
.related-links{ width:100%;}
.title-R-line:before{ border-bottom:none;}

section.p02 {
    margin: 20px 0;
}
	.content section [class*="content"] .wrap {
    padding: 0;
}

	.p03 .feature {
    display: inline-block;
    width: 46%;
    margin: 20px 5px;
    vertical-align: top;
	min-width: auto;
}
.p03 .sec-title {
    font-size: 20px;
}
	.word {
    font-size: 15px;
}
	
	.p03-link a.fancybox {
    margin: 0 10px;
    letter-spacing: 0;
}
	
	

}



@media screen and (max-width: 350px) {

.solution {
	width: 320px;}

}