.con .nav_tit { font-weight:400; text-align: center; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .con .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top: 1.25vw; } .con .dis_flex { display: flex; } .con .dis_flex_wrap { display: flex; flex-wrap: wrap; } .con .page1 { padding:60px 0 70px 0; } .con .page1 .main { margin-top: 20px; } .con .page1 .main > div { padding: 20px; flex: 0 0 calc((100% - 60px)/4); margin-right:20px; margin-top: 20px; background: url(../img/serviceSupport_trainingCertification_page1_bg.jpg) no-repeat; background-size: 100% 100%; transition: all 0.4s linear; border-radius: 10px; } .con .page1 .main > div:nth-child(4n) { margin-right: 0; } .con .page1 .main > div a> .image { width: 80px; height: 80px; border-radius: 100%; background: linear-gradient(#ff3f48 0%, #db2029 100%); display: flex; align-items: center; justify-content: center; margin: auto; } .con .page1 .main > div a > .image img { max-width: 80%; max-height: 80%; transition: all 0.2s linear; } .con .page1 .main > div:hover { box-shadow: 0 8px 16px rgba(219, 32, 41, 0.4); } .con .page1 .main > div:hover img { transform: translateY(-8px); } .con .page1 .main > div .tit { margin-top: 20px; font-weight: 400; text-align: center; color: #333333; } .con .page2 { padding: 70px 0; background: #f8f9fb; } .con .page2 .w1440 > .tit { font-weight: 400; text-align: center; color: #000000; line-height: 1; } .con .page2 .w1440 .main { margin-top: 1.875vw; } .con .page2 .w1440 .main .list { flex: 0 0 calc((100% - (12.5% * 3)) / 4); text-align: center; } .con .page2 .w1440 .main .list .num { width: 70px; height: 70px; background: url(../img/serviceSupport_trainingCertification_page2_image1.png) no-repeat; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #ffffff; margin: auto; } .con .page2 .w1440 .main .list .image { position: relative; } .con .page2 .w1440 .main .list .image .bg { width: 100%; } .con .page2 .w1440 .main .list .image .icon { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 30%; transition: all 0.2s linear; } .con .page2 .w1440 .main .list .image .bg2 { max-width: 100%; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); } .con .page2 .w1440 .main .list:hover .icon { margin-top: -10px; } .con .page2 .w1440 .main .list .tit { font-weight: 400; text-align: center; color: #333333; margin-top: 32px; } .con .page2 .w1440 .main .hr { flex: 0 0 12.5%; } .con .page2 .w1440 .main .hr:nth-child(8n) { display: none; } .con .page2 .w1440 .main .hr p { width: 100%; height: 0; border: 1px dashed #F20C1B; transform: translateY(-1px); position: relative; } .con .page2 .w1440 .main .hr p::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background: url(../img/serviceSupport_trainingCertification_page2_image4.png) no-repeat; background-size: 100%; width: 18px; height: 20px; } .con .page3 { padding: 70px 0; background-color: #fff; } .con .page3 .w1440 > .tit { font-weight: 400; text-align: center; color: #000000; line-height: 1; } .con .page3 .w1440 .main { margin-top: 20px; } .con .page3 .w1440 .main .main_l { flex: 1; text-align: center; } .con .page3 .w1440 .main .main_l img { width: 100%; max-width: 430px; } .con .page3 .w1440 .main .main_r { flex: 1; align-self: center; } .con .page3 .w1440 .main .main_r > div { width: 100%; background: #ffffff; border-radius: 100px 10px 10px 100px; box-shadow: 5px 8.66px 18px 0px rgba(153, 153, 153, 0.15); margin-bottom: 20px; } .con .page3 .w1440 .main .main_r > div:last-child { margin-bottom: 0; } .con .page3 .w1440 .main .main_r > div span { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 100%; background: linear-gradient(#ff3f48 0%, #db2029 100%); border: 3px solid #ffffff; box-shadow: 5px 8.66px 18px 0px rgba(153, 153, 153, 0.2); font-weight: 400; display: flex; align-items: center; justify-content: center; color: #ffffff; } .con .page3 .w1440 .main .main_r > div p { font-weight: 400; text-align: left; color: #333333; align-self: center; padding-left: 2.2917vw; } .con .page3 .w1440 > .tit_2 { margin-top: 70px; font-weight: 400; text-align: center; color: #000000; line-height: 1; } .con .page3 .w1440 > .subTit { font-weight: 400; text-align: center; color: #666666; margin-top: 16px; } .con .page3 .w1440 .main_2 { margin-top: 40px; } .con .page3 .w1440 .main_2 > div { background: #f8f8f8; border-radius: 40px; height: auto; flex: 1; padding:40px; } .con .page3 .w1440 .main_2 .tit { text-align: center; } .con .page3 .w1440 .main_2 .mes { margin-top: 20px; background: linear-gradient(180deg, #F7CCCF 0%, #ffeae0 100%); border-radius: 40px; border: 1px dashed #f31f2b; padding: 40px; } .con .page3 .w1440 .main_2 .mes p { flex: 0 0 calc((100% - 60px)/3); margin-right: 30px; background: rgba(255, 255, 255, 0.5); border-radius: 10px; box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.35); padding:20px 0; font-weight: 400; text-align: center; color: #333333; margin-bottom: 20px; } .con .page3 .w1440 .main_2 .mes p:nth-child(3n) { margin-right: 0; } .con .page3 .w1440 .main_2 .main_l { margin-right: 20px; } .con .page3 .w1440 .main_2 .main_l .mes p { flex: 0 0 calc((100% - 30px)/2); } .con .page3 .w1440 .main_2 .main_l .mes p:nth-child(3n) { margin-right: 30px; } .con .page3 .w1440 .main_2 .main_l .mes p:nth-child(2n) { margin-right: 0; } .con .page4 { background: url(../img/serviceSupport_trainingCertification_page4_bg.jpg) no-repeat; background-size: 100% 100%; } .con .page4 > div { flex: 1; } .con .page4 > div .main_head { padding:40px 0; } .con .page4 > div .main_head > div { display: inline-block; } .con .page4 > div .main_head .tit { font-weight: 400; color: #000000; } .con .page4 > div .main_head .tit span { width: 28.12vw; height: 1px; display: inline-block; background: #c9141e; align-self: center; margin-right: 14px; position: relative; } .con .page4 > div .main_head .tit span::after { content: ""; position: absolute; right: 0; width: 5px; height: 5px; background: #c9141e; border-radius: 100%; transform: translateY(-50%); } .con .page4 > div .main_head .subTit { opacity: 0.15; font-weight: 400; color: #000000; text-align: right; } .con .page4 > div .main_footer { padding: 40px 40px 40px 0; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, 0.1); } .con .page4 > div .main_footer > div { flex: 1; max-width: 176px; margin-right: 40px; text-align: center; } .con .page4 > div .main_footer > div img { height: 40px; } .con .page4 > div .main_footer > div hr { width: 30px; height: 2px; background: #c9141e; margin: 20px auto; } .con .page4 > div .main_footer > div p { font-weight: 400; text-align: center; color: #333333; } .con .page4 > div .main_footer > div:last-child { margin-right: 0; } .con .page4 .main_r .main_footer { padding: 40px 0 40px 40px; justify-content: flex-start; } .con .page4 .main_r .main_footer > div { margin: 0 0 0 40px; } .con .page4 .main_r .main_footer > div:first-child { margin-left: 0; } .con .page5 { padding:70px 0; background: url(../img/serviceSupport_trainingCertification_page5_bg.jpg) no-repeat; background-size: cover; } .con .page5 .tit { font-weight: 400; text-align: center; color: #000000; } .con .page5 .image { width: 328px; margin: auto; margin-top: 40px; position: relative; } .con .page5 .image img { width: 100%; } .con .page5 .image .list { position: absolute; } .con .page5 .image .list .num { font-weight: 600; color: #888888; } .con .page5 .image .list .tit { margin-top: 10px; font-weight: 600; text-align: left; color: #333333; } .con .page5 .image .list .mes { margin-top: 20px; font-weight: 400; text-align: left; color: #666666; } .con .page5 .image .list:nth-child(2) { right: calc(100% + 38px); top: 40px; width: max-content; } .con .page5 .image .list:nth-child(2) p { text-align: right; } .con .page5 .image .list:nth-child(3) { left: calc(100% + 38px); top: 40px; width: max-content; } .con .page5 .image .list:nth-child(4) { position: static; width: max-content; margin-left: 40px; margin-top: 20px; } .con .page5 .image .list:nth-child(4) .num { display: inline-block; } .con .page5 .image .list:nth-child(4) .tit { display: inline-block; } .con .page5 .image .list:nth-child(4) .mes { margin-top: 20px; } .con .page6 { width: 100%; padding: 70px 0; background: url(../img/serviceSupport_trainingCertification_page6_bg.jpg) no-repeat; background-size: cover; } .con .page6 .main { width: 100%; overflow: hidden; margin-top: 40px; position: relative; padding-bottom: 40px; } .swiper-pagination-bullet-active{ background: linear-gradient(-90deg, #ff3f48 0%, #db2029 100%); } .con .page6 .main .swiper-slide .image { width: 100%; height: 0; position: relative; padding-top: 140%; overflow: hidden; } .con .page6 .main .swiper-slide .image img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; transition: all 0.4s linear; } .con .page6 .main .swiper-slide:hover img { transform: scale(1.05); } .con .page6 .main .swiper-slide .tit { font-weight: 400; text-align: center; color: #333333; margin-top: 20px; } @media only screen and (max-width: 1440px) { .con .page5 .image { width: 300px; } } @media only screen and (max-width: 1200px) { .con .page2 .w1440 .main .hr p::after { width: 12px; height: 14px; } } @media only screen and (max-width: 768px) { .con .page1 { padding: 20px 0 20px 0; } .con .nav_tit::after { margin-top: 10px; } .con .page1 .main { margin-top: 20px; } .con .page1 .main > div { flex: 0 0 100%; margin-right: 0; margin-top: 0; margin-bottom: 20px; padding: 20px; } .con .page1 .main > div a > .image { width: 40px; height: 40px; } .con .page1 .main > div a > .image img { max-width: 50%; max-height: 50%; } .con .page2 { padding: 40px 0 20px 0; } .con .page2 .w1440 .main { margin-top: 20px; } .con .page2 .w1440 .main .list .num { width: 40px; height: 40px; } .con .page2 .w1440 .main .list { flex: 0 0 calc((100% - 30%) / 2); margin-bottom: 20px; } .con .page2 .w1440 .main .hr:nth-child(8n) { display: block; } .con .page2 .w1440 .main .hr { flex: 0 0 30%; } .con .page2 .w1440 .main .list .image .bg2 { max-width: 80%; } .con .page2 .w1440 .main .hr:nth-child(4n) { display: none; } .con .page3 { padding: 40px 0; } .con .page3 .w1440 > .tit_2 { margin-top: 40px; } .con .page3 .w1440 .main { margin-top: 20px; flex-wrap: wrap; } .con .page3 .w1440 .main .main_l { flex: 0 0 100%; } .con .page3 .w1440 .main .main_r { flex: 0 0 100%; margin-top: 20px; } .con .page3 .w1440 .main .main_r > div span { width: 54px; height: 54px; align-self: center; } .con .page3 .w1440 .main .main_r > div p { padding: 10px; } .con .page3 .w1440 .main .main_r > div { margin-bottom: 20px; } .con .page3 .w1440 > .subTit { margin-top: 20px; } .con .page3 .w1440 .main_2 { margin-top: 20px; flex-wrap: wrap; } .con .page3 .w1440 .main_2 .main_l { margin: 0 0 20px 0; } .con .page3 .w1440 .main_2 > div { flex: 0 0 100%; margin: 0; padding: 10px; } .con .page3 .w1440 .main_2 .main_l .mes p { flex: 0 0 calc((100% - 10px) / 2); margin-right: 10px; } .con .page3 .w1440 .main_2 .mes p { flex: 0 0 calc((100% - 20px) / 3); margin-right: 10px; } .con .page4 { flex-wrap: wrap; } .con .page4 > div { flex: 0 0 100%; background: #FDFDFD; } .con .page4 > div .main_head { padding: 20px 0; } .con .page4 .main_r .main_footer, .con .page4 > div .main_footer { padding: 20px; } .con .page4 > div .main_head > div { display: block; padding-right: 5vw; } .con .page4 > div .main_head .tit span { flex: 1; } .con .page3 .w1440 .main_2 .main_l .mes p:nth-child(3n) { margin-right: 10px; } .con .page3 .w1440 .main_2 .mes { margin-top: 20px; padding: 20px 10px; } .con .page5 .image { width: 100%; margin-top: 20px; text-align: center; } .con .page5 .image img { max-width: 200px; } .con .page5 .image .list p { text-align: left !important; display: block !important; } .con .page5 .image .list p br { display: none; } .con .page5{ padding: 40px 0 20px 0; } .con .page5 .image .list .tit { margin-top: 10px !important; } .con .page5 .image .list .mes { margin-top: 10px !important; } .con .page5 .image .list { position: static; margin: 0 !important; width: 100%; margin-bottom: 20px !important; } .con .page6 { padding: 40px 0; } .con .page6 .main { max-width: 90%; margin: auto; margin-top: 20px; } .con .page6 .main .swiper-slide .tit { margin-top: 10px; } }