/* Basic ======================================================================*/
.title { font-family: 'Roboto', sans-serif; font-size: 52px; line-height: 52px; margin-bottom: 30px; text-align: center; }
@media all and (max-width: 992px) { .title { font-size: 32px; line-height: 32px; } }

.subtitle { color: #282828; text-align: center; font-size: 22px; margin-bottom: 25px; }
@media all and (max-width: 992px) { .subtitle { font-size: 18px; } }

/* Banner =====================================================================*/
.banner { background: #000 url('../images/banner/idxbanner.jpg')no-repeat center; background-size: cover; overflow: hidden; position: relative; display: block; justify-content: center; align-items: center; padding-top: 45%; }
.banner:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.banner .slogan { position: absolute; top: 0px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.banner .slogan h1 { font-family: 'Roboto', sans-serif; display: block; color: #fff; font-size: 52px; line-height: 52px; font-weight: bold; text-align: center; }
.banner .slogan h1 span { display: block; padding-bottom: 10px; }
.banner .slogan h1 .sim { font-size: 31px; line-height: 31px; }
.banner video, .banner .canvas{ width: 120%; position: absolute; top: 0px; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {position: absolute; top: 0; bottom: 0; left: 0; width: 120%; border: 0; }
.banner img { width: 100%; }
.fancybox-is-open .fancybox-bg{ opacity: 1 !important; }

@media all and (max-width: 1100px) { .banner{ padding-top: 50%; }
  .banner video{ display: none; }
  .banner:before, .banner .slogan{ pointer-events: none; }
}
@media all and (max-width: 1024px) { .banner .btn-sliding { display: none; } }
@media all and (max-width: 992px) { .banner .slogan h1 { font-size: 32px; line-height: 32px; }
  .banner .slogan h1 .sim { font-size: 24px; line-height: 24px; } }
@media all and (max-width: 425px) { .banner{ padding-top: 75%; }
  .banner .slogan { margin-top: 30px; }
  .banner .slogan h1 { font-size: 22px; line-height: 22px; }
  .banner .slogan h1 .sim { font-size: 18px; line-height: 18px; } }
@media all and (max-width: 320px) { .banner .slogan { margin-top: 40px; } }

/* Products====================================================================*/
.idx-product .title { color: #545454; }
.idx-product .box { display: flex; flex-wrap: wrap; padding-top: 60px; padding-bottom: 90px; }
.idx-product .box a { width: calc(100%/3 - 17px); margin-right: 25px; margin-bottom: 80px; display: block; text-align: center; }
.idx-product .box a:nth-child(3n+3) { margin-right: 0px; }
.idx-product .box a:hover .pic img { transform: scale(1.1); }
.idx-product .box a:hover .name { color: #969696; }
.idx-product .box .pic { max-width: 350px; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.idx-product .box .pic img { width: auto; max-height: 255px; float: left; transition: all .2s; }
.idx-product .box .name { display: block; font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 30px; font-weight: bold; margin: 0; margin-top: 20px; text-align: center; color: #4D4D4D; transition: all .2s; }
@media all and (max-width: 992px) { .idx-product .box { justify-content: space-between; }
  .idx-product .box a { width: calc(50% - 54px); margin-right: 0px; }
  .idx-product .box .name { font-size: 16px; } }
@media all and (max-width: 480px) { .idx-product .box a { width: calc(50% - 17px); } }
@media all and (max-width: 320px) { .idx-product .box a { width: 100%; } }

/* Community===================================================================*/
.idx-community .title { font-size: 30px; padding: 15px 0; color: #fff; background: #4D4D4D; max-width: 1175px; margin: 0px auto; position: relative; }
.idx-community .title .btn-community-list { position: absolute; right: -122px; }
.idx-community .title:before, .idx-community .title:after { content: ''; position: absolute; top: 0px; width: 100%; height: 100%; background: #4D4D4D; z-index: -1; }
.idx-community .title:before { left: -100%; }
.idx-community .title:after { right: -100%; }
.idx-community .box { display: flex; background: #333; }
.idx-community .box li { width: calc(100%/4); position: relative; }
.idx-community .box li:hover figure:before { color: #fff; }
.idx-community .box li:hover .mask { opacity: .8; }
.idx-community .box figure { display: flex; justify-content: center; align-items: center; overflow: hidden; }
.idx-community .box figure:before { font-family: 'icomoon'; color: #fff; font-size: 60px; position: absolute; content: ''; z-index: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.idx-community .box figure.idx-cl-twitter:before { content: '\ea96'; }
.idx-community .box figure.idx-cl-facebook:before { content: '\ea91'; }
.idx-community .box figure.idx-cl-youtube:before { content: '\ea9d'; }
.idx-community .box figure.idx-cl-instagram:before { content: '\ea92'; }
.idx-community .box img { float: left; }
.idx-community .box .mask { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #333; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
@media all and (max-width: 1440px) { .idx-community .title .btn-community-list { right: -5%; } }
@media all and (max-width: 1280px) { .idx-community .title .btn-community-list { right: -1%; } }
@media all and (max-width: 1110px) { .idx-community .title { display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .idx-community .title .btn-community-list { position: relative; right: auto; margin-top: 20px; }
  .idx-community .title:before, .idx-community .title:after { display: none; }
  .idx-community .box { flex-wrap: wrap; }
  .idx-community .box li { width: 50%; }
  .idx-community .box img { width: 100%; } }
@media all and (max-width: 992px) { .idx-community .title { font-size: 32px; line-height: 32px; } }
@media all and (max-width: 425px) { .idx-community .title { padding: 15px 5%; } }

/* Narrative===================================================================*/
.idx-narrative [class^="idx-box-"] { position: relative; }
.idx-narrative [class^="idx-box-"]:last-child { margin-bottom: 0px; }
.idx-narrative [class^="idx-box-"] .txt { position: absolute; z-index: 1; width: 100%; height: 100%; color: #fff; font-size: 22px; line-height: 24px; }
.idx-narrative [class^="idx-box-"] .txt h3 { font-family: 'Roboto', sans-serif; font-size: 52px; line-height: 52px; color: #FF3F00; margin: 0px; }
.idx-narrative [class^="idx-box-"] .bg { padding-top: calc(100vh - 30px); overflow: hidden; background-repeat: no-repeat; background-position: center center; }
.idx-narrative .idx-box-invest .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; }
.idx-narrative .idx-box-invest .txt h3 { margin-bottom: 25px; }
.idx-narrative .idx-box-invest .txt .title-min { font-size: 25px; line-height: 25px; margin-bottom: 15px; text-shadow: 0 1px 15px #000; }
.idx-narrative .idx-box-invest .bg { background-image: url(../images/background/idx-invest.jpg); position: relative; }
.idx-narrative .idx-box-invest .bg video,.idx-narrative .idx-box-invest .bg .canvas-pro { position: absolute; top: 0px; left: 0px; width: 100%; }
.idx-box-invest .bg .canvas-pro{ width: 100%; height: 100%; }
.idx-narrative .idx-box-invest .bg:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }
.idx-narrative .idx-box-bulletins .txt { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.idx-narrative .idx-box-bulletins .txt h3 { margin-bottom: 25px; }
.idx-narrative .idx-box-bulletins .txt h3 span { color: #fff; }
.idx-narrative .idx-box-bulletins .txt span { max-width: 950px; line-height: 34px; margin-bottom: 65px; }
.idx-narrative .idx-box-bulletins .bg { background-image: url(../images/background/idx-bulletins.jpg); }
.idx-narrative .idx-box-help .txt { max-width: 770px; top: 25%; left: 15%; }
.idx-narrative .idx-box-help .txt h3 { margin-bottom: 15px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
.idx-narrative .idx-box-help .txt span { line-height: 34px; }
.idx-narrative .idx-box-help .bg { background-image: url(../images/background/idx-help.jpg); background-size: 100%; }
.idx-narrative .idx-box-who .txt { max-width: 770px; top: 25%; left: 15%; }
.idx-narrative .idx-box-who .txt h3 { color: #fff; margin-bottom: 15px; }
.idx-narrative .idx-box-who .txt span { line-height: 34px; }
.idx-narrative .idx-box-who .txt ul li { margin: 20px 0; margin-left: 80px; position: relative; }
.idx-narrative .idx-box-who .txt ul li:before { position: absolute; top: 12px; left: -20px; content: ''; width: 10px; height: 10px; border-radius: 100%; background: #fff; }
.idx-narrative .idx-box-who .bg { background-image: url(../images/background/idx-who.jpg); }
@media all and (max-width: 1427px) { .idx-narrative .idx-box-help .bg { background-size: cover; } }
@media all and (max-width: 1024px) { .idx-narrative .idx-box-invest .bg video ,.idx-narrative .idx-box-invest .bg .canvas-pro{ width: auto; height: 100%; } }
@media all and (max-width: 992px) { .idx-narrative [class^="idx-box-"] .txt { padding: 0 5%; font-size: 16px; }
  .idx-narrative [class^="idx-box-"] .txt h3 { font-size: 32px; line-height: 32px; }
  .idx-narrative .idx-box-help .txt { left: 0px; }
  .idx-narrative .idx-box-who .txt { left: 0px; } }
@media all and (max-width: 768px) { .idx-narrative .idx-box-help .txt { top: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .idx-narrative .idx-box-who .txt { top: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; } }
@media all and (max-width: 425px) { .idx-narrative .idx-box-help .bg { background-position-x: 32%; } }