@charset "utf-8";

/* skip nav */
.skip-nav { position:absolute; left:0; top:-50px; z-index:9999; }
.skip-nav li {width:200px;}
.skip-nav a { position:absolute; left:0; top:0; display:block; width:100%; height:50px; line-height:50px; color:#fff; background:#002960; text-align:center;}
.skip-nav a:focus { top:50px; }

#wrap{min-width:280px;}

/* header */
#header{height:80px; position:fixed; left:0; top:0; right:0; z-index:90; border-bottom:1px solid var(--color-gray9); transition:all 0.3s; box-sizing:border-box;}

.header-inner{margin:0 auto; display:flex; box-sizing:border-box;}
.header-inner h1{height:80px; position:absolute;left:60px;top:0;}
.header-inner h1 a{display:flex; width:168px; height:100%; background:url(../images/layout/logo.svg) center center / 100% auto no-repeat; text-align:left; text-indent:-9999px;}

#gnav{height:80px; max-width:1200px; margin:0 auto;}
#gnav .gnav-list{display:flex; height:100%; width:1200px;}
#gnav .gnav-list > li:first-child{margin-left:-24px; }
#gnav .gnav-list a{height:100%; font-size:16px; font-weight:500; padding:0 24px; display:flex; align-items:center; position:relative; white-space:nowrap;}
#gnav .gnav-list a:hover,
#gnav .gnav-list .active a{font-weight:700; color:var(--color-blue1); }

#gnav .outlink:after{display:block; content:''; width:7px; height:7px; background:url(../images/layout/i_outlink_gnav.svg) -27px 0 no-repeat; position:absolute; right:8px; top:33px; opacity:0; visibility: hidden;}
#gnav .outlink:hover:after{opacity:1; visibility:visible;}

.header-util{position:absolute; right:50px; top:20px; display:flex; align-items: center; box-sizing:border-box;}
.lang-wrap{height:40px; position:relative; z-index:92;}
.lang-wrap .btn-lang{width:40px; height:40px; overflow:hidden; text-align:left; text-indent:-9999px;}
.lang-wrap .btn-lang:before{display:block; content:''; width:20px; height:20px; background:url(../images/layout/i_lang.svg) -40px 0 no-repeat; position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px;}
.lang-wrap .lang-options{position:absolute; right:0; top:40px; background-color:#fff; border-radius:8px; padding:6px 0; width:100px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.1); display:none;}
.lang-wrap .lang-options a{display:block; height:40px; line-height:40px; text-align:center; font-size:14px;}
.lang-wrap .lang-options a:hover{background-color:var(--color-blue4);}
.lang-wrap .lang-options a.selected{color:var(--color-blue1); font-weight:700;}
.lang-wrap.active .lang-options{display:block;}
.lang-wrap.active .btn-lang:before{background-position:-80px 0;}

.btn-menu{width:40px;height:40px; overflow:hidden; text-align:left; text-indent:-9999px; position:relative; display:none;}
.btn-menu:before{display:block; content:''; width:20px; height:20px; background:url(../images/layout/i_menu.svg) -40px 0 no-repeat; position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px;}


#header.scrolled{background-color:#fff;}
.scrolled h1 a{background-image:url(../images/layout/logo.svg);}
.scrolled .lang-wrap .btn-lang:before{background-position:-40px 0;}

#header.up{top:-80px; border-bottom:none !important;}

.main #header{border:none; background:none;}
.main h1 a{background-image:url(../images/layout/logo_w.svg);}
.main #gnav .gnav-list a{color:#fff;}
.main #gnav .gnav-list a:hover{color:#fff; font-weight:700;}
.main #gnav .gnav-list .outlink:hover:after{background-position:0 0;}
.main .lang-wrap .btn-lang:before{background-position:0 0;}
.main .btn-menu:before{background-position:0 0;}

.main #header.scrolled {background-color:#fff;}
.main .scrolled h1 a{background-image:url(../images/layout/logo.svg);}
.main .scrolled #gnav .gnav-list > li > a{color:var(--color-gray2);}
.main .scrolled #gnav .gnav-list > li > a:hover{color:var(--color-blue1);}
.main .scrolled #gnav .gnav-list > li.active > a{color:var(--color-blue1) !important;}
.main .scrolled #gnav .gnav-list .outlink:hover:after{background-position:-27px 0;}
.main .scrolled .lang-wrap .btn-lang:before{background-position:-40px 0;}
.main .scrolled .lang-wrap.active .btn-lang:before{background-position:-80px 0;}
.main .scrolled .btn-menu:before{background-position:-40px 0;}

/* mobile */
.m-gnav{position:fixed; width:100vw; height:100vh; background-color:#fff; z-index:90; display:none;}
.m-gnav h1{height:56px; width:126px; margin-left:20px;}
.m-gnav h1 a{display:block; height:56px; width:126px; background:url(../images/layout/logo.svg) center center / 100% auto no-repeat; text-align:left; text-indent:-9999px; }
.m-gnav-list{padding-top:20px;}
.m-gnav-list a{display:flex; align-items: center; height:64px; padding:0 20px; font-size:20px; font-weight:600;}
.m-gnav-list a.outlink:after{display:block; content:''; width:16px; height:16px; background:url(../images/layout/i_outlink_m.svg) 0 0 no-repeat; margin:-6px 0 0 8px;}
.btn-menu-close{width:40px;height:40px; overflow:hidden; text-align:left; text-indent:-9999px; position:relative; background:url(../images/layout/i_menu_close.svg) center center no-repeat; position:absolute; right:10px;top:8px;}

.m-gnav.active{display:block;}

/* sub */
.sub-container{padding-top:80px;}


/* footer */
#footer{background-color:#fff; border-top:1px solid var(--color-gray9); padding:50px 0; box-sizing:border-box;}
.footer-inner{max-width:1200px; margin:0 auto; position:relative;}

.f-links{display:flex; align-items:center; margin-bottom:24px;}
.f-links li{position:relative;}
.f-links li + li{margin-left:36px;}
.f-links li a{font-size:16px; line-height:24px; font-weight:700;}
.f-links li a:hover{color:var(--color-blue1);}

.f-contact{font-size:14px; line-height:24px; color:var(--color-gray6); margin-bottom:24px;}
.f-contact ul{display:flex; flex-wrap:wrap;}
.f-contact ul li{margin-right:20px;}
.f-contact .addr{width:100%;}

.f-copyright{font-size:14px; line-height:24px; color:var(--color-gray6);}

.f-outer-links{position:absolute;right:0;bottom:0;top:0; display:flex; flex-wrap:wrap;}

.f-site-group{position:relative;}
.f-family-site{height:28px; position:relative; display:inline-block; vertical-align:top;}
.f-family-site.active:before{display:block;content:'';left:0;right:0;bottom:100%;height:10px; position:absolute;}
.f-family-site button{height:28px; line-height:28px; text-align:left; font-size:16px; position:relative; display:flex; align-items:center; font-weight:bold;}
.f-family-site button:after{display:block; content:''; width:28px; height:28px; border-radius:50%; background-color:#36363D; background-position:center; background-repeat:no-repeat; background-image:url(../images/layout/i_site_plus_4x.png); margin-left:16px; transition:transform 0.3s; background-size:10px 10px;}
.f-family-site button:hover:after{background-color:var(--color-blue1);}
.family-site-list{position:absolute; right:0; bottom:calc(100% + 10px); box-sizing:border-box; z-index:11; display:none;}
.family-site-list ul{background-color:#fff; border-radius:10px; padding:12px 0; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);}
.family-site-list a{height:32px; font-size:14px; padding:0 20px; white-space:nowrap; display:flex; align-items:center;}
.family-site-list a:hover{color:var(--color-blue1); font-weight:700; background-color:var(--color-blue4);}
.family-site-list a:hover:after{display:block;content:'';width:7px;height:7px; background:url(../images/layout/i_site_outlink.svg) 0 0 no-repeat; margin-left:5px; margin-top:-3px;}
.f-family-site.active button:after{transform:rotate(45deg); background-color:var(--color-blue1);}
.f-family-site.active .family-site-list{display:block;}
.f-family-site.service{margin-left:40px;}
.f-family-site.family .family-site-list{width:180px;}
.f-family-site.service .family-site-list{width:200px;}

.f-sns{position:absolute;right:0;bottom:0;}
.f-sns ul{display:flex;}
.f-sns li + li{margin-left:10px }
.f-sns a{display:block; width:40px;height:40px; position:relative; box-sizing:border-box; border:1px solid #E9E9E9; border-radius:50%; text-align:left; text-indent:-9999px; overflow:hidden;}
.f-sns a:before{display:block; width:20px;height:20px; content:''; position:absolute;left:50%;top:50%; margin:-10px 0 0 -10px; background-image:url(../images/layout/i_sns.svg); background-repeat:no-repeat;}
.f-sns .blog:before{background-position:0 0;}
.f-sns .blog:hover:before{background-position:0 -30px;}
.f-sns .youtube:before{background-position:-30px 0;}
.f-sns .youtube:hover:before{background-position:-30px -30px;}
.f-sns .facebook:before{background-position:-60px 0;}
.f-sns .facebook:hover:before{background-position:-60px -30px;}
.f-sns .linkedin:before{background-position:-90px 0;}
.f-sns .linkedin:hover:before{background-position:-90px -30px;}
.f-sns .mu:before{background-position:-120px 0;}
.f-sns .mu:hover:before{background-position:-120px -30px;}

.go-top{position:fixed; right:40px; bottom:40px; display:block; width:64px;height:64px; box-sizing:border-box; border:1px solid #F2F2F2; border-radius:50%; text-align:left; text-indent:-9999px; background-color:#fff; z-index:10; overflow:hidden; transition:all 0.3s; display:none;}
.go-top:before,
.go-top:after{display:block; content:''; width:24px;height:24px; background:url(../images/layout/i_gotop.svg) 0 0 no-repeat; position:absolute;left:50%;top:50%; margin:-12px 0 0 -12px; transition:top 0.3s;}
.go-top:after{background-position:-44px 0;}
.go-top:before{top:50%;}
.go-top:after{top:150%;}
.go-top:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.go-top:hover:before{top:-50%;}
.go-top:hover:after{top:50%;}
.go-top.on{display:block;}

/* sub ******************************************************************* */

/* lnav */
.sub-lnav{height:80px; position:sticky; top:80px; z-index:5; background-color:#fff; transition:top 0.3s;}
.sub-lnav .lnav-inner{background-color:#fff; height:80px; position:relative; overflow-X:auto; overflow-y:hidden; width:100%; box-sizing:border-box; }
.sub-lnav .lnav-list{max-width:1200px; margin:0 auto; display:flex; box-sizing:border-box; white-space:nowrap;}
.sub-lnav li{margin-right:28px;}
.sub-lnav li:first-child{margin-left:-10px;}
.sub-lnav li:last-child{margin-right:0;}
.sub-lnav a{display:block; height:80px; line-height:80px; font-size:16px; position:relative; padding:0 10px; color:var(--color-gray2); font-weight:500;}
.sub-lnav a:hover{color:var(--color-blue1);}
.sub-lnav .active a{color:var(--color-blue1); font-weight:700;}
.sub-lnav .active a:after{display:block;content:'';height:4px;background-color:var(--color-blue1); position:absolute;left:10px;right:10px;bottom:0;}
.sub-lnav .lnav-inner.fixed{position:fixed; left:0; top:0; right:0;}

.con-title{font-size:44px; line-height:1.27em; letter-spacing:-0.02em; font-weight:700; }
.big-title{font-size:24px; line-height:1.33em; font-weight:700;}
.md-title{font-size:20px; line-height:1.4em; font-weight:700;}
.sub-txt{font-size:18px; line-height:1.44em; color:var(--color-gray5);}

.sub-section{padding:80px 0;}
.sub-section > .inner{max-width:1200px; margin:0 auto;}
.sub-section .sec-title{text-align:center; margin-bottom:80px;}
.sub-contents .sub-section:last-child{padding-bottom:160px;}

/* 회사소개 */
.intro-front{text-align:center; padding:80px 0 120px;}
.intro-front > .inner{max-width:1200px; margin:0 auto;}
.intro-front .intro-txt{margin-bottom:50px;}
.intro-front .con-title{margin-bottom:20px;}

.intro-front .intro-iframe{position:relative; padding-top:56.25%;}
.intro-front .intro-iframe iframe{position:absolute;left:0;top:0;width:100%;height:100%;}

.intro-front .intro-video{position:relative;}
.intro-front .intro-video video{width:100%; height:675px; border-radius:10px;}
.intro-front .intro-video .btn-play{width:60px;height:60px; text-align:left; text-indent:-9999px; position:absolute;left:50%;top:50%; transform:translate(-50%, -50%); background:url(../images/contents/i_video_play.svg) center center no-repeat; z-index:10;}
.intro-front .intro-video video::-webkit-media-controls-fullscreen-button {display:none;}
.intro-front .intro-video video::-webkit-media-controls-play-button {display:none;}
.intro-front .intro-video video::-webkit-media-controls-mute-button {display:none;}
.intro-front .intro-video video::-webkit-media-controls-volume-slider {display:none;}

/* 회사정보 */
.compnay-info{display:flex; flex-wrap:wrap; margin:0 -12px;}
.compnay-info li{/*width:384px;*/ width:calc(100% / 3 - 24px); margin:0 12px; border-top:2px solid var(--color-gray1); padding:20px 0}
.compnay-info li:nth-child(3) ~ li{margin-top:60px;}
.compnay-info .md-title{margin-bottom:4px;}
.compnay-info p{font-size:18px; line-height:1.44em;}

/* 로고 */
.logo-intro{display:flex; margin:0 -12px;}
.logo-intro .logo-item{width:calc(50% - 24px); margin:0 12px;}
.logo-intro .img{height:320px; border:1px solid var(--color-gray8); border-radius:10px; display:flex; align-items: center; justify-content: center; margin-bottom:20px; box-sizing:border-box;}
.logo-intro .md-title{margin-bottom:8px;}
.logo-intro .logo-item.logo .img img{width:240px;}
.logo-intro .logo-item.symbol .img img{width:120px;}

.down-group{text-align:center; margin-top:60px; display:flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.down-group .btn-round{margin:0 8px;}

.btn-round{height:50px; border:2px solid var(--color-gray1); box-sizing:border-box; border-radius:25px; text-align:center; display:inline-flex; align-items: center; justify-content: center; color:var(--color-gray1); font-size:16px; line-height:1.5em; padding:0 32px; font-weight:700; min-width:120px;}
.btn-round[class*='i-']{padding:0 28px 0 32px;}
.btn-round[class*='i-']:after{display:inline-block;content:''; width:20px; height:20px; margin-left:4px;}
.btn-round.i-down:after{background:url(../images/contents/i_down.svg) 0 0 / auto 20px no-repeat; margin-top:-1px;}
.btn-round.i-outlink:after{background:url(../images/contents/i_outlink.svg) 0 0 / auto 20px no-repeat; margin-top:-1px;}
.btn-round.gray {border:0;background-color: #999; color:#fff;}
.btn-round.disabled{opacity:0.2;}
.btn-round:not(.disabled):hover{border-color:var(--color-blue1); background-color:var(--color-blue1); color:#fff;}
.btn-round.i-down:not(.disabled):hover:after{background-position:-80px 0;}
.btn-round.i-outlink:not(.disabled):hover:after{background-position:-80px 0;}


/* 연혁 */
.sec-history{background-color:var(--color-blue4); overflow:hidden; margin:80px 0; padding:120px 0;}
.history-item{position:relative; width:486px; padding-right:24px;}
.history-item:before{display:block;content:'';width:24px;height:24px; border-radius:50%; background-color:var(--color-blue1); margin-bottom:16px;}
.history-item .year{font-size:40px; line-height:1.3em; font-weight:700; margin-bottom:4px;}
.history-item .copy{font-size:20px; line-height:1.4em; font-weight:700; margin-bottom:12px;}
.history-item .event{font-size:18px; line-height:1.44em; color:var(--color-gray5);}
.history-item .event li + li{margin-top:2px;}
.history-item .event li{position:relative; padding-left:11px;}
.history-item .event li:before{display:block;content:''; width:3px;height:3px; border-radius:50%; background-color:var(--color-gray4); position:absolute;left:0;top:0.72em;}

.history-wrap .swiper-slide:before{display:block;content:''; height:2px; background-color:var(--color-gray1); position:absolute;left:0;right:0;top:11px;}
.history-wrap .swiper-slide:last-child:before{display:none;}
.history-swiper-control{margin-top:64px; display:flex; align-items: center;}
.history-swiper-control button{width:56px;height:56px; border:2px solid var(--color-gray1); box-sizing:border-box; text-align:left; text-indent:-9999px; border-radius:50%; transition:opacity 0.3s;}
.history-swiper-control button.swiper-button-disabled{opacity:0.2;}
.history-swiper-control .btn-swiper-prev{background:url(../images/contents/i_history_slider_prev.svg) center center no-repeat;}
.history-swiper-control .btn-swiper-next{background:url(../images/contents/i_history_slider_next.svg) center center no-repeat; margin-left:8px;}

/* 자회사 */
.sec-subsidiary{overflow:hidden;}
/* .subsidiary-wrap{max-height:578px;} 2023-05-02 줄삭제 */
.subsidiary-wrap li{box-sizing:border-box; border:1px solid var(--color-gray9); border-radius:10px; overflow:hidden; transition:transform 0.3s; width:384px; height:auto; display:flex; flex-direction: column;}
.subsidiary-wrap .photo{flex-shrink:0;}
.subsidiary-wrap .photo img{width:100%;}
.subsidiary-wrap .info{padding:40px; box-sizing:border-box; height:100%; display:flex; flex-direction: column;}
.subsidiary-wrap .info .logo{text-align:center; height:60px; display:flex; align-items: center; justify-content: center; margin-bottom:24px;}
.subsidiary-wrap .info .logo img{max-width:100%;}
.subsidiary-wrap .info .sub-desc{font-size:16px; line-height:1.5em; color:var(--color-gray5); margin-bottom:24px; word-break:break-all;}
.subsidiary-wrap .info .go-site{font-size:16px; line-height:1.5em; color:var(--color-gray1); display:inline-flex; align-items: center; font-weight:700; margin-top:auto;}
.subsidiary-wrap .info .go-site:after{display:block;content:'';width:20px;height:20px; margin-left:4px; background:url(../images/contents/i_outlink.svg) 0 0 no-repeat; margin-top:-1px;}
.subsidiary-wrap .info .go-site:hover{color:var(--color-blue1);}
.subsidiary-wrap .info .go-site:hover:after{background-position:-40px 0;}

.subsidiary-wrap li:hover{box-shadow: 2px 32px 40px rgba(0, 0, 0, 0.05); transform:translateY(-20px);}
.subsidiary-paging{display:flex; align-items: center; justify-content: center; margin-top:24px; display:none;}
.subsidiary-paging .swiper-pagination-bullet{width:40px;height:4px; background-color:var(--color-gray9); margin:0 2px;}
.subsidiary-paging .swiper-pagination-bullet-active{background-color:var(--color-blue1);}

/* 위치 */
.company-map .map-info{margin-top:20px; position:relative;}
.company-map .map-info .addr{font-size:16px; line-height:1.5em; color:var(--color-gray5);}
.company-map .map-info .addr-en{font-size:14px; line-height:1.71em; color:var(--color-gray7); margin-top:2px;}
.map-viewer{border-radius:10px; overflow:hidden;}
.btn-addr-copy{width:20px;height:20px; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../images/contents/i_copy.svg) center center no-repeat; display:none;}

.toast-popup{position:absolute; left:50%; top:-88px; width:232px; height:44px; transform:translateX(-50%); display:flex; align-items: center; justify-content: center; background-color:rgba(33,33,38,0.8); color:#fff; font-size:16px; font-weight:500; border-radius:4px; z-index:10; display:none;}
.toast-popup.active{display:flex;}

#div_map{border-radius:10px;}

/* 서비스 */
.sub-sec-service .sec-title{margin-bottom:60px; margin-top:160px;}
.sub-sec-service .sec-title:first-child{margin-top:0;}
.sub-sec-service .con-title{margin-bottom:12px;}
.sub-sec-service .go-link{text-align:center; margin-top:32px;}
.sub-sec-service .service-photo{margin-bottom:40px; overflow:hidden;}
.sub-sec-service .service-photo img{border-radius:10px; max-width:100%;}

/* .sub-sec-service{position:relative; z-index:1;}
.sub-sec-service:target{margin-top:-160px; padding-top:240px; position:relative; z-index:0;} */

.service-photo-slider{border-radius:10px; overflow:hidden; position:relative;}
.service-photo-slider .swiper-slide{width:100%;}
.service-photo-slider .pagination{border-radius:10px; overflow:hidden; display:flex; align-items: center; position:absolute; left:50%; bottom:24px; z-index:2; transform:translateX(-50%);}
.service-photo-slider .swiper-pagination-bullet{display:block; width:40px;height:4px; background-color:#fff; margin:0 2px; opacity:0.7;}
.service-photo-slider .swiper-pagination-bullet-active{background-color:var(--color-blue1); opacity:1;}

.sertive-intro-items{border:1px solid var(--color-gray8); border-radius:10px; display:flex; padding:14px 8px;}
.sertive-intro-items li{text-align:left; display:flex; align-items: center; font-size:18px; line-height:1.44em; padding:20px 16px; width:calc(33.33% - 48px); margin:0 24px; box-sizing:border-box; position:relative; }
.sertive-intro-items li:before{display:block; content:''; width:72px; height:72px; flex-shrink:0; margin-right:20px; background-size:auto 72px; background-repeat:no-repeat;}
.sertive-intro-items li p{width:calc(100% - 92px);}
.sertive-intro-items p span{font-weight:700;}
.sertive-intro-items li + li:after{display:block; content:'';width:1px; height:76px; background-color: var(--color-gray9); position:absolute; left:-24px; top:50%; margin-top:-38px;}
.sertive-intro-items.cloud li:before{background-image:url(../images/contents/i_service_info_cloud.png);}
.sertive-intro-items.data-center li:before{background-image:url(../images/contents/i_service_info_datacenter.png);}
.sertive-intro-items.hosting li:before{background-image:url(../images/contents/i_service_info_hosting.png);}
.sertive-intro-items.ai li:before{background-image:url(../images/contents/i_service_info_ai.png);}
.sertive-intro-items .item1:before{background-position:0 0;}
.sertive-intro-items .item2:before{background-position:-92px 0;}
.sertive-intro-items .item3:before{background-position:-184px 0;}

.sertive-intro-items.cloud .item1 span{display:block;}
.sertive-intro-items.data-center .item3 span{display:block;}

html[lang=en] .sertive-intro-items li,
html[lang=ja] .sertive-intro-items li{padding:20px 0 20px 16px;}

/* 홍보 */
.pr-list{position:relative;}
.pr-list ul{display:flex; flex-wrap:wrap; margin:-12px;}
.pr-list li{width:calc(25% - 24px); margin:12px;}
.pr-list a{display:flex; flex-direction: column; height:100%; box-sizing:border-box;}
.pr-list .photo{display:block; height:0; position:relative; padding-top:56.7%; flex-shrink: 0; margin-bottom:12px;}
.pr-list .photo img{width:100%; height:100%; position:absolute;left:0;top:0; border-radius:8px; transition:all 0.2s;}
.pr-list .title{font-size:16px; line-height:1.5em; color:var(--color-gray1); font-weight:700; text-overflow:ellipsis; overflow:hidden; margin-bottom:8px;}
.pr-list .title .i-new{margin-left:1px; margin-top:-1px; vertical-align:middle;}
.pr-list .date{font-size:14px; line-height:1.71em; color:var(--color-gray5); margin-top:auto;}
.pr-list a:hover .photo img{top:-8px; box-shadow:0 8px 16px rgba(0,0,0,0.12);}
.pr-list a:hover .title{color:var(--color-blue1);}

i.i-new{display:inline-block; width:16px; height:16px; text-align:left; text-indent:-9999px; overflow:hidden; background:url(../images/contents/i_new.svg) 0 0 / cover no-repeat;}

.pr-list li:nth-child(4) ~ li{margin-top:48px;}

.paging{margin-top:60px;}
.paging ul{display:flex; align-items: center; justify-content: center;}
.paging li + li{margin-left:10px;}
.paging a{display:flex; align-items: center; justify-content: center; text-align:center; min-width:30px; height:30px; font-size:18px; color:var(--color-gray1); }
.paging a:hover{border-radius:4px; background-color:var(--color-blue4);}
.paging a.selected{font-weight:700; color:var(--color-blue1);}
.paging .page a{text-align:left; text-indent:-9999px; overflow:hidden; position:relative;}
.paging .page a:before{display:block; content:''; width:16px; height:16px; background-repeat:no-repeat; background-image:url(../images/contents/paging_arr.svg); position:absolute;left:50%;top:50%; margin:-8px 0 0 -8px; }
.paging .page.prev a:before{background-position:0 0; }
.paging .page.prev a:hover:before{background-position:0 -52px; }
.paging .page.prev a.disabled:before,
.paging .page.prev a.disabled:hover:before{background-position:0 -26px; }

.paging .page.next a:before{background-position:-26px 0;}
.paging .page.next a:hover:before{background-position:-26px -52px;}
.paging .page.next a.disabled:before,
.paging .page.next a.disabled:hover:before{background-position:-26px -26px;}

.board-view .view-title .title{border-bottom:2px solid var(--color-gray2); padding:24px 0;}
.board-view .view-title h4{font-size:24px; line-height:1.33em;}
.board-view .view-title .date{font-size:14px; line-height:1.71em; padding:18px 0;}
.board-view .view-detail{padding:40px 0; font-size:14px; line-height:1.71em; border-bottom:1px solid var(--color-gray6);}
.board-view .view-detail img{border-radius:10px; max-width:100%; height:auto !important;}

.view-inner-list{margin-top:24px;}
.view-inner-list ul{display:flex;}
.view-inner-list li{width:50%; position:relative; box-sizing:border-box;}
.view-inner-list a{display:block;}
.view-inner-list .label{font-weight:700; font-size:14px; line-height:1.71em; display:inline-flex; align-items:center; color:var(--color-gray1);}
.view-inner-list .title{font-size:18px; line-height:1.44em; color:var(--color-gray5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px; }
.view-inner-list .prev .label:before,
.view-inner-list .next .label:after{display:block;content:''; width:16px;height:16px; background-repeat:no-repeat; background-image:url(../images/contents/view_go_arr.svg);}
.view-inner-list .prev{padding-right:24px; text-align:left;}
.view-inner-list .prev .label:before{background-position:0 0; margin-right:8px;}
.view-inner-list .prev .title{margin-left:24px;}
.view-inner-list .next{padding-left:24px; text-align:right;}
.view-inner-list .next .label:after{background-position:-26px 0; margin-left:8px;}
.view-inner-list .next .title{margin-right:24px;}

.view-bottom{text-align:center; margin-top:80px;}


/* 공시정보 */
.board-list table{width:100%; table-layout:fixed; border-top:2px solid var(--color-gray1);}
.board-list thead th{height:52px; box-sizing:border-box; padding:13px 20px; text-align:left; border-bottom:1px solid var(--color-gray8); font-weight:700; color:var(--color-gray1); font-size:14px; line-height:1.71em;}
.board-list td{height:60px; box-sizing:border-box; padding:18px 20px; text-align:left; border-bottom:1px solid var(--color-gray9); font-size:14px; line-height:1.71em;}
.board-list thead th.no,
.board-list td.no{text-align:center;}
.board-list td a:hover{color:var(--color-blue1);}

/* 재무제표 */
.finance-layout{display:flex; position:relative;}
.finance-layout > .left-title{width:180px; margin-right:24px; flex-shrink: 0;}
.finance-layout > .left-title .sub-snav{position:sticky; top:100px; transition:top 0.3s;}
.finance-layout > .right-content{flex:1;}

.sub-snav li{padding:12px 0; line-height:24px; color:var(--color-gray1); font-weight: 700;}
.sub-snav li a{line-height:24px; color:var(--color-gray1); }

.select-group{display:flex; margin-bottom:40px;}
.select-group .select + .select{margin-left:32px;}

.con-title-wrap{display:flex; align-items: center; justify-content: space-between; margin-bottom:16px;}
.con-title-wrap .con-title{margin-bottom:0;}

.data-unit{font-size:14px; line-height:1.71em; color:var(--color-gray7);}

.data-table table{width:100%; table-layout:fixed; border-top:2px solid var(--color-gray1);}
.data-table thead th{height:52px; box-sizing:border-box; padding:13px 20px; text-align:left; border-bottom:1px solid var(--color-gray8); font-weight:700; color:var(--color-gray1); font-size:14px; line-height:1.71em;}
.data-table tbody th,
.data-table tfoot th,
.data-table td{height:60px; box-sizing:border-box; padding:18px 20px; text-align:left; border-bottom:1px solid var(--color-gray9); font-size:14px; line-height:1.71em;}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td{border-color:var(--color-gray6);}

.data-table.finance thead th{text-align:right;}
.data-table.finance thead th:first-child{text-align:left;}
.data-table.finance tbody th,
.data-table.finance tfoot th{text-align:left;}
.data-table.finance tbody th{font-weight:400;}
.data-table.finance tbody td,
.data-table.finance tfoot td{text-align:right;}
.data-table.finance .sum th,
.data-table.finance .sum td{background-color:#F9F9F9;}
.data-table.finance tfoot th,
.data-table.finance tfoot td{border-color:var(--color-gray6); font-weight:700;}

.con-wrap + .con-wrap{margin-top:80px;}


/* 에러페이지 */
.sec-error-page{position:fixed;left:0;top:0;right:0;bottom:0; display:flex; align-items: center; justify-content: center; text-align:center;}
.sec-error-page .inner{width:640px; padding:0 20px;}
.sec-error-page .inner:before{display:block;content:''; width:88px;height:88px; background:url(../images/contents/i_error.png) 0 0 / cover no-repeat; margin:0 auto 20px auto;}
.sec-error-page h2{font-size:44px; line-height:1.27em; margin-bottom:12px;}
.sec-error-page .sub-txt{font-size:18px; line-height:1.44em; color:var(--color-gray5); }
.sec-error-page .item-list{border:1px solid var(--color-gray8); padding:28px 40px; border-radius:10px; margin-top:24px; text-align:left;}
.sec-error-page .item-list li{position:relative; padding-left:11px; font-size:16px; line-height:1.5em; color:var(--color-gray5);}
.sec-error-page .item-list li:before{position:absolute;left:0;top:0.66em; display:block;content:'';width:3px;height:3px; border-radius:50%; background-color:var(--color-gray4);}
.sec-error-page .link{margin-top:60px;}


/* 팝업 */
.winPop-wrap .pop-header{height:82px; border-bottom:1px solid var(--color-gray9); padding:0 40px; display:flex; justify-content: space-between; align-items: center; position:fixed; left:0;top:0;right:0;}
.winPop-wrap .pop-header h1{display:flex; width:120px; height:100%; background:url(../images/layout/logo.svg) center center / 100% auto no-repeat; text-align:left; text-indent:-9999px;}
.winPop-wrap .btn-pop-close{width:16px;height:16px; text-align:left; text-indent:-9999px; background:url(../images/layout/i_pop_close.svg) center center no-repeat; margin-left:auto;}
.winPop-wrap .pop-section{margin-top:82px; height:calc(100vh - 82px); overflow-y:auto;}
.winPop-wrap .pop-contents{padding:40px;}
.winPop-wrap .pop-title{margin-bottom:24px;}
.winPop-wrap .pop-title h2{font-size:24px; line-height:1.33em;}
.winPop-wrap .terms-nav{text-align:right;}


.terms-nav{margin-bottom:20px;}
.terms-item-list a{color:var(--color-blue1);}
.terms-wrap{font-size:14px; line-height:1.71em;}
.terms-wrap > *{margin-bottom:20px;}
.terms-wrap > *:last-child{margin-bottom:0;}
.terms-wrap .terms-tit{margin-bottom:10px;}
.terms-wrap p + .data-table{margin-top:10px;}

/* mobile ******************************************************************* */

@media all and (max-width:1799.99px){

	.header-inner{max-width:1200px; margin:0 auto; position:relative;}
	.header-inner h1{left:0;}
	#gnav{margin-left:232px;}
	#gnav .gnav-list{width:auto;}
	.header-util{right:0;}
	.header-util{margin-right:-10px;}
}

@media all and (max-width:1360px){

	.header-inner{margin:0 80px;}
	.footer-inner{margin:0 80px;}
	.sub-section > .inner{margin:0 80px;}
	.sub-lnav .lnav-list{margin:0 80px;}

}

@media all and (max-width:1240px){

	/* 회사소개 */
	.intro-front .intro-txt{padding:0 20px;}

}


@media all and (max-width:1200px){

	/* 회사소개 */
	.intro-front .intro-video video{height:56.25vw; border-radius:0;}

}

@media all and (max-width:1099.99px){
	.header-inner{margin:0 20px;}
	.footer-inner{margin:0 20px;}
	.sub-section > .inner{margin:0 20px;}

	.skip-nav { display:none; }

	#header{height:56px; border:none !important;}
	#header.up{top:-56px;}

	.header-inner{padding:0 20px;}
	.header-inner h1{height:56px;}
	.header-inner h1 a{width:126px;}

	#gnav{display:none;}

	.header-util{top:8px;}
	.lang-wrap .lang-options{right:-30px; top:42px;}
	.lang-wrap .lang-options:before{display:block;content:'';height:2px; position:absolute;left:0;right:0;top:-2px;}
	.btn-menu{display:block;}

	.sub-container{padding-top:56px;}
	.sub-lnav{height:56px; top:56px;}
	.sub-lnav .lnav-inner{height:56px; transition:none;}
	.sub-lnav .lnav-inner .lnav-list{float:left; width:100%; height:56px; }
	.sub-lnav .lnav-list{margin:0; padding:0 20px;}
	.sub-lnav a{height:56px; line-height:56px; z-index:1; position:relative;}
	.sub-lnav a:hover{color:var(--color-gray2);}
	.sub-lnav.fixed .lnav-inner:after{display:block;content:''; height:1px; background-color: var(--color-gray9); position:absolute;left:0;bottom:0;right:0;z-index:0;}

	#footer{padding:32px 0 48px;}
	.f-links{margin-bottom:16px;}
	.f-links li a{font-size:14px;}
	.f-links li + li{margin-left:20px;}
	.f-contact{font-size:13px; line-height:20px; margin-bottom:16px;}
	.f-copyright{font-size:13px;}
	.f-outer-links{position:relative; left:initial; top:initial; display:block; margin-top:40px;}
	.f-sns{position:relative; margin-top:32px;}

	.f-site-group{position:relative;}
	.f-family-site{position:initial;}
	.f-family-site button{font-size:14px;}
	.f-family-site .family-site-list{left:0; width:auto !important;}
	.family-site-list ul{padding:20px 0;}
	.family-site-list a{height:34px;}

	.go-top{right:20px; bottom:20px; width:56px;height:56px; background-size:18px auto;}

	.con-title{font-size:26px; line-height:1.3em;}
	.md-title{font-size:18px; line-height:1.3em;}
	.big-title{font-size:18px; line-height:1.3em;}
	.sub-txt{font-size:16px; line-height:1.5em;}

	.sub-section{padding:40px 0;}
	.sub-section .sec-title{margin-bottom:40px;}
	.sub-contents .sub-section:first-of-type{padding-top:60px;}
	.sub-contents .sub-section:first-child{padding-top:40px;}
	.sub-contents .sub-section:last-of-type{padding-bottom:60px;}

	.sub-contents .sub-lnav + .sub-section{padding-top:40px;}
	.sub-lnav li{margin-right:6px;}

	.btn-round{width:100%;}
	html[lang=ja] .btn-round{padding:0 12px 0 16px;}

	.down-group{margin-top:40px;}
	.down-group a{margin:0 0 16px 0;}
	.down-group a:last-child{margin-bottom:0;}

	/* 회사소개 */
	.intro-front{padding:60px 0 80px;}
	.intro-front .con-title{margin-bottom:12px;}
	.intro-front .intro-txt{margin-bottom:40px;}
	.intro-front .intro-video .btn-play{display:none;}
	.compnay-info{margin:0;}
	.compnay-info p{font-size:16px; line-height:1.5em;}
	.compnay-info li{width:100%; margin:0 0 24px 0 !important;}
	.compnay-info li:last-child{margin-bottom:0 !important;}
	.sub-contents .sub-lnav + .sec-company{padding-top:80px;}
	.sec-company .down-group{margin-top:24px;}
	.sec-company .sec-title{margin-bottom:24px;}

	.logo-intro{display:block; margin:0;}
	.logo-intro .logo-item{width:100%; margin:0;}
	.logo-intro .logo-item + .logo-item{margin-top:24px;}
	.logo-intro .img{height:220px;}
	.logo-intro .logo-item.logo .img img{width:200px;}
	.logo-intro .logo-item.symbol .img img{width:80px;}
	.down-group .btn-round{margin:0 0 16px 0;}
	.down-group .btn-round:last-child{margin-bottom:0;}

	.sec-history{margin:40px 0; padding:60px 0;}

	.history-item{width:280px; padding-right:32px;}
	.history-item:before{width:20px;height:20px;}
	.history-wrap .swiper-slide:before{top:9px;}
	.history-item .year{font-size:26px; line-height:1.3em;}
	.history-item .copy{font-size:18px; line-height:1.33em;}
	.history-item .event{font-size:16px; line-height:1.5em;}
	.history-swiper-control{margin-top:24px; justify-content: center;}
	.history-swiper-control button{width:48px; height:48px; background-size:12px 12px !important;}

	.subsidiary-wrap .info{padding:24px;}
	.subsidiary-paging{display:flex;}
	.subsidiary-wrap li{width:280px;}

	.map-viewer{margin:0 -20px; border-radius:0;}
	.btn-addr-copy{display:inline-block;}
	.company-map .map-info .addr-en{margin-top:8px; font-size:13px; line-height:20px;}
	#div_map{margin: 0 -20px; max-width: calc(100% + 40px); width: calc(100% + 40px); border-radius:0;}

	/* 서비스 */
	.sub-sec-service .sec-title{margin-bottom:40px;}

	.go-link a{width:100%;}

	.sub-sec-service .service-photo{margin-bottom:20px;}
	.sertive-intro-items{display:block; border:none; padding:0; margin-top:20px;}
	.sertive-intro-items li{width:auto;margin:0; font-size:16px;}
	.sertive-intro-items li + li{border-top:1px solid var(--color-gray9);}
	.sertive-intro-items li + li:after{display:none;}
	.sertive-intro-items li:before{margin-right:20px; width:60px; height:60px; background-size: auto 60px;}
	.sertive-intro-items li p{width:calc(100% - 80px);}
	.sertive-intro-items .item1:before{background-position:0 0;}
	.sertive-intro-items .item2:before{background-position:-76px 0;}
	.sertive-intro-items .item3:before{background-position:-153px 0;}
	.sub-sec-service .service-photo{margin:0 -20px; width: calc(100% + 40px);}
	.sub-sec-service .service-photo img{border-radius:0;}
	.service-photo-slider{border-radius:0;}

	html[lang=en] .sertive-intro-items li,
	html[lang=ja] .sertive-intro-items li{padding:20px 16px;}

	/* 홍보 */
	.sub-sec-pr .sec-title{margin-bottom:40px;}
	.pr-list ul {display:block; margin: 0;}
	.pr-list li {width:auto; margin:0 0 40px 0;}
	.pr-list li:last-child{margin:0;}
	.pr-list .title{margin-bottom:12px;}
	.pr-list .date{font-size:13px; line-height:1.53em;}

	.paging{margin-top:40px;}
	.paging a{width:24px;height:24px; min-width:24px; font-size:16px;}

	.sub-sec-view .sec-title{display:none;}

	.board-view .view-title .title{padding:0 0 16px 0;}
	.board-view .view-title h4{font-size:18px;}
	.board-view .view-title .date{padding:10px 0;}
	.board-view .view-detail{padding:20px 0;}
	.board-view .view-detail{border-color:var(--color-gray9);}

	.view-inner-list .title{display:none;}

	.view-bottom{margin-top:40px;}

	/* 투자정보 */
	.finance-layout{display:block;}

	.finance-layout > .left-title{width:auto; margin:0 0 4px 0;}
	.finance-layout > .left-title .sub-snav{position:relative; top:initial !important; transition:none;}
	.finance-layout .select-group{margin-bottom:24px;}

	.sub-snav li{padding:4px 0;}

	.board-list table{display:block;}
	.board-list colgroup{display:none;}
	.board-list thead{display:none;}
	.board-list tbody,
	.board-list tr,
	.board-list th,
	.board-list td{display:block; height:auto; padding:0; border:none;}
	.board-list tr{display:flex; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--color-gray9); }
	.board-list td.no{display:none;}
	.board-list td.title{width:100%; font-weight:700; margin-bottom:4px;}
	.board-list td.title ~ td{font-size:13px; line-height:1.53em; color:var(--color-gray6); position:relative;}
	.board-list td.title + td ~ td{display:inline-flex; align-items: center;}
	.board-list td.title + td ~ td:before{display:block;content:'';width:1px;height:12px; background-color:var(--color-gray8); margin:0 8px;}

	.data-unit{font-size:13px;}

	.data-table thead th{height:auto; padding:14px 12px;}
	.data-table tbody th,
	.data-table tfoot th,
	.data-table td{height:auto; min-height:54px; padding:15px 12px;}

	.data-table.finance colgroup col{display:none;}
	.data-table.finance colgroup col:nth-child(1),
	.data-table.finance colgroup col:last-child{display:table-column;}
	.data-table.finance thead th{display:none;}
	.data-table.finance thead th:first-child,
	.data-table.finance thead th:last-child{display:table-cell;}
	.data-table.finance tbody td,
	.data-table.finance tfoot td{display:none;}
	.data-table.finance tbody td:last-child,
	.data-table.finance tfoot td:last-child{display:table-cell;}

	.con-wrap + .con-wrap{margin-top:40px;}

	/* 에러 */
	.sec-error-page .inner:before{width:72px; height:72px; margin-bottom:20px;}
	.sec-error-page h2{font-size:18px; line-height:1.33em; margin-bottom:8px;}
	.sec-error-page .sub-txt{font-size:15px; line-height:1.6em;}
	.sec-error-page .link{margin-top:40px;}
	.sec-error-page .item-list{padding:20px;}
	.sec-error-page .item-list li{font-size:14px; line-height:1.71em;}

}

@media all and (max-width:768px){
	/* 팝업 */
	.winPop-wrap .pop-header{height:auto; border-bottom:none; padding:20px 20px 0 20px; background-color:#fff;}
	.winPop-wrap .pop-header h1{display:none;}
	.winPop-wrap .pop-section{ margin-top:36px; height:calc(100vh - 36px);}
	.winPop-wrap .pop-contents{padding:0 20px 20px 20px;}
	.winPop-wrap .pop-title{margin-bottom:0; height:auto; padding:8px 0;}
	.winPop-wrap .pop-title h2{font-size:18px;}
}