/*common*/ .container_a { width: 1002px; margin: 0 auto; } .COLOR1 { color: #f6900e; font-weight: bold; } .COLOR2 { color: #b11f32; font-weight: bold; } .STAR1 span { width: 100%; line-height: 35px; display: block; padding-left: 20px; font-size: 18px; text-indent: 0; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .STAR1 span:before { content: ''; display: block; width: 20px; height: 20px; background: url("/templets/ms_new/special/history/images/star1.png") no-repeat center; position: absolute; left: -10px; top: 6px; } .STAR2 span { width: 100%; line-height: 35px; display: block; padding-left: 20px; font-size: 18px; text-indent: 0; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .STAR2 span:before { content: ''; display: block; width: 20px; height: 20px; background: url("/templets/ms_new/special/history/images/star2.png") no-repeat center; position: absolute; left: -10px; top: 6px; } /*header*/ header { height: 780px; background: url("/templets/ms_new/special/history/images/banner.jpg") no-repeat center; } header nav { font-size: 0; } header nav a { display: inline-block; vertical-align: bottom; } header nav a:not(:first-child) { margin-left: 26px; } header .link { display: inline-block; width: 97px; height: 50px; font-size: 20px; color: #fff; line-height: 50px; text-align: center; margin-bottom: 20px; } header .link:hover { font-weight: bold; color: #fff5c8; border-bottom: 2px solid #fff5c8; } .TITLE1 { text-align: center; width: 1002px; margin: 0 auto; margin-top: -26px; } .TITLE1 img { margin-left: -8px; } /*Module_A*/ .Module_A *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .Module_A { font-size: 0; } .Module_A .Part_L, .Module_A .Part_R { display: inline-block; vertical-align: top; width: 50%; } .Module_A .img_top span { font-size: 36px; font-weight: bold; display: inline-block; vertical-align: bottom; } .Module_A .img_top span.year { margin-bottom: 22px; margin-left: 10px; } .Module_A .txt_bot { width: 100%; border-top: 1px dashed #f6900e; padding-top: 20px; position: relative; margin-top: 10px; } .Module_A .txt_bot:before { content: ''; display: block; background: url("/templets/ms_new/special/history/images/shape1.png") no-repeat center; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; } .Module_A .txt_bot:after { content: ''; display: block; background: url("/templets/ms_new/special/history/images/shape1.png") no-repeat center; position: absolute; top: -10px; right: -9px; width: 20px; height: 20px; z-index: 2; } .Module_A .txt_bot p { width: 486px; font-size: 18px; line-height: 35px; color: #5b5b5b; text-indent: 36px; } .Module_A .Part_L > div { position: relative; } .Module_A .Part_L > div:after { content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; border-right: 1px solid #b62033; } .Module_A .Part_R > div .img_top, .Module_A .Part_R > div .txt_bot { padding-left: 40px; } .Module_A .Part_R > div .img_top span.year { margin-left: 0; margin-right: 9px; } .Module_A .Part_R > div .txt_bot p { width: 451px; } .Module_A .y2007 { padding-top: 30px; } .Module_A .y2008 { padding-top: 148px; } .Module_A .y2010 .txt_bot, .Module_A .y2009 .txt_bot { border-top: 1px dashed #b62033; } .Module_A .y2010 .txt_bot:before, .Module_A .y2009 .txt_bot:before { background: url("/templets/ms_new/special/history/images/shape2.png"); } .Module_A .y2010 .txt_bot:after, .Module_A .y2009 .txt_bot:after { background: url("/templets/ms_new/special/history/images/shape2.png"); } .Module_A .y2010, .Module_A .y2012, .Module_A .y2009, .Module_A .y2011 { padding-top: 56px; } .Module_A .y2012 .year { margin-left: -88px !important; } .Module_A .y2012 .txt_bot { padding-bottom: 34px; } /*Module_B*/ .Module_B { background: #FFFBF2; padding-bottom: 80px; } .Module_B *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .Module_B h2 { font-size: 36px; text-align: center; } .Module_B .content { width: 100%; font-size: 0; } .Module_B .content .CON_L, .Module_B .content .CON_R { display: inline-block; width: 50%; vertical-align: middle; } .Module_B .content .CON_L { position: relative; } .Module_B .content .CON_L:after { content: ''; position: absolute; right: 0; top: 0; width: 0; height: 100%; border-right: 1px solid #b62033; } .Module_B .content .CON_R { padding-left: 28px; } .Module_B .content .txt_r, .Module_B .content .txt_l { width: 470px; font-size: 18px; line-height: 35px; color: #5b5b5b; } .Module_B .content .txt_r { width: 450px; } .Module_B .y2013 h2 { position: relative; } .Module_B .y2013 h2 img { position: absolute; left: 50%; margin-left: -26px; top: -24px; } .Module_B .y2013 h2:after { content: ''; display: block; position: absolute; top: 22px; left: 500px; width: 0; height: 22px; border-left: 1px solid #b62033; } .Module_B .y2014 .tip { width: 436px; font-size: 20px; line-height: 36px; color: #fe7e00; text-align: right; margin-bottom: 38px; position: relative; } .Module_B .y2014 .tip:after { border: solid transparent; content: ' '; height: 0; left: 468px; position: absolute; width: 0; border-width: 12px; border-left-color: #f6900e; top: 26px; } .Module_B .y2014 .CON_L:after { top: -36px; height: 358px; } .Module_B .y2015 .CON_L { padding-bottom: 20px; } .Module_B .y2016 .txt_l { width: 488px; } .Module_B .y2016 .CON_L { border-right: 1px solid #b62033; padding: 20px 0; } .Module_B .y2016 .CON_L:after { display: none; } .Module_B .y2017 .img { margin-top: 40px; } .Module_B .y2017 .img div { vertical-align: top; } .Module_B .y2017 .img .tip { text-align: center; position: relative; font-size: 20px; line-height: 36px; color: #a60400; padding-left: 40px; margin: 20px 0; } .Module_B .y2017 .img .tip:before { border: solid transparent; content: ' '; height: 0; left: 20px; position: absolute; width: 0; border-width: 10px; border-bottom-color: #a60400; top: 5px; } .Module_B .y2017 .txtMarquee-wrap { width: 938px; height: 568px; margin: 0 auto; background-color: #ffffff; border-radius: 6px; padding: 36px 122px 0 167px; border: dotted 3px rgba(188, 154, 71, 0.5); } .Module_B .y2017 .txtMarquee-wrap h1 { text-align: center; font-size: 36px; line-height: 36px; color: #a60400; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee { height: 445px; overflow: auto; padding-bottom: 100px; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee li { margin-top: 30px; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee h2 { font-size: 30px; line-height: 36px; color: #a60400; text-align: left; margin-bottom: 28px; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee p { font-size: 18px; line-height: 36px; color: #5b5b5b; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee p span { display: inline-block; vertical-align: top; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee p span:first-child { width: 80px; } .Module_B .y2017 .txtMarquee-wrap .txtMarquee p span:last-child { width: 540px; } /*Module_C*/ .brand_title, .culture_title { height: 78px; background: url("/templets/ms_new/special/history/images/title_bg2.jpg") no-repeat center; font-size: 36px; line-height: 36px; color: #b11f32; text-align: center; padding-top: 20px; } .culture_title { background: url("/templets/ms_new/special/history/images/title_bg3.png") no-repeat center; margin-bottom: 40px; } .Module_C { padding: 50px 0; } .Module_C *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .Module_C .Carousel_A .tab { padding: 0 120px; margin-top: 45px; margin-bottom: 20px; } .Module_C .Carousel_A .tab li { width: 138px; height: 52px; line-height: 52px; text-align: center; border-radius: 6px; font-size: 20px; color: #fff; cursor: pointer; } .Module_C .Carousel_A .tab li.one { background-color: #eca22c; } .Module_C .Carousel_A .tab li.two { background-color: #3789c8; } .Module_C .Carousel_A .tab li.thr { background-color: #e3314e; } .Module_C .Carousel_A .tab li.fou { background-color: #7bbf38; } .Module_C .Carousel_A .bd { text-align: center; } /*Module_D*/ .Module_D { padding: 50px 0; background: #EBF5FB; } .Module_D *{ -webkit-box-sizing: border-box; box-sizing: border-box; } .Module_D p { width: 955px; margin: 0 auto; font-size: 18px; line-height: 36px; color: #5b5b5b; text-indent: 36px; } .Module_D .Carousel_B { margin-top: 38px; } .Module_D .Carousel_B .tab { padding: 0 434px; margin-top: 34px; } .Module_D .Carousel_B .tab li { width: 14px; height: 14px; border-radius: 50%; background: #bfbfbf; cursor: pointer; } .Module_D .Carousel_B .tab li.on { background: #ff4800; } /*workflow*/ .workflow .bg { height: 492px; background: url("/templets/ms_new/special/history/images/bg.jpg") no-repeat center; } .workflow .bg .container_a { height: 492px; position: relative; } .workflow .bg .container_a span { padding-left: 10px; line-height: 40px; font-size: 28px; font-weight: bold; color: #f6900e; display: block; position: absolute; left: 0; bottom: 0; border-left: 4px solid #f6900e; } .workflow .workflow_nav { background: #FFFBF2; } .workflow .workflow_nav .nav_wrap { font-size: 0; width: 1002px; padding: 32px 0; margin: 0 auto; } .workflow .workflow_nav .nav_wrap li { text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; width: 100px; height: 100px; border-radius: 50%; font-size: 20px; position: relative; cursor: pointer; } .workflow .workflow_nav .nav_wrap li .icon { display: inline-block; width: 62px; height: 70px; background: url("/templets/ms_new/special/history/images/icon_1.png") no-repeat; -webkit-transition: all .5s; transition: all .5s; } .workflow .workflow_nav .nav_wrap li a { display: block; position: absolute; bottom: 10px; left: 30px; } .workflow .workflow_nav .nav_wrap li.a { color: #eca22c; border: 1px solid #eca22c; } .workflow .workflow_nav .nav_wrap li.a:hover { background: #eca22c; } .workflow .workflow_nav .nav_wrap li.b { color: #3789c8; border: 1px solid #3789c8; } .workflow .workflow_nav .nav_wrap li.b .icon { background-position-x: -62px; } .workflow .workflow_nav .nav_wrap li.b:hover { background: #3789c8; } .workflow .workflow_nav .nav_wrap li.c { color: #e3314e; border: 1px solid #e3314e; } .workflow .workflow_nav .nav_wrap li.c .icon { background-position-x: -124px; } .workflow .workflow_nav .nav_wrap li.c:hover { background: #e3314e; } .workflow .workflow_nav .nav_wrap li.d { color: #7bbf38; border: 1px solid #7bbf38; } .workflow .workflow_nav .nav_wrap li.d .icon { background-position-x: -186px; } .workflow .workflow_nav .nav_wrap li.d:hover { background: #7bbf38; } .workflow .workflow_nav .nav_wrap li.e { color: #fea44d; border: 1px solid #fea44d; } .workflow .workflow_nav .nav_wrap li.e .icon { background-position-x: -248px; } .workflow .workflow_nav .nav_wrap li.e:hover { background: #fea44d; } .workflow .workflow_nav .nav_wrap li.f { color: #5482c2; border: 1px solid #5482c2; } .workflow .workflow_nav .nav_wrap li.f .icon { background-position-x: -310px; } .workflow .workflow_nav .nav_wrap li.f:hover { background: #5482c2; } .workflow .workflow_nav .nav_wrap li.g { color: #a45edb; border: 1px solid #a45edb; } .workflow .workflow_nav .nav_wrap li.g .icon { background-position-x: -372px; } .workflow .workflow_nav .nav_wrap li.g:hover { background: #a45edb; } .workflow .workflow_nav .nav_wrap li.h { color: #38bfae; border: 1px solid #38bfae; } .workflow .workflow_nav .nav_wrap li.h .icon { background-position-x: -434px; } .workflow .workflow_nav .nav_wrap li.h:hover { background: #38bfae; } .workflow .workflow_nav .nav_wrap li:hover { -webkit-transform: translateY(-16px); transform: translateY(-16px); color: #fff; } .workflow .workflow_nav .nav_wrap li:hover .icon { background-position-y: -70px; } /*footer*/ footer { background: #CF293C; padding: 40px 0 100px; } footer .container_a { padding: 0 22px; } footer .contact_l { width: 384px; border-right: 1px solid #E27E8A; padding: 30px 0 20px; } footer .contact_l ul { width: 264px; font-size: 0; margin-top: 32px; } footer .contact_l ul li { display: inline-block; width: 88px; text-align: center; font-size: 16px; color: #ffffff; } footer .contact_l ul li i { display: inline-block; width: 88px; height: 48px; background: url("/templets/ms_new/special/history/images/icon_2.jpg") no-repeat; } footer .contact_l ul li i.a { background-position-x: 8px; } footer .contact_l ul li i.b { background-position-x: -91px; } footer .contact_l ul li i.c { background-position-x: -185px; } footer .contact_r { width: 520px; } footer .contact_r .f_nav li { background: #B61B2D; border-radius: 1px; color: #fff; margin-bottom: 20px; } footer .contact_r .f_nav li.on { background-color: #fff06e; color: #cf293c; } footer .contact_r .f_nav li:hover { background-color: #fff06e; color: #cf293c; } footer .contact_r .f_nav li a { display: block; width: 110px; height: 33px; line-height: 33px; font-size: 18px; text-align: center; } footer .contact_r .contact_detail p { font-size: 18px; color: #fff; line-height: 35px; } footer .contact_r .contact_detail p a { font-weight: bold; color: #fff06e; }