.museum-intro { overflow: hidden; position: relative; height: 880px; background: url(/static/images/intro.jpg) no-repeat 50% 0; background-size: cover; }
.museum-intro .intro { position: absolute; top: -52px; right: 0; bottom: 0; left: 0; width: 744px; height: 668px; margin: auto; border: solid 12px #0b0205; background-color: #fff; background-image: linear-gradient(-45deg, #fff 49%, #eee 50%, #fff 51%); background-size: 8px 8px; }
.museum-intro .intro:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 10px solid #fff; box-shadow: inset 1px 1px 0 #000, inset -1px 1px 0 #000, inset 1px -1px 0 #000, inset -1px -1px 0 #000; }
.museum-intro .intro .header { padding-top: 75px; text-align: center; }
.museum-intro .intro .header .title { display: inline-block; font-family: "方正兰亭宋_GBK", Simsun, sans-serif; font-size: 40px; line-height: 1; letter-spacing: 2px; }
.museum-intro .intro .header .subtitle { position: relative; display: inline-block; margin-top: 25px; padding-top: 20px; font-family: "Times New Roman", sans-serif; font-size: 20px; line-height: 1; letter-spacing: 3px; border-top: 1px solid #000; }
.museum-intro .intro .header .subtitle:before { content: ''; position: absolute; top: -11px; left: 0; right: 0; height: 5px; background-color: #000; }
.museum-intro .intro .content { padding: 70px 110px 0; font-size: 14px; line-height: 32px; text-align: center; }
.museum-intro .intro .content p { margin: 0; }
.museum-intro .intro .content p + p { margin-top: 15px; }
.museum-intro .intro .indicator { width: 18px; height: 36px; margin: 25px auto 0; background: url(/static/images/intro_indicator.png) no-repeat 50% 0; }
.museum-intro .intro .bird { position: absolute; top: 66px; right: -76px; width: 157px; height: 209px; background: url(/static/images/intro_bird.png) no-repeat; }
.museum-intro .intro .diamond_red { position: absolute; top: -115px; left: -259px; width: 55px; height: 53px; background: url(/static/images/intro_diamond_red.png) no-repeat; }
.museum-intro .intro .diamond_purple { position: absolute; top: 32px; left: -129px; width: 171px; height: 152px; background: url(/static/images/intro_diamond_purple.png) no-repeat; }
.museum-intro .intro .diamond_yellow { position: absolute; top: 277px; left: -52px; width: 53px; height: 41px; background: url(/static/images/intro_diamond_yellow.png) no-repeat; }
.museum-intro .intro .diamond_cyan { position: absolute; top: 535px; right: -117px; width: 66px; height: 41px; background: url(/static/images/intro_diamond_cyan.png) no-repeat; }

.museum-wrap { position: relative; width: 790px; margin: auto; }

.museum-block p { margin: 0; }
.museum-block p + p { margin-top: 15px; }
.museum-block-hd .t1,
.museum-block-hd .t2,
.museum-block-hd .t3 { font-family: "Times New Roman", Simsun, sans-serif; line-height: 1; color: #c9c9c9; }
.museum-block-hd .t1 { font-size: 36px; }
.museum-block-hd .t2 { font-size: 122px; line-height: 80px; }
.museum-block-hd .t3 { font-size: 36px; }
.museum-block-hd .t4 { font-size: 30px; }
.museum-block-hd .title { font-family: "Times New Roman", Simsun, sans-serif; font-size: 100px; line-height: 100px; color: #c9c9c9; }
.museum-block-hd .subtitle { font-size: 30px; line-height: 1; color: #000; }
.museum-block-bd { margin-top: 65px; font-size: 16px; line-height: 32px; }

.museum-block-mining { margin-top: -50px; margin-bottom: -290px; padding-top: 145px; background: url(/static/images/sp_01.png) no-repeat 50% 0; }
.museum-block-formation { margin-top: 120px; }
.museum-block-formation .illustrate { margin-top: 40px; margin-left: -99px; }
.museum-block-formation .mine-01 { position: absolute; top: 0; right: -210px; width: 177px; height: 236px; background: url(/static/images/formation_01.png) no-repeat; }
.museum-block-formation .mine-02 { position: absolute; top: 405px; left: -205px; width: 166px; height: 100px; background: url(/static/images/formation_02.png) no-repeat; }

.museum-block-standard { position: relative; padding-top: 655px; font-size: 16px; line-height: 36px; text-align: center; background: url(/static/images/sp_02.png) no-repeat 50% 0; }
.museum-block-standard .museum-block-hd { margin: auto; text-align: left; }
.museum-block-standard .museum-block-hd .title { font-size: 36px; line-height: 24px; }
.museum-block-standard .museum-block-hd .subtitle { margin-top: 20px; }
.museum-block-standard .museum-block-bd { margin: auto; padding-top: 70px; text-align: left; }

.museum-block-competition .museum-block-hd .title { font-size: 72px; line-height: 72px; }
.museum-block-competition .museum-block-hd .subtitle { margin-top: 10px; }
.museum-block-competition { position: relative; padding-top: 180px; font-size: 16px; line-height: 36px; text-align: center; }
.museum-block-competition:before { content: ''; position: absolute; top: 0; left: 0; margin-top: 102px; width: 100%; height: 1px; background-color: #c1c1c1; transform: rotate(6deg); }
.museum-block-competition .museum-block-bd { margin: auto; padding-top: 70px; text-align: left; }
.museum-block-competition .address p + p { margin: 0; }
.museum-block-competition .illustrate { margin-left: -86px; }

.museum-block-contact { position: relative; padding-top: 180px; font-size: 16px; line-height: 36px; text-align: center; }
.museum-block-contact:before { content: ''; position: absolute; top: 0; left: 0; margin-top: 102px; width: 100%; height: 1px; background-color: #c1c1c1; transform: rotate(-6deg); }
.museum-block-contact .museum-block-bd { margin-top: 70px; }
.museum-block-contact .lead { margin: 0 5px; font-size: 24px; border-bottom: 1px solid #000; color: #000; }
.museum-block-contact .address { width: 790px; height: 268px; margin: 95px auto 0; padding-top: 40px; padding-left: 430px; line-height: 28px; text-align: left; background: url(../images/museum/contact_map.png) no-repeat -12px 50%; }
.museum-block-contact .address p + p { margin: 0; }
.museum-block-contact .cooperation { padding-top: 110px; padding-bottom: 115px; }

@media screen and (max-width: 768px) {
    img { width: 100%; }

    .museum-intro { padding: 12px; height: auto; }
    .museum-intro .intro { overflow: hidden; position: static; width: auto; height: auto; border: none; background-color: #fff; background-image: linear-gradient(-45deg, #fff 49%, #eee 50%, #fff 51%); background-size: 8px 8px; }
    .museum-intro .intro:before { display: none; }
    .museum-intro .intro .header { padding: 15% 8% 0; }
    .museum-intro .intro .header .title { line-height: 1.2; }
    .museum-intro .intro .content { padding: 4% 8% 0; line-height: 24px; }
    .museum-intro .intro .indicator { margin: 25px auto 7%; }

    .museum-wrap { width: auto; margin: 0 15px; }

    .museum-block-hd .t1 { font-size: 18px; }
    .museum-block-hd .t2 { font-size: 61px; line-height: 40px; }
    .museum-block-hd .t3 { font-size: 18px; }
    .museum-block-hd .t4 { font-size: 15px; font-weight: 700; }
    .museum-block-hd .title { font-size: 50px; line-height: 1; }
    .museum-block-hd .subtitle { font-size: 15px; font-weight: 700; line-height: 1.2; }
    .museum-block-bd { margin-top: 30px; }

    .museum-block-mining { margin-bottom: 0; }
    .museum-block-formation { margin-top: 60px; }
    .museum-block-standard { padding-top: 200px; background-position: 50% -345px; }
    .museum-block-standard .museum-block-hd .title { line-height: 1; }
    .museum-block-competition { padding-top: 90px; }
    .museum-block-competition:before { margin-top: 61px; }
    .museum-block-competition .illustrate { margin: 0; }
    .museum-block-competition .museum-block-hd .title { font-size: 36px; line-height: 1; }
    .museum-block-competition .museum-block-bd { padding-top: 35px; }
    .museum-block-contact .cooperation { padding-top: 55px; padding-bottom: 55px; }
    .museum-block-contact .address { width: auto; height: auto; margin: 50px auto 0; padding-top: 240px; padding-left: 0; line-height: 20px; text-align: left; background: url(/static/images/contact_map.png) no-repeat 0 0; background-size: 100% auto; font-size: 12px; }
    .museum-block-contact .museum-block-bd { margin-top: 35px; }
}