@charset "utf-8";

/* history timeline */
.history-timeline {position: relative; max-width: 1360px; margin: 0 auto;}
.history-img {position: absolute; border-radius: 100%; overflow: hidden; z-index: -1;}
.history-img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.history-img {top: 50%; transform: translateY(-50%);}
.history-item:nth-child(odd) .history-img {right: 0;}
.history-item:nth-child(even) .history-img {left: 0;}
.history-img.img1 {width: clamp(180px, calc(352 / var(--inner) * 100vw), 352px); height: clamp(180px, calc(352 / var(--inner) * 100vw), 352px);}
.history-img.img2 {width: clamp(130px, calc(262 / var(--inner) * 100vw), 262px); height: clamp(130px, calc(262 / var(--inner) * 100vw), 262px);}
.history-img.img3 {width: clamp(150px, calc(304 / var(--inner) * 100vw), 304px); height: clamp(150px, calc(304 / var(--inner) * 100vw), 304px);}
.history-img.img4 {width: clamp(110px, calc(218 / var(--inner) * 100vw), 218px); height: clamp(110px, calc(218 / var(--inner) * 100vw), 218px);}
.history-img.img5 {width: clamp(150px, calc(298 / var(--inner) * 100vw), 298px); height: clamp(150px, calc(298 / var(--inner) * 100vw), 298px);position: unset; transform: none; margin-left: auto;}
.history-img.img6 {width: clamp(130px, calc(264 / var(--inner) * 100vw), 264px); height: clamp(130px, calc(264 / var(--inner) * 100vw), 264px);}
.history-list {position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-50);}
.history-list:before {content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ddd;}
.history-item {position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-40);}
.history-item:nth-child(even):before {content: ''; order: 0; flex: 1; min-width: 0;}
.history-item:nth-child(odd):after {content: ''; order: 3; flex: 1; min-width: 0;}
.history-item .events {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; gap: var(--space-10); position: relative; z-index: 1; flex: 1;}
.history-item .year-wrap {flex-shrink: 0; position: relative; z-index: 1;}
.history-item:nth-child(odd) .events {order: 1; justify-content: flex-end;}
.history-item:nth-child(odd) .year-wrap {order: 2;}
.history-item:nth-child(even) .events {order: 2; justify-content: flex-start;}
.history-item:nth-child(even) .year-wrap {order: 1;}
.year-wrap {display: flex; align-items: center; gap: var(--space-40); flex-shrink: 0;}
.year-circle {display: flex; justify-content: center; align-items: center; width: clamp(100px, calc(175 / var(--inner) * 100vw), 175px); height: clamp(100px, calc(175 / var(--inner) * 100vw), 175px); border-radius: 9999px; background: var(--primary-color); flex-shrink: 0;}
.year-num {font-size: clamp(18px, calc(23 / var(--inner) * 100vw), 23px); font-weight: 600; line-height: 1.17em; color: #fff;}
.event {display: flex; gap: var(--space-15);}
.event .month {width: 20px; font-size: var(--font-size-18); font-weight: 700; line-height: 1.5em; color: var(--primary-color); flex-shrink: 0;}
.event .txt {position: relative; font-size: var(--font-size-18); font-weight: 500; line-height: 1.5em; color: var(--dark-color); padding-left: .5em;}
.event .txt:before {position: absolute; top: 0; left: 0; content: '·';}
.history-item:nth-child(odd) .event {flex-direction: row-reverse;}
.history-item:nth-child(odd) .event .txt {text-align: right; padding-left: 0; text-indent: 0; padding-right: .5em;}
.history-item:nth-child(odd) .event .txt:after {content: '·'; position: absolute; right: 0; top: 0;}
.history-item:nth-child(odd) .event .txt:before {content: none;}
.history-item:nth-child(odd) .event .month {text-align: right;}

.hyphen-list li {text-indent: -.5em; padding-left: .5em;}
.hyphen-list li:before {content: '-'; margin-right: 4px;}
.dot-list li {text-indent: -.5em; padding-left: .5em;}
.dot-list li:before {content: '•'; margin-right: 4px;}

.page-vision {gap: 25px clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); line-height: 1.875em;}
.vision-img {width: 40.8%; max-width: 570px;}
.ideology-head {font-size: var(--font-size-52); line-height: 1.44em; color: #f2f2f2; letter-spacing: .3em;}
.ideology-cnt {gap: 25px clamp(30px, calc( 105 / var(--inner) * 100vw ), 105px);}
.ideology-img {width: 42%; max-width: 588px;}
.ideology-img:after {content: 'KOEC IDEOLOGY'; display: block; margin-top: var(--space-50); font-size: var(--font-size-18); font-weight: 700; color: #eee; text-align: center; letter-spacing: .34em;}
.esg-circles {padding: 0 clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.esg-circle {position: relative; flex:1; margin: 0 calc(clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px) * -1); border-radius: 100%; overflow: hidden;}
.esg-circle:before {content: ''; display: block; width: 100%; padding-bottom: 100%;}
.esg-circle.type1 {background: rgba(15, 152, 51, 0.20);}
.esg-circle.type2 {background: rgba(3, 105, 58, 0.20);}
.esg-circle.type3 {background: rgba(5, 132, 136, 0.20);}
.esg-circle .wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: clamp(25px, calc( 110 / var(--inner) * 100vw ), 110px); display: flex; flex-direction: column; justify-content: center;}
.esg-circle p {height: 4.2em;}
.book-layout {gap:var(--space-30); max-width: 1300px; margin: 0 auto; border-radius: var(--radius-30); background: #fff; box-shadow:0 4px 23px rgba(157, 157, 157, 0.25); overflow: hidden;}
.book-txt {padding: 25px clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.book-img {width: 50.5%; max-width: 656px;}
.book-img img {height: 100%; object-fit: cover;}

.pdf-viewer-iframe {position:relative; padding-bottom:80vh;}
.pdf-viewer-iframe iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

.direction-map {width: 100%; height: clamp(270px, calc( 500 / var(--inner) * 100vw ), 500px);}
.direction-map iframe {width: 100% !important; height: 100% !important;}
.directions {margin-top:40px;}
.directions .address-info {margin-bottom:30px;}
.directions .address-info .comp {color:var(--primary-color); font-weight:600; margin-bottom:2px;}
.directions .address-info .addr {color:#242424; font-size:23px; font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:5px;}
.directions .address-info .etc {color:#454545;}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:20px 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:180px; padding-left:30px; color:#242424; font-size:1.125em; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--primary-color);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#454545;}

.seoul-office-box {background: #FAFAFA; border-radius: clamp(15px, calc( 43 / var(--inner) * 100vw ), 43px); padding:clamp(25px, calc( 64 / var(--inner) * 100vw ), 64px) clamp(25px, calc( 120 / var(--inner) * 100vw ), 120px);}
.seoul-office-box li {display: flex;}
.seoul-office-box li:not(:last-child) {margin-bottom: var(--space-15);}
.seoul-office-box strong {display: flex; align-items: center; min-width: 100px; font-size: var(--font-size-18); color: var(--primary-color); font-weight: 600;}
.seoul-office-box strong:before {content: ''; display: block; width: 6px; height: 6px; margin-right: var(--space-15); background: var(--primary-color);}