@import url("reset.css");
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{
	margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	font-family: Tahoma,Helvetica,'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif;
}
img{
    max-width:100%;
    height:auto;
    display: block;
    border:0;
}
html,body{
    width: 100%;
    height: auto;
    background-color: #42bdd8;
}

/*--------------------------------------------------------------*/

.wrap{
    max-width: 100%;
    height: auto;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 0;
}

/* Navigation*/

.navbar-header .btn {
	margin-top: 12px;
	border-radius: 5px;
}

/***刊頭***/

header {
	width: 100%;
	padding-top: 58px;
}

#kv{
	background:url("../images/kv.png") center bottom no-repeat;
	background-size:cover;
	background-color: #42bdd8;
}
#kv img{ margin:20px 0 40px 10px;}
.bn1 {display: block;}
.bn2, .bn3{display: none;}

/***刊頭media***/
@media (max-width: 1199px) and (min-width: 1025px){
	#kv img{ margin-left: -35px;}
}

@media (max-width: 1024px) {
	#kv img{ width:90%; margin-top:30px; margin-left: 0;}
}

@media (max-width: 991px) and (min-width: 769px){
	#kv img{ width:63%; margin-left: 0;}
}

@media (max-width: 768px) {
	#kv{ background:url("../images/kv-s-cake.png") center bottom no-repeat; background-size:cover;}
	#kv .container{ width: 100%;}
	#kv img{ width:100%; margin:0;}
	.bn2 {display: block;}
	.bn1, .bn3{display: none;}
}

@media (max-width: 550px) {
	#kv{ background:url("../images/kv-ss-cake.png") center bottom no-repeat; background-size:cover;}
	#kv .container{ width: 100%;}
	#kv img{ width:100%;}
	.bn3 {display: block;}
	.bn1, .bn2{display: none;}
}


/***內容區塊***/

article {
	width: 100%;
	height: auto;
}

/***單元標***/

.box-t1 {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 5px 0 10px 0;/* 55px 0 10px 0; */
}

.box-t1 h1 { margin: 0 auto; font-size: 46px;font-weight: 700;letter-spacing: 1.25px;}
.box-t1 h1 img {display: inline-block; margin-top:-15px; margin-right:8px;}
.box-t1 h2 { margin:20px auto 10px auto;font-size: 30px;font-weight: 500;color: #ef7800;text-align: center;line-height:25px; letter-spacing: 1.5px;}

/***單元標 media***/

@media (max-width: 768px){
	.box-t1 {padding-top:45px;}
	.box-t1 h1 img {width: 10%;}
	.box-t1 h1{font-size:35px;padding-bottom: 10px;}
	.box-t1 h2{font-size:25px;line-height: 25px;letter-spacing:1px; margin-top: 5px;}
}

@media (max-width: 375px){
	.box-t1 {padding-top: 70px;}
	.box-t1 h1 img {width: 16%;}
	.box-t1 h1{font-size: 26px;}
	.box-t1 h2 {font-size:18px;line-height: 21px;letter-spacing: 0px; margin-top: 5px;}
	.box-t1 h2 p {font-size:18px;line-height: 21px;letter-spacing: 0px; margin-top: 5px;}
}

/***影片置入***/
.fmbox{
	width: 100%;
	height: auto;
	background-color: #ffc258;
	/* padding-top: 10px; */
}

/***影片置入media***/

@media (max-width: 768px) {
	.fmbox {padding-top: 10px;}
}

@media (max-width: 414px) {
	.fmbox{padding-top: 25px;}
}


/***訂購優惠***/
.orderbox{
	width: 100%;
	height: auto;
	background-color:#ffc258;/* #ffaf09; */
	padding-top: 50px;
	padding-bottom: 5px;
}

/*指定container*/
.orderbox > .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.orderbox > .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}

.order_bg{
	width: 80%;
	margin: 0 auto;
	padding: 10px;
	padding-bottom: 25px;
	/* background-color: #fff0b1;
	border-radius: 10px; */
}

.mag1 {display: block;}
.mag2 {display: none;}


.giftbox{
	display:block;
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color:rgba(255, 255, 255, 1); /* #fff; */
	border-radius: 22px;
	padding:0 20px 5px 20px;
	margin:30px auto 40px auto; 
}

.gift3-t {
	width: 100%;
	padding: 5px 0;
	margin:0 auto;
	text-align: center; 
	display: block;
}

.gift3-t img {width: 50%;}

.gift3-t-w{display: block;margin: 0 auto;}
.gift3-t-m{display: none;}

