/*common*/
#titleBox{ display:flex; justify-content:space-between; align-items: flex-end; width: 100%; overflow: hidden; }
#titleBox h1.font45{ color:#222; font-weight: black; font-family: 'LeferiPoint-BlackA'; margin-bottom: 26px; }
#titleBox h1.font18{ color:#222; font-weight: 300;}
#titleBox .viewBtn a{ color:#222; font-weight: 500; display: flex; align-items: center;}
#titleBox .viewBtn a p{ position: relative; display:inline-block; overflow: hidden; border-radius:50%; width: 42px; height: 42px; margin-left: 12px; }
#titleBox .viewBtn a p span{ display:inline-block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; }
#titleBox .viewBtn a p span img{ position: relative;  transition: all 0.5s;}
#titleBox .viewBtn a p span.off{ background: url("/img/main/view_circle.png") no-repeat 50% 50%;}
#titleBox .viewBtn a p span.on{ background: #002C7D; transition:all 0.5s; opacity: 0;}
#titleBox .viewBtn a p span.on img{ left: -5px; z-index: 10; filter: invert(97%) sepia(1%) saturate(218%) hue-rotate(223deg) brightness(130%) contrast(100%); }
#titleBox .viewBtn:hover a p span.on{ opacity: 1;}
#titleBox .viewBtn:hover a p span.on img{ left: 0;}
#titleBox .txtBox,#titleBox .viewBtn{ opacity: 0;}
#topBtn{ display:none; }

section.on #titleBox .txtBox{ animation:fadeLeft 0.8s both; }
section.on #titleBox .viewBtn{ animation:fadeIn 0.8s both; }

/*main*/
#fullpage > section{ width: 100%; height: 100vh; position: relative; overflow: hidden;}

#fullpage section.visual{ background: #000;}
#fullpage section.visual .slideBox{ height: 100vh; overflow: hidden;}
#fullpage section.visual .slideBox .slick-list{ }
#fullpage section.visual .slideBox .slick-list .slick-slide{ height: 100vh; }
#fullpage section.visual .slideBox .slick-list video{ opacity: 0.8; position: absolute;  top: 50%; left: 50%;  transform: translate(-50%,-50%); min-width: 100%; min-height: 100%;}
#fullpage section.visual .slideBox .itemBox .txtBox{ position: absolute; transform:translateY(-50%); top: 46%; left: 8.333333333333333%;z-index: 5; color:#fff; overflow: hidden; }
#fullpage section.visual .slideBox .itemBox .txtBox .txtWrap{ opacity: 0; }
#fullpage section.visual .slideBox .itemBox .txtBox .title{ font-weight: bold; line-height: 80px; margin: 20px 0 30px;}
#fullpage section.visual .slideBox .itemBox .txtBox .txt1{ font-weight: 300;}
#fullpage section.visual .playBox{ position: absolute; transform:translateY(-50%); top: 74%; left: 8.333333333333333%;z-index: 5; display:flex; }
#fullpage section.visual .playBox .slick-dots{ display:flex; position: relative; order:-1; }
#fullpage section.visual .playBox .slick-dots li{ display:flex; align-items: center; cursor:pointer; }
#fullpage section.visual .playBox .slick-dots li:not(:last-child){ margin-right: 20px; }
#fullpage section.visual .playBox .slick-dots li .dot{ font-family: 'Red Hat Display', sans-serif; color:rgba(255,255,255,0.7);  font-size:14px; }
#fullpage section.visual .playBox .slick-dots li .bar{ position: relative; display:block; width: 130px; height: 3px; background: rgba(255,255,255,0.2); margin-left: 20px; display:none; }
#fullpage section.visual .playBox .slick-dots li .bar span{ position: absolute; top: 0; left: 0; display:block; height: 3px; width: 0%; background: #fff;}
#fullpage section.visual .playBox .slick-dots li.slick-active .dot{ color:#fff; font-weight: bold;}
#fullpage section.visual .playBox .slick-dots li.slick-active .bar{ display:block; }
#fullpage section.visual .playBox .playBtn{ position: relative; cursor:pointer; display: flex;  justify-content: center;  align-items: center; margin-left: 25px;}
#fullpage section.visual .playBox .playBtn i{ position: absolute; top: 0; left: -3px; color:#fff; opacity: 0; transition:all 0.5s; }
#fullpage section.visual .playBox .playBtn img{ opacity: 1; transition:all 0.5s; }
#fullpage section.visual .playBox .playBtn.on i{ opacity: 1;}
#fullpage section.visual .playBox .playBtn.on img{ opacity: 0;}
#fullpage section.visual .slideBox .itemBox.slick-active .txtBox .txtWrap{ animation:fadeLeft 0.8s 0.5s both; }

