@charset "utf-8"; /* $Date: 2014-10-08 10:41:32 +0900 (2014/10/08 (姘?) $ $Rev: 225 $ */ /* ---------- ---------- ---------- ::index:: 1. Header Layout 2. Logo 3. Language 4. Header Link 5. GlobalNav 6. Header Search Form 7. Adjust Popup Header ---------- ---------- ---------- */ /* 1. Header Layout ---------- ---------- ---------- */ div#HeaderTop:after { content: ""; display: block; clear: both; } div#HeaderTop { margin: 0 auto; position: relative; width: 970px; min-height: 76px; zoom:1; } div#HeaderBottomInner:after { content: ""; display: block; clear: both; } div#HeaderBottomInner { margin: 0 auto; position: relative; width: 970px; } /* 2. Logo ---------- ---------- ---------- */ div#Logo , h1#Logo { float: left; font-size: 100%; } div#Logo a , h1#Logo a { padding-top: 28px; display: block; min-height: 24px; } /* 3. RegionAndLanguases ---------- ---------- ---------- */ div#RegionAndLanguages { margin: 28px 0 0 25px; float: left; } /* Region ---------- ---------- */ div#RegionAndLanguages div#Region { line-height: 1.1; color: #666; font-size: 1.16em; /* 14/12 */ font-weight: bold; } div#RegionAndLanguages div#Region a { padding: 0 15px 0 0; display: inline-block; color: #666; background: url("../../img/common/mkr_arw_gray_r.png") 100% 50% no-repeat; text-decoration: none; } div#RegionAndLanguages div#Region a:hover , div#RegionAndLanguages div#Region a:focus { text-decoration: underline; } /* LanguageList ---------- ---------- */ div#RegionAndLanguages ul#LanguageList { margin: 4px 0 0; list-style: none; overflow: hidden; } div#RegionAndLanguages ul#LanguageList li { margin: 0 8px 0 -8px; padding: 0 7px; border-left: solid 1px #ccc; float: left; line-height: 1.2; font-size: 0.83em; } div#RegionAndLanguages ul#LanguageList li a { color: #777; } div#RegionAndLanguages ul#LanguageList li a:hover , div#RegionAndLanguages ul#LanguageList li a:focus { text-decoration: underline; } div#RegionAndLanguages ul#LanguageList li.Current { font-weight: bold; } div#RegionAndLanguages ul#LanguageList li.Current a { color: #555; } /* 4. Header Link ---------- ---------- ---------- */ div#HeaderLinks:after { content: ""; display: block; clear: both; } div#HeaderLinks { margin: 15px 0 0; float: right; zoom:1; } div#HeaderLinks ul:after { content: ""; display: block; clear: both; } div#HeaderLinks ul { float: right; clear: both; } div#HeaderLinks ul li { margin: 0 0 0 8px; padding: 0 0 0 8px; border-left: solid 1px #ccc; list-style: none; float: left; line-height: 1.1; } div#HeaderLinks ul li:first-child { margin-left: 0; padding-left: 0; border-left: none; } div#HeaderLinks ul li.Home { display: none; } div#HeaderLinks ul li a { color: #333; text-decoration: none; } div#HeaderLinks ul li a:hover , div#HeaderLinks ul li a:focus { text-decoration: underline; } div#HeaderLinks ul li.Home a , div#HeaderLinks ul li.Person a , div#HeaderLinks ul li.Mail a { padding-left: 21px; background-position: 0 50%; background-repeat: no-repeat; } div#HeaderLinks ul li.Home a { background-image: url("../../img/common/icon_home.png"); } div#HeaderLinks ul li.Person a { padding-left: 17px; background-image: url("../../img/common/icon_person.png"); } div#HeaderLinks ul li.Mail a { background-image: url("../../img/common/icon_mail.png"); } div#HeaderLinks ul li.Career a { display: inline-block; position: relative; padding: 0 0 0 21px; font-size: 117%; } div#HeaderLinks ul li.Career a::before { content: ""; display: block; position: absolute; top: -2px; left: 0; width: 17px; height: 19px; background: url("../../img/core/icon_career_01.svg") no-repeat 0 0; } div#HeaderLinks ul li.Tel a { font-weight: bold; cursor:default; } div#HeaderLinks ul li.Tel a:hover , div#HeaderLinks ul li.Tel a:focus { text-decoration: none; } div#HeaderLinks ul li.Tel a img { vertical-align: middle; } div#HeaderLinks ul#HeaderLink2 { margin-top: 15px; } /* 5. Global Nav --------- --------- --------- */ ul#GlobalNav { padding: 0 0 0 2px; float: left; line-height: 1; } ul#GlobalNav li { float: left; list-style: none; } ul#GlobalNav li a { position: relative; display: block; color: #333; font-weight: bold; text-decoration: none; } ul#GlobalNav li a span { position: relative; margin: 0 -5px 0 0; display: inline-block; *display: block; padding: 14px 16px 14px 24px; cursor: pointer; zoom: 1; } ul#GlobalNav li a span::before { content: ""; display: block; position: absolute; top: 50%; left: 7px; transform: rotate(135deg); width: 4px; height: 4px; margin-top: -4px; border-top: solid 2px #dc002f; border-right: solid 2px #dc002f; } ul#GlobalNav li.ContactUs a span { background: none; padding-right: 15px; padding-left: 15px; margin-right: 0; } ul#GlobalNav li.ContactUs a span::before { content: none; } /* Category HighLight */ body#AboutUs ul#GlobalNav li.AboutUs a , body#Products ul#GlobalNav li.Products a , body#Solutions ul#GlobalNav li.Solutions a , body#Downloads ul#GlobalNav li.Downloads a , body#Support ul#GlobalNav li.Support a { color: #dc002f; } body#AboutUs ul#GlobalNav li.AboutUs a::before , body#Products ul#GlobalNav li.Products a::before , body#Solutions ul#GlobalNav li.Solutions a::before , body#Downloads ul#GlobalNav li.Downloads a::before , body#Support ul#GlobalNav li.Support a::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #dc002f; } /* hover */ ul#GlobalNav li a:hover , ul#GlobalNav li a:focus , ul#GlobalNav li a.Hover { color: #dc002f; } ul#GlobalNav li a:hover::before , ul#GlobalNav li a:focus::before , ul#GlobalNav li a.Hover::before { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #dc002f; } ul#GlobalNav li.ContactUs a:hover span , ul#GlobalNav li.ContactUs a:focus span , ul#GlobalNav li.ContactUs a.Hover span { background: none; } /* 6. Search form --------- --------- --------- */ /* layout */ form#HeaderSearch { margin: 6px 0; padding: 0 0 0 4px; float: right; width: 276px; background: url("../../img/common/bg_header_search_l.png") 0 0 no-repeat; } form#HeaderSearch div#HeaderSearchInner:after { content: ""; display: block; clear: both; } form#HeaderSearch div#HeaderSearchInner { background: url("../../img/common/bg_header_search_r.png") 100% 0 no-repeat; zoom: 1; } form#HeaderSearch div.SelectCol { margin: 0 5px 0 0; padding: 0 3px 0 0; float: left; background: url("../../img/common/sep_header_search_y.png") 100% 0 no-repeat; } form#HeaderSearch div.InputCol { padding: 2px 28px 0 0; overflow: hidden; position: relative; } /* input */ form#HeaderSearch div.InputCol input.SearchInput { margin: 0 ; padding: 0; border: none; display: block; width: 100%; min-height: 22px; line-height: 22px; vertical-align: middle; background-color: #fff; } form#HeaderSearch div.InputCol input.SearchButton { position: absolute; top: 1px; right: 0; } /* UIElements Style (select) ---------- ---------- */ /* Current */ form#HeaderSearch div.SelectCol .UIElm-select-box { display: block; z-index: 0; } form#HeaderSearch div.SelectCol a.UIElm-select { padding: 0 5px 0 0; display: block; z-index: 30; background: url("../../img/common/bg_header_search_select.png") 0 0 repeat-x; text-decoration: none; } form#HeaderSearch div.SelectCol a.UIElm-select span { padding: 0 15px 0 5px; display: block; line-height: 26px; vertical-align: middle; color: #000; background: url("../../img/common/mkr_triangle2_gray_btm.png") 100% 50% no-repeat; white-space: nowrap; } /* Dropdonw */ form#HeaderSearch div.SelectCol ul.UIElm-select-option { padding: 0 6px 0 0; position: absolute; z-index: 100; left: 0; width: 150px; list-style: none; background: url("../../img/common/bg_header_search_dropdown_r.png") 100% 100% no-repeat; zoom:1; } form#HeaderSearch div.SelectCol ul.UIElm-select-option li { margin: -7px 0 0; /* -7px = "padding-bottom(6px)" and "border-bottom(1px)" */ padding: 0 0 6px 0; position: relative; z-index: 100; background: url("../../img/common/bg_header_search_dropdown_btm.png") 0 100% no-repeat; zoom:1; } form#HeaderSearch div.SelectCol ul.UIElm-select-option li:first-child { margin-top: 0; } form#HeaderSearch div.SelectCol ul.UIElm-select-option li a { margin: 0; padding: 4px 10px; border-right: solid 1px #999; border-bottom: solid 1px #999; border-left: solid 1px #999; display: block; vertical-align: middle; color: #333; background-color: #fff; } form#HeaderSearch div.SelectCol ul.UIElm-select-option li:first-child a { border-top: solid 1px #999; } form#HeaderSearch div.SelectCol ul.UIElm-select-option li a:hover , form#HeaderSearch div.SelectCol ul.UIElm-select-option li a:focus { background-color: #eaebec; text-decoration: none; } #HeaderArea #HeaderSearch #HeaderSearchInner { border: 1px solid #ccc; border-radius: 14px !important; } #HeaderArea #HeaderSearch .InputCol { padding: 0 35px 0 10px; border-radius: 14px; } #HeaderArea #HeaderSearch .SearchInput { min-width: 190px !important; border-radius: 14px !important; } #HeaderArea #HeaderSearch .InputCol .SearchButton { top: 0; right: 5px !important; } /* 7. Adjust Popup Header Layout --------- --------- --------- */ body.Popup div#HeaderTop { margin-right: 0; margin-left: 0; width: auto; } body.Popup div#Logo span { padding-top: 28px; display: block; height: 24px; } /* phone_mail button --------- --------- --------- */ div#SpHeaderButton{ height:100px; } div#SpHeaderButton .SpHeaderButtonWrap{ z-index:500; left:0; top:0; position: fixed; background:#FFF; width:0; overflow:hidden; font-size:45px; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%; } div#SpHeaderButton .SpHbtn{ background:#FFF; padding:20px; width: 100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -box-sizing:border-box; display: -webkit-box; display: -moz-box; display: box; } div#SpHeaderButton .SpHbtn li{ -webkit-text-size-adjust: 100%; list-style:none; word-break:break-all; word-wrap:break-word; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; background-color: #ff4a00; background: -webkit-gradient(linear, left top, left bottom, from(#ff8300), to(#ff4a00)); background: -moz-linear-gradient(top, #ff8300, #ff4a00); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ff8300, endcolorstr=#ff4a00)); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#FFF; text-decoration:none; display:block; color:#FFF; } div#SpHeaderButton .SpHbtn li.BtnTel { margin-right:20px; } div#SpHeaderButton .SpHbtn li a{ display:block; -webkit-background-size:auto 45px; -moz-background-size:auto 45px; background-size:auto 45px; padding:20px; text-decoration:none; height:45px; color:#FFF; line-height:1; } div#SpHeaderButton .SpHbtn li.BtnMail a{ background: url("../../img/common/icon_sp_mail.png") 20px center no-repeat; padding-left:100px; } div#SpHeaderButton .SpHbtn li.BtnTel a{ background: url("../../img/common/icon_sp_phone.png") 20px center no-repeat; padding-left:70px; } div#SpHeaderButton .SpHbtn.Str01 li{ width:50%; } div#SpHeaderButton .SpHbtn.Str01 li.BtnMail a{ font-size:32px; } div#SpHeaderButton .SpHbtn.Str01 li.BtnMail a .Inner{ display:inline-block; padding-top:6px; } div#SpHeaderButton.SpHeaderButton .SpHeaderButtonWrap{ font-size: 38px; background: none; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList{ display: flex; padding: 0; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li{ margin-right: 0; border-radius: 0; width: 100%; background: none; list-style: none; -webkit-text-size-adjust: 100%; text-decoration: none; display: flex; color: #fff; text-align: center; box-sizing: border-box; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnSearch{ min-width: 40px; width: 100%; } div#SpHeaderButton.SpHeaderButton.MultiplePhoneNum .SpHeaderBtnList li.BtnSearch{ width: calc(40vw * 100 / 360); } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li a{ display: flex; align-items: center; justify-content: center; padding: 20px 4px; text-decoration: none; color: #FFF; line-height: 1; width: 100%; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnTel a{ background: #129e83; display: flex; white-space: nowrap; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnTel a::before{ background: url("../../img/core/icon_tel_01.svg") no-repeat; background-size: 100% auto; content: ""; display: block; margin-right: 4px; width: 45px; height: 45px; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnTel a:first-child{ border-right: 2px solid #ccc; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnTel a img{ display: none; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnSearch a{ background: #e9e9e9; color: #333; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnSearch a img{ width: 45px; margin-right: 10px; } div#SpHeaderButton.SpHeaderButton.MultiplePhoneNum .SpHeaderBtnList li.BtnSearch a img{ margin-right: 0; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li.BtnSearch .Inner{ display: flex; align-items: center; } div#SpHeaderButton.SpHeaderButton.MultiplePhoneNum .BtnSearchTxt{ display: none; } div#SpHeaderButton.SpHeaderButton .SpHeaderBtnList li .TelSlsh{ display: none; } /* GSR Header --------- --------- --------- */ .layout-header.of-primary { min-width: 1280px; line-height: 1.5; background: #fff; border-bottom: 1px solid #d0d0d0; margin-bottom: 15px; } .layout-header.of-primary .layout-header-content { box-sizing: border-box; max-width: 1320px; margin: 0 auto; padding: 20px; } .layout-header.of-primary .layout-header-logo { position: relative; font-size: 1rem; line-height: 1; transition: padding .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-primary .layout-header-logo > a { display: inline-block; } .layout-header.of-primary .layout-header-logo > a img { width: 184px; height: 32px; } .layout-header.of-primary .layout-header-content.of-primary { display: flex; align-items: center; justify-content: space-between; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneButton { display: none; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneGroup > *:last-child { margin-bottom: 0; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneNumber { position: relative; display: flex; align-items: center; justify-content: center; padding-left: 24px; color: #484b4c; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneNumber::after { position: absolute; display: block; content: ""; top: 50%; left: 0; width: 16px; height: 16px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.21778 6.92444C4.49778 9.44 6.56 11.4933 9.07556 12.7822L11.0311 10.8267C11.2711 10.5867 11.6267 10.5067 11.9378 10.6133C12.9333 10.9422 14.0089 11.12 15.1111 11.12C15.6 11.12 16 11.52 16 12.0089V15.1111C16 15.6 15.6 16 15.1111 16C6.76444 16 0 9.23556 0 0.888889C0 0.4 0.4 0 0.888889 0H4C4.48889 0 4.88889 0.4 4.88889 0.888889C4.88889 2 5.06667 3.06667 5.39556 4.06222C5.49333 4.37333 5.42222 4.72 5.17333 4.96889L3.21778 6.92444Z' fill='%2313778f'/%3E%3C/svg%3E"); transform: translateY(-50%); } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneNumber [href^="tel:"] { position: relative; display: inline-flex; align-items: center; font-size: 18px; font-weight: 400; color: #484b4c; text-decoration: none; cursor: default; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneNumber [href^="tel:"] em { font-weight: 400; } .layout-header.of-primary .layout-header-content.of-primary .layout-header-phoneNumber .TelSlsh { margin: 0 4px; font-size: 22px; font-weight: 400; } .layout-header.of-full { position: relative; z-index: 1002; min-width: 1280px; margin-bottom: 15px; color: #2e3133; line-height: 1.5; overflow-wrap: anywhere; word-wrap: break-word; word-break: break-word; background: #fff; border-bottom: 1px solid #d0d0d0; border-bottom: 0; } .layout-header.of-full[data-hamburger-menu="true"] .layout-header-content { position: relative; } .layout-header.of-full.is-fixed { border-bottom: 0; } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed.is-show .layout-header-content { transition: transform .3s cubic-bezier(.4, 0, .2, 1); transform: translateY(0); } } .layout-header.of-full.is-fixed .layout-header-content { min-width: 1280px; } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-content { position: fixed; top: 0; right: 0; left: 0; z-index: 1000; background-color: #fff; filter: drop-shadow(0px 10px 20px rgba(46, 49, 51, .1)); transform: translateY(-200%); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); } .gtie9 .layout-header.of-full.is-fixed .layout-header-content { box-shadow: 0 10px 20px rgba(46, 49, 51, .1); } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-body { min-height: 70px; padding-top: 23px; padding-bottom: 24px; } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-logo { margin-top: 0; } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-logo > a img { width: 140px; height: 24px; } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-utilityList { display: none; } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-utilityList + .navigationGlobal-outer { margin-top: 0; } } @media screen and (min-height: 771px) { .gtie9 .layout-header.of-full.is-fixed .layout-header-search { box-shadow: 0 10px 20px rgba(46, 49, 51, .1); } } @media screen and (min-height: 771px) { .layout-header.of-full.is-fixed .layout-header-searchButton { cursor: pointer; pointer-events: inherit; } } .layout-header.of-full * { box-sizing: border-box; } .layout-header.of-full *::before, .layout-header.of-full *::after { box-sizing: border-box; } .layout-header.of-full img { max-width: 100%; } .layout-header.of-full .smallScreen-show { display: none; } .layout-header.of-full .layout-header-content { z-index: 1000; margin: 0 auto; padding: 0; background: #fff; } .layout-header.of-full .layout-header-logo { position: relative; margin-top: 8px; font-size: 10px; line-height: 1; transition: padding .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full .layout-header-logo > a { display: inline-block; } .layout-header.of-full .layout-header-logo > a img { width: 184px; height: 32px; } .layout-header.of-full .layout-header-overlay { position: fixed; top: 0; z-index: -1; visibility: hidden; width: 100%; height: calc(100vh + 1000px); background-color: #2e3133; opacity: 0; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .layout-header-overlay[data-owner="suggest"] { transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .05s, opacity .2s cubic-bezier(.4, 0, .2, 1) .05s; } .is-megaMenu-show .layout-header.of-full .layout-header-overlay, .is-suggest-show .layout-header.of-full .layout-header-overlay { z-index: -1; visibility: visible; opacity: .8; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .layout-header-body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; max-width: 1320px; min-height: 120px; margin: 0 auto; padding: 16px 20px 24px; background: #fff; } .layout-header.of-full .layout-header-menuButton { position: absolute; top: 0; left: 0; display: none; width: 61px; height: 50px; padding: 17px 20px; line-height: 1; } .layout-header.of-full .layout-header-menuButton::before, .layout-header.of-full .layout-header-menuButton::after { position: absolute; display: block; width: 18px; height: 2px; background-color: #303233; content: ""; opacity: 1; transition: all .2s cubic-bezier(.4, 0, .2, 1); transform: rotate(0); } .layout-header.of-full .layout-header-menuButton::before { top: 17px; } .layout-header.of-full .layout-header-menuButton::after { top: 31px; } .layout-header.of-full .layout-header-menuButtonBody { position: absolute; top: 24px; display: block; overflow: hidden; width: 18px; height: 2px; background-color: #303233; transition: opacity .2s cubic-bezier(.4, 0, .2, 1); transform: scale(1); } .layout-header.of-full .layout-header-menuButtonText { position: absolute; left: 100%; white-space: nowrap; } .layout-header.of-full .layout-header-menuButton[aria-expanded="true"]::before { opacity: .2; } .layout-header.of-full .layout-header-menuButton[aria-expanded="true"]::after { opacity: .2; } .layout-header.of-full .layout-header-menuButton[aria-expanded="true"] .layout-header-menuButtonBody { opacity: .2; } .layout-header.of-full .layout-header-searchButton { display: none; width: 18px; height: 18px; margin-top: 3px; margin-left: 44px; padding: 0; background: none; border: 0; pointer-events: inherit; } .js .layout-header.of-full .layout-header-searchButton { display: block; } .layout-header.of-full .layout-header-searchButton:disabled { cursor: default; } @media screen and (max-height: 770px) { .layout-header.of-full .layout-header-searchButton { display: none !important; cursor: default; } } .layout-header.of-full .layout-header-searchButtonBody { position: relative; display: block; overflow: hidden; width: 18px; height: 18px; background: url(../../img/core/icon_search_03.svg); background-size: 100%; opacity: .2; transition: opacity .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.is-fixed .layout-header-searchButtonBody { opacity: 1; } @media screen and (max-height: 770px) { .layout-header.is-fixed .layout-header-searchButtonBody { opacity: .2; } } .layout-header.of-full .layout-header-searchButtonText { position: absolute; left: 100%; display: block; white-space: nowrap; } .layout-header.of-full .layout-header-searchButton[aria-expanded="true"] .layout-header-searchButtonBody { opacity: .2; } .layout-header.of-full .layout-header-phoneButton { display: none; } .layout-header.of-full .layout-header-search { position: relative; padding: 12px 20px 11px; background-color: #eeeded; transition: visibility .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1); } .is-menu-initializing .layout-header.of-full .layout-header-search { transition: none !important; } .layout-header.of-full .layout-header-search.is-intersection { transition: none !important; } @media screen and (min-height: 771px) { .layout-header.is-fixed .layout-header-search { position: absolute; visibility: hidden; width: 100%; opacity: 0; } .is-suggest-show .layout-header.is-fixed .layout-header-search { visibility: visible; opacity: 1; } .layout-header.is-fixed .layout-header-search.is-show { visibility: visible; opacity: 1; } .layout-header.is-fixed .layout-header-search.is-hide { visibility: hidden; opacity: 0; } } .layout-header.of-full .layout-header-searchBody { max-width: 1280px; margin: 0 auto; } .layout-header.of-full .layout-header-product { display: none; padding: 24px 20px; background-color: #fff; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s; } .is-suggest-show .layout-header.of-full .layout-header-product { visibility: hidden; opacity: 0; } .layout-header.of-full .layout-header-search:not(.is-show) .layout-header-product { visibility: hidden; opacity: 0; } .layout-header.of-full .layout-header-productLabel { display: none; margin-bottom: 20px; font-weight: bold; font-size: 16px; } .layout-header.of-full .layout-header-productList { display: none; font-size: 14px; line-height: 1.25; list-style: none; } .layout-header.of-full .layout-header-productList > li { font-weight: bold; border-bottom: 1px solid #ddd; } .layout-header.of-full .layout-header-productList > li:first-child { border-top: 1px solid #ddd; } .layout-header.of-full .layout-header-productList a { position: relative; display: block; padding: 20px 48px 20px 16px; color: inherit; text-decoration: none; } .layout-header.of-full .layout-header-productList a > svg { position: absolute; top: 50%; right: 11px; width: 30px; height: 30px; transform: translateY(-50%); fill: #dc002f; } .layout-header.of-full .layout-header-menu { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; } .is-menu-initializing .layout-header.of-full .layout-header-menu { transition: none !important; } .layout-header.of-full .layout-header-phone { display: none } .layout-header.of-full .layout-header-utilityList { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; width: 100%; padding-left: 24px; font-size: 12px; color: #484b4c; list-style: none; } .layout-header.of-full .layout-header-utilityList + .layout-header-languageList { margin-top: -1px; } .layout-header.of-full .layout-header-utilityList + .navigationGlobal-outer { margin-top: 28px; } .layout-header.of-full .layout-header-utilityList > li { position: relative; margin-right: 16px; padding-right: 16px; } .layout-header.of-full .layout-header-utilityList > li:first-child { margin-top: 0; } .layout-header.of-full .layout-header-utilityList > li:last-child { margin-right: 0; padding-right: 0; } .layout-header.of-full .layout-header-utilityList > li:last-child::before { display: none; } .layout-header.of-full .layout-header-utilityList > li::before { position: absolute; top: 3px; right: 0; display: block; width: 1px; height: 12px; background: #ddd; content: ""; } .layout-header.of-full .layout-header-utilityList > li > a { color: inherit; text-decoration: none; } .layout-header.of-full .layout-header-utilityList > li > a:hover, .layout-header.of-full .layout-header-utilityList > li > a:active, .layout-header.of-full .layout-header-utilityList > li > a:focus { text-decoration: underline; } .layout-header.of-full .layout-header-utilityList > li.of-telephone > a, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a { color: #dc002f; text-decoration: none !important; cursor: inherit; } .layout-header.of-full .layout-header-utilityList > li.of-telephone > a em, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a em { font-weight: normal; } .layout-header.of-full .layout-header-utilityList > li.of-telephone > a > span, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a > span { font-weight: normal; color: #2e3133; } .layout-header.of-full .layout-header-utilityList > li.of-telephone > a img, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a img { vertical-align: bottom; } .layout-header.of-full .layout-header-utilityList > li.of-telephone .TelSlsh, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary .TelSlsh { margin-right: 3px; margin-left: 3px; } .layout-header.of-full .layout-header-utilityList > li.of-career > a { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; } .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary { padding-left: 24px; } .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a:first-child::after { position: absolute; top: 6px; left: 0; display: block; width: 20px; height: 20px; overflow: hidden; content: ""; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.21778 6.92444C4.49778 9.44 6.56 11.4933 9.07556 12.7822L11.0311 10.8267C11.2711 10.5867 11.6267 10.5067 11.9378 10.6133C12.9333 10.9422 14.0089 11.12 15.1111 11.12C15.6 11.12 16 11.52 16 12.0089V15.1111C16 15.6 15.6 16 15.1111 16C6.76444 16 0 9.23556 0 0.888889C0 0.4 0.4 0 0.888889 0H4C4.48889 0 4.88889 0.4 4.88889 0.888889C4.88889 2 5.06667 3.06667 5.39556 4.06222C5.49333 4.37333 5.42222 4.72 5.17333 4.96889L3.21778 6.92444Z' fill='%2313778f'/%3E%3C/svg%3E"); background-size: 100%; opacity: 1 } .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a, .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary > a em { font-size: 18px; font-weight: 700; color: #2e3133 } .layout-header.of-full .layout-header-utilityList > li.of-telephone-primary .TelSlsh { margin-right: 4px; margin-left: 4px; font-size: 18px; font-weight: 700 } .layout-header.of-full .layout-header-utilityList > li.of-regionSelector > a { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; white-space: nowrap; } .layout-header.of-full .layout-header-utilityList.of-alignItems-center { align-items: center; } .layout-header.of-full .layout-header-language { font-weight: normal; white-space: nowrap; } .layout-header.of-full .layout-header-languageList { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; width: 100%; margin-bottom: 9px; padding-left: 210px; font-weight: normal; font-size: 12px; line-height: 1.1; } .layout-header.of-full .layout-header-languageList:last-child { margin-bottom: 0; } .layout-header.of-full .layout-header-languageList + .navigationGlobal-outer { margin-top: 0; } .layout-header.of-full .layout-header-languageList + .navigationGlobal-outer + .layout-header-search { margin-top: 0; } .layout-header.of-full .layout-header-languageList > li { position: relative; } .layout-header.of-full .layout-header-careerIcon { display: inline-block; width: 14px; height: 14px; margin-top: 1px; margin-right: 5px; vertical-align: middle; fill: #545859; } .layout-header.of-full .layout-header-globalIcon { display: inline-block; width: 11px; height: 11px; margin-top: 3px; margin-right: 7px; vertical-align: middle; fill: #545859; } .layout-header.of-full .layout-header-currentRegion { display: -ms-inline-flexbox; display: inline-flex; white-space: nowrap; } .layout-header.of-full .layout-header-currentRegion::after { display: block; margin-left: 3px; content: "\3a"; } .layout-header.of-full .layout-header-currentLanguage { display: block; padding: 3px 6px; background: #fff; border: 1px solid transparent; } .layout-header.of-full .layout-header-currentLanguage[tabindex] { cursor: pointer; } .layout-header.of-full .layout-header-currentLanguage[aria-expanded] { position: relative; min-width: 108px; padding-right: 12px; border-color: #ccc; } .layout-header.of-full .layout-header-currentLanguage[aria-expanded]::before { position: absolute; top: 50%; right: 6px; display: block; border-width: 4px 2.5px; border-style: solid; border-color: #666 transparent transparent transparent; content: ""; transform: translateY(-50%); } .layout-header.of-full .layout-header-selectedList { margin-top: -1px; padding: 5px 0; color: #707070; border: 1px solid #ccc; } .js .layout-header.of-full .layout-header-selectedList { position: absolute; z-index: 1; display: none; width: 100%; background: #fff; } .js .layout-header.of-full .layout-header-selectedList.is-show { display: block; } .layout-header.of-full .layout-header-selectedList > li { margin-bottom: 4px; } .layout-header.of-full .layout-header-selectedList > li.is-current { font-weight: bold; } .layout-header.of-full .layout-header-selectedList > li.is-current > span { padding-left: 20px; } .layout-header.of-full .layout-header-selectedList > li:last-child { margin-bottom: 0; } .layout-header.of-full .layout-header-selectedList > li > a { position: relative; display: block; padding: 2px 8px 2px 20px; color: inherit; } .layout-header.of-full .layout-header-selectedList > li > a::before { position: absolute; top: .4em; left: 8px; display: block; border-width: 2.5px 4px; border-style: solid; border-color: transparent transparent transparent #666; content: ""; } .layout-header.of-full .navigationGlobal-outer { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; width: 100%; } .layout-header.of-full .navigationGlobal { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-align: center; align-items: center; margin-left: -24px; list-style: none; } .layout-header.of-full .navigationGlobal > li { padding-left: 40px; } .layout-header.of-full .navigationGlobal > li > a { position: relative; display: block; font-weight: bold; font-size: 16px; color: inherit; text-decoration: none; transition: color .1s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .navigationGlobal > li > a:hover, .layout-header.of-full .navigationGlobal > li > a:focus { color: #dc002f; } .smartphone .layout-header.of-full .navigationGlobal > li > a:hover, .smartphone .layout-header.of-full .navigationGlobal > li > a:focus { color: inherit; } .layout-header.of-full .navigationGlobal > li > a.navigationGlobal-trigger { padding-right: 16px; } .js .layout-header.of-full .navigationGlobal > li > a.navigationGlobal-trigger::before { position: absolute; top: 50%; right: 2px; display: block; width: 6px; height: 6px; margin-top: -6px; border-top: 2px solid #dc002f; border-right: 2px solid #dc002f; content: ""; transition: all .2s cubic-bezier(.4, 0, .2, 1) .2s; transform: rotate(135deg) translateY(-50%); } .layout-header.of-full .navigationGlobal > li > a.navigationGlobal-trigger.is-active, .layout-header.of-full .navigationGlobal > li > a.navigationGlobal-trigger.is-current { color: #dc002f; } .js .layout-header.of-full .navigationGlobal > li > a.navigationGlobal-trigger.is-active::before { right: -2px; margin-top: 0; transform: rotate(-45deg) translateY(-50%); } .layout-header.of-full .navigationGlobal > li > a::after { position: absolute; top: 100%; left: 0; display: block; width: 100%; height: 100%; background: transparent; content: ""; transition: background .1s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .layout-megaMenuGrid { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -20px 0 0 -40px; } .layout-header.of-full .layout-megaMenuGrid .layout-megaMenuGrid { margin-left: -20px; padding-right: 0; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-1 { width: 16.6666666%; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-2 { width: 33.3333333%; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-3 { width: 50%; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-4 { width: 66.6666666%; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-5 { width: 83.3333333%; } .layout-header.of-full .layout-megaMenuGrid.of-column-6 > .layout-megaMenuGrid-column.of-column-6 { width: 100%; } .layout-header.of-full .layout-megaMenuGrid.of-column-5 > .layout-megaMenuGrid-column.of-column-1 { width: 20%; } .layout-header.of-full .layout-megaMenuGrid.of-column-5 > .layout-megaMenuGrid-column.of-column-2 { width: 40%; } .layout-header.of-full .layout-megaMenuGrid.of-column-5 > .layout-megaMenuGrid-column.of-column-3 { width: 60%; } .layout-header.of-full .layout-megaMenuGrid.of-column-5 > .layout-megaMenuGrid-column.of-column-4 { width: 80%; } .layout-header.of-full .layout-megaMenuGrid.of-column-5 > .layout-megaMenuGrid-column.of-column-5 { width: 100%; } .layout-header.of-full .layout-megaMenuGrid.of-column-4 > .layout-megaMenuGrid-column.of-column-1 { width: 25%; } .layout-header.of-full .layout-megaMenuGrid.of-column-4 > .layout-megaMenuGrid-column.of-column-2 { width: 50%; } .layout-header.of-full .layout-megaMenuGrid.of-column-4 > .layout-megaMenuGrid-column.of-column-3 { width: 75%; } .layout-header.of-full .layout-megaMenuGrid.of-column-4 > .layout-megaMenuGrid-column.of-column-4 { width: 100%; } .layout-header.of-full .layout-megaMenuGrid.of-column-3 > .layout-megaMenuGrid-column.of-column-1 { width: 33.3333333%; } .layout-header.of-full .layout-megaMenuGrid.of-column-3 > .layout-megaMenuGrid-column.of-column-2 { width: 66.6666666%; } .layout-header.of-full .layout-megaMenuGrid.of-column-3 > .layout-megaMenuGrid-column.of-column-3 { width: 100%; } .layout-header.of-full .layout-megaMenuGrid.of-column-2 > .layout-megaMenuGrid-column.of-column-1 { width: 50%; } .layout-header.of-full .layout-megaMenuGrid.of-column-2 > .layout-megaMenuGrid-column.of-column-2 { width: 100%; } .layout-header.of-full .layout-megaMenuGrid-column { width: 100%; margin-top: 20px; padding-left: 40px; } .layout-header.of-full .layout-megaMenuGrid-column > *:last-child { margin-bottom: 0; } .layout-header.of-full .navigationMegaMenu { position: absolute; left: 0; z-index: 1000; display: block; visibility: hidden; overflow: hidden; width: 100%; height: 0; margin-top: 24px; background: #f7f7f7; opacity: 0; } .layout-header.of-full .navigationMegaMenu.is-show { visibility: visible; opacity: 1; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s, height .2s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .navigationMegaMenu.is-hide { visibility: hidden; height: 0; opacity: 0; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s, height .2s cubic-bezier(.4, 0, .2, 1) .2s; } .layout-header.of-full .navigationMegaMenu-body { max-width: 1320px; margin: 0 auto; padding: 43px 20px 70px; } .layout-header.of-full .navigationMegaMenu-list, .layout-header.of-full .navigationMegaMenu-childList, .layout-header.of-full .navigationMegaMenu-subList { list-style: none; } .layout-header.of-full .navigationMegaMenu-list > li:last-child, .layout-header.of-full .navigationMegaMenu-childList > li:last-child, .layout-header.of-full .navigationMegaMenu-subList > li:last-child { margin-bottom: 0; } .layout-header.of-full .navigationMegaMenu-list > li > a, .layout-header.of-full .navigationMegaMenu-list > li > button, .layout-header.of-full .navigationMegaMenu-childList > li > a, .layout-header.of-full .navigationMegaMenu-childList > li > button, .layout-header.of-full .navigationMegaMenu-subList > li > a, .layout-header.of-full .navigationMegaMenu-subList > li > button { position: relative; display: inline-block; max-width: 100%; text-decoration: none; } .layout-header.of-full .navigationMegaMenu-list > li > a:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > a:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > a:focus .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > button:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > button:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > button:focus .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > a:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > a:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > a:focus .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > button:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > button:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > button:focus .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > a:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > a:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > a:focus .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > button:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > button:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > button:focus .navigationMegaMenu-linkText { text-decoration: underline; } .layout-header.of-full .navigationMegaMenu-list > li > a::after, .layout-header.of-full .navigationMegaMenu-list > li > button::after, .layout-header.of-full .navigationMegaMenu-childList > li > a::after, .layout-header.of-full .navigationMegaMenu-childList > li > button::after, .layout-header.of-full .navigationMegaMenu-subList > li > a::after, .layout-header.of-full .navigationMegaMenu-subList > li > button::after { color: transparent; text-shadow: .5em 0 #dc002f; content: "鈥?; } .layout-header.of-full .navigationMegaMenu-list > li > a .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > button .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > a .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-childList > li > button .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > a .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-subList > li > button .navigationMegaMenu-linkText { transition: color .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full .navigationMegaMenu-list > li > button, .layout-header.of-full .navigationMegaMenu-childList > li > button, .layout-header.of-full .navigationMegaMenu-subList > li > button { background: none; border: 0; } .layout-header.of-full .navigationMegaMenu-list { margin-bottom: 24px; font-size: 14px; line-height: 1.25; } .layout-header.of-full .navigationMegaMenu-list > li { margin-bottom: 16px; font-weight: bold; } .layout-header.of-full .navigationMegaMenu-list > li > a, .layout-header.of-full .navigationMegaMenu-list > li > button { color: #2e3133; } .layout-header.of-full .navigationMegaMenu-list > li > a:hover .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > a:active .navigationMegaMenu-linkText, .layout-header.of-full .navigationMegaMenu-list > li > a:focus .navigationMegaMenu-linkText { color: #dc002f; } .layout-header.of-full .navigationMegaMenu-list > li > a:hover .navigationMegaMenu-image::before, .layout-header.of-full .navigationMegaMenu-list > li > a:active .navigationMegaMenu-image::before, .layout-header.of-full .navigationMegaMenu-list > li > a:focus .navigationMegaMenu-image::before { background: rgba(0, 0, 0, .2); } .layout-header.of-full .navigationMegaMenu-list > li > a:hover .navigationMegaMenu-image img, .layout-header.of-full .navigationMegaMenu-list > li > a:active .navigationMegaMenu-image img, .layout-header.of-full .navigationMegaMenu-list > li > a:focus .navigationMegaMenu-image img { transform: scale(1.05); } .layout-header.of-full .navigationMegaMenu-list > li > a[target="_blank"] { color: #2e3133; } .layout-header.of-full .navigationMegaMenu-list.of-modestly > li { font-size: 14px; color: #666; } .layout-header.of-full .navigationMegaMenu-childList { margin-top: 8px; font-weight: normal; font-size: 12px; line-height: 1.5; } .layout-header.of-full .navigationMegaMenu-childList > li > a[target="_blank"] { color: #2e3133; } .layout-header.of-full .navigationMegaMenu-childList > li > a, .layout-header.of-full .navigationMegaMenu-childList > li button { color: #dc002f; } .layout-header.of-full .navigationMegaMenu-subList { margin-bottom: 24px; margin-left: -40px; font-size: 14px; line-height: 1.25; } .layout-header.of-full .navigationMegaMenu-subList.of-horizontal { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .layout-header.of-full .navigationMegaMenu-subList > li { margin-top: 12px; padding-left: 40px; } .layout-header.of-full .navigationMegaMenu-subList > li.of-horizontal { display: -ms-flexbox; display: flex; } .layout-header.of-full .navigationMegaMenu-subList > li.of-horizontal > *:first-child { margin-right: 64px; } .layout-header.of-full .navigationMegaMenu-subList > li.of-horizontal > .navigationMegaMenu-subList { -ms-flex: 1; flex: 1; margin-top: -9px; font-size: 12px; } .layout-header.of-full .navigationMegaMenu-subList > li > *:last-child { margin-bottom: 0; } .layout-header.of-full .navigationMegaMenu-subList > li > a { color: #dc002f; } .layout-header.of-full .navigationMegaMenu-subList > li > a:hover b, .layout-header.of-full .navigationMegaMenu-subList > li > a:active b, .layout-header.of-full .navigationMegaMenu-subList > li > a:focus b { color: #dc002f; } .layout-header.of-full .navigationMegaMenu-subList > li > a[target="_blank"] { color: #0064c7; } .layout-header.of-full .navigationMegaMenu-subList > li > a b { font-weight: bold; color: #2e3133; } .layout-header.of-full .navigationMegaMenu-image { position: relative; overflow: hidden; margin-bottom: 12px; } .layout-header.of-full .navigationMegaMenu-image::before { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); content: ""; transition: background .4s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full .navigationMegaMenu-image img { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .4s cubic-bezier(.4, 0, .2, 1); transform: scale(1); } .layout-header.of-full .navigationMegaMenu-icon { display: inline-block; margin-top: -2px; margin-left: 3px; vertical-align: middle; } .layout-header.of-full .layout-megaMenuGrid-column:not([class*="of-column"]) > .navigationMegaMenu-subList { position: relative; padding-top: 40px; } .layout-header.of-full .layout-megaMenuGrid-column:not([class*="of-column"]) > .navigationMegaMenu-subList::before { position: absolute; top: 28px; left: 40px; display: block; width: calc(100% - 40px); height: 1px; background-color: #ddd; content: ""; } .layout-header.of-full form#HeaderSearch { float: none; width: auto; margin: 0; padding: 0; background: none; } .layout-header.of-full #HeaderSearchInner { position: static; background: none !important; } .layout-header.of-full #HeaderSearchInner > .InputCol { position: static; display: block; overflow: inherit; padding: 0 !important; border: 0; border-radius: 4px; } .layout-header.of-full #HeaderSearchInner .InputBody { position: relative; } .layout-header.of-full #HeaderSearchInner .SearchInput { padding: 8px 8px 10px 57px !important; font-size: 16px; line-height: 1.5 !important; border: 1px solid transparent; border-radius: 4px; outline: 3px solid transparent; } .theme-KIB[lang="pl"] .layout-header.of-full #HeaderSearchInner .SearchInput { min-height: inherit; padding: 8px 8px 10px 57px !important; font-size: 16px; } .layout-header.of-full #HeaderSearchInner .SearchInput:focus { border-color: #dc002f; outline-color: #ffe7e7; } .layout-header.of-full #HeaderSearchInner .SearchButton { position: absolute !important; top: 50%; left: 20px; width: 17.5px; height: 17.5px; margin-right: 20px; transform: translateY(-50%); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox { top: 100%; width: 100%; max-width: 100%; margin: 0; padding: 0; background: #f7f7f7; border-radius: 0; box-shadow: none; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s; } .is-menu-initializing .layout-header.of-full #HeaderSearchInner .SearchSuggestBox { transition: none !important; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.History .SuggestColumn { position: absolute; left: 0; width: 100%; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox:not(.History) .SearchHistory { position: absolute; left: 0; width: 100%; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden { display: block; visibility: hidden; opacity: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden .SearchSuggestBoxInner { display: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden .SearchHistory, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden .SuggestColumn { visibility: hidden; opacity: 0; transition: visibility .2s cubic-bezier(.4, 0, .2, 1) .2s, opacity .2s cubic-bezier(.4, 0, .2, 1) .2s; } .is-menu-initializing .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden .SearchHistory, .is-menu-initializing .layout-header.of-full #HeaderSearchInner .SearchSuggestBox.IsHidden .SuggestColumn { transition: none !important; } .is-megaMenu-show .layout-header.of-full #HeaderSearchInner .SearchSuggestBox { display: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox::before { display: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner { max-width: 1320px; margin: 0 auto; padding: 40px 20px 64px; color: #303233; background: none; border: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner::before { display: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .CategoryList > dt { margin-bottom: 30px; font-size: 16px; color: inherit; line-height: 1.25; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .CategoryList > dd > *:last-child { margin-bottom: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li { margin-bottom: 16px; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li:last-child { margin-bottom: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li button { display: inline-block; font-size: 14px; color: #dc002f; text-decoration: none; opacity: 1; max-width: 100%; overflow: visible; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li button::after { color: transparent; text-shadow: .5em 0 #dc002f; content: "鈥?; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li button:hover .Text, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li button:active .Text, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchSuggestBoxInner .HistoryList > li button:focus .Text { text-decoration: underline; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchHistory, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn { visibility: visible; opacity: 1; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SearchHistory.IsHidden, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn.IsHidden { display: block; visibility: hidden; opacity: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn > .Column { padding: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn > .Column:first-child { max-width: 100%; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesArea { margin-bottom: 40px; padding: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList { margin-bottom: 32px; margin-left: -40px; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li { width: calc(33.333333% - 40px); margin-left: 40px; padding: 0 0 32px 0; border: 0; border-bottom: 1px solid #ddd; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; width: 100%; font-size: 14px; color: inherit; line-height: 1.25; text-decoration: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .SeriesBody { -ms-flex: 1; flex: 1; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .SeriesBody > *:last-child { margin-bottom: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .CommonNameWrap { display: inline-block; margin-bottom: 5px; font-weight: bold; letter-spacing: -.02em; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .CommonNameWrap::after { color: transparent; text-shadow: .5em 0 #dc002f; content: "鈥?; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .CommonName { display: inline; transition: color .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .Name { margin-bottom: 8px; color: #666a6b; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series .DisconLabel { display: inline-block; margin-bottom: 8px; padding: 3px 7px 3px 6px; font-size: 11px; color: #fff; line-height: 1.25; background-color: #666a6b; border-radius: 4px; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:hover .CommonName, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:active .CommonName, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:focus .CommonName { color: #dc002f; text-decoration: underline; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:hover .Thumbnail::before, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:active .Thumbnail::before, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:focus .Thumbnail::before { background: rgba(0, 0, 0, .2); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:hover .Thumbnail img, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:active .Thumbnail img, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li > .Series:focus .Thumbnail img { transform: scale(1.05); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li .Thumbnail { position: relative; -ms-flex-order: -1; order: -1; overflow: hidden; min-height: 80px; margin-right: 26px; background-color: #f0f0f0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li .Thumbnail::before { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); content: ""; transition: background .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .SeriesList > li .Thumbnail img { -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 80px; border: 0; transition: transform .4s cubic-bezier(.4, 0, .2, 1); transform: scale(1); } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelArea { padding: 0; border: 0; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -16px 0 32px -40px; list-style: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList > li { width: 16.66666%; margin-top: 16px; padding-left: 40px; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList .Model { display: inline-block; font-size: 14px; color: #dc002f; text-decoration: none; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList .Model::after { color: transparent; text-shadow: .5em 0 #dc002f; content: "鈥?; } .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList .Model:hover .Name, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList .Model:active .Name, .layout-header.of-full #HeaderSearchInner .SearchSuggestBox .SuggestColumn .ModelList .Model:focus .Name { text-decoration: underline; } .layout-header.of-full #HeaderSearchInner .ViewMoreBtn { margin-bottom: 40px; text-align: center; } .layout-header.of-full #HeaderSearchInner .ViewMoreBtn a, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn button { position: relative; display: inline-block; min-width: 200px; padding: 8px 48px 11px 20px; font-size: 14px; color: #2e3133; text-align: left; text-decoration: none; background-color: #f5f5f5; border: 2px solid #666a6b; border-radius: 4px; transition: background .2s cubic-bezier(.4, 0, .2, 1); } .layout-header.of-full #HeaderSearchInner .ViewMoreBtn a > svg, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn button > svg { position: absolute; top: 50%; right: 15px; width: 30px; height: 30px; transform: translateY(-50%); fill: #dc002f; } .layout-header.of-full #HeaderSearchInner .ViewMoreBtn a:hover, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn a:active, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn a:focus, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn button:hover, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn button:active, .layout-header.of-full #HeaderSearchInner .ViewMoreBtn button:focus { background-color: #ededed; } .layout-header.of-telephone .layout-header-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 100%; } .layout-header.of-telephone .layout-header-utility { display: -ms-flexbox; display: flex; -ms-flex: 1; flex: 1; -ms-flex-pack: end; justify-content: flex-end; margin-left: 24px; } .layout-header.of-telephone .layout-header-utilityList { display: -ms-flexbox; display: flex; -ms-flex-pack: end; justify-content: flex-end; max-width: 100%; margin: -4px 0 0 -16px; } .layout-header.of-telephone .layout-header-utilityList > li { width: 100%; margin: 4px 0 0 16px; } .layout-header.of-telephone .layout-header-telephone { display: -ms-flexbox; display: flex; font-size: 17px; color: #dc002f; text-align: right; } .layout-header.of-telephone .layout-header-telephoneIcon { -ms-flex-negative: 0; flex-shrink: 0; width: 30px; height: 30px; margin-right: 8px; fill: #dc002f; } .layout-header.of-telephone .layout-header-telephone .AutoPhoneCall { color: #dc002f; text-decoration: none; cursor: default; }