/*-----落點分析analysis.html-----*/
main.analysisZONE{ font-size: 26px;}
main.analysisZONE a{ text-decoration: none; color: inherit;}
main.analysisZONE a > h2{ margin: 0 auto; text-align: center; font-weight: bold; line-height: 3rem;}
main iframe#analysis_page{ min-width: 100%; }
.circle a{
margin: 0 1% 3%; padding: 2.5% 0; flex: 1;
border-style: solid; border-width: 2px 2px 2px 15px; border-radius: .3rem;
transition: all .3s ease-in-out;
/*border-radius: 50%; min-width: 20%; min-height: 20%; font-size: 1.4em;
box-sizing: content-box; white-space: nowrap;*/
}
.circle a:first-of-type{ margin-left: 0;}
.circle a:last-of-type{ margin-right: 0;}
/*.circle a::before { content: ""; display: inline-block; vertical-align: middle; padding-top: 100%; height: 0;}
.circle a span { display: inline-block; vertical-align: middle; }*/
.circle a:hover{ transform: scale(0.95);}
.circle a:nth-of-type(1){ border-color: #ff5038; background: #ffeae8; color: #ff5038;}
.circle a:nth-of-type(2){ border-color: #36ace7; background: #eff7ff; color: #22a1e0;}
.circle a:nth-of-type(3){ border-color: #3ed159; background: #e8feec; color: #22ac3c;}
.circle a:nth-of-type(4){ border-color: #fe3b86; background: #ffeff5; color: #e63075;}
.analysisZONE .col .black{
width:100%; height: 100px; border-radius: .5rem; display: flex; align-items: center; justify-content: center;
position: relative; background:url(../images/analysis_01.jpg) center no-repeat; background-size: cover; cursor: pointer;
}
.analysisZONE .col:nth-of-type(2) .black{ background:url(../images/analysis_02.jpg) center no-repeat;}
.analysisZONE .col:nth-of-type(3) .black{ background:url(../images/analysis_03.jpg) center no-repeat;}
.analysisZONE .col .black::before{
content: ""; display: block; width:100%; height:100%; border-radius: .5rem; transition: all .5s ease-in-out;
background:rgba(73, 73, 73, 0.85); position:absolute; top:0; left:0; right: 0; z-index: 0;
}
.analysisZONE .col .black span{ position: absolute; left: 0; right: 0; z-index: 1; color: #fff; font-size: .9em; letter-spacing:0.1em; text-align: center; }
/*.analysisZONE .col .black span::before{
content: ""; display: inline-block; margin-right: 8px; position: relative; top: -3px;
width: 0; height: 0; border-width: 7px 0 7px 13px; border-style: solid;
border-color: transparent transparent transparent #ffffff;
}*/
.analysisZONE .col:hover > .black::before{ background:rgba(254, 119, 23,.9); /*色塊淡出*/ }
section.analysis_notice{ margin-top: 8%; font-size: 0.8em;}
section.analysis_notice h2{ margin-bottom: 4%; color: #926125; font-weight: bold; text-align: center;}
section.analysis_notice h3{ margin: 5.5% 0 1.8%; font-weight: bold; }
section.analysis_notice h3::before{
content: ""; display: inline-block; margin-right: 12px; position: relative; top:-4px; left: 3px;
width: 0; height: 0; border-width: 7px 0 7px 15px; border-style: solid;
border-color: transparent transparent transparent #2491f6;
}
section.analysis_notice h3 span{ color: #035eb3;}
section.analysis_notice p{ line-height: 2.3rem;}
/*-----查榜ranking.html-----*/
main.rankZONE { font-size: 24px;}
main.rankZONE h2{ margin-bottom: 1.5%; font-weight: bold; color: #05A59A;}
.rankZONE .btn-group{ width: 47%; max-width: 220px; }
.rankZONE .btn-group button.dropdown-toggle{ font-size: 1em; border: 1px solid #9c9c9c; border-radius: 99em;}
.rankZONE .btn-group button.dropdown-toggle:focus{ background: #ff7809; color: #fff; border: none;}
.rankZONE .btn-group ul.dropdown-menu{
width: 100%; padding: 0; position: absolute; left: 0; right: 0; z-index: 9; font-size: .9em;
border-radius: .5rem; border: 2px solid #ff8a2a; box-shadow: 0 2px 1px rgba(86, 86, 86, 0.6);
overflow: hidden;
}
.rankZONE .btn-group ul.dropdown-menu li a{ padding: 6% 8%;}
.rankZONE .btn-group ul.dropdown-menu li:hover a{ background: #ffe9c9; color: #fb6400; font-weight: bold;}
/*-----------------------------------------------------------------------*/
@media (max-width:1400px) {
/*-----落點分析analysis.html-----*/
}
/*-----------------------------------------------------------------------*/
@media (max-width: 1240px) {
/*-----落點分析analysis.html-----*/
main.analysisZONE{ font-size: 22px;}
}
/*--------grid-breakpoints-LG---------------------------------------------*/
@media (max-width: 992px) {
/*-----落點分析analysis.html-----*/
.circle a{ width: 48%; margin-bottom: 5%; padding: 3% 0; flex: none; border-width: 2px 2px 2px 14px; }
/*.circle a:last-of-type{ flex: 0 0 100%; } 最後一個寬度100%*/
.circle a:nth-of-type(odd){ margin-left: 0;}
.circle a:nth-of-type(even){ margin-right: 0;}
.analysisZONE .col .black{ height: 100px;}
/*-----查榜ranking.html-----*/
main.rankZONE { font-size: 20px;}
.rankZONE .btn-group ul.dropdown-menu{ font-size: 1em; }
}
/*--------ipad------------------------------------------------------------*/
@media (max-width: 768px) {
/*-----落點分析analysis.html-----*/
section.analysis_notice h3::before { margin-right: 8px; border-width: 6px 0 6px 11px;}
section.analysis_notice{ margin-top: 14%; }
section.analysis_notice h2{ margin-bottom: 0; line-height: 2.3rem;}
section.analysis_notice h3{ margin: 10% 0 2.2%; line-height: 2.3rem;}
section.analysis_notice p{ line-height: 2rem;}
}
/*--------grid-breakpoints-SM---------------------------------------------------*/
@media (max-width: 576px) {
/*-----落點分析analysis.html-----*/
main.analysisZONE{ font-size: 20px;}
main.analysisZONE a > h2{ font-size: 0.96em; line-height: 2rem;}
.circle a{ width: 100%; padding: 4% 0; font-size: 1.08em;}
.circle a:nth-of-type(odd){ margin-right: 0;}
.circle a:nth-of-type(even){ margin-left: 0;}
.analysisZONE .col .black{ height: 60px;}
/*-----查榜ranking.html-----*/
.rankZONE .btn-group ul.dropdown-menu{ width: auto;}
}
/*--------iPhone XR------------------------------------------------------------*/
@media (max-width: 414px) {
}