#fullpage section.science .innerP-m{ padding-top: 200px;}
#fullpage section.science .tabBox{ margin: 50px 0 0; height: 100%; opacity: 0;}
#fullpage section.science .tabBox .tabBtn{ display:flex; margin-bottom: 30px;}
#fullpage section.science .tabBox .tabBtn li:not(:last-child){ margin-right: 10px;}
#fullpage section.science .tabBox .tabBtn li button img{ vertical-align:middle; margin-left: 10px; }
#fullpage section.science .tabBox .tabBtn li.on button{ border:none; color:#fff; background: #002c7d;}
#fullpage section.science .tabBox .tabBtn li button{ position: relative; overflow: hidden; font-size:16px; padding: 0 30px; height: 50px; border-radius:50px; border:1px solid #E0E0E0; color:#222; font-weight: 600;}
#fullpage section.science .tabBox .tabBtn li:not(.on) button{ color:#fff; border:none; }
#fullpage section.science .tabBox .tabBtn li:not(.on) button:before{ content:''; display:block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; 
 background: linear-gradient(to right,rgba(0,44,125,1) 0%,rgba(9,62,160,0.2) 50%,rgba(0,44,125,1) 100%); background-size: 500%; z-index: -1; transition:all 0.2s;  animation: gradient 2s infinite; }
#fullpage section.science .tabBox .tabBtn li button img{ filter: invert(97%) sepia(1%) saturate(218%) hue-rotate(223deg) brightness(130%) contrast(100%); }

#fullpage section.science .ctnBox{ height: 100%; border-top:1px solid #EFEFEF; }
#fullpage section.science .ctnBox .itemBox{ display:none; width: 100%; height: 100%; } 
#fullpage section.science .ctnBox .itemBox.on{  display:flex; } 
#fullpage section.science .ctnBox .itemBox .imgBox{ position: relative; padding-top: 60px; width: calc(100% / 3); height: 100%; text-align: center;}
#fullpage section.science .ctnBox .itemBox .imgBox:not(:last-child){ border-right:1px solid #efefef; }
#fullpage section.science .ctnBox .itemBox .imgBox .iconBox img{ margin-bottom: 20px;}
#fullpage section.science .ctnBox .itemBox .imgBox .iconBox p{ color:#222; font-weight: 600;}
#fullpage section.science .ctnBox .itemBox .imgBox .img{ margin-top: 150px; opacity: 0;}
#fullpage section.science .ctnBox .itemBox .imgBox .arrow{ position: absolute; top: 65px; right: -87px; }
#fullpage section.science .ctnBox .itemBox .imgBox .arrow .ic{ display:flex; justify-content:center; align-items:center;  margin: 58px auto 0; width: 60px; height: 60px; border-radius:50%; background: #fff; border:1px solid #E0E0E0; opacity: 0;}
#fullpage section.science.on .tabBox{ animation:fadeIn 0.9s both; }
#fullpage section.science .ctnBox .itemBox.on .imgBox .img{ animation:fadeIn 0.9s both; }
#fullpage section.science .ctnBox .itemBox.on .imgBox .arrow .ic{ animation:fadeIn 0.5s 0.3s both; }

