@font-face {
font-family:'CJONLYONETITLE';
font-weight:600;
font-style:normal;
src:url(/resources/fonts/CJ_ONLYONE_600.woff2) format('woff2'),
url(/resources/fonts/CJ_ONLYONE_600.woff) format('woff');
}
@font-face {
font-family:'CJONLYONETITLE';
font-weight:700;
font-style:normal;
src:url(/resources/fonts/CJ_ONLYONE_700.woff2) format('woff2'),
url(/resources/fonts/CJ_ONLYONE_700.woff) format('woff');
}
.main-visual.embla { position:relative;max-width: 100%;min-width:1280px;height: 680px; margin: auto;}
.main-visual.embla::before{content: "";position: absolute;z-index: -1;left:-10px;top:10px;bottom: 0;right:0;width:auto;border-bottom-left-radius: 360px; background: linear-gradient(270deg, #F5440F -0.83%, #E81622 49.58%, #594EA2 100%);}
.main-visual.embla::after{content: "";position: absolute;z-index: -1;left:1px;top:0;bottom:10px;right:0;width:auto;border-bottom-left-radius: 360px; background:#000}
.main-visual .embla__viewport { overflow: hidden;border-bottom-left-radius: 360px; }
.main-visual .embla__container { display: flex; touch-action: pan-y pinch-zoom; }
.main-visual .embla__slide { transform: translate3d(0, 0, 0); flex: 0 0 100%; min-width: 0; }
.main-visual .embla__slide__img { display: block; height: 670px; width: 100%; object-fit: cover; user-select: none; }
.embla__controls { position:absolute;bottom:90px;right:18%;display:grid;grid-template-columns:auto 1fr;justify-content:space-between;gap:1.2rem;margin-top:1.8rem;}
.embla__buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; align-items: center;display:none }
.embla__button { -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5); -webkit-appearance: none; appearance: none; background-color: transparent; touch-action: manipulation; display: inline-flex; text-decoration: none; cursor: pointer; border: 0; padding: 0; margin: 0; box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast); width: 3.6rem; height: 3.6rem; z-index: 1; border-radius: 50%; color: var(--text-body); align-items: center; justify-content: center; }
.embla__button:disabled { color: var(--detail-high-contrast); }
.embla__button__svg { width: 35%; height: 35%; }
.embla__dots { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;gap:8px}
.embla__dot { display: inline-flex;align-items: center; justify-content: center;width:32px; height:32px;cursor: pointer;background:none;border:0 none;padding:0;margin:0}
.embla__dot:after { content:'';display:flex;width:32px; height:4px;padding:0;margin:0;background: rgba(255, 255, 255, 0.3) }
.embla__dot--selected:after { background:#fff }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.embla__play { display:inline-flex;align-items:center;width: 40px;height: 40px;background: url(../img/common/icon_slider_play.png);background-size: 40px 40px;cursor: pointer;border:0 none;font-size:0;color:transparent}
.embla__play.stop {background: url(../img/common/icon_slider_stop.png);background-size: 40px 40px; }
.main-visual .text-animation { position:absolute;bottom:80px;left:18%;width:50%;text-align:left;padding:0;color:white;font-size:1.4rem;overflow:hidden;}
.main-visual .word { display: inline-block; overflow: hidden; font-size: 44px; font-weight: 400; line-height: 1.2; margin-left:10px}
.main-visual .word .inner { display: inline-block; transform: translateY(100%);position:relative;top:-4px;font-family:CJONLYONE,"Noto Sans KR";}
.main-visual .is-snapped .word .inner {transform: translateY(0);transition: transform 1.2s cubic-bezier(0.25,1,0.5,1);}
.main-visual .word:nth-child(1) .inner {transition-delay:.4s;}
.main-visual .word:nth-child(3) .inner {transition-delay:.6s;}
.main-visual .word:nth-child(5) .inner {transition-delay:.8s;}
.main-visual .word:nth-child(7) .inner {transition-delay:1s;}
.main-visual .word:nth-child(9) .inner {transition-delay:1.2s;}
.main-about {margin-bottom:110px}
.main-about .wrap-text {text-align:center;margin-top:130px}
.main-about .wrap-text .title {display:inline-block;padding:0 0 24px;font-size:45px;font-weight:600;color:#000;overflow:hidden;font-family:CJONLYONETITLE,"Noto Sans KR"}
.main-about .wrap-text .title-sub {position:relative;overflow:hidden;margin:0;line-height:1.3}
.main-about .wrap-text .title-sub span {display:block;width:100%;font-size:45px;font-weight:600;font-family:CJONLYONETITLE,"Noto Sans KR";background:linear-gradient(90deg, #FF9700 0%, #EF151E 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.main-about .wrap-text .title-sub span.clip-down {position:absolute;top:0;left:0;background:linear-gradient(90deg, #fff 0%, #FF9700 100%);background-clip:text;-webkit-background-clip: text;color:transparent;}
.main-about .wrap-text.is-inviewed .title-sub span.clip-down {animation:2.2s title-polygon;animation-fill-mode: forwards;animation-timing-function:linear;}
@keyframes title-polygon {
0% {clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)}
30% {clip-path:polygon(50% 0, 100% 0, 100% 100%, 40% 100%)}
100% {clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
}
.lang-en .main-about .wrap-text .title, .lang-en .main-about .wrap-text .title-sub span {font-size:40px}
.main-about .wrap-text .title-info {margin:40px 0 0;font-size:20px;font-weight:400;color:#000;font-family:CJONLYONE,"Noto Sans KR"}
#main-inner .main-about .btn-action {margin-top:40px;}
#main-inner .btn-action {margin-top:55px;text-align:center}
#main-inner .button-more.btn-round {position:relative;display:inline-block;height:46px;line-height:46px;padding:0 20px 0 0;border-radius:70px;border:1px solid #000;overflow:hidden;background-color:transparent;}
#main-inner .button-more.btn-round:before {content:"";top:0;bottom:0;left:0;right:0;display:block;position:absolute;-webkit-transform:translate(-101%,0);transform:translate(-101%,0);-webkit-transition: -webkit-transform .2s cubic-bezier(.645,.045,.355,1) 0s;transition: transform .2s cubic-bezier(.645,.045,.355,1) 0s;background-color:#000}
#main-inner .button-more.btn-round:hover:before {-webkit-transform:translate(0, 0);transform: translate(0, 0);}
#main-inner .button-more.btn-round span {position:relative;z-index:1;display:inline-block;font-size:14px;font-weight:700;padding:0 20px;color:#000}
#main-inner .button-more.btn-round:hover span {color:#fff}
#main-inner .button-more.btn-round i {float:right;position:relative;top:50%;display:inline-block;width:14px;height:1px;vertical-align:top;background:#000;}
#main-inner .button-more.btn-round i:before, .button-more.btn-round i:after {content:'';position:absolute;top:50%;right:0;width:8px;height:1px;background:#000;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;transform:rotate(45deg);transition:background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s}
#main-inner .button-more.btn-round i, #main-inner .button-more.btn-round i:before, #main-inner .button-more.btn-round i:after {background:#000}
#main-inner .button-more.btn-round i:after {transform:rotate(-45deg)}
#main-inner .button-more.btn-round:hover i, #main-inner .button-more.btn-round:hover i:before, #main-inner .button-more.btn-round:hover i:after {background:#fff}
#main-inner .main_title_top {display:flex;justify-content:space-between;padding:115px 0 65px;width:1170px;margin:0 auto}
#main-inner .main-title {margin:0}
#main-inner .main-title .title {margin:0;padding:0;text-align:left;color:#000;font-size:53px;font-weight:700;font-family:CJONLYONETITLE,"Noto Sans KR";overflow:hidden}
#main-inner .main-title .info {margin:0;padding:10px 0 0;color:#000;font-size:18px;font-weight:400;font-family:CJONLYONE,"Noto Sans KR";overflow:hidden}
#main-inner .text-ani .inview {display:block;overflow:hidden}
#main-inner .text-ani .inview .inner {display:block;transform: translateY(100%);transition: transform 1s cubic-bezier(0.25,1,0.5,1)}
#main-inner .text-ani .is-inviewed .inner {transform: translateY(0)}
#main-inner .main-title .info .inner {transition-delay:.4s}
.main-about .wrap-circle {margin-top:80px;padding:0 40px}
.main-about .wrap-circle .circle {position: relative;overflow: hidden;border-radius:20px;height:100%;width:100%;max-width:1720px;margin: 0 auto;}
.main-about .wrap-circle .circle a {display:block;height:100%}
.main-about .wrap-circle .circle img {position: relative;width: 100%;height:100%;object-fit: cover;clip-path:rect(30% 60% 70% 40% round 40px);transform:scale(1.2);transition: clip-path 2s cubic-bezier(0.25,1,0.5,1), transform 1s cubic-bezier(0.25,1,0.5,1);}
.main-about .wrap-circle.is-inviewed .circle img {transform:scale(1);clip-path:rect(0 100% 100% 0 round 10px)}
.main-brand {position:relative;background:#f5f5f5;padding-bottom:100px}
.brand-slider {display:block;position:relative;width:100%;max-width:1974px;margin: auto;}
.brand-slider .embla__viewport {overflow: hidden;}
.brand-slider .embla__container {display: flex;touch-action: pan-y pinch-zoom;margin-left: calc(1rem * -2);}
.brand-slider .embla__slide {transform: translate3d(0, 0, 0);flex: 0 0 370px;min-width: 0;padding-left:30px;}
.brand-slider .embla__controls {position: absolute;bottom:50%;right: 0;left: 0;width: 100%;display:block;pointer-events:none;}
.brand-slider .embla__buttons {display:flex;justify-content: space-between;align-items: center;margin: 0 40px;pointer-events:none;}
.brand-slider .embla__button {width:80px;height:80px;;-webkit-appearance: none;appearance: none;pointer-events:auto;}
.brand-slider .embla__button:disabled {color: rgb(192, 192, 192);}
.brand-slider .embla__button.embla__button--prev {background:rgba(0, 0, 0, 0.6) url('data:image/svg+xml,') no-repeat center;}
.brand-slider .embla__button.embla__button--next {background:rgba(0, 0, 0, 0.6) url('data:image/svg+xml,') no-repeat center;}
.brand-slider .embla__slide__number {display: flex;align-items: center;justify-content: center;height: auto;user-select: none;transform-origin:top;}
.brand-slider .embla__slide__number img {display: block;height: auto;width: auto;max-width: 100%;will-change: transform;}
.brand-slider .embla__slide__number a {display:block;border-radius: 1.8rem;overflow:hidden}
.brand-slider .embla__slide__number .desc {position:absolute;width:100%;bottom:100px;left:0;margin:0;line-height:1.3;text-align:center;color:#fff;font-size:18px;font-weight:400;font-family:CJONLYONE,"Noto Sans KR";opacity:0;transition:bottom .2s linear, opacity .2s linear}
.brand-slider .is-snapped .embla__slide__number .desc {opacity:1;bottom:70px}
.main-newsroom {position:relative;background:#fff;padding-bottom:112px}
.main-newsroom .newsroom-list {display:flex;flex-wrap:wrap;gap:30px;justify-content:flex-start;max-width:1170px;min-width:1170px;margin:0 auto}
.main-newsroom .newsroom-list .item {flex-grow:0;flex-basis:calc(33.3333% - 20px);}
.main-newsroom .newsroom-list .item a {display:block;margin:0 0 23px;}
.main-newsroom .newsroom-list .item a .background {height:450px;border-radius:20px;overflow:hidden}
.main-newsroom .newsroom-list .item a .background span {display:block;height:450px;border-radius:20px;background-size: cover;transform: scale(1);transition:transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;}
.main-newsroom .newsroom-list .item a .background.cj-logo {border:2px solid #d3d3d3;}
.main-newsroom .newsroom-list .item a .background.cj-logo span {background-size:50%;background-repeat:no-repeat;background-position:center;}
.main-newsroom .newsroom-list .item a:hover .background span {transform: scale(1.1)}
.main-newsroom .newsroom-list .item a .name {padding:0;margin:20px 0 17px;font-size:18px;font-weight:500;color:#000;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 3;-webkit-box-orient:vertical;word-break:break-word;}
.main-newsroom .newsroom-list .item a .date {font-size:14px;margin:0;color:#4d4d4d}