.h15 {display: block; width: 100%; height: 15px;}

/***訂購優惠media***/
@media (max-width: 1024px) {
	.orderbox{padding-top:35px;}
	.giftbox{margin-top:30px;}
	.gift3-t{margin-top: 2px;}
	.gift3-t img {width: 50%;}
	.giftbox2 {display:none;}

}

@media (max-width: 1023px) and (min-width: 992px){
	/*指定container*/
	.orderbox > .container {
	  padding-right: 10px;
	  padding-left: 10px;
	}
	.giftbox {
		margin-top:20px;
		padding-top:5px;
	}
	.gift3-t img {width: 50%;}
}

@media (max-width: 991px) {
	.orderbox{padding-top: 60px;}
	.mag1 {display: none;}
	.mag2 {display: block;}
	.gift3-t{margin-top: 0;}
	.gift3-t img {width:120%;}
	.giftbox {width:100%;}
	.gift2 {margin-top:30px;}
}

@media (max-width: 768px) {
	/*指定container*/
	.orderbox > .container {
	  padding-right: 15px;
	  padding-left: 15px;
	  margin-right: auto;
	  margin-left: auto;
	}

	.container,.gift3-t img{width: 95%; margin:0 auto;}
	.gift3-t{ margin-top: 0; margin-bottom: 0; padding-bottom: 10px;}
	.gift3-t img {width:300%;}
}

@media (max-width: 414px;){
	.giftbox{
		padding:0 5px 5px 5px;
		margin:20px auto 30px auto; 
	}
}

@media (max-width: 375px){
	.giftbox{border-radius:10px;margin:15px auto 20px auto; padding: 5px 10px;}
	.gift2 {margin-top:15px;}
	.gift3-t-w{display: none;}
	.gift3-t-m{display: block;/*  width: 100%; */}
}

/***學習特色***/
.introbox {
	width: 100%;
	height: auto;
	background-color: #fff4ac;
	padding-top: 53px;
	padding-bottom:15px;
}

.ibox1{margin:10px auto 30px auto;display: block;}
.ibox2{margin:0 auto 30px auto;display: block;}
.ibox3{margin:0 auto 30px auto;display: block;}
.ibox4{margin:0 auto 35px auto;display: block;}

.ibox1-mobile{margin:0 auto;display: none;}
.ibox2-mobile{margin:10px auto;display: none;}
.ibox3-mobile{margin:10px auto;display: none;}
.ibox4-mobile{margin:10px auto;display: none;}

.intro-icon{
	max-width: 100%;
	height: auto;
	margin: 10px auto 20px auto;
}

.ibox-m-t{display: none;}
.ibox-m-ts{display: none;}


/***學習特色media***/

@media (max-width: 992px) {
  .ibox1{display: none;}
  .ibox1-mobile{display: block; margin-bottom: 25px;}
 
  .ibox2{display: none;}
  .ibox2-mobile{display: block; margin-bottom: 25px;}

  .ibox3{display: none;}
  .ibox3-mobile{display: block; margin-bottom: 25px;}

  .ibox4{display: none;}
  .ibox4-mobile{display: block; margin-bottom: 25px;}
  .ibox-m-t{display: block;}
}

@media (max-width: 768px){
	.introbox {padding-top: 33px;}
}
@media (max-width: 767px){
	.introbox .container{
		padding-right: 0px;
		padding-left: 0px;
		margin-right: auto;
		margin-left: auto;
	}
}

@media (max-width:667px) {
	.introbox {
		padding-top: 0px;
	}
	
	.intro-icon{
		max-width: 100%;
		height: auto;
		margin: 15px auto 15px auto;
		text-align: center;
	}
	.ibox-m-t{display: block;}
}

@media (max-width:414px){
	.introbox {padding-top: 19px;}
	.intro-icon{
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		margin-bottom: 10px;
		text-align: center;
		padding-left: 15px;
	}
	.ibox-m-t{display: none;}
	.ibox-m-ts{display: block;}
}

@media (max-width: 375px){
	.introbox {padding-top: 5px;}
}

/***月刊內容***/
.monthlybox {
	width: 100%;
	height: auto;
	background-color: #fff;
	padding-top: 53px;
	padding-bottom:15px;
}

.mbox1 {display: block;}
.mbox2 {display: none;}

.box-t3{
	display: block;
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: 400;
	line-height: 28px;
	margin: 15px 0;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
	padding: 5px 10px;
}

