@charset "utf-8"; /****************************** PC銉籗P鍏遍€ ******************************/ /* 鐗归泦 ========================================= */ /*img{ width: 100%; height: 100%; vertical-align: bottom; }*/ article{ min-width:1200px; background: url(../images/bg_line.gif) repeat-y center top; background-size: auto; padding-bottom: 80px; } article p{ position:relative; z-index:10 /* text-align: left !important; text-justify: inter-ideograph;*/ } /* 銈裤偆銉堛儷 ------------------------------ */ .pickup #pickupTitle{ width:100%; min-width:1200px; margin-bottom:50px; padding:60px 0; background:#00a7ac no-repeat center center; background-size:cover; } .vol30JP #pickupTitle{background-image: url(../images/bg_pickup.jpg);} .pickup #pickupTitle #pickupBox{ width:1160px; padding:0 20px; margin: 0 auto; color: #ffffff; text-align: center; } .pickup #pickupTitle #pickupBox h1{ font-size:48px; line-height:60px; letter-spacing:3px; font-weight:800; margin-bottom:20px; } .pickup #pickupTitle #pickupBox h1 span{ font-size:25px; display: block; line-height:1.8; letter-spacing:2px; font-weight:500; } /* 瑷樹簨銈ㄣ儶銈 ------------------------------ */ /*.pickup .floatL{ float: left; } .pickup .floatR{ float: right; } */ .pickup .pickupWrap{ width:1160px; padding:0 20px; margin:0 auto; } .pickup .pickupWrap #pickupCopy{ text-align:center !important; width:940px; margin:0 auto; padding:20px 0; color:#00a7ac; font-weight:400; letter-spacing: 0.05em; background-color:#ffffff; margin-bottom:50px; line-height:2.4; font-size:15px; } .pickup .historyWrap{ width:1000px; margin:0 auto; font-size:14px; line-height:2.4; } .pickup .historyWrap h2{ font-size:18px; line-height: 1.6; margin-bottom: 10px; font-weight: 700; position:relative; z-index:10 } .pickup .historyWrap .historyBox01, .pickup .historyWrap .historyBox02, .pickup .historyWrap .historyBox04{ position:relative; width:940px; margin:0 auto 50px; } .pickup .historyWrap .historyBox02_custom{ margin:0 auto; } .pickup .historyWrap .historyBox01 .textL{ position: relative; float:left; width:440px; padding:20px 31px 10px 0; background: url(../images/allow_left.gif) #ffffff no-repeat right center; z-index: 10; } .pickup .historyWrap .historyBox01 .textL::after{ content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:30px; z-index:-1; } .pickup .historyWrap .historyBox02 .textR{ position: relative; float:right; width:437px; padding:20px 0 10px 31px; background: url(../images/allow_right.gif) #ffffff no-repeat left center; z-index: 10; } .pickup .historyWrap .historyBox02 .textR::after{ content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1; } .pickup .historyWrap .historyBox01 .imgR{ float:right; width:439px; padding-left:30px; } .pickup .historyWrap .imgR span, .pickup .historyWrap .imgL span, .pickup .historyWrap .historyBox03 p span, .pickup .coverImg span{ display: block; padding: 3px 0; text-align: center; font-size: 12px; } .pickup .coverImg span{ margin-bottom: 20px; } .pickup .historyWrap .historyBox02 .imgL{ float:left; width:440px; padding-right:30px; } .pickup .historyWrap .historyBox03{ width: 300px; background-color: #ffffff; float: left; margin:0 49px 50px 0; font-size: 13px; line-height: 2.4; } .pickup .historyWrap .historyBox03:first-child{ margin-left: 2px; } .pickup .historyWrap .historyBox03:nth-child(2){ /*margin: 30px 49px 50px 0;*/ margin: 0px 49px 50px 0; } .pickup .historyWrap .historyBox03:last-child{ /*margin: 60px 0 50px 0;*/ margin: 0px 0 50px 0; } .pickup .historyWrap .historyBox03_forCrane{ margin: 0 0 50px 0 !important; } .pickup .historyWrap .historyBox03 .textPack{ padding: 20px 0; position: relative; z-index: 10; } .pickup .historyWrap .historyBox03 .textPack::after{ content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1; } .pickup .mask{ height: 310px; overflow: hidden; margin: 0; } .pickup .coverStyle{ width: 100%; min-width: 1200px; margin: 0 auto 30px; height: 600px; } .pickup .coverImg .coverStyle{ margin: 0 auto; } .pickup .historyWrap .historyBox01-custom{ width: 970px; margin: 0 0 50px 30px; } .pickup .historyWrap .historyBox01-custom .imgR{ width:469px; } .pickup .historyWrap .historyBox04 #year1994, .pickup .historyWrap .historyBox04 #year2008, .pickup .historyWrap .historyBox04 #year2012{ background-color: #ffffff; padding: 30px 0 20px; z-index: 10; position: relative; } .pickup .historyWrap .historyBox04 #year2008, .pickup .historyWrap .historyBox04 #year2012{ margin-top:-30px; } .pickup .historyWrap .historyBox04 .floatL, .pickup .historyWrap .historyBox04 .floatR{ width: 445px; } .pickup .historyWrap .historyBox04 #year1994::after, .pickup .historyWrap .historyBox04 #year2008::after, .pickup .historyWrap .historyBox04 #year2012::after{ content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1; } .pickup .historyWrap .anotherBox{ border:1px solid #e6e6e6; background-color: #eeeeee; border-left: 0; box-sizing: border-box; padding: 20px 20px 0; } .pickup .historyWrap .anotherBox2{ /*border:1px solid #89e5e8;*/ border:1px solid #e6e6e6; background-color: #eeeeee; box-sizing: border-box; padding: 20px 20px 0; } .pickup .historyWrap .bigTopic{ font-size: 30px; line-height: 1.4; font-weight: 700; } /* Cover鐢诲儚 ================================== */ .pickup #coverImg1993{ background: url(../images/pht_1993_01.jpg) no-repeat center center; background-attachment: fixed; background-size: 100%; } .pickup #coverImg2008{ background: url(../images/pht_2008_01.jpg) no-repeat center center; background-attachment: fixed; background-size: 100%; } .pickup #coverImg2012{ background: url(../images/pht_2012.jpg) no-repeat center center; background-attachment: fixed; background-size: 100%; } /* 瑗挎殾琛ㄧず ================================== */ .pickup .historyWrap #year1930::after{background: url(../images/year_1930.gif) no-repeat right top;} .pickup .historyWrap #year1953::after{background: url(../images/year_1953.gif) no-repeat right top;} .pickup .historyWrap #year1967::after{ background: url(../images/year_1967.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year1980::after{ background: url(../images/year_1980.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year1989::after{ background: url(../images/year_1989.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year1993::after{background: url(../images/year_1993.gif) no-repeat right top;} .pickup .historyWrap #year1993_2::after{background: url(../images/year_1993.gif) no-repeat right top;} .pickup .historyWrap #year1994::after{background: url(../images/year_1994.gif) no-repeat right top;} .pickup .historyWrap #year1995::after{ background: url(../images/year_1995.png) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year1996::after{ background: url(../images/year_1996.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year1999::after{ background: url(../images/year_1999.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2003::after, .pickup .historyWrap #year2003_2::after{ background: url(../images/year_2003.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2005::after{ background: url(../images/year_2005.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2006::after, .pickup .historyWrap #year2006_2::after{ background: url(../images/year_2006.gif) no-repeat right top; } .pickup .historyWrap #year2007::after{background: url(../images/year_2007.gif) no-repeat right top;} .pickup .historyWrap #year2008_2::after{ background: url(../images/year_2008.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2008::after{background: url(../images/year_2008.gif) no-repeat right top;} .pickup .historyWrap #year2011::after{ background: url(../images/year_2011.png) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2011_2::after{ background: url(../images/year_2011.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2012::after{background: url(../images/year_2012.gif) no-repeat right top;} .pickup .historyWrap #year2013::after{ background: url(../images/year_2013.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2016_1::after, .pickup .historyWrap #year2016_2::after{ background: url(../images/year_2016.gif) no-repeat right top; background-size: 75%; } .pickup .historyWrap #year2016_3::after, .pickup .historyWrap #year2016_4::after{ background: url(../images/year_2016.gif) no-repeat right top; } .pickup .historyWrap #year2018_1::after{ background: url(../images/year_2018.gif) no-repeat right top; } .pickup .historyWrap .bgYear{ position: absolute; right: 30px; top: -80px; font-size:125px; color:#a6ebed; height:130px; line-height:130px; font-weight:blod; font-family:"Microsoft Yahei"; z-index:0 } .pickup ul.ayumiroll li{ width: 480px; } /****************************** PC闄愬畾 ******************************/ @media screen and (min-width: 768px){ } /****************************** SP闄愬畾 ******************************/ @media screen and (max-width: 767px){ article{ min-width:100%; background: none; padding:0 0 30px 0; } /* SP_銈裤偆銉堛儷 ------------------------------ */ .pickup #pickupTitle{ width:90%; min-width:90%; padding:50px 5%; margin-bottom:30px; } .pickup #pickupTitle #pickupBox{ width:100%; padding:0; } .pickup #pickupTitle #pickupBox #pickupMark{ font-size:15px; padding:2px; margin:0 auto 5px; } .pickup #pickupTitle #pickupBox #pickupMark span{ font-size:12px; } .pickup #pickupTitle #pickupBox h1{ font-size:28px; line-height:40px; margin-bottom:0px; letter-spacing:1px; } .pickup #pickupTitle #pickupBox h1 span{ font-size:15px; line-height:1.6; font-weight:500; /*display: block; letter-spacing:1px;*/ } /* SP_瑷樹簨銈ㄣ儶銈 ------------------------------ */ .pickup .pickupWrap{ width:90%; padding:0 5%; /*margin:0 auto;*/ } .pickup .pickupWrap #pickupCopy{ width:100%; padding:0; font-size: 13px; line-height: 2.0; margin-bottom:30px; /*text-align:left; margin:0 auto; color:#00a7ac; font-weight:300; background-color:#ffffff; font-size:15px;*/ } .pickup .historyWrap{ width:90%; font-size:14px; line-height:1.9; /*margin:0 auto;*/ } .pickup .historyWrap h2{ font-size:15px; /*line-height: 1.6; margin-bottom: 10px;*/ } .pickup .historyWrap .historyBox01, .pickup .historyWrap .historyBox02, .pickup .historyWrap .historyBox04{ width:100%; margin:0 auto 30px; /*position:relative;*/ } .pickup .historyWrap .historyBox02_custom{ /*margin:0 auto;*/ } .pickup .historyWrap .historyBox01 .textL{ float:none; width:100%; padding:15px 0 0 0; background: none; /*position: relative; z-index: 10;*/ } .pickup .historyWrap .historyBox01 .textL::after{ right:0; /*content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; z-index:-1;*/ } .pickup .historyWrap .historyBox02 .textR{ float:none; width:100%; padding:15px 0 0 0; background:none; /*position: relative; z-index: 10;*/ } .pickup .historyWrap .historyBox02 .textR::after{ /*content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1;*/ } .pickup .historyWrap .historyBox01 .imgR{ float:none; width:100%; padding-left:0px; } /*.pickup .historyWrap .imgR span, .pickup .historyWrap .imgL span, .pickup .historyWrap .historyBox03 p span, .pickup .coverImg span{ display: block; padding: 3px 0; text-align: center; font-size: 12px; } .pickup .coverImg span{ margin-bottom: 20px; }*/ .pickup .historyWrap .historyBox02 .imgL{ float:none; width:100%; padding-right:0px; } .pickup .historyWrap .historyBox03{ width: 100%; float: none; margin:0 0 30px 0; font-size: 14px; line-height: 1.9; /*background-color: #ffffff;*/ } .pickup .historyWrap .historyBox03:first-child{ margin-left: 0px; } .pickup .historyWrap .historyBox03:nth-child(2){ margin: 0 0 30px 0; } .pickup .historyWrap .historyBox03:last-child{ margin: 0 0 30px 0; } .pickup .historyWrap .historyBox03_forCrane{ margin: 0 0 30px 0 !important; } .pickup .historyWrap .historyBox03 .textPack{ padding: 15px 0 0; position: relative; z-index: 10; } .pickup .historyWrap .historyBox03 .textPack::after{ /*content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1;*/ } .pickup .mask{ height: auto; /*margin: 0; overflow: hidden;*/ } .pickup .coverStyle{ margin: 0 auto 20px; height: 0; padding-top: 40%; min-width: 100%; /*width: 100%;*/ } .pickup .historyWrap .historyBox01-custom{ margin: 0 0 30px 0; width: 100%; } .pickup .historyWrap .historyBox01-custom .imgR{ width:100%; } .pickup .historyWrap .historyBox04 #year1994, .pickup .historyWrap .historyBox04 #year2008, .pickup .historyWrap .historyBox04 #year2012{ padding: 20px 0 0; /*background-color: #ffffff; z-index: 10; position: relative;*/ } .pickup .historyWrap .historyBox04 #year2008, .pickup .historyWrap .historyBox04 #year2012{ margin-top:-20px; } .pickup .historyWrap .historyBox04 .floatL, .pickup .historyWrap .historyBox04 .floatR{ width: 100%; } .pickup .historyWrap .historyBox04 #year1994::after, .pickup .historyWrap .historyBox04 #year2008::after, .pickup .historyWrap .historyBox04 #year2012::after{ /*content: ""; display:block; width: 100%; height: 100%; position:absolute; top:0; right:0; z-index:-1;*/ } .pickup .historyWrap .anotherBox{ border-left: 1px solid #e6e6e6; padding: 15px 20px 20px; /*border:1px solid #e6e6e6; box-sizing: border-box;*/ } .pickup .historyWrap .anotherBox2{ /*border:1px solid #89e5e8; box-sizing: border-box;*/ padding: 20px; } .pickup .historyWrap .bigTopic{ font-size: 20px; margin-bottom: 15px; } /* Cover鐢诲儚 ================================== */ .pickup #coverImg1993{ background: url(../images/pht_1993_01.jpg) no-repeat center center; background-attachment: inherit; background-size: 100%; } .pickup #coverImg2008{ background: url(../images/pht_2008_01.jpg) no-repeat center center; background-attachment: inherit; background-size: 100%; } .pickup #coverImg2012{ background: url(../images/pht_2012.jpg) no-repeat center center; background-attachment: inherit; background-size: 100%; } /* 瑗挎殾琛ㄧず ================================== */ .pickup .historyWrap #year1930::after{background: url(../images/year_1930.gif) no-repeat right top;} .pickup .historyWrap #year1953::after{background: url(../images/year_1953.gif) no-repeat right top;} .pickup .historyWrap #year1967::after{ background: url(../images/year_1967.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year1980::after{ background: url(../images/year_1980.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year1989::after{ background: url(../images/year_1989.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year1993::after{background: url(../images/year_1993.gif) no-repeat right top;} .pickup .historyWrap #year1993_2::after{background: url(../images/year_1993.gif) no-repeat right top;} .pickup .historyWrap #year1994::after{background: url(../images/year_1994.gif) no-repeat right top;} .pickup .historyWrap #year1995::after{ background: url(../images/year_1995.png) no-repeat right top; background-size:auto; } .pickup .historyWrap #year1996::after{ background: url(../images/year_1996.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year1999::after{ background: url(../images/year_1999.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2003::after, .pickup .historyWrap #year2003_2::after{ background: url(../images/year_2003.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2005::after{ background: url(../images/year_2005.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2006::after, .pickup .historyWrap #year2006_2::after{ background: url(../images/year_2006.gif) no-repeat right top; } .pickup .historyWrap #year2007::after{background: url(../images/year_2007.gif) no-repeat right top;} .pickup .historyWrap #year2008_2::after{ background: url(../images/year_2008.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2008::after{background: url(../images/year_2008.gif) no-repeat right top;} .pickup .historyWrap #year2011::after{ background: url(../images/year_2011.png) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2011_2::after{ background: url(../images/year_2011.gif) no-repeat right top; background-size:auto; } .pickup .historyWrap #year2012::after{background: url(../images/year_2012.gif) no-repeat right top;} .pickup .historyWrap #year2013::after{ background: url(../images/year_2013.gif) no-repeat right top; background-size: auto; } .pickup .historyWrap #year2016_1::after, .pickup .historyWrap #year2016_2::after{ background: url(../images/year_2016.gif) no-repeat right top; background-size: auto; } .pickup .historyWrap #year2016_3::after, .pickup .historyWrap #year2016_4::after{ background: url(../images/year_2016.gif) no-repeat right top; } .pickup .historyWrap .bgYear{ /*text-indent: -9999px; position: absolute; right: 0; top: 0;*/ } .pickup ul.ayumiroll li{ width: 320px; } } @media screen and (max-width: 360px){ }