@charset "UTF-8";

/*page*/
.header {  }
.content { padding-top: 40px; line-height: 1.3em; }
.content p { line-height: 18px; line-height: 1.3em; }

/*article*/
h1.title { margin-bottom: 40px; text-align: center; font-size: 36px; line-height: 1.2em; font-weight: 500; }
h1.title .titleNote { display: block; font-size: 18px; font-weight: 500; }
h1.title02 { margin-bottom: 40px; padding: 16px; font-size: 36px; line-height: 1.2em; font-weight: 500; border-bottom: solid 1px #ddd; }
h2.subTitle { margin: 60px 0 25px 0; }
h2.subTitle span { display: inline-block; padding: 0 20px; font-size: 21px; line-height: 40px; color: #fff; background: #333; }
h3 { margin-bottom: 20px; font-size: 24px; font-weight: 500; }

.borderBox { margin: 0 0 20px; padding: 20px 20px 0; border: solid 2px #c9c9c9; }

p.note { margin: 0; font-size: 16px; }



/*img*/
.imgbox { text-align: center; }
.imgbox img { max-width: 100%; }
.imgbox.full img { width: 100%; }
.imgbox.boxshadow img { border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }

/*按鈕
.btnMain { margin: 0 auto 20px; text-align: center; }
.btnMain a { display: inline-block; min-width: 300px; line-height: 44px; text-align: center; font-size: 21px; color: #fff; background: #0482df; }
*/
/*下載
.btn_dw { display: block; margin: 0 0 15px; padding: 15px 60px 15px 15px; font-size: 21px; line-height: 1.3em; color: #0382df; background: #e5edf2 url(../images/icon_download_01.png) calc(100% - 15px) center no-repeat; border-radius: 8px; }
*/

/*table
table { width: 100%; }
table tr {  }
table th { padding: 15px; font-size: 21px; background: #e5e5e5; }
table td { padding: 15px; font-size: 18px; line-height: 30px; border-bottom: solid 1px #ddd; }
table td:nth-child(1) { padding: 15px 0; }
table td:nth-last-child(1) { padding: 15px 0; }*/

/*ul*/
ul {  }
li { line-height: 1.5em; }

ul.list_point { padding:0 80px; }
ul.list_point > li { position: relative; min-height: 72px; padding: 20px 40px; border-bottom: solid 1px #e5e5e5; }
ul.list_point > li:nth-last-child(1) { border: none; }
ul.list_point li > .listNum { position: absolute; top: 20px; left: 0; font-size: 48px; font-weight: 500; color: #818290; }

ul.point { list-style-position:outside; }
ul.point li { position: relative; text-indent: 24px; }
ul.point li::before { content: ""; display: inline-block; position: absolute; top: 10px; left: 10px; width: 6px; height: 6px; vertical-align: middle; border-radius: 3px; background: #637cb0; }


ol.num { padding-left: 32px;}
ol.num > li {  list-style-type: decimal; }

ol.alpha { padding-left: 32px;}
ol.alpha > li { margin-bottom: 10px; list-style-type: upper-latin; }

ol.alpha02 { padding-left: 25px; }
ol.alpha02 > li { counter-increment: myCounter; margin-bottom: 20px; text-indent: -25px; }
ol.alpha02 > li::before { content: "(" counter(myCounter, upper-alpha) ")"; color: #637cb0; }


.highlight_red { color: #d13641; font-weight: 500; background: #ffa59e; border-radius: 4px; }
.highlight_red ul.point li::before { background: #d13641; }

/*線框box*/
.borderBox { padding: 20px; border: solid 1px #ddd; }
.borderBox h3 { margin-bottom: 30px; font-size: 24px; }

/*NAV*/
.innernav01 { margin-bottom: 30px; padding: 0 25px; border-top: solid 1px #c8d6de; border-bottom: solid 1px #c8d6de; }
.innernav01 a { position: relative; display: inline-block; padding: 0 10px; line-height: 60px; font-size: 21px; transition: 0.2s; }
.innernav01 a:hover { color: #004d9c; }
.innernav01 a.on { position: relative; padding: 0 20px; font-weight: bold; color: #004d9c; }
.innernav01 a.on::after { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 100%; height: 4px; background: #004d9c; }
/*NAV_02*/
.innernav02 { display: flex; flex-wrap: wrap; margin-bottom: 15px; }
.innernav02 a { flex: 0 1 auto; margin: 0 15px 15px 0; padding: 0 24px; display: block; text-align: center; line-height: 46px; font-size: 21px; color: #b5b5b5; border: solid 1px #b5b5b5; }
.innernav02 a:hover {  }
.innernav02 a:nth-last-child(1) { margin-right: 0; }
.innernav02 a.on { font-weight: bold; color: #fff; background: #004d9c; border: none; }

/*影片box*/
.videoBox{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.videoBox iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.videoIntro { display: flex; }
.videoIntro_video { flex: 0 0 55%; margin-right: 40px; }
.videoIntro_inner {  }
.videoIntro_inner h3 { margin-bottom: 15px; font-size: 26px; color: #005bab; font-weight: 500; }

/* 解說BOX */
.list_learn {  }
.list_learn li { margin-bottom: 60px; }
.list_learn h3 { margin-bottom: 30px; font-size: 24px; font-weight: 600; }
.learnBox { display: flex; align-items: stretch; }
.learnBox .imgBox { flex: 1 1 100%; display: flex; align-items: center; margin-right: 40px; }
.learnBox .imgBox img { max-width: 100%; }
.learnBox .textBox { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; border-left: solid 1px #ddd; }
.learnBox .textBox:nth-last-child(1) { padding-right: 0; }
.learnBox .textBox.longbox { flex: 1 0 617px; padding: 0 20px; }
.learnBox .textBox p { margin-bottom: 10px; }

.learnBox_watch .textBox:nth-child(2) { border-color: #637cb0; }

/*盤中變化*/
.linebox01 { display: flex; }
.linebox01 .borderBox { flex: 1 1 auto; }
.linebox01 .borderBox:nth-last-child(1) { border-left: 0; }

/*說明*/
.wordflexbox01 { display: flex; flex-direction: row-reverse; margin-bottom: 20px; }
.wordflexbox01 li { margin-bottom: 20px; }
.wordflexbox01 .imgBox { flex: 0 1 auto; }
.wordflexbox01 .imgBox img { max-width: 100%; }
.wordflexbox01 .textBox { flex: 1 1 60%; margin-right: 40px; font-size: 21px; }

/*笑臉
.list_smile { display: flex; justify-content: space-between;}
.list_smile li { flex: 1 1 auto; display: flex; align-items: center; height: 53px;  margin-bottom: 20px; padding: 0 20px 0 70px; }
.list_smile li:nth-last-child(1) { padding-right: 0; }
.list_smile li.smile01 { color: #0071bc; background: url(../images/img_smile_06.png) left center no-repeat; }
.list_smile li.smile02 { color: #108048; background: url(../images/img_smile_07.png) left center no-repeat; }
.list_smile li.smile03 { color: #59493f; background: url(../images/img_smile_08.png) left center no-repeat; }
.list_smile li.smile04 { color: #d84744; background: url(../images/img_smile_09.png) left center no-repeat; }
.list_smile li.smile05 { color: #d6686a; background: url(../images/img_smile_10.png) left center no-repeat; }
.list_smile p { max-width: 7.5em; font-weight: 500; }*/


/*分享*/
.reviewList { display: flex; flex-wrap: wrap; }
.reviewBox { flex: 0 1 auto; width: 240px; margin: 0 calc((100% - 960px) / 3) 40px 0; }
.reviewBox:nth-child(4n) { margin-right: 0; }
.reviewImg { max-width: 240px; }
.reviewImg img { width: 100%; }

/*影音*/
.list_video { display: flex; flex-wrap: wrap; }
.list_video li { flex: 0 1 calc((100% - 40px) / 3 ); position: relative; margin: 0 20px 30px 0; }
.list_video li:nth-child(3n) { margin-right: 0; }
.videoImg { position: relative; margin-bottom: 10px; }
/* .videoImg::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0, 0, 0, 0.5) url(../images/icon_video_01.png) center no-repeat; transition: 0.3s; } */
.videoImg img { width: 100%; }
.list_video p { font-size: 21px; font-weight: 500; }
.list_video p.date { font-size: 18px; font-weight: 300; color: #898989; }
.list_video a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 3; }
.list_video li:hover .videoImg::after { background-color: rgba(0, 0, 0, 0.4); }
/*影音pop*/
.popup_box.popup_video { padding: 20px; }
.video-box { position: relative; padding-bottom: 56.25%; overflow: hidden; }
.video-box iframe { position: absolute; top: 0;left: 0; width: 100%; height: 100%; }


/*FAQ*/
.faq_search { position: relative; }
.faq_search input { height: 48px; padding-left: 60px; }
.faq_search a.search_btn { display: block; position: absolute; top: 0; left: 5px; width: 48px; height: 48px; background: url(../images/icon_faq_search.png) center no-repeat; }
.faq_qalist { margin-bottom: 40px; }
.faq_qalist li { font-size: 18px; }
.faq_qalist .que { position: relative; min-height: 48px; padding: 15px 40px 15px 30px; cursor: pointer; border-bottom: solid 1px #eee; }
.faq_qalist .que::before { content: ""; display: block; position: absolute; top: 25px; left: 8px; width: 8px; height: 8px; background: #96b1bb; border-radius: 4px; }
.faq_qalist .que::after { content: ""; display: block; position: absolute; top: 20px; right: 0px; width: 20px; height: 20px; background: url(../images/icon_faq_open.png) center no-repeat; background-size: contain; transition: 0.3s; }
.faq_qalist .open .que::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.faq_qalist .ans { display: none; padding: 15px 40px 15px 30px; background: #f5f5f5; }
.faq_qalist .ans img { display: block; max-width: 100%; margin: 20px 0; }


/*秘技*/
.learn_title_area { display: flex; flex-direction: row-reverse; justify-content: center; -ms-align-items: center;
align-items: center; margin-bottom: 60px; }
.learn_title_area .imgbox { margin-right: 60px; }
.learn_title_area .textbox {  }
.learn_title_area h1 { margin-bottom: 30px; text-align: left; font-size: 48px; }
.tag { margin-bottom: 25px; }
.tag span { display: inline-block; padding: 0 30px; line-height: 42px; font-size: 25px; font-weight: 500; color: #fff; background: #e34e25; border-radius: 8px; }

.partBox { display: flex; }
.partBox.chip { margin-bottom: 60px; }
.partBox.chip img { max-width: 100%; }
.partBox.chip .imgpartbox { flex: 1 0 30%; max-width: 400px; margin-right: 40px; }
.partBox.chip .textpartbox { flex: 1 1 70%; }
.partBox.chip .textpartbox img { display: block; margin: 0 auto 40px; }

.partBox.type01 { -ms-align-items: center; align-items: center; margin-bottom: 30px; }
.partBox.type01 > div { flex: 0 0 50%; }
.partBox.type01 h3 { margin-bottom: 10px; }
.partBox.type01 p { margin-bottom: 20px; }
.partBox.type01 p:nth-last-child(1) { margin-bottom: 0; }
.partBox.type01 .imgbox { padding-right: 50px; }
.partBox.type01 .textbox { padding-left: 50px; }
span.tag_inline { display: inline-block; margin-right: 15px; padding: 0 8px; line-height: 35px; font-weight: 500; color: #fff; background: #f36f8b; border-radius: 5px; }
span.tag_inline.color02 { background: #0f9abf; }
span.tag_inline.color03 { background: #f5a623; }

.partBox.type02 { margin-bottom: 60px; -ms-align-items: stretch; align-items: stretch; }
.partBox.type02 > div { flex: 0 0 50%; }
.partBox.type02 .box01 { padding: 0 50px 0 0; border-right: solid 1px #dcdcdc; }
.partBox.type02 .box02 { padding: 0 0 0 50px; }

/*多樣看盤模式*/
.partBox_tapeMode {  }
.partBox_tapeMode .textbox { flex: 1 1 auto; margin-right: 30px; }
.partBox_tapeMode .imgbox { flex: 0 0 300px; }
.tapeMode_noticeBox { display: flex; align-items: center; margin-bottom: 30px; }
.tapeMode_notice { flex: 0 0 auto; position: relative; margin-left: 20px; padding: 0 10px; color: #06c5c5; border: solid 1px #06c5c5; border-radius: 4px; }
.tapeMode_notice::after { content: ""; display: block; position: absolute; top: calc(50% - 4px); left: -6px; width: 8px; height: 8px; background: #fff; border-left: solid 1px #06c5c5; border-bottom: solid 1px #06c5c5; transform: rotate(45deg); }
.tapeMode_notice p { line-height: 2em; font-weight: 500; }
.tapeMode_notice p:nth-child(1) { border-bottom: solid 1px #06c5c5; }

.partBox.bottom { margin-bottom: 60px; }

.notice_lightball { padding-left: 50px; }
.notice_lightball.light_red { margin-bottom: 60px; background: url(../images/icon_lightball_01.png) left center no-repeat; background-size: 34px auto; }
.notice_lightball.light_green { background: url(../images/icon_lightball_02.png) left center no-repeat; background-size: 34px auto; }

/*下載頁*/
.container.download{background: url("../images/bg_download.jpg") center no-repeat; background-size: cover; position: relative;}
.downloadArea{width: 1000px;height: 550px;  display: flex;align-items:center; position: absolute; bottom: 8%; left: 50%; margin-left: -500px; }
.downloadArea .img{text-align: center;flex: 1 1 40%;}
.downloadArea .info{flex: 1 1 60%;}
.downloadArea h3{color: #fff; font-size: 72px; line-height: 80px;}
.downloadArea h3 span{display: block;}
.downloadArea .btn{ display: flex;}
.downloadArea .btn li{ padding-right: 40px;}
.downloadArea .btn a{margin-top: 20px; display: block;}

@media screen and (max-width: 1200px) {
	/*分享*/
	.reviewList { margin: 0 -20px 0 0; }
	.reviewBox,
	.reviewBox:nth-child(4n) { flex: 0 1 auto; width: calc(25% - 20px); margin: 0 20px 40px 0; }
	.reviewImg { max-width: 240px; }
}


@media screen and (max-width: 1024px) {
 	
	/*解說*/
	.learnBox .imgBox { margin-right: 20px; }
	.learnBox .textBox { padding: 0 20px; }
	.learnBox .textBox.longbox { flex: 1 0 555px; }

	/*說明*/
	.wordflexbox01 .textBox { font-size: 18px; }

	/*笑臉*/
	.list_smile li { flex: 1 1 auto; height: 48px; padding: 0 10px 0 60px; font-size: 16px; }
	.list_smile li.smile01,
	.list_smile li.smile02,
	.list_smile li.smile03,
	.list_smile li.smile04,
	.list_smile li.smile05	{ background-size: auto 48px; }

	.partBox.type01 .imgbox { padding-right: 30px; }
	.partBox.type01 .textbox { padding-left: 30px; }

	.partBox.type02 .box01 { padding: 0 30px 0 0; }
	.partBox.type02 .box02 { padding: 0 0 0 30px; }

	/*多樣看盤模式*/
	.tapeMode_noticeBox { flex-direction: column; align-items: flex-start; }
	.tapeMode_noticeBox > p { margin-bottom: 15px; }
	.tapeMode_notice { margin-left: 0; }
	.tapeMode_notice::after { top: -6px; left: 15px; transform: rotate(135deg); }
	
/*下載頁*/
.downloadArea{ bottom:30px;}

	

}

@media screen and (max-width: 800px) {
	.web{ display:none; }
	.mobile{ display:block; }
	
	/*page*/
	.content { padding-top: 20px; }
	.content p,
	.content p.bigT { font-size: 16px; }

	h1.title { margin-bottom: 20px; font-size: 24px; }
	h2.subTitle { margin: 40px 0 20px 0;}
	h2.subTitle span { padding: 0 10px; font-size: 16px; }

	/*ul*/
	ul {  }
	li {  }

	/*NAV*/
	.innernav01 { display: flex; margin-bottom: 20px; padding: 0; }
	.innernav01 a { flex: 1 1 auto; max-width: 50%; text-align: center; padding: 0 2px; line-height: 48px; font-size: 14px; }
	.innernav01 a.on { padding: 0; }
	/*NAV_02*/
	.innernav02 { margin-bottom: 5px; }
	.innernav02 a { padding: 0 10px; line-height: 32px; font-size: 14px; }

	/*video*/
	.videoIntro { display: block; }
	.videoIntro_video { margin: 0; }
	.videoIntro_inner { padding: 20px 10px; }
	.videoIntro_inner h3 { font-size: 24px; }
	.videoIntro_inner p { line-height: 1.5em; }

	
	/*解說*/
	.list_learn li { margin-bottom: 40px; }
	.learnBox { flex-wrap: wrap; justify-content: center; }
	.learnBox .imgBox { flex: 1 1 100%; margin: 0 0 30px; }
	.learnBox .imgBox img { max-width: 420px; margin: 0 auto; }
	.learnBox .textBox { flex: 1 1 50%; }
	.learnBox .textBox:nth-child(2) { border-left: none; }
	.learnBox .textBox.longbox { flex: 0 0 auto; }

	/*說明*/
	.wordflexbox01 { flex-direction: column; align-items: center; }
	.wordflexbox01 .imgBox { max-width: 420px; margin: 0 0 20px; padding: 0 40px; }
	.wordflexbox01 .textBox { margin: 0; font-size: 16px; }
	
	/*笑臉
	.list_smile { flex-direction: column; max-width: 200px; margin: 0 auto; }
	.list_smile li { flex: 1 1 auto; }*/


	/*影音*/
	.videoImg { margin-bottom: 10px; }
	.list_video p { font-size: 18px; }
	.list_video p.date { font-size: 16px; }


	/*分享*/
	.reviewList { margin: 0 -10px 0 0; }
	.reviewBox,
	.reviewBox:nth-child(4n) { flex: 0 1 auto; width: calc(33% - 10px); margin: 0 10px 30px 0; }


	/*FAQ*/
	.faq_search input { height: 40px; padding-left: 40px; }
	.faq_search a.search_btn { left: 0; width: 40px; height: 40px; }
	.faq_qalist { margin-bottom: 20px; }
	.faq_qalist .que ,
	.faq_qalist .ans { padding: 12px 24px; }
	.faq_qalist .que::before { top: 20px; }
	.faq_qalist .que::after { width: 16px; height: 16px; }


	/*秘技*/
	.learn_title_area { display: block; }
	.learn_title_area .textbox { margin: 0 0 20px; }
	.learn_title_area .imgbox { margin: 0; }
	.learn_title_area .imgbox img { max-width: 40%; }
	
	.tag { margin-bottom: 10px; }
	.tag span { line-height: 32px; font-size: 18px; }

	.partBox.chip .imgpartbox { margin-right: 10px; }

	.partBox.type01 { display: block; }
	.partBox.type01 .imgbox { margin: 0 0 20px; padding: 0; }
	.partBox.type01 .textbox { padding: 0; }
	.partBox.type01 .imgbox img { width: 100%; }

	.partBox.type02 { display: block; }
	.partBox.type02 .box01 { padding: 0 0 20px; border: none; border-bottom: solid 1px #dcdcdc; }
	.partBox.type02 .box02 { padding: 20px 0 0; }

	.partBox_tapeMode { display: block; margin-bottom: 60px; }
	.partBox_tapeMode .imgbox { margin-bottom: 20px; }
	.partBox_tapeMode .textbox { margin: 0; }

	.notice_lightball.light_red { margin-bottom: 30px; }
	
	
/*下載頁*/
.container.download{background: url("../images/bg_download.jpg") right center no-repeat; background-size: cover; }
.downloadArea{width:100%;height:auto;display:block;position:inherit; bottom:inherit; left:inherit; margin-left:inherit; padding: 60px 0 0; text-align: center;}
.downloadArea .img{text-align: center;flex:none; margin-bottom: 20px;}
.downloadArea .info{flex:none;}
.downloadArea h3 span{display: inline-block; padding-right: 20px;}
.downloadArea .btn{ display: block; align-items: center}
.downloadArea .btn li{ padding:0 20px; display: inline-block;}
}

@media screen and (max-width: 640px) {


	/*解說*/
	.learnBox .imgBox { max-width: 100%; }
	.learnBox .imgBox img { max-width: 100%; }
	.learnBox { flex-direction: column; }
	.learnBox .textBox { flex: 0 0 100%; margin-bottom: 10px; padding: 0; border-left: none; border-bottom: solid 1px #ddd; }
	.learnBox .textBox:nth-last-child(1) { border: 0; }

	/*影音*/
	.list_video li { flex: 0 1 calc((100% - 10px) / 2 ); position: relative; margin: 0 10px 20px 0; }
	.list_video li:nth-child(3n) { margin-right: 10px; }
	.list_video li:nth-child(2n) { margin-right: 0; }

	/*分享*/
	.reviewList {  }
	.reviewBox,
	.reviewBox:nth-child(4n) { flex: 0 1 auto; width: calc(50% - 10px); margin: 0 10px 30px 0; }
	.reviewImg { max-width: 100%; }

	/*秘技*/
	.partBox.chip { display: block; }
	.partBox.chip .imgpartbox { width: 280px; margin: 0 auto 20px; padding-left: 65px; }
	.partBox.chip .textpartbox img { margin-bottom: 20px; }
	
	/*下載頁*/
.container.download{background: url("../images/bg_download.jpg") 80% center no-repeat; background-size: cover; }
.downloadArea{ padding: 40px 0;}
.downloadArea .img img{width: 200px; margin: 0 auto;}
.downloadArea h3{font-size: 36px; margin: 0}
.downloadArea h3 span{ padding-right: 10px;}
.downloadArea .btn li{padding: 0 10px;}
.downloadArea .img, .downloadArea .btn a{margin: 0;}
.downloadArea .btn li img{ width:150px;}

}

@media screen and (max-width: 480px) {

	/*笑臉
	.list_smile { max-width: 100%; margin: 0; }*/

	/*影音*/
	.videoImg { margin-bottom: 5px; }
	.list_video li { flex: 0 1 100%; position: relative; margin: 0 0 20px; }
	.list_video li:nth-child(2n) { margin-right: 0; }

}

@media screen and (max-width:321px) {
	
/*下載頁*/
	.downloadArea h3{font-size: 30px;}	
	.downloadArea .btn li img{ width:120px;}
}