.box-t4 {
	font-weight: 600;
	color: #d3121e;
}

/***月刊內容media***/

@media (max-width: 991px){
	.mbox1 {display: none;}
	.mbox2 {display: block;}
	/* .mbox2 img{width: 90%;} */
	.rspace {margin-bottom: 12px;}
	.box-t3{
		display: inline-block;
		font-size: 19px;
		letter-spacing: 0px;
		line-height: 36px;
		margin-top:10% 0 0 0;
		padding-left: 0;
	}
}

@media (max-width: 768px){
	.monthlybox {padding-top: 33px;}
}
@media (max-width: 767px) and (min-width: 569px) {	
	.box-t3{
		display: inline-block;
		letter-spacing: 0px;
		line-height: 35px;
		margin-top:7%;
	}
	
}

@media (max-width: 568px){
	/* .monthlybox img {width: 70%; margin:0 auto;} */
	.mbox1 {display: block;}
	.mbox2 {display: none;}
	.mbox1 img{width: 65%; margin:0 auto;}
	.box-t3{
		display: block;
		font-size: 16px;
		width: 95%;
		line-height: 25px;
		margin: 5px auto 20px auto;
	}
}

@media (max-width: 414px){
	.monthlybox {padding-top: 19px;}
}

@media (max-width: 375px){
	.monthlybox {padding-top: 5px;}
}

/***主題規劃***/
.themebox {
	width: 100%;
	height: auto;
	background-color: #fff;
	padding-top: 53px;
	padding-bottom:25px;
}

.list_table{
	margin: 20px auto 20px auto;
	overflow-x:auto;
	letter-spacing:0;
}

.list_table .table_title {
	height:42px;
	padding-top: 8px;
	/* padding:4px 20px; */
	background-color:#df5933;
	color:#fff;
	font-weight:bold;
}

.list_table .item {
	display:inline-block;
	font-size:18px;
	padding: 0;
}

@media (max-width:991px){
	.list_table .item{font-size:16px;}
}

@media (max-width:768px){
	
	.themebox {padding-top: 33px;}
	.list_table{margin:0 10px 10px 10px;}
	.list_table .item{font-size:16px}
}
@media (max-width:768px){
	.table_width{width:700px; margin:0 auto;}
}

@media (max-width: 414px){
	.themebox {padding-top: 19px;}
}

@media (max-width: 375px){
	.themebox {padding-top: 5px;}
}

.table_content {
	height: 50px;
	padding-top:12px;
	background-color:#fff;
}

.table_content .item {
	display:inline-block;
	vertical-align: middle;
	font-size:18px;
	letter-spacing:1px;
	padding: 0;
}

.table_content:nth-child(odd) {
	background-color:#fffec6;
}

.col_month {
	text-align: center;
}

.col_theme {
	color:#f90d6c;
	font-size: 20px;
	letter-spacing: 1px;
	text-align: left;
}

@media (max-width:768px){
	.table_content{ height:45px;}
	.table_content .item{font-size:16px}

}



/*各界推薦*/
.recommendbox {
	width: 100%;
	height: auto;
	background-color: #fff;
	padding-top: 53px;
	padding-bottom:35px;
}

.recommendbox .container{ padding: 0;}

.mombox {
	width: 100%;
	height: auto;
	margin-top: 10px;
	background-color: #fff;
	padding-top: 35px;
	padding-bottom:55px;
}

.mombox .container{ padding: 0;}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
	background: url(../images/green_prev.png) left center no-repeat;
	background-size: contain;
	left: 10;
}
@media only screen and (max-width:768px) {
	.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
		margin-left: -8px
	}
}

.carousel-control .glyphicon-chevron-left:before, .carousel-control .icon-prev:before {
	content: ""
}
.glyphicon-chevron-right {
	background: url(../images/green_next.png) left center no-repeat;
	background-size: contain;
	left: 0
}
@media only screen and (max-width:768px) {
	.glyphicon-chevron-right {
	margin-left: 10px
	}
}
.glyphicon-chevron-right:before {
	content: ""
}
.carousel-control {
	width: 30px
}
.carousel-control.left {
	background: none;
}

.carousel-control.right {
	background: none;
	right: 10px;
	left: auto;
}
.carousel-indicators li {
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	width: auto;
	text-indent: 0;
	height: 40px;
	line-height: 38px;
	background-color: #ffffff;
	border: 1px solid #77c40f;
	color: #77c40f;
	border-radius: 20px
}

