@charset "utf-8";

.over_hidden {overflow-x:hidden}
.main #header {background:transparent;transition: transform .3s, background .3s; opacity: 0;}
.main #header.on {opacity: 1; transition: transform .3s, background .3s, opacity .3s;}
.main #header.init_bg {background:transparent;backdrop-filter:none}
.main #header .inner {background:transparent;transition:height .3s ease, background .3s ease;}
.main #header .inner.open {background:transparent}
.main #header .inner .logo a{background: url(../images/common/logo_wh.svg) no-repeat 0 center;}
.main #header .inner .gnb ul .gnb_li .depth1{color: #fff;}
.main #header .inner .head_util .link_wrap .btn_selct{color: #fff;}
.main #header .inner .head_util .link_wrap .btn_selct:after{background: url(../images/common/link_arr_wh.svg) no-repeat 0 0;}
.main .btn_menu.mopen {background: url(../images/common/menu_ico_cwh.svg) no-repeat center center;}
.main .btn_menu {background: url(../images/common/menu_ico_wh.svg) no-repeat center center }
.gnb_open  .main .btn_menu {background: url(../images/common/menu_ico.svg) no-repeat center center }
.main .btn_menu .line{background-color: #fff;}
.main #header .inner .gnb ul .gnb_li .smenu{transition: all  .3s; opacity: 0;}
.main #header .inner .gnb ul .gnb_li .smenu.active{transition: all .3s;}
.main .breadcrumb {position:relative;color:#f3f6fb; z-index:7}
.main .breadcrumb li:last-child {color:#fff}
.main .breadcrumb li:after {background:url(../images/common/breadcrumb_arr_wh.svg);background-size:8px 8px;width:8px;height:8px;}

.main #header.down {background: rgba(255, 255, 255, .5);backdrop-filter: blur(12px);}
.main #header.down .logo a,
.gnb_open .main #header .inner .logo a {background: url(../images/common/logo.svg) no-repeat 0 center;}
.gnb_open .main #header {background:#fff}
.main #header.down .inner .head_util .link_wrap .btn_selct,
.gnb_open .main #header .inner .head_util .link_wrap .btn_selct{color: #121418;}
.main #header.down .inner .gnb ul .gnb_li .depth1,
.gnb_open .main #header .inner .gnb ul .gnb_li .depth1  {color:#24272d;}
.gnb_open .main #header .inner .gnb ul li .depth1:hover {text-decoration:none;color:#0046ff} 
.main #header.down .inner .head_util .link_wrap .btn_selct:after,
.gnb_open .main #header .inner .head_util .link_wrap .btn_selct:after {background:url(../images/common/link_arr.svg) no-repeat 0 0;}
.main #header.down  .btn_menu .line,
.gnb_open .main .btn_menu .line {background-color:#121418;}
body.mopen .main #header {transition:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:#005DF9} 
body.mopen #header.down .btn_menu .line,
body.mopen .main .btn_menu .line{background-color:#fff;}
body.mopen .main #header .inner.open,
body.mopen.gnb_open  .main #header .inner.open {background:#005DF9}
body.mopen.gnb_open  #header .inner .logo a {background: url(../images/common/logo_wh.svg) no-repeat center center;}
.main #header.down .btn_menu {background: url(../images/common/menu_ico.svg) no-repeat center center }
body.gnb_open .main .btn_menu.mopen {background: url(../images/common/menu_ico_cwh.svg) no-repeat center center;}
.mopen .main #header.down .btn_menu {background: url(../images/common/menu_ico_cwh.svg) no-repeat center center;}


.main .intro {display: none; position:fixed;top:0;z-index:50;top:50%;left:50%;width:100vw;height:100vh;transform: translate(-50%, -50%);z-index:51;}
.main .intro svg {width:100vw;height:100vh;object-fit: cover;line-height:0; }
.main .intro.off svg {transform: scale(60); transition: transform 1.5s ease-in;}

.main .intro_wrap {display: none; position:absolute;width:100vw;height:100vh; z-index: -1;}
.main .intro_wrap .whbg {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#fff;z-index:0}
.main .intro_wrap .introt {position:relative;display:flex;flex-direction: column;justify-content:center;align-items:center;z-index:1;height:100%}
.main .intro_wrap .introt p {font-family:'OneShinhan';font-size: 46px;font-weight:700;line-height: 64px;}
.main .intro_wrap .introt .mask_box {width: 0px; height:1px; background-color: #000; max-width:1424px;margin:0 auto; border-radius: 24px;}
.main .intro_wrap.on .introt .mask_box {width: 400px; background-color: #fff; opacity: 0; transition: width 2s , background .1s 1.9s, opacity .1s 1.9s;}

.main #container{width:100%; padding-top: 0;}
.main .content{min-height: 3000px; max-width: 100%;}
.main .intro_mask { position: absolute; display: block;top: 0; left: 0;width: 100%; height: 100%; z-index: 5}
.main .mainSwiper {width: 100%; height: 100%; color:#fff; position: absolute; overflow: hidden;-webkit-clip-path: url(#introMask); clip-path: url(#introMask)}
.main .mainSwiper {width: 100%; height: 100%; color:#fff; position: absolute; overflow: hidden;}
.main .mainSwiper .swiper-slide{color: #fff;}
.main .mainSwiper .swiper-slide .swiper-video{width: 100vw; height: 100vh; object-fit: cover;}
.main .mainSwiper .swiper-slide .swiper-video video {margin-bottom:0}
.main .mainSwiper .swiper-slide img {width:100%;height:100vh;object-fit:cover;}
.main .mainSwiper_progress_box {width: 100%; z-index:11; transition: top .3s;}
.main .mainSwiper_progress {position:relative;display:flex;justify-content:center;max-width:1424px; margin: 0 auto;}
.main .mainSwiper_inner::before {content: ""; position: absolute; left: 0; bottom: calc(100% - 100vh); width: 100%; height: 20vh; background: linear-gradient(0deg, rgba(0,0,0, .4) 0%, rgba(0,0,0,.4) 10vh, rgba(255,255,255,0) 100%); z-index: 2; transition: height .3s;}
.main .sec1_inner.on .mainSwiper_inner::before {height: 200vh; transition: height .3s;}

.main .section {position:relative;width:100%;height:200vh; /*min-height: 950px;*/}
.main .section.sec1 {overflow: initial; /*height: calc(100vh + 800px);*/ min-height: 750px;}

.main .sec1_inner .swiper-button-prev{width:96px; height: 96px; z-index: 11; left: 0; top: 23px;color:transparent}
.main .sec1_inner .swiper-button-prev:after{content: ""; width: 96px; height: 96px; position: absolute; background:url(../images/main/ico_arrow_left.png) no-repeat center center;background-size:96px 96px;color:transparent}
.main .sec1_inner .swiper-button-next{width: 96px; height: 96px; z-index: 11; right: 0; top: 23px;color:transparent}
.main .sec1_inner .swiper-button-next:after{content: ""; width: 96px; height: 96px; position: absolute; background: url(../images/main/ico_arrow_right.png) no-repeat center center;background-size:96px 96px;color:transparent}
.main .sec1_inner .swiper-button-next:hover {border:1px solid rgba(235,239,245,.3);box-sizing:border-box;background:rgba(36,39,45,.3);
;-webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px);border-radius:50%}
.main .sec1_inner .swiper-button-prev:hover {border:1px solid rgba(235,239,245,.3);box-sizing:border-box;background:rgba(36,39,45,.3);
;-webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px);border-radius:50%}
.main .sec1_inner .swiper-pagination {right:auto !important}
.main .sec1_inner .swiper-pagination-fraction{text-align: left; height:96px; left: 112px; width:auto;line-height:96px;top:0}
.main .sec1_inner .swiper-pagination-progressbar.swiper-pagination-horizontal{width: 160px; height: 6px; border-radius: 3px; overflow: hidden; background-color: rgba(255, 255, 255, 0.45); top : 11px; left: 87px;}
.main .sec1_inner .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{border-radius: 3px; background-color: #fff; height: 6px; transform: scaleX(1) !important; width: 25%;}
.main .sec1_inner .swiper-control{position: relative; top:27px; left: 148px; width:40px; height: 40px; background: url(../images/common/ico_stop.svg) no-repeat center center; cursor: pointer; z-index: 11;}
.main .sec1_inner .swiper-control.on{background: url(../images/common/ico_start.svg) no-repeat center center;}

.main .sec1_inner .mainSwiper_text_wrap {position:relative; width: 100%;}
.main .sec1_inner .mainSwiper_text_wrap br {display:none}
.main .sec1_inner .mainSwiper_text_wrap h2{font-size:46px;line-height:64px;color: #fff; font-family:'OneShinhan';font-weight: 700; line-height: normal; transition: font-size .3s;}
.main .sec1_inner .mainSwiper_text_wrap p {color: #fff;font-size:24px;font-weight:500;line-height:38px;margin-top:4px; opacity: 1; transition: opacity .3s;}
.main .sec1_inner .mainSwiper_progress_wrap {position:relative;}
.main .sec1_inner .mainSwiper_progress_wrap .in {width:284px;text-align:right;color: #fff;font-size:14px}
.main .sec1_inner .mainSwiper_text_wrap > div {position: absolute; left: 0; top: 0; text-wrap: nowrap;}
.main .sec1_inner .mainSwiper_text_wrap > div {transform: translateY(100%); opacity: 0; transition: transform .3s .3s, opacity .3s;}
.main .sec1_inner .mainSwiper_text_wrap > div.on {transform: translateY(0); opacity: 1; transition: transform .3s .3s, opacity .3s .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap > div {opacity: 0; transition: opacity .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap > div.on {opacity: 1; transition: opacity .3s .3s;}
.main .sec1_inner .mainSwiper_progress {height: 120px; transform: translateY(100%); opacity: 0; transition: transform 0.3s, opacity 0.3s, height .3s;}
.main .sec1_inner .mainSwiper_progress.on { transform: translateY(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.main .sec1_inner.on .mainSwiper_progress {height: 96px; transition: height .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap h2 {font-size:32px;line-height:96px; transition: font-size .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap p {opacity: 0; transition: opacity .3s;}

.main .section.sec1.on .upbox {opacity:1;}
.main .upbox {position:-webkit-sticky;position:sticky; top: 0; left:0; width: 100%; height: 100vh; z-index:10;}
.main .upbox_inner {position:absolute; top:calc(100% - (100% - 100vh)); left:50%; transform:translateX(-50%) translateY(-200px); width:1424px;z-index:10; transition: top .3s, transform .3s; transition: top .3s, transform .3s;}
.main .sec1_inner.on .upbox_inner {top: 50%; transform:translateX(-50%) translateY(-50%); transition: top .3s , transform .3s;}
.main .upbox .inner {position:relative;display:flex;justify-content:center;flex-wrap:wrap;padding:16px 0 0 0;width:100%;}
.main .box {position:relative;border-radius:24px;padding:24px 32px 32px;color:#fff;box-sizing:border-box;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.main .golink {position:absolute;top:24px;right:32px;display:block;width:40px;height:40px;background:url(../images/common/ico_arrow_right2.svg) no-repeat rgba(255,255,255,.2) center center;background-size:24px 24px;border-radius:50%;transition: background-color .3s;font-size:1px;color:transparent;text-indent:-9999px;}
.main .golink.bk {background-color: rgba(36, 39, 45, .3);}

.main .tit {font-size:22px;line-height:40px;font-weight:700;}
.main .upbox .info {position:relative;width:704px;height:240px;overflow:hidden;}
.main .upbox .info dl {margin-top:28px}
.main .upbox .info dl dt{font-size:32px;line-height:44px;font-weight:700;}
.main .upbox .info dl dd {font-size:18px;line-height:28px;font-weight:500;margin-top:4px} 
.main .upbox .info .img {position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;border-radius:24px;}
.main .upbox .info .img img {width:100%;height:100%;object-fit:cover;}
/* .main .upbox .info .img{transition: transform .3s;} */
.main .upbox .info:hover img{transform:scale(1.1);}
.main .upbox .info:hover .golink {background-color:#24272D;}
.main .upbox .announcement {width:272px;height:240px;background:rgba(27, 30, 35, 0.4);margin-left:16px}
.main .upbox .announcement dl dd {font-size:24px;font-weight:500;line-height:38px;margin-top:24px;display:block;display:-webkit-box;width:100%;text-overflow:inherit;white-space:inherit;word-break:break-all;word-wrap:break-word;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.main .upbox .announcement:hover {background:rgba(27, 30,35,1);}
.main .upbox .announcement:hover .golink {background-color:#0046FF;}
.main .upbox .disclosure {position:relative;width:416px;height:293px;background:rgba(0,93,249,.5);margin-left:16px}
.main .upbox .disclosure .tit {margin-bottom:20px}
.main .upbox .disclosure .bts {display:flex;flex-wrap:wrap;margin:-16px 0 0 -12px}
.main .upbox .disclosure .bts a {display:inline-block;margin-top:16px;margin-left:12px;letter-spacing:-.5px}
.main .upbox .disclosure .bts a.ico.link::after {right:24px}
.main .upbox .disclosure .bts .roundbt.ico.type2 {padding-right:56px;background:rgba(0,93,249,.3);}
.main .upbox .disclosure:hover {background:#005DF9;transition: all .5s ease-in;}
.main .upbox .disclosure .roundbt.ico.type2:hover {background:#fff;color:#24272D;}
.main .upbox .disclosure .roundbt.ico.type2:hover:after {background:url(../images/common/ico_arrow_right_bl.svg) no-repeat;background-size:16px 16px}


.main .upbox .ir {width:488px;height:360px;background:rgba(255,255,255,.1);margin-top:-40px;overflow:hidden;z-index:5;box-sizing:border-box}
.main .upbox .ir ul {margin-top:22px;}
.main .upbox .ir ul li {padding:14px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:16px;line-height:26px}
.main .upbox .ir ul li a {color:#fff}
.main .upbox .ir ul li span:first-child {font-weight:700;width:62px;margin-right:24px}
.main .upbox .ir ul li span {display:inline-block;font-weight:500;vertical-align:top}
.main .upbox .ir ul li .txt {width:calc(100% - 86px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.main .upbox .ir ul li:last-child {border-bottom:0;padding-bottom:0}
.main .upbox .ir ul li:first-child {padding-top:0}
.main .upbox .ir:hover {background:#fff;color:#24272D;}
.main .upbox .ir:hover ul li {border-bottom:1px solid rgba(36,39,45,.15);}
.main .upbox .ir:hover ul li:last-child {border-bottom:0}
.main .upbox .ir:hover .golink {background-color:#0046FF}
.main .upbox .ir li a:hover{color:#0046FF;}
.main .upbox .ir:hover a{color:#24272D}
.main .upbox .stock {position:relative;width:488px;height:360px;background:rgba(255,255,255,.6);color:#24272D;margin-top:-40px;margin-left:16px;z-index:8}
.main .upbox .stock .stock_info {position:relative;margin-top:28px}
.main .upbox .stock dl dt {font-size:18px;line-height:28px;font-weight:500;}
.main .upbox .stock dl dd {font-size:24px;font-weight:700;line-height:38px; }
.main .upbox .stock dl dd strong {font-size:48px;line-height:1.2;vertical-align:middle}
.main .upbox .stock .num {position:absolute;bottom:11px;right:0;font-size:16px;font-weight:500;line-height:26px;}
.main .upbox .stock .num .fc_red,
.main .upbox .stock .num .fc_blue {margin:0 8px}
.main .upbox .stock ul {margin-top:35px;}
.main .upbox .stock ul li {display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:22px}
.main .upbox .stock ul li span:nth-child(1) {width:90px}
.main .upbox .stock ul li span:nth-child(2) {width:70px;text-align:right;position:absolute;left:50%;margin-left:-35px}
.main .upbox .stock ul li span:nth-child(3) {width:auto;text-align:right}
.main .upbox .stock ul li + li {margin-top:8px}
.main .upbox .stock .up {position:relative;display:inline-block;color:#D61111;padding-left:20px;}
.main .upbox .stock .up:before {content:'';position:absolute;top:8px;left:0;width:12px;height:8px;background:url(../images/main/red_arr.svg) no-repeat;background-size:12px 8px}
.main .upbox .stock .down {position:relative;display:inline-block;color:#005DF9;padding-left:20px;}
.main .upbox .stock .down:before {content:'';position:absolute;top:9px;left:0;width:12px;height:8px;background:url(../images/main/blue_arr.svg) no-repeat;background-size:12px 8px}
.main .upbox .stock:hover{background:#fff;}
.main .upbox .stock:hover .golink {background-color:#0046FF}
.main .upbox .rank{width:416px;height:304px;background:rgba(16,47,168,.5);margin-left:16px;margin-top:16px}
.main .upbox .rank:hover {background:#102FA8}
.main .upbox .rank .tit {position:absolute;width:100%;z-index:1;width:auto}
.main .rank_swiper {padding-top:48px}
.main .rank_swiper .swiper-pagination-bullet {position:relative;display:inline-block;width:auto;background:none;margin-left:16px !important;height:26px;font-size:16px;line-height:26px;font-weight:500;cursor:pointer;color:rgba(255,255,255,.6);opacity:1;margin-right:0 !important;}
.main .rank_swiper .swiper-pagination-bullet-active:before {content:'';position:absolute;bottom:0; width:100%;height:1px;background:#fff}
.main .rank_swiper .swiper-pagination {position:absolute;top:6px;right:0;width:100%;height:45px;text-align:right;border-bottom:1px solid rgba(255,255,255,.15);box-sizing:border-box}
.main .rank_swiper .swiper-pagination .swiper-pagination-bullet-active {background:none;color:#fff;opacity:1}
.main .rank_swiper .swiper-slide ul {display:flex;align-items: center;justify-content:space-between;}
.main .rank_swiper .swiper-slide ul li {position:relative;height:127px;width:112px}
.main .rank_swiper .swiper-wrapper {margin-top:32px}
.main .rank_swiper .round.type1 {background:url(../images/main/round.png) no-repeat top center;background-size:96px 83px;text-align:center}
.main .rank_swiper .round.type2 {background:url(../images/main/round.png) no-repeat top center;background-size:96px 83px;text-align:center}
.main .rank_swiper .round.type3 {background:url(../images/main/round.png) no-repeat top center;background-size:96px 83px;text-align:center}
.main .rank_swiper .round span {display:block;}
.main .rank_swiper .round .t1 {font-size:22px;font-weight:700;line-height:32px;padding-top:30px}
.main .rank_swiper .round .t2 {font-size:12px;font-weight:500;line-height:18px;margin-top:-5px}
.main .rank_swiper .round .t3 {position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:16px;font-weight:500;line-height:26px;text-align:center}
.main .page_swiper {position:absolute;bottom:22px;text-align:center;left:50%;transform:translateX(-50%);} 
.main .page_swiper .swiper-pagination-bullet {width:8px;height:8px;margin:0 4px;background:rgba(255, 255, 255, 0.4)}
.main .page_swiper .swiper-pagination-bullet-active {opacity:1;background:#fff}
.main .sec1_inner.on .mainSwiper_progress {height: 96px; transition: height .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap h2 {font-size:32px;line-height:96px; transition: font-size .3s;}
.main .sec1_inner.on .mainSwiper_text_wrap p {opacity: 0; transition: opacity .3s;}

.main .sec1_inner .info,
.main .sec1_inner .announcement,
.main .sec1_inner .disclosure,
.main .sec1_inner .ir,
.main .sec1_inner .stock,
.main .sec1_inner .rank {opacity: 0; transition: opacity .5s;}
.main .sec1_inner.on .info,
.main .sec1_inner.on .announcement,
.main .sec1_inner.on .disclosure,
.main .sec1_inner.on .ir,
.main .sec1_inner.on .stock,
.main .sec1_inner.on .rank {opacity: 1; transition: opacity .5s, background .3s;}

.main .section .imgBig {position:relative;width:100%;height:100%;z-index:0; padding:56px 104px 56px;box-sizing: border-box; transition:all 500ms;}
.main .section .imgBig img {width:100%;height:100%;object-fit:cover;border-radius:0; transition:all 2s;border-radius:24px}

.main .title {position:absolute;width:1424px;top:32px;left:50%;transform: translateX(-50%);color:#fff;text-align:left;font-size:40px;line-height:58px;font-weight:400;z-index:1;z-index:0}
.main .title strong {font-weight:700}
.main .section .title + .inner {margin-top:0}
.main .sec1_inner {position:-webkit-sticky;position: sticky; left: 0; top: 0; width: 100%; height: 100vh;}
.main .section.sec2 {box-sizing:border-box;min-height:812px}
.main .sec2_inner {position:-webkit-sticky;position: sticky; left: 0; top: 0; width: 100%; height: 100vh;}
.main .sec2_inner.on .imgBig {transition:all 500ms;padding:0}
.main .sec2_inner.on .imgBig img {border-radius:0}
.main .sec2_inner .esg1:hover {background:#fff;color:#24272D}
.main .esg2:hover {background:#fff;color:#24272D}
.main .esg3:hover {background:#fff;color:#24272D}

.main .upbox2 {position:absolute;width:1424px;left:50%;top:50%;transform:translate(-50%, -50%);z-index:5px;}
.main .upbox2 .inner {position:relative;padding:0;width:100%;display: flex;align-items: flex-end;justify-content: space-between;}
.main .upbox2 .esg1 {width:516px;background: rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.main .esg1 .tit a {position:relative;display:inline-block;color:#fff;padding-right:32px;background:url(../images/common/ico_arrow_right2.svg) no-repeat right center;background-size:24px 24px;}
.main .esg1 .tit {margin-bottom:16px}
.main .esg1 .bts {display:flex;flex-wrap:wrap;margin:-12px 0 32px -8px}
.main .esg1 .bts a {max-width:222px;font-weight:500;color:#fff;margin-top:6px;margin-left:8px;overflow:hidden;letter-spacing:-.5px;text-overflow:ellipsis;white-space:nowrap;}
.main .esg1 .bts a span {display:block;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.main .esg1 .bts a:after {content:'';position:absolute;top:50%;right:20px;transform:translateY(-50%);background:url(../images/common/ico_down_white_s.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}
.main .esg1 .bts:last-child {margin-bottom:0}

.main .esg2, .esg3 {background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:5}
.main .esg1:hover .tit a {color:#24272Dba;background:url(../images/common/ico_arrow_right_bl2.svg) no-repeat right center;background-size:24px 24px;}
.main .esg1:hover .bts a {color:#565B64;border:1px solid #D6DBE1;box-sizing:border-box}
.main .esg1:hover .bts a::after {background:url(../images/common/ico_down_bl.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}
.main .esg1:hover .bts a:hover{background:#0046FF;color:#fff;border:1px solid #0046FF}
.main .esg1:hover .bts a:hover:after {background:url(../images/common/ico_down_white.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}

.main .upbox2 .box_warp {position:relative;width:416px;z-index:2}
.main .upbox2 .box_warp .box + .box {margin-top:8px}
.main .indicators_swiper {padding:24px 0;border-top:1px solid rgba(255,255,255,.1);text-align:center;color:#fff;margin-top:24px;height:176px;box-sizing:border-box;}
.main .indicators_swiper dl dt {font-size:24px;font-weight:500;line-height:38px;}
.main .indicators_swiper dd strong{display:block;font-size:32px;font-weight:700;line-height:44px;margin-top:10px}
.main .indicators_swiper dd span {font-size:16px;color:#fff;font-weight: 500;line-height:26px}
.main .indicators_swiper dd ul {display:flex;align-items:center;justify-content:center} 
.main .indicators_swiper dd ul li + li {margin-left:14px}
.main .indicators_swiper .swiper-pagination-bullet {width:8px;height:8px;margin:0 4px;background:rgba(255, 255, 255, 0.4);opacity:1}
.main .indicators_swiper .swiper-pagination-bullet-active {background:#fff;opacity:1}
.main .indicators_swiper .swiper-pagination {bottom:0;line-height:8px}
.main .esg2:hover .indicators_swiper {border-top:1px solid rgba(36,39,45,.15);color:#24272D}
.main .esg2:hover .indicators_swiper .swiper-pagination-bullet {background:rgba(86,91,100,.4)}
.main .esg2:hover .indicators_swiper .swiper-pagination-bullet-active {background:rgba(86, 91, 100, 1)}
.main .esg2:hover .indicators_swiper dd span {color:#565B64}
.main .esg2:hover .golink,
.main .esg3:hover .golink {background-color:#0046FF}
.main .indicators_swiper .swiper-button-next {transform: rotate(-180deg);background:url(../images/main/main_arr.png) no-repeat;background-size:48px 48px;width:48px;height:48px;font-size:1px;color:transparent;overflow:hidden;text-indent:-9999px;right:-12px}
.main .indicators_swiper .swiper-button-prev {background:url(../images/main/main_arr.png) no-repeat;background-size:48px 48px;width:48px;height:48px;font-size:1px;color:transparent;overflow:hidden;text-indent:-9999px;left:-12px}
.main .indicators_swiper .swiper-button-next:after, .main .indicators_swiper  .swiper-button-prev:after {display:none}
.main .indicators_swiper .swiper-button-disabled {opacity:0}
.main .esg2:hover .indicators_swiper .swiper-button-next {transform: rotate(-180deg);background:url(../images/main/main_arr_on.png) no-repeat;background-size:48px 48px;width:48px;height:48px;}
.main .esg2:hover .indicators_swiper .swiper-button-prev {background:url(../images/main/main_arr_on.png) no-repeat;background-size:48px 48px;width:48px;height:48px;}

.main .esg3 .milestone {position:relative;font-size:24px;font-weight:700;line-height:38px;margin-top:16px;padding-top:4px;height:88px;box-sizing:border-box}
.main .esg3 .milestone:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_milestone.png) no-repeat;background-size:88px 88px;width:88px;height:88px; transition: transform .3s;}
.main .esg3:hover .milestone:after {content:'';transform:scale(1.1);}
.main .activity {background:rgba(40,185,220,.5);}
.main .activity p {position:relative;font-size:24px;font-weight:700;line-height:38px;margin-top:24px;padding-top:4px;height:88px;box-sizing:border-box}
.main .activity p:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_together.png) no-repeat;background-size:88px 88px;width:88px;height:88px; transition: transform .3s;}
.main .activity:hover {background:#28B9DC}
.main .activity:hover .golink {background-color:#0046FF}
.main .activity:hover p:after {transform:scale(1.1);}


.main .sec2 .title {opacity: 0; transition: opacity 0.3s;}
.main .sec2 .title.on {opacity: 1; transition: opacity 0.3s;}
.main .sec2 .sec2_1 {transform: translateY(100px); opacity: 0; transition:  transform 0.3s, opacity 0.3s;}
.main .sec2 .sec2_1.on {transform: translateY(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.main .sec2 .sec2_2 {transform: translateY(100px); opacity: 0; transition: transform 0.3s, opacity 0.3s;}
.main .sec2 .sec2_2.on {transform: translateY(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.main .sec2 .sec2_2.on .esg1,
.main .sec2 .sec2_2.on .esg2,
.main .sec2 .sec2_2.on .esg3,
.main .sec2 .sec2_2.on .activity {transition: background .3s;}

.main .section.sec3 {box-sizing:border-box;min-height:812px}
.main .sec3_inner {position:-webkit-sticky;position: sticky; left: 0; top: 0; width: 100%; height: 100vh;}
.main .sec3_inner.on .imgBig {padding:0;box-sizing: border-box;transition:all 500ms;}
.main .sec3_inner.on .imgBig img {border-radius:0}
.main .upbox3 {position:absolute;width:1424px;left:50%;top:50%;transform:translate(-50%, -50%);z-index:5;}
.main .upbox3 .inner {position:relative;padding:0;width:100%;display:flex;align-items:flex-end;justify-content: space-between;}
.main .digital {width:384px;background: rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.main .digital dt {font-size:24px;font-weight:700;line-height:38px;margin:24px 0 16px}
.main .digital dd {font-size:18px;font-weight:500;line-height:28px;opacity:.8}
.main .digital:hover {background:#fff;color:#24272D}
.main .digital:hover .golink {background-color:#0046FF}
.main .group {width:416px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.main .group ul {margin-top:24px}
.main .group ul li .f_box {display:flex;justify-content: space-between;align-items:center;}
.main .group ul li {position:relative;}
.main .group ul li + li {margin-top:19px}
.main .group .txt {font-size:16px;font-weight:500;line-height:26px;display:block;display:-webkit-box;text-align:left;max-width:100%;word-break:break-all;word-wrap:break-word;-webkit-line-clamp:2 ; -webkit-box-orient:vertical;overflow:hidden}
.main .group .date {display:block;font-size:16px;font-weight:500;line-height:26px;margin-top:4px;opacity:.6}
.main .group ul li .mtxt_box {width:calc(100% - 152px)}
.main .group .img {display:block;width:136px;height:90px;overflow:hidden;border-radius:16px;}
.main .group .img img {width:100%;height:auto;border-radius:16px; transition: transform .3s;object-fit: cover;transform: scale(1.7);}
.main .group:hover {background:#fff;color:#24272D}
.main .group:hover .golink {background-color:#0046FF;color:transparent}


.main .network {width:416px;background:rgba(0,93,249,0.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);margin-top:8px}
.main .network dl {position:relative;height:88px;margin-top:16px }
.main .network dl:after{content:'';position:absolute;top:0;right:0;background:url(../images/main/global.png) no-repeat top right;background-size:88px 88px;width:88px;height:88px; transition: transform .3s;}
.main .network dt {font-size:24px;font-weight:700;line-height:38px;padding-top:10px}
.main .network dd {font-size:18px;font-weight:500;line-height:28px;margin-top:4px}
.main .network:hover {background:#005DF9;color:#fff}
.main .network:hover .golink {background-color:#24272D}
.main .network:hover dl:after {background:url(../images/main/global.png) no-repeat top right;background-size:88px 88px;width:88px;height:88px;transform:scale(1.1);}


.main .sec3 .title {opacity: 0; transition: opacity 0.3s;}
.main .sec3 .title.on {opacity: 1; transition: opacity 0.3s;}
.main .sec3 .sec3_1 {transform: translateY(100px); opacity: 0; transition: transform 0.3s, opacity 0.3s;}
.main .sec3 .sec3_1.on {transform: translateY(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.main .sec3 .sec3_2 {transform: translateY(100px); opacity: 0; transition: transform 0.3s, opacity 0.3s;}
.main .sec3 .sec3_2.on {transform: translateY(0); opacity: 1; transition: transform 0.3s, opacity 0.3s;}
.main .sec3 .sec3_2.on .digital,
.main .sec3 .sec3_2.on .group,
.main .sec3 .sec3_2.on .network {transition: background .3s;}

.main .section.sec4.on .imgBig {padding:0;width:100%;height:100%}
.main .section.sec4.on .imgBig img {border-radius:0}
.main .section.sec4 .imgBig {padding:104px;box-sizing:border-box;transition:all 500ms;border-radius:24px}
.main .section.sec4 .imgBig img {border-radius:24px}
.main .upbox4 {position:absolute;width:100%;top:50%;transform:translateY(-50%);}
.main .upbox4 .box_in {position:relative;overflow:hidden}

.main .sec4_inner {position:-webkit-sticky;position: sticky; left: 0; top: 0; width: 100%; height: 100vh;}
.main .sec4_inner .title {position:relative;width:100%;top:0;left:0;text-align:center;margin-bottom:80px;right:auto; opacity: 0; transition: all .3s; transform: translateX(0) translateY(200%);}
.main .sec4_inner .title.on {transform: translateX(0) translateY(0);opacity: 1; transition: all .3s;}
.main .sec4_inner .sec4_swiper {transform: translateX(100%); transition: all .5s;}
.main .sec4_inner .sec4_swiper.on {transform: translateX(0); transition: all .5s .3s;}

.main .info_swiper .swiper-slide {width:360px;height:495px;border-radius:24px;overflow:hidden}
.main .info_swiper {overflow:hidden;}
.main .info_swiper .swiper-slide.video{position:relative;width:1240px;height:495px}
.main .info_swiper .swiper-slide.video .video_box {position:relative;width:880px;height:495px;}
.main .info_swiper .swiper-slide.video iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
.main .info_swiper .swiper-slide.video video{position:absolute;top:0;left:0;width:100%;height:100%;}
.main .info_swiper .video_box + .boxs {border-top-left-radius:0;border-bottom-left-radius:0;width:360px;height:495px}
.main .info_swiper .video_box + .boxs:hover {border-top-left-radius:0;border-bottom-left-radius:0;}
.main .info_swiper .swiper-slide a {position:relative;display:block;width:100%;height:100%;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); color:#fff;padding:32px;box-sizing:border-box}
.main .info_swiper .video_wrap {display:flex;}
.main .info_swiper .boxs {position:relative;color:#fff;border-radius:24px}
.main .info_swiper .boxs .part {font-size:18px;font-weight:700;line-height:28px;}
.main .info_swiper .boxs .tit {display:block;font-size:24px;font-weight:500;line-height:38px;margin-top:16px;display:-webkit-box;text-align:left;max-width:100%;word-break:break-all;word-wrap:break-word;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.main .info_swiper .boxs .date {position:absolute;left:32px;bottom:32px;font-size:16px;font-weight:500;line-height:26px;color:rgba(255,255,255,.6); transition: color .3s;}
.main .info_swiper .boxs .txt {display:block;display:-webkit-box;text-align:left;max-width:100%;word-break:break-all;word-wrap:break-word;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;transition: color .3s;opacity:.8}
.main .info_swiper .swiper-slide a {border-radius:24px; transition: background .3s;}
.main .info_swiper .boxs .img {display:block;position:absolute;top:0;left:0;right:0;bottom:50%;}
.main .info_swiper .boxs.images {position:relative;}
.main .info_swiper .boxs.images a {padding-top:252px}
.main .info_swiper .boxs.images .img  {display:block;width:100%;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px;height:221px}
.main .info_swiper .boxs.images .img img {width:100%;height:100%;border-top-left-radius:24px;border-top-right-radius:24px;object-fit: cover;}
.main .info_swiper .boxs.images a:hover .img img {transform: scale(1.1);border-top-left-radius:24px;border-top-right-radius:24px;transition: all .3s;}
.main .info_swiper .swiper-slide a:hover {background:#fff;color:#24272D;border-radius:24px}
.main .info_swiper .swiper-slide a:hover .part {color:#0046FF}
.main .info_swiper .boxs:hover .date{color:#565B64}
.main .info_swiper .boxs:hover .txt {color:#565B64}
.main .info_swiper .swiper-button-next {right:104px;border:1px solid rgba(235,239,245,.3);background:rgba(36,39,45,.3);backdrop-filter:blur(7.5px);width:96px;height:96px;border-radius:50%}
.main .info_swiper .swiper-button-next:after {content:'';background:url(../images/main/ico_arrow_right2.png) no-repeat center center;background-size:68px 68px;width:68px;height:68px;}
.main .info_swiper .swiper-button-prev {left:104px;border:1px solid rgba(235,239,245,.3);background:rgba(36,39,45,.3);backdrop-filter:blur(7.5px);width:96px;height:96px;border-radius:50%}
.main .info_swiper .swiper-button-prev:after {content:'';background:url(../images/main/ico_arrow_left2.png) no-repeat center center;background-size:68px 68px;width:68px;height:68px;}
.main .info_swiper .swiper-button-prev.swiper-button-disabled {display:none}
.main .info_swiper .swiper-button-next.swiper-button-disabled {display:none}

.main .roundbt.type2 {font-family:'Pretendard';font-size:16px;}
.main .roundbt {border:1px solid #fff}
.main video {margin-bottom:0}

.popup_notice {position:fixed;right:24px;bottom:24px;width:416px;z-index:20;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:rgba(0,70,255,.7);border-radius:24px;}
.popup_notice .notice_cont{position:relative;color:#fff}
.popup_notice .notice_cont_item{padding:24px 37px;box-sizing:border-box;}
.popup_notice .notice_cont .tit{font-family:'OneShinhan';font-size:28px;font-weight:700;line-height:38px;margin-bottom:8px;margin-right:56px}
.popup_notice .notice_cont p {font-size:18px;font-weight:500;line-height:28px;opacity:.8;margin-bottom:24px}
.popup_notice .notice_cont .bt_area {margin-bottom:10px;}
.popup_notice .notice_cont .bt_area a {font-family:'Pretendard';}
.popup_notice .close{position:absolute;top:24px;right:24px;width:40px;height:40px;background:url(../images/main/close.svg) no-repeat center center rgba(0,0,0,.2);background-size:24px 24px;color:transparent;font-size:1px;border-radius:50%;z-index:1;}
.popup_notice .close:hover {background-color:#24272D}
.popup_notice .today {border-top:1px solid rgba(255,255,255,0.15);padding:25px 0;text-align:center}
.popup_notice .today button {font-size:16px;font-weight:500;line-height:26px;color:#fff;opacity:.8}
.popup_notice .roundbt.ico.down.type2:hover:after {background: url(../images/common/ico_down_black_s.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}
.popup_notice .roundbt.ico.down:after {content:'';position:absolute;top:50%;right:20px;transform:translateY(-50%);background:url(../images/common/ico_down_white_s.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}
.popup_notice .swiper-pagination-bullet{background:rgba(255, 255, 255, 0.4);}
.popup_notice .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#ffffff;}
.popup_notice .swiper-button-next {transform: rotate(-180deg);background:url(../images/main/main_arr.png) center no-repeat;background-size:70px 70px;width:30px;height:30px;font-size:1px;color:transparent;overflow:hidden;text-indent:-9999px;right:3px;margin-top:0px;}
.popup_notice .swiper-button-prev {background:url(../images/main/main_arr.png) center no-repeat;background-size:70px 70px;width:30px;height:30px;font-size:1px;color:transparent;overflow:hidden;text-indent:-9999px;left:3px;margin-top:0px;}
.popup_notice .swiper-button-next:after, .main .indicators_swiper  .swiper-button-prev:after {display:none}
.popup_notice .swiper-button-disabled {opacity:0}


.scroll_none {overflow: hidden;}
.main .section.sec1 .scrollbt {display:block;position:fixed;bottom:32px;right:18px;writing-mode: vertical-rl;text-orientation: sideways;z-index:3;color: rgba(255, 255, 255, 0.60);font-size:16px;font-weight:500;line-height:26px;transition:all .3s;}
.main .section.sec1 .scrollbt.on {opacity: 1; transition: opacity .3s;}
.main .section.sec1 .scrollbt .roune_box {display:inline-block;position:relative;width:8px;height:32px;}
.main .section.sec1 .scrollbt .roune_box .round {position:absolute;display:block;width:8px;height:8px;margin-top:8px;background:#fff;border-radius:50%;animation:roundmotiom 0.6s linear 0s infinite alternate;}
.main .section.sec1 .scrollbt.off {opacity:0;transition:all .3s}
.main .mainSwiper  .swiper-slide video::-webkit-media-controls { display:none !important;}

@keyframes roundmotiom {
	0% {transform:translateY(0)}
	100% {transform:translateY(100%)}
}

@media (max-width:1700px){
    .main .sec2_inner .imgBig {padding:38px}
    .main .sec3_inner .imgBig {padding:38px}
    .main .sec2_inner.on .imgBig {padding:0}
    .main .sec3_inner.on .imgBig {padding:0}
    .main .upbox2 {width:auto;left:86px;right:86px;transform:translate(0 , -50%);}
    .main .upbox2 .inner {max-width:100%;}
    .main .upbox3 {width:auto;left:86px;right:86px;transform:translate(0 , -50%);}
    .main .upbox3.sec3_1 {left:86px;bottom:107px;}
    .main .upbox3.sec3_2 {right:86px;bottom:107px}
    .main .section.sec4 .imgBig {padding:38px}
    .main .title {width:100%;max-width:100%}  
    .main .upbox .info {width:39%;}  
    .main .upbox .announcement {width:20%;}
    .main .upbox .disclosure {width:32%;}
    .main .upbox .ir {width:29%;}
    .main .upbox .stock{width:30%;}
    .main .upbox .rank {width:32%;}
    .main .upbox .stock .num {bottom:-22px}
    .main .sec1_inner .mainSwiper_progress_box{padding:0 4%;box-sizing:border-box} 
    .main .sec1_inner.on .mainSwiper_progress_box {padding:0 4%}
}
@media (max-width:1440px){
    .main .upbox_inner {width:100%}
    .popup_notice {width:328px;}
    .popup_notice .notice_cont .tit {font-size:24px;line-height:34px}
    .popup_notice .notice_cont p {font-size:14px;line-height:22px;margin-bottom:16px}
    .popup_notice .roundbt.type2 {height:34px;line-height:34px}
    .popup_notice .today {padding:17px 0px;font-size:14px;line-height:22px}
    .main .section.sec2 {min-height:860px}
    .main .section.sec3 {min-height:860px}
}
@media (max-width:1279px){
    .main .section.sec1 .scrollbt {display:none !important}
    .main .section {min-height: 750px;}
    .main .mainSwiper_progress_box{position:absolute;width:100%;max-width:100%;padding:0 4%;box-sizing:border-box;}
    .main .sec1_inner .mainSwiper_progress .mainSwiper_text_wrap h2 {font-size:24px;line-height:36px}
    .main .sec1_inner .mainSwiper_text_wrap p {font-size:16px;line-height:26px;margin-top:4px}
    .main .sec1_inner.on .mainSwiper_progress .mainSwiper_text_wrap h2 {font-size:20px;line-height:48px;}
    .main .sec1_inner.on .mainSwiper_progress .swiper-button-prev:after {width:48px;height:48px;background-size:48px 48px} 
    .main .sec1_inner.on .mainSwiper_progress {height:48px;padding:0}
    .main .mainSwiper.on .mainSwiper_text_wrap {height:48px;line-height:48px}
    .main .sec1_inner .mainSwiper_progress {height:66px}
    .main .sec1_inner .mainSwiper_progress_wrap {margin-top:18px;height:48px}
    .main .sec1_inner.on .mainSwiper_progress_wrap {margin-top:0;margin-bottom:24px}
    .main .sec1_inner .mainSwiper_progress_wrap .in {width:188px}
    .main .sec1_inner .swiper-pagination-fraction {left:64px}
    .main .sec1_inner .mainSwiper_progress .swiper-button-next:after {width:48px;height:48px;background-size:48px 48px}
    .main .sec1_inner .mainSwiper_progress .swiper-button-next {width:48px;height:48px}
    .main .sec1_inner .mainSwiper_progress .swiper-button-prev {width:48px;height:48px}
    .main .sec1_inner .mainSwiper_progress .swiper-button-prev:after {width:48px;height:48px;background-size:48px 48px}
    .main .sec1_inner .mainSwiper_progress .swiper-pagination-fraction {height:48px;line-height:48px}
    .main .sec1_inner .mainSwiper_progress .swiper-control {top:4px;left:100px}

    .main .title {font-size:24px;line-height:36px}
    .main .box {padding:16px 16px 24px;border-radius:16px;margin-left:0;}
    .main .upbox_inner {width:100%;transform:translateX(-50%) translateY(-100px); }
    .main .content .upbox .inner {display:flex;flex-wrap:wrap;justify-content: center;padding:0;margin-top:64px}
    .main .tit {font-size:16px;line-height:32px;}

    .main .upbox .info {width:39%;height:168px;margin-left:0}
    .main .upbox .info dl {margin-top:13px}
    .main .upbox .info dl dt{font-size:20px;line-height:32px}
    .main .upbox .info dl dd {font-size:16px;line-height:26px;margin-top:0}
    .main .upbox .info .img {border-radius:16px}
    .main .upbox .info .img img {object-position: top right ;}
    .main .upbox .announcement {position:relative;width:20%;height:168px;margin-left:12px;top:0;left:auto}
    .main .upbox .announcement dl dd {font-size:18px;line-height:28px;margin-top:19px}
    .main .golink {position:absolute;top:16px;right:16px;display:block;width:32px;height:32px;background:url(../images/common/ico_arrow_right2.svg) no-repeat rgba(255,255,255,.2) center center;background-size:16px 16px;} 
    .main .upbox .disclosure {position:relative;width:32%;height:192px;margin-left:12px;margin-top:0}
    .main .upbox .disclosure .tit {margin-bottom:13px}
    .main .upbox .disclosure .bts {margin-top:-8px;margin-left:-4px}
    .main .upbox .disclosure .bts a {margin-top:8px;margin-left:4px}
    .main .upbox .ir {width:29%;height:188px;margin-top:-16px;margin-left:0;padding-bottom:24px;box-sizing:border-box}
    .main .upbox .ir ul {margin-top:8px}
    .main .upbox .ir ul li {padding:8px 0;} 
    .main .upbox .ir ul li span:first-child {width:48px;margin-right:8px}
    .main .upbox .ir ul li span {font-size:14px;line-height:22px;}
    .main .upbox .ir ul li .txt {width:calc(100% - 56px);}
    .main .upbox .ir ul li:nth-child(4),  .main .upbox .ir ul li:nth-child(5) {display:none}
    .main .upbox .ir ul li:nth-child(3) {border-bottom:0}
    .main .upbox .stock{position:relative;width:30%;;height:188px;left:auto;margin-left:12px;top:auto;margin-top:-16px;padding-bottom:24px;box-sizing:border-box}
    .main .upbox .stock .stock_info {margin-top:16px}
    .main .upbox .stock dl dt {font-size:16px;line-height:26px;}
    .main .upbox .stock dl dd {font-size:22px;line-height:44px;font-weight:700 }
    .main .upbox .stock dl dd strong {font-size:32px;line-height:44px;}
    .main .upbox .stock .num {position:relative;bottom:auto;right:auto;font-size:14px;line-height:22px;text-align:right;margin-top:12px}
    .main .upbox .stock ul {display:none;margin-top:0}
    .main .upbox .rank {position:relative;height:164px;left:auto;width:32%;margin-left:8px;margin-top:8px;top:auto;padding-bottom:24px;box-sizing:border-box}
    .main .rank_swiper {padding:26px 0 0;height:101px}
    .main .upbox .rank .tit {position:absolute;top:16px;left:16px;padding-top:0}
    .main .rank_swiper .swiper-pagination-bullet {margin-left:12px !important;height:26px;font-size:14px}
    .main .rank_swiper .swiper-pagination {position:absolute;top:2px;right:0;width:100%;height:26px;text-align:right;border-bottom:0;font-size:14px}
    .main .rank_swiper .swiper-slide ul {margin:0 14px}
    .main .rank_swiper .swiper-slide ul li {position:relative;width:80px;height:85px}
    .main .rank_swiper .swiper-wrapper {margin-top:16px}
    .main .rank_swiper .round.type1 {background:url(../images/main/round.png) no-repeat top center;background-size:64px 55px;}
    .main .rank_swiper .round.type2 {background:url(../images/main/round.png) no-repeat top center;background-size:64px 55px;}
    .main .rank_swiper .round.type3 {background:url(../images/main/round.png) no-repeat top center;background-size:64px 55px;}
    .main .rank_swiper .round span {display:block;}
    .main .rank_swiper .round .t1 {font-size:16px;line-height:26px;padding-top:16px}
    .main .rank_swiper .round .t2 {font-size:12px;line-height:22px;}
    .main .rank_swiper .round .t3 {font-size:12px;line-height:22px;}
    .main .page_swiper {display:none} 

    .main .upbox2 .box {margin-left:0;box-sizing:border-box}
    .main .upbox2 .esg1 {width:380px}
    .main .esg1 .tit a {padding-right:24px;background:url(../images/common/ico_arrow_right2.svg) no-repeat right center;background-size:16px 16px;}
    .main .esg1 .bts {margin:16px 0 24px -4px}
    .main .esg1 .bts a {max-width:180px;margin-top:8px;margin-left:4px}
    .main .esg1:hover .tit a {color:#24272Dba;background:url(../images/common/ico_arrow_right_bl2.svg) no-repeat right center;background-size:16px 16px}
    .main .esg1:hover .bts a:hover:after {background:url(../images/common/ico_down_white.svg) no-repeat;background-size:16px 16px;width:16px;height:16px;}
 
    .main .upbox2 .box_warp {width:296px}
    .main .upbox2 .box_warp .box {width:100%} 
    .main .indicators_swiper {padding:16px 0;margin-top:12px;height:128px;}
    .main .indicators_swiper dl dt {font-size:16px;line-height:26px;}
    .main .indicators_swiper dd strong{font-size:26px;line-height:38px;margin-top:4px}
    .main .indicators_swiper dd span {font-size:12px; line-height:22px;}
    .main .indicators_swiper dd ul {display:flex;align-items:center;justify-content:center} 
    .main .indicators_swiper dd ul li + li {margin-left:10px}
    .main .indicators_swiper .swiper-pagination-bullet {width:6px;height:6px;}
    .main .esg3 .milestone {font-size:16px;line-height:26px;margin-top:8px;padding-top:2px;height:56px;}
    .main .esg3 .milestone:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_milestone.png) no-repeat;background-size:56px 56px;width:56px;height:56px;}
    .main .esg3:hover .milestone:after {content:'';transform:scale(1.1);}
    .main .activity p {font-size:16px;line-height:26px;margin-top:8px;padding-top:2px;height:56px;box-sizing:border-box}
    .main .activity p:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_together.png) no-repeat;background-size:56px 56px;width:56px;height:56px;}

    .main .upbox3 .inner {max-width:100%;}
    .main .upbox3 .box {margin-left:0;}
    .main .digital {width:272px;}
    .main .digital dt {font-size:18px;line-height:28px;margin:19px 0 8px}
    .main .digital dd {font-size:14px;line-height:22px;}
    .main .group {width:296px;}
    .main .group ul {margin-top:16px}
    .main .group ul li {position:relative;}
    .main .group ul li + li {margin-top:12px}
    .main .group .txt {font-size:14px;line-height:22px;}
    .main .group .date {font-size:14px;line-height:22px;margin-top:0;}
    .main .group .img {width:96px;height:64px;border-radius:16px}
    .main .group .img img {border-radius:16px}
    .main .group:hover ul li .img:hover img{border-radius:16px}  
    .main .group ul li .f_box {height:64px}
    .main .group ul li .mtxt_box {width:calc(100% - 104px)}       
    .main .network {width:296px;margin-top:8px}
    .main .network dl {position:relative;height:56px;margin-top:16px }
    .main .network dl:after{content:'';position:absolute;top:0;right:0;background:url(../images/main/global.png) no-repeat top right;background-size:56px 56px;width:56px;height:56px}
    .main .network dt {font-size:16px;line-height:26px;padding-top:4px;margin:0}
    .main .network dd {font-size:12px;line-height:18px;}
    .main .network:hover dl:after {background:url(../images/main/global_on.png) no-repeat top right;background-size:56px 56px;width:56px;height:56px;transform:scale(1.1);}
    
    .main .upbox4 .box_in .title {margin-bottom:64px}
    .main .info_swiper .swiper-slide {width:289px;height:313px;border-radius:16px;}
    .main .info_swiper .swiper-slide.video{position:relative;width:289px;height:313px}
    .main .info_swiper .swiper-slide.video .video_box {width:100%;height:163px;padding-top:56.25%;box-sizing:border-box;overflow: hidden;}
    .main .info_swiper .swiper-slide.video iframe{border-bottom-left-radius:0;border-top-right-radius:16px}
    .main .info_swiper .swiper-slide.video video{height:auto;border-bottom-left-radius:0;border-top-right-radius:16px;object-fit: fill;}
    .main .info_swiper .video_box + .boxs {width:100%;height:160px;border-bottom-left-radius:16px;;border-top-right-radius:0;}
    .main .info_swiper .swiper-slide a {padding:24px;}
    .main .info_swiper .video_wrap {display:block;}
    .main .info_swiper .boxs .part {font-size:14px;line-height:22px;}
    .main .info_swiper .boxs .tit {display:block;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;line-height:28px;margin-top:0;}
    .main .info_swiper .boxs .date {left:24px;bottom:24px;font-size:14px;line-height:22px;z-index:10}
    .main .info_swiper .boxs .txt {-webkit-line-clamp:5;margin-top:4px}
    .main .info_swiper .boxs .img {display:block;position:absolute;top:0;left:0;right:0;}
    .main .info_swiper .video_box + .boxs:hover {border-bottom-left-radius: 16px;border-top-right-radius: 0;}
    .main .info_swiper .boxs.images a {padding-top:177px}
    .main .info_swiper .boxs.images .img img {width:100%;border-top-left-radius:16px;border-top-right-radius:16px}
    .main .info_swiper .boxs.images .img {border-top-left-radius:16px;border-top-right-radius:16px;height:163px;}
    .main .info_swiper .swiper-slide a:hover {border-radius:16px}
    .main .info_swiper .swiper-button-next {right:40px;width:48px;height:48px}
    .main .info_swiper .swiper-button-next:after {content:'';background:url(../images/main/ico_arrow_right2.png) no-repeat center center;background-size:24px 24px;width:24px;height:24px;}
    .main .info_swiper .swiper-button-prev {left:40px;width:48px;height:48px;}
    .main .info_swiper .swiper-button-prev:after {content:'';background:url(../images/main/ico_arrow_left2.png) no-repeat center center;background-size:24px 24px;width:24px;height:24px;}
    
    .main .roundbt.type2 {height:34px;padding:0 20px;line-height:34px;padding-right:40px;font-size:12px}
    .main .upbox .disclosure .bts .roundbt.ico.type2 {padding-right:48px;background:rgba(0,93,249,.3);}
}  
@media only screen and (max-device-width:1180px) and (max-device-height:820px) {
    .main .upbox_inner { transform: translateX(-50%) translateY(-130px);}
}
@media (max-width:1024px){
    .mopen .main .btn_menu.mopen {background:url(../images/common/menu_ico_cbl.svg) no-repeat center center;background-size:32px 32px}
    .main #header.init_bg.down .btn_menu {background:url(../images/common/menu_ico_cbl.svg) no-repeat center center;background-size:32px 32px}
    .mopen .main #header.init_bg.down .btn_menu {background:url(../images/common/menu_ico_cbl.svg) no-repeat center center;background-size:32px 32px}
    .mopen .main #header.down .btn_menu {background:url(../images/common/menu_ico_cbl.svg) no-repeat center center;background-size:32px 32px}
    .mopen .main #header .btn_menu .line:nth-child(1){background-color: #24272D;}
    .mopen .main #header .btn_menu .line:nth-child(3){background-color: #24272D;} 
    .main #header .inner .logo a { background: url(../images/common/logo_wh.svg) no-repeat center center; background-size: 122px 24px;}  
    .main #header.down .inner .logo a { background: url(../images/common/logo.svg) no-repeat center center; background-size: 122px 24px;}  
    .main #header.down {background:#fff}
    .main #header.init_bg.down {background:#fff;}  
    .main #header.init_bg.down .btn_menu {background: url(../images/common/menu_ico.svg) no-repeat center center;}
    .main #header .inner {transition:none;height:64px !important}
    body.mopen .main #header {background:#fff}
}

@media (max-width:1023px){
    .main .intro_wrap .introt p {font-size:28px;line-height:38px;}
    .main .intro_wrap .introt .mask_box {width: 0;}
    .main .intro_wrap.on .introt .mask_box {width: 70vw;}

    .main .section.sec2 {min-height:578px}
    .main .section.sec3 {min-height:578px}
    .main .section .imgBig {width:100%; height: 100vh;}

    .main .section.sec1 .scrollbt {display:none !important}
    .main .mainSwiper {position:-webkit-sticky;position:sticky; left: 0; top: 0; height: 100vh;}
    .main .section {height:auto !important;overflow:inherit;}
    .main .upbox_inner {position:relative;width:100%;left:auto;top:auto; transform: none;}
    .main .sec1_inner.on .upbox_inner {width:100%;left:auto;top:auto;transform: none;}
    .main .content .upbox .inner {padding: 100vh 56px 64px;margin:0;display:block;overflow:hidden; transition: padding-top .3s;}
    .main .content .sec1_inner.on .upbox .inner { padding-top: calc(100vh - 32px)}
    .main .content .upbox .inner .box {width:100%;margin-left:0}
    .main .mainSwiper_progress_box {top: calc(100vh - 290px);height:184px;}
    .main .sec1_inner.on .mainSwiper_progress_box {top: calc(100vh - 186px);height:136px;}
    .main .sec1_inner .mainSwiper_progress_box {padding:0;}
    .main .mainSwiper_progress {display:block;text-align:center}
    .main .sec1_inner .mainSwiper_progress {height:auto; transform: translateY(100%);}
    .main .sec1_inner.on .mainSwiper_progress {height:auto; transform: translateY(0);}
    .main .mainSwiper::before {bottom: 0;}
    .main .sec1_inner .mainSwiper_text_wrap {height:120px; transition: .3s;}
    .main .sec1_inner .mainSwiper_text_wrap br {display:block}
    .main .sec1_inner.on .mainSwiper_text_wrap {height: 72px;}
    .main .sec1_inner.on .mainSwiper_progress_wrap {margin-bottom:0}
    .main .sec1_inner.on .mainSwiper_progress .mainSwiper_text_wrap h2{font-size:24px;line-height:36px}
    .main .sec1_inner .mainSwiper_progress .mainSwiper_text_wrap h2 {font-size:24px;line-height:36px}
    .main .sec1_inner .mainSwiper_progress .mainSwiper_text_wrap p {opacity:1;font-size:14px;line-height:22px}
    .main .sec1_inner.on .mainSwiper_progress .mainSwiper_text_wrap p {opacity:0;font-size:14px;line-height:22px}
    .main .sec1_inner .mainSwiper_progress_wrap {display:block;height:48px;width:188px;margin:16px auto 0}
    .main .sec1_inner .mainSwiper_progress_wrap .in {width:auto}
    .main .sec1_inner .mainSwiper_text_wrap > div {width:100%; transform: translateY(0); text-align:center;}

    .main .box {padding:24px;}
    .main .upbox .info {height:auto}
    .main .upbox .info dl {margin-top:10px}
    .main .upbox .info .img img {object-position: bottom right ;}
    .main .upbox .announcement dl dd {margin-top:16px;}
    .main .upbox .disclosure {margin-top:16px;height:auto}
    .main .upbox .disclosure .bts a {letter-spacing:0}
    .main .upbox .disclosure .tit {margin-bottom:10px}
    .main .upbox .announcement {margin-top:16px;height:auto}
    .main .upbox .ir {margin-top:16px;height:auto}
    .main .upbox .ir ul li {padding:12px 0}
    .main .upbox .ir ul li span {font-size:16px;line-height:26px}
    .main .upbox .stock {margin-top:16px}
    .main .upbox .stock .num {margin-top:0}
    .main .upbox .stock dl dt {font-size:18px;line-height:28px}
    .main .upbox .stock .up:before {top:7px}
    .main .upbox .stock .down:before {top:8px}
    .main .upbox .rank {height:auto;margin-top:16px}
    .main .upbox .rank .tit {width:auto;top:24px;left:24px}
    .main .rank_swiper {padding:42px 0 0;height:167px}
    .main .rank_swiper .swiper-wrapper {margin-top:24px }
    .main .rank_swiper .swiper-pagination {font-size:16px;border-bottom:1px solid rgba(255, 255, 255, .15);height:43px}
    .main .rank_swiper .swiper-pagination-bullet {margin-left:12px}
    .main .rank_swiper .swiper-pagination-bullet-active:before {bottom:3px}
    .main .rank_swiper .swiper-slide ul {margin:0}
    .main .rank_swiper .round .t1 {font-size:18px;line-height:28px;padding-top:23px}
    .main .rank_swiper .swiper-slide ul li {width:88px;height:100px;}
    .main .rank_swiper .round.type1 {background:url(../images/main/round.png) no-repeat top center;background-size:80px 70px;text-align:center}
    .main .rank_swiper .round.type2 {background:url(../images/main/round.png) no-repeat top center;background-size:80px 70px;text-align:center}
    .main .rank_swiper .round.type3 {background:url(../images/main/round.png) no-repeat top center;background-size:80px 70px;text-align:center}
    .main .page_swiper {bottom:24px;}

    .main .sec3_inner2 {position:relative; left: 0; top: 0; width: 100%; transform:none;}
    .main .title {position:relative; padding-top:0;text-align:center;padding-top:0;transform:none;top:auto;left:auto;text-align:center;font-size:24px}
    .main .title strong {display:block}
    .main .upbox2 {position: relative;padding: 0 56px 64px; transform: translate( 0 , 0);left:auto;right:auto;top:auto;}
    .main .upbox3 {position: relative;padding: 0 56px 64px; transform: translate( 0 , 0);left:auto;right:auto;top:auto;}
    .main .upbox2 .esg1 {width:100%}
    .main .esg1 .bts {flex-direction:column;align-items:flex-start;margin:-8px 0 24px -4px}
    .main .esg1 .bts a {margin-top:8px;margin-left:4px;letter-spacing:0;display:block;}
    .main .indicators_swiper {padding:24px 0;margin-top:16px;height:154px}
    .main .indicators_swiper dl dt {font-size:20px;line-height:32px}
    .main .indicators_swiper dd strong {font-size:32px;line-height:44px}
    .main .indicators_swiper dd span {font-size:14px;line-height:22px}
    .main .esg3 .milestone {margin-top:12px;padding-top:4px;font-size:18px;line-height:28px;height:64px}
    .main .esg3 .milestone:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_milestone.png) no-repeat;background-size:64px 64px;width:64px;height:64px; transition: transform .3s;}
    .main .esg3:hover .milestone:after {content:'';transform:scale(1.1);}
    .main .activity p {font-size:18px;line-height:28px;margin-top:12px;padding-top:4px;height:64px;box-sizing:border-box}
    .main .activity p:after {content:'';position:absolute;right:0;top:0;background:url(../images/main/ico_together.png) no-repeat;background-size:64px 64px;width:64px;height:64px; transition: transform .3s;}
    .main .upbox2 .box_warp {width:100%;margin-top:16px}
    .main .sec2_inner .title {transform: translateX(0);padding-top:118px;margin-bottom:80px;top:auto}
    .main .sec3_inner .title {transform: translateX(0);padding-top:118px;margin-bottom:48px;top:auto}
    .main .sec4_inner .title {transform: translateX(0);padding-top:118px;margin-bottom:56px;top:auto}

    .main .upbox2 .inner {display:block;}
    .main .upbox3 .inner {display:block}
    .main .sec2_inner .imgBig {padding:0;position:-webkit-sticky;position:sticky; left: 0; top: 0; transition: none;}
    .main .sec2_inner.on .imgBig {padding:0;border-radius:0;}
    .main .sec2_inner.on .imgBig img {border-radius:0}
    .main .sec2_inner {position: static; height: auto;}
    .main .sec3_inner {position: static; height: auto;}
    .main .sec3_inner .imgBig {padding:0;position:-webkit-sticky;position:sticky; left: 0; top: 0; transition: none;}
    .main .sec3_inner .imgBig img {border-radius:0}
    .main .sec3_inner.on .imgBig {padding:0;border-radius:0;}
    .main .sec3_inner.on .imgBig img {border-radius:0}
    .main .sec4_inner .imgBig {padding:0;border-radius:0;position:absolute; transition: none !important;}
    .main .sec4_inner.on .imgBig  {border-radius:0}
    .main .section.sec4 {height:100vh;}
    .main .section.sec4 .imgBig {padding: 0;}
    .main .section.sec4 .imgBig img {border-radius: 0;object-fit: cover;object-position:center bottom;}

    .main .upbox4 {position: relative; left: 0; top: 0; width: 100%; transform: translateY(0);padding-bottom:194px}
    .main .digital {width:100%}
    .main .digital dt {margin:16px 0 8px;font-size:18px;line-height:28px}
    .main .group {width:100%;margin-top:16px}
    .main .network {width:100%;margin-top:16px}
    .main .network dt {font-size:18px;line-height:28px}
    .main .network dd {font-size:14px;line-height:22px}
    .main .group .img {width:120px;height:80px}
    .main .group ul li {height:80px}
    .main .group ul li + li {margin-top:16px}   
    .main .group ul li a {display:block;padding-top:7px;box-sizing:border-box;}
    .main .group .txt {font-size:16px;line-height:26px}
    .main .group ul li .f_box {height:80px}
    .main .group ul li .mtxt_box {width:calc(100% - 136px)}
    .main .sec2_inner.on .imgBig,
    .main .sec3_inner.on .imgBig,
    .main .sec4_inner.on .imgBig {transition: none;}
    .main .page_swiper {display:block} 
    .info_swiper .swiper-button-next {display:none}
    .info_swiper .swiper-button-prev {display:none}
    .main .upbox .ir ul li:nth-child(3) {border-bottom: 1px solid rgba(255, 255, 255, .15);}
    .main .upbox .ir:hover ul li:nth-child(3) {border-bottom:1px solid rgba(36,39,45,.15);}
    .main .upbox .ir ul li:nth-child(4), .main .upbox .ir ul li:nth-child(5) {display:block}
    .main .golink {top:24px;right:24px;display:block;} 
    .main .upbox {position: relative; height: auto; margin-top: -100vh;}
    .main .upbox2 .box_warp .box + .box {margin-top:16px}

    .main .sec1_inner {position: static; height: auto;}
    .main .section .imgBig img {border-radius: 0;}
    .main .sec2_inner2 {margin-top: -100vh;}
    .main .sec3_inner2 {margin-top: -100vh;}
    .main .indicators_swiper .swiper-button-next {display:none}
    .main .indicators_swiper .swiper-button-prev {display:none}
    
}
@media (max-width:767px){
    .popup_notice {width:auto;left:16px;bottom:16px;right:16px;}
    .popup_notice .notice_cont .tit {font-size:22px;line-height:34px}
    .popup_notice .today button {font-size:14px}
    .main .content .upbox .inner {padding: 100vh 16px 64px;}
    .main .upbox2 {padding: 0 16px 64px;}
    .main .upbox3 {padding: 0 16px 64px;}
    .main .indicators_swiper dd ul li + li{margin-left:18px;}
}