#fullpage section.pl{ background: url("/img/main/main_pipe_bg.jpg") no-repeat 50% 50%; background-size:cover; }
#fullpage section.pl .innerP-m{ padding-top: 230px;}
#fullpage section.pl .ctnBox{ display:flex; margin-top: 50px; gap:13px; opacity: 0; }
#fullpage section.pl .ctnBox .itemBox{ position: relative; width: calc((100% - 52px) / 5); padding: 40px;  height: 340px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.05); backdrop-filter: blur(10px);
background: rgba(255,255,255,0.3);}
#fullpage section.pl .ctnBox .itemBox a{ width: 100%; height: 100%;  display: flex; flex-direction: column; justify-content: space-between;}
#fullpage section.pl .ctnBox .itemBox .txtBox{ z-index: 5;}
#fullpage section.pl .ctnBox .itemBox .txtBox .font35{ color:#222; font-weight: bold;}
#fullpage section.pl .ctnBox .itemBox .txtBox .font18{ color:#444; font-weight: 300; font-family: 'KoPubWorldDotum'; margin-top: 20px; line-height: 30px; letter-spacing:-0.5px; }
#fullpage section.pl .ctnBox .itemBox figure.icon{ text-align: right; z-index: 5;}
#fullpage section.pl .ctnBox .itemBox figure.bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition:all 0.5s; }
#fullpage section.pl .ctnBox .itemBox figure.bg img{ width: 100%; height: 100%; }
#fullpage section.pl .ctnBox .itemBox:hover .txtBox .font35,#fullpage section.pl .ctnBox .itemBox:hover .txtBox .font18{ color:#fff; }
#fullpage section.pl .ctnBox .itemBox:hover figure.icon img{filter: invert(97%) sepia(1%) saturate(218%) hue-rotate(223deg) brightness(200%) contrast(100%); }
#fullpage section.pl .ctnBox .itemBox:hover figure.bg{ opacity: 1;}
#fullpage section.pl.on .ctnBox{ animation:fadeIn 0.9s both; }

#fullpage section.introduce .innerP-m{ padding-top: 0; display:flex; align-items: center;}
#fullpage section.introduce #titleBox{ flex-direction: column; align-items: normal }
#fullpage section.introduce #titleBox .font18{ color:#222; }
#fullpage section.introduce #titleBox .viewBtn{ display:flex; margin-top: 120px; opacity: 0;}
#fullpage section.introduce #titleBox .viewBtn li:not(:last-child){ margin-right: 30px;}
#fullpage section.introduce #titleBox .viewBtn li button { position: relative; width: 40px; height: 40px; border:1px solid rgba(34,34,34,0.3); border-radius:50%; overflow: hidden; margin-left: 13px; }
#fullpage section.introduce #titleBox .viewBtn li button span{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:block; transition:all 0.5s; }
#fullpage section.introduce #titleBox .viewBtn li button span.arrow{ display:flex; justify-content:center; align-items:center; }
#fullpage section.introduce #titleBox .viewBtn li button span.img{ left: -40px;}
#fullpage section.introduce #titleBox .viewBtn li:hover button{ border:none; }
#fullpage section.introduce #titleBox .viewBtn li:hover button span.img{ left: 0; }
#fullpage section.introduce .videoBox{ position: relative; position: absolute; top: 0; right: 0; width: 38.645833333333335%; height: 100%; z-index: 5; transition:all 0.5s; }
#fullpage section.introduce .videoBox .video{ position: relative; width: 100%; height: 100%; overflow: hidden;}
#fullpage section.introduce .videoBox .video iframe{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; }
#fullpage section.introduce .videoBox .circleBox{ position: relative; position: absolute; transform:translateY(-50%); top: 50%; left: -80px; width: 154px; height: 154px; border-radius:50%; background: #002c7d; 
    display: flex; justify-content: center; align-items: center; cursor:pointer; transition:all 0.5s;  }
#fullpage section.introduce .videoBox .circleBox img.in{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.5s; }
#fullpage section.introduce .videoBox .circleBox img.txt{ animation: rotate 5s infinite linear; transform-origin: center;}
#fullpage section.introduce .videoBox .circleBox img.on{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; opacity: 0; transition:all 0.5s; }
#fullpage section.introduce .videoBox.on .video iframe{ width: 100%; }
#fullpage section.introduce .videoBox.on{ width: 100%; }
#fullpage section.introduce .videoBox.on .circleBox{ transform:translate(-50%,-50%); top: 50%; left: 50%; background: transparent; border:1px solid rgba(34,34,34,0.3); }
#fullpage section.introduce .videoBox.on .circleBox img.in{ opacity: 0;}
#fullpage section.introduce .videoBox.on .circleBox img.on{ opacity: 1;}
#fullpage section.introduce .videoBox.on .circleBox img.txt{ filter:invert(0.8); }
#fullpage section.introduce.on #titleBox .viewBtn{ animation:fadeLeft 0.8s both; }