.con { padding-top: 70px; border-top: 1px solid #e5e5e5; } .con .tab{ display: flex; justify-content: center; } .con .tab a{ margin-right: 120px; transition: all 0.2s linear; position: relative; padding-bottom: 14px; } .con .tab a:after{ content: ""; position: absolute; bottom: 0; width: 0; left: 50%; transform: translateX(-50%); height: 2px; background: #e1252e; transition: all 0.2s linear ; } .con .tab a.on{ font-weight: 600; } .con .tab a:hover:after, .con .tab a.on:after{ width: 30px; } .con .tab a:last-child{ margin-right: 0; } .sec1 { display: flex; align-items: center; padding-top: 40px; padding-bottom: 40px; } .con1-tit p { font-weight: 400; } .sec1-lf { margin-left: 2%; flex: 0 0 43.958%; margin-right: 6.11%; } .sec1-lf .sec1-img img { width: 100%; height: 100%; object-fit: contain; } .sec1 .con1-tit p { text-align: left; } .sec1 .con1-tit hr { margin-left: 0; } .sec1 .sec1-rg { flex: 1; } .sec1 .sec1-td { line-height: 1.636; color: #000; margin-top: 40px; } .sec1 .sec1-des { color: #7d7d7d; line-height: 2.25; margin-top: 20px; } .sec2 { padding-top: 40px; padding-bottom: 40px; } .sec2-img { width: 86.25%; margin: 40px auto 0; } .sec2-img img { width: 100%; height: 100%; object-fit: contain; } .sec3 { background-color: #f7f7f7; padding-top: 40px; padding-bottom: 40px; } .sec3 .sec3-img1 { width: 64.51%; margin: 40px auto 20px; } .sec3 .sec3-img2 { width: 89.51%; margin: 0 auto; } .sec3 img { width: 100%; height: 100%; object-fit: contain; } @media screen and (max-width:768px) { .con .tab a{margin-right:auto} .con{ padding-top:40px; } .sec1 { flex-wrap: wrap; padding-top: 40px; padding-bottom:40px; } .sec1-lf { margin-left: 0%; flex: 0 0 100%; margin-right: 0%; margin-bottom: 20px; } .sec1 .sec1-des, .sec1 .sec1-td{ margin-top: 20px; } .sec2{ padding: 40px 0; } .sec2-img { width: 100%; margin-top: 20px; } .sec3{ padding:40px 0; } .sec3 .sec3-img1{ margin: 20px auto; } .sec3 .sec3-img2, .sec3 .sec3-img1 { width: 100%; } }