@charset "utf-8"; .w-accor { overflow: hidden; position: relative; } .w-accor ul, .w-accor li { padding: 0; margin: 0; list-style: none; } .w-accor ul { width: 101%; } .w-accor li { position: relative; overflow: hidden; float: left; } .accorClick li { cursor: pointer; } .w-accor li .item { position: relative; } .w-accor li>a { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .w-accor .acr_p { margin-top: 0.5em; } .w-accor6 li img { max-width: 100%; } .w-accor6 li .cont_ar { color: #fff; position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .w-accor6 li .cont_ar:before, .w-accor6 li .cont_ar:after { content: ''; position: absolute; left: 0; height: 100%; right: 0; /* background: #000; */ opacity: 0.35; *filter: alpha(opacity=35); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=35); transition: height 0.5s; -webkit-transition: height 0.5s; } .w-accor6 li .cont_ar:before { top: 0; } .w-accor6 li .cont_ar:after { bottom: 0; } #Accor{ border-right: 1px solid rgba(255,255,255,0.6); } #Accor>ul>li{ border-left: 1px solid rgba(255,255,255,0.6); cursor: pointer; } .w-accor6 li .tit{ padding-top: 80px; font-size: 22px; letter-spacing: 2px; text-align: center; } .w-accor6 li.cur{ background: rgba(5, 30, 70, 0.6); } .w-accor6 li.cur .tit{ margin-left: 40px; text-align: left; transition: all 0.4s; -webkit-transition: all 0.4s; } .w-accor6 li .dec_ar { /* line-height: 1.7; */ max-height: 100%; max-height: calc(100% - 7em); overflow: hidden; position: absolute; z-index: 1; left: 40px; right: 40px; top: 50%; top: 10%\9; *top: 10%; transform: translateY(-50%) scale(0); -webkit-transform: translateY(-50%) scale(0); opacity: 0; *filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transition: all 0.3s; -webkit-transition: all 0.3s; line-height: 30px; font-size: 12px; } :root .w-accor6 li .dec_ar { top: 40%; } /* .w-accor6 li.cur .cont_ar:before, .w-accor6 li.cur .cont_ar:after { height: 3em; } */ .w-accor6 li.cur .dec_ar { opacity: 1; *filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: translateY(-50%) scale(1); -webkit-transform: translateY(-50%) scale(1); transition-delay: 0.3s; -webkit-transition-delay: 0.3s; font-size: 14px; } @media (max-width:960px) { .w-accor h3 { font-size: 110%; } .w-accor .acr_p { font-size: 90%; } .w-accor1 li .acr_p, .w-accor2 li .acr_p { display: none; } .w-accor3 li .img_ar { height: 350px !important; } .w-accor3 li .img_ar img { height: 100%; max-width: inherit; } .w-accor4 li .img_ar { height: 350px !important; } .w-accor4 li .img_ar img { height: 100%; max-width: inherit; } .w-accor5 li .img_ar { height: 350px !important; } .w-accor5 li .img_ar img { height: 100%; max-width: inherit; } .w-accor5 li .i_img { height: 80px; line-height: 80px; margin-top: -40px; } .w-accor6 li .img_ar { height: 350px !important; } .w-accor6 li .img_ar img { height: 100%; max-width: inherit; } } @media (max-width:767px) { .w-accor2 li .i_img { width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; } .w-accor3 li .i_img img { max-height: 60px; } .w-accor4 li .dec_ar { left: 20px; right: 20px; padding: 15px; } .w-accor6 li .dec_ar { left: 20px; right: 20px; } } @media (max-width:640px) { .w-accor { height: auto !important; } .w-accor0 ul, .w-accor1 ul, .w-accor2 ul, .w-accor3 ul { width: 100%; } .w-accor0 li, .w-accor1 li { width: 100% !important; float: none; } .w-accor0 li .img_ar, .w-accor1 li .img_ar { height: auto !important; width: 100% !important; } .w-accor2 li { width: 50% !important; float: left; } .w-accor2 li .img_ar { height: auto !important; width: 100% !important; } .w-accor3 li .acr_p { max-height: 12em; line-height: 1.5; overflow: hidden; } } @media (max-width:480px) { body { font-size: 3.5vw; } .w-accor2 li .dec_ar { padding: 2em 1em 0.6em; } .w-accor2 li .i_img { width: 3em; height: 3em; margin-left: -1.5em; margin-top: -1.5em; } .w-accor3 li .img_ar, .w-accor3.accorNoClick li .img_ar { height: 20em !important; } .w-accor3 li .i_img img { max-height: 3em; } .w-accor4 li .dec_ar { left: 1em; right: 1em; padding: 1em; } .w-accor4 li .img_ar { height: 20em !important; } .w-accor4 li .i_img img { max-height: 3em; } .w-accor5 li .img_ar { height: 20em !important; } .w-accor5 li .i_img { height: 5em; line-height: 5em; margin-top: -2.5em; } .w-accor6 li .dec_ar { left: 1em; right: 1em; } .w-accor6 li .img_ar { height: 20em !important; } .w-accor6 li .i_img img { max-height: 3em; } }