@charset "big5";
* {
	box-sizing:border-box;
}
html, body {
	height: 100%;
    position: relative;
}
body {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
　overflow-x: hidden;
	/*font-family: 'Roboto', 'Arial', 'Noto Serif TC', '微軟正黑體', sans-serif;*/
	/*font-family: 'Roboto','Noto Sans TC', '微軟正黑體',sans-serif;*/
    
}


/* ============ header============ */

/*第一層 主視覺*/
header{
background-image: url("../images/bg.png");
height:1145px; 
position: relative;
}

.fixed-width {
    width: 1200px;
    margin: 0 auto;
	position: relative;
	height: 100%;
}

h1{
    text-indent: -9999px;
    height: 0px;
}

#TopTitle{
    background-image: url("../images/top-title.png");
    height: 175px;
    width: 830px;
    position: absolute;
    top: 4%;
    left: 15%;
    /*transform: translate(-50%,-50%);*/
    display:flex;
}

#problemset{
    background-image: url("../images/white-frame.png");
    height: 674px;
    width: 846px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: -8px;
    display: inline-block;
    line-height: 200px;
    text-align: center;
       
}


#question01{
    background-image: url("../images/question-1.png");
    height: 185px;
    width: 714px;
    margin: 40px  auto 0px;
}

#question02{
    background-image:url("../images/question-2.png") ;
    height: 186px;
    width: 715px;
    margin: auto;
   
}

.cirle-icon_a img{
    width: 250px;
    height: auto;
    display:  flex;
    position: absolute;
    top: 348px;
    left: 190px;
    opacity: 0;
    transition: 0.5s;
}

.cirle-icon_a img:hover {
     opacity: 1;
}

.cirle-icon_b img{
    width: 250px;
    height: auto;
    display:  flex;
    position: absolute;
    top: 348px;
    left: 439px;
    opacity: 0;
    transition: 0.5s;
}

.cirle-icon_b img:hover {
     opacity: 1;
}


#question03{
    background-image: url("../images/question-3.png") ;
    height: 186px;
    width: 714px;
    margin: auto;
    bottom: 50px;
}

.tick-icon{
    width: 618px;
    height: 72px;
    margin: 0 auto;
    position: absolute;
    bottom: 100px;
    right: 104px;
    display: flex;
}
.tick-icon img {
   /* border: 1px solid #000;*/
}

#tick-icon_01{
    width: 40px;
    height: auto;
    position: absolute;
    bottom: 40px;
    left: -10px;
    opacity: 0;
    transition:width 1s,height 1s;
}

#tick-icon_01:hover {
    width: 70px;
    height: auto;
    opacity: 1;
}

#tick-icon_02{
    width: 40px;
    height: auto;
    position: absolute;
    bottom: 40px;
    left: 288px;
    opacity: 0;
    transition:width 1s,height 1s;
}

#tick-icon_02:hover {
    width: 70px;
    height: auto;
    opacity: 1;
}

#tick-icon_03{
    width: 40px;
    height: auto;
    position: absolute;
    bottom: 40px;
    left: 470px;
   opacity: 0;
    transition:width 1s,height 1s;
}

#tick-icon_03:hover {
    width: 70px;
    height: auto;
    opacity: 1;
}

#tick-icon_04{
    width: 40px;
    height: auto;
    position: absolute;
    bottom: 5px;
    left: -10px;
    opacity: 0;
    transition:width 1s,height 1s;
}

#tick-icon_04:hover {
    width: 70px;
    height: auto;
    opacity: 1;
}


#tick-icon_05{
    width: 40px;
    height: auto;
    position: absolute;
    bottom: 5px;
    left: 288px;
    opacity: 0;
    transition:width 1s,height 1s;
}

#tick-icon_05:hover {
    width: 70px;
    height: auto;
    opacity: 1;
}



#image_book{
    height: 127px;
    width: 262px;
    position: absolute;
    bottom: 119px;
    left: -55px;
   
}

#image_girl{
    height: 334px;
    width: 497px;
    position: absolute;
    right: -111px;
    bottom: 100px;
    
}


#bottomborder{
    height: 125px;
    position: absolute;
    right: 0;
    bottom: 0;
     left: 0px;
    top: 1020px;
    margin: auto;
    background-color: #41ffd9;
    
}

#bottomborder p{
    margin: 0px  auto;
    padding: 45px 0 25px;
    font-size: 2em;
    line-height: 1.2em;
    font-weight: 500;
    text-align: center;
    color:#7C4FFC;
    font-family: "GenJyuuGothicP" , sans-serif;
}



