body{font-family: "Arial","微軟正黑體";background-color: #FFF;}
button:focus{outline:none}
.container{position: relative;max-width: 80%;}
a:hover{text-decoration: none;}

p{font-size: 20px;}
h3{display: flex;align-items: center;font-size: 25px;font-weight: 400;transform: translate3d(0px, 0px, 0px);}
h4{line-height: 1.8;}
h6{font-size: 1.8rem;}





/* visual */
header#visual{height: 80vh;overflow: hidden;position: relative;}
header#Visual .master_content{height: 85vh;position: relative;background: url('../images/visual.gif') bottom right no-repeat;background-size: 20%;background-color: #a8c1bf;overflow: hidden;}
header#Visual .master_content:after{content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url('../images/visual.gif') bottom right no-repeat;background-size: 20%;transform:scaleX(-1); z-index: 0;}
header#Visual .master_content .title{display: flex;justify-content: center;align-items: center;}
header#Visual .master_content .title > img {width: 50%;margin-top: -5%;z-index: 1000;}


#bgbaaan {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%) scale(0);
    z-index: 100;

    background: url("../images/radiation.svg") no-repeat center;
    background-size: cover;
    animation: 4s ease fadebaananime 1s forwards, 
    12s linear baananime 5s infinite;
}

@keyframes fadebaananime {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  }
  
  @keyframes baananime {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
  }





/* First */
section#First{background: #b33440;padding: 120px 0;position: relative;}
section#First:before{content: "";width: 100%;height: 80%;position: absolute;bottom: 1000px;left: 0;background: url("../images/bg_footer01_pc.png") no-repeat center;background-size: 100%;z-index: 0;}
section#First .icon2{width: 80%;display: block;}
section#First .benefits-title h2{color: #FFF;font-weight: bold;position: relative;text-align: center;font-size: 2.8rem;margin-bottom: 100px;}
section#First .benefits-title h2:after{background-color: #CDC4B1;bottom: -60px;content: "";display: inline-block;height: 50px;left: calc(50% - 125px);position: absolute;text-align: center;width: 250px;background: url("../images/brush.svg") no-repeat center;}

#First .container-fluid{padding: 0;}
#First .box {background-color: rgba(29, 20, 18, 0.6);overflow: hidden;display: flex;flex-direction: column;align-items: center;text-align: center;width: 100%;padding-bottom: 15px;display: block;text-decoration: none;color: inherit;}
#First .photo {width: 100%;height: 180px;background-size: cover;background-position: center;transition: all .3s ease-in;}
#First .box:hover .photo {background-size: 105%;}
#First .box-link:hover .photo {background-size: 105%;}
#First .box-link {background-color: rgba(29, 20, 18, 0.6);display: flex;flex-direction: column;align-items: center;text-align: center;width: 100%;padding-bottom: 15px;text-decoration: none;color: #fff;transition: all 0.3s ease;}

#First .text {color: #fff;flex-grow: 1;display: flex;align-items: center;justify-content: center;}

#First .bg1 { background-image: url('../images/text-photo-1.jpg'); }
#First .bg2 { background-image: url('../images/text-photo-2.jpg'); }
#First .bg3 { background-image: url('../images/text-photo-3.jpg'); }
#First .bg4 { background-image: url('../images/text-photo-4.jpg'); }
#First .bg5 { background-image: url('../images/text-photo-5.jpg'); }






section#Third{padding: 50px 0;background-color: #ede6dd;background: url("../images/bg.png") center;}
section#Third h5{font-size: 1.5rem;padding-top: 10px;font-weight: bold;}

section#Third .benefits-title h2{color: #B83439;font-weight: bold;position: relative;text-align: center;font-size: 2.8rem;margin-bottom: 60px;}
section#Third .benefits-title h2:after{content: "";background: url(../images/cherry.svg);width: 60px;height: 60px;position: absolute;top: -5px;right: 280px;}
section#Third .benefits-title h2:before{content: "";background: url(../images/cherry.svg);width: 60px;height: 60px;position: absolute;left: 300px;top: -5px;}


