@import url("/css/product/swiper_A1Pro.css");
.content{font-family:  'Noto Sans TC',"微軟正黑體"; }
.mainNav ul ul .btn {    padding: 0;}




.p1 ,.p2, .p3, .p4{
    font-size: calc(1vw + 1vh + .5vmin);
	font-family:'Noto Sans TC',"微軟正黑體";
}

/*----------------------- p1 ----------------------*/


h1 {    font-size: 2.3em;    font-weight: 300;    letter-spacing: 5px;    color: #2796db;   margin-bottom: 10px;}
.btn-primary {    background-color: #2796db !important;    border-color: #2796db !important;}
.btn-primary:hover {    background-color: #177cbb !important;}
.btn-outline-primary {    color: #2796db !important;    border-color: #2796db !important;}
.btn-outline-primary:hover {    color: #fff !important;    background-color: #2796db !important;    border-color: #2796db !important;}

section.p1 h2.title {    font-size: 38px;    margin-bottom: 20px;    color: #333;    display: block;    font-weight: 400;    line-height: 42px;    padding-top: 20px;    border-top: 2px solid #2796db;}
section.p1{width:100%;overflow: hidden;}

section.p1 .container{width:100%;max-width:1300px;padding:0 15px ;margin: 0 auto; position: relative;height: 100%;}

section.p1  .text{z-index: 9;    margin-top: 10%;margin-bottom: 60px;text-align: left;}
section.p1 .text p { font-size: 18px;   letter-spacing: 1px;    width: 100%;    margin-bottom: 30px;    padding-left: 6px;}
section.p1  .text .btn-group{text-align: left;}
section.p1 .text .btn-group .btn {    padding: 10px 30px;    margin: 0 50px;}
.btnColor-green2{background: #5b9c16;border: 2px #5b9c16 solid;box-shadow: none;}
.btnColor-green2:hover{background: #48800c;border:2px #48800c solid;}
.btnColor-greenB2Border{border: 2px #5b9c16 solid;background: transparent;}


section.p1 .char{z-index: 2;text-align: right;}
section.p1 .char img{ display: inline-block;vertical-align: bottom;}



@media (max-width:1200px) {
    section.p1 .char{right: 1%;}
}


@media (max-width: 768px) {
    
    section.p1 h2.title{ font-size: 28px; }
    
section.p1{width:100%;height: auto;}

    section.p1  .text{padding-left: 0;}
    section.p1 .char{position: relative;z-index: 2;}
    
section.p1 .map{display: none;}

}

@media (max-width: 576px) {
section.p1 h1 {    font-size: 50px;}
section.p1 h2.title {    font-size: 24px;}
section.p1 .text p {    font-size: 16px;}
section.p1 .text .btn-group .btn {    margin: 0 10px;}
}


/*----------------------- p2 ----------------------*/


section.p2{width:100%;background-color: rgba(146, 199, 255, 0.25);}

section.p2 .container{width:100%;max-width:1300px;padding:0 15px ;margin: 0 auto ; position: relative;padding-top: 80px;}

section.p2 .advantage{}
section.p2 .advantage .item {width: 32%;}
section.p2 .advantage .item:not(:last-child) {margin-bottom: 60px;}
section.p2 .advantage .item .text{text-align: left;width: 100%;max-width: 340px;margin-bottom: 20px;    margin-top: 20px;}
section.p2 .advantage .item h3{font-size: 26px;font-weight: bold;position: relative;margin-bottom: 10px;}
section.p2 .advantage .item h3 span{background: #ff5656; color: #fff;font-size: 50%;padding: 2px 10px;position: absolute;bottom: 90%;left: 0;border-radius:10px ;}
section.p2 .advantage .item p{font-size: 15px;}

section.p2 .advantage .item .pic{}

/*
.advantage .item1 .pic{margin-top: 50px;}
.advantage .item2 .pic{margin-top: 45px;}
.advantage .item3 .pic{margin-top: 45px;}
*/

@media (max-width: 768px) {
    
    section.p2 .advantage .item:first-child {margin-bottom: 60px;}
    
    section.p2 .container{padding-top: 60px;padding-bottom: 60px;}
    
    .advantage .item1 .pic{margin-top: 30px;}
    .advantage .item2 .pic{margin-top: 30px;}
    .advantage .item3 .pic{margin-top: 30px;}
    
}






/*----------------------- p3 ----------------------*/


section.p3{width:100%;height: 652px;overflow: hidden;margin-bottom: 50px;}

section.p3 .container{width:100%;max-width:1300px;padding:0 15px ;margin: 0 auto; position: relative;padding-top: 90px;}


section.p3  .text{text-align: center;width: 100%;max-width: 600px;margin-bottom: 60px;}
section.p3  .text h3{font-size: 38px;font-weight: bold;position: relative;margin-bottom: 10px;;line-height: 1.2;}
section.p3  .text p{font-size: 16px;}
section.p3 h2 {    color: #2796db;    font-size: 34px;}
section.p3 img {    max-width: 100%;    height: auto;}


[class*="Slide"] .arrow-left {    margin: 15% auto auto 8%;}
[class*="Slide"] .arrow-right {    margin: 15% 8% auto auto;}

/*高度設定*/
[class*="Slide"] ,[class*="Slide"] .swiper-container ,[class*="Slide"] .swiper-wrapper {height:1600px; }


@media (max-width: 768px) {
    
    section.p3{height:auto;padding-bottom: 60px;}
    
    section.p3  .text h3{font-size: 30px;}
    /*高度設定*/
[class*="Slide"] ,[class*="Slide"] .swiper-container ,[class*="Slide"] .swiper-wrapper {height:480px; }
}


@media (max-width: 576px) {
section.p3 {    padding-bottom: 0;}
section.p3 .container {    padding-top: 40px;}
section.p3 .text p {
    margin: 0 auto;
    max-width: 300px;
    font-size: 16px;
}
.p3 h2 {
    font-size: 30px;
    color: #2796db;
}
/*高度設定*/
[class*="Slide"] ,[class*="Slide"] .swiper-container ,[class*="Slide"] .swiper-wrapper {height:550px; }


}



/*----------------------- p4 ----------------------*/

section.p4 {    background: #e4f1ff;    width: 100%;    padding: 100px 0; background-image: url("/images/product/attendance/2019/bg.png");background-position: bottom center;
    background-repeat: no-repeat;}

section.p4 .container{width:100%;padding:0 10px ;margin: 0 auto; position: relative;}

section.p4 .feature{text-align: center;    text-align: center;    margin: 0 auto;    max-width: 840px;}

section.p4 .feature .item{    background: #fff;
    margin: 20px;
    padding: 20px 0px;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    box-shadow: rgba(20, 84, 148, 0.48) 3px 3px 10px;}

section.p4 .feature .icon{display: block !important;    margin: 0 auto;}
section.p4 .feature .icon img{max-width: 100%;}

section.p4 .feature .text{text-align: center;}
section.p4 .feature .text h3{font-weight: bold;font-size: 28px;margin-bottom: 6px;}
section.p4 .feature .text p{font-size: 14px;}

h2.p4_title { text-align: center;   font-size: 40px;    color: #2796db;    letter-spacing: 3px;    width: 100%;     margin-bottom: 30px;}

@media (max-width: 1240px) {
   
    
}

@media (max-width: 768px) {
    

section.p4 .feature .icon {    height: 60px;}
}


@media (max-width: 576px) {
section.p4 {    padding-top: 40px;    padding-bottom: 100px;    background-image: none;}
section.p4 .feature .item {
    margin: 0 auto;
    width: auto;
    padding: 20px 0;
    height: 170px;
    border-radius: 0;
    background: none;
    border: 0;
	box-shadow: none;
}
section.p4 .feature .text h3 {    font-size: 20px;}	
section.p4 .feature {
    max-width: 300px;
}
	
	
}








/*----------------------- p5 ----------------------*/

section.p5{width:100%;background-size: auto 100%; min-height: 672px;}

section.p5 .container{width:100%;max-width:1300px;padding:0 15px ;margin: 0 auto; position: relative;padding: 80px 10px;}


section.p5 .pic{}





@media (max-width: 768px) {
    
  section.p5{min-height: 0;background: #e7e7e7;}
}









/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 價目表 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/	

.price-list-wrap{background: #f8f8f8;font-family:  'Noto Sans TC',"微軟正黑體";}
.price-list-wrap .container{  width: 100%;max-width: 1100px;margin-left: auto;margin-right: auto;padding:60px 10px 30px;}

.price-list-wrap .advantage{font-size: 20px;font-weight: 500;text-align: center;color: #585858;margin-bottom: 30px;}
.price-list-wrap .advantage p{margin: 10px;}
.price-list-wrap .advantage p i{ margin-right: 5px;}




.price-list{text-align: center; }

.price-list .icon{}
.price-list .icon img{margin-left: auto;margin-right: auto;margin-bottom:12px;}

.price-list .list{text-align: center;width: 50%;max-width:502px; margin:0 1.5% 30px ;
    background: #fff;padding:36px 8px;box-shadow: 0 0 20px 5px rgba(0,0,0,.2);border-radius:5px ;
}
.price-list .list h3{font-size: 28px;font-weight: bold;line-height: 1.2;margin-bottom: 8px;color:#2796db;}
.price-list .list h3 p{font-size: 80%;font-weight: 400;margin: 0;}
.price-list .list h3 p i{font-size: 110%;position: relative;line-height: 1;vertical-align: sub;}
.price-list .list .price{font-size: 40px;font-weight: bold;margin-bottom: 10px;line-height: 1; color: #2796db;}
.price-list .list .price span{font-size: 80%;position: relative;top: -4px;}
.price-list .list .people{font-size: 100%;color: #ff7336;margin-bottom: 20px;font-weight: bold;}

.price-list .list .note{font-size: 14px;background: #e6e6e6; padding: 2px 10px;border-radius:10px ;display:inline-block;margin-left: auto;margin-right: auto;}

.price-list .list ol{list-style: none;}
.price-list .list ol li{font-size: 14px;padding: 5px;letter-spacing: 0;}

.price-list .list .btn-more{margin-top: 30px;max-width: 200px;margin-left: auto;margin-right: auto;padding:8px ;font-size: 16px;box-shadow: none;
    background: #2796db; border: 1px solid #2796db;border-radius: 60px;color: #fff;margin-bottom: 10px;
    
}

.price-list .list .btn-more:hover{ background: #137cbd;}

.price-list .list .btn-more2 {    background: #2796db;    border: 1px solid #2796db;    color: #ffffff;    margin-top: 20px;}
.price-list .list .btn-more2:hover {    background: #137cbd;    color: #fff;}
.price-list .list .text-link{font-size: 15px;font-weight: 500;color: #ff7336; text-decoration: underline;}

.price-list-part2 .list{width: 30%;max-width:380px;}

.price-list-part2 .list p{margin-top: 14px;}

.price-list-part2 .hour{background: #dddddd; padding: 2px 8px;border-radius: 30px;font-size: 13px;margin-left: 10px; display: inline-block}

@media screen and (max-width:800px) {
    .price-list .list{max-width: none; margin:0 auto 30px ;}
}










/*----------------------- p6 ----------------------*/


section.p6{width:100%;background: url(../../images/product/attendance/bg-p6.jpg) no-repeat bottom center #1472ad;min-height: 480px;position: relative;padding-bottom: 16px;}

section.p6 .container{width:100%;max-width:1300px;padding:0 15px ;margin: 0 auto; position: relative;padding-top: 100px;    text-align: center;}


section.p6 h3{color: #fff; text-align: center;font-weight: bold;font-size: 36px;margin-bottom:40px;}

 .btn-try{display: block;background: #fff; border-radius: 60px; color: #0f659e; padding: 10px 30px ;width: 90%;max-width: 280px;text-align: center;
    margin-bottom: 80px;font-size: 18px;overflow: hidden;transition:all .3s; -webkit-transition:all .3s;
}

section.p6 .announce{font-size: 16px;color: #fff;margin-top:60px;text-align: center; margin-left: auto;margin-right: auto;
max-width: 700px; display: block;background: rgba(0,0,0,.3);padding: 5px 10px;}

.btn-try:hover{color: #fff;}

.hvr-shutter-out-horizontal:before {background: #ff7a21; }


.note{padding-left: 60px; color: #fff;text-align: center;position: relative;width:100%;max-width:650px;margin-left: auto;margin-right: auto;}

.note p {position: absolute;left: 0;top: 0px;font-size: 18px;}

.note ol{list-style: decimal;text-align: left;}

a.btn.btnType1.btn-try.center.hvr-shutter-out-horizontal {
    border: 1px solid #fff;
    color: #fff;
}

@media (max-width: 350px) {
  
section.p1 .text {    padding-right: 0;}
section.p1 h2.title {    font-size: 22px;}
section.p1 .text .btn-group .btn {    font-size: 15px;}
h2.p4_title {    font-size: 36px;}
section.p6 h3 {    font-size: 28px;}


   
}




    @media all and (-ms-high-contrast:none)
     {
     .col-xl-4{    max-width:none; !important} /* IE10 */
     *::-ms-backdrop, .col-xl-4{    max-width:none;!important} /* IE11 */
     }



@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
   
   
section.p2 .advantage .item {
    width: 100%;
    max-width: 340px;
}
	section.p2 .container{
	text-align: center;
     }