@charset "utf-8";

/*CI*/
.ci{height:100%;}
.ci img{position:relative; top:50%; display:block; margin:0 auto; transform:translateY(-50%)}

/*ci 정보 */
.ciInfo{height:677px; background:url('../../images/ci_bg.png') center; color:#000;}
.ciInfo article{padding: 140px 0;}
.ciInfo ul{width:75%;}
.ciInfo li:not(:first-child){margin-top:10%;}
.ciInfo p{font-size:1.5rem; color:#59c7f7; font-weight:600;}
.ciInfo strong{display:block; margin:10px 0 15px 0; font-size:2.5rem; line-height:1.4; color:#fff;}
.ciInfo span{display:block; font-size:1.5rem; line-height:1.4; font-weight:200; color:#fff;}
/*심볼*/
.symbol{padding:140px 0;}
.symbol p, .grid p{margin-bottom:35px; font-size  :2.5rem; font-weight:500;}
.symbol ul{display:flex; border:1px solid rgba(0,0,0,0.1); font-size:1.8rem; font-weight:500; text-align:center;}
.symbol ul img{display:block; margin:0 auto; width:230px; height:215px;}
.symbol ul li{position:relative; width:25%; padding: 40px 0 50px 0 ;}
.symbol ul li:not(:last-child)::after{content:""; position:absolute; right:0px; top:23%; transform:translateX(50%); display:block; width:36px; height:140px; background:url('../../images/symbol_border.png')no-repeat; z-index:3;}
/*그리드*/
.grid li:not(:last-child){margin-bottom:70px;}
.grid li div:nth-of-type(1) span,.grid li:nth-child(3) span{background:#0033ff;}
.grid div{position:relative; padding:60px 0; margin-bottom:30px; border:1px solid #d8d8d8; border-radius:40px 0px 40px 0px;}
.grid div span{position:absolute; top:0px; left:0px; display:block; width:164px; font-size:1.7rem; text-align:center; line-height:40px; border-radius:40px 0px 40px 0px; color:#fff; background:#f26b55}
.grid div img{display:block; margin:0 auto; width:60%;}


/*ci*/
.ci{position:relative;}
.ci h3{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:684px; height:112px; font-size:0px; background:url('../../images/ci.png')no-repeat;}
.ci h3 span{position:absolute; display:block; width:104px; height:50px; border-radius:50px; opacity:1; transition-duration:1s; overflow:hidden;}
.ci h3 .path1{top:35px; background:#0033ff; transform:rotate(-45deg)translate(-80%)translate3d(0,0,0); z-index:2; }
.ci h3 .path1 div{position:absolute; bottom:-26px; right:-205px; display:block; width:104px; height:50px; background:#0071f9; border-radius:50px;  transition-duration:1s;}
.ci h3 .path2{top:27px; left:45px; background:#59c7f7; transform:rotate(-45deg)translate(80%); }
/*.ci.on h3 .path1,.ci.on h3 .path2{transform:rotate(-45deg)translate(0%);}
.ci.on h3 .path1::after{right:-38px;}*/

.ci.on h3.on .path1,.ci h3.on .path2{transform:rotate(-45deg)translate(0%)translate3d(0,0,0); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:rotate(-45deg)translate(0%)translate3d(0,0,0); -moz-transform:rotate(-45deg)translate(0%)translate3d(0,0,0);}
.ci.on h3.on .path1 div{right:-38px;}

/*ciDown*/
.ciDown{background:rgba(89, 199, 247, 0.05); padding:140px 0px;}
.ciDown h2{font-size:4rem; font-weight:500; margin-bottom:16px;}
.ciDown strong{display:block; font-size:1.8rem; font-weight:500;}
.ciDown p{height:267px; margin-top:15px; width:491px; font-size:1.5rem;}
.ciDown .inner::after{content:""; position:absolute; top:50px; right:0px; display:block; width:633px; height:161px; background:url('../../images/horizontal_logo.png')no-repeat;}
.downBtn{display:flex; position:relative; width:315px; margin-top:12px;  background:#0033ff; border-radius:60px 0px 60px 0px; padding-right:10px; overflow:hidden;}
.downBtn ul{display:flex; opacity:0; width:0px; line-height:42px;  font-size:1.8rem; margin-top:6px; margin-left:10px; justify-content: center; overflow:hidden; background:rgba(89, 199, 247,0.23); height:44px; transition-duration:0.3s; border-radius:42px 0px 42px 0px;}
.downBtn:hover ul{ width:226px; opacity:1; }
.downBtn ul li{margin:0px 10px;}
.downBtn:hover ul li a{border-bottom:1px solid #59c7f7; color:rgba(255,255,255,0.8); transition-duration:0.3s;}
.downBtn ul li a:hover{color:rgba(255,255,255,1);}
.downBtn:hover{width:412px;}
.downBtn span{white-space:nowrap; line-height:55px; font-size:2rem; color:#fff;}
.downBtn:hover::before,.downBtn:hover::after{opacity:0;}
.pageMove.downBtn::after{top:25px;}

/*girdSlide*/
.gridSlide{background:#172355; width:100%; padding:123px 0px 100px;}
.gridSlide div.gridOp{position:relative; transform:translateX(50%); width:602px; height:352px; margin-right:22px; padding:40px 70px; background:#fff; border-radius:20px 0px 20px 0px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.gridSlide div.gridOp img{display:block;position:absolute;bottom:50px;transform: translateX(-50%);left: 50%;}/*0730*/
.gridSlide div.gridOp img.minimum{width:auto; left:420px; transform:translateX(0%);}
.gridSlide div.gridOp img.clImg{bottom:60px;}
.gridSlide div.gridOp strong{font-family:"itc"; font-size:1.9rem; color:#030921;}
.gridSlide div.gridOp p{font-size:1.2rem; color:#030921; opacity:0.8; margin:5px 0px 0px;}
.gridSlide .slick-list{width:1280px; overflow:visible;}
.gridSlide+footer{margin-top:0px;}