/*表單 */
.footer-innter {
    width: 1200px;
    margin: 0 auto;
	position: relative;
	height: 100%;
}



/*第三層 */

#section01{
    background-image: url("../images/compete bg.jpg");
    height: 380px;
    position: relative;
    
}

.fixed-width {
    width: 1200px;
    margin: 0 auto;
	position: relative;
	height: 100%;
}

#compete-L{
    background-image: url("../images/compete-title.png");
    width: 623px;
    height: 108px;
    margin: 0;
    display: block;
    float: left;
    position: absolute;
    top: 35%;
    left: 0%;
    
}

#compete-R{
    background-image: url("../images/compete-man-1.gif");
    width: 542px;
    height: 358px;
    margin: 0;
    display: block;
    float: right;
    position: absolute;
    top: 6%;
    right: 3%;
    
}


/* 第四層 主要內容區 */
#section02{
    background-image: url("../images/content_bg.png");
    min-height: 1646px;
    padding-top: 100px;
    margin-top: -1px;
    overflow: hidden;

}

.fixed-width {
    width: 1200px;
    height: 1145px;
    margin: 0 auto;
	position: relative;
	height: 100%;
}

#sectitle01{
    width: 1004px;
    height: 125px;
    margin: 0px  auto;   
}

#section02 h4 {
    margin: 0px  auto;
    padding: 60px 0 25px;
    font-size: 2.3em;
    line-height: 1.2em;
    font-weight: 500;
    text-align: center;
    color: #FFFFFF;
    font-family: "GenJyuuGothicP" , sans-serif;
}

.sec02img{
    width: 1100px;
    min-height: 200px;
    margin: 0px auto;
    padding:2px ;
}

#sec02all{
    padding-left: 37px; 
}

.sec02img01{
    margin-right: 50px;
    margin-bottom: 50px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.sec02img01:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.sec02img02{
    margin-right: 50px;
    margin-bottom: 50px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    
}

.sec02img02:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.sec02img03{
    margin-bottom: 50px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.sec02img03:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.sec02img04{
    margin-right: 50px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.sec02img04:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.sec02img05{
    margin-right: 50px;
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.sec02img05:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}


.sec02img06{
   
    -webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.sec02img06:hover{
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}


#sec02icon{
    width: 1008px;
    min-height: 200px;
    margin: 0px auto 90px;
    padding-top: 20px;
}
.sec02icon01_free{
   position: absolute;
   margin-top: -15px;
}

.sec02icon02_free{
    position: absolute;
    margin-top: -15px;
    margin-left: 355px;
}


.sec02icon_img01{
    margin-right : 45px;
}

.sec02icon_img02{
    margin-right : 45px;
    
}

/*學員感言 */

.student{
    background-color: #C4B4FF;
    height: 682px;
    position: relative;
    top: -74px;
}

/*.fixed-width {
    width: 1200px;
    margin: 0 auto;
	position: relative;
	height: 100%;
}*/

 #stu-content{
    width: 1004px;
    height: 125px;
    margin: 55px 87px;
    position: absolute;   
}

.slick-stu{
    width: 100%; height: 354px; 
    margin: 0 auto; 
    position: relative; 
    top:215px;
}


.slick-stu img {
     margin: 0 auto; 
}

.slick-next {
    right: 12%;
}

.slick-prev {
    left: 12%;
}

.slick-prev:before, .slick-next:before {
    color: #fff;
}


.slick-dots {
    position: absolute;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

img {
    vertical-align: top;
}

h1,h2,h3,h4,h5,p,a {
    text-justify: auto;
    text-decoration: none;
    text-align: justify;
}

#ClickTitle {
	height: 74px;
	position: relative;
	z-index: 100;
}

/*回表單*/


.goDownBtn{
    position: fixed;
    bottom: 20px;
    z-index: 100;
   -webkit-animation: gotoTop .5s steps(2) infinite alternate;
    animation: gotoTop .5s steps(2) infinite alternate;
    cursor: pointer;
    right: 8px;
    transition: all 0.2s;
scroll-behavior: smooth;
}

.goDownBtn:hover{
    opacity: .8;
    transition: .5s;
}

.goDownBtn img{
	max-width:120%;
	margin: 0 auto;
}


#footer{
    position: relative;
    padding: 20px 0;
	width:100%;
    text-align: center;
    overflow: hidden;
	background: #FFD15F;
}

.blink {
    animation-duration: .6s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    81% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}