@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.skip-nav{z-index:5100;display:flex;justify-content:space-between;position:absolute;top:-100%;width:100%}
.skip-nav .skip{padding:1rem;flex-basis:50%;text-align:center;background-color:#fff}
.skip-nav .skip:focus{color:#fff;background-color:#a7a7a7}
.skip-nav.active{top:0}

.inner{margin:0 auto;width:1328px;max-width:100%; padding: 0 4rem;}

.header-wrap{z-index:5000;position:fixed;left:0;top:0;width:100%;background: #fff;}

.header{padding:0 2rem;}
.header .inner{display:flex;justify-content:space-between;align-items:center;min-height:10rem;}
.header .logo{width: 19.5rem;height:2.4rem;flex:0 0 auto}
.header .logo > a{display:block}
.header .logo > a img{display:block;object-fit:contain}
.header .nav{display:flex}
.header .gnb{display:flex;justify-content:center;align-items: center;gap: 4rem;}
.header .gnb > li{display:flex;flex-direction:column;position:relative;text-align:center}
.header .gnb > li > a{position:relative;z-index:1;display:flex;align-items:center;line-height: 10rem;font-size: 2rem;font-weight: 500;color: #1f1f1f;text-align:center;text-transform: uppercase;gap:0.6rem;transition:all 0.3s;}
.header .gnb > li > a:before{content:'';width:1.2rem;height:1.2rem;border-radius:1.2rem;border:0.2rem solid #1f1f1f;transition:all 0.3s;}
.header .gnb > li > a.on{color:#116BB5;}
.header .gnb > li > a.on:before{background:#116BB5;border-color:#116BB5;}

.footer{position:relative;width:100%;padding: 8rem 0;background: #072B48;}
.footer:before{content:'';position:absolute;top:0;left:0;bottom:0;width:12rem;background: url("../img/common/footer_bg.png") no-repeat top / 100% 100%;}
.footer .inner{display:flex;gap: 2.4rem;}
.footer .left{flex:2;position:relative;width:61.2rem;max-width:100%;padding: 2.4rem 1.2rem 2.4rem 0;display:flex;flex-direction:column;}
.footer .left:before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;transition: all 0.5s ease-in-out;opacity:0.2;}
.footer .left:after{content:'';position:absolute;top: 2.4rem;right: -1.2rem;width:0.1rem;height: calc(100% - 2.4rem - 2.4rem);background:#fff;transition: all 0.5s ease-in-out;opacity:0.2;}
.footer .right{position:relative;flex: 3;padding: 2.4rem 0 2.4rem 1.2rem;width:100%;}
.footer .right:before{content:'';position:absolute;top:0;right:0;bottom:0;width:100%;border-top:1px solid #fff;border-bottom:1px solid #fff;transition: all 0.5s ease-in-out;opacity:0.2;}
.footer .logo{width: 20rem;display:flex;margin-bottom:auto;}
.footer .logo img{max-width:100%;height:24px;object-fit:contain}
.footer .name{line-height:1.5;font-size:1.6rem;font-weight:600;color:#fff;}
.footer .copy{margin-top:0.6rem;line-height:1.5;font-size:1.4rem;font-weight:400;color:#fff;}
.footer .info{line-height:1.6;font-size:1.4rem;font-weight:300}
.footer .info ul{}
.footer .info li{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:1.6rem;}
.footer .info li:before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;border-top:1px solid #fff;transition: all 0.5s ease-in-out;opacity:0.2;}
.footer .info li:first-child dl{padding-top:0;}
.footer .info li:last-child dl{padding-bottom:0;}
.footer .info li:first-child:before{display:none;}
.footer .info dl{display:flex;align-items:center;line-height:2.8rem;font-size:1.4rem;font-weight:400;color:#fff;gap:0.6rem;padding:1.2rem 0;}
.footer .info dt{font-weight:600;}
.footer .info dd{font-weight:400;}
.footer .gotop{position:fixed;z-index: 111;bottom:140px;right:40px;width:80px;height:80px;border-radius:80px;background:#116bb5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;font-size:14px;font-weight:600;color:#fff;line-height:1;opacity:0;visibility:hidden;pointer-events:none;transition: all 0.5s;}
.footer .gotop.active{opacity:1;visibility:visible;bottom:80px;pointer-events:all;}
.footer .gotop:before{content:'';width:10px;height:6px;background:url("../img/common/gotop.svg") no-repeat center / contain;}

.content-wrap .section{overflow: hidden;}
.content-wrap .sec-1{position:relative;height:100dvh;background:#fff;overflow:hidden;}
.content-wrap .sec-1 .sect-wrap{position:absolute;inset: 0;z-index: 1;overflow:hidden;}
.content-wrap .sec-1 .sect-wrap .img-wrap{ position:absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-left: -236px; width: 612px ; height: 900px; max-width: 100%; max-height: 100%; will-change: width, height; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.content-wrap .sec-1 .sect-wrap .img-wrap img{width:100%;height:100%;object-fit:cover}
.content-wrap .sec-1 .mask-wrap{ position:absolute; inset:0; width:1248px; left:50%; transform:translateX(-50% ); z-index: 2; -webkit-transform:translateX(-50% ); -moz-transform:translateX(-50% ); -ms-transform:translateX(-50% ); -o-transform:translateX(-50% ); }
.content-wrap .sec-1 .mask-wrap .pack-img{
  position: absolute; top:350px; left: 30%; width: 100%;}
.content-wrap .sec-1 .icon-wrap{
  position:absolute;
  bottom:22%;
  left:5%;
  width:63.6rem;
  height:9.8rem;
  background:url("/static/img/main/visual_icon.png") no-repeat center / contain;
  z-index:0;
}
.content-wrap .sec-1 .txt-wrap{position: absolute;top:350px;left: 0;width: 100%;pointer-events:none;z-index:2}
.content-wrap .sec-1 .txt-wrap .txt{position: absolute;top: 0;right: 0;display:flex;flex-direction:column;text-align:right;align-items: flex-end;width: 100%;will-change: width, height;padding: 0 0 10px;}
.content-wrap .sec-1 .txt-wrap .txt .t1{font-size: 72px;font-weight:600;text-transform: uppercase;}
.content-wrap .sec-1 .txt-wrap .txt .t2{margin-top:6rem;padding-top:2.4rem;line-height: 1.4;font-size:2rem;width: 46.6rem;max-width: 100%;}
.content-wrap .sec-1 .txt-wrap .txt.txt-white{z-index: 2;  --mask: 0; clip-path: inset(0 100% 0 0);will-change: clip-path;}
.content-wrap .sec-1 .txt-wrap .txt.txt-white .t1{color:#fff;}
.content-wrap .sec-1 .txt-wrap .txt.txt-white .t2{color:#fff;border-top: 1px solid #ffffff;}
.content-wrap .sec-1 .txt-wrap .txt.txt-black{z-index: 1;}
.content-wrap .sec-1 .txt-wrap .txt.txt-black .t1{color:#1f1f1f;}
.content-wrap .sec-1 .txt-wrap .txt.txt-black .t2{color:#1f1f1f;border-top: 1px solid #1f1f1f;}
.content-wrap .sec-2{background:#fff;}
.content-wrap .sec-2 .product-wrap{padding: 12rem 0;}
.content-wrap .sec-2 .product-wrap .item-wrap{display:flex;gap: 24px;}
.content-wrap .sec-2 .product-wrap .item-wrap .img{position:relative;z-index:4;width:50%;overflow:hidden;}
.content-wrap .sec-2 .product-wrap .item-wrap .con{position:relative;z-index:5;width:50%;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;text-align: left;padding: 0 2rem;}
.content-wrap .sec-2 .product-wrap .item-wrap .con:before{content:'';position:absolute;top: 21%;left: -8.8rem;width:9.8rem;aspect-ratio:1/1;background:url("../img/main/product_arrow.png") no-repeat center / contain;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .title{margin-bottom:2.4rem;line-height:6.4rem;font-size:5.2rem;font-weight:600;color:#1f1f1f;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .desc{margin-bottom:0rem;line-height:1.5;font-size: 2rem;font-weight:300;color:#8f8f8f;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .color{margin-top: 2.4rem; display: flex;flex-wrap:wrap;gap: 1.2rem;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .color p{width:2.4rem;height:2.4rem;border-radius:2.4rem;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .color p.blue{background:#00b0ec;border:2px solid #116bb5;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .color p.purple{background:#C3AADF;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .color p.pink{background:#FFCCF4;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button{margin: 6rem 0 0 0;display: flex; gap: 1.2rem;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button button{display: flex;align-items: center;justify-content: center;width: 4.8rem;height: 4.8rem;border-radius: 6rem;border: 1px solid #116bb5;transition:all 0.3s;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button button.prev:after{width:10px;height:20px;background:url("../img/common/ic_arrow_r.svg") no-repeat center / contain;content:'';transform:rotate(180deg);}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button button.next:after{width:10px;height:20px;background:url("../img/common/ic_arrow_r.svg") no-repeat center / contain;content:'';}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button button:hover{background:#116BB5;}
.content-wrap .sec-2 .product-wrap .item-wrap .con .button button:hover:after{background:url("../img/common/ic_arrow_hover.svg") no-repeat center / contain;}
.content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even){}
.content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even) .con{order:1;align-items: flex-end; margin-top: 272px;text-align: right;padding: 0 0 0 2rem;}
.content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even) .con:before{top:24%;left:unset;right:-10.8rem;transform:rotate(180deg);}
.content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even) .img{order:2;}
.content-wrap .sec-2 .desc-wrap{padding: 12rem 0;}
.content-wrap .sec-2 .desc-wrap .item-wrap{flex-wrap:wrap;gap:24px;display:flex;}
.content-wrap .sec-2 .desc-wrap .item-wrap + .item-wrap{margin-top:-1px;}
.content-wrap .sec-2 .desc-wrap .item-wrap:last-child .head:before{border-bottom:1px solid #1f1f1f;}
.content-wrap .sec-2 .desc-wrap .item-wrap:last-child .cont:before{border-bottom:1px solid #1f1f1f;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head{flex:2; position:relative;width:61.2rem;max-width:100%;padding: 2.4rem 1.2rem 2.4rem 0;display:flex;flex-direction:column;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .t1{line-height: 6.4rem;font-size: 5.2rem;font-weight: 600;color: #1f1f1f;margin-bottom: 2.4rem;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .t2{position:relative;padding: 2.4rem 0 0 0;line-height: 1.5;font-size: 2rem;font-weight: 300;color: #1f1f1f;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .t2:before{content:'';position:absolute;top:0;left:0;width:100%;height: 1px;background:#1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link{display:flex;flex-direction:column;gap:1.2rem 0;margin:auto 0 0 0;align-items:flex-start;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a{display:flex;flex-direction:column;width:22rem;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a i{margin:0 0 0 auto;width:9rem;height:9rem;border-radius:9rem;border:1.6rem solid #116bb5;background:#ffffff;display: flex;align-items: center;justify-content: center;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a i:before{content:'';width: 6px;height: 10px;background:url("../img/main/product_link.png") no-repeat center / contain;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a span{display:flex;align-items:flex-start;line-height:1.75;font-size:1.6rem;font-weight:500;color:#116bb5;gap:0.6rem;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a span:after{content:'';width:4rem;height:1.4rem;background:url("../img/main/product_link_line.png") no-repeat center / contain;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head .link a:hover span{text-decoration:underline;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head:before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f; transition: all 0.5s ease-in-out;pointer-events: none;}
.content-wrap .sec-2 .desc-wrap .item-wrap:last-child .head:before{border-top: 1px solid transparent;}
.content-wrap .sec-2 .desc-wrap .item-wrap:last-child .cont{border-top: 1px solid transparent;}
.content-wrap .sec-2 .desc-wrap .item-wrap .head:after{content:'';position:absolute;top: 2.4rem;right: -1.2rem;width:0.1rem;height: calc(100% - 2.4rem - 2.4rem);background:#1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .desc-wrap .item-wrap .cont{position:relative;flex:3;padding: 2.4rem 0 2.4rem 1.2rem; border-top:1px solid #1f1f1f; border-bottom:1px solid #1f1f1f;}
.content-wrap .sec-2 .desc-wrap .item-wrap .cont .img{display:flex;align-items:center;justify-content: flex-start;}
.content-wrap .sec-2 .desc-wrap .item-wrap .cont .img img{display:block;width:auto;max-width:100%;height:auto;}
.content-wrap .sec-2 .desc-wrap .item-wrap .cont .vod{display: block;width:100%;height: 40.4rem;}
.content-wrap .sec-2 .desc-wrap .item-wrap .cont .vod video,
.content-wrap .sec-2 .desc-wrap .item-wrap .cont .vod iframe{width:100%;height:100%;object-fit:cover;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init .head:before{width:0px;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init .head:after{height:0px;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init .head .t2:before{width:0px;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init.animate .head:before{width:100%;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init.animate .head:after{height: calc(100% - 2.4rem - 2.4rem);}
.content-wrap .sec-2 .desc-wrap .item-wrap.init.animate .head .t2:before{width:100%;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init .cont:before{width:0px;}
.content-wrap .sec-2 .desc-wrap .item-wrap.init.animate .cont:before{width:100%;}
.content-wrap .sec-2 .custom-wrap{padding: 12rem 0;background:#C8E8FF;}
.content-wrap .sec-2 .custom-wrap .item-wrap{flex-wrap:wrap;gap:24px;display:flex;}
.content-wrap .sec-2 .custom-wrap .item-wrap:last-child .head:before{border-bottom:1px solid #1f1f1f;}
.content-wrap .sec-2 .custom-wrap .item-wrap:last-child .cont:before{border-bottom:1px solid #1f1f1f;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head{flex:2;position:relative;width:61.2rem;max-width:100%;padding: 2.4rem 1.2rem 2.4rem 0;display:flex;flex-direction:column;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head:before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;border-top:1px solid #1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head:after{content:'';position:absolute;top:1.2rem;right: -1.2rem;width:0.1rem;height:calc(100% - 1.2rem - 1.2rem);background:#1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .custom-wrap .item-wrap .cont{position:relative;flex:1;padding: 2.4rem 0;}
.content-wrap .sec-2 .custom-wrap .item-wrap .cont:before{content:'';position:absolute;top:0;right:0;bottom:0;width:100%;border-top:1px solid #1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t1{line-height: 8rem;font-size: 5.2rem;font-weight: 600;color: #1f1f1f;margin-bottom: 2.4rem;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t2{margin: auto 0 0 0;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t2 p{position:relative;display:flex;align-items:center;padding:2.4rem 0;gap:1.2rem;line-height:3.6rem;font-size:2rem;font-weight:500;color:#1f1f1f;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t2 p:before{content:'';position:absolute;top:0;left:0;width:100%;height: 1px;background:#1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t2 p em{width:3.6rem;height:3.6rem;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:3.6rem;border:1px solid #1f1f1f;font-size:1.6rem;font-weight:400;color:#1f1f1f;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t3{position:relative;padding: 2.4rem 0 0 0;line-height: 1.5;font-size: 2rem;font-weight: 300;color: #1f1f1f;}
.content-wrap .sec-2 .custom-wrap .item-wrap .head .t3:before{content:'';position:absolute;top:0;left:0;width:100%;height: 1px;background:#1f1f1f;transition: all 0.5s ease-in-out;}
.content-wrap .sec-2 .custom-wrap .item-wrap .cont{flex: 3;padding: 2.4rem 0 2.4rem 1.2rem;}
.content-wrap .sec-2 .custom-wrap .item-wrap .cont .img{display:flex;align-items:center;justify-content: flex-start;}
.content-wrap .sec-2 .custom-wrap .item-wrap .cont .img img{display:block;width:auto;max-width:100%;height:auto;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init .head:before{width:0px;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init .head:after{height:0px;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init .head .t2 p:before{width:0px;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init .head .t3:before{width:0px;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init.animate .head:before{width:100%;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init.animate .head:after{height:calc(100% - 1.2rem - 1.2rem);}
.content-wrap .sec-2 .custom-wrap .item-wrap.init.animate .head .t2 p:before{width:100%;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init.animate .head .t3:before{width:100%;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init .cont:before{width:0px;}
.content-wrap .sec-2 .custom-wrap .item-wrap.init.animate .cont:before{width:100%;}
.content-wrap .sec-2 .ivision-wrap{padding: 12rem 0;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;overflow: hidden;background: linear-gradient(180deg, rgba(247, 252, 254, 0) 0%, #F7FCFE 100%);}
.content-wrap .sec-2 .ivision-wrap .tit{margin: 0 0 4.8rem;}
.content-wrap .sec-2 .ivision-wrap .txt{line-height: 1.5;font-size: 2rem;font-weight: 300;color: #1f1f1f;margin-bottom: 6rem;}
.content-wrap .sec-2 .ivision-wrap .img{margin: 0 0 12rem 0;}
.content-wrap .sec-2 .ivision-wrap .img ul{width: 130rem;max-width: 100%;display: flex;}
.content-wrap .sec-2 .ivision-wrap .img ul li{width:416px; height:212px; flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 6rem 0;gap: 2.4rem 0;border-right: 1px solid #C8E8FF;}
.content-wrap .sec-2 .ivision-wrap .img ul li img{width: auto;height: 8rem;object-fit: contain;}
.content-wrap .sec-2 .ivision-wrap .img ul li span{line-height: 1.5;font-size: 1.6rem;font-weight: 400;color: #116bb5;}
.content-wrap .sec-2 .ivision-wrap .marquee{ height: 8rem; animation: scrollText 30s linear infinite; width: 100%; opacity: 0.3; -webkit-animation: scrollText 30s linear infinite; }
.content-wrap .sec-2 .ivision-wrap .marquee ul{display: flex;align-items: center;}
.content-wrap .sec-2 .ivision-wrap .marquee ul li{flex:0 0 auto;width:auto;height:100%;line-height:1;font-size:9.6rem;font-weight:600;color:#cbe8ff;display:flex;align-items:center;}
.content-wrap .sec-2 .ivision-wrap .marquee ul li:after{content:'';width:1rem;height:1rem;border-radius:1rem;background:#c8e8ff;margin:0 6rem;}
.content-wrap .sec-3{position: relative;padding: 12rem 0;background:#F7FCFE;overflow:hidden;}
.content-wrap .sec-3 .inner{position:relative;}

.content-wrap .sec-3 .title a{
  color:  #1F1F1F;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /*175%*/padding: 8px 20px;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid #8F8F8F;
  transform:translateY(-10px);
  -webkit-transform:translateY(-10px);
  -moz-transform:translateY(-10px);
  -ms-transform:translateY(-10px);
  -o-transform:translateY(-10px);
  display: inline-block;
  margin-left: 2.4rem;
}
.content-wrap .sec-3 .title a img{ margin-left: 1rem;}
.content-wrap .sec-3 .title{vertical-align: middle; margin:0 0 4.8rem;line-height:8rem;font-size:5.2rem;font-weight:600;color:#1f1f1f;}
.content-wrap .sec-3 .control{position:absolute;top:0;right:0;height:8rem;display:flex;align-items:center;gap:1.2rem;}
.content-wrap .sec-3 .control button{width:4.8rem;height:4.8rem;border-radius:6rem;border:1px solid rgb(17 107 181 / 50%);display:flex;align-items:center;justify-content:center;}
.content-wrap .sec-3 .control button:before{content:'';width:1rem;height:2rem;background:url("../img/common/ic_arrow_r.svg") no-repeat center / contain;opacity:0.5;}
.content-wrap .sec-3 .control button.prev:before{ transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); }
.content-wrap .sec-3 .control button.next:before{transform:rotate(0deg);}
.content-wrap .sec-3 .control button:hover{border-color:rgb(17 107 181);background:rgb(17 107 181);}
.content-wrap .sec-3 .control button:hover:before{background:url("../img/common/ic_arrow_hover.svg") no-repeat center / contain;opacity:1;}
.content-wrap .sec-3 .list{}
.content-wrap .sec-3 .list .swiper-wrapper{}
.content-wrap .sec-3 .list .swiper-slide{position:relative;}
.content-wrap .sec-3 .list .swiper-slide:after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:#1f1f1f;}
.content-wrap .sec-3 .list a{padding:0 2.4rem;display:flex;flex-direction:column;}
.content-wrap .sec-3 .list a:hover .img i{opacity:1;visibility:visible;}
.content-wrap .sec-3 .list a:hover .img:before{opacity:0.1;visibility:visible;}
.content-wrap .sec-3 .list .img{position:relative;width:100%;height:auto;aspect-ratio:73/41;background:#fff;}
.content-wrap .sec-3 .list .img:before{content:'';position:absolute;inset:0;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.5s;}
.content-wrap .sec-3 .list .img img{width:100%;height:100%;}
.content-wrap .sec-3 .list .img i{position:absolute;top:50%;left:50%;width:10rem;height:10rem;border-radius:10rem;background:#116bb5;display:flex;align-items:center;justify-content:center;line-height: 1.5;font-size: 1.6rem;font-weight: 600;color: #fff;transform:translate(-50%,-50%);font-style: normal;animation: pulse 1.5s ease-in-out infinite;opacity:0;visibility:hidden;transition:all 0.5s;}
.content-wrap .sec-3 .list .con{padding:2.4rem 0 0 0;}
.content-wrap .sec-3 .list .subject{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;line-height: 1.5;font-size: 2.4rem;font-weight: 600;color: #1f1f1f;overflow: hidden;}
.content-wrap .sec-3 .list .desc{display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;height: auto; min-height: 7.5rem; line-height: 3.6rem;font-size: 2rem;font-weight: 300;color: #1f1f1f;overflow: hidden;}
.content-wrap .sec-3 .list .date{display:block;margin: 2.4rem 0 0 0;line-height: 1.5;font-size: 1.6rem;font-weight: 300;color: #1f1f1f;}
.content-wrap .sec-4{position: relative;padding: 12rem 0;background:#116BB5;overflow:hidden;}
.content-wrap .sec-4 .custom-wrap{padding: 12rem 0;background:#C8E8FF;}
.content-wrap .sec-4 .contact-wrap{flex-wrap:wrap;gap: 2.4rem;display:flex;}
.content-wrap .sec-4 .contact-wrap:last-child .head:before{border-bottom:1px solid #fff;}
.content-wrap .sec-4 .contact-wrap:last-child .cont:before{border-bottom:1px solid #fff;}
.content-wrap .sec-4 .contact-wrap .head{flex:2;position:relative;width:61.2rem;max-width:100%;padding: 2.4rem 1.2rem 2.4rem 0;display:flex;flex-direction:column;}
.content-wrap .sec-4 .contact-wrap .head:before{content:'';position:absolute;top:0;left:0;bottom:0;width:100%;border-top:1px solid #fff;transition: all 0.5s ease-in-out;}
.content-wrap .sec-4 .contact-wrap .head:after{content:'';position:absolute;top: 2.4rem;right: -1.2rem;width:0.1rem;height: calc(100% - 2.4rem - 2.4rem);background:#fff;transition: all 0.5s ease-in-out;}
.content-wrap .sec-4 .contact-wrap .head .t1{line-height: 6.4rem;font-size: 5.2rem;font-weight: 600;color: #fff;margin-bottom: 2.4rem;}
.content-wrap .sec-4 .contact-wrap .head .t2{position:relative;margin: auto 0 0 0;padding: 2.4rem 0;line-height: 1.5;font-size: 2rem;font-weight: 600;color: #fff;}
.content-wrap .sec-4 .contact-wrap .head .t2:before{content:'';position:absolute;top:0;left:0;width:100%;height: 1px;background:#fff;transition: all 0.5s ease-in-out;}
.content-wrap .sec-4 .contact-wrap .head .t3{position:relative;padding: 2.4rem 0 0 0;line-height: 1.5;font-size: 2rem;font-weight: 300;color: #fff;}
.content-wrap .sec-4 .contact-wrap .head .t3:before{content:'';position:absolute;top:0;left:0;width:100%;height: 1px;background:#fff;transition: all 0.5s ease-in-out;}
.content-wrap .sec-4 .contact-wrap .cont{position:relative;flex: 3;padding: 2.4rem 0 2.4rem 1.2rem;width:100%;height:100%;}
.content-wrap .sec-4 .contact-wrap .cont:before{content:'';position:absolute;top:0;right:0;bottom:0;width:100%;border-top:1px solid #fff;transition: all 0.5s ease-in-out;}
.content-wrap .sec-4 .contact-wrap .cont iframe{width:71.8rem;height:39.6rem;}
.content-wrap .sec-4 .contact-wrap.init .head:before{width:0px;}
.content-wrap .sec-4 .contact-wrap.init .head:after{height:0px;}
.content-wrap .sec-4 .contact-wrap.init .head .t2:before{width:0px;}
.content-wrap .sec-4 .contact-wrap.init .head .t3:before{width:0px;}
.content-wrap .sec-4 .contact-wrap.init.animate .head:before{width:100%;}
.content-wrap .sec-4 .contact-wrap.init.animate .head:after{height: calc(100% - 2.4rem - 2.4rem);}
.content-wrap .sec-4 .contact-wrap.init.animate .head .t2:before{width:100%;}
.content-wrap .sec-4 .contact-wrap.init.animate .head .t3:before{width:100%;}
.content-wrap .sec-4 .contact-wrap.init .cont:before{width:0px;}
.content-wrap .sec-4 .contact-wrap.init.animate .cont:before{width:100%;}

@media all and (max-width: 85.375rem) {


  .header{}
  .header .inner{flex-direction:column;align-items:stretch;min-height:6rem;}
  .header .logo{padding: 1.5rem 0;display: flex;align-items:center;justify-content:center;width:100%;height: 5rem;}
  .header .logo > a{width: 10rem;height:auto;}
  .header .gnb{gap:1rem;height: 4rem;width: 100%;}
  .header .gnb > li{flex:auto;}
  .header .gnb > li > a{line-height: 1.2;font-size:1.5rem;letter-spacing: -0.02em;text-align: center;justify-content: center;}
  .header .gnb > li > a:before{display:none;}

  .footer{padding:4rem 2rem;}
  .footer .inner{flex-direction:column;gap: 0;}
  .footer .left{padding: 2rem 0;}
  .footer .left:before{border-bottom:0;}
  .footer .left:after{display:none;}
  .footer .right{padding:1rem 0;}
  .footer .logo{width: 12rem;margin-bottom: 2.4rem;}
  .footer .name{font-size:1.2rem;}
  .footer .copy{font-size:1.2rem;}
  .footer .info{line-height:1.6;font-size:1.2em;}
  .footer .info li{gap: 0.5rem;flex-wrap:wrap;justify-content: flex-start;margin-bottom:0.5rem;}
  .footer .info li:before{display:none;}
  .footer .info dl{width:100%;line-height:1.5;font-size:1.2rem;padding: 0;align-items: flex-start;}
  .footer .info dl dt{min-width:5rem;}
  .footer .gotop{bottom:10px;right:20px;width:60px;height:60px;font-size:13px;}
  .footer .gotop.active{bottom:20px;}

  .content-wrap .sec-1{}
  .content-wrap .sec-1 .sect-wrap{position:absolute;inset: 0;z-index: 1;overflow:hidden;}
  .content-wrap .sec-1 .sect-wrap .img-wrap{margin: 0;width: 60%;height: 60%;}
  .content-wrap .sec-1 .mask-wrap{ width: 90%;  }
  .content-wrap .sec-1 .mask-wrap .pack-img {
            position: absolute;
        top: 200px;
        left: 31%;
        width: 100%;

}
  .content-wrap .sec-1 .icon-wrap{position:absolute;bottom:9rem;left:63%;margin: 0 0 0 -780px;width:30%;height:9.8rem;background:url("../img/main/visual_icon.png") no-repeat center / contain;z-index:0;}
  .content-wrap .sec-1 .txt-wrap{top: 63%;}
  .content-wrap .sec-1 .txt-wrap .txt{padding: 0 2rem  1rem;}
  .content-wrap .sec-1 .txt-wrap .txt .t1{font-size:4.2rem;}
  .content-wrap .sec-1 .txt-wrap .txt .t2{margin-top:2rem;padding-top:1.6rem;font-size:1.4rem;width:27%;}
  .content-wrap .sec-1 .txt-wrap .txt.txt-white{}
  .content-wrap .sec-1 .txt-wrap .txt.txt-white .t1{color:#fff;}
  .content-wrap .sec-1 .txt-wrap .txt.txt-white .t2{color:#fff;border-top: 1px solid #ffffff;}
  .content-wrap .sec-1 .txt-wrap .txt.txt-black{}
  .content-wrap .sec-2{background:#fff;}
  .content-wrap .sec-2 .product-wrap{padding: 6rem 2rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap{flex-direction: column;margin-bottom: 2rem;gap: 2rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .img{width: 100%;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con{width: 100%;padding: 0 2rem 0 0;}
  .content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even) .con{
    margin-top: 0;
  }
  .content-wrap .sec-2 .product-wrap .item-wrap .con:before{width: 5rem;top: -6.8rem;left: 0;transform: scaleX(-1) rotate(90deg);}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .title{margin-bottom: 1.2rem;line-height: 1.5;font-size: 2.4rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .title br{display:none;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .desc{margin-bottom: 1.2rem;font-size: 1.6rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .color{gap: 1rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .color p{width: 2rem;height: 2rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .button{margin: 2rem 0 0 0;gap: 1rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .button button{width: 4rem;height: 4rem;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .button button.prev:after{width:6px;height:12px;}
  .content-wrap .sec-2 .product-wrap .item-wrap .con .button button.next:after{width:6px;height:12px;}
  .content-wrap .sec-2 .product-wrap .item-wrap:nth-child(even) .con:before{width: 5rem;top: calc(100% + 1.8rem);left: unset;right: 0;transform: scaleX(-1) rotate(-90deg);}
  .content-wrap .sec-2 .desc-wrap{padding: 4rem 2rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap{flex-direction: column;gap: 1.2rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head{width: 100%;padding: 1rem 0;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head:after{display:none;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .t1{line-height: 1.5;font-size: 2rem;margin-bottom: 1.2rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .t1 br{display:none;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .t2{padding: 1.2rem 0 0 0;font-size: 1.4rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link{flex-direction: row;gap: 0;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link a{width: 50%;flex-direction: row;gap: 0.5rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link a i{width: 3rem;height: 3rem;border-width: 0.2rem;margin: 0;order: 2;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link a i:before{width: 4px;height: 8px;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link a span{font-size:1.2rem;align-items: center;order: 1;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .head .link a span:after{width:2rem;height:0.7rem;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .cont{padding:1rem 0;fleX: 0 0 auto;height: auto;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .cont:before{display:none;}
  .content-wrap .sec-2 .desc-wrap .item-wrap .cont .vod{height:20rem;}
  .content-wrap .sec-2 .custom-wrap{padding:4rem 2rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap{gap:1.2rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head{padding:1rem 0;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head:after{display:none;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .cont{padding:1rem 0;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .cont:before{display:none;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head .t1{line-height: 1.5;font-size: 2.4rem;margin-bottom: 1.2rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head .t2{}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head .t2 p{padding:1.2rem 0;gap:1rem;font-size:1.3rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head .t2 p em{width:2rem;height:2rem;font-size:1.2rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .head .t3{padding: 1.2rem 0 0 0;font-size: 1.4rem;}
  .content-wrap .sec-2 .custom-wrap .item-wrap .cont{padding: 1rem 0;}
  .content-wrap .sec-2 .ivision-wrap{padding:4rem 2rem;}
  .content-wrap .sec-2 .ivision-wrap .tit{margin: 0 0 1rem;}
  .content-wrap .sec-2 .ivision-wrap .tit img{height:1.6rem;}
  .content-wrap .sec-2 .ivision-wrap .txt{font-size:1.2rem;margin-bottom:2rem;}
  .content-wrap .sec-2 .ivision-wrap .txt br{display:none;}
  .content-wrap .sec-2 .ivision-wrap .img{width: 100%;margin: 0 0 2rem;}
  .content-wrap .sec-2 .ivision-wrap .img ul{width:100%;}
  .content-wrap .sec-2 .ivision-wrap .img ul li{padding: 2rem 0;gap: 1rem;}
  .content-wrap .sec-2 .ivision-wrap .img ul li img{height:3rem;}
  .content-wrap .sec-2 .ivision-wrap .img ul li span{font-size:1.2rem}
  .content-wrap .sec-2 .ivision-wrap .marquee{height:4rem;}
  .content-wrap .sec-2 .ivision-wrap .marquee ul li{font-size:4rem;}
  .content-wrap .sec-2 .ivision-wrap .marquee ul li:after{margin:0 1rem;}
  .content-wrap .sec-3{padding:4rem 2rem;}
  .content-wrap .sec-3 .inner{position:relative;}
  .content-wrap .sec-3 .title{margin:0 0 2.4rem;line-height:1.5;font-size:2.4rem;}
  .content-wrap .sec-3 .control{position:static;justify-content:center;margin-top:2rem;}
  .content-wrap .sec-3 .control button{width:4rem;height:4rem;}
  .content-wrap .sec-3 .control button:before{width: 6px;height: 12px;}
  .content-wrap .sec-3 .list{}
  .content-wrap .sec-3 .list .swiper-wrapper{}
  .content-wrap .sec-3 .list a{padding:0 1rem;}
  .content-wrap .sec-3 .list .img{}
  .content-wrap .sec-3 .list .img i{width: 6.2rem;height: 6.2rem;font-size: 1.1rem;}
  .content-wrap .sec-3 .list .con{padding:1.2rem 0 0 0;}
  .content-wrap .sec-3 .list .subject{font-size:1.8rem;}
  .content-wrap .sec-3 .list .desc{font-size:1.4rem;line-height:2rem;height:4rem;}
  .content-wrap .sec-3 .list .date{margin: 1.2rem 0 0 0;font-size:1.2rem; min-height: 2rem;}
  .content-wrap .sec-4{padding:4rem 2rem}
  .content-wrap .sec-4 .contact-wrap{}
  .content-wrap .sec-4 .contact-wrap .head{padding:1rem 0;}
  .content-wrap .sec-4 .contact-wrap .head:after{display:none;}
  .content-wrap .sec-4 .contact-wrap .head .t1{line-height:1.5;font-size:2.4rem;margin-bottom:2rem;}
  .content-wrap .sec-4 .contact-wrap .head .t2{font-size:1.4rem;padding:1rem 0;}
  .content-wrap .sec-4 .contact-wrap .head .t3{font-size:1.4rem;padding:1rem 0;}
  .content-wrap .sec-4 .contact-wrap .cont{padding:1rem 0;height:24rem;}
  .content-wrap .sec-4 .contact-wrap .cont:before{display:none;}
  .content-wrap .sec-4 .contact-wrap .cont iframe{width:100%;height:100%;}
  .content-wrap .sec-4 .contact-wrap.init .head:before{width:0px;}
  .content-wrap .sec-4 .contact-wrap.init .head:after{height:0px;}
  .content-wrap .sec-4 .contact-wrap.init .head .t2:before{width:0px;}
  .content-wrap .sec-4 .contact-wrap.init .head .t3:before{width:0px;}
  .content-wrap .sec-4 .contact-wrap.init.animate .head:before{width:100%;}
  .content-wrap .sec-4 .contact-wrap.init.animate .head:after{height:calc(100% - 1.2rem - 1.2rem);}
  .content-wrap .sec-4 .contact-wrap.init.animate .head .t2:before{width:100%;}
  .content-wrap .sec-4 .contact-wrap.init.animate .head .t3:before{width:100%;}
  .content-wrap .sec-4 .contact-wrap.init .cont:before{width:0px;}
  .content-wrap .sec-4 .contact-wrap.init.animate .cont:before{width:100%;}

  .content-wrap .sec-3 .title a{
  color:  #1F1F1F;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  /*175%*/padding: 4px 20px;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid #8F8F8F;
  transform:translateY(-4px);
  -webkit-transform:translateY(-4px);
  -moz-transform:translateY(-4px);
  -ms-transform:translateY(-4px);
  -o-transform:translateY(-4px);
  display: inline-block;
  margin-left: 1rem;
}

}
@media (max-width:768px){
      .content-wrap .sec-1 .mask-wrap .pack-img {
        position: absolute;
        top: 182px;
        left: 21%;
        width: 60%;
        z-index: 100;

    }
}
@keyframes scrollText{
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgb(17 107 181 / 50%);
  }
  100% {
    box-shadow: 0 0 0 2.4rem rgb(17 107 181 / 0%);
  }
}


.visual-sec {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #f5f5f5;
}

.visual-sec .inner {
  width: 100%;
  height: 100%;
  position: relative;
}

 .blue-bg {
  position: absolute;
  right: -110%;
  top: 0;
  width: 100%;
  height: 100%;
  background: #006dbe;
   clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 10% 100%);
  z-index: 1;
}

.visual-sec .left-group {
  position: absolute;
  left: 10rem;
  top: 50%;
  transform: translateY(-50% );
  z-index: 2;
  border: 1px solid #000;
  width: 100%;
}

.visual-sec .cards-wrap{
  position: relative;
  width: 192rem;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  top: 50px;
}

.visual-sec .cards-wrap img{
  position: absolute;
  opacity: 0;
  transform: translateX(-12rem);
  will-change: transform, opacity;
  z-index: 100;
}
.item1{ top: 14rem;
    left: 48rem; }
.item2{   top: 23.5rem;
    left: 30rem; }
.item3{    top: 20rem;
    left: 1rem; }
.item4{   top: 39.5rem;
    left: 28rem;}
.item5{  top: 39.5rem;
    left: -5rem;}
.item6{  top: 52rem;
    left: -12rem;}
.item7{    top: 66.5rem;
    left: 16rem;}
.item8{   top: 68rem;
    left: 4rem;}




.visual-sec .right-group {
  position: absolute;
  right: 30rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6rem;
  z-index: 3;
}

.visual-sec .right-group .cards {
  width: 35rem;
}

.visual-sec .right-group .txt {
  color: #fff;
}

.visual-sec .right-group .txt h2 {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.1;
}

.visual-sec .right-group .txt p {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 1.6;
}

/* =========================================================
   DESKTOP
========================================================= */

.visual-sec {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #f5f5f5;
}

.visual-sec .inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.visual-sec .blue-bg {
  position: absolute;
  right: -110%;
  top: 0;
  width: 100%;
  height: 100%;
  background: #006dbe;
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 10% 100%);
  z-index: 1;
}

.visual-sec .left-group {
  position: absolute;
  left: 10rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 100%;
}

.visual-sec .cards-wrap {
  position: relative;
  width: 192rem;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  top: 5rem;
}

.visual-sec .cards-wrap img {
  position: absolute;
  opacity: 0;
  transform: translateX(-12rem);
  will-change: transform, opacity;
  z-index: 100;
}

/* item position */
.item1 {
  top: 14rem;
  left: 48rem;
}

.item2 {
  top: 23.5rem;
  left: 30rem;
}

.item3 {
  top: 20rem;
  left: 1rem;
}

.item4 {
  top: 39.5rem;
  left: 28rem;
}

.item5 {
  top: 39.5rem;
  left: -5rem;
}

.item6 {
  top: 52rem;
  left: -12rem;
}

.item7 {
  top: 66.5rem;
  left: 16rem;
}

.item8 {
  top: 68rem;
  left: 4rem;
}

.visual-sec .right-group {
  position: absolute;
  right: 30rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6rem;
  z-index: 3;
}

.visual-sec .right-group .cards {
  width: 35rem;
}

.visual-sec .right-group .txt {
  color: #fff;
}

.visual-sec .right-group .txt h2 {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.1;
}

.visual-sec .right-group .txt p {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 1.6;
}

@media (max-width: 1600px){

  .visual-sec .cards-wrap{
    transform: scale(.9);
    transform-origin: left center;
    z-index: 10;
    left: -9rem;
  }

  .visual-sec .right-group{
    right: 15rem;
  }

  .visual-sec .right-group .txt h2{
    font-size: 4.2rem;
  }

}

@media (max-width: 1400px){
  .visual-sec  .mask-wrap{
      transform: scale(.7);
      -webkit-transform: scale(.7);
      -moz-transform: scale(.7);
      -ms-transform: scale(.7);
      -o-transform: scale(.7);
}

     .visual-sec .cards-wrap {
        transform: scale(.7);
        transform-origin: left center;
        left: -7rem;
        top: -11rem;
        z-index: 10;
    }

  .visual-sec .right-group{
    right: 8rem;
    gap: 4rem;
  }

  .visual-sec .right-group .txt h2{
    font-size: 3.8rem;
  }

}

@media (max-width: 1200px){

  .visual-sec{
    height: auto;
    padding: 12rem 0;
  }

  .visual-sec .inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8rem;
    border: 1px solid #000;
  }

  .visual-sec .left-group{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 2;
  }

  .visual-sec .cards-wrap{
 width: 100%;
        height: 70rem;
        transform: scale(.65);
        transform-origin: center top;
        left: -25rem;
        top: -2rem;

  }

  .visual-sec .right-group{
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    justify-content: center;
    text-align: center;
    order: 1;
  }

  .visual-sec .blue-bg{
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  }

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

  .visual-sec{
    padding: 10rem 0 8rem;
  }

  .visual-sec .cards-wrap{
    transform: scale(.55);
    height: 55rem;
            top: 5rem;
        left: -29rem;

  }

  .visual-sec .right-group .txt h2{
    font-size: 3rem;
  }

  .visual-sec .right-group .txt p{
    font-size: 1.4rem;
    margin-top: 2rem;
  }
      .content-wrap .sec-1 .txt-wrap .txt .t2 {
        margin-top: 2rem;
        padding-top: 1.6rem;
        font-size: 1.4rem;
        width: 100%;
    }

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

  .visual-sec{
    padding: 10rem 0 8rem;
  }

  .visual-sec .cards-wrap{
    transform: scale(.55);
    height: 55rem;
  }

  .visual-sec .right-group .txt h2{
    font-size: 3rem;
  }

  .visual-sec .right-group .txt p{
    font-size: 1.4rem;
    margin-top: 2rem;
  }
      .content-wrap .sec-1 .txt-wrap .txt .t2 {
        margin-top: 2rem;
        padding-top: 1.6rem;
        font-size: 1.4rem;
        width: 100%;
    }

}

@media (max-width: 480px){

  .visual-sec .cards-wrap{
    transform: scale(.42);
    height: 42rem;
    left: -31rem;
    top:-2rem;
    -webkit-transform: scale(.42);
    -moz-transform: scale(.42);
    -ms-transform: scale(.42);
    -o-transform: scale(.42);
}
    .content-wrap .sec-1 .mask-wrap .pack-img {
        position: absolute;
        top: 102px;
        left: 21%;
        width: 60%;
        z-index: 100;
    }

  .visual-sec .right-group .txt h2{
    font-size: 2.2rem;
  }

  .visual-sec .right-group .txt p br{
    display: none;
  }
.content-wrap .sec-1 .txt-wrap .txt {
    position: absolute;
    top: -32px;
    right: 0;
    display: flex;
    flex-direction: column;
    text-align: right;
    align-items: flex-end;
    width: 100%;
    will-change: width, height;
    padding: 0 0 10px;
}
.content-wrap .sec-1 .txt-wrap .txt .t1{
  font-size: 3.6rem;
}
}