@charset "utf-8"; @media screen and (max-width: 1449.98px) { .nav-item .subnav { width: 315px; } } @media screen and (max-width: 1399.98px) { .container { padding: 0 20px; } #headerTop { padding: 0 20px; } #footerMain { padding: 0 20px; } .insideAnimeGroup { width: 58%; } .flexWrap { margin-bottom: 60px; } .nav-item:first-child .subnav { left: 0; right: inherit; transform: translateX(0); } .nav-item:last-child .subnav { right: 0; left: inherit; transform: translateX(0); } } @media screen and (min-width: 768px) { .tab-container .tab-menu ul li.mobileSelected { display: none; } .tab-container .tab-menu ul li:not(.mobileSelected) { display: block !important; } .tab-container .tab-menu ul { grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); gap: 20px; border-bottom: 2px solid var(--list-bullet-color-100); display: grid; } .tab-container .tab-menu ul li a { text-decoration: none; border: 0; /* font-size: 1.44em; */ color: var(--base-link-color); background-color: #e9e7e9; } .tab-container .tab-menu ul li.selected a, .tab-container .tab-menu ul li.selected a:focus, .tab-container .tab-menu ul li:not(.mobileSelected) a:hover, .tab-container .tab-menu ul li:not(.mobileSelected) a:focus { background-color: var(--list-bullet-color-100); color: #fff; } .tab-container .tab-menu ul li.selected a:after { content: ""; position: absolute; bottom: -12px; left: 50%; width: 0; height: 0; border-top: 8px solid var(--red-normal); border-left: 8px solid transparent; border-right: 8px solid transparent; z-index: 50; margin-left: -4px; transition: transform 0.3s ease 0s; } /* .tab-container .tab-menu ul.col-2 li{ flex: 0 0 calc(50% - 10px); } */ } @media screen and (min-width: 992px) and (max-width: 1199.98px) {} @media screen and (min-width: 1300px) { html { overflow: auto !important; overflow-x: hidden !important; } #mobileBgLayer, #mobileNavWrap, .showMMenu #mobileNavWrap { display: none; } } @media screen and (max-width: 1299.98px) { #mmenuBtn { display: flex; } #toolLangs, #toolShare, #toolFontsize { display: none; } #mainNav > ul > li { max-width: 100%; width: 100%; margin: 0 !important; } #mainNav .nav-item:not(.selected) { display: none; } #mainNav .nav-item:before { content: none; } .nav-item:first-child .subnav { width: 315px; max-width: 315px; } .nav-item:first-child .subnav, .nav-item:last-child .subnav { left: 50%; right: inherit; transform: translateX(-50%); } .nav-item:before { right: -12%; } .nav-item .nav-link .step { font-size: 1.111em; } .nav-item.active .nav-link .step, .nav-item.selected .nav-link .step, .nav-item:hover .nav-link .step, .nav-item .nav-link.focus .step { font-size: 1.111em; } .nav-item .nav-link .icon { min-width: 35px; width: 35px; height: 35px; background-size: 35px 35px; } .nav-item .nav-link .title { font-size: 1.555em; } .nav-item .nav-link { padding: 10px 30px 30px; } .nav-item .subnav .popup_title { font-size: 1em; } .nav-item .subnav .section-title { padding: 10px 20px 5px 20px; font-size: 1.111em; } .nav-item .subnav-link { font-size: 0.888em } .flexWrap.col-2 > .col { width: 100% !important; flex: 0 1 100% !important; } .flexWrap.col-2 .col.colImg .insideAnimeGroup { position: relative; left: inherit; top: inherit; width: 45%; margin: 40px auto 40px; } #content .imgCols-grid { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); } .mainVideo { max-width: 540px; } } @media screen and (max-width: 1199.98px) { .flexWrap.sectionMainImg { flex-wrap: wrap; } .flexWrap.sectionMainImg > div:first-child { margin-bottom: 50px; padding-right: 3.5%; width: 100% !important; flex: 0 1 100% !important; } .slogan p:last-child { margin-left: 0; } .insideAnimeGroup { position: relative; right: inherit; top: inherit; margin: 0 auto; width: 50%; } .mainVideo { height: auto; } .mainVideo .videoBox { padding: 28.1%; } .attention-box:after { width: 180px; } } @media screen and (max-width: 1099.98px) { .page-filter-wrap { margin-left: 30px; } } /* Medium devices (Tablets, less than 992px) */ @media screen and (max-width: 991.98px) { /* .mainNav_m .subnav ul li:not(.sectionTitle) { padding: 8px 20px 8px 45px; } */ .mainNav_m .nav-link span { font-size: 1.125em; } .mainNav_m .subnav ul li.sectionTitle { font-size: 1.125rem; } .mainNav_m .subnav ul li { font-size: 1em; } #mainZone:after { width: 400px; /* height: 100%; */ } #pageTitle { font-size: 1.75em; margin-bottom: 20px; } .display-m { display: block; } #toolLangs.active .subnav, #toolShare.active .subnav { transform: translate(-50%, -10px); } #toolSearch.active .searchForm { opacity: 1; transform: translateY(0px); } #logoWrap img { width: 225px; } .nav-item .nav-link .title { font-size: 1.333em; } .nav-item .subnav:first-child { left: 50%; transform: translateX(-50%); } .nav-item .subnav-link { font-size: 1em; } #mainContent { width: 100%; padding-top: 50px; } #footerMain { display: block; } .footerRight { text-align: left; padding: 0 0 20px; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-left: 0; } .footerRight div { width: 100%; text-align: center; margin-top: 1rem; } .generalBtn { padding: 15px 70px 15px 15px; } .generalBtn span { width: 30px; height: 30px; } .generalBtn span:before { width: 12px; height: 12px; left: 8px; } #insideVisualWrap { background-size: auto 100%; background-color: transparent; } .photosWrap .photoItem { width: calc((99.99% - 60px)/3); } #content .flexbox.col-3 .item { width: calc((100% - 40px) / 2); } /*transform table*/ #content table.transform-table thead th, #content table.transform-table tbody th { display: none; } #content table.transform-table tr td { display: block; width: 100%; text-align: left; padding-top: 0; padding-bottom: 0; position: relative; } #content table.transform-table tr td[data-label]:before { content: attr(data-label)' :'; display: inline-block; padding-right: 10px; } #content table.transform-table tr td:first-child { padding-top: 10px; } #content table.transform-table tr td:last-child { padding-bottom: 10px; } #contentWrap:before { bottom: -20px; } .f-left-img, .f-right-img { float: none; margin: 0 auto 15px; max-width: 360px; } .flexWrap { margin-bottom: 40px; } .flexWrap.col-2 .col.colImg .insideAnimeGroup { width: 70%; } #contentWrap:before { width: 180px; height: 180px; } .accordCtrls { text-align: center; } } /*Between Tablets and Mobile */ @media screen and (min-width: 768px) and (max-width: 991.98px) {} @media screen and (min-width: 768px) {} /* Small devices (landscape phones, less than 768px) */ @media screen and (max-width: 767.98px) { /****** common starts******/ body { font-size: 1rem; } .mainNav_m .subnav ul li:not(.sectionTitle):before { top: 0.9em; } .fixBtn { width: 60px; height: 60px; right: -20px; } .fixBtn .icon { width: 60px; height: 60px; background-size: 30px 30px; } .fixBtn.btn-1 { top: 160px; } .fixBtn.btn-2 { top: 225px; } .fixBtn.btn-3 { top: 290px; } .fixBtn.btn-4 { top: 355px; } .fixBtn:hover .icon, .fixBtn.focus .icon, .fixBtn.init .icon, .fixBtn.hovered .icon { width: 56px; height: 56px; min-width: 56px; } .fixBtn:hover .icon, .fixBtn.focus .icon, .fixBtn.init .icon, .fixBtn.hovered .icon { background-size: 35px 35px; } .fixBtn span { font-size: 1em; } #mainZone:after { right: 0; bottom: 0; } #content p { margin-bottom: 15px; } #logoWrap img { width: 200px; } .mainVideo { width: 90%; margin-bottom: 25px; } .mainVideo .videoBox { padding: 28.2%; border-radius: 10px; } .flexWrap.col-2 > div:first-child { margin-bottom: 30px; } .pagination .mobilePagin { display: inline-flex; align-items: center; } .pagination .mobilePagin .txt { padding: 0 0 0 5px; } .pagination .mobilePagin .txt span { font-weight: 700; } .pageNav a:not(.arrow), .pageNav > span { display: none; } .page-filter-wrap { margin-left: 20px; } .page-filter-wrap label { line-height: 38px; } .mobilePagin .select-selected { line-height: 26px; } .pagination .page-filter-wrap { display: none; } .pagination .page-filter-wrap-m { display: inline-flex; } hr { margin: 40px 0; } .attention-box { padding: 0 20px 45px 22px; } .attention-box > div { padding: 15px 25px; } .attention-box:after { background-size: 60% 60%; background-position: 100% 100%; bottom: 15px; display: none; } .attention-box .title.title-only { padding-right: 0; } .flowchart-wrap .chart-item { padding: 20px 15px; } .flowchart-wrap div.two-item { gap: 20px !important; } .flowchart-wrap div.two-item > div { flex: 0 0 100% !important; } .flowchart-wrap div.two-item.nowrap > div { flex: 0 0 calc(50% - 10px) !important; } .flowchart-wrap div.chart-item div.two-item > div, .flowchart-wrap div.three-item > div { flex: 0 1 100% !important; } .flowchart-wrap div.three-item { flex-wrap: wrap; text-align: left; } .flowchart-wrap div.three-item ul li { display: block; margin-left: 24px; margin-bottom: 10px; } /****** content ends******/ .tab-container .tab-menu { max-width: 460px; margin: 0 auto 30px; } .tab-container .tab-menu ul { flex-wrap: wrap; } .tab-container .tab-menu ul li { width: 100%; flex: 1 1 100%; min-height: 44px; } .tab-container .tab-menu ul li:not(.mobileSelected) { min-height: 0; display: none; } .tab-container .tab-menu ul li:not(.mobileSelected) a { padding-top: 5px; padding-bottom: 5px; border: 1px solid #cfd1e5; border-top: none; background-color: #fff; } .tab-container .tab-menu ul li.selected a { font-weight: 700; } .tab-container .tab-menu ul li a.tab-iconBtn .icon, .tab-container .tab-menu .mobileSelected .icon { display: none; } .tab-container .tab-menu ul li:not(.mobileSelected) a:is(:hover, :focus) { color: var(--list-bullet-color-100); } /* .tab-container .tab-menu ul li.mobileSelected a:before { background-color: var(--grey-light1); } */ /* .tab-container .tab-menu ul li.mobileSelected + li > a { border-top-left-radius: 10px; border-top-right-radius: 10px; } .tab-container .tab-menu ul li:last-child > a { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } */ .white-wrap { padding: 15px; } .flowchart-wrap .white-wrap .chart-item { padding: 15px; } #contentWrap:before { width: 150px; height: 150px; } } @media screen and (max-width: 575.98px) { .mediaGroup .mainImg { margin: 0 auto 8%; } .mediaGroup .mainImg .floatImg-1 { left: -20px; top: 55%; } } @media screen and (max-width: 479.98px) {} @media screen and (max-width: 359.98px) {}