@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('bootstrap-icons.css');

/* 頁面淡入 */
@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.index { animation-duration: 3s; animation-name: fadeOut;  position: relative; }
body {  animation-duration: 2s; animation-name: fadeOut;  margin: 0; font-family: 'Poppins', 'Noto Sans TC', bootstrap-icons, Microsoft JhengHei; font-weight: 400; position: relative; font-size: 16px; }
.index-body { max-width: 1400px; margin: 20px auto; }

a {  text-decoration: none; color: #333333;  transition: all 0.3s ease; }

header {  background: linear-gradient(to bottom,  rgba(0,78,162,1) 0%,rgba(53,105,158,1) 100%); padding: 0 10px; }
.logo a { width: 200px; display: block; }
img { max-width: 100%; width: auto;}


/* header */
header .nav-item .dropdown-menu { border-radius: 0; background: #ffffff; }
header .nav-item .dropdown-menu li a {  color: #333333; padding: 8px 12px;  text-align: center;}
header .nav-item .dropdown-menu li a span { font-size: 0.6em; margin-left: 0.5em; }
header .nav-item .dropdown-menu li a:hover {  background-color: #002e5e; color: #ffffff;}
 
header .navbar-nav { margin-right: 20px; }

.wallpeper {min-height: 350px;}

/*index*/
.index-sub-title { text-align: center; font-size: 36px; color: #867e50; font-weight: 400; font-style: italic; position: relative; vertical-align: bottom; padding-bottom: 50px; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); z-index: 10; }
.index-sub-title:before { content: ''; display: block; width: 80px; height: 5px; border-radius: 10px; background-color: #c4b85d; position: absolute; bottom: 30px; left: calc(50% - 40px); box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);  z-index: 1; }
.index-sub-title span { font-size: 0.6em; margin-top: -7px; display: inline-block; vertical-align: middle; margin-right: 0.5em; color: #ea3939; font-weight: 300;}
.index-sub-title span:after { content: '/'; font-size: 1.4em; margin-left: 0.5em; display: inline-block; font-weight: 100;}

.i-major-team { background-color: #333333; background-image: url(../images/i-index-major-bg.jpg); background-position: center; background-size: cover; padding: 100px 20px; position: relative; z-index: 10; }
.i-major-team:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
.i-major-list { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-major-list ul { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 0; }
.major-item { width: 100%; max-width: 300px; flex: none; margin:0 5px 30px 5px; padding-bottom: 30px; overflow: hidden; background-color: #333333; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 5px rgba(0, 0, 0, .1); }
.major-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden;}
.major-item:hover .photo { background-size: 105% auto; }
.major-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 42%; }
.major-item h4 { font-size: 24px; padding: 15px 10px; font-weight: 400; color: #e7ec89; text-align: center; }
.major-item h4:after { content: '分析師'; margin-left: 5px; font-size: 12px; background: #91945e; color: #ffffff; padding: 3px 10px; margin-left: 10px; border-radius: 2px; font-weight: 400; vertical-align: middle;  }
.major-item .info span { display: block; text-align: left; padding-left: 20px; font-size: 16px; color: #e2deae; font-weight: 300;  }
.major-item .info span:before { content: '\F133'; margin-right: 10px; margin-bottom: 0; display: inline-block; vertical-align: middle; }

.major-item  .social-link { text-align: center; padding-top: 20px; }
.major-item  .social-link a { display: inline-block; font-size: 26px; line-height: 26px; width: 42px; height: 42px; padding: 10px 0; color: #ffffff; margin: 5px; border-radius: 4px; background: #d4cd92de; }
.major-item  .social-link a:hover {  background-color: #af0320; box-shadow: 0 5px 15px rgba(0, 0, 0, .3);  }
.major-item  .social-link a:before { vertical-align: middle; } 



/*
.major-item  .social-link a.line { background-color: #21a300; }
.major-item  .social-link a.youtube { background-color: #d31616; }
.major-item  .social-link a.facebook { background-color: #2c5ce0; }
.major-item  .social-link a.podcast { background-color: #b217d9; }
.major-item  .social-link a.phone { background-color: #ffae00; }
*/

.i-major-team .swiper-button-prev,
.i-major-team .swiper-button-next { text-shadow: 0 0 10px rgba(0, 0, 0, .8); padding: 10px; }


.i-live-broadcast {  background-color: #e89b9b; background-image: url(../images/i-video-bg.jpg); background-position: center; background-size: cover; padding: 100px 20px; position: relative; }
.i-live-broadcast:before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); z-index: 1; }
.i-live-video { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-live-broadcast .video-item { background-color: #ffffff; }
.i-live-broadcast .video-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden;}
.i-live-broadcast .video-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 56%; }
.i-live-broadcast .video-item h4 { font-size: 18px; font-weight: 300; text-align: left; margin: 0; padding: 10px 20px; }

.i-live-broadcast .swiper-wrapper .swiper-pagination-bullet { bottom: -10px !important; }

.i-daily-picks {  background-color: #c7c288; background-image: url(../images/i-daily-bg.jpg); background-position: center; background-size: cover; padding: 100px 20px; position: relative;}
.i-daily-picks:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    z-index: 1; }
.i-daily-list { max-width: 1600px; margin: 0 auto; padding-bottom: 50px !important; z-index: 10; position: relative; }
.i-daily-picks .daily-item { background-color: #ffffff;  }
.i-daily-picks .daily-item .photo { width: 100%; flex: none; background-position: center;  background-size: 100% auto; background-repeat: no-repeat; transition: all 0.6s ease;  overflow: hidden;}
.i-daily-picks .daily-item .photo a { display: block; width: 100%; height: 0; padding-bottom: 56%; }
.i-daily-picks .daily-item .photo:hover { filter: brightness(1.6); }
.i-daily-picks .daily-item h4 { font-size: 18px; font-weight: 300; text-align: left; margin: 0; padding: 10px 20px; }

.i-daily-picks .swiper-wrapper .swiper-pagination-bullet { bottom: -10px !important; }



.bd-placeholder-img { text-anchor: middle; }

.sub-title { color: #7c7848; margin-bottom: 0.8em; padding-bottom: 0.5em; position: relative; }
.sub-title:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d3d38d+0,bcbcb8+100 */
    background: linear-gradient(to right,  #d3d38d 0%,#bcbcb8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
.sub-title span { font-size: 0.6em; font-weight: 300; margin-left: 1em; color: #888888; }

/* index-line-chart */
.index-line-chart { max-width: 1600px; margin: 20px auto;}


/* breadcrumb */
.breadcrumb { max-width: 1300px; margin: -25px auto; background-color: #ffffff; border-radius: 0.5em; padding: 0.8em 1em;  box-shadow: 0 0 10px rgba(0, 0, 0, .1); position: relative; z-index: 10; }

/* page-main */
.page-main { background-image: url(../images/page-main.jpg); background-color: #f4f4f4; background-position: top center; background-repeat: no-repeat; background-size: 100% auto ; min-height: 300px; padding: 50px 10px; position: relative; z-index: 1; }
.page-box { box-shadow: 0 0 10px rgba(0, 0, 0, .3); }

/* form-signin */
.member-title { font-size: 36px; font-weight: 400; padding: 30px 10px 20px 10px; }
.member-title span { font-size: 0.5em; margin-left: 1em; color: #c0c0c0; }
.form-signin { max-width: 330px; width: 100%; margin: auto; padding: 30px 10px 50px 10px; }
.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
.form-signin .form-floating label span { font-size: 0.8em; margin-left: 5px; color: #666666; }
.form-check { display: inline-block; padding: 0.375rem 0.75rem 0.375rem  2rem;}

/*nav*/
.menu-icon.navbar-toggler { border: 1px #ffffff solid; background-image: url(../images/menu.svg); background-repeat: no-repeat; background-position: center; }
.nav-item { display: flex; flex-wrap: nowrap; align-items: center; font-family: Montserrat, 'Noto Sans TC'; position: relative;}
.nav-item:before { content: ''; display: block; position: absolute; bottom: -10px; left: 0; height: 5px; width: 0; transition: all 0.3s ease; background-color: #73bde8; }
.nav-item:hover:before { width: 80%; left: 10%; }
.nav-item > a { padding: 5px 30px;  text-align: center;  text-decoration: none;  display: block; color: #33a2ca; font-size: 12px; text-align: center; }
.nav-item > a:hover,
.nav-item > a:focus {  color: #bebebe; }
.nav-item > a span { display: block;  font-size: 18px; color: #ffffff; font-style: italic; }

 .other-menu { display: none; }
 .banner-box.mb {   display: none; }

 .nav-item .dropdown-toggle::after { font-size: 20px; position: absolute; bottom: 0; left: calc(50% - 10px); }
 .nav-item .dropdown-menu { width: 180px; top: 60px !important; left: calc(50% - 90px) !important; inset: auto; }
.navbar-toggler { padding: 0 5px; }


  /* .swiper 套件調整 */
.swiper { width: 100%; }
.swiper-wrapper { height: auto !important; margin: 0; padding: 0; }  
.swiper-slide {  text-align: center;  font-size: 18px; display: flex; justify-content: center;  align-items: center; }
.swiper-slide img {  display: block;  width: 100%; height: auto;  object-fit: cover;}
.swiper-button-prev.swiper-button-disabled, 
.swiper-button-next.swiper-button-disabled {  pointer-events: all !important; }
.swiper-pagination-bullet {
    width: 20px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3);
    transition: all 0.3s ease;
}

.swiper-button-prev, 
.swiper-button-next {  color: #ffffff !important;  text-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.swiper-button-prev {  left: 20px !important; }
.swiper-button-next {  right: 20px !important; }
.i-media-list .swiper-button-prev{   left: 0px !important; }
.i-media-list .swiper-button-next{   right: 0px !important; }

/* about-info */
.about-info { display: flex; padding: 50px; background-color: #5a5a53; background-position: center; background-repeat: no-repeat; background-size: cover; color: #ffffff; margin-bottom: 30px; min-height: 250px; align-items: center;position: relative; }
.about-info:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+52,000000+100&1+0,1+52,0+100 */
    background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    } 
.about-info > div { position: relative; z-index: 20; }    
.about-info.d-left { justify-content: left; }
.about-info.d-right {justify-content: right; }
.about-info.d-right:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+52&0+0,1+52,1+100 */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    } 

.about-info h3 { font-weight: 300; position: relative; color: #00c0de; padding: 0 0 30px 0; margin: 0 0 30px 0; }
.about-info h3:before {  content: ''; display: block; width: 100px; height: 2px; background-color: #00c0de; position: absolute; bottom: 0; left: calc(50% - 50px);  }

.about-logo { padding: 30px; }
.about-logo img { max-width: 360px; width: 100%; }
.m-w320 { max-width: 320px; }

.content-ol { margin: 30px 0; }

/* company-info  */
.company-info { padding: 2em 1.5em; border: 1px #bebebe solid; line-height: 2em; font-weight: 300; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/contactimg.jpg); color: #ffffff; border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); }
.company-info .company-title { text-align: center; color: #a2c7cc; padding-bottom: 40px; position: relative; }
.company-info .company-title:before { content: ''; width: 100px; height: 5px; border-radius: 4px; background-color: #59939c; position: absolute; bottom: 15px; left: calc(50% - 50px); } 
.company-info i { margin-right: 10px; }
.payment-title { margin: 0.5em 0 1em 0; color: #919051; }
.payment-title i { margin-right: 0.5em; }
.payment-title .note { font-size: 0.8em; color: #d50000; }

/* stock-list */
.stock-list .photo { width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover;  }
.stock-list .photo a { display: block; width: 100%; height: 0; padding-bottom: 56.6%; }
.stock-list .card { overflow: hidden; }

/* page-banner  */
.page-banner { padding: 100px 0; background-color: #121f47; background-position: center; background-repeat: no-repeat; background-size: cover;}
.page-banner-title { margin: 0 auto; max-width: 1300px; color: #ffffff; }
.page-banner-title h1 { font-size: 36px; margin: 0; padding: 0; text-align: center; font-weight: 300;  }
.page-banner-title h1 span { font-size: 0.6em; color: #cdc176; font-weight: 200;  }

/* search-bar */
.search-bar { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.search-bar .form-control { border: 0;}
.search-bar button.btn { background-color: transparent; border: 0; color: #ffffff; font-size: 24px;  }
.search-bar button.btn:hover {  color: #00c0de; }

/* member-mug-shut */
.member-cover { position: relative; background-repeat: no-repeat; background-size: cover; margin-bottom: 10px; padding-bottom: 1px; }
.member-info { display: flex;  padding: 20px; border-radius: 4px;
            /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.8+0,0.9+100 */
            background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }
.member-mug-shut { display: inline-block; width: 60px; height: 60px; flex: none; background-color: #424242; border-radius: 99em; text-align: center; }
.member-mug-shut:before { content: '\F4DA'; font-size: 36px; vertical-align: middle; display: inline-block; line-height: 40px; padding-top: 15px; } 
.member-info .member-name { flex: 1; margin:0 0 0 15px; padding-top: 10px; }
.member-info .member-name span { display: block; font-size: 0.8em; font-weight: 300; width: 100%; flex: none; padding-top: 0.5em; color: #bfbfbf; }
.member-info .server-name { display: flex; flex-wrap: wrap; align-content: center ; justify-content: center; text-align: center; font-size: 18px; }
.member-info .server-name .phone { color: #fff787; width: 100%; flex: none; }


/* download-report */
.download-report { margin-bottom: 30px; }
.download-report > li > div {  line-height: 38px; }
.download-report > li > div .bi { display: inline-block; font-size: 24px; vertical-align: middle; line-height: 24px; margin-right: 5px; margin-top: -5px;  }

.member-cover-title-bg { background-color: #837c5a; border-radius: 4px; padding: 40px; color: #ffffff; margin-bottom: 30px; background-position: center right; background-repeat: no-repeat; background-size: cover; }
.member-cover-title-bg h3 { margin-bottom: 0; font-weight: 300; }

.back-page { margin-top: 30px; }


/* teacher-mug-shut */
.teacher-info { margin-bottom: 90px; background-position: center; background-repeat: no-repeat; background-size: cover; text-shadow: 0 0 5px rgba(0, 0, 0, .3); }
.teacher-info > .row { display: flex; flex-wrap: wrap; }
.teacher-cover { display: flex; flex-wrap: wrap; justify-content: center; }
.teacher-mug-shut { display: inline-block;  width: 240px; height: 240px; flex: none; background-color: #33a2ca; border-radius: 99em; background-position: left center; background-repeat: no-repeat; background-size: cover; border: 5px #cfd396 solid; box-shadow: 0 10px 10px rgba(0, 0, 0, .3); }
.teacher-info .teacher-name { display: flex; flex-wrap: wrap; align-content: center; flex: 1; margin:0 0 0 15px; flex: 1; max-width: 200px;  font-size: 32px;}
.teacher-info .teacher-name span { display: block; font-size: 0.6em; font-weight: 300; width: 100%; flex: none; padding-top: 0.5em; color: #bfbfbf; }

.teacher-info-list { display: flex; flex-wrap: wrap;  align-content: center; } 
.teacher-info-list h5 { color: #ffcd03; width: 100%; flex: none;}
.teacher-info-list p { width: 100%; flex: none; }

.teacher-tool-links { margin: 10px 0 -90px 0; border-radius: 99em; padding: 15px 20px; text-align: center; box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
                        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#efefef+0,ffffff+100 */
                        background: linear-gradient(to bottom,  #efefef 0%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                    }
.teacher-tool-links a { display: inline-block; height: 48px; border-radius: 99em; background-color: #00c0de; color: #ffffff; font-size: 16px; padding: 12px; line-height: 1em; } 
.teacher-tool-links a:hover { background-color: #dac100; }
.teacher-tool-links a i { font-size: 24px; vertical-align: middle; }
.teacher-tool-links .gruid-line { display: inline-block; width: 0; height: 90%; vertical-align: middle; border-left: 1px #00c0de solid; margin: 0 30px; }

.teacher-tool-links a.line { background-color: #01b301; }
.teacher-tool-links a.youtube { background-color: #c6201e; }
.teacher-tool-links a.facebook { background-color: #0863f7; }
.teacher-tool-links a.podcast { background-color: #c1c405; }
.teacher-tool-links a.phone { background-color: #5a5a53; }

.stock-daily-report { list-style: none; margin: 0; padding: 0; }
.stock-daily-report li { margin-bottom: 0.5em; }
.stock-daily-report li a { display: block; padding: 0.5em 1em; border-radius: 0.5em; background-color: #ffffff; font-size: 16px; text-align: right; font-weight: 400; }
.stock-daily-report li a:hover { background-color: #00c0de; color: #ffffff; }
.stock-daily-report li .date { float: left; }
.stock-daily-report li i { margin-left: 1em; font-size: 1.6em; color: #d30d0d; }

.mr-5 { margin-right: 5px; }

/* video-title */
.stock-list .card-body { padding: 15px 10px 15px 35px; position: relative; border-top: 5px #c07608 solid; }
.stock-list .card-body:before { content: '\F4F3'; display: block; position: absolute; top: 15px; left: 15px; }
.video-title { font-size: 16px; margin-bottom: 0; font-weight: 500; }
.page-content { background-color: #ffffff; border-radius: 4px; padding: 20px; }
.video-out-box { max-width: 980px; margin: 0 auto; }
.video-play-box { width: 100%; height: 0; padding-bottom: 56%; position: relative; margin: 0 auto 30px auto; }
.video-play-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* page-link */
.page-link  { color: #333333; }
.page-link a { color: #333333; }

/* footer */
footer { background-color: #004EA2; color: #ffffff;  }
.footer-logo {   max-width: 120px;  margin: 0 auto; }
footer nav.footer-link { margin-bottom: 30px; flex-wrap: wrap;  border-bottom: 1px #1c75a8 solid;}
footer nav.footer-link a { flex: 1; display: inline-block; color: #ffffff; padding: 15px 20px; position: relative; }
footer nav.footer-link a:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 0; border-bottom: 4px transparent solid; transition: all 0.3s ease; } 

.foot-info .footer-title { border-bottom: 1px #1c75a8 solid; padding-bottom: 10px;  }

.footer-link { text-align: center; font-size: 12px;  background-color: #004EA2; color: #ffffff; flex-wrap: wrap; }
.footer-link span { display: block; font-size: 16px; color: #00c0de; transition: all 0.3s ease; }


footer nav.footer-link a:hover { color: #f7ff02;  }
footer nav.footer-link a:hover span { color: #f7ff02; }
footer nav.footer-link a:hover:after { border-bottom: 4px #dedc72 solid; width: 100%; } 

.footer-link-info a { display: block; color: #ffffff; margin-bottom: 5px; }
.footer-link-info a:hover { color: #48fff9; }
.copyright { font-size: 14px; margin-top: 30px; padding: 20px; border-top: 1px #1c75a8 solid; }

.breadcrumb-item + .breadcrumb-item::before { font-size: 0.6em; margin-top: 0.6em; }