.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; margin: 0 auto; box-sizing: border-box; max-width: 1920px; } .talent-info { width: 100%; height: 100%; box-sizing: border-box; border-left: 0.38rem solid #07A359; padding: 2rem 3rem; box-shadow: 0rem 0.25rem 1.25rem 0rem rgba(0, 0, 0, .1); position: relative; overflow: hidden; } .talentimg { position: absolute; right: -7rem; top: 0; width: 29rem; } p { font-size: 1rem; font-weight: 400; line-height: 2; color: rgba(102, 102, 102, 1); } h5 { font-size: 1.25rem; font-weight: 700; color: rgba(7, 163, 89, 1); margin-bottom: 0.75rem; margin-top: 2rem; } .talent-info h5:first-child { margin-top: 0; } .telent-intro-bg { /* background: url('../../images/join/talent-content-bg.png') no-repeat center center/100%; */ } .black-bg { /* background: rgba(0, 0, 0, .7); */ color: rgba(102, 102, 102, 1); padding-top: 0; background: rgba(250, 250, 250, 1); } .gray-bg { background: rgba(250, 250, 250, 1); } .telent-intro-row { display: flex; justify-content: space-between; } .telent-intro-item { width: 21.25rem; padding: 3rem 0; } .telent-intro-title { font-size: 1rem; font-weight: 600; color: rgba(51, 51, 51, 1); margin-bottom: 0.75rem; } p.telent-intro-text { font-size: 0.88rem; line-height: 2; /* color: rgba(255, 255, 255, 1); */ text-align: justify; } .telent-intro-row:first-child { border-bottom: 1px solid #fff; } .telent-option-box { /* display: flex; flex-wrap: wrap; justify-content: space-between; */ display: grid; grid-template-columns: repeat(3, 1fr); } .telent-option { width: 36rem; padding: 1rem 2rem; margin-bottom: 2rem; box-sizing: border-box; background: linear-gradient(225.25deg, rgba(244, 253, 244, 1) 0%, rgba(255, 255, 255, 0) 100%); box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(7, 163, 89, 0.1); } h2 { font-size: 5rem; font-weight: 700; color: rgba(7, 163, 89, 1); margin-bottom: 1rem; } h4 { font-size: 1.13rem; font-weight: 700; color: rgba(7, 163, 89, 1); margin-bottom: 0.75rem; } p.telent-option-text { font-size: 0.88rem; line-height: 1.88; color: rgba(102, 102, 102, 1); text-align: justify; } .telent-option { width: 95%; padding: 0; } .telent-option-img{ overflow: hidden; width: 100%; height: 13.75rem } .telent-option .telent-option-img > img:hover { transform: scale(1.1); transition: all 0.5s; } .concept-img { width: 100%; height: 100%; } .padding { padding: 1rem 2rem; } @media screen and (max-width: 1023px) { .item-box { padding: 6rem 10rem; } .telent-intro-item { width: 31.25rem; } .talentimg { position: absolute; right: -11rem; top: 0; width: 36rem; } } @media screen and (max-width: 750px) { .telent-option-img{ height:100% } .telent-option-box { /* display: flex; flex-wrap: wrap; justify-content: space-between; */ display: block; } .telent-intro-row { display: block; } .telent-intro-item { width: 100%; } .telent-option { width: 100%; } .talentimg { display: none; } .talent-info { padding: 2rem 3rem; } h5 { font-size: 16px; } p, p.telent-intro-text, p.telent-option-text { font-size: 12px; } .telent-intro-title, h4 { font-size: 14px; } .telent-option { width: 100% !important; margin-bottom: 12px; } .concept-img { height: auto !important; width: 100% !important; } }