.main-title-content { width: 100%; height: 100%; background: rgba(0, 0, 0, .4); color: #fff; box-sizing: border-box; padding: 9rem 23rem; } h1 { font-size: 4.38rem; font-weight: 600; } h3 { font-size: 1.63rem; letter-spacing: 0.2rem; font-weight: 400; margin-top: 2.5rem; } .item-box { width: 100%; padding: 7rem 23rem; box-sizing: border-box; max-width: 1920px; margin: 0 auto; } .plan-descrip { width: 100%; display: flex; /* justify-content: flex-end; */ box-sizing: border-box; padding-left: 8.5rem; position: relative; } .descrip-content { width: 75rem; background: #FAFAFA; box-sizing: border-box; padding: 3rem 2rem 2rem 22rem; } .descrip-content h4 { font-size: 1.25rem; font-weight: 600; color: rgba(51, 51, 51, 1); padding-bottom: 0.625rem; } .descrip-content p { font-size: 1rem; line-height: 2; color: rgba(102, 102, 102, 1); text-align: justify; } .planvideo-box { position: absolute; width: 28rem; height: 100%; left: 0; top: 0; display: flex; align-items: center; } .planvideo-box > video { width: 100%; } .achievement-box { text-align: center; margin-top: 8rem; } .achievement-box > h2 { font-size: 2rem; font-weight: 600; color: rgba(51, 51, 51, 1); text-align: left; } .charts-box { padding-top: 12.5rem; } .chartsimg-box { margin: 0 auto; position: relative; width: 360px; height: 360px; } .chartsimg-box > img { width: 100%; } .chartsInfo { position: absolute; font-size: 0.8rem; color: rgba(255, 255, 255, 1); } .charts-descrip-item { display: flex; padding: 0rem 0.8rem; border: 1px solid #F0F0F0; border-radius: 4px; position: absolute; } .charts-descrip-item ul { padding-left: 1rem; } .charts-descrip-item li { margin: 5px 0; text-align: left; font-size: 0.8rem; color: rgba(51, 51, 51, 1); line-height: 1.63rem; } li::marker { color: #07A359; } .chartsimg-mobile{ display: none; } .chartsimg-pc{ display: block; } .descrip2 > img { width: 6.6rem; margin-left: 1rem; /* height: 110px; */ } .descrip1 { top: -22px; right: 285px; width: 27rem; } .descrip2 { width: 31.25rem; top: -74px; left: 243px; align-items: center; } .descrip3 { width: 25rem; top: 111px; left: 309px; } .descrip4 { width: 14rem; top: 256px; left: 139px; } .descrip5 { width: 25rem; top: 110px; right: 360px; } h5 { font-size: 1.25rem; font-weight: 600; color: rgba(51, 51, 51, 1); } .help-item { width: 49%; margin-bottom: 1.75rem; box-sizing: border-box; padding: 1.8rem 1.25rem; padding-bottom: 3.75rem; color: rgba(102, 102, 102, 1); font-size: 1rem; position: relative; text-align: justify; background: linear-gradient(225.25deg, #F4FDF4 0%, #FFFFFF 100%); box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05); } .help-item > h6 { font-size: 1.13rem; font-weight: 600; color: rgba(7, 163, 89, 1); margin-bottom: 0.62rem; margin-top: 0; } .help-item > p { font-size: 1rem; line-height: 2; } .help-details { display: flex; flex-wrap: wrap; justify-content: space-between; } .help-item > img { position: absolute; right: 1.25rem; bottom: 1.8rem; } .chart-taxt1 { top: 46px; left: 83px; } .chart-taxt2 { top: 49px; left: 197px; } .chart-taxt3 { top: 133px; right: 87px; } .chart-taxt4 { top: 192px; left: 143px; } .chart-taxt5 { top: 133px; left: 63px; } .text-bold-df { font-weight: 400; } @media screen and (min-width: 2300px) { .descrip-content { width: 75rem; background: #FAFAFA; box-sizing: border-box; padding: 3rem 2rem 2rem 6rem; } .plan-descrip { padding-left: 27rem; } } @media screen and (max-width: 1023px) { .chartsimg-box { width: 250px; height: 250px; } .chart-taxt1 { top: 39px; left: 43px; } .chart-taxt2 { top: 39px; left: 152px; } .chart-taxt3 { top: 133px; right: 16px; } .chart-taxt4 { top: 201px; left: 102px; } .chart-taxt5 { top: 129px; left: 16px; } .charts-descrip-item ul { padding-left: 2rem; } .descrip1 { top: -66px; right: 226px; width: 27rem; } .descrip2 { width: 31.25rem; top: -80px; left: 257px; align-items: center; } .descrip3 { width: 25rem; top: 129px; left: 261px; } .descrip5 { width: 25rem; top: 86px; right: 267px; } .item-box { padding: 6rem 10rem; } .descrip-content { padding: 3rem 2rem 2rem 6rem; } } @media screen and (max-width: 750px) { .chartsimg-mobile{ display: block; } .chartsimg-pc{ display: none; } .plan-descrip { display: block; padding: 0; } .chart-taxt1 { top: 40px; left: 40px; } .chart-taxt2 { top: 40px; left: 150px; } .chart-taxt3 { top: 133px; right: 18px; } .chart-taxt4 { top: 192px; left: 100px; } .chart-taxt5 { top: 133px; left: 18px; } .charts-descrip-item li { line-height: 20px; } .descrip-content { width: 100%; padding: 12px; } .planvideo-box { position: relative; width: 100%; } .chart-descrip-box { display: none; } .help-item { width: 100%; margin-bottom: 10px; } .achievement-box > h2 { font-size: 18px; } .descrip-content h4, h5, .help-item > h6 { font-size: 16px; } .chartsInfo, .descrip-content p, .help-item > p { font-size: 12px; } }