#Third .accordion .card-flex {display: flex;justify-content: space-between;align-items: center;padding: 10px 0;}
#Third ol li > ul {list-style-type: disc;}
#Third ol li > ul li ul {list-style-type: circle;}
#Third ol li  ul li::marker{color: #B83439;}
#Third .accordion .card-flex  button.qa-btn {background-color: #412d2d;color: #fff;font-size: 1.1rem;outline: none;border: 0;cursor: pointer;transition: all .3s ease-in;padding: 5px 15px;}
#Third .accordion .card-flex  button.qa-btn:hover {background-color: rgb(111, 78, 78);}
#Third .accordion .card-body {background-color: #FFEAE9;padding: .75rem 1.25rem;border-left: 10px solid #B83439;font-size: 1.1rem;font-weight: 300;}
#Third .accordion .card-body p {font-size: 1.1rem;font-weight: 300;}
#Third .accordion .card-header {border-left: 10px solid #afb5ba;border-bottom:0 solid rgba(0, 0, 0, .125);}
#Third .accordion .card-body .list-tab-g {display: flex;justify-content: center;flex-wrap: wrap;}
#Third .accordion .card-body .list-tab {margin: 20px 0 ;background-color: hsla(0, 0%, 100%, 0.5);width:30% ;padding: 15px;margin: 10px;}
#Third .accordion .card-body .list-tab h5{background-color: #B83439;display: inline-block;padding: 5px 10px;color: #fff;display: block;text-align: center;}
#Third .accordion .card-body .list-tab ul li::marker {color: #B83439;}
#Third .accordion .card-body .list-tab ul {list-style-type: circle;margin:10px 0 0 ;}
#Third .accordion .card-body ul {list-style-type: disc;} 
#Third .accordion .card-body ul li::marker {color: #B83439;}


#Third .accordion .card-flex .text a h5 {color: #5d3737;}
#Third .accordion .card-flex .text a:hover h5 {color: #ba1515;}



