/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Container -------------------------------- 02. Content ---------------------------------- 03. Footer ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 04. Header ----------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Main ------------------------------------- Mobile ----------------------------------- 06. Shell ------------------------------------ SmDesktop ---------------------------- 07. Sidebar ---------------------------------- 08. Wrapper ---------------------------------- Mobile ----------------------------------- III. Modules -------------------------------------- 01. Articles --------------------------------- Mobile ----------------------------------- 02. Breadcrumbs ------------------------------ 03. Button ----------------------------------- Button Block ----------------------------- Mobile ----------------------------------- 04. Features --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Form Elements ---------------------------- 06. Form ------------------------------------- 07. Intro ------------------------------------ Large Desktop ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 08. List ------------------------------------- 09. List Contacts ---------------------------- 10. List Links ------------------------------- 11. List Items ------------------------------- Mobile ----------------------------------- 12. List Distributors ------------------------ 13. Logo ------------------------------------- 14. Nav -------------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- 15. Nav Mobile ------------------------------- 16. Product ---------------------------------- 17. Search ----------------------------------- 18. Section ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 19. Section Articles ------------------------- 20. Section Features ------------------------- Mobile ----------------------------------- 21. Section Updates -------------------------- Mobile ----------------------------------- 22. Section Products ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 23. Slider ----------------------------------- 24. Socials ---------------------------------- 25. Subscribe -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 26. Table ------------------------------------ 27. Updates ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 28. Widget ----------------------------------- 29. Widget Links ----------------------------- Mobile ----------------------------------- */ .cols:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; word-wrap:break-word; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.25; color: #000; } a { color: inherit; transition: color .4s ease; text-decoration: none; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.625em; } h1, h2, h4, h5 { font-weight: 700; font-family: 'Gotham', sans-serif; } h1 { font-size: 250%; color:#103381; } h2 { font-size: 45px; } h3 { font-size: 25px; font-weight: normal; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.25em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td, form, select, option, address, pre{ color:#898989; } a:link { color:#103381; } /* Tablet Portrait */ @media (max-width: 1023px) { h1 { font-size: 40px; } h2 { font-size: 40px; } h3 { font-size: 20px; font-weight: normal; } } /* Mobile */ @media (max-width: 780px) { body { font-size: 14px; } h1 { font-size: 25px; } h2 { font-size: 30px; } h3 { font-size: 25px; font-weight: normal; } h4 { font-size: 16px; } h5 { font-size: 15px; } h6 { font-size: 14px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: "Gotham"; src: url("fonts/Gotham_900_normal_1441612388.eot"); src: url("fonts/Gotham_900_normal_1441612388.eot?#iefix") format("embedded-opentype"), url("fonts/Gotham_900_normal_1441612388.svg#Gotham") format("svg"), url("fonts/Gotham_900_normal_1441612388.woff") format("woff"), url("fonts/Gotham_900_normal_1441612388.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: 'Gotham'; src: url('fonts/gotham-bold-webfont.eot'); src: url('fonts/gotham-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-bold-webfont.woff') format('woff'), url('fonts/gotham-bold-webfont.ttf') format('truetype'), url('fonts/gotham-bold-webfont.svg#gotham_boldregular') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Gotham'; src: url('fonts/gotham-book-webfont.eot'); src: url('fonts/gotham-book-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-book-webfont.woff') format('woff'), url('fonts/gotham-book-webfont.ttf') format('truetype'), url('fonts/gotham-book-webfont.svg#gotham_bookregular') format('svg'); font-weight: normal; font-style: normal; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; } .cols:after { } .col { float: left; width: 100%; padding: 0 15px; } .col-1of2 { width: 50%; } .col-1of3 { width: 33.33333%; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 780px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 781px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1300px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1301px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; -webkit-transform: none; -ms-transform: none; transform: none; } /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {padding-bottom:35px;} /* ------------------------------------------------------------ *\ header \* ------------------------------------------------------------ */ #header-info .infoFttx a { font-size:13px; color:#ffffff; float:left; margin-right:10px; } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #0b318f; color: #fff; overflow: hidden; position: relative; font-size: 14px; } .footer:before { content: ''; position: absolute; left: 60%; top: 0; bottom: 0; width: 100%; background: #d0d0d0; } .footer .shell { margin-top:15px; margin-bottom:15px; } .footer .list-contacts { min-height: 218px; padding-left: 59px; } .footer .footer-col.grey { background: #898989; } .footer .footer-col { float: left; } .footer .footer-col-size1 { padding:30px 5%; font-weight:bold; background:#9a9a9a; float:right; position:absolute; left:61%; } .footer .footer-col-size2 { width: 41%; padding-left: 0; } .footer .btn-cta { background: url(../images/sumitomo-electric-group.png) no-repeat 0 0; width: 140px; height: 105px; position: absolute; bottom: 0; right: 0; z-index: 2; transition: opacity .4s ease; } .footer .btn-cta:hover { opacity: .8; } .footer .footer-logo { margin-bottom: 7px; display: inline-block; } .footer .copyright { line-height: 2.3; margin:10px 0 0; } .footer .socials { margin-left: 68px; } /* Tablet Portrait */ @media (max-width: 1023px) { .footer .footer-logo { margin-bottom: 27px; } .footer .copyright { padding-left: 0; } .footer .socials { margin-left: 0; } .footer .list-contacts { padding-left: 0; } .footer .footer-col-size3 { width: 42%; } } /* Mobile */ @media (max-width: 780px) { .footer:before { display: none; } .footer .shell { padding: 0; } .footer .link-login { margin-top: 0; } .footer .copyright { padding-left:0; line-height: 43px; } .footer .socials { padding-left: 14%; } .footer .footer-logo { width: 74%; margin-bottom: 7px; } .footer .list-contacts { text-align: center; padding: 5px 0; } .footer .list-contacts p { display: block; width: 100%; } .footer .footer-col:first-child { padding: 16px 15px; background: #a1a1a1; text-align: center; float: none; } .footer .footer-col { float: none; width: 100%; padding: 53px 15px 59px; } .footer .footer-col-size3 { padding-bottom: 24px; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: fixed; left: 0; top: 0; width: 100%; height: auto; z-index: 20; padding: 0 0 40px; background-color: transparent; transition: margin .4s ease, background-color .4s ease; height: 132px; } .header .btn-menu { display: none; } .header.fixed { box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.95); } .header.dropdown-visible { background: rgba(255, 255, 255, 0.95); } .header.dropdown-visible .logo img, .header.fixed .logo img { display: none; } .header.dropdown-visible .logo .active, .header.fixed .logo .active { display: inline-block; } .header .shell { width: 96%; max-width:980px; padding: 0; } .header .logo { float: left; margin-top:20px; } .header .nav { float: right; } #header-info form.search { font-size:13px; } .header .link-search { float: right; font-size: 24px; color: #191717; margin: 10px 0 0; } .header.search-visible .search { opacity: 1; visibility: visible; } .header.header-inner .shell { max-width: 1280px; } /* Small Desktop */ /* Tablet Portrait */ @media (max-width: 1023px) { .header { padding:0 0 26px; } .header .logo { width: 180px; } .header .logo img { max-width: 100%; height: auto; width:auto; } .header .link-search { margin-top: 0; line-height: 1; } .header .shell { width: 96%; padding: 0; } } /* Mobile */ @media (max-width: 780px) { .header { height:80px; padding:0 0 26px; } .header .nav { } .header .nav ul { display:none; } .nav p#navFacebook { margin-top:30px !important;float:none !important; } .nav p#navFacebook img { width:25px; } .nav p#navFacebook .erweima img { width:250px;} .nav p#navJD { margin-top:15px !important;float:none !important; } .header .link-search { display: none; } .header .btn-menu { display: inline-block; color: #06b4ea; font-size: 40px; line-height: 1; overflow: hidden; position:absolute; top:90px; right:2%; } .header .btn-menu i { line-height: 1; vertical-align: top; margin-top: -10px; display: inline-block; } .footer .footer-col:first-child { background:none; } .footer .footer-col-size1 { position:relative; left:0; background:#d0d0d0; padding:20px 0 !important; } .footer .footer-col-size1 a { display:block; width:50%; margin:0 auto; background:#9a9a9a; padding:20px 0; text-align:center; } .footer .footer-col { padding:0; } .footer .shell { margin-bottom:0; } } @media (max-width: 479px) { .footer .footer-col-size1 { padding:20px 0 50px !important; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main { position: relative; padding-top: 132px; background: #fff; } .main .main-head { position: absolute; bottom: 0; left: 0; z-index: 1; color: rgba(11, 49, 143, 0.2); white-space: nowrap; text-align: right; background: #e7e7e7; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 30px 30px; -ms-transform-origin: 30px 30px; transform-origin: 30px 30px; height: 60px; padding: 8px 0; } .main .main-title { font-size: 35px; padding-right: 212px; color:#6179b0; } .main.has-bg .main-body { background: url(/images/body-bg.png) no-repeat center bottom; background-size:cover; position: relative; } .main .content { padding-left: 72px; } /* Mobile */ @media (max-width: 780px) { .main { padding-top: 80px; } .main .main-head { display: none; } .main .content { padding-left: 0; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1300px; padding-left: 10px; padding-right: 10px; margin: auto; } .shell:after { content: ''; font-size: 0; line-height: 0; display: table; clear: both; } .shell-fluid { max-width: none; } /* Small Desktop */ @media (max-width: 1300px) { .shell { padding: 0 15px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar { position: fixed; top: 0; height: 100%; right: 0; width: 85%; background: #0b318f; z-index: 40; color: #fff; overflow-y: auto; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; padding-bottom: 10px; } .sidebar .btn-close { font-size: 32px; display: block; text-align: right; padding: 0 4%; height: 34px; } .sidebar .search { padding: 0 5%; margin: 21px 0 24px; } .sidebar .search .search-field { background-color: transparent; padding-left: 1px; font-size: 17px; } .sidebar .search .search-field::-webkit-input-placeholder { color: #fff; } .sidebar .search .search-field::-moz-placeholder { color: #fff; } .sidebar .search .search-field:-ms-input-placeholder { color: #fff; } .sidebar .search .search-field:placeholder { color: #fff; } .sidebar .search .search-field:focus { background-color: transparent; } .sidebar .search .search-btn { font-size: 24px; padding-right: 0; text-align: right; } .sidebar .nav-mobile { padding: 0 5%; } .sidebar .nav-mobile > ul { border-top: 1px solid rgba(255, 255, 255, 0.25); } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ /* Mobile */ @media (max-width: 780px) { .wrapper.nav-visible .sidebar { -webkit-transform: none; -ms-transform: none; transform: none; } .wrapper.nav-visible .header { margin-left: -85%; } .wrapper.nav-visible .container { -webkit-transform: translateX(-85%); -ms-transform: translateX(-85%); transform: translateX(-85%); } } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Articles \* ------------------------------------------------------------ */ .articles { list-style: none; position: relative; z-index: 2; } .article { padding:20px 0; } #homeNews { background:#e7e7e7; padding:20px 0; } #homeNews ul { max-width:980px; margin:0 auto; display:table; width:100%; } #homeNews ul li { width:27%; box-sizing:border-box; border-left:solid 1px #b9b9b9; color:#898989; list-style:none; font-size:75%; line-height:2em; padding:0 2%; display:table-cell; vertical-align:middle; } #homeNews ul li a { font-size:133%; } #homeNews ul li:first-child { border:none; } #homeNews ul li#seeAllBtn { width:16%; text-align:center; } #homeNews ul li#seeAllBtn a { display:inline-block; background:#25bde9; padding:5px 0; width:80px; color:#ffffff; text-align:center; font-weight:bold; } .article h2 { color: #0b318f; margin-bottom: 19px; } .article h3 { color: #8c96c0; font-size: 25px; margin-bottom: 30px; } .article p { margin-bottom: 30px; } .articles .article .article-body { display: table; margin:0 auto; max-width:1000px; } .articles .article .article-body:after { content: ''; clear: both; font-size: 0; line-height: 0; display: table; } .articles .article .article-image, .articles .article .article-content { display: table-cell; vertical-align: middle; width: 50%; } .articles .article .article-image { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); text-align:center; } .articles .article .article-image img { max-width:428px; } .articles .article .article-content { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); padding: 29px 40px 29px 0; } .articles .article:nth-child(even) { background: #e7e7e7; } .articles .article:nth-child(even) .article-image, .articles .article:nth-child(even) .article-content { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .articles .article:nth-child(even) .article-content { padding: 29px 0 29px 50px; } .articles .article:nth-child(even) .article-image img { max-width:418px; } #lynx2 .article-content { padding: 29px 0 29px 50px; } #lynx2 .article-image img { max-width:418px; } .articles .article-text .article-body { min-height: 448px; } .articles .article-text .article-content { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .article-alt { background: #e7e7e7; } .article-alt .article-body { display: table; } .article-alt .article-content, .article-alt .article-image { display: table-cell; width: 50%; vertical-align: middle; padding-right: 155px; } .article-alt .article-content { padding: 20px 0 20px 51px; } .article-alt .article-image img { width: 100%; } .article#sumiCloud { padding:40px 0 0; } .article#fiberCleavers {}/* background:url(../../images/home_bg_fiber_cleavers.gif) no-repeat left top / cover; */ .article#lynx2 { background:url(/images/home_bg_lynx2.gif) no-repeat left top / cover; padding:0 0 40px; } .article#other_acc {} .article#lynx2 .article-image, .article#lynx2 .article-content { transform:translateX(0px) } .article#lynx2 h2, .article#lynx2 p { color:#ffffff; } .gototop a:link { color:#000000; } @media (max-width: 479px) { #homeNews ul li#seeAllBtn a { width:100%; } } /* Mobile */ @media (max-width: 780px) { .article { padding: 20px 0; } .article h3 { font-size: 19px; margin-bottom: 12px; } .articles .article .article-body, .article-alt .article-content, .article-alt .article-image, .articles .article .article-image, .articles .article .article-content { display: block; -webkit-transform: none; -ms-transform: none; transform: none; width: 100%; } .articles .article .article-content { padding-right: 0; } .article-alt .article-content, .articles .article:nth-child(even) .article-content, #lynx2 .article-content { padding-left: 0; } .article-alt .article-image { padding: 0; } .articles .article-text .article-body { min-height: auto; } .article-alt .article-body { display: table; } } /* ------------------------------------------------------------ *\ Breadcrumbs \* ------------------------------------------------------------ */ .breadcrumbs { font-family: 'Gotham', sans-serif; font-weight: 900; font-size: 11px; color: #898989; border-top: 1px solid #e5e5e5; padding: 10px 45px 10px 0; } .breadcrumbs a { color: #0b318f; text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs ul { list-style: none; } .breadcrumbs li { display: inline-block; } .breadcrumbs li ~ li:before { content: '>'; display: inline-block; margin:0 5px; } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; margin:0; cursor: pointer; text-decoration: none; transition: background-color .4s ease, color .4s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn-blue { font-size: 16px; background: #06b4ea; color: #fff; padding: 24px 30px; text-transform: uppercase; color:#ffffff !important; } .btn-blue:hover { background: #0b318f; } .btn-dark-blue { font-size: 16px; background: #0b318f; color: #fff; padding: 24px 30px; text-transform: uppercase; font-weight: bold; color:#ffffff !important; } .btn-dark-blue:hover { background: #06b4ea; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } /* Mobile */ @media (max-width: 780px) { .btn-blue { padding: 18px 22px; font-size: 14px; } } .btn-yellow { font-size: 16px; background: #FFDB00; color: #000000; padding: 24px 30px; text-transform: uppercase; font-weight: bold; color:#000000 !important; } .btn-yellow:hover { background: #FFF844; } /* ------------------------------------------------------------ *\ Features \* ------------------------------------------------------------ */ img { width:100%; } .article h2 { font-size:45px; } .article h3 { font-size:25px; } .features { margin: 0 -3.13%; } .features:after { content: ''; clear: both; font-size: 0; line-height: 0; display: table; } .features h3 { font-size: 45px; font-weight: 700; font-family: 'Gotham', sans-serif; } .features .feature { float: left; width: 50%; padding: 0 3.13%; margin-bottom: 6.25%; } .features .feature-inner { display: block; position: relative; overflow: hidden; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.35); } .features .feature-content { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .features .feature-image:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: background-color .4s ease; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBiMzE4ZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA2YjRlYSIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: linear-gradient(to right, rgba(11,49,143,0.8) 0%,rgba(6,180,234,0.8) 100%); } .features .feature-image img { transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .features .feature-inner:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .features .feature-inner:hover .feature-image:after { background-color: rgba(11, 49, 143, 0.5); } /* Tablet Portrait */ @media (max-width: 1023px) { .features h3 { font-size: 35px; } } /* Mobile */ @media (max-width: 780px) { .features .feature-image img { width: 100%; height: auto; } .features .feature { float: none; width: 100%; } .features h3 { font-size: 25px; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } input { border: 0; box-shadow: none; } button { background-color: transparent; border: 0; } .field {} .textarea {} .select {} .radio {} .checkbox {} /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form {} /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .banner { background-image: url(/images/top_banner_82c_plus.jpg); background-repeat: no-repeat; background-position: center 132px; background-size: auto auto; padding-top: 0%;min-height:670px; } .intro { position: relative; } .intro .shell { padding: 0; max-width: 88%; } .intro .intro-content { position: absolute; left: 0; top: 23%; width: 100%; color: #fff; z-index: 3; } /*.intro:before { content: ''; background: url(../../images/hero-deco.png) no-repeat left top; width: 100%; height: 538px; position: absolute; z-index: 2; }*/ .intro .intro-content-inner { width: 40%; margin-left: 66px; } .intro .intro-entry { padding: 15px 0 30px; } .intro .intro-entry p { font-size:93%; line-height: 1.4em; color:#ffffff; } .intro .intro-title { line-height: 1.1; color:#ffffff; } .intro .btn { padding: 23px 29px; } .intro .intro-image { background-repeat: no-repeat; background-size: 100% auto; background-position: center 0px; background-attachment: fixed; position: relative; height: 700px; overflow: hidden; } .intro .intro-image:after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 75%; background: rgba(255, 255, 255, 0.9); background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0) 100%); } .intro .intro-image img { opacity: 0; visibility: hidden; } /* Large Desktop */ @media(max-width: 1440px){ .intro:before { background-position: -140px 0; } } /* Small Desktop */ @media (max-width: 1300px) { .intro:before { background-position: -250px 0; } .intro .shell { max-width: 1280px; width: 100%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .intro:before { left: 0; right: auto; background-position: -283px 0; height: 800px; background-size: auto 100%; } .intro .intro-content { top:15%; } .intro .intro-image { background-attachment: scroll; height: 538px; } .intro .intro-content-inner { width:46%; margin-top:20px; } .intro .intro-content-inner h1 { font-size:35px; margin-top:30px; } } /* Mobile */ @media (max-width: 800px) { .intro .shell { padding: 0 15px; } .intro:before { left: 0; right: auto; background-position: -200px 0; background-size: auto 100%; top: 0; height: 650px; } .intro .intro-image { background-attachment: scroll; height:538px; background-position: -100px 50px;} .intro .intro-content { top: 17%; } .intro .intro-content-inner { width: 70%; margin-left: 0; } .intro .intro-content-inner h1 { width:100%; font-size:35px; } .intro .btn { padding: 15px 20px; } .banner { background-image: url(/images/top_banner_82c_plus_sp.png); background-repeat: no-repeat; background-position: center 50px; background-size: 100% auto; padding-top: 170%; } .banner:after {display:none; } } @media (max-width: 600px) { .intro .intro-content-inner { width: 90%; } } @media (max-width: 500px) { .intro .intro-content { top:17%; } .intro .intro-content-inner h1 { font-size:30px; } .intro .intro-content-inner { width: 94% ; } .intro:before { background-position: -280px 0; } .intro .intro-entry { padding-bottom:10px; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Contacts \* ------------------------------------------------------------ */ .list-contacts p { display: inline-block; margin: 0; width: 160px; font-weight: normal; font-family: 'Gotham', sans-serif; vertical-align: top; } .list-contacts a { display: inline-block; } .list-contacts li ~ li { margin-top: 28px; } /* ------------------------------------------------------------ *\ List Links \* ------------------------------------------------------------ */ .list-links h4 { color: rgba(11, 49, 143, 0.5); text-transform: uppercase; font-family: 'Gotham', sans-serif; margin-bottom: 15px; } .list-links ul { list-style: none; } .list-links li ~ li { margin-top: 10px; } .list-links a { color: #0b318f; text-decoration: none; } .list-links a:hover { text-decoration: underline; } .list-links .current > a { font-weight: bold; } /* ------------------------------------------------------------ *\ List Items \* ------------------------------------------------------------ */ .list-items { margin: 0 -40px; color: #898989; font-weight: bold; font-size: 0; } .list-items li { padding: 0 40px; width: 50%; display: inline-block; font-size: 16px; margin-bottom: 35px; vertical-align: top; } .list-items h5 { font-size: 18px; color: #0b318f; margin-bottom: 0; } .list-items p { margin: 0; } .list-items a { color: #06b4ea; text-decoration: none; } .list-items a:hover { text-decoration: underline; } /* Mobile */ @media (max-width: 780px) { .list-items li { font-size: 18px; } .list-items li h5 { font-size: 17px; margin-bottom: 0; } .list-items li p { } .list-items li { width: 100%; float: none; margin-bottom: 20px; font-size: 14px; } } /* ------------------------------------------------------------ *\ List Distributors \* ------------------------------------------------------------ */ .list-distributors { } .list-distributors li { position: relative; padding-left: 20px; margin-bottom: 7px; } .list-distributors li:before { position: absolute; top: 2px; left: 0; display: block; content: "\f371"; vertical-align: top; font-family: "IonIcons", serif; font-size: 12px; color: #06b4ea; } .list-distributors a { color: #06b4ea; font-weight: bold; text-decoration: none; } .list-distributors a:hover { text-decoration: underline; } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: inline-block; } .logo .active { display: none; } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { font-weight: 600; font-size: 16px; } .nav a { text-decoration: none; } .nav ul { list-style: none; } .nav > ul { float:left; } .nav p#navFacebook { float:left; margin:15px 0; position: relative; z-index: 101; } .nav p#navJD { float:left; margin:15px 0; position: relative; z-index: 101; } .nav p#navJD img { } .nav p#navJD .jd_shop_list { position:absolute; top:26px;right:0px; display:block; background:#D12633;padding:5px 10px;width:190px;font-size:14px;display:none; } .nav p#navJD .jd_shop_list a:link,.nav p#navJD .jd_shop_list a:visited { color:#fff;margin:10px auto; display:block; } .nav p#navJD .jd_shop_list a:hover { color:#203D8B; text-decoration:underline; } .nav ul:after { content: ''; clear: both; display: table; font-size: 0; line-height: 0; } .nav > ul > li { float: left; margin-right: 30px; } .nav > ul > li > a { color: #191717; display: block; padding: 8px 0; margin:7px 0; } .nav > ul > li > a:hover { color: #0b318f; } .nav .current > a { color: #06b4ea; } .nav .has-dropdown > a { position: relative; z-index: 100; background:url(../images/icon_arrow.png) no-repeat center bottom; } /*.nav .has-dropdown > a:after { position: absolute; z-index: 2; width: 100%; display: block; content: "\f3d0"; font-family: "IonIcons", sans-serif; font-size: 10px; text-align: center; color: #898989; }*/ .nav .dropdown { position: absolute; left: 0; width: 100%; top: 100%; box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.95); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; z-index: 20; } .nav .dropdown ul { font-size: 0; } .nav .dropdown ul:after { content: ''; clear: both; font-size: 0; line-height: 0; display: table; } .nav .dropdown h3 { padding:16px 5px 16px 5px; font-size:13px; color:rgba(255, 255, 255, 0.4); background:#0b318f; margin:0; text-align:center; font-weight:bold; } .nav .dropdown ul { margin: 0 -1%; } .nav .dropdown li { display: inline-block; vertical-align: top; text-align: center; font-size: 14px; padding: 0 1%; } .nav .dropdown.has-images li { max-width: 16.5%; } .nav .dropdown a { display: block; padding: 11px 0; color: #0b318f; } .nav .dropdown-head { position: absolute; left: 0; bottom: 0; text-align: center; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 25px 25px; -ms-transform-origin: 25px 25px; transform-origin: 25px 25px; } .nav .dropdown-body { text-align: right; padding: 20px 0; border-top: 1px solid #dcdde1; } .nav .dropdown-image { display: block; margin-bottom: 20px; } .nav .dropdown-image img { transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; width: 100%; height: auto; } .nav .dropdown a:hover .dropdown-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } .nav .dropdown a:hover { color: #292a2d; } .nav .visible .dropdown { opacity: 1; visibility: visible; } /* Small Desktop */ @media (max-width: 1300px) { .nav > ul > li { margin-right: 30px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .nav { padding-top: 2px; } .header .shell { margin-top:16px; } .nav .dropdown-head { display: none; } .nav > ul > li { margin-right: 30px; } .nav > ul > li > a { padding-top: 0; font-size: 13px; margin-top:0; } .nav .dropdown-body { padding: 5px 0; margin-top:50px; } .nav p#navFacebook,.nav p#navJD { margin:0;} .nav .dropdown { min-height:50px; } } /* ------------------------------------------------------------ *\ Nav Mobile \* ------------------------------------------------------------ */ .nav-mobile { font-size: 18px; text-align: right; } .nav-mobile > ul { list-style: none; } .nav-mobile > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .nav-mobile > ul > li > a { display: block; padding: 18px 0; text-decoration: none; text-transform: uppercase; color: #fff; } .nav-mobile > ul > li > p { padding: 18px 0 10px; text-transform: uppercase; color: #fff; margin-bottom:0; } .nav-mobile ul ul { font-size: 16px; } .nav-mobile ul ul a { padding: 11px 0; display: block; text-decoration: none; text-transform: none; color: rgba(255, 255, 255, 0.6); } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ .product .product-inner { position: relative; border: 1px solid #0b318f; display: block; text-decoration: none; } .product .product-image { background: #f3f3f3; overflow: hidden; } .product .product-image a { display: block; overflow: hidden; background-repeat: no-repeat; background-position: center center; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; padding-bottom: 100%;background-size: 90% auto; } .product .product-image img { opacity: 0; visibility: hidden; display: none; } .product .product-head { height: 100px; position: relative; background: #fff; } .product .product-head:after { content: ''; width: 100%; height: 23px; position: absolute; top: 0; left: 0; margin-top: -11px; } .product .product-title { font-size: 16px; font-family: 'Open Sans', sans-serif; color: #0b318f; text-align: center; padding: 0 10px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .product .product-title a { text-decoration: none; } .product .product-title a span { font-weight:bold; display:block; margin-top:10px; } .product .product-title.fc8r a span { margin-top:0; } .product .product-head .product-title a:visited { color:#103381; } .product .btn { display: block; padding: 22px; } .product:hover .product-image a { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ /* .search { background: #0b318f; padding: 10px 0; } .search form { position: relative; padding: 0 90px 0 0; } .search .search-field { width: 100%; background: rgba(255, 255, 255, 0.5); width: 100%; font-size: 18px; color: #0b318f; display: block; transition: background-color .4s ease; padding: 5px 18px; height: 40px; } .search .search-field::-webkit-input-placeholder { color: #fff; transition: color .4s ease; } .search .search-field::-moz-placeholder { color: #fff; transition: color .4s ease; } .search .search-field:-ms-input-placeholder { color: #fff; transition: color .4s ease; } .search .search-field::placeholder { color: #fff; transition: color .4s ease; } .search .search-field:focus::-webkit-input-placeholder { color: #aaa; } .search .search-field:focus::-moz-placeholder { color: #aaa; } .search .search-field:focus:-ms-input-placeholder { color: #aaa; } .search .search-field:focus::placeholder { color: #aaa; } .search .search-field:focus { background: #fff; } .search .search-btn { position: absolute; right: 0; top: 0; height: 40px; line-height: 40px; padding: 0 20px; } */ #header-info form.search input.inbase { box-sizing:content-box; } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { padding: 39px 0; } .section h4 { font-size: 25px; margin-bottom: 25px; color: #191717; } .section h5 { color: #191717; font-size: 22px; margin: 0 0 15px; } .section .section-title { font-size: 45px; color: #0b318f; margin-bottom: 22px; } .section .section-entry { color: #898989; } .section .section-entry p { margin-bottom: 16px; } .section .section-entry a { color: #06b4ea; text-decoration: none; font-weight: bold; } .section .section-entry a:hover { text-decoration: underline; } .section .section-aside { float: right; width: 300px; } .section .section-content { overflow: hidden; padding-right: 40px; } .section .list-items p { margin-bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section .section-title { font-size: 30px; } .product .product-title { font-size:13px; } } /* Mobile */ @media (max-width: 780px) { .section { padding: 20px 0 30px; } .section .section-title { } .section .section-body { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .section .section-content { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .section .section-aside { -webkit-order: 2; -ms-flex-order: 2; order: 2; float: none; width: 100%; } .product .product-title { font-size:16px; } } @media (max-width: 650px) { .product .product-title { font-size:13px; } } /* ------------------------------------------------------------ *\ Section Articles \* ------------------------------------------------------------ */ .section-articles.has-bg { background:#fff; background-size: 100% auto; position: relative; z-index: 10; } /* ------------------------------------------------------------ *\ Section Features \* ------------------------------------------------------------ */ .section-features { padding: 76px 0 0; background: #fff; } /* Mobile */ @media (max-width: 780px) { .section-features { padding: 40px 0; } } /* ------------------------------------------------------------ *\ Section Updates \* ------------------------------------------------------------ */ .section-updates { background: #e7e7e7; padding: 75px 0; } /* Mobile */ @media (max-width: 780px) { .section-updates { padding: 30px 0; } } /* ------------------------------------------------------------ *\ Section Products \* ------------------------------------------------------------ */ .section-products { padding: 40px 0; } .section-products .section-title { color: #0b318f; font-size: 45px; } .section-products .section-body { padding-top: 22px; overflow: hidden; } .section-products .cols { margin: 0 -2.2%; } .section-products .col { padding: 0 2.2%; margin-bottom: 4.3%; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-products .section-title { font-size: 30px; } } /* Mobile */ @media (max-width: 780px) { .section-products { padding: 20px 0; } .section-products .col-1of3 { width: 50%; } } @media (max-width: 479px) { .section-products .col-1of3 { width: 100%; float: none; } .section-products .col ~ .col { margin-top: 30px; } .product .product-title { font-size:16px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider {} .slider .slides { list-style: none outside none; } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { font-size: 38px; } .socials ul { list-style: none; overflow: hidden; } .socials li { float: left; } .socials li ~ li { margin-left: 14px; } .socials a { color: #fff; } .socials a:hover { color: #06b4ea; } /* ------------------------------------------------------------ *\ Subscribe \* ------------------------------------------------------------ */ .subscribe { position: relative; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA2YjRlYSIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBiMzE4ZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: linear-gradient(to right, rgba(6,180,234,0.8) 0%,rgba(11,49,143,0.8) 100%); } .subscribe .subscribe-body { width: 51%; padding: 99px 0; } .subscribe .subscribe-title { margin-bottom: 38px; color: #fff; } .subscribe .subscribe-image { position: absolute; right: 0; bottom: 0; pointer-events: none; } .subscribe .subscribe-field { background: #fff; height: 65px; font-size: 20px; color: #0b318f; transition: background-color .4s ease; padding: 0 18px; width: 67%; } .subscribe .subscribe-field:focus { background: #ededed; } .subscribe .subscribe-field::-webkit-input-placeholder { color: #aaa; opacity: 1; } .subscribe .subscribe-field::-moz-placeholder { color: #aaa; opacity: 1; } .subscribe .subscribe-field:-ms-input-placeholder { color: #aaa; opacity: 1; } .subscribe .subscribe-field::placeholder { color: #aaa; opacity: 1; } .subscribe .subscribe-btn { height: 65px; vertical-align: top; margin-left: 7px; width: 28%; } .subscribe .subscribe-btn:hover { background: #fff; color: #0b318f; } /* Small Desktop */ @media (max-width: 1300px) { /*.subscribe .subscribe-image { width: 600px; }*/ } /* Tablet Portrait */ @media (max-width: 1023px) { .subscribe .subscribe-body { width: 60%; position: relative; z-index: 10; } .subscribe .subscribe-image { height: 680px; } .subscribe .subscribe-image img { width: auto; height: 100%; max-width: none; } } /* Mobile */ @media (max-width: 780px) { .subscribe .subscribe-body { width: 100%; padding: 190px 0 50px; } .subscribe .subscribe-title { font-size: 20px; margin-bottom: 10px; } .subscribe .subscribe-image { max-width: 300px; height: auto; } .subscribe .subscribe-image img { max-width: 100%; width: 100%; height: auto; } } @media (max-width: 479px) { .subscribe .subscribe-field { width: 100%; display: block; height: auto; font-size: 16px; padding: 15px; } .subscribe .subscribe-btn { width: 100%; display: block; margin: 5px 0 0; padding: 15px; height: auto; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table {} /* ------------------------------------------------------------ *\ Updates \* ------------------------------------------------------------ */ .updates { margin: 0 -3.13%; color: #898989; } .updates:after { content: ''; clear: both; display: table; font-size: 0; line-height: 0; } .updates .update { float: left; width: 50%; padding: 0 3.13%; } .updates .update-inner { padding: 0 41px 0 49px; } .updates .update-title { font-size: 35px; margin-bottom: 8px; } .updates .update-title a { color: #292a2d; text-decoration: none; } .updates .update-title a:hover { text-decoration: underline; color: #06b4ea; display: block; } .updates .update-entry { padding: 16px 0; } .updates .meta-date { font-family: 'Gotham', sans-serif; font-weight: normal; font-size: 14px; } .updates .btn { padding: 12px 19px; font-size: 14px; } /* Tablet Portrait */ @media (max-width: 1023px) { .updates .update-title { font-size: 30px; } .updates .update-inner { padding: 0; } } /* Mobile */ @media (max-width: 780px) { .updates .update-title { font-size: 20px; } .updates .update { width: 100%; float: none; } .updates .update ~ .update { margin-top: 35px; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Links \* ------------------------------------------------------------ */ .widget-links { list-style: none; font-size: 18px; } .widget-links ul { list-style: none; } .widget-links li { padding: 10px 0; border-bottom: 1px solid #dedede; } .widget-links a { text-decoration: none; color: #0b318f; } .widget-links a:hover { text-decoration: underline; } /* Mobile */ @media (max-width: 780px) { .widget-links { font-size: 16px; } .widget-links li { padding: 5px 0; } } /* ------------------------------------------------------------ *\ 共? \* ------------------------------------------------------------ */ .nav .has-dropdown a#regionBtn { background:#004491 url(../images/icon_arrow.png) no-repeat center bottom; color:#ffffff; padding:10px; margin:5px 0; cursor:default; } .nav .has-dropdown > a#regionBtn::after { left:0; } .nav .has-dropdown a[target="_blank"] { background:url(../images/common_bg_blank.gif) no-repeat right 1.2em; padding-right:15px; } .fc8r { font-size:14px !important; } @media (max-width: 1023px) { .nav .has-dropdown a#regionBtn { margin:0; } .nav > ul > li.has-dropdown:last-child { margin-top:0px; } } /* ------------------------------------------------------------ *\ product \* ------------------------------------------------------------ */ .office_name { width:auto; line-height:1.6em; } .office_name h2 { margin-bottom:0; } .office_name_home { line-height:1.5em; background:#004491; width:70px; text-align:center; } .office_name_home a { font-size:16px; font-weight:600; color:#fff; padding:2px 10px; } .office_name_home a:link, .office_name_home a:visited, .office_name_home a:hover, .office_name_home a:active { color:#fff; } .cf:before, .cf:after { display:table; content:""; } .cf:after { clear:both; } .cf { zoom:1; overflow:hidden; } .productsSection { margin-top:30px; } .productsSection h1 { color:#103381; font-size:40px; line-height:1; } .productsSection h1 span { font-size:24px; } .productsSection article > figure { float:right; max-width:455px; margin:0 auto; } .productsSection article div h2 { font-size:24px; color:#000000; } .productsSection article div h3.listTitle { font-size:22px; color:#000000; } .productsSection article div p, .productsSection article div ul, .productsSection article div ul li h3 { font-size:16px; color:#898989; line-height:1.5; font-weight:bolder; } .productsSection article div ul, .productsSection article div p { font-size:16px; } .productsSection article div ul li h3 { margin-bottom:0; } .productsSection article div > ul > li { list-style:none; background:url(/images/product_bg_list.gif) no-repeat left 0.5em; padding-left:1em; } .productsSection article#fc8rArea #mainContent .figureOuter { float:left; width:50%; } .productsSection article#fc8rArea #mainContent figure { text-align:center; } .productsSection article#fc8rArea #mainContent figure img { max-width:520px; } .productsSection article#fc8rArea #mainContent div { max-width:1200px; margin:0 auto; } .productsSection article#fc8rArea #mainContent div > ul { float:left; width:48%; margin-left:2%; } .productsSection article#fc8rArea #mainContent div > ul > li { background:none; line-height:1.7em; border-top:solid 1px #e6e6e6; padding:10px 0 0 0; margin-top:10px; } .productsSection article#fc8rArea #mainContent div > ul > li:first-child { border-top:none; margin-top:0; padding-top:0; } .productsSection article#fc8rArea #mainContent ul li ul { margin-top:10px; } .productsSection article#fc8rArea #mainContent ul li ul li { text-indent:-1em; padding-left:1em; } .productsSection article#fc8rArea .btn-blue { font-weight:700; } .productsSection article .contentOuter { border-top:solid 1px #e6e6e6; margin-top:20px; padding-top:20px; } .productsSection article .contentOuter div { max-width:1000px; margin:0 auto; } .productsSection article .contentOuter .float-l, .productsSection article .contentOuter .float-r { width:50%; text-align:center; } .productsSection article .contentOuter p.float-l { margin-top:40px; } .productsSection article .contentOuter .openInner { width:50%; float:left; text-align:center; font-size:16px; font-weight:bolder; } .productsSection article .contentOuter .openInner dl { margin-top:20px; } .productsSection article#fc8rArea .contentOuter figure.float-r img { max-width:400px; } .productsSection article#fc8rArea .contentOuter .openInner figure img { max-width:300px; } .productsSection article ul.blueBtnList { margin-top:60px; } .productsSection article ul.blueBtnList li { width:275px; float:left; background:none; margin-left:15px; padding:0; } .productsSection article ul.blueBtnList li:first-child { margin-left:0; } .productsSection article ul.blueBtnList li a { padding:24px 10px; display:block; } @media (max-width: 1300px) { .productsSection article ul.blueBtnList { margin-top:80px; } .productsSection article ul.blueBtnList li { width:32.5%; margin-left:1.25%; } .productsSection article ul.blueBtnList li a { padding:24px 5px; display:block; } .productsSection article ul.blueBtnList li a span { display:block; } } @media (max-width: 780px) { .productsSection article ul.blueBtnList { margin-top:20px; } .productsSection article ul.blueBtnList li { width:100%; float:none; margin:10px 0 0; } .productsSection article ul.blueBtnList li:first-child { margin:0; } .productsSection article ul.blueBtnList li a span { display:inline; } } .productsSection article ul.blueBtnListSecond { margin-top:90px; } .productsSection article ul.blueBtnListSecond li { width:275px; float:left; background:none; margin-left:15px; padding:0; } .productsSection article ul.blueBtnListSecond li:first-child { margin-left:0; } .productsSection article ul.blueBtnListSecond li a { padding:24px 10px; display:block; } @media (max-width: 1023px) { .productsSection article ul.blueBtnListSecond li { width:46%; margin-left:1.25%; } .productsSection article ul.blueBtnListSecond li a span { display:block; } } @media (max-width: 780px) { .productsSection article ul.blueBtnListSecond { margin-top:20px; } .productsSection article ul.blueBtnListSecond li { width:100%; float:none; margin:10px 0 0; } } .productsSection article ul.blueBtnListThird { margin-top:50px; } .productsSection article ul.blueBtnListThird li { width:275px; float:left; background:none; margin-left:15px; padding:0; } .productsSection article ul.blueBtnListThird li:first-child { margin-left:0; } .productsSection article ul.blueBtnListThird li a { padding:24px 10px; display:block; } @media (max-width: 1200px) { .productsSection article ul.blueBtnListThird li { width:46%; margin-left:1.25%; } .productsSection article ul.blueBtnListThird li a span { display:block; } } @media (max-width: 780px) { .productsSection article ul.blueBtnListThird { margin-top:20px; } .productsSection article ul.blueBtnListThird li { width:100%; float:none; margin:10px 0 0; } .productsSection article ul.blueBtnListThird li a span { display:inline; } } .abox { font-size:15px; line-height:180%; padding:30px 0 15px; border-top:solid 1px #dddddd; margin-top:30px;} .abox .cf { max-width:1000px; margin:0 auto; } .article1 { float:left; font-size:18px; width:49%; text-align:center; } .article2 { float:right; font-size:18px; width:49%; text-align:center; } .article1 img, .article2 img { max-width: 100%; width: auto; } .hjtx { display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; } .hjtx img { width: 50%; } .abox h2 { font-size:32px; line-height:1.4; margin-bottom:15px; text-align:left; } .abox ul.ilist { padding-left:22px; } .abox ul.ilist li { list-style:outside disc; background:none; padding-left:0; text-indent:0; text-align:left; color:#000000; } .productsSection article#page01Area #imgMaxW01 { max-width:411px; } .productsSection article#page01Area #imgMaxW02 { max-width:264px; } .productsSection article#page01Area #imgMaxW03 { max-width:473px; } .productsSection article#page01Area #imgMaxW04 { max-width:315px; } .productsSection article#page01Area #imgMaxW05 { max-width:292px; } .productsSection article#page01Area #imgMaxW06 { max-width:264px; } .productsSection article#page02Area .abox img { max-width:411px; } .productsSection article#page03Area .abox img { max-width:400px; } .productsSection article#t82m12Area .abox img { max-width:400px; } .productsSection article#page05Area .abox img { max-width:400px; } .productsSection article#page06Area .abox img { max-width:400px; } .productsSection article#page07Area .abox img { max-width:400px; } .productsSection article div > ul.imgProductList { width:68%; float:left; } .productsSection article div > ul.productsIconList li { min-height:45px; margin-top:10px; padding-left:65px; font-size:16px; } .productsSection article div h2.headline { font-size:25px; margin-top:40px; } .productsSection article div > ul#page01List li#fsIcon01 { background:url(/images/product_icon_fs_page01_01.gif) no-repeat left top; } .productsSection article div > ul#page01List li#fsIcon02 { background:url(/images/product_icon_fs_page01_02.gif) no-repeat left top; } .productsSection article div > ul#page01List li#fsIcon03 { background:url(/images/product_icon_fs_page01_03.gif) no-repeat left top; } .productsSection article div > ul#page01List li#fsIcon04 { background:url(/images/product_icon_fs_page08_03.gif) no-repeat left top; } .productsSection article div > ul#page01List li#fsIcon05 { background:url(/images/product_icon_fs_page08_02.gif) no-repeat left top; } .productsSection article div > ul#page02List li#fsIcon01 { background:url(/images/product_icon_fs_page02_01.gif) no-repeat left top; } .productsSection article div > ul#page02List li#fsIcon02 { background:url(/images/product_icon_fs_page02_02.gif) no-repeat left top; } .productsSection article div > ul#page02List li#fsIcon03 { background:url(/images/product_icon_fs_page02_03.gif) no-repeat left top; } .productsSection article div > ul#page03List li#fsIcon01 { background:url(/images/product_icon_fs_page03_01.gif) no-repeat left top; } .productsSection article div > ul#page03List li#fsIcon02 { background:url(/images/product_icon_fs_page03_02.gif) no-repeat left top; } .productsSection article div > ul#page03List li#fsIcon03 { background:url(/images/product_icon_fs_page03_03.gif) no-repeat left top; } .productsSection article div > ul#page05List li#fsIcon01 { background:url(/images/product_icon_fs_page05_01.gif) no-repeat left top; } .productsSection article div > ul#page05List li#fsIcon02 { background:url(/images/product_icon_fs_page05_02.gif) no-repeat left top; } .productsSection article div > ul#page05List li#fsIcon03 { background:url(/images/product_icon_fs_page05_03.gif) no-repeat left top; } .productsSection article div > ul#page06List li#fsIcon01 { background:url(/images/product_icon_fs_page06_01.gif) no-repeat left top; } .productsSection article div > ul#page06List li#fsIcon02 { background:url(/images/product_icon_fs_page06_02.gif) no-repeat left top; } .productsSection article div > ul#page06List li#fsIcon03 { background:url(/images/product_icon_fs_page06_03.gif) no-repeat left top; } .productsSection article div > ul#page07List li#fsIcon01 { background:url(/images/product_icon_fs_page07_01.gif) no-repeat left top; } .productsSection article div > ul#page07List li#fsIcon02 { background:url(/images/product_icon_fs_page07_02.gif) no-repeat left top; } .productsSection article div > ul#page07List li#fsIcon03 { background:url(/images/product_icon_fs_page07_03.gif) no-repeat left top; } .productsSection article div > ul#page8rList li#fsIcon01 { background:url(/images/product_icon_fs_page8r_01.gif) no-repeat left top; } .productsSection article div > ul#page8rList li#fsIcon02 { background:url(/images/product_icon_fs_page8r_02.gif) no-repeat left top; } .productsSection article div > ul#page8rList li#fsIcon03 { background:url(/images/product_icon_fs_page8r_03.gif) no-repeat left top; } .productsSection article div > ul.imgList > li { background:none; padding-left:0; margin:40px 0; text-align:center; } .productsSection article div > ul.imgList > li img { max-width:411px; width:100%; text-align:center; } .productsSection article div ul li ul li, .productsSection article div > ul#descriptionList > li { list-style:none; padding-left:0.5ex; text-indent:-0.5ex; background:none; } .productsSection article div p.mt50 { margin-top:50px; } #productTabs { margin-left:60px; } #productTabs ul { margin:120px 0 0; } #productTabs ul li { float:left; text-align:center; list-style:none; width:25%; } #productTabs ul li a { display:block; padding:20px 10px; box-sizing:border-box; color:#103380; font-size:14px; } #productTabs > p { padding:20px 10px; box-sizing:border-box; color:#103380; font-size:14px; background:#f3f3f3; margin:120px 0 0; width:25%; text-align:center; } #productTabs ul li.tabOn { background:#f3f3f3; } #productTabs article { padding:50px 25px 80px; } #productTabs article h4 { font-size:18px; font-weight:bold; margin:30px 0 0; } #productTabs article table { text-align:left; color:#898989; margin-top:30px; line-height:1.5; word-break:break-all; } #productTabs article table tr:nth-child(2n+1) { background:#dbdfe9; } #productTabs article table tr th, #productTabs article table tr td { padding:5px 0; text-align:left; } #productTabs article { display:none; } #productTabs article.tabOn { background:#f3f3f3; display:block; } #productTabs article ol li { font-size:14px; } #productTabs.lynxOuter ul li { width:20%; } #productTabs.lynxOuter article table tr:first-child th { border-bottom:solid 1px #000000; color:#000000; font-weight:normal; padding:5px 15px; } #productTabs.lynxOuter article table tr:first-child th:first-child { padding-left:0; } #productTabs.lynxOuter article table tr:nth-child(2n+1) { background:none; } #productTabs.lynxOuter article table tr td { padding:10px 15px; } #productTabs.lynxOuter article table tr td a.btn { font-weight:bold; width:230px; padding:24px 10px; } #productTabs.lynxOuter article table tr td a.btn-dark-blue { width:120px; } #productTabs.lynxOuter article table tr th span.documentRange { display:block; width:230px; text-align:center; } #productTabs.lynxOuter article table tr th span.videoRange { display:block; width:120px; text-align:center; } @media (max-width: 780px) { #productTabs.lynxOuter article table tr th span.documentRange { width:auto; } #productTabs.lynxOuter article table tr th span.videoRange { width:auto; } } /* SumiCloudOverview */ .productsSection article div figure#sumiCloudOverview { width:656px; margin:50px auto 30px; } .productsSection article div ul.sumiCloudList li { background:none; padding-left:0; margin-top:30px; } .productsSection article div ul.sumiCloudList li:first-child { margin-top:0; } .productsSection article div ul.sumiCloudList li h3 { font-size:25px; color:#000000; font-weight:bold; padding-left:90px; } .productsSection article div ul.sumiCloudList li.icon01 h3 { background:url(../../products/images/product_icon_sumicloud01.gif) no-repeat left top; } .productsSection article div ul.sumiCloudList li.icon02 h3 { background:url(../../products/images/product_icon_sumicloud02.gif) no-repeat left top; } .productsSection article div ul.sumiCloudList li.icon03 h3 { background:url(../../products/images/product_icon_sumicloud03.gif) no-repeat left top; } .productsSection article div ul.sumiCloudList li figure { margin-top:30px; max-width:500px; } .productsSection article div ul.sumiCloudList li:first-child figure { max-width:620px; } .productsSection article div#soonArea figure { float:right; width:30%; margin-left:3%; max-width:303px; } .productsSection article div#soonArea ul.sumiCloudList { float:left; width:67%; } .productsSection article div#soonArea ul.sumiCloudList li p { margin-top:10px; } .productsSection article div ol { margin-top:30px; line-height:1.6; font-weight:bolder; font-size:14px; } .productsSection article div ul#sumiCloudBtnList { float:right; margin-left:30px; } .productsSection article div ul#sumiCloudBtnList li { background:none; padding:0; margin-top:10px; width:100%; } .productsSection article div ul#sumiCloudBtnList li:first-child { margin-top:0; } .productsSection article div ul#sumiCloudBtnList li a { width:100%; font-weight:bold; } /* ------------------------------------------------------------ *\ after-service,contact-us \* ------------------------------------------------------------ */ .infoSection { margin-top:30px; } .infoSection h2 { color:#103381; font-size:40px; } .infoSection h2 span { font-size:32px; } .infoSection h3 { font-size:25px; color:#000000; margin-bottom:10px; font-weight:bold; } .infoSection ul li { font-weight:bolder; line-height:1.5; } #contactSection h3 { color:#103381; font-size:24px; } #contactSection h4 { font-size:25px; color:#000000; margin-bottom:10px; font-weight:bold; font-family: 'Open Sans', sans-serif; } #contactSection h4.asiaTitle { margin-top:20px; } #contactSection ul li h5 { font-size:18px; color:#103381; margin-bottom:10px; font-weight:bold; } #contactSection ul.continentsList > li { width:32%; float:left; margin-left:2%; } #contactSection ul.continentsList > li:first-child { margin-left:0; } #contactSection ul#asiaList { width:100%; margin-left:0; } #contactSection ul#asiaList > li { float:left; } #contactSection ul#asiaList > li:nth-child(n + 4) { margin-top:20px; } #contactSection ul#asiaList > li { width:32%; margin-left:2%; } #contactSection ul#asiaList > li:nth-child(3n+1) { margin-left:0; } #contactSection article p.iconAsterisk { margin:50px 0; } #contactSection ul#headAsiaList { width:100%; margin-left:0; } #contactSection ul#headAsiaList > li { float:left; } #contactSection ul#headAsiaList > li:nth-child(n + 4) { margin-top:20px; } #contactSection ul#headAsiaList > li { margin-left:2%; } #contactSection ul#headAsiaList > li:nth-child(3n+1) { margin-left:0; } .infoSection ul li h4 { font-size:18px; color:#103381; margin-bottom:10px; font-weight:bold; } .infoSection ul li a { color:#06b4ea; } .infoSection ul li.mailIcon a { background:url(../images/icon_mail.gif) no-repeat left 0.3em; padding-left:25px; color:#103381; font-weight:normal; } .infoSection .supportInformation { padding-bottom:30px; } .infoSection .supportInformation h3 { border-bottom:solid 1px #000000; padding-bottom:10px; margin-top:30px; } .infoSection .supportInformation table { text-align:center; table-layout:fixed; } .infoSection .supportInformation table th { padding:10px 0; } .infoSection .supportInformation table td { padding:5px 0; } .infoSection .supportInformation table .bgBlue { background:#e6eaf4; } .infoSection .supportInformation p { font-size:12px; margin-top:30px; } .infoSection .supportInformation table .supportTitleFrame { width:23%; } .infoSection .supportInformation table .supportProductFrame { padding:5px 0; text-align:left; width:25%; } /* ------------------------------------------------------------ *\ news \* ------------------------------------------------------------ */ /* index.html */ .newsSection { margin-top:30px;} .newsSection h2 { color:#103381; font-size:36px; } .newsSection h2 span { font-size:32px; } .newsSection > h2 { margin:50px 0 0; padding-bottom:10px; border-bottom:solid 1px #103381; } .newsSection ul li:before, .newsSection ul li:after { display:table; content:""; } .newsSection ul li:after { clear:both; } .newsSection ul li { zoom:1; overflow:hidden; } .newsSection > ul > li { margin:15px 0 70px; padding-bottom:10px; border-bottom:solid 1px #103381; } .newsSection > ul > li:first-child { border-bottom:none; padding-bottom:0; } .newsSection > ul > li:first-child h2 { padding-bottom:10px; border-bottom:solid 1px #103381; margin-bottom:0; } .newsSection > ul#supportList > li:first-child { border-bottom:solid 1px #103381; padding-bottom:10px; } .newsSection > ul#supportList > li:first-child h2 { padding-bottom:0; border-bottom:none; } .newsSection a.btn { float:right; display:inline-block; color:#06b4ea; font-size:14px; text-align:center; text-transform:uppercase; border:solid 2px #06b4ea; background:transparent; transition:background-color 0.3s ease 0s; padding:0 40px; line-height:38px; font-weight:bold; } .newsSection a.btn:hover { background:#06b4ea; color:#ffffff; } .newsSection ul.newsList { margin-bottom:30px; } .newsSection ul.newsList li { font-size:16px; font-weight:bolder; border-bottom:solid 1px #848484; padding:20px 0; } .newsSection ul.newsList li dl { display:table; width:100%; table-layout:fixed; } .newsSection ul.newsList li dl dt { display:table-cell; vertical-align:middle; width:25%; border-right:solid 1px #848484; color:#103381; padding-right:20px; box-sizing:border-box; word-wrap: break-word; } .newsSection ul.newsList li dl dd { display:table-cell; vertical-align:middle; padding-left:20px; color:#103381; box-sizing:border-box; word-wrap: break-word; } .newsSection ul.newsList li dl dd:last-child { width:195px; padding-left:0; text-align:right; } .newsSection ul.newsList li dl dd a.btn { float:none; } /* pages.html */ .newsSection h3 { color:#103381; font-size:20px; font-weight:bold; margin-top:30px; line-height:1.7; } .newsSection h3 span { display:block; font-size:16px; margin-bottom:10px; } .newsSection h3#newsHeadLine { font-size:30px; } .newsSection p { line-height:2; } .newsSection p a.btn { float:none; } /* important.html */ .newsSection ol > li { border-bottom:solid 1px #ededed; margin-bottom:20px; padding-bottom:20px; } .newsSection ol > li:first-child { padding-top:0; } .newsSection ol li h3 { margin-top:0; } .newsSection ol li ul li span { color:#103381; display:block; font-weight:bolder; margin-top:10px; padding-bottom:5px; } .newsSection ol li ul li:first-child span { margin-top:0; } .newsSection ol li a { color:#06b4ea; } .newsSection ol li a:hover { text-decoration:underline; } .newsSection article p.newsImgSize { max-width:888px; margin:20px auto; } /*sitemap.html*/ .aboutSection { } .aboutSection { margin-top:30px;} .aboutSection h2 { color:#103381; font-size:36px; } .aboutSection h2 span { font-size:32px; } .aboutSection .wrap-box { float:left;width:27%; margin-right:30px; } .aboutSection .wrap-box2 {margin-right:0px; } .aboutSection dl { } .aboutSection dl dt {margin: 0 0 20px; } .aboutSection dl dt a span { padding-top: 2px; font-size: 18px; } .aboutSection dl dd{ padding: 20px 0 0;} .aboutSection .parent, .aboutSection .child { margin: 0 0 20px 10px; } .aboutSection .child > li { margin: 0 0 15px; } .link-2 { display: inline-block;background:url("/images/icn_link2.gif") no-repeat 5px 5px;line-height: 1.3em;min-height: 15px;padding: 0 0 0 20px;} .link-2 a:link, .link-2 a:visited { color:#666; } .link-2 a:hover { color:#004491; } .wrap-box .btn { display:inline; } .wrap-box .btn a { display: block; padding: 7px 5px; border: 1px solid #ccc; border-radius: 2px; box-shadow: 0 1px 1px 1px rgba(0,0,0,0.06); line-height: 1.3em; text-decoration: none; text-align:center; } dl.copyright { } dl.copyright dt { background:url(/images/h2_bg.gif) no-repeat left center; font-size:22px; color:#000; font-weight:bold; margin:20px 0 0 0;padding:0 0 10px 15px;border-bottom:solid 2px #999;} dl.copyright dd { font-size:14px; line-height:1.6em;color:#333; } .info-1 li,.info-1 div,.info-1 dt,.info-1 dd,dl.copyright dd p{color:#333; } .spage {max-width:720px;} @media (max-width: 980px) { .aboutSection .wrap-box {width:95%; margin-right:0px; } .fc8r { font-size:12px !important; } .productsSection article figure#imgFigure { width:50%; } .productsSection article div#imgOuter { width:50%; } .productsSection article div > ul.imgProductList { float:none; width:auto; } .productsSection article div > ul.imgList { margin:0; width:100%; } .productsSection article div > ul.imgList li { margin-top:20px; } } @media (max-width: 780px) { .productsSection article figure#imgFigure { width:100%; } .productsSection article div#imgOuter { width:100%; } .productsSection article figure { float:none; } #productTabs { margin-left:0; } #productTabs.lynxOuter article table tr td { width:30%; padding:3% 2%; } #productTabs.lynxOuter article table tr td a.btn { width:100%; } #productTabs.lynxOuter article table tr td a.btn btn-blue { vertical-align:middle; } #productTabs article { padding:20px 0 50px; } #productTabs article table tr th, #productTabs article table tr td { padding:5px 2%; box-sizing:border-box; } #productTabs article ol { width:96%; margin:0 auto; } /* SumiCloudOverview */ .productsSection article div ul#sumiCloudBtnList { float:none; margin-left:0; } .productsSection article div figure#sumiCloudOverview { width:80%; margin:30px auto 20px; } .newsSection ul.newsList li dl dt { display:inline-block; width:25%; float:left; border-right:none; } .newsSection ul.newsList li dl dd { display:inline-block; width:75%; float:right; border-left:solid 1px #848484; padding-bottom:10px; } .newsSection ul.newsList li dl dd:last-child { display:inline-block; width:75%; clear:right; } .productsSection article#fc8rArea #mainContent .figureOuter { margin-bottom:30px; width:100%; } .article1 { float:none; width:100%; } .article2 { float:none; width:100%; margin-top:20px; } .hjtx { display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap; } .hjtx img { width:50%; } .productsSection article div > ul.imgList { width:80%; margin:0 auto; } #contactSection h2 { margin-bottom:0; } #contactSection ul.continentsList { margin-bottom:0; } #contactSection ul.continentsList > li { width:100%; float:none; margin:20px 0 0; } #contactSection h3.asiaTitle { margin-top:20px; } #contactSection ul#asiaList > li { float:none; margin-top:20px; } #contactSection ul#asiaList > li:first-child { margin-top:0; } #contactSection ul#asiaList > li:nth-child(n + 4) { margin-top:0; } #contactSection article > ul, #contactSection ul#asiaList > li { width:100%; margin-left:0; } #contactSection ul#headAsiaList > li { float:none; margin-top:20px; } #contactSection ul#headAsiaList > li:first-child { margin-top:0; } #contactSection ul#headAsiaList > li:nth-child(n + 4) { margin-top:0; } .productsSection article#fc8rArea #mainContent figure { float:none; margin:30px auto 0; width:100%; } .productsSection article .contentOuter .openInner { float:none; margin:0 auto 0; width:80%; } .productsSection article .contentOuter .openInner dl { margin-top:10px; } .productsSection article#fc8rArea #mainContent div > ul { float:none; margin:20px auto 0; width:100%; } .productsSection article#fc8rArea .contentOuter p.float-l { margin-top:10px; } .productsSection article .contentOuter .openInner:nth-child(2) { margin-top:30px; } .productsSection article .contentOuter .float-l, .productsSection article .contentOuter .float-r { float:none; width:100%; } } @media (max-width: 479px) { .productsSection h1 { font-size:25px; } #productTabs ul { margin-top:50px; } #productTabs ul li { float:none; width:80%; margin:0 auto; } #productTabs.lynxOuter ul { border-top:solid 1px #cccccc; } #productTabs.lynxOuter ul li { width:100%; border-bottom:solid 1px #cccccc; } #productTabs > p { width:80%; margin:50px auto 0; } /* SumiCloudOverview */ .productsSection article div#soonArea figure { float:none; width:100%; margin:50px auto 0; text-align:center; } .productsSection article div#soonArea ul.sumiCloudList { float:none; width:100%; } } /* ------------------------------------------------------------ *\ ヘッダー・フッター \* ------------------------------------------------------------ */ .office_name a { color:#000000; display:block; } #header-info .contact { float:right; } .gototopOuter { background:#eeeeee; } .gototop { max-width:1300px; width:98%; margin-top:0; padding-top:10px; } .gototop a { background:#ffffff; } @media (max-width: 950px) { #header-top { width:100%; height:auto; } #header-info { padding-right:5px; } #footer-main { width:98%; margin:0 auto; zoom:1; overflow:hidden; } #footer-main:before, #footer-main:after { display:table; content:""; } #footer-main:after { clear:both; } #footer-main .footer-links { width:420px; } #footer-main .footer-links li a { padding:0 2%; } } @media (max-width: 780px) { .office_name h2 { display:none; } .office_name p { display:none; } #header-info { display:none; } .nav-mobile ul ul a[target="_blank"] { background:url(../images/common_bg_blank_sp.png) no-repeat right 1.2em; padding-right:15px; } .gototop a { float:right; } #footer-main .footer-links { float: none; padding-top: 17px; display: flex; display: -webkit-flex; flex-flow: row wrap;margin-bottom:10px; } #footer-main .footer-links li { margin: 0 0px 10px 0; } #footer-main .footer-links li:first-child a { border-left: none; } #footer-main .copyright { width:100%; left:0; right:0; margin:0; text-align:center; background:#ffffff; padding:5px 0; float:none; position:absolute; } #footer { height:auto; } } @media (max-width: 479px) { #header { background-position:-2300px bottom; } #footer-main .footer-links { width:100%; text-align:center; } #footer-main .footer-links li a { padding: 0 10px; } } img.pdfIcon { width:auto; vertical-align:-0.13em; margin-left:5px; } /* ion-navicon打ち消し */ .header .btn-menu { background:url(../images/navi_menu.png) no-repeat center bottom; width:25px; height:25px; } .header .btn-menu .ion-navicon { display:none !important; } .cnt_body { font-size: 14px; line-height: 200%; padding-bottom: 30px; } .rsq_box{ } .rsq{ float:left; width:24%; padding:0 30px 0 0; } .centerArea h2 { color:#111184;font-size: 22px;} #contactSection .centerArea h3 { font-size:22px; margin-bottom:15px;} #contactSection .rsq h4{ font-size:18px; border-left:4px solid #111184; padding:3px 0px 3px 8px; line-height:1; margin-bottom:10px; } #contactSection .rsq_1st h4{ color:#111184;font-size: 22px; border:0px; padding:3px 0px 3px 0px; } #contactSection .rsq_1st h4 span { display:block;} .rsq div { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #CCC; min-height: 140px; line-height: 1.7; } .rsq p { /* padding-top:33px; */ font-size:14px; } .rsq p.no_head { padding-top:33px; } #navFacebook img { cursor:pointer; } .erweima { width:300px; right:0px;top:20px; } #navJD img {cursor:pointer;} .about_pic { } .about_pic li {width:30%;margin:20px 0 0 0; float:left;} .about_pic li p { text-align:center; } .about_pic li.li1 {width:50%;margin:20px 20px 0 0; } .about_pic li.li2 {width:41%; } .about_pic li.li3 {width:41%; } .about_pic li.li4 { clear:left; } .about_pic li.li5 {margin: 20px;} .about_pic li.li6 { } .data_list { } .data_list li {margin-bottom: 2%;width:25%;padding:2.0%;float:left;} .data_list li .data_list_inner {border: 1px solid #0b318f; background:#f3f3f3; padding:20px; } .data_list li .data_list_inner .btn-dark-blue {padding: 12px 15px;width: 100%;} .data_list li .data_list_inner .data_list_head {height:46px; } .data_list li .data_list_inner .btn-blue{padding: 12px 15px;width: 100%;} .data_list li .data_list_inner h4 {font-size: 16px; line-height:1.2em;} .productsSection article div > ul#t82m12_fe li {background-repeat:no-repeat;background-position:left top;background-size:auto 100%; } .productsSection article div > ul#t82m12_fe li#fsIcon01 { background-image: url(/images/TYPE-Q102-M12_pict_1.jpg);} .productsSection article div > ul#t82m12_fe li#fsIcon02 { background-image: url(/images/TYPE-Q102-M12_pict_2.jpg);} .productsSection article div > ul#t82m12_fe li#fsIcon03 { background-image: url(/images/TYPE-Q102-M12_pict_3.jpg);} .productsSection article div > ul#t82m12_fe li#fsIcon04 { background-image: url(/images/TYPE-Q102-M12_pict_4.jpg);} #t82m12Area figure {margin-top:-80px; } .bei {font-size:13px; text-align:center;line-height:2em;} @media (max-width: 780px) { .rsq { width: auto; float: none; } .rsq div {min-height:auto;margin-bottom:20px;padding-bottom:20px;} #contactSection .rsq h4 { font-size:18px; } #contactSection .rsq_1st h4 span {display:initial} #corp-logo { display:none; } #corp-logo a.corp-logo { /*display:none;*/ } #corp-logo-m { display:block;padding: 14px 0 0; } .about_pic li {width:100%;margin:20px 0 0 0; float:none;} .about_pic li p { text-align:center; } .about_pic li.li1 {width:100%;margin:20px 0 0 0 } .about_pic li.li2 {width:100%;margin:20px 0 0 0 } .about_pic li.li3 {width:100%;margin:20px 0 0 0 } .about_pic li.li4 {width:100%;margin:20px 0 0 0 } .about_pic li.li5 {width: 100%;margin:20px 0 0 0} .about_pic li.li6 { margin:20px 0 0 0} .data_list li {margin-bottom: 2%;width:50%;padding:2.0%;float:left;} .data_list li .data_list_inner {border: 1px solid #0b318f; background:#f3f3f3; padding:10px; } .data_list li .data_list_inner .btn-dark-blue {padding: 8px 10px;width: 100%;} .data_list li .data_list_inner .btn-blue{padding: 8px 10px;width: 100%;} #t82m12Area figure {margin-top:0px;} } .icon_nano { background: url(/images/NanoTune.jpg) no-repeat left top !important; background-size: 45px auto !important; } .icon_g654e { background: url(/images/PICT_654.jpg) no-repeat left top !important; background-size: 45px auto !important; } .icon_heater { background: url(/images/PICT_Heater.jpg) no-repeat left top !important; background-size: 45px auto !important; } .icon_battery { background: url(/images/PICT_Battery.jpg) no-repeat left top !important; background-size: 45px auto !important; } .icon_iot { background: url(/images/PICT_IoT.jpg) no-repeat left top !important; background-size: 45px auto !important; } .a-paragraph--Large { color: rgba(34,34,34,0.78); font-family: "Noto Sans SC"; font-size: 16px; font-weight: 400; line-height: 24px; } .a-paragraph strong { color: #222222; } #fc_6sp figure img{height:380px; } #fc_6sp .technology-area .section { padding-top: 80px; } #fc_6sp .hd01 { font-size: 44px; text-align: center; line-height: 1.4; margin-bottom: 40px; padding-bottom: 45px; color: #122889; font-weight: bold; position: relative; text-align: center; } #fc_6sp .hd01:before { bottom: 0; content: ""; width: 2px; height: 37px; background-color: #122889; position: absolute; left: 0; right: 0; margin: 0 auto; } #fc_6sp .technology-area .txt02 { margin-bottom: 40px; text-align: center; } #fc_6sp .technology-area .txt02 span { font-size: 40px;line-height: 1.4; background: rgb(9, 110, 178); background: linear-gradient(45deg, rgb(9, 110, 178) 0%, rgb(18, 40, 137) 74%, rgb(18, 40, 137) 100%); background-clip: border-box; -webkit-background-clip: text; color: transparent; display: inline-block; font-weight: bold; letter-spacing: 1px; } #fc_6sp .technology-area .txt03 { font-size: 15px; font-weight: bold; } #fc_6sp .technology-area .btm70 { margin-bottom: 70px !important; } #fc_6sp .technology-slider { width: 700px; background: #fafafa; margin: 0 auto; padding-bottom: 50px; } #fc_6sp .technology-slider .pic { text-align:center;} #fc_6sp .technology-slider .pic img { height: 360px; width: auto; } .technology-txt-box { box-sizing: border-box; padding: 40px 20px 0; } .technology-txt01 { margin-bottom: 30px; text-align: center; } .technology-txt01 span { font-size: 32px; line-height: 1.4; color: rgb(9, 110, 178); } .technology-txt02 { margin-bottom: 20px; text-align: center; } .technology-txt02 span { font-size: 18px; color: rgb(16, 104, 166); } .features-area { padding-top: 100px; } .fadeIn.is-show { opacity: 1; } .fadeIn { opacity: 0; transition: 1s; } #fc_6sp .main-area, .main-area01 { box-sizing: border-box; margin: 0 auto; max-width: 1120px; padding: 0 20px; width: 100%; } .features-area-inr { display: flex; flex-wrap: wrap; } .features-area-inr .features-box { margin-bottom: 20px; background-color: #fafafa; width: 49.5%; } .features-area-inr .features-box:nth-child(2n+1) { margin-right: 0.5%; } .features-area-inr .features-box .features-txt-box { box-sizing: border-box; padding: 40px 10px 30px; } .features-image { text-align: center; display: block; } .spec-area-inr { align-items: center; display: flex; flex-wrap: wrap; } .features-area-inr .features-box .features-txt-box .features-txt01 { margin-bottom: 20px; text-align: center; } .features-area-inr .features-box .features-txt-box .features-txt01 span { font-size: 12px; border-bottom: 1px solid #122889; color: #122889; font-weight: bold; } .features-area-inr .features-box .features-txt-box .features-tit { font-size: 20px; margin-bottom: 15px; color: #122889; text-align: center; height: 34px; font-weight: bold; } .features-area-inr .features-box .features-txt-box .features-txt02 { font-size: 15px; font-weight: bold; text-align: center; height: 25.5px; } .features-image img { height: 407px; width: 712px; object-fit: cover; } .spec-area-inr .spec-box:nth-child(2n+1) { margin-right: 0.5%; } .spec-area-inr .spec-box { margin-bottom: 20px; background-color: #fafafa; box-sizing: border-box; padding: 38px 20px 40px; display: flex; width: 49.5%; } .spec-area-inr .spec-box .spec-width { align-items: center; display: flex; margin: 0 auto; max-width: 580px; width: 100%; min-height: 242.8px; clear: both; } .spec-area-inr .spec-box .spec-box-inr:first-child { box-sizing: border-box; padding-right: 25px; text-align: center; width: 45%; } .spec-area-inr .spec-box .spec-box-inr .spec-tit { font-size: 25px; line-height: 1.4; margin-bottom: 30px; color: #122889; font-weight: bold; } .txt01 { font-size: 14px; } .btm65 { margin-bottom: 65px !important; } .round-list li { font-size: 14px; box-sizing: border-box; font-weight: bold; padding-left: 15px; position: relative; background:none !important;} .round-list li:before { content: ""; display: block; width: 12px; height: 12px; background-color: #92cccd; border-radius: 30px; position: absolute; left: 0; top: 6px; } #fc_6sp .btn02 { font-size: 28px; line-height: 1.4; background: rgb(146, 204, 205); background: linear-gradient(90deg, rgb(146, 204, 205) 0%, rgb(0, 82, 159) 100%); border-radius: 30px; box-sizing: border-box; color: #fff; display: block; font-weight: bold; line-height: 1.7; padding: 6px 5px 7px; margin: 0 auto;text-align: center; transition-duration: 0.5s; width: 100%; } #jr_6p .section { padding-top: 40px; } #jr_6p .main-area { box-sizing: border-box; margin: 0 auto; } .productsSection #jr_6p article div p { font-style: normal; } .btm65 { margin-bottom: 65px !important; } .hd06 { font-size: 44px; line-height: 1.4; margin-bottom: 20px; color: #122889; font-weight: bold; } .fadeIn { opacity: 0; transition: 1s; } .btm60 { margin-bottom: 60px !important; } .fadeIn.is-show { opacity: 1; } .basic-clm02.accessories-detail { margin-bottom: 70px; align-items: flex-start; } .basic-clm02 { align-items: center; display: flex; flex-wrap: wrap; margin: 0 -1%; margin-bottom: 0px; } .basic-clm02.accessories-detail .basic-clm02-inr:nth-child(1) { box-sizing: border-box; padding-right: 55px; width: 34%; } .basic-clm02 .basic-clm02-inr { margin: 0 1%; width: 48%; } .hd10 { font-size: 20px; color: #122889; font-weight: bold; margin-bottom: 5px; } .basic-clm02.accessories-detail .accessories-detail-img { margin-bottom: 5px; text-align: center; } #jr_6p p.txt08 { font-size: 15px; } .basic-clm02.accessories-detail .table01 { margin-bottom: 20px; width: 100%; border-collapse: collapse; border-spacing: 0; } .table01 th { font-size: 16px; background-color: #fafafa; border-right: 1px solid #c8c8c8; color: #122889; font-weight: bold; line-height: 1.3; padding: 7px 10px; width: 40%; } .table01 td { padding: 7px 10px 7px 25px; width: 60%; } .table01 th, .table01 td { border-bottom: 1px solid #c8c8c8; box-sizing: border-box; } #jr_6p p.txt05 { font-size: 12px; } .basic-clm02.accessories-detail .table01 caption { font-size: 20px; font-weight: bold; padding: 12px 10px; background: linear-gradient(90deg, rgb(8, 110, 180) 0%, rgb(18, 40, 137) 74%, rgb(18, 40, 137) 100%); border-bottom: 1px solid #c8c8c8; border-top: 1px solid #c8c8c8; box-sizing: border-box; color: #fff; } .basic-clm02.accessories-detail .table01 th, .basic-clm02.accessories-detail .table01 td { font-size: 15px; text-align: left; padding: 17px 10px 17px 30px; } @media only screen and (max-width: 768px) { #fc_6sp figure { text-align: center; margin: 20px auto 0; width: 70%; } #fc_6sp figure img { height:auto;} #fc_6sp .technology-area .section { padding-top: 20px; } #fc_6sp .hd01 { font-size: 25px; padding-bottom: 20px; } #fc_6sp .hd01:before { height: 20px; } #fc_6sp .txt02 { margin-bottom: 24px; } #fc_6sp .technology-area .txt02 span { font-size: 20px; } #fc_6sp .technology-area .btm70 { margin-bottom: 5px !important; } #fc_6sp .technology-slider { width:100%;} #fc_6sp .technology-slider .pic img { height:auto;} .technology-txt-box .technology-txt01 { margin-bottom: 10px; } .technology-txt-box .technology-txt01 span { font-size: 18px;} .technology-txt-box .technology-txt02 { margin-bottom: 10px;} .technology-txt-box .technology-txt02 span { font-size: 14px; } .features-area { padding-top: 48px; } .features-area-inr .features-box .features-txt-box .features-tit { font-size: 16px; } .features-area-inr .features-box .features-txt-box .features-txt02 { font-size: 12px; } .features-area-inr .features-box { margin: 0 0 10px; margin-right: 0px; width: 100%; } .features-image img { height: 231px; width: 100%; } #fc_6sp figure.features-image { margin:0 auto;width:100%;} .spec-area-inr .spec-box { margin: 0 0 20px; margin-right: 0px; margin-bottom: 20px; width: 100%; } .spec-area-inr .spec-box { padding: 25px 10px 30px; margin-bottom: 10px; } .spec-area-inr .spec-box .spec-width { align-items: center; display: flex; margin: 0 auto; max-width: 580px; width: 100%; min-height: 160.4px; } .spec-area-inr .spec-box .spec-box-inr .spec-tit { font-size: 16px; margin-bottom: 15px; } .spec-area-inr .spec-box .spec-box-inr:first-child { width: 30%; } .spec-area-inr .spec-box .spec-box-inr:last-child { width: 70%; } #fc_6sp .round-list li { font-size: 12px; box-sizing: border-box; font-weight: bold; padding-left: 15px; position: relative; letter-spacing: normal; } .btm65 { margin-bottom: 30px !important; } #jr_6p .section { padding-top: 40px; } .basic-clm02.accessories-detail .basic-clm02-inr:nth-child(1), .basic-clm02.accessories-detail .basic-clm02-inr:nth-child(2) { padding-right: 0; width: 100%; } .basic-clm02.accessories-detail .basic-clm02-inr:nth-child(1) { margin-bottom: 30px; } .basic-clm02.accessories-detail .basic-clm02-inr .table01 th, .basic-clm02.accessories-detail .basic-clm02-inr .table01 td { text-align: center; padding: 7px 10px; } .table01 th { border-right: none; } .table01 th, .table01 td { display: block; width: 100%; } }