.carousel-indicators .active {
	width: auto;
	text-indent: 0;
	background-color: #77c40f;
	height: 40px;
	line-height: 38px;
	color: #ffffff;
	margin-left: 10px;
	margin-right: 10px
}

.carousel-indicators {
	line-height: 0;
	position: static;
	bottom: 10px;
	left: auto;
	z-index: 15;
	width: auto;
	padding-left: 0;
	margin-left: 0;
	text-align: center;
	list-style: none;
	margin-bottom: 20px;
}

.carousel-indicators span{
	text-align: left;
	font-size: 18px;
	letter-spacing: 2px;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	width: 30px;
	height: 30px
}

@media (max-width:768px) {
	.carousel-indicators li {
		font-size: 13px;
		margin-bottom: 10px;
		line-height: 30px;
		height: 30px;
		margin-right: 5px;
		margin-left: 10px;
		padding-left: 15px;
		padding-right: 10px;
	}
	.carousel-indicators {margin-bottom: 30px;}
	.carousel-indicators .active {
		font-size: 13px;
		margin-bottom: 10px;
		line-height: 32px;
		height: 32px;
		margin-right: 5px;
		margin-left: 10px;
		padding-left: 10px;
		padding-right: 5px;
	}
}

@media (max-width:414px) {
	.carousel-indicators li {
		margin-bottom: 10px;
		height: 38px;
	}
	.carousel-indicators {margin-bottom: 30px;}
	.carousel-indicators .active {
		font-size: 13px;
		margin-bottom: 10px;
		line-height: 38px;
		height: 38px;
		margin-right: 5px;
		margin-left: 10px;
		padding-left: 10px;
		padding-right: 5px;
	}
}
.pink_style {
	margin-bottom: 20px
}
.pink_style .glyphicon-chevron-left {
	background: url(../images/pink_prev.png) left center no-repeat;
	background-size: contain;
	left: 12px
}
.pink_style .glyphicon-chevron-left:before {
	content: ""
}
.pink_style .glyphicon-chevron-right {
	background: url(../images/pink_next.png) left center no-repeat;
	background-size: contain;
	left: 0
}
.pink_style .glyphicon-chevron-right:before {
	content: ""
}
.pink_style .carousel-indicators li {
	border: 1px solid #f90d6c;
	color: #f90d6c
}
.pink_style .carousel-indicators .active {
	color: #ffffff;
	background-color: #f90d6c
}

.recommend_list .pro_name {
	line-height: 46px;
	font-size: 28px;
	color: #f90d6c;
	font-weight: bold
}
@media only screen and (max-width:768px) {
	.recommend_list .pro_name {
		display: inline;
		font-size: 20px;
		line-height: 30px
	}
}
.recommend_list .send_txt {
	font-size: 25px;
	color: #39b54a;
	line-height: 40x;
	margin-bottom: 30px
}
.recommend_list .send_txt img {
	max-width: 73px
}
@media only screen and (max-width:768px) {
	.recommend_list .send_txt {
		font-size: 18px
	}
	.recommend_list .send_txt img {
		max-width: 35px
	}
}
.recommend_list .buy_btn {
	margin-bottom: 30px;
	margin-top: 5px
}
@media only screen and (max-width:768px) {
	.recommend_list .buy_btn {
		margin-bottom: 0
	}
}
.recommend_list .item {
	margin-bottom: 20px
}
.recommend_list .item:last-child {
	margin-bottom: 0
}
.expert {
	margin-top: 20px;
	padding-left: 75px;
	padding-right: 15px;
	left: 50px;
	min-height: 250px;
	margin-bottom: 15px;
}
.expert img {float:left;margin-right: 25px;}
.expert .person_title {
	color: #df5933;
	font-size: 26px;
	line-height: 30px;
	letter-spacing: 2px;
	margin-bottom: 10px;
	font-weight: 600;
}
.expert .person_title span {
	color: #df5933;
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: 400;
}

.expert,.mtxt p{
	text-align: left;
	margin-top: 10px;
	color: #000;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 35px;
	text-align: justify;
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph; /*IE9*/
	-moz-text-align-last:justify; /*Firefox*/
	-webkit-text-align-last:justify; /*Chrome*/
}

.mom .mtxt {padding-top: 20px;}
.mom .mtxt p{letter-spacing: 1.25px;}

.mom img {float: right; margin-left: 25px; margin-top: 15px;}

.mom {padding-left: 75px;padding-right: 15px;}
.mom .pink_title {
	color: #f90d6c;
	margin-bottom: 5px;
	font-size: 26px;
	line-height: 30px;
	letter-spacing: 2px;
	margin-bottom: 15px;
	font-weight: 600;
}



