.con { padding: 60px 0 70px 0; } .con .nav_tit { font-weight: 400; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 18px; background: #d0121b; } .con .subTit { margin-top: 20px; font-weight: 400; color: #333333; } .con .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top: 20px; } .con .dis_flex { display: flex; } .con .fw600 { font-weight: 600; } .con .page1{ margin-bottom: 40px; } .con .page1:last-child{ margin-bottom: 0; } .con .page1:nth-child(2n) .main_l{ order: 1; } .con .page1:nth-child(2n) > .main_l{ margin:0 0 0 40px; } .con .dis_flex_wrap { display: flex; flex-wrap: wrap; } .con .dis_ju_center { display: flex; justify-content: center; } .con .page1 > div { flex: 1; margin-right:40px; } .con .page1 > div:last-child { margin-right: 0; } .con .page1 > div .list1_con { margin-top:40px; } .con .page1 > div .list1_con > div { flex: 0 0 20%; padding: 20px 10px; text-align: center; transition: all 0.4s linear; } .con .page1 > div .list1_con > div:hover { background: #ffffff; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(178, 178, 178, 0.3); } .con .page1 > div .list1_con > div img { height: 28px; } .con .page1 > div .list1_con > div .tit { margin-top: 10px; width: 100%; font-weight: 400; text-align: center; color: #333333; letter-spacing: 0.8px; } .con .page1 > div .mt_50 { margin-top:40px; } .con .page1 > div .list2_con > div { flex: 0 0 calc((100% - 20px)/2); margin-right: 20px; margin-top: 20px; padding: 16px; background: #f6f6f6; border-radius: 25px; color: #7d7d7d; text-align: center; transition: all 0.2s linear; } .con .page1 > div .list2_con > div:hover { background: linear-gradient(-30deg, #f41e2d 0%, #ff3c65 100%); color: #fff; } .con .page1 > div .list2_con > div:nth-child(2n) { margin-right: 0; } .con .page1 > div .list3_con { margin-top: 40px; } .con .page1 > div .list3_con > div { margin-right: 40px; align-self: flex-end; } .con .page1 > div .list3_con > div:last-child { margin-right: 0; } .con .page1 > div .list3_con .bor_radius .image { border-radius: 100%; } .con .page1 > div .list3_con .image { width: 130px; margin: auto; padding: 10px; background: #ffffff; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(178, 178, 178, 0.3); overflow: hidden; } .con .page1 > div .list3_con .image img { width: 100%; } .con .page1 > div .list3_con p { font-weight: 400; text-align: center; color: #333333; margin-top: 20px; } .con .page1 .main_l { align-self: center; } .con .page1 .main_r img { width: 100%; } .con .page2 { padding-top: 6.25vw; } .con .page2 .main_l { order: 1; margin: 0 0 0 40px; } .con .page2 .main_l .logo { margin-top: 40px; margin-bottom:40px; max-width: 182px; } .con .page2 .main_l .list1_con { margin-top: 20px; } .con .page2 .main_l .list1_con > div { flex: 0 0 30%; height: 180px; } .con .page2 .main_l .list1_con > div img { height: 60px; } .con .page2 .main_l .list1_con > div .tit { margin-top: 20px; } .con .page3 { padding-top: 40px; } .con .page3 .list3_con > div:first-child .image { width: auto; display: flex; align-items: center; justify-content: center; } .con .page3 .tit { margin-top:40px; } .con .page4 { padding-top: 40px; padding-bottom: 40px; } .con .page4 .main_l { order: 1; margin: 0 0 0 4.1667vw; } .con .page4 .main_l .list1_con > div { flex: 0 0 calc((100% - 40px)/3); text-align: left; padding: 2.0833vw 20px 3.125vw 20px; margin-right: 20px; } .con .page4 .main_l .list1_con > div:last-child { margin-right: 0; } .con .page4 .main_l .list1_con > div img { height: 50px; } .con .page4 .main_l .list1_con > div p { text-align: left; } .con .page4 .main_l .list1_con > div .tit { font-weight: 600; margin-top: 1.5625vw; } .con .page4 .main_l .list1_con > div .mes { margin-top: 20px; font-weight: 400; text-align: left; color: #7d7d7d; } @media only screen and (max-width: 768px) { .con { padding: 40px 0; } .con .page1{ margin-bottom: 40px; } .con .page1:nth-child(2n) > .main_l{ margin-left: 0; order:0; } .con .dis_flex { flex-wrap: wrap; } .con .page1 > div { flex: 0 0 100%; } .con .nav_tit::after { margin-top: 10px; } .con .subTit { margin-top: 20px; } .con .page1 > div .list1_con { margin-top: 20px; } .con .page1 > div .list1_con > div { flex: 0 0 33%; } .con .page1 > div .mt_50 { margin-top: 20px; } .con .page1 > div .list3_con { margin-top: 20px; } .con .page1 > div .list3_con p { margin-top: 10px; } .con .page4 .main_l, .con .page2 .main_l { order: 0; margin-left: 0; } .con .page1 > div .list2_con > div { padding: 10px ; margin-top: 10px; } .con .page3 .list3_con > div:first-child .image, .con .page1 > div .list3_con .image { width: 100px; } .con .page1 > div:last-child { margin-top: 20px; } .con .page2 { padding-top:40px; } .con .page2 .main_l .logo { max-width: 120px; } .con .page2 .main_l .list1_con > div { height: auto; } .con .page4 .main_l .list1_con > div img, .con .page2 .main_l .list1_con > div img { height: 32px; } .con .page4{ padding: 40px 0; } .con .page1 > div .mt_50{ margin-bottom: 10px; } .con .page3 { padding-top: 60px; } .con .page4 .main_l .list1_con > div { flex: 0 0 100%; padding: 10px 20px; margin-bottom: 10px; } .con .page4 .main_l .list1_con > div .tit { margin-top: 10px; } .con .page1 > div { margin-right: 0; } }