@charset "utf-8";

/* 공통 */
.doc-top-txt {margin-bottom:1.8em; text-align:center; font-size:var(--font-size-24); line-height:1.5em; letter-spacing:-.03em;}
.doc-top-txt p img {height:20px; vertical-align:middle; margin-top:-.2em;}

/* Company */
.greetings {padding:clamp(3.75rem, -0.8715rem + 14.7887vw, 16.875rem) clamp(1.25rem, 0.3697rem + 2.8169vw, 3.75rem) clamp(3.75rem, 1.9894rem + 5.6338vw, 8.75rem); background:url('../images/sub/greetings-bg.jpg') 50% 50%/cover no-repeat; color:#fff;}
.greetings .inner {margin-left:50%; max-width:870px;}
.greetings h2 {margin-bottom:clamp(3.75rem, 0.669rem + 9.8592vw, 12.5rem); font-size:var(--font-size-60); font-style:italic; line-height:1.3em; letter-spacing:-.03em; text-shadow:0px 3px 5px rgba(0, 0, 0, 0.3);}
.greetings h2 img {vertical-align:middle;  margin-top:-.1em; margin-right:.3rem;}
.greetings p {font-size:var(--font-size-22); line-height:1.5em; letter-spacing:-.03em;}
.greetings p:not(:last-child) {margin-bottom:1.5em;}
.greetings p img {height:20px; vertical-align:middle; margin-top:-.2em;}
.greetings .slogan {font-size:var(--font-size-34); font-style:italic; font-weight:300; line-height:1.5em; letter-spacing:-.03em;}

.policies {margin-top:clamp(1.875rem, 1.2148rem + 2.1127vw, 3.75rem); text-align:center;}

.milestone .group {position:relative; min-height:212px; display:flex; align-items:center; margin-bottom:-4px;}
.milestone .group .arrow-down {position:absolute; top:0; left:50%; margin-left:-42px; width:84px; height:100%; _background:#ea4e4e; clip-path:polygon(50% 24px, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px), 0 0);}
.milestone .group .arrow-down:before {content:''; position:absolute; top:0; left:0; bottom:0; width:100%; background:#ea4e4e;}
.milestone .group .arrow-down:after {content:''; position:absolute; top:0; left:0; bottom:0; width:50%; background:#e13333; opacity:.5;}
.milestone .group .year {position:absolute; top:50%; margin-top:-48px; display:flex; align-items:center; justify-content:center; width:260px; height:124px; padding-bottom:2.4%;}
.milestone .group .year:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/sub/milestone-box.png') 50% 50%/100% 100% no-repeat; mix-blend-mode:darken;}
.milestone .group .year h2 {position:relative; color:#fff; font-size:var(--font-size-56); line-height:1.3em; letter-spacing:-0.03em;}
.milestone .group .content {position:relative; width:50%; color:#505050; font-size:var(--font-size-24); line-height:1.5em; letter-spacing:-.03em; z-index:3;}
.milestone .group .content:before {content:''; position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; background:#ea4e4e url('../images/sub/milestone-bullet.png') 50% 50%/contain no-repeat; border:5px solid #fff; border-radius:100%;}
.milestone .group .content ul {display:grid; gap:10px;}
.milestone .group .content ul li {display:flex;}
.milestone .group .content ul li .month {min-width:43px; color:#121212; font-weight:600; margin-right:10px;}

.milestone .group:nth-child(odd) .year {right:50%; padding-left:2.4%; padding-right:42px;}
.milestone .group:nth-child(odd) .content {margin-left:50%; padding-left:86px;}
.milestone .group:nth-child(odd) .content:before {left:19px;}
.milestone .group:nth-child(even) .arrow-down:after {left:50%;}
.milestone .group:nth-child(even) .year {left:50%; padding-right:2.4%; padding-left:42px;}
.milestone .group:nth-child(even) .year:before {transform:scaleX(-1);}
.milestone .group:nth-child(even) .content {padding-right:86px;}
.milestone .group:nth-child(even) .content:before {right:19px; transform:scaleX(-1);}
.milestone .group:nth-child(even) .content ul li {justify-content:flex-end;}

/* COMMODITY */
.commodity .group {display:flex; align-items:center; gap:50px;}
.commodity .group .img {position:relative; width:50%;}
.commodity .group .img:after {content:''; position:absolute; top:50%; transform:translateY(-50%); border-top:19px solid transparent; border-bottom:19px solid transparent;}
.commodity .group .cnt {flex:1 1 auto; min-width:0; width:1%;}
.commodity .group .cnt h2 {font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.03em;}
.commodity .group .cnt h2:after {content:''; display:block; width:30px; height:3px; margin:1rem 0 1.5rem; background:#ea1818;}
.commodity .group .cnt p {color:#505050; line-height:1.63em;}
.commodity .group:nth-child(odd) .img:after {right:0; border-right:23px solid #fff;}
.commodity .group:nth-child(even) {flex-direction:row-reverse;}
.commodity .group:nth-child(even) .img:after {left:0; border-left:23px solid #fff;}
.commodity .group:nth-child(even) .cnt h2:after {background:#174fef;}

/* MARKETING */
.marketing .img {margin-bottom:3rem;}
.marketing .cnt {font-size:var(--font-size-18); line-height:1.67em;}
.marketing .cnt p:not(:last-child) {margin-bottom:1.1em;}

/*COMPANION  */
.partnership {background:url('../images/sub/partnership-bg.jpg') 50% 0/cover no-repeat; padding-top:33%; padding-bottom:clamp(3.125rem, -0.1761rem + 10.5634vw, 12.5rem); color:#fff;}
.partnership .doc-top-txt {margin-bottom:2.2em;}
.partnership .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.partnership .item {display:flex; flex-direction:column; justify-content:space-between; padding:40px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.3);}
.partnership .item .cnt {margin-bottom:2px;}
.partnership .item .cnt h2 {margin-bottom:.7em; font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.03em;}
.partnership .item .cnt p {line-height:1.63em; font-weight:300;}
.partnership .item .ico {text-align:right;}
.partnership .item .ico img {width:72px;}

.customer-service {display:flex; align-items:center; border-top:5px solid #ddd; border-bottom:5px solid #ddd; font-size:var(--font-size-18); line-height:1.67em;}
.customer-service > div {width:auto; padding:40px;}
.customer-service .txt img {height:16px; margin-top:-.2em; vertical-align:middle;}
.customer-service dl:not(:last-child) {margin-bottom:1.3em;}
.customer-service dt {margin-bottom:4px; color:#174fef; font-size:var(--font-size-20); font-weight:600;}
.customer-service dt img {width:32px; margin-right:10px;}
.customer-service dd {}