@media (max-width:768px) {
	.recommendbox {padding-top: 33px;}
	.mombox {padding-top: 0px;padding-bottom: 5px;}
	.expert {min-height: 0;}
	.expert,.mom {padding-left: 55px;padding-right: 15px;}
	.expert .person_title {font-size: 23px;letter-spacing: 1px;line-height: 26px;}
	.expert .person_title span {font-size: 18px;letter-spacing: 0.5px;}
	.mom .pink_title {font-size: 23px;letter-spacing: 1px;line-height: 26px;}
	.expert,.mtxt p{ font-size: 17px;letter-spacing: 0.5px;line-height: 28px;}
	.mom .mtxt {padding-top: 0;margin-left: 0}
	.mom {text-align: center;}
	.expert img { width: 30%;margin-top:5px; margin-bottom: 3px;}
	.mom img { width: 30%; margin-top:50px;margin-bottom: 3px;}
}

@media (max-width: 414px){
	.recommendbox {padding-top: 19px;}
	.expert,.mom {padding-left: 25px;padding-right: 20px;}
	.expert,.mtxt p{ font-size: 16px;letter-spacing: 1px;line-height: 26px; font-weight: 0;}
	.expert img { width: 45%;margin-top:5px; margin-bottom: 0; margin-right: 12px}
	.mom img { width: 45%; margin-top:50px; margin-bottom: 0; margin-left: 10px;}
}

@media (max-width: 375px){
	.recommendbox {padding-top: 5px;}
}

/*view*/
.view{-moz-box-shadow:0 0 0 1px #fff; -webkit-box-shadow:0 0 0 1px #fff; box-shadow:0 0 0 1px #fff; overflow:hidden; position:relative}
.view img{width:100%;height: auto;}
.view .overlay{background:rgba(243,243,221,0.9); height:100%; left:0; opacity:0; position:absolute; top:0; width:100%; -moz-transition:opacity,0.3s; -o-transition:opacity,0.3s; -webkit-transition:opacity,0.3s; transition:opacity,0.3s}
.view .overlay-caption{position:absolute; text-align:center; top:50%; width:100%; -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%)}
.view p, .view img{-moz-transition:all,0.5s; -o-transition:all,0.5s; -webkit-transition:all,0.5s; transition:all,0.5s;}
li.view p{color:#fff; margin:0; opacity:0; font-size:6em;}
.view span{font-size:45px}
.view p{-moz-transform:translate3d(0,200%,0); -ms-transform:translate3d(0,200%,0); -webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
.slider-box:hover img{-moz-transform:scale(1.2); -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2);}
.slider-box:hover .overlay{opacity:1}
.slider-box:hover .overlay p{opacity:1; -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}

/* morebook */
.morebook{-moz-box-shadow:0 0 0 1px #fff; -webkit-box-shadow:0 0 0 1px #fff; box-shadow:0 0 0 1px #fff; overflow:hidden; position:relative}
.morebook img{width:100%; height:100%;}
.morebook .overlay{background:rgba(243,243,221,0.9); height:100%; left:0; opacity:0; position:absolute; top:0; width:100%; -moz-transition:opacity,0.3s; -o-transition:opacity,0.3s; -webkit-transition:opacity,0.3s; transition:opacity,0.3s}
.morebook .overlay-caption{position:absolute; text-align:center; top:50%; width:100%; -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%)}
.morebook p, .morebook img{-moz-transition:all,0.5s; -o-transition:all,0.5s; -webkit-transition:all,0.5s; transition:all,0.5s}
.morebook p{color:#fff; margin:0; opacity:0; font-size:6em;}
.morebook span{font-size:45px}
.morebook p{-moz-transform:translate3d(0,200%,0); -ms-transform:translate3d(0,200%,0); -webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
.morebook-box:hover img{-moz-transform:scale(1.2); -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2)}
.morebook-box:hover .overlay{opacity:1}
.morebook-box:hover .overlay p{opacity:1; -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}

/*promo*/
.promobox {
	width: 100%;
	height: auto;
	padding-top: 10px;
	padding-bottom: 5px;
	margin: 20px 0 0 0;
}

.ad1 {display: block;}
.ad2 {display: none;}

/*指定container*/
.promobox > .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
	.promobox{margin-top: 0px;}
	.ad1 {display: none;}
	.ad2 {display: block;}
	.btn2 {margin-top:20px;}
}