@charset "UTF-8";

header{position:fixed;}
section{position:relative;overflow:hidden}
.section:not(.visual){padding:0}

/* 비주얼영역 */
section.visual{position:relative;height:100vh;overflow:hidden}
section.visual:before{content:"";position:absolute;left:0;top:0;width:100%;height:25.7rem;background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);opacity:.30;z-index:10}

/* 키비주얼 */
.mainVisual {position:relative;height:100%;}
.mainVisual .videoArea{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;}
.mainVisual .videoArea:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);}
.mainVisual .videoArea video{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.mainVisual .tb-bg {display:none;background:url("../img/00/top-img.png") no-repeat 50% 50%;background-size:cover;position:absolute;top:0;left:0;right:0;bottom:0;}

section.visual .title-area {margin-top:400px;}
section.visual .title-area .main-tit{font-size:92px;font-weight:900;line-height:120px}


.section .section-title {position:relative;text-align:left;max-width:1300px;padding:0 0 50px;margin:0 auto;height:100%; z-index:98;}
.section .section-title:after {content:'';display:block;height:0;clear:both;visibility:hidden;}
.section-title .title-area {position:absolute;left:0;margin-top:100px;transform:none;}
.section-title .title-area .s-tit{color:#fff;font-size:24px;font-weight:700;padding-left:10px;line-height:36px}
.section-title .title-area .main-tit{color:#fff;font-size:66px;margin:20px 0 35px 0;font-weight:700;letter-spacing:-2px;line-height:86px}
.section-title .title-area .main-sub-tit {color:#fff;font-size:28px;letter-spacing:-0.5px;font-weight:300;}
.section-title .title-area .main-tit span{display:inline-block; font-weight:700;}
.section-title .title-area .main-tit .normal{font-weight:100;}
.section-title .title-area .main-tit .blue{color:#1e73e3;}
.section-title .title-area .main-tit .opacity{opacity:.7;}


/* Section 2 : BUSINESS */
.section.section2{padding-top:0;height:780px;background:#1E73E3;}
.section.section2:before{content:"BUSINESS";color:#fff;position:absolute;opacity: 0.04;left:0;bottom:0;width:100%;height:430px;font-size:421px;}
.section.section2 .business{margin-top:0}

.list-item{width:560px;float:right}
.item-box{display:block;width:100%}
.item-box > li{width:calc(50% - 20px);height:180px;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);border-radius:20px;overflow:hidden;float:left}
.item-box > li:nth-child(1){margin-right:40px;margin-top:167px;background:url("../img/main/channel_img.png") no-repeat left top;height:360px; background-size:cover;}
.item-box > li:nth-child(2){margin-top:40px;background:url("../img/main/chsolution_img.png") no-repeat left top; background-size:cover;}
.item-box > li:nth-child(3){margin-top:32px;background:url("../img/main/snt_img.png") no-repeat left top; background-size:cover;}
.item-box > li:nth-child(4){margin-top:32px;background:url("../img/main/IB_img.png") no-repeat left top;height:360px; background-size:cover;}
.item-box > li:nth-child(5){margin-top:-264px;background:url("../img/main/digital_img.png") no-repeat left top; background-size:cover;}
.item-box > li a{display:-webkit-box;display:flex;display:-ms-flexbox;flex-direction:column;position:relative;height:100%;padding:30px 14px 40px 24px;transition:all .2s;color:#fff}
.item-box > li a:before{content:"";opacity:0;position:absolute;left:0;top:0px;width:100%;height:100%;background-color:rgba(205,226,255,0.75);}
.item-box > li a:hover:before, .item-box > li a:focus:before{opacity:1; -webkit-animation:bgUp 1s ease-in-out infinite;  animation:bgUp 1s ease infinite;  -webkit-transition:all .3s ease;  -moz-transition:all .3s ease;  -o-transition:all .3s ease;  transition:all .3s ease; }
.item-box > li a:hover strong, .list-item .item-box > li a:hover .desc,
.item-box > li a:focus strong, .list-item .item-box > li a:focus .desc{color:#000}
.item-box > li a strong{position:relative;font-size:20px;line-height:26px;font-weight:700;}
.item-box > li a .desc{position:relative;font-size:14px;line-height:21px;font-weight:200;padding-top:12px}
.item-box > li a:after{content:"";opacity:1;position:absolute;right:24px;top:30px;width:32px;height:32px;background:url("../img/main/icon_allow.png") no-repeat left top;backdrop-filter:blur(6px)}
.item-box > li a:hover:after, .item-box > li a:focus:after{background:url("../img/main/icon_allow_over.png") no-repeat left top;}
  
  
/* Section 3 : ENABLING PEOPLE */
.section.section3{padding-top:0;height:540px;background:url("../img/main/enabling_img.png") no-repeat center center;background-size:cover;}
.section.section3 .epeople{margin-top:0}

.link-list{display:flex;width:calc(100% - 136px);margin:170px auto 0}
.link-list > li{margin-right:40px;width:calc(50% - 0px);height:208px}
.link-list > li:last-child{margin-right:0}
.link-list > li .item{display:flex;flex-direction:column;height:100%;background: rgba(255,255,255,0.20); box-shadow:0 4px 4px 0 rgba(69,69,69,0.20);backdrop-filter:blur(6px);border-radius:20px;align-items:center;overflow:hidden;}
.link-list > li .item .icon{margin-top:40px;width:72px;height:70px;flex-shrink:0}
.link-list > li .item .desc{margin-top:26px;font-size:18px;color:#fff;text-align:center}

.link-list > li .item:before{content:"";display:block;width:72px;height:70px;margin-top:40px;}
.link-list > li .item.icon01:before{background:url("../img/main/icon_program.png") no-repeat center 0;}
.link-list > li .item.icon02:before{background:url("../img/main/icon_service.png") no-repeat center 0;}

.link-list.ir > li .item.icon01:before{background:url("../img/main/icon_info.png") no-repeat center 0;}
.link-list.ir > li .item.icon02:before{background:url("../img/main/icon_notice.png") no-repeat center 0;}
.link-list.ir > li .item.icon03:before{background:url("../img/main/icon_alendar.png") no-repeat center 0;}


/* Section 4 : INVESTOR RELATIONS */
.section.section4{padding-top:0;height:780px;background:url("../img/main/investor_bg_img.png") no-repeat center center;background-size:cover;}
.section.section4 .epeople{margin-top:0}
.section.section4 .section-title{}
.section.section4 .s-tit{color:#000}
.section.section4 .title-area .main-tit{color:#000}

.border-group {position:absolute;padding-top:387px;width:100%;margin-top:0}
.border-group .title{display:flex;justify-content:space-between;align-items:flex-start;font-size:24px;color:#000;line-height:36px;font-weight:700;}
.border-group .btn-more{padding-right:38px; background:url("../img/main/icon_arrow_line.png") no-repeat 100% center;font-weight:700;}

.report-item{display:flex;width:calc(52% - 32px);float:left;flex-direction:column;margin-right:32px}
.report-item .list{display:flex;flex-direction:column;height:100%;background: rgba(255,255,255,0.20);box-shadow:0 4px 4px 0 rgba(69,69,69,0.20);backdrop-filter:blur(6px);border-radius:20px;align-items:center;overflow:hidden;padding:16px 36px;margin-top:24px;}
.report-item .list>li{display:grid;width:100%;border-bottom:1px solid #acbcc6;padding:20px 0;position:relative}
.report-item .list>li:last-child{border-bottom:none}
.report-item .list>li>a{display:flex;justify-content:space-between;font-size:18px;line-height:18px;font-weight:500;color:#000;overflow:hidden}
.report-item .list>li>a .sub-tit{line-height:18px;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;width:80%}
.report-item .list>li>a .date{line-height:18px;width:20%;text-align:right}
	

.border-group .list-item{width:48%;}
.link-list.ir{margin-top:24px;width:calc(100% - 0px)}
.link-list.ir > li{margin-right:24px;width:calc(33% - 0px)}
.link-list.ir > li:last-child{margin-right:0}
.link-list.ir > li .item .desc{color:#000}

/* footer */
.section.section5{padding-top:0;padding-bottom:0;}


/* 효과 */
.section-down{bottom:-100%;transition:all 1s ease}
.load .section-down{bottom:0}

.section-down{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:8rem;height:4rem;z-index:1;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;font-size:14px;font-style: normal;font-weight:100;}
.section-down .section-cursor{display:block;position:relative;margin-bottom:10px;}
/* .section-down .section-cursor:after {content: '';position:absolute; left:50%; bottom:100%; width:26px; height:29px; margin-left:-13px; background:url("../img/main/ico_scroll.png") no-repeat center top;
  -webkit-animation:arrowDown 1s ease-in-out infinite;  animation:arrowDown 1s ease infinite;  -webkit-transition:all .3s ease;  -moz-transition:all .3s ease;  -o-transition:all .3s ease;  transition:all .3s ease; }
 */
 .section-down .section-cursor:after {content: '';position:absolute; left:50%; bottom:100%; width:24px; height:24px; margin-left:-12px;  opacity:1; transform:rotate(135deg); border-top:2px solid #fff; border-right:2px solid #fff;
  -webkit-animation:arrowDown 1.5s ease-in-out infinite;  animation:arrowDown 1.5s ease infinite;  -webkit-transition:all .3s ease;  -moz-transition:all .3s ease;  -o-transition:all .3s ease;  transition:all .3s ease; }
  
.moving{opacity:0;position:relative;top:20rem;transition:all 1.6s ease}
.moving.active{opacity:1;top:0}

.mdhide{display:none}
.pdhide{display:block}

/* 반응형 */
@media (max-width:1024px){
	.section .section-title{max-width:1130px}
	section.visual .title-area{margin-top:460px;}
	section.visual .title-area .main-tit, .section-title .title-area .main-tit{font-size:52px;margin-left:20px;line-height:62px;}
	.section-title .title-area .s-tit{padding-left:20px}
	
	.list-item{width:480px;}
	.item-box > li:nth-child(1),
	.item-box > li:nth-child(3){margin-right:20px;}
	.item-box > li:nth-child(1){height:340px}
	.item-box > li:nth-child(3){margin-top:32px;}
	.item-box > li:nth-child(4){margin-top:32px;height:340px}
	.item-box > li:nth-child(5){margin-top:-262px;}
	
	.link-list{width:calc(100% - 80px)}
	.link-list > li{margin-right:20px;height:198px;}
	
	.border-group .title{font-size:22px}
	.report-item{margin-right:20px;width:calc(52% - 20px)}
	.report-item .list{padding:11px 16px}
	.report-item .list>li>a{font-size:15px;}
}

@media (max-width:960px){
	/* 메인영상 히든처리 */
	.mainVisual .videoArea{display:none}
	.mainVisual .tb-bg {display:block;}
	
	section.visual .title-area{margin-top:500px;}
	section.visual .title-area .main-tit, .section-title .title-area .main-tit{font-size:44px;line-height:54px}
	.section-title .title-area .s-tit{font-size:16px;line-height:18px}
	
	.list-item{width:460px;}
	.item-box > li:nth-child(1), .item-box > li:nth-child(4){height:320px}
	
	.link-list{width:calc(100% - 100px)}
	.link-list > li{margin-right:14px;height:174px;}
	.link-list > li .item .desc{font-size:16px;margin-top:16px}
	
	.border-group{margin-top:300px;padding:0 20px;}
	.border-group .title{font-size:20px}
	.report-item{margin-right:14px;width:calc(52% - 14px)}
	.report-item .list{padding:11px 16px}
	.report-item .list>li{padding:16px 0}
	.report-item .list>li>a{font-size:14px;font-weight:400}
	
	.report-item .list>li>a .sub-tit{width:70%}
	.report-item .list>li>a .date{width:30%}
	
	.link-list.ir > li{margin-right:14px}
	
}

@media (max-width:760px){
	section.visual{height:640px}
	section.visual .title-area{margin-top:0px;bottom:110px}
	section.visual .title-area .main-tit, .section-title .title-area .main-tit{font-size:32px;line-height:38px}
	
	.section-down{bottom:10px;font-size:12px}
	/* .section-down .section-cursor:after{width:24px; height:24px; margin-left:-12px; background:url("../img/main/icon_m_scroll.png") no-repeat center top; background-size:24px} */
	.section-down .section-cursor:after{opacity:.4;}
	
	.section-title .title-area .main-tit{font-size:28px;line-height:34px;margin-top:16px}
	.section-title .title-area{margin-top:45px}
	
	.section.section2{height:584px}
	.section.section2:before{font-size:80px;line-height:104px;height:80px;}
	
	.list-item{margin-top:234px;position:relative;max-width:calc(100% + 64px);overflow-x:auto;width:100%;float:left;-webkit-overflow-scrolling:touch;box-sizing:content-box;font-size:0}
	.item-box{white-space:nowrap;display:block;position:relative;padding-left:50px;}
	.item-box > li{height:286px !important;margin-top:0 !important;width:220px;margin-right:20px;display:inline-block;/* box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2) */box-shadow:none;float:inherit}
	.item-box > li a:after{background:url("../img/main/icon_m_allow.png") no-repeat left top;background-size:32px}
	.item-box > li a:hover:after, .item-box > li a:focus:after{background:url("../img/main/icon_m_allow_over.png") no-repeat left top;background-size:32px}
  
  
	.section.section3{height:400px}
	.section.section3 .list-item{margin-top:216px}
	.link-list{margin-top:0;width:auto;justify-content:center}
	.link-list > li{height:136px;margin-right:16px;width:128px}
	
	.link-list > li .item:before{content:"";display:block;width:48px;height:48px;margin-top:24px;}
	.link-list > li .item.icon01:before{background:url("../img/main/icon_m_program.png") no-repeat 0 0;background-size:48px}
	.link-list > li .item.icon02:before{background:url("../img/main/icon_m_service.png") no-repeat 0 0;background-size:48px}

	.link-list.ir > li .item:before{width:44px;height:44px;margin-top:14px;}
	.link-list.ir > li .item.icon01:before{background:url("../img/main/icon_m_info.png") no-repeat 0 0;background-size:44px}
	.link-list.ir > li .item.icon02:before{background:url("../img/main/icon_m_notice.png") no-repeat 0 0;background-size:44px}
	.link-list.ir > li .item.icon03:before{background:url("../img/main/icon_m_alendar.png") no-repeat 0 0;background-size:44px}
	
	.link-list > li .item .desc{margin-top:14px;font-size:14px;line-height:14px;}	
	
	.section.section4{height:584px}
	.border-group{padding-top:205px;margin-top:0}
	.border-group .title{font-size:16px}
	.border-group .btn-more{padding-right:27px;background:url("../img/main/icon_m_arrow_line.png") no-repeat 100% center;background-size:20px}
	
	.report-item{width:100%;margin:0}
	.report-item .list{margin-top:8px}
	.report-item .list>li{padding:8px 0}
	.report-item .list>li>a .sub-tit{width:75%}
	.report-item .list>li>a .date{width:25%;}
	
	.border-group .list-item{width:100%;margin-top:20px;overflow:inherit}
	
	.link-list.ir{margin-top:8px;justify-content:left}
	.link-list.ir > li{height:106px;margin-right:6px}
	.link-list.ir > li .item .desc{margin-top:10px}
	
	.moving{opacity:0;position:relative;top:15rem;transition:all 1.6s ease}
	.moving.active{opacity:1;top:0}
	
	.mdhide{display:block}
	.pdhide{display:none}
	
}	

@media (max-width:480px){
	.report-item .list>li>a .sub-tit{width:70%}
	.report-item .list>li>a .date{width:30%}
}	

@media (max-width:360px){
	
}

@media (max-width:280px){
	section.visual .title-area{}
	.section-title .title-area .s-tit{font-size:14px}
	.section-title .title-area .main-tit{font-size:24px;line-height:34px}
	.item-box{padding-left:20px;}
	.border-group{padding-top:160px;}
	
	.link-list > li{width:112px;margin-right:12px}
	
	.report-item .list>li>a .sub-tit{width:60%}
	.report-item .list>li>a .date{width:40%}
	
}	
/* animation Keryframes */
@-webkit-keyframes arrowDown {
  0% {
    bottom: 10px; 
    opacity: 0;
    }
  50% {
    bottom: 0px; 
    opacity: 1;
    }
  100% {
    bottom: 10px; 
    opacity: 0;
    } 
}

@keyframes arrowDown {
  0% {
    bottom: 10px; 
    opacity: 0;
    }
  50% {
    bottom: 0px; 
    opacity: 1;
    }
  100% {
    bottom: 10px; 
    opacity: 0;
    } 
}

@-webkit-keyframes bgUp {
  0% {
    top: 0; }
  50% {
    top: 0; }
  100% {
    top: 0; } 
}

@keyframes bgUp {
  0% {
    top: 0; }
  50% {
    top: 0; }
  100% {
    top: 0; } 
}