*{font-family: '微軟正黑體', 'Microsoft Jhenghei', 'Arial', sans-serif;box-sizing: border-box;}
body{background: url("../images/blue_bg.jpg") repeat right;overflow-x:hidden;scroll-behavior: smooth;background-attachment: fixed;}
h1, h2, h3, h4, h5, h6 { font-weight: 800;clear: both;}
a{ text-decoration: none;color: #92a0a1;transition: all .2s linear;word-break: break-all;}
a:hover{ text-decoration: none;color: #6b797a; }

button{outline:none;}
button:focus{outline:none;}
br{line-height: 150%;}
hr{margin: 20px 0 0;}



/*bootstrapt 間距設定*/
/* .container {padding-right:10px;padding-left: 10px;} */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { padding-right: 15px; padding-left: 15px; }

/* RWD 整體寬度調整*/
div.content { width: 1200px; margin: auto; clear: both;}
header, section { width: 100%; margin: 0; clear: both; padding: 0;}
section p,section li{ margin-bottom: 0rem;font-weight: 500; color: #000;font-size: 1.2rem;text-align: justify;}


/* youtube 影片 */
.video-width { width:100%; margin: 0 auto;border: 10px solid rgb(0, 0, 0); }
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* owl輪播點點修正 */
.owl-carousel span { width:10px; height:10px; margin:5px 7px; background: #c2c2c2 !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.owl-carousel .active span { width:10px; height:10px; margin:5px 7px; background: #07AEB7 !important; display:block; -webkit-backface-visibility:visible; -webkit-transition:opacity 200ms ease; -moz-transition:opacity 200ms ease; -ms-transition:opacity 200ms ease; -o-transition:opacity 200ms ease; transition:opacity 200ms ease; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; }
.search_left{top:50%;left: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_left:active{color: #d1d1d1;}
.search_right{top:50%;right: -30px;position: absolute;color: #b3b3b3;font-size: 2rem;transition: .4s;}
.search_right:active{color: #d1d1d1;}

/* 基本操作 */
.text_center{text-align: center;}
.text_left{text-align: left;}
.flex{display: flex;}
.clear{clear: both;}

/* 共用 */
.title_w100{width: 100%;background-color: #000000;padding: 20px;text-align: center;color: #fff;}
.title_w100 h2{line-height: 3rem;font-size: 2.4rem;}
.title_line{height: 5px;width:20%;background-color: #FFD45A;margin: 10px auto 20px;}
.b_text p{font-size: 1.3rem;line-height: 2rem;text-align: justify;}
.content .container > h2 { color: #247BA0;margin:0; line-height: 2.6rem;}

/* AD */
div.EventAD { width: 120px; display: block; position: fixed; right: -20px; top: 50px; z-index: 200; animation-name: EventAD-M; animation-duration: 5s; animation-iteration-count: infinite; }
div.EventAD:hover { width: 130px; right: 25px; transition: 0.3s; animation-iteration-count: initial; animation-name: initial; }
@keyframes EventAD-M { 0%{ right: -20px; } 70%{ right: 25px; } 100%{ right:-20px; } }
div.EventAD img { width: 100%; box-shadow: 0 0 15px rgb(120, 120, 120); border-radius: 10px; }
div.EventAD img:hover { box-shadow: 0 0 20px rgb(150, 150, 150); }

/* SocialMedia */
div#SocialMedia { position: fixed; right: 10px; bottom: 50px; z-index: 1000;}
div#SocialMedia ul { list-style: none; }
div#SocialMedia ul li { background: rgba(0,0,0,0.75); color: #FFF; width: 40px; height: 40px; line-height: 40px; font-size: 1.25em; text-align: center; margin: 8px 0 0 0; border-radius: 4px; }
div#SocialMedia ul li a { color: #FFF; }
div#SocialMedia ul li.FB:hover { background: #39507C; transition: .20s linear;  }
div#SocialMedia ul li.Youtube:hover { background: #DB1B1B; transition: .20s linear; }
div#SocialMedia ul li.Contact:hover { background: #096; transition: .20s linear; }
@media(max-width:767px){
    div.EventAD, div#SocialMedia{ display: none; }
}


/* Visual */
header#Visual{ position: relative;}
.master_width{border: 1px solid rgba(255, 0, 0, 0);display: block;position: relative;width:70%;margin: 0 auto;}
div.IMP { width:60%;  position: absolute;z-index: 99;right: 0;top:40px}
div.IMP > img{ width: 100%; }
.header_text{position: absolute;right: 0;top:0;width: 30%;}
.header_text img{width: 100%;}
.window_box_all{position: relative;width: 100%;display: block;margin:20% auto 40px;position: relative;}
.window_box{border: 3px solid #000;background-color: #fff;}
.window_box.box_1{width: 62%;display: block;z-index: 10;position: relative;left:0;bottom: 0;}
.window_box.box_2{width:20%;position: absolute;right:21%;bottom:4%;z-index:0;}
.window_box.box_3{width: 32%;position: absolute;right:4%;top:27%;z-index:0;}
.window_box .window_icon{border-bottom:3px solid #000;text-align: right;padding:5px;}
.window_box .window_icon img{width:15%;}
.window_box .window_icon.color_1{background-color: #FFF1AE;}
.window_box .window_icon.color_2{background-color: #EA526B;}
.window_box .window_icon.color_3{background-color: #27A9E0;}
.window_text{padding:12px 20px 0;text-align: center;}
.window_text img{width: 80%;margin: 0 10%;} 
.window_box img{width:100%;margin:0;}
.window_text p{font-size: 1.05rem;margin: 20px 0;}
.girl{width:28%;position: absolute;top:-16%;left: 6%;z-index: 99;}
.girl img{width: 100%;}
.play img{cursor: pointer;}

/* div.foreword{width:65%; text-align: justify; margin: 10px auto;}
div.foreword > h2{ font-size: 2.4rem; font-weight: bold; }
div.foreword > p{ font-size: 1.1rem; line-height: 2.2rem;} */

section h1.title{ background: rgb(255,210,0); padding: 35px 0; margin-bottom: 0; text-align: center; font-weight: bold; color:rgb(0,0,0); line-height: 3.5rem;}
section div.content{ width:1280px; margin:0 auto; display: block;}
section div.row{ margin-left: 0; margin-right: 0; }

/* 立體 */
.cube{
	width:200px;
	height:200px;
	margin: 110px auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
	/*����*/
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 1;
	transition: all .4s;
}

.cube img{
    border:3px solid #000;
}
/*��������ͼƬ��ʽ*/
.pic{
	width: 200px;
	height: 200px;
}
.cube .out_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}
/*����С��������ʽ*/
.cube span{
	display: bloack;
	width: 70px;
	height: 70px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 70px;
	height: 70px;
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(35px);
}
.cube .in_back{
	transform: translateZ(-35px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(35px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(35px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(35px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(35px);
}
/*����������ʽ*/
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(150px);
}
.cube:hover .out_back{
	transform: translateZ(-150px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(150px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(150px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(150px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(150px);
}


/* 主視覺btn*/
.title_btn{  margin: 0 auto; display: block; background: #ff9000; border-radius: 7px; color: rgb(255,255,255); transition: .15s linear; padding: 10px;font-size: 1.2rem; border: none; cursor: pointer; font-weight: 500; position: absolute;bottom:135px;left:40%}
.title_btn:hover{ background: #ff9d1d;}


/* PageA 內容設定*/
section#PageA{background-color: #FFFBEB;background:url("../images/pageA_bg.gif") repeat-y;background-size: 100%;}
section#PageA .content {margin: 0px auto;padding: 40px 0;}
#student_1{width: 100%;margin:40px 0 0;}
#student_2{width: 100%;margin:100px 0 0;}
#student_3{width: 100%;margin:100px 0 40px;}

.student_img img{width: 100%;}
.owl_img{cursor: pointer;}
.owl_img img{width: 100%;}
p.gallery { text-align: center; font-size: 1rem; color: rgb(114, 114, 114);}


/* 前後職業 */
ul.profession{list-style: none;padding: 15px 0;}
ul.profession > li .before_after{color:#fff; font-size: 1rem;padding: 5px;width: 60px;display: inline-block;text-align: center;margin: 0 5px 0 0;}

/* 作品輪播 */
.owl_content_all{ width: 70%;margin:40px auto 0;text-align: justify; }
.owl_img img{ width: 100%; }

/* 作品跳窗 */
.modal-body img{width: 100%;}
.modal-header { padding: 1rem 1rem 0;border-bottom: 0px; }





.student_img{margin: 30px 0;}



.pageA_offer{ background-color: #FFF7E9;width: 100%;border-radius: 20px;padding: 20px;margin: 20px 0; }
.pageA_offer .row h4{color:rgb(207, 0, 0);line-height: 2.2rem;}
.pageA_offer .row p > span{color:#FF7F00;}
.offer_img{width: 100%;}





/* PageB 內容設定*/
section#PageB {position: relative;}
section#PageB .content {margin: 0px auto;padding: 40px 0;}
.pageB_box{background-color: #FFF8D9;width:48%;padding: 20px;margin: 40px 0;border:3px solid #000;position: relative;}
.pageB_box::before{content:"";position: absolute;z-index: -99;width:120px;height:120px;background: url(../images/pageB_box_bg.png) no-repeat;background-size:cover ;left: -20px;top:-20px;}
.pageB_box:nth-child(1)  {margin-left: 5%;}
.pageB_box:nth-child(2)  {margin-left: 0%;}
.pageB_box:nth-child(3) {margin-left: 15%;}
.sm_font{color: #6b797a;font-size: 1rem;}

.pageB_box .step{width: 180px;margin: 5px 0;}
.pageB_box .step img{width: 100%;}
.pageB_photo{position: absolute;width:28%;z-index: 99; animation:people 2s infinite alternate-reverse;  }
@keyframes people{
        from{
				
            right:16%;top:20%;
        }
        to{
		
            right:16%;top:25%;
        }


}

/* PageC 內容設定*/
section#PageC{background-color: #FFFBEB;background:url("../images/pageC_bg.gif") repeat-y;background-size: 100%;}
section#PageC .content {padding: 20px 0 80px;}
section#PageC .content div > h2 {  text-align: center;}
.pageC_box {background-color: #D4F2FF;width: 100%;border:3px solid #000;position: relative;margin: 40px 0;
    padding: 20px;box-shadow: -15px 25px 1px 10px #000;}

.pageC_box .title{text-align: center;margin:10PX auto;}
.pageC_box .title .ribbon{background: url(../images/ribbon_bg.png) no-repeat;height:70px;width:500px; margin: 0 auto;   background-size: cover;}
.pageC_box .title .ribbon > h5{line-height:70px;color: #fff;}

.pageC_box .photo{display: flex;justify-content: center;width: 80%;margin:10px auto;}
.pageC_box .photo img{width: 48%;margin: 10px 10px 0;}



.photo_work{width:80%;margin:10px auto;}
.photo_work img{width: 100%;}
.photo_work_sm{display: flex;width: 80%;margin:10px auto; flex-wrap: wrap;}
.photo_work_sm img{width: 25%;margin:5px;cursor: pointer;opacity:0.5;}




/* PageD內容設定*/
section#PageD{ height: auto; background:url("../images/25060.jpg") no-repeat center; background-size: cover; background-attachment: fixed;}
section#PageD div#Box1{ width:100%; }
section#PageD div#Box2{ width:100%; }
section#PageD div.Box > h1{ font-size: 2.85rem; color: rgb(255, 255, 255); font-weight: bold; text-align: center; line-height: 4.35rem; text-shadow: 0 0 10px rgba(0,0,0,0.7); padding-top: 19%; padding-left: 15%;}
section#PageD div.Form{ padding-top: 8%; }
section#PageD div.Form ul { width: 480px; padding: 30px 40px; list-style: none; clear: both; background: #fff; border-radius: 13px; }
section#PageD div.Form ul li { margin: 10px 0;border: 1px solid #ced4da; border-radius: 0.25rem; text-align: center;}
section#PageD div.Form ul li input { width: 100%; height: 50px; border:0; border-radius: 5px; padding: 0 12px; font-size: 18px;}
section#PageD div.Form ul li.send input { background: #ee3b24; color: #FFF; font-size: 22px; margin-top: 20px;}
section#PageD div.Form ul li.send input:hover { background: #222; transition: 0.2s; }
section#PageD div.Form ul li.send{border: 0;}

div.thx{ background:rgb(250,250,250); position: fixed; width:500px; height:200px; z-index:999; border-radius: 15px; border: 1px solid rgba(0,0,0,0.3); box-shadow: 0 0 20px rgba(0,0,0,0.4); left:50%; top:50%; margin-left:-250px; margin-top:-200px; padding-top: 45px;}
div.thx p{ font-size: 1.8rem; text-align: center; color: rgb(80, 80, 80);}
div.thx a {color: rgb(250,250,250); text-decoration: none; -webkit-text-decoration-skip: objects; text-align: center; position: absolute; bottom: 15%; left: 50%; margin-left: -40px; font-size: 1.25rem; letter-spacing: 0.1rem; background:rgb(100, 100, 100); border-radius: 5px; padding: 7px; width: 80px;}
div.thx a:hover{ background:rgb(131, 0, 0); }

section#PageD div.Form ul li.checkbox-input.white {color: #fff;}
section#PageD div.Form ul li.checkbox-input.black {color: #000;}
section#PageD div.Form ul li.checkbox-input {border: none;}
section#PageD div.Form ul li.checkbox-input input{width: 20px;height: 20px;display: inline;margin: 0 5px;}
section#PageD div.Form ul li.checkbox-input span {padding-bottom: 5px;} 
section#PageD div.Form  ul li.send input[disabled],section#PageD div.Form ul li.send input:disabled{ background-color: rgba(98, 33, 33, 0.8);cursor:default;}

section#PageD div.Form ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
section#PageD div.Form ul li.area p{font-size: 16px;text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;}
section#PageD div.Form ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
section#PageD div.Form ul li.area label{margin-right: 5px;font-weight: 400;font-size: 15px}






section#PageE .content {margin: 0px auto;padding: 60px 0 80PX;}
section#PageE .content .video-container {background-color: #000;border: 5px solid #000;}


/* btn 內容設定 */
/* section#btn .content {margin: 0px auto 30px;}
.page_btn{background: #FFD45A;height: 80px;width: 90%;text-align: center;border-radius:10px ;transition: all .5s linear;}
.page_btn:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
.inner{display: inline-block; vertical-align: middle; padding: 3px 5px;}
.inner p{font-size: 1.2rem;color:#000;}
.page_btn:hover{background-color: #ffe292;} */




/* Footer */
footer{ font-size: 0.95rem; }


/* RWD Setting */
@media(max-width:1750px){
 
}

@media (max-width: 1440px) {
    div.content { width: 1100px; margin: 0 auto;}
    /* Visual */
    .master_width {
        border: 1px solid rgba(255, 0, 0, 0);
        display: block;
        position: relative;
        width: 90%;
        margin: 0 auto;
    }





    
} 


@media (max-width: 1199px) {
    /* RWD 整體寬度調整*/
    div.content { width: 1000px; margin: 0 auto;}
    section p { font-size: 1rem;line-height: 1.6rem;}
    section h1.title{ padding: 25px 0; line-height: 3.35rem; font-size: 2.35rem;}
    section div.content{ width:100%; }

    /* Visual */


    /* PageB 內容設定*/
    .pageB_photo{position: absolute;width:40%;z-index: 99; animation:people 2s infinite alternate-reverse;  }
    @keyframes people{
        from{
				
            right:2%;top:20%;
        }
        to{
		
            right:2%;top:25%;
        }
}

}

@media (max-width:991px) {
    /* RWD 整體寬度調整*/
    h2{font-size: 1.7rem;}
    h4{font-size: 1.2rem;}
    h5{font-size: 1.1rem;}
    
    section p, section li { font-size: 1rem; line-height: 1.6rem; }
    /* Visual */

    div.content { width:90%; }
    .girl { width: 28%; top: -11%; left: 8%; }


    /* PageA 內容設定*/
    section#PageA{background: #FFFBEB;}

    /* PageB 內容設定*/
    section#PageC{background: #FFFBEB;}
   
    /* PageC 內容設定*/
    .lesson_title img {
        width:90%;
    }
    
   /* PageD 內容設定*/
    section#PageD div.Form ul { width: 396px; }

    /* btn內容設定 */
    /* .page_btn{margin: 20px auto 0;font-size: 1.1rem; width: 100%;} */
}


@media (max-width: 900px) {
 
    /* Visual */
   
 
} 


@media (max-width: 767px) {
    /* Visual */
    div.IMP { width: 100%; }
    .header_text {width: 40%; }
    .window_box_all { margin: 62% auto 40px; }
    .girl { width: 35%; top: -8%; left: 8%; z-index: 99; }
    .window_box.box_1 { width: 80%; }
    .window_box.box_2 { right: 8%; }
    .window_box.box_3 { right: 0%; }


    
    /* PageB 內容設定*/
    .pageB_box{background-color: #FFF8D9;width:80%;padding: 20px;margin: 40px 0;border:3px solid #000;position: relative;}
    .pageC_box .title .ribbon { height: 53px; width:400px; }
    .pageC_box .title .ribbon > h5 { line-height:53px; }

    /* PageC 內容設定*/
    .pageC_box {padding: 15px;}
    .lesson_title{margin: 20px 0;}
    .lesson_img {margin: 10px 0 40px;}


   /* PageD 內容設定*/
    section#PageD { height: 885px; }
    section#PageD div.Box > h1 { font-size: 2.85rem; color: rgb(255, 255, 255); font-weight: bold; text-align: center; line-height: 4.35rem; text-shadow: 0 0 10px rgba(0,0,0,0.7); padding-top: 10%; padding-left: 0; }
    section#PageD div.Form ul { width: 450px; margin:0 auto; }
    section#PageD div.Box > h1 { font-size: 2.3rem; line-height: 4rem; }



   /* PageE 內容設定*/

    section#PageE .content .video-container {margin: 0 0 20px;}





}

@media (max-width: 575px) {
    body { margin: 0;}
    /*RWD 整體寬度調整*/
    i{margin-right: 5px;}
    h5{font-size: .9rem;}
    h4{font-size: 1.1rem;}
    h3{font-size: 1.5rem;}
    h2{font-size: 1.6rem;}
    div.content { width: 96%; padding: 0 2%; }
    section { padding: 0; margin: 0; }
    section h1 { font-size: 1.3em; line-height: 0.8; }
    section p,section li{  color: #555;margin-bottom: 0rem;font-size: .9rem;line-height: 1.6rem;font-weight: 600; }

    /*共同 */
    .b_text p { font-size: 1.2rem; line-height: 1.6rem;  }
    .content .container > h2 {line-height: 1.8rem; }
    .title_line { width: 60%; }
    .title_w100 h2{line-height: 2rem;font-size: 1.6rem;}



    /* youtube 影片 */
    .video-width{width: 100%; margin: 0 auto;}

    /* Visual */
 
    



    .window_box.box_1{width:85%;}
    .window_text { padding: 10px 10px 0; }
    .window_text p{font-size: 1rem;margin: 20px 0;}
    /* PageA 內容設定*/
    section#PageA ul > li { font-size: 1.1rem;}
    section#PageA .content > h4 { line-height: 1.6rem;}
    .pageA_offer { padding: 10px;}
    .window_box.box_2 { width: 25%; right: 8px; bottom: 40px; }
    .window_box.box_3 { width: 32%; right: 0px; top: 100px; }




    /* PageB 內容設定*/
   
    .pageB_box { background-color: #FFF8D9; width: 80%; padding: 15px; }

    .pageB_photo{position: absolute;width:35%;z-index: 99; animation:people 2s infinite alternate-reverse;  }
    @keyframes people{
        from{
				
            right:1%;top:10%;
        }
        to{
		
            right:1%;top:12%;
        }

    }

   /* PageC 內容設定*/
    .pageC_box .title .ribbon {height: 40px;width: 100%;}
    .pageC_box .title .ribbon > h5 { line-height:40px; }
    .pageC_box .photo{width: 100%;}
    .pageC_box .photo img { width: 48%; margin: 10px 5px 0; }

    .photo_work { width:100%; }
    .photo_work_sm { width: 100%; margin: 10px auto; }
    .photo_work_sm img {
        width: 25%;
        margin: 5px;
        cursor: pointer;
        opacity: 0.5;
    }
    /* btn內容設定 */
    /* .inner p { font-size: 1rem; color: #000; } */
  

    /* PageD 內容設定*/
    section#PageD { height: 905px; background-size: cover; }
    section#PageD div.Box > h1 { font-size: 2.4rem; color: rgb(255, 255, 255); font-weight: bold; text-align: center; line-height: 3.8rem; text-shadow: 0 0 10px rgba(0,0,0,0.7); padding-top: 10%; padding-left: 0; }
    section#PageD div.Form ul { width:95%; margin:0 auto; }
}

@media (max-width:400px) {
    /* Visual */



    div.foreword{width:90%; text-align: center; margin: 5px auto;}
    div.foreword > h2{ font-size: 1.9rem;  }
    div.foreword > p{ font-size: .9rem; line-height: 1.8rem;text-align: justify;}
}