@charset "utf-8";
/* CSS Document */


#newitem { position:relative; width:1000px; margin:0 auto; }
#back_font{ word-wrap:break-word; word-break:break-all; position:absolute; left:-9999px; width:500px; padding-top:20px;}

body{font-family:"Century Gothic","Microsoft JhengHei";color: #333;text-align: center;background-color: #ee2881;}

*{ -webkit-box-sizing: border-box;
          box-sizing: border-box;
   margin: 0; padding: 0;
/*	transition: all .3s ease;*/
}

a{ text-decoration: none; }
img { border:0; display: block; margin: auto;}
area{ outline:none; display: block;}
#header{ height: 70px; padding-top: 10px; border-top: #ff8a82 5px solid; z-index: 999;position: relative;}
#header img{ width: 10%; }
#footer{ height: 65px; padding-top: 20px; font-size: 0.8em; background-color: #ff8a82; color: #fff;}
.bg{ background-color: #fff; color: #aaa; }
.word_m{ display: none; }
.FGlogo a{
  width: 100%;
  height: 100%;
  display: block;
}
.logosvg{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    max-width: 240px;
    height: auto;
}
h3{font-size: 1.8em;}
h4{font-size: 1.4em;}

/*大框架 */
#wrapper{
	width: 100%;
  background-color: #ee2881;
  background-repeat: repeat-y;
  background-position: top center;
}

.container{ position: relative; margin: auto; width: 100%; max-width: 1000px; padding: 3% 0;text-align: center;}
.tit_pc{display: block;}
.tit_m{margin: auto;display: none;}
.pic_m{display: none;}

/* 主視覺kv */
#kv{position: relative;height: 700px;background-color: #ee2881;overflow: hidden;}
.kv_peo{position: absolute;right: -13%;top: -75px;z-index: 20;display: none;}
.kv_logo{position: absolute;top: 30px;left: -10%;}
.kv_tit{position: absolute;top: 110px;left: -50px;display: none;}
.kv_txt{position: absolute;top: 420px;left: -10px;display: none;}
#kv_m{display: none;}

/*intro_01-1 */
#intro{position: relative;height: 1370px; background: url(../images/bg_01.jpg) no-repeat center;}
.intro_box_01 p,.intro_box_03 p{color: #FFF000;padding: 70px 84px 15px 32px;}
.intro_box_02 p{color: #FFF000;padding: 70px 32px 15px 84px;}
.intro_box_04 p{color: #FFF000;padding: 84px 32px 15px 84px;}
.intro_box_01 h3,.intro_box_03 h3{color: #FFF;padding: 0px 126px 0px 75px;}
.intro_box_02 h3,.intro_box_04 h3{color: #FFF;padding: 0px 75px 0px 126px;}

.top{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 7%;position: relative;}
.bottom{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 6%;position: relative;}

.intro_box_01{max-width: 100%; width: 324px;height: 190px;background: url(../images/index_02-1.png) no-repeat;;}
.intro_box_02{max-width: 100%; width: 324px;height: 190px;background: url(../images/index_02-2.png) no-repeat;;}
.intro_box_03{max-width: 100%; width: 324px;height: 190px;background: url(../images/index_03-1.png) no-repeat;;}
.intro_box_04{max-width: 100%; width: 324px;height: 190px;background: url(../images/index_03-2.png) no-repeat;;}

/*intro_01-2 */
.intro2_Box{display: -webkit-box;display: -ms-flexbox;display: flex;}
.intro2_bg{width: 500px;height: 85px;background-color: #FFF;border: 2px solid #ff2b89;margin: 3% 0 7% 0;; -webkit-box-shadow: 10px 10px 5px 0px #f9adb6;; box-shadow: 10px 10px 5px 0px #f9adb6;border-radius: 100px;padding: 15px 0;}
.intro2_bg span{position: relative; z-index: 1;font-weight: bold;font-size: 1.4em;color: #f41b7d;}
.intro2_bg span:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: #fff44c 10px solid; z-index: -1;}
.intro2_L{margin-left: 5%;margin-top: 3%;}
.intro2_R{margin-left: 5%;margin-top: 3%;}

/* teacher */
#teacher-1{position: relative;background-color: #f8428e;}
#teacher-2{position: relative;background-color: #ff6c99;}
#teacher-1 img{max-width: 100%;}
#teacher-2 img{max-width: 100%;}
.teacher_bg img{position: absolute; bottom: 0;left: 0; z-index: 999;max-width: 100%;margin: 0;}
.dr_txt span{color: #FFF000;}
.dr_txt{width: 60%; display: inline-block; vertical-align: top;}
.dr_pic{ display: inline-block; vertical-align: bottom;}
.dr_txt p{color: #FFF; line-height: 1.4em; text-align: justify;margin-top: 5%;}


/* editor */
#editor{background-color: #fce9eb;}
.editor_bg{background-color: #FFF;width: 100%;padding: 5% 0;}
.editor_txt{width: 60%;margin-left: 3%;display: inline-block;}
.editor_txt p{line-height: 1.4em;text-align: left;}
.editor_txt span{color: #f41b7d;}
.editor_pic{display: inline-block;margin-top: 3%;-webkit-appearance: none;-webkit-box-shadow: 10px 10px 3px 0 #ffd6e6;box-shadow: 10px 10px 3px 0 #ffd6e6;}

/* fgaward */
#fgaward{position: relative; background: url(../images/bg_02.jpg) no-repeat center;height: 1470px;}
.fgaward_bg{background: #FFF;width: 100%;margin: 5% 0 0 0;padding: 4% 0;}
.award_box{display: -webkit-box;display: -ms-flexbox;display: flex;}
.fgaward_pic{width: 40%;margin-left: 5%;}
.fgaward_txt{width: 50%;margin: 3%0 5% 0;font-size: 1.4em; }
.fgaward_txt li{display: block;color: #fe4796;margin-top: 4%;}
.fgaward_txt img{display: inline-block;}
.fgaward_txt_w{display: inline-block;width: 50%;text-align: justify;text-align-last: justify;text-justify: distribute-all-lines;margin-right: 5%;z-index: 1;position: relative;}
.fgaward_txt_w:after{content: '';position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: #ffe719 13px solid;z-index: -1;}
.btn_feedback span{border-radius: 100px; background-color: #ee2881; padding: 1%;display: block; margin: auto; margin-top: -3%; width: 25%; color: #fff; cursor: pointer;font-size: 1.4em;}
.btn_feedback a{color: #FFF;}
.btn_feedback i{margin-left: 10px;}

/* blogger */
.peo_pc div{position: absolute;}
.peo_mo_01,.peo_mo_02,.peo_mo_03,.peo_mo_04,.peo_mo_05{ opacity: 0;pointer-events: none;}
.peo_01{left: 0px;top: 50px;}
.peo_02{left: 345px;top: 50px;}
.peo_03{left: 689px;top: 50px;}
.peo_04{left: 0px;top: 345px;}
.peo_05{left: 258px;top: 345px;}
.peo_06{left: 518px;top: 345px;}
.peo_07{left: 774px;top: 345px;}
.peo_mo_01{left: 0px;top: 50px;z-index: 999;}
.peo_mo_02{left: 345px;top: 50px;}
.peo_mo_03{left: 689px;top: 50px;}
.peo_mo_04{left: 0px;top: 345px;}
.peo_mo_05{left: 258px;top: 345px;}
.peo_06:hover,.peo_07:hover{opacity: 0.9;}
.peo_pc{display: block;}
.peo_m{display: none;}

/* more */
#share{background-color: #ee2881;}
.more_L{display: inline-block;width: 40%;}
.more_R{display: inline-block;width: 50%;margin-bottom: 3%;}
.btn_more{display: block;text-align: center;margin:-6% auto auto 2%;}

.btn_more span{border-radius: 100px; background-color: #ffd202; padding: 1% 0;display: block; margin-left: 53%; width: 35%; color: #fff; cursor: pointer;font-size: 1.4em;}

.btn_more a{color: #fd1a79;}
.btn_more i{margin-left: 10px;color: #fd1a79;}

/* share */
.share_bg{width: 95%; background-color: #FFF;-webkit-box-shadow: 10px 10px 10px 0 #de0b6a;box-shadow: 10px 10px 10px 0 #de0b6a;text-align: center;margin: auto;padding: 2%;}
.share_border{border: 2px solid #fd1a79;display: -webkit-box;display: -ms-flexbox;display: flex;}
.share_L{width: 65%;font-size: 1.2em;margin: 6% auto;padding-top: 1%;}
.share_L span{color: #fd1a79;}
.share_L p{margin-top: 2%;padding: 0 5%;}
.share_R{width: 30%;display: -webkit-box;display: -ms-flexbox;display: flex;margin: 4% 3% 2% 0;}
.note{margin-top: 7%;font-size: 0.7em;}
.check_txt{margin-top: 10%; font-size: 0.8em;width: 420px;line-height: 18px;position: absolute;}
.btn_share span{border-radius: 100px; background-color: #ee2881; padding: 1%;display: block; width: 35%; color: #fff; cursor: pointer;font-size: 1.2em;margin: auto;margin-top: 5%;}

.btn_share a{color: #FFF;}
.btn_share i{margin-left: 10px;}

.btn_feedback span:hover,.btn_more span:hover,.btn_share span:hover{opacity: 0.9;}


/*-------------------mobile----------------------*/
@media only screen and (max-width:768px) {
	.word_m{ display: block; }
	img {max-width: 100%;}
	.tit_pc{display: none;}
	.tit_m{margin-top: 5%;display: block;}
	.intro2{display: block;}
	.pic_m{display: block;}
	#footer{ height: auto; padding: 20px 0; font-size: 0.6em; }
	
	#kv{display: none;}
	#kv_m{display: block;}
	
	#intro{position: relative;height: auto; background: url(../images/bg_01_m.png) no-repeat center top,#ffccd2;background-size: contain;}
	.intro_tit{margin: 35% auto 8%;;}
	.top{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; margin: auto;}
	.bottom{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: 0;}
	.intro_box_01 br,.intro_box_02 br,.intro_box_03 br{display: none;}
	.intro_box_01{margin: auto;background: #ff2b89;border-radius: 30px;height: 100%;width: 90%;}
	.intro_box_02{margin: auto;background: #ff2b89;border-radius: 30px;height: 100%;width: 90%;}
	.intro_box_03{margin: auto;background: #ff2b89;border-radius: 30px;height: 100%;width: 90%;}
	.intro_box_04{margin: auto;background: #ff2b89;border-radius: 30px;height: 100%;width: 90%;}
	.top img,.bottom img{padding: 8% 10% 3%;width: 90%;}
	.top div,.bottom div{margin-bottom: 5%;}
	.top p,.bottom p{padding: 0;font-size: 1.1em;}
	.top h3,.bottom h3{padding: 0;margin-bottom: 5%;}
	
	.intro2_bg {width: 100%;-webkit-box-shadow: 5px 5px 5px 0px #f9adb6;box-shadow: 5px 5px 5px 0px #f9adb6;}
	.intro2_R img{width: 60%;}
	.intro2_L{width: 90%;margin: auto;}
	.intro2_R{margin: auto;margin-top: 5%;}
	.intro2_Box{-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;display: -webkit-box;display: -ms-flexbox;display: flex;margin: auto;}
	
	#teacher-2 .container{-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;display: -webkit-box;display: -ms-flexbox;display: flex;}
	.dr_txt p{padding: 2% 7%;}
	.dr_txt{width: 100%;}
	.dr_pic img{width: 50%;}
	.dr_pic{display: block;}
	
	.editor_bg{width: 90%;margin: 5% auto;}
	.editor_txt{margin: 3% auto;width: 80%;}
	.editor_pic{margin: 5% auto;}
	
	.fgaward_bg{width: 90%;margin: 5% auto 0;padding: 5% 0 10% 0;}
	#fgaward{/* FF3.6+ */
	background:url(../images/bg_02_m.png) no-repeat center top, -webkit-gradient(linear, 0deg, color-stop(0, F8CCD1), color-stop(60%, FDEDEF), color-stop(100%, FFFFFF));/* Chrome,Safari4+ */
	background:url(../images/bg_02_m.png) no-repeat center top, -webkit-linear-gradient(0deg, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
	background:url(../images/bg_02_m.png) no-repeat center top, -o-linear-gradient(0deg, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);/* Opera 11.10+ */
	background:url(../images/bg_02_m.png) no-repeat center top, -ms-linear-gradient(0deg, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);/* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1301FE', endColorstr='#F4F60C', GradientType='1'); /* for IE */
	background:url(../images/bg_02_m.png) no-repeat center top, -webkit-gradient(linear, left bottom, left top, color-stop(0, #F8CCD1), color-stop(60%, #FDEDEF), to(#FFFFFF));
	background:url(../images/bg_02_m.png) no-repeat center top, -webkit-linear-gradient(bottom, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);
	background:url(../images/bg_02_m.png) no-repeat center top, -o-linear-gradient(bottom, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);
	background:url(../images/bg_02_m.png) no-repeat center top, linear-gradient(0deg, #F8CCD1 0, #FDEDEF 60%, #FFFFFF 100%);/* W3C */
	height: auto;background-size: contain;}
	.award_box{display: block;}
	.fgaward_pic{width: 100%;margin: auto;text-align: center;}
	.fgaward_pic img{width: 80%;}
	.fgaward_txt{width: 100%;text-align: center;}
	.fgaward_txt li{width: 70%;margin: auto;margin-top: 5%;}
	.fgaward_txt li img{margin-top: 5%;}
	.fgaward_txt_w{width: 100%;}
	.btn_feedback span {width: 60%; margin: -5% auto 10%;}
	
	.peo_pc{display: none;}
	.peo_m{display: block;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
	.peo_m img{margin: 5% auto 5%;width: 90%;}
	.peo_blogger{display: flex;padding: 3%;margin-top: -5%;}
	
	.more_box{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
	.more_L,.more_R{width: 100%;padding-left: 4%;}
	.more_L img{width: 90%;margin: -20% auto 15%;}
	.more_R img{margin-top: 2%;z-index: 999;}
	.btn_more span{width: 85%; margin: -5% auto 10%;}

	.share_bg{-webkit-box-shadow: none;box-shadow: none;}
	.share_border{display: block;}
	.share_L,.share_R{width: 100%;}
	.share_R img{width: 70%;}
	.btn_share{margin-top: 4%;}
	.btn_share span {width: 60%;}
	.btn_share{margin-bottom: 5%;}

}