@charset "UTF-8";
.container { position:relative; }
.contents { padding-bottom:100px; }
.contents .title { position:relative; font-size:12px; font-weight:700; line-height:1; text-transform:uppercase; }
.title-sub { position:relative; font-size:24px; font-weight:400; line-height:1.33; }
.title-sub::after { content:''; display:inline-block; width:5px; height:5px; margin-left:8px; background:#f86f48; border-radius:5px; }

.store-search { position:fixed; right:30px; bottom:0; z-index:100; }
.store-search.limit { position:absolute; }
.store-search .btn { position:absolute; right:0; bottom:29px; width:60px; height:60px; text-align:center; line-height:52px; background-color:#ff5a2b; border-radius:60px; }

.main-head .msg { position:relative; z-index:5; height:100%; padding:0 30px 0; color:#fff; text-align:center; box-sizing:border-box; }
.main-head .msg::before { content:''; display:block; height:50.97%; }
.main-head .msg dt { position:absolute; left:30px; right:30px; bottom:50.97%; font-size:45px; font-weight:400; line-height:1.17; }
.main-head .msg dd { margin:0 -15px; font-size:15px; line-height:1.6; }
.main-head .msg dd .text-wrap { position:relative; display:block; }
.main-head .msg .btn-more { position:relative; top:0; margin-top:44px; }
.main-head .msg .btn-more .i-go::after { background:#fff; }
.main-head .msg .btn-more .i-go::before { border-left-color:#fff; border-bottom-color:#fff; }
/*
.main-head .msg dt, .main-head .msg dd, .main-head .msg .btn-more { opacity:0; left:30vw; -webkit-transition:all 800ms ease 100ms; transition:all 800ms ease 100ms; }
.main-head .swiper-slide-active .msg dt, .main-head .swiper-slide-active .msg dd, .main-head .swiper-slide-active .msg .btn-more { opacity:1; left:0; }
.main-head .swiper-slide-active .msg dd { -webkit-transition-delay:200ms; transition-delay:200ms; }
.main-head .swiper-slide-active .msg .btn-more  { -webkit-transition-delay:300ms; transition-delay:300ms; } */

.main-head .swiper-slide { height:667px; max-height:100vh; overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.main-head .swiper-pagination { left:0; width:100%; bottom:48px; text-align:center; }
.main-head.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin:0px; }/*231025 | 수정*/
.main-head .swiper-pagination-bullet::before {display: none;} /*231025 | 수정*/
.main-head .swiper-pagination-bullet .circle circle {display: none;} /*231025 | 수정*/
.main-head .swiper-pagination-bullet.swiper-pagination-bullet-active .circle circle { -webkit-animation-duration:7000ms; animation-duration:7000ms; }
/* S : 231025 | 추가*/
.main-head .swiper-wrapper{min-height: 100vh;} /* 231023 | height값 변경 */
.main-head .img { width: 100%; position:absolute; left:0; right:0; top:0; bottom:0; height:100%; overflow: hidden;}
.main-head .swiper-slide { position: relative; height: auto;}
.main-head .img video{width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}/* 231017 | 수정 */

.main-head .swiper-pagination-bullet-active {color: #FF8901 !important;}
.main-head .swiper-pagination-bullet {width: auto; height: 20px; text-align: center; line-height: 20px; font-size: 10px; color: #fff; font-weight: 700; opacity: 1; letter-spacing: 2.25px; padding: 0 6px;}
.main-head .swiper-button-wrap{display: flex; justify-content: space-between; height: 0;}
.main-head .swiper-button-prev,
.main-head .swiper-button-next{top: initial; bottom: 50px; position: relative;}
.main-head .swiper-button-prev{left: 12px;}
.main-head .swiper-button-prev:before,
.main-head .swiper-button-next:before{top: 0; width: 100%; height: 100%; background-color: transparent; margin: 0; border: 0;}
.main-head .swiper-button-prev:after,
.main-head .swiper-button-next:after{top: 0; width: 100%; height: 100%; background-color: transparent; margin: 0; border: 0;}
.main-head .swiper-button-prev:before{left: 0; background-position: 100% center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='45' viewBox='0 0 29 45' fill='none'%3E%3Cpath d='M2.87891 42.2035L23.2789 22.4148L2.87891 2.62598' stroke='white' stroke-width='6.64' stroke-miterlimit='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: calc(29px / 2) auto; transform: rotate(180deg);}
.main-head .swiper-button-next{right: 12px;}
.main-head .swiper-button-next:before{right: 0; background-position: 0 center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='45' viewBox='0 0 29 45' fill='none'%3E%3Cpath d='M2.87891 42.2035L23.2789 22.4148L2.87891 2.62598' stroke='white' stroke-width='6.64' stroke-miterlimit='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: calc(29px / 2) auto;}
.main-head .msg dt { font-size: 29px; font-weight: bold;}
/* E : 231025 | 추가*/

.newsroom { position:relative; margin:38px 30px; }
.newsroom .title { margin:0 0 46px -30px; }
.newsroom .title-sub { margin:0 0 22px; }
.newsroom .list { position:relative; margin:44px -60px 0 -30px; padding-right:60px; padding-left:30px; }
.newsroom .list .swiper-slide { padding-bottom:51px; }
.newsroom .list .img { position:relative; padding-top:71.76%; overflow:hidden; }
.newsroom .list .img img { position:absolute; left:50%; top:50%; max-height:100%; max-width:100%; transform:translate(-50%, -50%); }
.newsroom .list .cat { display:block; font-size:12px; color:#ff5a2b; margin:19px 0 0; line-height:1; }
.newsroom .list .subj { font-size:18px; line-height:1.44; display:block; display:-webkit-box; max-height:2.88em; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; margin:7px 0 -4px; }
.newsroom .list .date { display:block; font-size:12px; color:#888; margin:19px 0 0; line-height:1; }
.newsroom .deco-set .deco-circle { width:11.5px; height:11.5px; left:-38px; top:283px; -webkit-animation:anidot-7 18000ms linear infinite both; animation:anidot-7 18000ms linear infinite both; }
.newsroom .deco-set .deco-circle.ty-2 { width:25px; height:25px; left:-15px; top:297px; -webkit-animation:anidot-8 16000ms linear 500ms infinite both; animation:anidot-8 16000ms linear 500ms infinite both; }
.newsroom .deco-set .deco-circle.ty-3 { width:43px; height:43px; left:100%; top:15px; -webkit-animation:anidot-9 19000ms linear -500ms infinite both; animation:anidot-9 19000ms linear -500ms infinite both; }
.newsroom .swiper-pagination { right:30px; bottom:0; width:auto; }

.rnd { position:relative; margin:0 0 78px; text-align:center; }
.rnd .title { margin:0 0 46px 0; }
.rnd .title-sub { margin:0 0 22px; }
.rnd .list { position:relative; margin:40px 0 0; }
.rnd .list .img img { max-height:100%; max-width:100%; }
.rnd .text { position:relative; top:-17px; margin:-12.2vw 30px 0; text-align:left; }
.rnd .text dt { margin-bottom:22px; font-size:24px; font-weight:700; line-height:1.33; }
.rnd .text dd { font-size:15px; line-height:1.6; }
.rnd .swiper-pagination-fraction { left:auto; right:20px; bottom:auto; top:76.5vw; width:auto; font-weight:700; }
.rnd .swiper-pagination-current { font-size:36px; -webkit-text-stroke : 1px #222; color:transparent; }
.ie .rnd .swiper-pagination-current { text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222; }
.rnd .swiper-pagination-total { font-size:12px; color:#000; }
.rnd .swiper-pagination-total::before { content:''; display:inline-block; width:1px; height:15px; margin:0 6px -2px 5px; background:#000; -webkit-transform:skew(-28deg, 0deg); transform:skew(-28deg, 0deg); }

.global-network { position:relative; margin:0 -30px; padding:97px 30px; color:#fff; overflow:hidden; background:#1e202b; }
.global-network .title { margin:0 0 46px 0; }
.global-network .title-sub { margin:0 0 22px; }
.global-network .btn-more .i-go::after { background:#fff; }
.global-network .btn-more .i-go::before { border-color:#fff; }
.global-network .list-wrap { margin:89px 30px 0; font-size:20px; color:#fff; line-height:1.4; font-weight:400; }
.global-network .list li { position:relative; margin-top:70px; }
.global-network .list .name { display:block; }
.global-network .list .val { display:block; font-size:80px; line-height:1; margin-top:15px; padding-top:19px; border-top:2px solid #fff; }
.global-network .deco-map { position:absolute; left:0; right:0; top:0; height:544px; background:url("/resource/m/en/image/main/network-map.png") center 0 no-repeat; background-size:auto 544px; }
.global-network .deco-circle { left:30px; top:390px; width:16.5px; height:16.5px; background:#e9e9ea; -webkit-animation:anidot-5 18000ms linear infinite both; animation:anidot-5 18000ms linear infinite both; }
.global-network .deco-circle.ty-2 { left:auto; right:-4px; top:102px; width:16.5px; height:16.5px; background:#fff; -webkit-animation:anidot-5 19000ms linear -500ms infinite both; animation:anidot-5 19000ms linear -500ms infinite both; }
.global-network .deco-circle.ty-3 { left:auto; right:13px; top:48px; width:66px; height:66px; background:#ff5a2b; -webkit-animation:anidot-6 16000ms linear 500ms infinite both; animation:anidot-6 16000ms linear 500ms infinite both; }

.company-culture { position:relative; margin:98px 0 0; }
.company-culture .title { margin:0 0 46px 0; }
.company-culture .title-sub { margin:0 0 22px; }
.company-culture .list { position:relative; margin:48px -30px 0; }
.company-culture .list .img img { max-height:100%; max-width:100%; }
.company-culture .text { position:relative; margin:-140px 30px 0; min-height:335px; padding:47px 30px 65px; z-index:2; background:rgba(246,242,233,0.9); box-sizing:border-box; }
.company-culture .text dt { margin-bottom:21px; font-size:24px; color:#000; font-weight:bold; line-height:1.25; }
.company-culture .text dt small { display:block; padding:2px 0 0; margin-bottom:-2px; font-size:12px; }
.company-culture .text dd { font-size:15px; color:#000; line-height:1.6; }
.company-culture .swiper-pagination { left:53px; right:53px; bottom:40px; text-align:left; }

/****************************** Animation ******************************/
.company-culture .text dt, .company-culture .text dd, .rnd .text dt, .rnd .text dd { position:relative; }
/*
.contents .title { opacity:0; top:20vw; -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.title-sub { opacity:0; top:20vw; -webkit-transition:all 600ms ease 100ms; transition:all 600ms ease 100ms; }
.btn-more { opacity:0; top:20vw; -webkit-transition:all 600ms ease 150ms; transition:all 600ms ease 150ms; }
.title.ani-visible, .title-sub.ani-visible, .btn-more.ani-visible,
.ani-visible .title, .ani-visible .title-sub, .ani-visible .btn-more { opacity:1; top:0; }

.newsroom .list, .rnd .list, .company-culture .list, .global-network .list li { opacity:0; top:20vw; -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.newsroom.ani-visible .list, .rnd.ani-visible .list, .company-culture.ani-visible .list, .global-network .list li.ani-visible { opacity:1; top:0; }

.company-culture .text dt, .company-culture .text dd, .rnd .text dt, .rnd .text dd { position:relative; opacity:0; left:20vw; -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.company-culture .text dd, .rnd .text dd { -webkit-transition-delay:100ms; transition-delay:100ms; }
.company-culture .swiper-slide-active .text dt, .company-culture .swiper-slide-active .text dd,
.rnd .swiper-slide-active .text dt, .rnd .swiper-slide-active .text dd { opacity:1; left:0; }
*/

.line-set { position:absolute; left:50%; top:203px; z-index:-1; width:466px; height:450px; margin:0 0 0 -262px; opacity:0; -webkit-transition:opacity 2000ms ease; transition:opacity 2000ms ease; }
.rnd.ani-visible .line-set { opacity:0.9; }
.line-set .line { position:absolute; left:0; top:0; width:100%; height:100%; background:url("/resource/m/en/image/main/main-line.png") 0 0 no-repeat; background-size:cover; opacity:0; -webkit-animation:mainline 10500ms linear infinite both; animation:mainline 10500ms linear infinite both; }
.line-set .line:nth-child(2) { opacity:.9; -webkit-animation-delay:300ms; animation-delay:300ms; }
.line-set .line:nth-child(3) { opacity:.81; -webkit-animation-delay:600ms; animation-delay:600ms; }
.line-set .line:nth-child(4) { opacity:.72; -webkit-animation-delay:900ms; animation-delay:900ms; }
.line-set .line:nth-child(5) { opacity:.63; -webkit-animation-delay:1200ms; animation-delay:1200ms; }
.line-set .line:nth-child(6) { opacity:.54; -webkit-animation-delay:1500ms; animation-delay:1500ms; }
.line-set .line:nth-child(7) { opacity:.45; -webkit-animation-delay:1800ms; animation-delay:1800ms; }
.line-set .line:nth-child(8) { opacity:.36; -webkit-animation-delay:2100ms; animation-delay:2100ms; }
.line-set .line:nth-child(9) { opacity:.27; -webkit-animation-delay:2400ms; animation-delay:2400ms; }
.line-set .line:nth-child(10) { opacity:.18; -webkit-animation-delay:2700ms; animation-delay:2700ms; }
.line-set .line:nth-child(11) { opacity:.09; -webkit-animation-delay:3000ms; animation-delay:3000ms; }
@keyframes mainline{
    0% {left:0; top:0;} 6.25% {left:2.75px; top:-14.25px;} 12.5% {left:11px; top:-26.75px;}
    18.75% {left:23.25px; top:-34.75px;} 25% {left:37.5px; top:-37.5px;} 31.25% {left:51.75px; top:-34.75px;}
    37.5% {left:64px; top:-26.75px;} 43.75% {left:72px; top:-14.25px;} 50% {left:74.75px; top:0;}
    56.25% {left:72px; top:14.25px;} 62.5% {left:64px; top:26.75px;} 68.75% {left:51.75px; top:34.75px;}
    75% {left:37.5px; top:37.5px;} 81.25% {left:23.25px; top:34.75px;} 87.5% {left:11px; top:26.75px;}
    93.75% {left:2.75px; top:14.25px;} 100% {left:0; top:0;}
}
@-webkit-keyframes mainline{
    0% {left:0; top:0;} 6.25% {left:2.75px; top:-14.25px;} 12.5% {left:11px; top:-26.75px;}
    18.75% {left:23.25px; top:-34.75px;} 25% {left:37.5px; top:-37.5px;} 31.25% {left:51.75px; top:-34.75px;}
    37.5% {left:64px; top:-26.75px;} 43.75% {left:72px; top:-14.25px;} 50% {left:74.75px; top:0;}
    56.25% {left:72px; top:14.25px;} 62.5% {left:64px; top:26.75px;} 68.75% {left:51.75px; top:34.75px;}
    75% {left:37.5px; top:37.5px;} 81.25% {left:23.25px; top:34.75px;} 87.5% {left:11px; top:26.75px;}
    93.75% {left:2.75px; top:14.25px;} 100% {left:0; top:0;}
}
@keyframes anidot-5{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(-25px,-40px); transform:translate(-25px,-40px);}
    66.6%{opacity:0.7; -webkit-transform:translate(35px,-15px); transform:translate(35px,-15px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-5{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(-25px,-40px); transform:translate(-25px,-40px);}
    66.6%{opacity:0.7; -webkit-transform:translate(35px,-15px); transform:translate(35px,-15px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-6{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(20px,-35px); transform:translate(20px,-35px);}
    66.6%{opacity:1; -webkit-transform:translate(-35px,17px); transform:translate(-35px,17px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-6{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(20px,-35px); transform:translate(20px,-35px);}
    66.6%{opacity:1; -webkit-transform:translate(-35px,17px); transform:translate(-35px,17px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-7{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.3; -webkit-transform:translate(27px,-23px); transform:translate(27px,-23px);}
    66.6%{opacity:0.6; -webkit-transform:translate(32px,40px); transform:translate(32px,20px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-7{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.3; -webkit-transform:translate(27px,-23px); transform:translate(27px,-23px);}
    66.6%{opacity:0.6; -webkit-transform:translate(32px,40px); transform:translate(32px,20px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-8{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(-48px,32px); transform:translate(-48px,32px);}
    66.6%{opacity:0.7; -webkit-transform:translate(-40px,50px); transform:translate(-40px,50px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-8{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(-48px,32px); transform:translate(-48px,32px);}
    66.6%{opacity:0.7; -webkit-transform:translate(-40px,50px); transform:translate(-40px,50px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@keyframes anidot-9{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(54px,-59px); transform:translate(54px,-59px);}
    66.6%{opacity:1; -webkit-transform:translate(-3px,-60px); transform:translate(-3px,-60px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}
@-webkit-keyframes anidot-9{
    0%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
    33.3%{opacity:0.8; -webkit-transform:translate(54px,-59px); transform:translate(54px,-59px);}
    66.6%{opacity:1; -webkit-transform:translate(-3px,-60px); transform:translate(-3px,-60px);}
    100%{opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0);}
}