@charset "utf-8"; @media screen and (max-width: 767px){ body { min-width: 320px; padding: 0; font-size: 100% !important; } html,body { -webkit-text-size-adjust: 100%; } img { width: 100%; height: auto; } #contents { width: 100%; min-width: inherit; margin: 0; } #contents p,#contents form,#contents input,#contents textarea,#contents dl, #contents ul,#contents ol,#contents table{ font-size:90%; } /**************************** breadcrumbs ***************************/ #breadcrumbs { display: none; } /****************************** h1Area ********************************/ .h1Area { width: 100%; height: auto; min-width: inherit; min-height: inherit; } #contents .h1Area { width: 100%; height: auto; min-width: inherit; min-height: inherit; } #contents .h1Area.products { background: url(/products/images/bg_h1.jpg) no-repeat center top; background-size: auto 150px; } #contents .h1Area h1 { width: auto; font-size: 150%; padding: 45px 10px 43px; } .h1Area.smallHeading h1 { width: auto; margin: 0 auto; padding: 10px 18px 9px; font-size: 140%; } /****************************** h1 - h5 ******************************/ #contents h2.textHeader { margin: 0 0 10px 0; font-size: 110%; } #contents h2.centerHeading { margin: 0 0 40px 0; font-size: 120%; } #contents h2.borderHeader { font-size: 120%; } #contents h3.textHeader { font-size: 110%; } /****************************** localNavi ******************************/ #localNavi li, #localNavi p { font-size: 100% !important; } #localNavi .topLevelCategory { display: block; font-size: 120% !important; border-bottom: none; font-weight: bold; margin-bottom: 0; } #localNavi .topLevelCategory.current { border-bottom: none; padding: 32px 13px; } #localNavi .topLevelCategory a { display: block; width: 100%; color: #fff; } #contents #localNavi ul { /*margin-bottom: 25px;*/ margin-bottom: 0px; } #localNavi ul li { display: block; border-bottom: #ccc 1px solid; } #localNavi li a { color: #000 !important; } #localNavi ul li a { display: block; padding: 15px 28px 15px 14px; text-decoration: none; } #localNavi ul li a:hover { } #localNavi ul li.current > a { } #localNavi ul li.open { } #localNavi ul li.open > a { } #localNavi ul li.open ul { margin-bottom: 0; border-top: #ccc 1px solid; } #localNavi ul li.open ul li { font-size: 100%; } #localNavi ul li.open ul li a { display: block; padding: 15px 28px 15px 27px; text-decoration: none; } #localNavi .contact { display: none; } /****************************** contents ******************************/ .child #contents { margin-top: 30px; } .child #contentsInner { /*padding-top: 20px;*/ padding: 0 !important; } /*.child.wide.event #contents #contentsInner { width: 100%; padding-top: 20px; }*/ .contentsBlock { padding: 0 12px; margin-bottom: 60px; } #contents p { font-size: 90%; } #contents a { color: #203bb6; } #contents #contentsMain, #contents #localNavi { width: auto; float: none; } #contents #contentsMain { padding: 0 20px 40px; } #contents .contentsPadding { padding: 0; } /* #contents .contentsPadding { padding: 0; } */ h2.textHeader { font-size: 140%; margin: 0 12px 25px; } h2.hasLink span { float: none; } h2.hasLink a { display: none; } /****************************** list ******************************/ #contents .anchorList.anchor2nd { width: auto; margin: 0 auto 20px; } #contents .anchorList.anchor2nd .col2Block .col { width: 100% !important; margin-left: 0 !important; } #contents .anchorList.anchor2nd .col2Block .col a { display: table; width: 100%; height: 80px; color: #fff !important; background: #00adb0; box-sizing: border-box; padding: 5px 15px 5px 150px; font-size: 130%; font-weight: normal; text-decoration: none; } #contents .anchorList.anchor2nd .col2Block .col.excavators a { background: #00adb0 url(/products/images/bg_anc_ph01.png) no-repeat -30px top; background-size: auto 80px; } #contents .anchorList.anchor2nd .col2Block .col.cranes a { background: #00adb0 url(/products/images/bg_anc_ph02.png) no-repeat -30px top; background-size: auto 80px; } #contents .anchorList.anchor2nd .col2Block .col a:hover { background-color: #028484 !important; } #contents .anchorList .col2Block .col a span { background-size: 22px 12px; padding-right: 25px; } #contents .linkList a.icOtherW { background: url(/shared/images/ic_other.png) no-repeat right 0.5em; } /****************************** Definition List ******************************/ #contents .dataList dl > dt { float: none; width: auto; display: block; } #contents .dataList dl > dd { float: none; width: auto; display: block; } #contents #contentsMain .dataList dl > dd { float: none; width: auto; display: block; } /****************************** table ******************************/ #contents .normalTable > tbody > tr > th, #contents .normalTable > tbody > tr > td { padding:8px 6px 8px 6px; } #contents .normalTable.typeRes > tbody > tr >th, .normalTable.typeRes > tbody > tr >td { display: block; width: 100%; box-sizing: border-box; float: left; } .listTable th, .listTable td { padding:5px 5px 4px; } /****************************** column ******************************/ #contents .col2Block .col, #contents .col3Block .col, #contents .anchorList .col2Block .col, #contents .anchorList .col3Block .col { width: 100% !important; float: none; margin: 0 0 20px !important; } #contents .anchorList .col2Block .col, #contents .anchorList .col3Block .col { margin: 0 0 10px !important; } #contents .col2Block .col.smallMargin, #contents .col3Block .col.smallMargin { margin-bottom: 10px !important; } #contents .col4Block .col { width: 50%; float: left; margin: 0 -1px 1px 1px; } #contents .col4Block .col .colInner { width: 100% !important; display: table; } .insAnchor .icon { width: 40px !important; height: auto !important; margin: 0 auto; } #contents .col4Block .col:nth-child(odd) { margin: 0 0 1px 0; clear: both; } #contents .col:last-child { margin-bottom: 0 !important; } #contents .col2Block .col.tabContBlock { margin-bottom: 20px !important; } #contents .catalogBlock .ph { width: 20%; float: left; } #contents .catalogBlock .detail { width: 70%; float: right; } #contents .catalogBlock .detail p:not(.textBtn) { font-size:75% !important; margin-bottom: 20px !important } /* --------------------col 3 flex銇撱亾銇嬨倝----------------------------- */ #contents .col3BlockFlex{ padding: 0; margin-bottom: 10px; } #contents .col3BlockFlex .col{ width: 100%; margin-bottom: 10px; } /* --------------------col 3 flex銇撱亾銇俱仹----------------------------- */ /****************************** linkBlock ******************************/ #contents .sectionInner .link4Block { width: 100%; } #contents .link4Block .linkBox { width: 50%; float: left; margin: 0 0 1px; height: auto; } #contents .link4Block .linkBox:first-child, #contents .link4Block .linkBox:nth-child(5) { margin: 0; } #contents .link4Block .linkBox:nth-child(odd) { margin: 0 1px 1px -1px; } #contents .link4Block .linkBox .linkText > span { padding-right: 0; } #contents .link4Block .linkBox .linkText { height: auto; padding: 7px; font-size: 75%; } #contents .link4Block .linkBox .linkText:after { right: 8px; border-width: 3px 0px 3px 5px; } #contents .link4Block .linkBox .readText { font-size: 70%; padding: 7px; } #contents .anchorList .col4Block .col a span { font-size: 110% !important; } /****************************** btn ******************************/ .detailBtn { border: #ccc 1px solid; font-size: 120% !important; } .detailBtn a { color: #000 !important; } #contents .categorySection { min-width: inherit; } #contents .categorySection .sectionInner { width: auto; padding: 20px 10px 0; } .corporate.wide #contents .categorySection .sectionInner, .dealer.wide #contents .categorySection .sectionInner { width: auto; padding: 20px 0; } /****************************** borderBlock **************************/ #contents .acrobatBlock { margin: 30px auto 10px !important; padding: 10px !important; } #contents .acrobatBlock .ph { display: block; margin: 0 1%x 0 0 ; width: 30%; } #contents .acrobatBlock .detail { width: 68% !important; } #contents .acrobatBlock .detail p.textSmall { margin: 0 !important; } /****************************** 2nd layout ******************************/ #contents .categoryBlock { width: auto; min-height: 550px; padding-bottom: 33px; background: none !important; } #contents .categoryBlock h2 { width: auto; color: #fff; font-size: 195%; float: none; padding: 0 0 15px 0; } #contents .categoryBlock h2 span { display: block; font-size: 55%; font-weight: normal; margin-top: 5px; } #contents .categoryBlock ul.boxLink { width: auto; padding-top: 0; float: none; } #contents .categoryBlock ul.boxLink li { width: 49.7%; border-right: #333f48 1px solid; border-bottom: #333f48 1px solid; float: left; } #contents .categoryBlock ul.boxLink li a { display: table; width: 100%; height: 62px; color: #fff !important; background: rgba(25, 31, 36, 0.8); box-sizing: border-box; padding: 9px 30px 9px 15px; font-size: 90%; font-weight: normal; text-decoration: none; } #contents .categoryBlock ul.boxLink li a:after { border-width: 4px 0px 4px 6px; margin-top: -4px; } #contents .categoryBlock ul.boxLink li a.icOtherW:after { right: 8px; } #contents ul.boxList > li > a:after { border-width: 4px 0px 4px 6px; margin-top: -4px } #contents .categoryBlock ul.boxLink li a span:after { right: -20px; } #contents .categoryBlock ul.boxLink li a:hover { background: #00adb0; } #contents .categoryBlock ul.boxLink li a span { padding-right: 0; } #contents .sectionInner.cranes { background: none; min-height:inherit; } #contents .categoryBlock.col3 ul.boxLink,#contents .categoryBlock.col3 ul.boxLink li { width: 100%; float: none; } #contents .tisCol { width: auto; margin:0 auto; } #contents .tisSection { min-width: auto; background: #e6e6e6; min-width: inherit; } #contents .tisSection .sectionInner { width: auto; min-height: inherit; margin: 0 auto; padding: 15px 10px; } #contents .tisSection .sectionInner .tisText { padding-top: 0; } /****************************** general ******************************/ #contents .detailBtn .icLink { display: block; background:url(images/sp/common/ic_link.png) no-repeat 98% 50%; padding: 11px 17px 11px 10px; background-size: 8px 23px; } #contents .textResCenter { text-align: center !important; } #contents .textResLeft { text-align: left !important; } #contents .floatLeft, #contents .floatRight { width:auto !important; float:none !important; margin-right:0px !important; margin-left:0px !important; } #contents .floatLeft > img, #contents .floatRight > img { width:100%; height:auto; } #contents .textHeader .country { display: inline-block; float: none; margin: 0 0 5px 10px; } .icPdf { padding: 1px 4px; } .icZoom { background:url(images/common/ic_zoom.png) no-repeat 0 0.6em; background-size: 14px 14px; padding-left: 20px; } .icOtherW { background:url(/shared/images/ic_other.png) no-repeat right 0.1em; padding: 0 22px 0 0; } #contents .noResTable { width: 100%; overflow-y: hidden; border: 1px solid #ddd; -ms-overflow-style: -ms-autohiding-scrollbar; } #contents .noResTable { overflow-x: auto; } #contents .noResTable > table { max-width: 460px !important; } .caption { text-align: center; } .pcVis { display: none; } .js-usemapWrapper .pcVis{ display:block; } .spVis { display: block; } #contents .textResNormal { font-size: 100% !important} #contents .resWidth100 { width: 100% !important;} .img100 { width: 100% !important; height: auto !important;} .img95 { width: 95% !important; height: auto !important;} .img90 { width: 90% !important; height: auto !important;} .img85 { width: 85% !important; height: auto !important;} .img80 { width: 80% !important; height: auto !important;} .img75 { width: 75% !important; height: auto !important;} .img70 { width: 70% !important; height: auto !important;} .img65 { width: 65% !important; height: auto !important;} .img60 { width: 60% !important; height: auto !important;} .img55 { width: 55% !important; height: auto !important;} .img50 { width: 50% !important; height: auto !important;} .img45 { width: 45% !important; height: auto !important;} .img40 { width: 40% !important; height: auto !important;} .img35 { width: 35% !important; height: auto !important;} .img30 { width: 30% !important; height: auto !important;} .img25 { width: 25% !important; height: auto !important;} .img20 { width: 20% !important; height: auto !important;} .img15 { width: 15% !important; height: auto !important;} .img10 { width: 10% !important; height: auto !important;} .img05 { width: 5% !important; height: auto !important;} #contents .resWidthAuto { width: auto !important; } #contents .textSmall { font-size:75% !important; } .pcBr{display:none;} .spBr{display:inline;} /********** * 161015 custom * **********/ /* #contents .js-usemapWrapper .pcVis { float:none; margin-bottom:30px !important; } #contents .js-usemapWrapper .pcVis .js-useMap img { width:100%; height:100%; } #contents #contentsAD{ padding:0 10px; }*/ /* news */ /*#contents .newsBlockInner .newsList dl { padding: 20px; border-bottom: 1px solid #e6e6e6; } .news .newsList dl > dt { margin:0 0 3px 0 !important; font-size:90%; } .news .newsList dl > dd { width: 100%; }*/ /* dealer + corporate */ /*.corporate #contents .categorySection .sectionInner, .dealer #contents .categorySection .sectionInner { width: 100%; margin: 0 auto; padding:40px 20px 30px !important; } .corporate #contents .categorySection .linkBox, .dealer #contents .categorySection .linkBox{ width:100%; float:none; margin:0 0 10px 0; } .corporate #contents .categorySection .linkText, .dealer #contents .categorySection .linkText{ display: table; height: 60px; vertical-align:middle; font-size: 100%; margin:0; padding:0; } .corporate #contents .categorySection .linkText:after, .dealer #contents .categorySection .linkText:after{ right:15px; } .corporate #contents .categorySection .current .linkText, .dealer #contents .categorySection .current .linkText{ } .corporate #contents .categorySection .linkText span, .dealer #contents .categorySection .linkText span{ text-align:center; width:auto; }*/ /* products */ /*.products #contents .categoryBlock { min-height:inherit; } .products #contents .sectionInner .cranes { min-height:inherit; } .products #contents .categoryBlock div.cranesLink a { width: 100%; margin-top: 0; padding: 20px; float: none; box-sizing: border-box; } .products #contents .categoryBlock div.cranesLink a:hover { color: #fff; background: #00a7ac; } .products #contents .categoryBlock div.cranesLink p { font-size: 130%; font-weight: bold; text-decoration: underline; } .products #contents .categoryBlock div.cranesLink p span { padding: 0 22px; background: url(../images/ic_other_top.png) no-repeat right center; }*/ /* ad */ /*.ad #contents .categoryBlock div.cranesLink a { width: 100%; margin-top: 0; padding: 20px; float: none; box-sizing: border-box; }*/ /* parts */ /*.parts #contents .contentsPadding { padding: 0; width: 90%; margin: 0 auto 30px; } .parts #contents .contentsPadding .contentsRead { color: #00a7ac; margin-bottom: 20px; text-align: center; } .parts #contents .contentsPadding .contentsRead p { font-size: 120%; line-height: 1.4; margin-bottom: 12px; } .parts #contents .contentsPadding .contentsImg { margin: 20px 0 30px; } .parts #contents .contentsPadding h3 { font-size: 110%; margin-bottom: 10px; } .parts #contents .contentsPadding ul { padding-left: 20px; } .parts #contents .contentsPadding ul li { list-style: disc; } .parts #contents .contactBtn { font-size: 100%; padding: 20px; margin: 30px 0 0 0; }*/ /* 灏戙仾銇勬儏鍫遍噺銇殯銇敾闈笅銇嚭銈嬩綑鐧藉绛 */ /*body.products, body.dealer, body.corporateTop { height: 100%; background:#00adb0; }*/ /* global navi */ .subMenuWrapper .icOtherW { background: url(/shared/images/ic_other.png) no-repeat right center; } /* Authorized Distributors */ /*.ad #contents .categoryBlock { position: static; overflow: visible; background: none; min-height:inherit; padding-bottom: 0; } .ad #contents .excavators { margin-bottom: 0; } .ad #contents .categoryBlock .col{ width: auto; } .ad #contents .js-usemapWrapper{ padding-bottom:0px; } .ad #contents .excavators H2, .ad #contents .cranes H2 { position: static; background: none; width: auto; height: auto; top: auto; left: auto; } .ad #contents H2 > span { width: auto; } .ad #contents .categoryBlock .colRight { width: auto; float: none; position: relative; } .ad #contents .categoryBlock .colRight ul { width: auto; float: none; padding: 10px 0 0 0 !important; } .ad #contents .categoryBlock .colRight ul li{ width: 48%; float: left; margin-right: 1%; } .ad #contents .categoryBlock .colRight ul li a { width: auto; } .ad #contents .categoryBlock h3 { color: #fff; font-size: 120%; margin-bottom: 10px; }*/ #contents .width600Wrap,#contents .oldsiteWrap{ width: 100%; /*margin: 0 auto 30px;*/ } /* 銈儐銈淬儶銉堛儍銉椼伄銉兂銈暣褰 ============================= */ #contents .categorySection .sectionInner{ width: auto; margin: 0 auto; padding:40px 20px 30px !important; } #contents .categorySection .sectionInner .link4Block .linkBox{ width:100%; float:none; margin:0 0 5px 0; } #contents .categorySection .sectionInner .link4Block .linkText{ display: table; height: 60px; vertical-align:middle; font-size: 100%; margin:0; padding:0; } #contents .categorySection .sectionInner .link4Block .linkText:after{ right:15px; } #contents .categorySection .sectionInner .link4Block .linkText span{ text-align:center; width:auto; } /********** * 190712 Add wechat qrcode * **********/ /*#headerOptions > #headerOptionsInner{ position: relative; overflow: visible; }*/ #headerOptions > #headerOptionsInner > ul > li:first-child{display: none;} #headerOptions > #headerOptionsInner > ul li a.xinshijueSite{ display: block; padding: 14px 0; text-align: center; border: #fff 1px solid; color: #fff !important; border-radius: 16px; width: 70%; margin: 0 auto; } /*#headerOptions .wechatSite{ padding-left: 24px; background:url(/shared/images/ico_wechat.png) no-repeat left center; background-size: 19px; }*/ #headerOptions .globalSite{ padding-left: inherit; background: none; /*background-size: 15px;*/ } #headerOptions .xinshijueSite{ padding-left: inherit; background: none; /*background-size: 18px;*/ } /*#headerOptions > #headerOptionsInner .wechatSite span{display: none;} #headerOptions > #headerOptionsInner .wechatSite:hover span{ display:block !important; position: absolute; top: 20px; right: 336px; padding-top: 20px; z-index: 1000; } #headerOptions > #headerOptionsInner .wechatSite:hover span::after{ content: ""; position: absolute; top: 10px; left: calc(50% - 10px); width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; } #headerOptions > #headerOptionsInner .wechatSite:hover span img{ display: block; background-color: #ffffff; box-shadow:0px 0px 5px 1px rgba(0,0,0,0.6); }*/ /*#footer #footerGlobal{position: relative;}*/ #footer #footerGlobal #wechatFooter{ position: relative; text-align: center; display: block; bottom: inherit; right: inherit; padding: 10px 15px 15px 15px; box-sizing: border-box; background-color: inherit; } #footer #footerGlobal #wechatFooter p{ display: block; text-align: center; vertical-align: middle; font-size: 80%; letter-spacing: 0.1em; /*color: #ffffff;*/ } #footer #footerGlobal #wechatFooter p:first-child{ background-color: rgba(0,84,87,0.25); display: inline-block; padding: 3px 5px; margin: 0 auto 5px; } #footer #footerGlobal #wechatFooter p img{ vertical-align: top; width: 30%; min-width: 100px; padding-left: inherit; } /* =================================================================== responsive for TABLE =================================================================== */ #contents .responsive_table::before { content: "*涓嬭堪琛ㄦ牸锛屽彲浠ユí鍚戠Щ鍔ㄥ睆骞曠‘璁ゅ唴瀹广€?; font-size: 12px; display: block; margin-bottom: 5px; } #contents .responsive_table{ width: 100%; margin-bottom: 5px; overflow: scroll; overflow-y:hidden; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } #contents .responsive_table::-webkit-scrollbar{ height: 10px; border-radius: 12px; background-color: #e3e3e3; } #contents .responsive_table::-webkit-scrollbar-thumb{ background-color: #c3c3c3; border-radius: 12px; } #contents .responsive_table::-webkit-scrollbar-thumb:hover{ background-color: #aaa; } #contents .responsive_table table.normalTable{ border-collapse:collapse; } #contents .responsive_table table.normalTable th, #contents .responsive_table table.normalTable td{ padding: 8px 10px; white-space:nowrap; } /* =================================================================== sns icon =================================================================== */ #contents .snsList{ padding-top: 0px; } #contents .snsList li{ width: 49%; } #contents .snsList li:nth-child(even){ margin-right: 0; } #contents .snsList li a{ height: 30px; font-size: 90%; line-height: 30px; } #contents .snsList li a img{ width: 30px; margin-right: 8px; } #contents .kcmcList li{ font-size: 90%; line-height: 30px; width: 100%; margin-right:0; color:#00a7ac; float:none; } #contents .kcmcList li img{ width: 30px; padding-right: 8px; } #contents .kcmcList p img{ display:block; width:50%; max-width: 300px; margin: 0 auto; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.4); } }