.core1 { padding: 8.333vw 0 9.375vw; } .core-title h2 { font-size: 1.875vw; font-weight: 600; color: #0168AE; } .core-title hr { border: none; margin: 1.302vw 0; border-top: 1px solid #C5C5C5; } .core-title p { font-size: 0.833vw; color: #888888; } .core-title img { max-width: 100%; } .core1 ul { margin-top: 3.125vw; } .core1 ul li { font-size: 0.833vw; margin-bottom: 1em; padding-left: 1.042vw; color: #505559; position: relative; } .core1 ul li::before { content: ''; display: block; width: 0.313vw; height: 0.313vw; border-radius: 100%; background: #505559; position: absolute; left: 0; top: 0.7em; transform: translateY(-50%); } .core2 { padding: 8.333vw 0 1.042vw; } .core2 .article { margin-top: 2.969vw; margin-bottom: 8.333vw; } .core2 .article::after { content: ''; width: 21.875vw; } .core2 .article .ev { width: 21.875vw; height: 12.083vw; padding: 0 4.167vw; background: #F7F7F7; font-size: 0.833vw; color: #888888; transition: all ease .3s; position: relative; } .core2 .article .ev:hover { box-shadow: 0vw 10px 20px rgba(0, 0, 0, 0.16); color: #FFFFFF; font-size: 0.93750vw; } .core2 .article .ev::before { content: ''; display: block; position: absolute; width: 100%; top: 0; left: 0; height: 0.26vw; background: #99BFDD; transition: all ease .3s; } .core2 .article .ev:hover::before { height: 100%; } .core2 .article .ev * { position: relative; z-index: 2; } .core3 { padding: 8.333vw 0 6.25vw; } .core3 .article { border-bottom: 1px solid #EDEDED; margin-bottom: 3.125vw; } .core3 .article .ev { width: 50%; padding: 2.917vw 1.302vw 2.083vw; margin-bottom: 1.302vw; border: 1px solid #EDEDED; transition: all ease .2s; cursor: pointer; } .core3 .article .ev:hover, .core3 .article .ev.on { border: 1px solid #E4B35B; position: relative; z-index: 2; } .core3 .article .ev:nth-of-type(even) { transform: translateX(-0.052vw); } .core3 .article .ev h2 { font-size: 0.833vw; color: #505559; } .core3 .article .ev p { font-size: 0.729vw; color: #505559; margin: 5.469vw 0 0; transition: all ease .3s; } .core3 .C-case { display: none; } .core3 .article .ev.on p { opacity: 0; } /* *======================================================media=============================================================== */ @media screen and (max-width:1919px) {} @media screen and (max-width:1519px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1250px) {} @media screen and (max-width:991px) { .core1 { padding: 100px 0; } .core-title h2 { font-size: 22px; } .core-title hr { margin: 15px 0; } .core-title p { font-size: 14px; } .core1 ul { margin-top: 40px; } .core1 ul li { font-size: 14px; padding-left: 15px; } .core1 ul li::before { content: ''; display: block; width: 3px; height: 3px; } .core2 { padding: 100px 0 20px; } .core2 .article { margin-top: 57px; margin-bottom: 60px; } .core2 .article::after { width: 48%; } .core2 .article .ev { width: 48%; height: 200px; padding: 0 30px; font-size: 14px; } .core2 .article .ev:hover { font-size: 15px; } .core2 .article .ev::before { height: 5px; } .core3 { padding: 100px 0 50px; } .core3 .article { margin-bottom: 60px; } .core3 .article .ev { width: 50%; padding: 26px 25px 40px; margin-bottom: 25px; } .core3 .article .ev h2 { font-size: 14px; } .core3 .article .ev p { font-size: 12px; margin: 65px 0 0; } } @media screen and (max-width:768px) {} @media screen and (max-width:480px) { .core1 { padding: 70px 0; } .core-title h2 { font-size: 18px; } .core-title hr { margin: 10px 0; } .core-title p { font-size: 12px; } .core1 ul { margin-top: 20px; } .core1 ul li { font-size: 12px; padding-left: 15px; } .core2 { padding: 70px 0 20px; } .core2 .article { margin-top: 57px; margin-bottom: 40px; } .core2 .article::after { width: 100%; } .core2 .article .ev { width: 100%; height: auto; padding: 60px 30px; font-size: 12px; } .core2 .article .ev:hover { font-size: 13px; } .core2 .article .ev::before { height: 5px; } .core3 { padding: 70px 0 40px; } .core3 .article { margin-bottom: 40px; } .core3 .article .ev { width: 50%; padding: 20px 20px 30px; margin-bottom: 15px; } .core3 .article .ev h2 { font-size: 13px; } .core3 .article .ev p { font-size: 12px; margin: 35px 0 0; } }