/* Path 彈跳視窗設計*/
.modal-footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; padding: 1rem; border-top:none;} .modal-header{ border-bottom:none; }
.modal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 1rem 1rem; }
.btn-black{background-color: #000;}
.btn-black p{color:#F9B600;font-weight: 600;text-align: justify;}
.btn-black:hover{background-color: rgb(32, 32, 32);}
.close { opacity: 1; transition: all .2s linear;}
.close:hover { opacity: .8; }
.modal-content { box-shadow:3px 3px 0px 0px #000; }



.path_btn{width: 22%;height: 50px;text-align: center;background-color: #000;margin: 0 auto;border-radius: 10px;transition: all .3s linear;cursor: pointer;padding:0 10px;}
.path_btn p{color:#fff;line-height: 50px;font-size: 1.2rem;}
.path_btn:hover{background-color: #F9B600;color:#000;}
.path_btn:hover p{color:#000;}
#roadmap>.modal-dialog { max-width: 80%; margin: 1.75rem auto; }

.btn.big {padding: 10px 15px;width: 50%;margin: 40px auto;background-color: #000;color: #fff;display: block;}
.modal-content .btn { background-color: #000; display:block; padding: 5px 20px; color: #fff; border-radius: 8px;cursor: pointer; transition: all .3s ease-in; }


.path{position: relative;}


.Path_btn{position: absolute;cursor: pointer;background-color: rgba(255, 242, 242, 0.15);opacity:1;transition: all .3s linear;}
.Path_btn:hover{background-color: rgba(255, 255, 255, 0)}
.Path_btn01{width: 16.6%; height: 10.8%; top: 30.5%; right: 17.9%;}
.Path_btn02{width: 16.6%; height: 10.8%; top: 72.8%; left: 41.7%;}
.Path_btn03{width: 16.6%; height: 10.8%; top: 58.6%; left: 53.8%;}
.Path_btn04{width: 16.6%; height: 10.8%; top: 44.8%; left: 53.8%;}
.Path_btn05{width: 16.6%; height: 10.8%; top: 44.8%; left: 77.5%;}
.Path_btn .click img{position: absolute;top:1%;left:2%;animation: click 1.5s ease-in infinite;width: 50px;}


.modal-content .btn { background-color: #000; display:block; padding: 5px 20px; color: #fff; border-radius: 8px;cursor: pointer; transition: all .3s ease-in; }
.modal-content .btn p{ color: #fff;margin: 0; }
.modal-content .btn:hover {background-color: #3e3e3e;}
.btn.big {padding: 10px 15px;width: 50%;margin: 40px auto;background-color: #000;color: #fff;display: block;}
.btn.big h5 {margin: 0;}


@keyframes click {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(0.8);
        opacity: .5;
    }
  }



/* 學員心得 */
section#Discount{background: #8d8a87;padding: 50px 0 50px 0;position: relative;}
section#Discount:before{content: "";width: 100%;height: 100%;position: absolute;bottom: 0;right: 0;background: url("../images/Discount_bg.png") no-repeat 200px -70px;background-size: 90%;z-index: 0;}
section#Discount .icon{width: 65%;}
.custom-card{box-shadow: 4px 4px 32px rgba(2, 162, 146, 0.15);border: 3px solid #FFF;min-height: 450px;}

section#Discount .benefits-title h2{color: #FFF;font-weight: bold;font-style: italic;position: relative;text-align: center;font-size: 2.8rem;margin-bottom: 100px;}
section#Discount .benefits-title h2 span{background-color: #6ca196;padding: 1% 3%;}

.preface{width: 100%;height: 15vh;position: relative;display: flex;flex-direction: column;align-items: center;}
.preface > p{position: absolute;bottom: -20px;background-color: #FFFFFF;width: 70%;padding: 3%;margin-top: 20px;font-size: 1.4rem !important;font-weight: 600 !important;color: #B07220 !important;border-radius: 10px;padding-top: 60px;}
.preface > p:before{content: '';position: absolute;left: 20px;top:20%;-webkit-transform: translate(0, -50%);width: 50px;height: 50px;background: url(../images/comma.svg) no-repeat bottom center;}
.preface > p:after{content: '';position: absolute;right: 20px;bottom: -10px;-webkit-transform: translate(0, -50%);width: 50px;height: 50px;background: url(../images/comma-d.svg) no-repeat bottom center;bottom: ;}




/*photo*/
div.block{overflow: hidden;background-size: cover;}
div.Page01-image{background: transparent url(../images/person_01.png) 50% 0 no-repeat;}
div.Part1{padding-left: 50px;}
div.Left{padding-left: 15%;}

section#btnLink h3{font-size: 2.1rem;}
section#btnLink p{text-align: justify;}
.name{color: #fff69a;}




/* btnLink */
section#btnLink{padding: 70px 0;background: #95B9B9;position: relative;}
section#btnLink:before{content: "";width: 100%;height: 100%;position: absolute;bottom: 0;right: 0;background: url("../images/footer_pc.png") no-repeat bottom;background-size: 100%;z-index: 0;}
section#btnLink .icon > img{width: 8%;display: block;margin: auto;}
section#btnLink .container > p{font-size: 1.8rem;}
section#btnLink button{ width: 100%; margin: 15px auto 25px auto; display: block; background: #fff69a; color:#000; border: 3px solid #000; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.3rem;}
section#btnLink button:hover{transition: all .4s ease;box-shadow: 0 15px 20px -4px rgb(0 0 0 / 10%);opacity: 0.8;background-color: #ff6629;}

#btnLink .Item p span{background-color: #B83439;padding: 5px 6px;border-radius: 4px;color: #fff;}





@media(min-width: 1441px){.container {max-width: 1320px;}}
@media(max-width: 1440px){}
@media(max-width: 767px){

.container{max-width: 100%;}


/* visual */
header#visual{height: 55vh;}
header#Visual .master_content{height: 55vh;}
header#Visual .master_content .title > img {width: 100%;}
section#First:before{background: none;width: 0;}
section#Third .benefits-title h2:after{background: none;width: 0;}
section#Third .benefits-title h2:before{background: none;width: 0;}

#Third .accordion .card-flex .text {width: 95%;}
.preface > p{width: 100%;padding-top: 55px;}
.preface > p:before{content: '';position: absolute;left: 20px;top:15%;}
.preface > p:after{content: '';position: absolute;right: 20px;bottom: -25px;}
.Path_btn .click img{width: 20px;}

/* btnLink */
div.Part1{padding-left: 0;}
section#btnLink .btn{width: 100%;}
div.Page01-image{background: transparent url(../images/person_01.png) 10% 0 no-repeat;}

}