/************* header PC ***************/ header {height:60px; position: fixed; top: 0;z-index:99999; left: 0; width: 100%; transition: background-color 0.3s ease-in-out;display: flex; justify-content: space-between; align-items: center; padding: 0 100px;} header:not(.scrolled) {background-color: transparent;} header.scrolled {background:#fff;height:60px;} header.scrolled .nav ul li a {color:#000;} header.scrolled .logo img:nth-of-type(2) {display:block;} header.scrolled .logo img:nth-of-type(1) {display:none;} header.scrolled .hamburger span{background:#000;} header .logo img {width:180px;} header .logo {font-weight: 900; font-size: 30px; color: #000;} header .logo img:nth-of-type(2) {display:none;} header .nav ul {display: flex; gap: 0 90px;} header .nav ul li a {color: #000; font-size: 20px; color: #000;} header .nav a.iBtn {color: #6A65FF !important; display:flex; align-items:center; justify-content:center; gap:10px;} header .nav a.iBtn img:nth-last-of-type(1) {display: none;} @media (max-width:1199px) { header .nav a.iBtn {gap:5px;} } /************* header mobile ***************/ .hamburger {display: none;background: none;border: none;cursor: pointer;width: 30px;height: 22px;flex-direction: column;justify-content: space-between;} .hamburger span {display: block;width: 30px;height: 1px;background: #000;transition: background-color 0.3s ease-in-out;color:#000;} .hamburger span:nth-of-type(2) {width:25px;} .mb-header {position: fixed;top: 0;right: -100%;width: 100%;height: 100vh;background-position:center; overflow:hidden;background:url(/assets/img/mb_bg_h.jpg) no-repeat ; background-size:cover; color: #fff;padding: 0;display: none;flex-direction: column;justify-content: center;transition: right 0.3s ease-in-out;z-index: 999999;} .mb-header.active {right: 0;} .mb-nav {padding:30px;position:absolute; width:100%; height:100%; display:flex; align-items:center; flex-direction:column; gap:100px;} .mb-nav ul {list-style: none;padding: 0; width:100%;} .mb-nav ul li {margin: 20px 0;text-align: center;} .mb-nav ul li a {color: #fff;text-decoration: none;font-size: 30px;} .mb-nav img {width:200px;} .close-menu {position: absolute;top: 15px;right: 20px;background: none;border: none; z-index:9999;font-size: 24px;color: #fff;cursor: pointer;} .bg_videos {position:relative; width:100%; height:100%; z-index:-1;} .bg_videos video {position:absolute; bottom:0; z-index:-1; width:100%;} /****************** visual (첫번째섹션) ******************/ .visual {position:relative; width:100%; height:100%;} .visual:after{display:block; content:''; clear:both;} .visual video {object-position: center top; width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0; border-radius:32px;} .visualWrap {position:relative; width:100%; height:calc(100vh - 50px); overflow:hidden; padding:60px 50px 50px} .visualWrap:after{display:block; content:''; clear:both;} .visualWrap h4 {color: #fff;background: #6152FF;width: 280px;border-radius: 22px;position: absolute;bottom: 190px;left: 622px;height: 70px;display: flex;align-items: center;justify-content: center;font-size: 30px; font-family:'Righteous-Regular'; letter-spacing:0;} .mainTitWrap {position:absolute; bottom:50px;} .mainTitWrap .mainTit {position:relative;} .mainTitWrap .mainTit h2 span {font-size:60px; font-family:'Pretendard-Bold';} .mainTitWrap .mainTit h2 span br {display:none;} .mainTitWrap .mainTit h2{color:#000; font-size:56px; font-weight:500; background:#fff; padding:24px 50px 0 40px; line-height:1.2; border-radius:0 32px 0 0; position:relative;} .mainTitWrap .mainTit h2:first-child{width: fit-content;font-family:'Pretendard-Light';} .mainTitWrap .mainTit h2:first-child::before{content: ''; background:url('/assets/img/radius-left.png') no-repeat top center; position:absolute; width:28px; height:28px; top:-28px; left:0;} .mainTitWrap .mainTit h2:first-child::after{content: ''; background:url('/assets/img/radius-left.png') no-repeat top center; position:absolute; width:28px; height:28px; bottom:0; right:-28px;} .mainTitWrap .mainTit h2:last-child{padding-bottom:24px;} .mainTitWrap .mainTit h2:last-child::after{content: ''; background:url('/assets/img/radius-left.png') no-repeat top center; position:absolute; width:28px; height:28px; bottom:0; right:-28px;} /****************** edWrap (두번째섹션) ******************/ .edWrap {padding:50px; width:100%; height:100%;} .edWrap.edWrap2 {padding:0;} .edCont {background: linear-gradient(180deg, #a5bdff 0%, #5F5BEB 100%); padding:50px; border-radius:30px; height:auto; width:100%; position:relative;} .edCont .edTxtBox {display:flex; flex-direction:column; justify-content:flex-start; gap:100px; width:70%;} .edCont .edTxt {display:flex; flex-direction:column; gap:40px;} .edCont .edTxt .edTit {font-size:40px; color:#302d49; font-family:'Pretendard-SemiBold'; line-height:1.4;} .edCont .edTxt .edTit b {color:#6152FF;} .edCont .edTxt .edSub {font-size:25px; color:#fff; line-height:1.4;} .edCont .edBoxCont {display:flex; gap:20px;} .edCont .edImgBox {position:absolute;width:40%; bottom:50px; right:70px; display:flex; justify-content:flex-end;} .edCont .edImgBox img {width:78%;} .edCont .edBoxCont .edBox {background:#fff; border-radius:20px; width:280px; height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;} .edCont .edBoxCont .edBox span {height:15%; display:flex; font-size:23px; font-family:'Pretendard-Bold';} .edCont .edBoxCont .edBox .boxImg {height:30%; display:flex; align-items:flex-start; justify-content:center;} .edCont .edBoxCont .edBox:first-of-type .boxImg img {height:65px;} .edCont .edBoxCont .edBox .boxImg img {height:60px;} .edCont .edBoxCont .edBox h4 {text-align:center; line-height:1.3; font-size:18px; color:#191b24;} /****************** frameWrap (세번째섹션 - 슬릭부분) ******************/ .frameWrap {position:relative; width:100%; padding:0 50px 50px; min-height:100vh; margin:100px 0 0 0;height: auto;overflow: hidden;} .frameWrap:after{display:block; content:''; clear:both;} .frame:after{display:block; content:''; clear:both;} .frame {position: absolute;top: 0;left: 0;width: 100%;height:100%;z-index: 1;} .frame video { width: 100%;height: 100%; object-fit: cover;} .frameWrap .slickWrap {position: relative;z-index: 2;width: 100%;padding: 0;background: transparent;} .frameWrap .slickWrap .slide-item .box {min-height:100%; height:auto; box-sizing:border-box;width:100%; display:flex; align-items:center; flex-direction:column; position:relative;} .frameWrap .slickWrap .slide-item .box:after{display:block; content:''; clear:both;} .frameWrap .slickWrap .slide-item .imgItem {display:flex; justify-content:space-between;} .frameWrap .slickWrap .slide-item .imgItem .text {display:flex; flex-direction:column; align-items:center; text-align:center;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {color:#000; font-size:45px; font-family:'Pretendard-Bold'; padding-bottom:20px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {color:#000; font-size:34px; font-family:'Pretendard-Light';} .frameWrap .slickWrap .slide-item .imgItem .text span {color:#000; padding-top:60px; font-size:24px; line-height:1.5; font-family:'Pretendard-Light';} .frameWrap .slickWrap .slide-item .imgItem .text span b {color:#666bfd; font-family:'Pretendard-SemiBold';} .frameWrap .slickWrap .slide-item .imgItem .text span b.cl00dfff {color:#00dfff;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox {width:150px; height:150px; background:#F3F4F9; display:flex; justify-content:center; align-items:center; border-radius:30px; position:absolute; left:20%; z-index:8889; top:0;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox img {width:50%;} .frameWrap .slickWrap .slick-active {opacity: 1;} .frameWrap .slickWrap .slick-slide.slick-active {opacity: 1;transition: opacity 1.5s ease-in-out;} .frameWrap .slickWrap .slick-slide:not(.slick-active) {opacity: 0.5;transition: opacity 1.5s ease-in-out;} .frameWrap .slickWrap .slick-dots {position: absolute;bottom: -50px;left: 50%;transform: translateX(-50%);display: flex; gap: 15px;} .frameWrap .slickWrap .slick-dots li {width: 14px;height: 14px;border-radius: 50%;background:#e8e8e8; transition: all 0.3s ease-in-out;list-style: none;cursor: pointer;} .frameWrap .slickWrap .slick-dots li.slick-active {width: 14px; height: 14px;background: #6152FF; box-shadow: 0px 0px 10px rgba(97, 82, 255, 0.6);} .frameWrap .slickWrap .slick-dots li button {display: none;} .frameWrap .slick-slide {display: block !important;opacity: 0;transition: opacity 0.5s ease;} .frameWrap .slick-slide.slick-active {opacity: 1;} .frameWrap .slick-prev {text-indent: -9999px;background: url(/assets/img/arrow1.png) no-repeat transparent; transform: translateY(-50%);background-position:left; width: 60px;height: 60px;position: absolute;left: 5%;top: 52%;z-index: 9999;background-size: contain;} .frameWrap .slick-next {text-indent: -9999px;background: url(/assets/img/arrow2.png) no-repeat transparent; transform: translateY(-50%);background-position:right; width: 60px;height: 60px;position: absolute;right: 5%;top: 52%;z-index: 9999;background-size: contain;} .frameWrap .imgConItem {padding-top:70px;} .frameWrap .imgConItem .mark4 {width:300px;} .frameWrap .imgConItem .mark5 {width:800px;} .frameWrap .imgConItem.imgConItem1 img {width:370px;} .frameWrap .imgConItem.imgConItem2 {display:flex; gap:120px;} .frameWrap .imgConItem.imgConItem2 .imgLeft {position:relative;} .frameWrap .imgConItem.imgConItem2 .imgLeft img:first-of-type {width:350px;} .frameWrap .imgConItem.imgConItem2 .imgLeft span {content: '';clear: both;position: absolute;border: 3px solid #fff; bottom:7px; width:263px; height:56px; right:15px; animation: glowEffect 1.5s infinite ease-in-out;border-radius: 41px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgLeft p {content: '';clear: both;position: absolute;border: 3px solid #fff; bottom:45px; width:51px; height:35px; right:15px; animation: glowEffect 1.5s infinite ease-in-out;border-radius: 6px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgLeft div .finger1{position:absolute; top:60px; right:-120px; width:160px; z-index:888;} .frameWrap .imgConItem.imgConItem2 .imgRight {position:relative;} .frameWrap .imgConItem.imgConItem2 .imgRight img:first-of-type {width:350px;} .frameWrap .imgConItem.imgConItem2 .imgRight span {content: '';clear: both;position: absolute;border: 3px solid #41f7ee; bottom:8px; width:54px; height:54px; left:16px; animation: glowEffect2 1.5s infinite ease-in-out;border-radius: 48px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgRight p {content: '';clear: both;position: absolute;border: 3px solid #41f7ee; bottom:11px; width:51px; height:35px; right:15px; animation: glowEffect2 1.5s infinite ease-in-out;border-radius: 6px;text-indent:-9999px;} /*mobile*/ .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg {display:none;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg {display:none;} .frameWrap .imgConItem.imgConItem2 .imgRight div .finger2{ z-index:888; position:absolute; bottom:-60px; right:-160px; width:170px;} .frameWrap .imgConItem.imgConItem3 {position:relative; width:100%;} .frameWrap .imgConItem.imgConItem3:after{display:block; content:''; clear:both;} .frameWrap .imgConItem.imgConItem3 .mark2 {position:absolute; width:700px; top:74px; left:50%;transform:translate(-50%, 0);} .frameWrap .imgConItem.imgConItem4 .pc {display:flex;justify-content:space-between;gap:150px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL {display:flex; flex-direction:column; gap:20px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL img {width:246px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL h4 {font-size:30px; color:#000; text-align:center;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgR {display:flex; flex-direction:column; gap:20px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgR h4 {font-size:30px; color:#000; text-align:center;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgR img {width:246px;} .frameWrap .imgConItem.imgConItem4 .mobile {display:none;} .frameWrap .imgConItem2 div .finger1 {animation: fingerMove 1.5s ease-in-out infinite;} .frameWrap .imgConItem2 div .finger2 {animation: fingerMove2 1.5s ease-in-out infinite;} .flow-container {display: inline-block; font-family:'GmarketSansBold';white-space: nowrap;animation: flow-text 25s linear infinite;} .frameWrap .aniTxt {position: absolute;top:420px;left: 0;width: 100%;overflow: hidden;padding: 20px 0; z-index:1;} .frameWrap .aniTxt h1 {color: #fff;font-size: 160px;font-family: 'Pretendard-Bold';margin: 0;} @keyframes glowEffect {0% {box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);transform: scale(1);}50% {box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.8);transform: scale(1);}100% {box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);transform: scale(1);}} @keyframes glowEffect2 {0% {box-shadow: 0 0 5px rgb(0 223 255 / 35%), 0 0 10px rgb(0 223 255 / 15%);transform: scale(1);}50% {box-shadow: 0 0 15px rgb(0 223 255 / 100%), 0 0 30px rgb(0 223 255 / 100%);transform: scale(1);}100% {box-shadow: 0 0 5px rgb(0 223 255 / 35%), 0 0 10px rgb(0 223 255 / 15%);transform: scale(1);}} @keyframes fingerMove2 {0%, 100% {transform: translateX(0);}50% {transform: translateX(-20px);}} @keyframes fingerMove {0%, 100% {transform: translateY(0);}50% {transform: translateY(-20px);}} @keyframes flow-text {from { transform: translateX(0%); }to { transform: translateX(-50%); }} /****************** charWrap (네번째섹션) ******************/ .charWrap {position:relative; z-index:9999; padding:150px 50px; clear:both; display:block;} .charWrap:after {display:block; content:''; clear:both;} .charWrap .top {position:relative; padding:0 250px; z-index:888;} .charWrap .top:after {display:block; content:''; clear:both;} .charWrap .top h1 {font-size:80px; text-align:left; font-family:'Pretendard-Bold'; letter-spacing:-1.5px; line-height:1.5;} .charWrap .top h2 {font-size:80px; text-align:right; font-family:'Pretendard-Bold'; letter-spacing:-1.5px; color:#c5c6c7; line-height:1.2;} .charWrap .centerBox { display:flex; justify-content:space-between; gap:20px; padding-top:200px;} .charWrap .centerBox .cBox {flex-grow:1; padding:60px 10px; border-radius:40px; position:relative; width:25%;} .charWrap .centerBox .cBox:before {content:''; clear:both; position:absolute; width:90px; height:90px; background:#fff; border-radius:100px; top:0; left:50%; transform:translate(-50%, -50%);} .charWrap .centerBox .cBox:after {display:block; clear:both; content:'';} .charWrap .centerBox .cBox.cBox1 {background:#F9F9FB;} .charWrap .centerBox .cBox.cBox2 {background:#F1F7F9;} .charWrap .centerBox .cBox.cBox3 {background:#EEF7FF;} .charWrap .centerBox .cBox.cBox4 {background:#F8F7FF;} .charWrap .cBox p {font-size:28px; text-align:center; font-family:'Pretendard-SemiBold'; height:100px; display:flex; align-items:center; justify-content:center;} .charWrap .cBox div {height:220px; display:flex; align-items:center; justify-content:center;} .charWrap .cBox img {width:100%; object-fit:scale-down; } .charWrap .cBox span {display:flex; align-items:center; justify-content:center; text-align:center; font-size:20px; padding-top:50px; line-height:1.4;} .charWrap .object img:first-of-type {position:absolute; top:100px; left:-50px;} .charWrap .object img:last-of-type {position:absolute; top:200px; right:150px;} .charWrap .object img:first-of-type {position: absolute;top: 100px;left: -50px;animation: freeMove1 12s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;} .charWrap .object img:last-of-type {position: absolute;top: 200px;right: 200px;animation: freeMove2 14s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;} @keyframes freeMove1 {0% { transform: translate(0, 0) rotate(0deg); }20% { transform: translate(50px, -40px) rotate(3deg); }40% { transform: translate(90px, 20px) rotate(-1deg); }60% { transform: translate(40px, 50px) rotate(3deg); }80% { transform: translate(20px, 30px) rotate(-2deg); }100% { transform: translate(0, 0) rotate(0deg); }} @keyframes freeMove2 {0% { transform: translate(0, 0) rotate(0deg); }15% { transform: translate(-40px, 30px) rotate(-1deg); }35% { transform: translate(-70px, -20px) rotate(2deg); }55% { transform: translate(-30px, -60px) rotate(-3deg); }75% { transform: translate(10px, -20px) rotate(1deg); }100% { transform: translate(0, 0) rotate(0deg); }} /****************** choWrap (다섯번째섹션) ******************/ .choWrap {padding:50px;} .choWrap .choBox {padding:50px; background:url(/assets/img/bg2.jpg) no-repeat; border-radius:40px; background-size:cover; width:100%; height:100%; display:flex; justify-content:space-between;} .choWrap .choBox .left {padding-bottom:50px; width:45%;display:flex; flex-direction:column; justify-content:flex-end;} .choWrap .choBox .left h4 {font-size:50px; color:#fff; font-family:'Pretendard-SemiBold'; line-height:1.4;} .choWrap .choBox .right {display:flex; flex-direction:column; width:55%; gap:15px;} .choWrap .choBox .right .rBox {display:flex; justify-content:space-between; width:100%; gap:15px;} .choWrap .choBox .right .rBox .rsbox {background:rgb(0 0 0 / 30%);backdrop-filter:blur(8px); flex-grow:1; width:50%; padding:30px; border-radius:30px; display:flex; justify-content:space-between; flex-direction:column; gap:100px;} .choWrap .choBox .right .rBox .rsbox span {color:#fff; font-size:22px;} .choWrap .choBox .right .rBox .rsbox span br {display:none;} .choWrap .choBox .right .rBox .rsbox:hover {background:#6152FF;} .choWrap .choBox .right .rBox .rsbox:hover p {opacity:1;} .choWrap .choBox .right .rBox .rsbox p {color:#fff; font-size:20px; line-height:1.3; opacity:0; } .choWrap .choBox .right .rBox .rsbox.rsbox1 {background:url(/assets/img/icon11.png) no-repeat rgb(5 10 20 /20%); background-position:10% 85%;} .choWrap .choBox .right .rBox .rsbox.rsbox2 {background:url(/assets/img/icon6.png) no-repeat rgb(5 10 20 /20%); background-position:10% 85%;} .choWrap .choBox .right .rBox .rsbox.rsbox3 {background:url(/assets/img/icon7.png) no-repeat rgb(5 10 20 /20%); background-position:10% 85%;} .choWrap .choBox .right .rBox .rsbox.rsbox4 {background:url(/assets/img/icon8.png) no-repeat rgb(5 10 20 /20%); background-position:10% 85%;} .choWrap .choBox .right .rBox .rsbox.rsbox1:hover {background:#6152FF; transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox1:hover p {opacity:1; transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox2:hover {background:#6152FF;transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox2:hover p {opacity:1;transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox3:hover {background:#6152FF;transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox3:hover p {opacity:1;transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox4:hover {background:#6152FF;transition: background 1s ease-in-out;} .choWrap .choBox .right .rBox .rsbox.rsbox4:hover p {opacity:1;transition: background 1s ease-in-out;} .cl00dfff {color:#00dfff;} /****************** footer ******************/ footer {padding:70px; background:#1F1B35; border-radius:60px 60px 0 0; display:flex; align-items:center; flex-direction:column; gap:50px;} footer h4 {color:#fff; font-family:'GmarketSansBold'; font-size:45px; letter-spacing:0; line-height:1.5; text-align:center;} footer .btnBox {display:flex; align-items:center; gap:10px;} footer .btnBox .call {background:#6152FF; padding:13px 30px; color:#fff; font-size:17px; border-radius:8px; display:flex; align-items:center; gap:10px; font-family:'Pretendard-Light';} footer .btnBox .call img {width:20px;} footer .btnBox .mail {background:#fff; font-size:17px; color:#000; padding:13px 30px; border-radius:8px; display:flex; align-items:center; gap:10px; font-family:'Pretendard-Light';} footer .btnBox .mail img {width:20px;} footer .bottom {display:flex; flex-direction:column; gap:5px; align-items:center;} footer .bottom span {color:#fff;letter-spacing:-0.5px;} footer .bottom ul {display:flex; gap:20px;} footer .bottom ul li {color:#fff; font-family:'Pretendard-Light'; letter-spacing:-0.5px;} footer .bottom ul li:last-of-type:after {display:none;} footer .quick {position: fixed; right: 50px; bottom: 50px; visibility: hidden; z-index: 98888; opacity: 0; transition: opacity 0.3s ease;} footer .quick.visible {visibility: visible; opacity: 1; transition: opacity 0.3s ease, visibility 0s;} footer .quick .wrap {display: flex; align-items: flex-end; justify-content: center; flex-direction: column; gap: 10px 0;} footer .quick .wrap a {position: relative; width: 70px; height: 70px; line-height: 70px; border-radius: 70px; overflow:hidden; transition: all .5s;} footer .quick .wrap .btn1 {background: #64DCF0;} footer .quick .wrap .btn1:hover, .quick .wrap .btn2:hover {width: 220px; transition: all .5s;} footer .quick .wrap .btn2 {background: #605DFE;} footer .quick .wrap .go-top {background: #7D8FBD; text-align: center;} footer .quick .wrap .go-top2 {background: #7D8FBD; text-align: center;} footer .quick .wrap a .txt {display: none; text-align: left; padding-left: 25px; transition: all .5s;} footer .quick .wrap a:hover .txt {display: block; color: #197A8B; transition: all .5s;} footer .quick .wrap .btn1 .txt {color: #197A8B;} footer .quick .wrap a.btn1 > img, .quick .wrap a.btn2 > img {position: absolute; right: 0; bottom: 0;} @media (max-width: 767px) { .quick .wrap {gap: 5px 0;} .quick .wrap a {width: 50px; height: 50px; line-height: 50px; border-radius: 50px;} .quick .wrap a.btn1 > img, .quick .wrap a.btn2 > img {height: 50px; width: auto;} .quick .wrap .btn1:hover, .quick .wrap .btn2:hover {width: 170px;} .quick .wrap a .txt {padding-left: 20px;} .quick .wrap a .txt img {height: 30px; width: auto;} } @media (max-width:1700px) { .edCont .edImgBox img {width:70%;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox {left:17%;} } @media (max-width:1600px) { .mainTitWrap .mainTit h2 {font-size:46px; padding:20px 40px 0 0;} .mainTitWrap .mainTit h2 span {font-size:50px;} .visualWrap h4 {left:487px; bottom:170px; height:58px; width:260px; font-size:28px;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox {left:15%;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {font-size:40px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {font-size:34px;} .frameWrap .imgConItem {padding-top:60px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL h4 , .imgConItem.imgConItem4 .pc .lastImgR h4 {font-size:26px;} .charWrap .top h1 {font-size:60px;} .charWrap .top h2 {font-size:60px;} .charWrap .cBox img {width:50%;} .charWrap .cBox p {font-size:25px;} .choWrap .choBox .left h4 {font-size:40px;} .choWrap .choBox .right .rBox .rsbox {gap:80px;} .choWrap .choBox .right .rBox .rsbox span {font-size:22px;} .choWrap .choBox .right .rBox .rsbox p {font-size:19px; font-family:'Pretendard-light';} .edCont .edBoxCont .edBox {width:260px; height:230px;} .edCont .edImgBox {bottom:30px; right:40px;} .edCont .edBoxCont {gap:10px;} footer h4 {font-size:40px;} } @media (max-width:1400px) { header {height:60px;padding:20px 50px;} header.scrolled {height:60px;} .charWrap {padding:150px 50px 50px;} .charWrap .object img:first-of-type {width:270px;} .charWrap .centerBox .cBox:before {width:60px; height:60px;} .choWrap .choBox .left {width:40%;} .choWrap .choBox .right {width:60%;} .frame video {object-fit:cover;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {font-size:29px;} .edCont .edTxt {gap:30px;} .edCont .edTxtBox {gap:70px;} .edCont .edTxt .edTit {font-size:36px;} .edCont .edBoxCont .edBox {width:210px; height:210px;} .edCont .edBoxCont .edBox:first-of-type .boxImg img {height:55px;} .edCont .edBoxCont .edBox .boxImg img {height:50px;} .edCont .edBoxCont .edBox h4 {font-size:16px;} .edCont .edBoxCont .edBox span {font-size:21px;} } @media (max-width:1300px) { .slickWrap .slide-item .imgItem img {left:13%;} .slickWrap .slide-item .imgItem .text h1 {font-size:35px;} .slickWrap .slide-item .imgItem .text h4 {font-size:30px;} .aniTxt h1 {font-size:120px;} .charWrap .top {padding:0 180px;} .charWrap .cBox p {font-size:22px; height:80px;} .charWrap .cBox span {padding-top:0;} .charWrap .cBox span {font-size:17px;} .choWrap .choBox .left h4 {font-size:32px; padding-bottom:20px;} .choWrap .choBox .right .rBox .rsbox p {font-size:17px;} .choWrap .choBox .right .rBox .rsbox span {font-size:19px;} .choWrap .choBox .left {width:30%;} .choWrap .choBox .right {width:68%;} .choWrap .choBox .right .rBox .rsbox.rsbox1 {background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox2 {background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox3 {background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox4 {background-size:40px;} .frameWrap .imgConItem.imgConItem2 {gap:40px;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox {width:140px; height:140px; left:12%;} .edCont .edTxt .edSub {font-size:23px;} .edCont .edTxt .edTit {font-size:34px;} } @media (max-width:1199px) { .visualWrap h4 {left:430px; bottom:158px;} .mainTitWrap .mainTit h2 {font-size:40px;} .mainTitWrap .mainTit h2 span {font-size:43px;} .choWrap .choBox {padding:40px; border-radius:30px;} .frameWrap .imgConItem.imgConItem2 {gap:70px;} .frameWrap .imgConItem.imgConItem2 .imgLeft div .finger1 {right:-100px; width:130px;} .frameWrap .imgConItem.imgConItem2 .imgRight div .finger2 {right:-120px; width:140px;} .frameWrap .slickWrap .slide-item .imgItem .edIconBox {display:none;} .frameWrap .imgConItem .mark5 {width:700px;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:600px;} .frameWrap .slick-prev {left:0;} .frameWrap .slick-right {right:0;} footer .quick {right: 20px; bottom: 20px;} .edCont {padding:30px; border-radius:20px;} .edCont .edTxt .edTit {font-size:30px;} .edCont .edTxt .edSub {font-size:20px;} .edCont .edBoxCont .edBox {width:180px; height:180px;} .edCont .edBoxCont .edBox h4 {font-size:15px;} .edCont .edBoxCont .edBox .boxImg img {height:40px;} .edCont .edBoxCont .edBox:first-of-type .boxImg img {height:45px;} .edCont .edBoxCont .edBox span {font-size:18px;} } @media (max-width:1099px) { .visualWrap {padding:60px 30px 30px;} .visualWrap h4 {border-radius:12px 12px 12px 28px; left:405px; bottom:130px; height:54px; font-size:25px;} .mainTitWrap {bottom:30px;} .mainTitWrap .mainTit h2 {font-size:35px; padding:20px 40px 0;} .mainTitWrap .mainTit h2 span {font-size:38px;} .frameWrap .slickWrap .slide-item:nth-of-type(2) .imgItem img {width:90px; height:auto;} .frameWrap .slickWrap .slide-item:nth-of-type(3) .imgItem img {width:90px; height:auto;} .frameWrap .slickWrap .slide-item:nth-of-type(4) .imgItem img {width:90px; height:auto;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {font-size:30px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {font-size:25px;} .frameWrap .slickWrap .slide-item .imgItem .text span {font-size:20px; padding-top:40px;} .frameWrap .slick-prev {width:50px; height:50px; top:53%; left:2%;} .frameWrap .slick-next {width:50px; height:50px; top:53%; right:2%;} .frameWrap .imgConItem {padding-top:40px;} .frameWrap .imgConItem.imgConItem1 img {width:300px;} .frameWrap .imgConItem.imgConItem2 {gap:60px;} .frameWrap .imgConItem.imgConItem2 .imgLeft img:first-of-type {width:300px;} .frameWrap .imgConItem.imgConItem2 .imgRight img:first-of-type {width:300px;} .frameWrap .imgConItem.imgConItem2 .imgRight div .finger2 {width:140px;} .frameWrap .imgConItem.imgConItem2 .imgLeft div .finger1 {width:130px;} .frameWrap .imgConItem.imgConItem2 .imgLeft span {width:226px; height:48px; bottom:7px; right:11px;} .frameWrap .imgConItem.imgConItem2 .imgRight span {width:46px; height:46px; bottom:8px; left:14px;} .frameWrap .imgConItem.imgConItem4 .pc {gap:100px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL img {width:220px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgR img {width:220px;} .frameWrap .imgConItem.imgConItem4 .pc .lastImgL h4, .imgConItem.imgConItem4 .pc .lastImgR h4 {font-size:22px;} .frameWrap .aniTxt {top:390px;} .frameWrap .aniTxt h1 {font-size:90px;} .charWrap {padding:120px 30px 30px;} .charWrap .centerBox {padding-top:100px;gap:10px;} .charWrap .centerBox .cBox {padding:40px 10px;} .charWrap .object img:first-of-type {width:230px;} .charWrap .object img:last-of-type {right:0; width:130px;} .charWrap .top h1 {font-size:50px;} .charWrap .top h2 {font-size:50px;} .charWrap .top {padding:0 120px;} .charWrap .cBox p {height:70px; font-size:19px;} .charWrap .cBox div {height:180px;} .charWrap .cBox span {font-size:16px;} .charWrap .cBox img {width:40%;} .choWrap {padding:30px;} .choWrap .choBox .left h4 {font-size:30px;} .choWrap .choBox .right .rBox .rsbox {border-radius:20px; gap:60px;} .choWrap .choBox .right .rBox .rsbox p {font-size:17px;} .edWrap {padding:30px;} .edCont .edImgBox {right:30px;} footer {border-radius:30px 30px 0 0;} footer h4 {font-size:30px;} footer .bottom {font-size:14px;} footer .btnBox .call {padding:10px 20px; font-size:15px; border-radius:6px;} footer .btnBox .call img {width:15px;} footer .btnBox .mail {padding:10px 20px; font-size:15px; border-radius:6px;} footer .btnBox .mail img {width:15px;} } @media (max-width:991px) { header .nav ul {gap:50px;} header .nav ul li a {font-size:17px;} header .logo img {width:180px;} .visualWrap h4 {left:50%; top:60%; transform:translate(-50%, -50%); border-radius:10px; width:220px;} .mainTitWrap {bottom: auto;left: 50%; position: absolute;width: 90%;top: 75%;transform: translate(-50%, -50%);height:auto; text-align:center;} .mainTitWrap .mainTit h2 {background:transparent;color:#fff;padding:0;} .mainTitWrap .mainTit h2:first-child {width:auto; padding-bottom:10px; font-size:40px;} .mainTitWrap .mainTit h2:first-child::before {display:none;} .mainTitWrap .mainTit h2:first-child::after {display:none;} .mainTitWrap .mainTit h2:last-child::after {display:none;} .frameWrap .slickWrap .slide-item:nth-of-type(2) .imgItem img {width:80px;} .frameWrap .slickWrap .slide-item .box {padding:50px 0;} .frameWrap .imgConItem.imgConItem2 {gap:20px;} .frameWrap .imgConItem.imgConItem4 .pc {gap:50px;} .charWrap .centerBox .cBox {border-radius:0;} .choWrap .choBox .right .rBox .rsbox span {font-size:17px;} .choWrap .choBox .right .rBox .rsbox p {font-size:15px;} .frameWrap .slick-prev {left:0;} .frameWrap .slick-next {right:0;} .frameWrap .imgConItem .mark5 {width:600px;} .edCont .edTxt {gap:20px;} .edCont .edTxtBox {width:100%; gap:50px;} .edCont .edBoxCont{display:flex; gap:10px; flex-wrap:wrap;width:60%;} .edCont .edBoxCont .edBox{width:calc(50% - 10px);} .edCont .edImgBox img {width:80%;} footer .quick {right:40px;} } @media (max-width:900px) { .frameWrap .imgConItem.imgConItem3 .mark2 {width:500px;} .frameWrap .imgConItem .mark5 {width:500px;} } @media (max-width:840px) { .mainTitWrap .mainTit h2 {font-size:35px;} .mainTitWrap .mainTit h2 span {font-size:35px;} .frameWrap {padding:0;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {font-size:30px; padding-bottom:14px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {font-size:22px;} .frameWrap .slick-prev {left:20px;} .frameWrap .slick-next {right:20px;} .frameWrap .slickWrap .slide-item .imgItem .text span {font-size:17px;} .frameWrap .slickWrap .slide-item:nth-of-type(2) .imgItem img {width:70px;} .frameWrap .aniTxt {top:365px;} .frameWrap .aniTxt h1 {font-size:100px;} .frameWrap .imgConItem.imgConItem2 {gap:30px;} .frameWrap .imgConItem.imgConItem2 .imgLeft div .finger1 {display:none;} .frameWrap .imgConItem.imgConItem2 .imgRight div .finger2 {display:none;} .charWrap .top {padding:0 60px 0 30px;} .charWrap .top h1 {font-size:40px;} .charWrap .cBox span {font-size:15px;} .charWrap .cBox span br {display:none;} .charWrap .cBox div {height:140px;} .charWrap .cBox img {width:80px;} .charWrap .cBox p {font-size:17px;} .charWrap .centerBox .cBox {padding:40px 20px;} .charWrap .object img:first-of-type {width:140px;} .charWrap .object img:last-of-type {width:100px;} .choWrap {padding:0 0 30px 0;} .choWrap .choBox {border-radius:0; padding:20px;} } @media (max-width:768px) { header {padding:15px 30px;} .mb-header {display:flex;} .nav {display: none;} .hamburger { display: flex; } .visualWrap {padding:60px 20px 20px;} .visual video {border-radius:20px;} .mainTitWrap .mainTit h2 {font-size:30px;border-radius:20px;} .mainTitWrap .mainTit h2 span {font-size:30px;} .frame {height:72%; top:12%;} .frameWrap {min-height:auto;} .frameWrap .slick-prev {width:40px; height:40px;} .frameWrap .slick-next {width:40px; height:40px;} .frameWrap .imgConItem.imgConItem2 {align-items:center; justify-content:center; flex-direction:column; width:50%;} .frameWrap .imgConItem.imgConItem2 .imgLeft {display:none} .frameWrap .imgConItem.imgConItem2 .imgRight {display:none} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg {position:relative; display:flex; width:100%;} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg img {width:100%;} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg span {content: '';clear: both;position: absolute;border: 2px solid #fff; top:auto; bottom:8px; width:75%; height:15%; right:4%; animation: glowEffect 1.5s infinite ease-in-out;border-radius: 50px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg p {content: '';clear: both;position: absolute;border: 2px solid #fff; bottom:10%; width:15%; height:8%; right:4%; animation: glowEffect 1.5s infinite ease-in-out;border-radius: 4px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg {position:relative; display:flex; width:100%;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg img {width:100%;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg span {content: '';clear: both;position: absolute;border: 2px solid #41f7ee; bottom:3%; width:14%; height:14.5%; left:5%; animation: glowEffect2 1.5s infinite ease-in-out;border-radius: 50px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg p {content: '';clear: both;position: absolute;border: 2px solid #41f7ee; bottom:2%; width:15%; height:7.5%; right:4%; animation: glowEffect2 1.5s infinite ease-in-out;border-radius: 4px;text-indent:-9999px;} .frameWrap .imgConItem.imgConItem4 .pc {gap:30px;} .frameWrap .imgConItem .mark4 {padding-left:0;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:400px;} .charWrap {padding:100px 20px 20px;} .charWrap .top {padding:0;} .charWrap .top h2 {font-size:40px;} .charWrap .centerBox {display:block; padding-top:50px;} .charWrap .centerBox:after {display:block; content:''; clear:both;} .charWrap .centerBox .cBox {float:left; border-radius:20px; width:48%; margin:1%; height:350px;} .charWrap .centerBox .cBox:before {display:none;} .charWrap .cBox img {width:100px;} .charWrap .object img:first-of-type {top:0;} .charWrap .object img:last-of-type {top:50px;} .choWrap {padding:20px;} .choWrap .choBox {padding:30px;flex-direction:column; border-radius:20px;} .choWrap .choBox .left {width:100%;} .choWrap .choBox .left h4 {padding-bottom:0;} .choWrap .choBox .right {width:100%;} .choWrap .choBox .right .rBox .rsbox {padding:20px;} footer .quick .wrap {gap: 5px 0;} footer .quick .wrap a {width: 50px; height: 50px; line-height: 50px; border-radius: 50px;} footer .quick .wrap a .txt {padding-left: 20px;} footer .quick .wrap a .txt img {height: 30px; width: auto;} footer .quick .wrap .btn1:hover, .quick .wrap .btn2:hover {width: 170px;} footer .quick .wrap a.btn1 > img, .quick .wrap a.btn2 > img {height: 50px; width: auto;} .frameWrap .slick-prev {top:40%;} .frameWrap .slick-next {top:40%;} .edWrap {padding:0 20px 20px;} .edCont .edBoxCont {width:70%;} .edCont .edTxt .edTit {font-size:25px;} .edCont .edTxt .edSub {font-size:18px;} .edCont .edImgBox img {width:90%;} } @media (max-width:640px) { header .logo img {width:170px;} .mb-nav ul li a {font-size:25px;} .visualWrap h4 {display:none;} .mainTitWrap {border:1px solid #fff; padding:20px; width:80%; border-radius:30px; top:50%; left:50%; height:250px; transform:translate(-50%, -50%); text-align:center; display:flex; align-items:center; justify-content:center; background:rgb(255 255 255 / 23%); backdrop-filter:blur(2px);} .mainTitWrap .mainTit {display:flex; align-items:center; justify-content:center; flex-direction:column;} .mainTitWrap .mainTit h2 {font-size:24px;} .mainTitWrap .mainTit h2:last-child {padding-bottom:0;} .mainTitWrap .mainTit h2:first-child {padding-bottom:20px; font-size:30px; font-family:'Pretendard-Bold';} .mainTitWrap .mainTit h2 span {font-size:26px; line-height:1.4; font-family:'Pretendard-Regular';} .mainTitWrap .mainTit h2 span br {display:block;} .frame video {object-fit:cover;} .frameWrap .imgConItem .mark4 {width:250px;} .frameWrap .slickWrap .slick-dots {bottom:10px;} .frameWrap .slickWrap .slide-item .imgItem .text span b {color:#000;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {color:#6152ff; font-size:25px;} .frameWrap .imgConItem.imgConItem2 {gap:20px;} .frameWrap .imgConItem.imgConItem2 .imgLeft span {top:43px; right:8px; width:40px; height:40px;} .frameWrap .imgConItem.imgConItem2 .imgRight span {bottom:-2px; right:9px; width:44px; height:44px;} .frameWrap .imgConItem .mark5 {width:400px;} .frameWrap .imgConItem.imgConItem4 .pc {display:none;} .frameWrap .imgConItem.imgConItem4 .mobile {display:flex; gap:20px; flex-direction:column;} .frameWrap .imgConItem.imgConItem4 .mobile h4 {color:#000; font-size:20px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgL {width:100%; display:flex; align-items:center; justify-content:center; gap:20px; flex-direction:column;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgL img {width:200px; border:2px solid #e8e8e8; border-radius:20px; overflow:hidden;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgR {width:100%;display:flex; align-items:center; justify-content:center; gap:20px;flex-direction:column;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgR img {width:200px; border-radius:20px; overflow:hidden;} .charWrap {padding:50px 20px 0 20px;} .charWrap .cBox p {font-size:20px;} .charWrap .cBox span {font-size:16px;} .choWrap .choBox {padding:20px;} .choWrap .choBox .left {padding-bottom:30px;} .choWrap .choBox .left h4 {font-size:25px;} .choWrap .choBox .right {gap:8px;} .choWrap .choBox .right .rBox {gap:8px;} .choWrap .choBox .right .rBox .rsbox {gap:100px;} .choWrap .choBox .right .rBox .rsbox.rsbox1 p {opacity:1;} .choWrap .choBox .right .rBox .rsbox.rsbox2 p {opacity:1;} .choWrap .choBox .right .rBox .rsbox.rsbox3 p {opacity:1;} .choWrap .choBox .right .rBox .rsbox.rsbox4 p {opacity:1;} .choWrap .choBox .right .rBox .rsbox.rsbox1 {background:url(/assets/img/icon11.png) no-repeat rgb(5 10 20 /20%); background-position:10% 57%; background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox2 {background:url(/assets/img/icon6.png) no-repeat rgb(5 10 20 /20%); background-position:10% 58%; background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox3 {background:url(/assets/img/icon7.png) no-repeat rgb(5 10 20 /20%); background-position:10% 56%;background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox4 {background:url(/assets/img/icon8.png) no-repeat rgb(5 10 20 /20%); background-position:10% 56%;background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox1:hover {background:url(/assets/img/icon11.png) no-repeat rgb(5 10 20 /20%); background-position:10% 57%; background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox2:hover {background:url(/assets/img/icon6.png) no-repeat rgb(5 10 20 /20%); background-position:10% 58%; background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox3:hover {background:url(/assets/img/icon7.png) no-repeat rgb(5 10 20 /20%); background-position:10% 56%;background-size:40px;} .choWrap .choBox .right .rBox .rsbox.rsbox4:hover {background:url(/assets/img/icon8.png) no-repeat rgb(5 10 20 /20%);background-position:10% 56%;background-size:40px;} footer {padding:40px 20px;} footer h4 {font-size:22px;} footer .quick {right:20px;} .edCont .edBoxCont .edBox {height:170px;} .edCont {padding:20px;} .edCont .edTxt .edSub {font-size:17px;} .edCont .edImgBox {bottom:15px; right:15px;} .edCont .edImgBox img {width:100%;} } @media (max-width:580px) { .edCont .edBoxCont {width:100%;} .edCont .edBoxCont .edBox {width:calc(50% - 5px);} .edCont .edImgBox {right:6%;} .edCont .edImgBox img {width:auto; height:170px; bottom:10px;} .edCont .edTxt .edTit {font-size:23px;} .edCont .edTxt .edSub br {display: none;} .frameWrap {margin:50px 0 0 0;} } @media (max-width:540px) { .visualWrap {padding:60px 15px 15px;} .mainTitWrap .mainTit h2 {font-size:22px;} .mainTitWrap .mainTit h2 span {font-size:23px;} .frameWrap .slickWrap .slick-dots li {width:10px; height:10px;} .frameWrap .slickWrap .slick-dots li.slick-active {width:10px; height:10px;} .frameWrap .imgConItem.imgConItem4 .mobile h4 {font-size:20px;} .charWrap {padding:50px 15px 20px 15px;} .charWrap .top h1 {font-size:32px;} .charWrap .top h2 {font-size:32px;} .charWrap .cBox p {height:50px;font-size:19px;} .charWrap .cBox span {font-size:17px;} .charWrap .cBox img {width:80px;} .charWrap .object img:first-of-type {top:-20px;} .charWrap .object img:last-of-type {top:20px;} .choWrap .choBox {padding:10px;} .choWrap .choBox .left {padding:10px 0 30px 20px;} .choWrap .choBox .left h4 {font-size:22px;} .choWrap .choBox .right .rBox .rsbox {border-radius:10px;} .choWrap .choBox .right .rBox .rsbox span {font-size:15px;} .choWrap .choBox .right .rBox .rsbox p {font-size:14px;} footer {gap:30px;} footer h4 {font-size:18px;} footer .bottom ul {font-size:13px;} footer .bottom span {font-size:13px;} .frameWrap .imgConItem .mark5 {width:300px;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:320px;} .edWrap {padding:0 15px 15px;} } @media (max-width:480px) { .choWrap .choBox {border-radius:0; padding:0; background:transparent; } .choWrap .choBox .left {padding:30px 0 15px 0;} .choWrap .choBox .left h4 {color:#000; font-size:26px; font-family:'Pretendard-Bold';} .choWrap .choBox .left h4:first-of-type {color:#6152ff;} .choWrap .choBox .right .rBox {flex-direction:column;} .choWrap .choBox .right .rBox .rsbox {width:100%; height:350px; padding:30px 15px;} .choWrap .choBox .right .rBox .rsbox span {font-size:23px; font-family:'Pretendard-SemiBold';} .choWrap .choBox .right .rBox .rsbox span br {display:block;} .choWrap .choBox .right .rBox .rsbox p {font-size:20px;} .choWrap .choBox .right .rBox .rsbox.rsbox1 {background:url(/assets/img/rs_img1.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox2 {background:url(/assets/img/rs_img2.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox3 {background:url(/assets/img/rs_img3.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox4 {background:url(/assets/img/rs_img4.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox1:hover {background:url(/assets/img/rs_img1.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox2:hover {background:url(/assets/img/rs_img2.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox3:hover {background:url(/assets/img/rs_img3.jpg) no-repeat; background-size:cover;} .choWrap .choBox .right .rBox .rsbox.rsbox4:hover {background:url(/assets/img/rs_img4.jpg) no-repeat; background-size:cover;} .frameWrap .imgConItem.imgConItem2 {width:60%;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:300px; top:50px;} .edCont .edImgBox img {height:150px;} .edCont .edTxt .edTit {font-size:20px;} .edCont .edTxt .edSub {font-size:16px;} footer {border-radius:0;} } @media (max-width:460px) { header {padding:5px 15px;height:50px;} .hamburger {padding:0;} header.scrolled {height:50px;} .mainTitWrap .mainTit h2 {font-size:20px;} .frameWrap .aniTxt h1 {font-size:80px;} .charWrap .centerBox {display:flex; flex-direction:column; gap:10px;} .charWrap .centerBox .cBox {margin:0; width:100%; height:auto;} .charWrap .cBox span br {display:block;} .charWrap .top h1 {font-size:29px;} .charWrap .top h2 {font-size:29px;} .choWrap {padding:0 15px 15px;} footer .bottom ul {flex-direction:column; text-align:center; gap:8px; padding-top:20px;} .edCont .edBoxCont .edBox {border-radius:15px;} .edCont .edBoxCont .edBox h4 {font-size:14px;} .edCont .edImgBox {right:3%;} } @media (max-width:420px) { .hamburger {height:17px;} .mainTitWrap {width:82%;} .frameWrap .slickWrap .slide-item .imgItem .text span br {display:none;} .frameWrap .slickWrap .slide-item .box {padding:30px 15px 50px 15px;} .frameWrap .imgConItem.imgConItem1 img {width:250px;} .frameWrap .imgConItem.imgConItem2 {width:100%;} .frameWrap .imgConItem.imgConItem2 {gap:20px; flex-direction:column;} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg {width:70%; margin-top:-20px;} .frameWrap .imgConItem.imgConItem2 .imgRight.mbRightImg {width:70%;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgL img {width:250px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgR img {width:250px;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:280px; top:100px;} .frameWrap .imgConItem.imgConItem4 .mobile {gap:20px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgL {gap:10px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgR {gap:10px;} .frameWrap .slick-prev {width:30px; height:30px;} .frameWrap .slick-next {width:30px; height:30px;} .frameWrap .aniTxt {top:365px;} .charWrap .cBox p {font-size:21px;} .charWrap .cBox span {font-size:18px;} .charWrap .object img:first-of-type {width:100px;} .charWrap .object img:last-of-type {width:80px;} .choWrap .choBox .right .rBox .rsbox span {font-size:20px;} .choWrap .choBox .right .rBox .rsbox p br {display:none;} .edCont .edBoxCont .edBox h4 {font-size:13px;} } @media (max-width:400px) { .frameWrap .imgConItem.imgConItem3 .mark2 {top:70px;} .frameWrap .slick-prev {width:20px; height:20px; left:10px;} .frameWrap .slick-next {width:20px; height:20px; right:10px;} .frameWrap .imgConItem .mark4 {width:230px;} .edCont {padding:15px; border-radius:15px;} .edCont .edTxtBox {gap:30px; width:100%;} .edCont .edBoxCont .edBox h4 {font-size:15px;} .edCont .edBoxCont .edBox {width:100%;} .edCont .edImgBox {padding-top:30px; position:inherit; width:100%; top:auto; right:auto; bottom:auto; left:auto;} .edCont .edImgBox img {height:auto; width:100%;} .frameWrap .slickWrap .slide-item .imgItem .text span br {display:none;} } @media (max-width:380px) { .mainTitWrap .mainTit h2:first-child {font-size:26px;} .mainTitWrap .mainTit h2 span {font-size:22px;} .frameWrap .imgConItem.imgConItem2 .imgLeft.mbLeftImg span {bottom:7px;} .frameWrap .imgConItem.imgConItem3 .mark2 {width:260px; top:40px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgL img {width:200px;} .frameWrap .imgConItem.imgConItem4 .mobile .lastImgR img {width:200px;} .frameWrap .imgConItem.imgConItem4 .mobile h4 {font-size:18px;} .frameWrap .slickWrap .slide-item .imgItem .text span br {display:none;} .frameWrap .slickWrap .slide-item .imgItem .text span b {display:inline-block;} .charWrap .top h2 {color:#6152ff;} footer .btnBox {flex-direction:column;} footer .btnBox .call {width:180px; justify-content:center;} footer .btnBox .mail {width:180px; justify-content:center;} .frameWrap .imgConItem .mark5 {width:280px;} .edCont .edTxt .edTit {font-size:18px;} .edCont .edTxt .edSub {font-size:15px;} .frameWrap {margin:20px 0 0 0;} .frameWrap .slickWrap .slide-item .imgItem .text h1 {padding-bottom:9px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {color:#6152ff; font-family:'Pretendard-SemiBold';} } @media (max-width:360px) { .frameWrap .slickWrap .slide-item .imgItem .text h1 {font-size:22px;} .frameWrap .slickWrap .slide-item .imgItem .text h4 {font-size:19px;} .frameWrap .slickWrap .slide-item .imgItem .text span {font-size:17px; font-family:'Pretendard-SemiBold';} .charWrap .top h1 {font-size:26px;} .charWrap .top h2 {font-size:26px;} .charWrap .object img:first-of-type {width:120px;} .charWrap .object img:last-of-type {right:-30px; width:90px;} } @media (max-width:340px) { .mainTitWrap {padding:10px;} .frameWrap .imgConItem.imgConItem3 .mark2 {width: 240px;top: 20px;} } /** 서브페이지 공용 **/ .sVisual_wrap {padding: 0 50px; margin-top: 60px;} .sVisual_wrap .sVisual {border-radius: 40px; overflow: hidden; width: 100%; height: 856px; position: relative;} .sVisual_wrap .sVisual .about_visual {width: 100%; height: 100%; background: url(/assets/img/about_visual.jpg) no-repeat 50% 50%; animation: scaleAni 3.5s; background-size: cover;} @keyframes scaleAni {0% {transform: scale(1.2);}100% {transform: scale(1);}} .sVisual_wrap .sVisual .tBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 234px; text-align: center; color: #fff;} .sVisual_wrap .sVisual .tBox span {font-size: 45px; display: inline-block; padding: 19px 50px 12px; line-height:1; border: 1px solid #fff; border-radius: 100px; background:rgb(255 255 255 / 21%); backdrop-filter:blur(11px);} .sVisual_wrap .sVisual .tBox p {font-size: 40px; letter-spacing: -0.75px; margin-top: 56px; line-height: 1.4;} .subWrap {padding: 0 50px;} .subWrap .sec {margin-top: 158px;} @media (max-width: 1400px) { .sVisual_wrap .sVisual {height: 756px;} .sVisual_wrap .sVisual .tBox {padding-top: 184px;} .sVisual_wrap .sVisual .tBox span {font-size: 42px;} .sVisual_wrap .sVisual .tBox p {font-size: 36px;} } @media (max-width: 1200px) { .sVisual_wrap {padding: 0 40px;} .sVisual_wrap .sVisual {height: 656px;} .sVisual_wrap .sVisual .tBox span {font-size: 38px; padding: 18px 50px 16px;} .sVisual_wrap .sVisual .tBox p {font-size: 32px; margin-top: 46px;} .subWrap .sec {margin-top: 118px;} } @media (max-width:1099px) { .sVisual_wrap {padding:0 30px;} .subWrap {padding:0 30px;} } @media (max-width: 991px) { .sVisual_wrap .sVisual {height: 496px;} .sVisual_wrap .sVisual .tBox {padding-top: 134px;} .sVisual_wrap .sVisual .tBox span {font-size: 32px; padding: 14px 40px 12px;} .sVisual_wrap .sVisual .tBox p {font-size: 26px; margin-top: 36px;} .subWrap .sec {margin-top: 60px;} } @media (max-width:840px) { .sVisual_wrap .sVisual {border-radius:20px;} } @media (max-width: 768px) { .sVisual_wrap {padding: 0 20px;} .subWrap {padding: 0 20px;} .subWrap .sec {margin-top: 60px;} } @media (max-width: 640px) { .sVisual_wrap .sVisual {height: 456px;} .sVisual_wrap .sVisual .tBox span {font-size: 28px; padding: 14px 40px 12px;} .sVisual_wrap .sVisual .tBox p {font-size: 20px; margin-top: 30px;} .subWrap .sec {margin-top: 40px;} } @media (max-width: 480px) { .sVisual_wrap .sVisual {height: 400px;} .sVisual_wrap .sVisual .tBox span {font-size: 22px; padding: 10px 30px 8px;} .sVisual_wrap .sVisual .tBox p {font-size: 16px; margin-top: 20px; padding: 0 20px; letter-spacing: -0.2px;} } /** about **/ .subWrap .section_1 .tBox {padding-right: 700px; position: relative;} .subWrap .section_1 .tBox span {display: block; font-size: 40px;} .subWrap .section_1 .tBox p {font-size: 50px; margin-top: 16px;} .subWrap .section_1 .tBox img {position: absolute; right: 0; bottom: -30px;} .subWrap .section_1 .iBox {display: flex; gap: 0 5px; justify-content:space-between;flex-wrap: wrap; margin-top: 80px; margin-bottom: 50px;} .subWrap .section_1 .iBox .sBox {width: calc(20% - 12px); height: 350px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 40px;} .subWrap .section_1 .iBox .sBox.color_1 {background-color: #6152FF;} .subWrap .section_1 .iBox .sBox.color_2 {background-color: #6B5FF2;} .subWrap .section_1 .iBox .sBox.color_3 {background-color: #795EF1;} .subWrap .section_1 .iBox .sBox.color_4 {background-color: #8FB1FF;} .subWrap .section_1 .iBox .sBox.color_5 {background-color: #6E95FF;} .subWrap .section_1 .iBox .sBox.color_6 {background-color: #424a60; display: none;} .subWrap .section_1 .iBox .sBox p {color: #fff; font-size: 24px; line-height: 1.4; margin-top: 20px; letter-spacing: -0.75px;} .subWrap .section_1 .iBox .sBox.color_3 p {margin-top: 28px;} .subWrap .section_1 .banner {padding: 90px 880px 120px 92px; background-color: #6152FF; border-radius: 50px; color: #fff; position: relative;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 156px;} .subWrap .section_1 .banner .bn_flag .fBox ul {display: flex; gap: 0 28px;} .subWrap .section_1 .banner .bn_flag > p {font-size: 35px; margin-top: 40px;} .subWrap .section_1 .banner .bn_flag > p br {display: none;} .subWrap .section_1 .banner .txtBox {font-size: 60px;} .subWrap .section_1 .banner .txtBox span {display: block; margin-bottom: 20px;} .subWrap .section_1 .banner > img {position: absolute; top: 80px; right: 95px;} .subWrap .section_2 .keyPoint {padding-bottom: 100px;} .subWrap .section_2 .keyPoint > p {font-size: 60px; text-align: center;} .subWrap .section_2 .keyPoint .scroll_info {display: flex; align-items: center; gap: 0 10px; font-size: 16px; padding: 8px 16px; background-color: #f9f9f9; display: none;} .subWrap .section_2 .keyPoint .scroll_info img {animation: scrollAni 1.5s infinite;} @keyframes scrollAni {0% {transform: translate(-5px, 5px);}100% {transform: translate(5px, -5px);}} .subWrap .section_2 .keyPoint .scroll_info p {margin-left: 6px; letter-spacing: -0.75px;} .subWrap .section_2 .keyPoint .keyTable {display: flex; margin-top: 50px;} .subWrap .section_2 .keyPoint .keyTable .prod {width: 42%;} .subWrap .section_2 .keyPoint .keyTable .prod .titBox p {color: #fff;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox {background-color: #F3F5FF;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox span {display: block; font-size: 23px; color:#6152FF;} .subWrap .section_2 .keyPoint .keyTable .divis {width: 18%;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size: 35px;} .subWrap .section_2 .keyPoint .keyTable .titBox {height: 90px; border-top:1px solid #d8d8d8;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 35px;} .subWrap .section_2 .keyPoint .keyTable .sBox > div {display: flex; justify-content: center; align-items: center; text-align: center; border-bottom: 1px solid #D8D8D8;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {height: 140px; font-size: 26px; line-height: 1.4;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox p strong {color:#6152ff; font-size:24px;} .subWrap .section_2 .keyPoint .keyTable .duplex .titBox {background-color: #6152FF;} .subWrap .section_2 .keyPoint .keyTable .other .titBox {background-color: #2B2B3B;} @media (max-width: 1800px) { .subWrap .section_1 .tBox {padding-left: 48px; padding-right: 600px;} .subWrap .section_1 .tBox p {font-size: 44px;} .subWrap .section_1 .tBox img {width: 600px;} .subWrap .section_1 .banner {padding: 90px 800px 120px 92px} .subWrap .section_1 .banner > img {width: 660px; top: 100px;} } @media (max-width: 1600px) { .subWrap .section_1 .tBox {padding-left: 0; padding-right: 570px;} .subWrap .section_1 .tBox span {font-size: 40px;} .subWrap .section_1 .tBox p {font-size: 38px;} .subWrap .section_1 .tBox img {right: -30px;} .subWrap .section_1 .iBox .sBox {height: 280px;} .subWrap .section_1 .iBox .sBox > div img {height: 130px;} .subWrap .section_1 .iBox .sBox p {font-size: 20px;} .subWrap .section_1 .banner {padding: 80px 600px 100px 52px;} .subWrap .section_1 .banner > img {width: 560px; top: 120px; right: 52px;} } @media (max-width: 1400px) { .subWrap .section_1 .tBox {padding-right: 470px;} .subWrap .section_1 .tBox span {font-size: 40px;} .subWrap .section_1 .tBox p {font-size: 34px;} .subWrap .section_1 .tBox img {bottom: -20px; width: 500px;} .subWrap .section_1 .iBox .sBox {width:calc(20% - 6px);} .subWrap .section_1 .iBox .sBox p {margin-top:10px;} .subWrap .section_1 .iBox {margin: 60px 0 40px;} .subWrap .section_1 .iBox .sBox {height: 250px; border-radius: 20px;} .subWrap .section_1 .iBox .sBox > div img {height: 110px;} .subWrap .section_1 .iBox .sBox p {font-size: 18px;} .subWrap .section_1 .iBox .sBox.color_3 p {margin-top: 18px;} .subWrap .section_1 .banner {padding: 80px 520px 100px 52px; border-radius: 20px;} .subWrap .section_1 .banner > img {width: 460px; top: 100px;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 96px;} .subWrap .section_1 .banner .bn_flag > p {font-size: 30px;} .subWrap .section_1 .banner .bn_flag ul li img {height: 60px;} .subWrap .section_1 .banner .txtBox {font-size: 48px;} .subWrap .section_1 .banner .txtBox span {margin-bottom: 16px;} .subWrap .section_2 .keyPoint > p {font-size: 50px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 36px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {font-size: 24px;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox span {font-size: 20px;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size: 30px;} } @media (max-width: 1200px) { .subWrap .sec {margin-top: 80px;} .subWrap .section_1 .tBox {padding-right: 370px;} .subWrap .section_1 .tBox span {font-size: 38px;} .subWrap .section_1 .tBox p {font-size: 28px;} .subWrap .section_1 .tBox img {width: 460px;} .subWrap .section_1 .iBox {gap: 0 5px;} .subWrap .section_1 .iBox .sBox {height: 220px; width: calc(20% - 4px);} .subWrap .section_1 .iBox .sBox > div img {height: 90px;} .subWrap .section_1 .iBox .sBox p {font-size: 16px;} .subWrap .section_1 .banner {padding: 60px 380px 80px 42px;} .subWrap .section_1 .banner > img {width: 420px; top: 80px; right: 32px;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 56px;} .subWrap .section_1 .banner .bn_flag .fBox ul {gap: 0 10px;} .subWrap .section_1 .banner .bn_flag > p {font-size: 26px; margin-top: 30px;} .subWrap .section_1 .banner .txtBox {font-size: 38px;} .subWrap .section_2 .keyPoint {padding-bottom: 70px;} .subWrap .section_2 .keyPoint > p {font-size: 40px;} .subWrap .section_2 .keyPoint .keyTable .titBox {height: 80px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 28px;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size: 26px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {font-size: 20px; height: 100px;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox span {font-size: 18px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox p strong {font-size:20px;} } @media (max-width:1099px) { .subWrap .section_1 .tBox img {width:400px;} .subWrap .section_1 .banner > img {width:400px;} } @media (max-width: 991px) { .subWrap .sec {margin-top: 80px;} .subWrap .section_1 .tBox {padding-right: 270px;} .subWrap .section_1 .tBox span {font-size: 30px;} .subWrap .section_1 .tBox p {font-size: 22px; margin-top: 12px;} .subWrap .section_1 .tBox img {width: 360px;} .subWrap .section_1 .iBox {gap: 10px 10px; margin: 40px 0 30px;} .subWrap .section_1 .iBox .sBox {width: calc(33.33% - 7px); height: 200px;} .subWrap .section_1 .iBox .sBox p {font-size: 17px;} .subWrap .section_1 .iBox .sBox > div img {height: 80px;} .subWrap .section_1 .iBox .sBox.color_6 {display: flex;} .subWrap .section_1 .iBox .sBox.color_6 img {height: 35px;} .subWrap .section_1 .banner {padding: 50px 42px 40px 42px; overflow: hidden;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 40px;} .subWrap .section_1 .banner .bn_flag > p {font-size: 26px;} .subWrap .section_1 .banner .txtBox {font-size: 32px;} .subWrap .section_1 .banner > img {width: 550px; margin-top: 30px; position: static; float: right;} .subWrap .section_2 .keyPoint > p {font-size: 35px;} .subWrap .section_2 .keyPoint {padding-bottom: 40px;} .subWrap .section_2 .keyPoint .keyTable {margin-top: 50px;} .subWrap .section_2 .keyPoint .keyTable .titBox {height: 60px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 24px;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size: 22px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {font-size: 19px; height: 90px;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox span {font-size: 17px;} } @media (max-width:840px) { .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {font-size:17px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox p strong {font-size:17px;} } @media (max-width: 768px) { .subWrap .sec {margin-top: 60px;} .subWrap {padding: 0 20px;} .subWrap .section_1 .tBox {padding-right: 0; text-align: center;} .subWrap .section_1 .tBox img {display: none;} .subWrap .section_1 .iBox .sBox.color_6 img {height: 28px;} .subWrap .section_1 .banner .bn_flag > p {margin-top: 24px; font-size: 24px;} .subWrap .section_1 .banner .bn_flag ul li img {height:40px;} .subWrap .section_1 .banner .txtBox span {margin-bottom: 10px;} .subWrap .section_1 .banner > img {width: 450px;} .subWrap .section_2 .keyPoint {padding-bottom: 40px;} .subWrap .section_2 .keyPoint .tableWrap {overflow-x: auto;} .subWrap .section_2 .keyPoint .scroll_info {margin-top: 30px; display: flex; width: 800px;} .subWrap .section_2 .keyPoint .keyTable {width: 800px; margin-top: 0;} .subWrap .section_2 .keyPoint .keyTable .titBox {height: 60px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 22px;} .subWrap .section_2 .keyPoint .keyTable .divis {width: 16%;} .subWrap .section_2 .keyPoint .keyTable .prod {width: 42%;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {font-size: 17px; height: 100px;} } @media (max-width: 640px) { .subWrap .sec {margin-top: 40px;} .subWrap .section_1 .iBox {margin: 20px 0 10px;} .subWrap .section_1 .iBox .sBox {width: calc(50% - 5px);} .subWrap .section_1 .banner {padding: 40px 30px 30px 30px;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 30px;} .subWrap .section_1 .banner .bn_flag > p {font-size: 22px;} .subWrap .section_1 .banner .bn_flag ul li img {height: 50px;} .subWrap .section_1 .banner .txtBox {font-size: 28px;} .subWrap .section_1 .banner > img {margin-top: 40px;} .subWrap .section_2 .keyPoint .scroll_info {width: 636px;} .subWrap .section_2 .keyPoint .keyTable {width: 636px;} .subWrap .section_2 .keyPoint > p {font-size: 30px;} .subWrap .section_2 .keyPoint .keyTable .prod .itemsBox span {font-size:15px; color:#6152ff;} } @media (max-width:580px) { .subWrap .section_1 .banner > img {width:400px; float:inherit;} .subWrap .section_2 .keyPoint .keyTable .titBox {height:50px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size:20px;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size:20px;} .subWrap .section_2 .keyPoint .keyTable .sBox .itemsBox {height:80px; font-size:16px;} } @media (max-width:540px) { .sVisual_wrap {padding:0 15px;} .subWrap {padding: 0 15px !important;} .subWrap .section_2 .keyPoint > p {font-size:26px;} } @media (max-width: 480px) { .subWrap .section_1 .tBox p {font-size: 20px; line-height: 1.4; margin-top: 8px;} .subWrap .section_1 .tBox span {font-size:26px;} .subWrap .section_1 .iBox {margin-top: 24px;} .subWrap .section_1 .iBox .sBox {height: 170px;} .subWrap .section_1 .iBox .sBox > div img {height: 70px;} .subWrap .section_1 .banner {padding: 30px 24px;} .subWrap .section_1 .banner .bn_flag {margin-bottom: 16px;} .subWrap .section_1 .banner .bn_flag ul li img {height: 35px;} .subWrap .section_1 .banner .bn_flag > p {margin-top: 16px; font-size: 16px; line-height: 1.4;} .subWrap .section_1 .banner .bn_flag > p br {display: block;} .subWrap .section_1 .banner .txtBox {font-size: 20px;} .subWrap .section_1 .banner .txtBox span {margin-bottom: 6px;} .subWrap .section_1 .banner > img {width: 100%; margin-top: 30px;} .subWrap .section_2 .keyPoint .scroll_info {font-size: 16px; margin-top: 24px;} .subWrap .section_2 .keyPoint .keyTable .titBox {height: 60px;} .subWrap .section_2 .keyPoint .keyTable .titBox p {font-size: 20px;} .subWrap .section_2 .keyPoint .keyTable .divis .titBox p {font-size: 18px;} .subWrap .section_1 .iBox .sBox.color_6 img {height:24px;} } @media (max-width:400px) { .subWrap .section_1 .tBox span {font-size:24px;} .subWrap .section_1 .tBox p {font-size:18px;} .subWrap .section_1 .iBox .sBox p {font-size:15px;} } @media (max-width:360px) { .subWrap .section_1 .tBox span {font-size:22px;} .subWrap .section_1 .tBox p {font-size:16px;} .subWrap .section_1 .banner {padding:20px;} .subWrap .section_1 .banner .bn_flag ul li img {height:32px;} .subWrap .section_1 .iBox .sBox {width:100%;} .subWrap .section_1 .iBox .sBox p {font-size:17px;} .subWrap .section_1 .iBox .sBox.color_6 {display:none;} } /** product **/ .sVisual_wrap .sVisual .product_visual {width: 100%; height: 100%; background: url(/assets/img/product_visual.jpg) no-repeat 50% 50%; animation: scaleAni 3.5s; background-size: cover;} .subWrap .product_section {position: relative; margin-top: 58px; padding-bottom: 320px;} .subWrap .product_section .floor-area {margin-top: 56px; will-change: transform; transform: translateZ(0);} .subWrap .product_section .floor-area:nth-of-type(1) {margin-top: 0;} .subWrap .product_section .floor-area .floor-inner {position: relative; height: 845px; padding: 20px 20px 20px 182px; border-radius: 50px; display: flex; align-items: center;} .subWrap .product_section .floor-area.floor-one .floor-inner {background-color: #6152FF;} .subWrap .product_section .floor-area.floor-two .floor-inner {background-color: #F2F3F8;} .subWrap .product_section .floor-area.floor-three .floor-inner {background-color: #151841;} .subWrap .product_section .floor-area.floor-four .floor-inner {background-color: #5a35a4;} .subWrap .product_section .floor-area.floor-five .floor-inner {background:#fff; box-shadow:0px 5px 8px 0px rgb(5 10 20 / 10%); justify-content:space-between;} .subWrap .product_section .floor-area.floor-five .floor-inner .txtBox .simgBox {background:#fff2c4;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:50%;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg img {width:100%; padding-right:4%;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:700px;} .subWrap .product_section .floor-area .floor-inner .txtBox {letter-spacing: -1px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size: 46px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size: 35px; margin-top: 20px; display: block;} .subWrap .product_section .floor-area .floor-inner .txtBox > span br {display:none;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 30px; margin-top: 95px; line-height: 1.5; display:flex; flex-direction:column; gap:10px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {display:flex; align-items:center; font-size:26px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p img {width:21px; margin-right:15px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {width: 174px; height: 174px; background-color: #fff; border-radius: 40px; display: flex; justify-content: center; align-items: center; margin-top: 57px;} .subWrap .product_section .floor-one .floor-inner .txtBox {color: #fff;} .subWrap .product_section .floor-one .floor-inner:after {position: absolute; content: ""; top: 70px; right: 117px; width: 98px; height: 98px; background: url(/assets/img/product_part1_deco_1.png) no-repeat 50% 50%; background-size: cover; animation: blink-effect 1.5s infinite;} @keyframes blink-effect {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}} .subWrap .product_section .floor-one .floor-inner > img {position: absolute; top: 50%; right: 232px; transform: translateY(-50%); height: 630px;} .subWrap .product_section .floor-two .floor-inner .sideImg {position: absolute; top: 50%; transform: translateY(-50%); right: 186px;} .subWrap .product_section .floor-two .floor-inner .sideImg > div {position: relative;} .subWrap .product_section .floor-two .floor-inner .sideImg span.cEffect {width: 230px; height: 47px; border-radius: 40px;} .subWrap .product_section .floor-two .floor-inner .sideImg span.rEffect {width: 49px; height: 30px; border-radius: 8px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox {z-index: 1;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.cEffect {border: 3px solid #fff; animation: glowEffect 1.5s infinite ease-in-out; position: absolute; bottom: 8px; left: 66px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.rEffect {bottom: 42px; left: 250px;} .subWrap .product_section .floor-two .floor-inner .sideImg > div > img {width: 310px;border:1px solid #e0e0e0; border-radius:30px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {margin-top: -150px; margin-left: 244px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.cEffect {position: absolute; bottom: 9px; left: 15px; width:47px; border: 3px solid #41f7ee; animation: glowEffect2 1.5s infinite ease-in-out;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.rEffect {bottom: 9px; right: 11px; left: auto;} .subWrap .product_section .floor-three .floor-inner .txtBox {color: #fff;} .subWrap .product_section .floor-three .floor-inner > img {width:380px; position: absolute; bottom: 102px; right: 125px;} .subWrap .product_section .floor-four .floor-inner .txtBox {color: #fff;} .subWrap .product_section .floor-four .floor-inner .txtBox .simgBox {margin-top: 100px;} .subWrap .product_section .floor-four .floor-inner .sideImg {position: absolute; top: 50%; transform: translateY(-50%); right: 134px; display: flex; align-items: center;; gap: 0 88px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img.pr_mb {display:none;} .subWrap .product_section .floor-four .floor-inner .sideImg div span {display:none;} @media (max-width: 1800px) { .subWrap .product_section .floor-area .floor-inner {padding: 20px 20px 20px 122px;} .subWrap .product_section .floor-one .floor-inner > img {right: 192px;} .subWrap .product_section .floor-two .floor-inner .sideImg {right: 76px;} .subWrap .product_section .floor-three .floor-inner:before {left: 530px;} .subWrap .product_section .floor-four .floor-inner .sideImg {gap: 0 60px; right: 64px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height: 587px;} } @media (max-width: 1600px) { .subWrap .product_section .floor-area .floor-inner {padding: 20px 20px 20px 80px;} .subWrap .product_section .floor-one .floor-inner > img {height: 600px; right: 92px;} .subWrap .product_section .floor-one .floor-inner:before {left: 543px;} .subWrap .product_section .floor-one .floor-inner:after {right: 57px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {margin-top: -200px; margin-left: 204px;} .subWrap .product_section .floor-three .floor-inner:before {left: 430px;} .subWrap .product_section .floor-four .floor-inner .sideImg {gap: 0 40px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height: 497px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:600px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:550px;} .subWrap .product_section .floor-three .floor-inner > img {width:350px;} } @media (max-width:1500px) { .subWrap .product_section .floor-area .floor-inner {padding:20px 20px 20px 60px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size:40px} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size:30px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:22px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {margin-top:50px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {width:150px; height:150px; border-radius:25px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox img {width:50%;} } @media (max-width: 1400px) { .subWrap .product_section .floor-area .floor-inner {height: 745px;} .subWrap .product_section .floor-three .floor-inner > img {width:300px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 26px;} .subWrap .product_section .floor-one .floor-inner:before {left: 443px; background-size: 320px; bottom: 17px;} .subWrap .product_section .floor-one .floor-inner:after {top: 50px; background-size: 80px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:500px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:500px;} .subWrap .product_section .floor-one .floor-inner > img {right: 80px; height: 500px;} .subWrap .product_section .floor-three .floor-inner:before {left: 340px; background-size: 180px;} .subWrap .product_section .floor-four .floor-inner .sideImg {right: 54px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height: 367px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img:nth-last-of-type(1) {margin-top: 200px;} } @media (max-width:1300px) { .subWrap .product_section .floor-area .floor-inner .txtBox > span br {display:block;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:400px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:400px;} } @media (max-width: 1200px) { .subWrap .product_section {padding-bottom: 260px;} .subWrap .product_section .floor-area .floor-inner {height: 645px; padding: 20px 20px 20px 50px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size: 44px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size: 32px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 22px; margin-top: 55px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {border-radius: 30px;} .subWrap .product_section .floor-one .floor-inner:before {left: 313px; background-size: 260px; bottom: 14px;} .subWrap .product_section .floor-one .floor-inner:after {top: 20px; right: 37px;} .subWrap .product_section .floor-one .floor-inner > img {right: 50px; height: 460px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.cEffect {bottom:5px; left:53px; width:185px; height:40px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.cEffect {bottom:6px; left:12px; width:40px; height:40px;} .subWrap .product_section .floor-two .floor-inner .sideImg > div > img {width:250px; } .subWrap .product_section .floor-three .floor-inner:before {left: 280px; background-size: 140px; width: 140px; height: 136px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height: 297px;} .subWrap .product_section .floor-three .floor-inner > img {bottom:50px; right:80px;} } @media (max-width:1099px) { .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:19px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size:34px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size:25px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:350px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:350px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg img {padding-right:0;} } @media (max-width: 991px) { .subWrap .product_section {padding-bottom: 240px;} .subWrap .product_section .floor-area .floor-inner {padding: 20px 20px 20px 40px; height: 535px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 20px; margin-top: 45px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {width: 100px; height: 100px; border-radius:15px; margin-top: 37px;} .subWrap .product_section .floor-one .floor-inner:before {display: none;} .subWrap .product_section .floor-one .floor-inner:after {right: 27px; background-size: 50px;} .subWrap .product_section .floor-one .floor-inner > img {right: 100px; height: 320px; top: auto; transform: none; bottom: 53px;} .subWrap .product_section .floor-two .floor-inner .sideImg {display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center;} .subWrap .product_section .floor-two .floor-inner .sideImg > div > img {width: 200px; border-radius:15px; display: inline-block; } .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {margin-top:0;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.cEffect {border: 2px solid #fff;left:21%; width:74%; height:31px;} .subWrap .product_section .floor-two .floor-inner .sideImg span.cEffect {width: 59%; height: 15%;} .subWrap .product_section .floor-two .floor-inner .sideImg span.rEffect {width: 22px; height: 17px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.rEffect {bottom:10%; left:auto; width:12%; right:23%;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.cEffect {border: 2px solid #41f7ee; bottom:3%; width:28px; height:28px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.rEffect {bottom:2%; left:auto; right:4%; width:15%;} .subWrap .product_section .floor-three .floor-inner .txtBox .simgBox img {width:60%;} .subWrap .product_section .floor-three .floor-inner > img {width:250px;} .subWrap .product_section .floor-three .floor-inner:before {display: none;} .subWrap .product_section .floor-four .floor-inner .sideImg {bottom: 65px; top: auto; transform: none; right: 40px; gap: 0 10px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height: 260px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p img {display:none;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:17px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:330px;} } @media (max-width:840px) { .subWrap .product_section .floor-area .floor-inner {height:500px; border-radius:20px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size:30px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size:23px; margin-top:10px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size:18px;} .subWrap .product_section .floor-one .floor-inner > img {height:290px; right:50px;} .subWrap .product_section .floor-two .floor-inner .sideImg {bottom:25px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {margin-left:0;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.cEffect {width:75%; left:auto; right:9px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.rEffect {width:16%; right:3%;} .subWrap .product_section .floor-three .floor-inner > img {width:200px;right:50px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height:220px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:260px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:280px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:16px;} } @media (max-width:800px) { .subWrap .product_section .floor-area .floor-inner {padding:20px 20px 20px 30px;} } @media (max-width: 768px) { .subWrap {padding: 0 20px;} .subWrap .product_section {padding-bottom: 60px; margin-top:26px;} .subWrap .product_section .floor-area {margin-top: 26px;} .subWrap .product_section .floor-area .floor-inner {padding: 40px; height: auto; display:flex; flex-direction:column; justify-content:flex-start; gap:50px; align-items:flex-start;} .subWrap .product_section .floor-area .floor-inner .txtBox {position:relative; width:100%;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size: 30px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size: 24px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 18px; margin-top: 35px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:20px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p br {display:none;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {position:absolute; top:0; right:0; width: 80px; height: 80px; margin-top: 0;} .subWrap .product_section .floor-one .floor-inner .txtBox {position:relative; width:100%;} .subWrap .product_section .floor-one .floor-inner:after {display:none;} .subWrap .product_section .floor-one .floor-inner > img {position:inherit; bottom:auto; top:auto; right:auto; height:auto; width:250px;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:350px;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:350px;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {margin:0;width:50%;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox {width:50%;} .subWrap .product_section .floor-two .floor-inner .sideImg span.cEffect {width: 78px; height: 21px;} .subWrap .product_section .floor-two .floor-inner .sideImg > div > img {width:100%; border-radius:20px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.cEffect {bottom:3%; left:auto; right:5%; height:14.5%; width:74%;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.cEffect {bottom:3%; left:5%; height:15%; width:15%;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.cEffect.rEffect{bottom: 2.5%;left: auto;right: 4%;width: 15%;height: 7%;} .subWrap .product_section .floor-two .floor-inner .sideImg span.rEffect {width: 18px; height: 12px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox span.rEffect {bottom:10.5%; left:auto; right:4%; width:15%; height:7%;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox span.rEffect {bottom:10%; left:auto; right:4%; width:15%; height:7%;} .subWrap .product_section .floor-three .floor-inner > img {position:inherit; width:230px; right:auto; left:auto; bottom:auto;} .subWrap .product_section .floor-four .floor-inner .sideImg {position:inherit; bottom:auto; right:auto; display:flex; width:100%; gap:40px; justify-content:space-between; flex-wrap: wrap;} .subWrap .product_section .floor-four .floor-inner .sideImg div {height:auto; width: 46%; display:flex;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {height:auto; width: 100%;object-fit: contain; display:block;} .subWrap .product_section .floor-four .floor-inner .sideImg div img:nth-last-of-type(1) {margin-top:0;} .subWrap .product_section .floor-two .floor-inner .sideImg{position: static !important;top: auto !important;right: auto !important;bottom: auto !important;left: auto !important;transform: none !important;z-index: auto !important;display: flex;flex-direction: row;gap: 20px;width: 100%;} .subWrap .product_section .floor-area.floor-five .floor-inner {box-shadow:-1px 1px 8px 0px rgb(5 10 20 / 10%);} .subWrap .product_section .floor-area .floor-inner .txtBox > span br {display:none;} .subWrap .product_section .floor-two .floor-inner .txtBox .simgBox img {width:60%;} } @media (max-width: 640px) { .subWrap .product_section {margin-top: 16px; padding-bottom: 40px;} .subWrap .product_section .floor-area {margin-top: 16px;} .subWrap .product_section .floor-area .floor-inner {padding:30px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size: 27px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size: 20px; margin-top: 14px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox {font-size: 16px; margin-top: 25px;} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox {width:auto; background:transparent; height:auto; justify-content:flex-end;} .subWrap .product_section .floor-one .floor-inner:after {display: none;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:17px;} .subWrap .product_section .floor-area.floor-five .floor-inner .txtBox .simgBox { background:transparent;} .subWrap .product_section .floor-three .floor-inner .txtBox .simgBox img {width:50%;} } @media (max-width:600px) { .subWrap .product_section .floor-four .floor-inner .sideImg div {width:44%;} } @media (max-width:540px) { .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size:25px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:17px; font-family:'Pretendard-Medium';} .subWrap .product_section .floor-area .floor-inner .txtBox .simgBox img {display:none;} } @media (max-width:480px) { .subWrap .product_section .floor-four .floor-inner .sideImg {gap:20px; flex-direction:column;} .subWrap .product_section .floor-four .floor-inner .sideImg div {width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px;} .subWrap .product_section .floor-four .floor-inner .sideImg div img {display:none;} .subWrap .product_section .floor-four .floor-inner .sideImg div img.pr_mb {display:block;} .subWrap .product_section .floor-four .floor-inner .sideImg div span {display:block; color:#fff; font-size:20px; font-family:'Pretendard-SemiBold';} .subWrap .product_section .floor-two .floor-inner .sideImg {gap:10px;} } @media (max-width:460px) { .subWrap .product_section .floor-two .floor-inner .sideImg {flex-direction:column; gap:20px;} .subWrap .product_section .floor-two .floor-inner .sideImg .lBox {width:100%;} .subWrap .product_section .floor-two .floor-inner .sideImg .rBox {width:100%;} .subWrap .product_section .floor-four .floor-inner .sideImg img {width:100%;} .subWrap .product_section .floor-area.floor-five .floor-inner .sideImg {width:100%;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:16px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-family:'Pretendard-SemiBold';} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-family:'Pretendard-light';} } @media (max-width:420px) { .subWrap .product_section .floor-area .floor-inner {padding:20px;} .subWrap .product_section .floor-area .floor-inner .txtBox > p {font-size:22px;} .subWrap .product_section .floor-area .floor-inner .txtBox > span {font-size:18px;} .subWrap .product_section .floor-area .floor-inner .txtBox .stxtBox p {font-size:16px;} .subWrap .product_section .floor-one .floor-inner .txtBox .simgBox img {height:40px;} .subWrap .product_section .floor-two .floor-inner .txtBox .simgBox img {height:35px;} .subWrap .product_section .floor-three .floor-inner > img {width:100%;} .subWrap .product_section .floor-three .floor-inner .txtBox .simgBox img {height:36px;} .subWrap .product_section .floor-four .floor-inner .txtBox .simgBox img {height:30px;} .frameWrap .aniTxt {display:none;} } @media (max-width:360px) { .subWrap .product_section .floor-one .floor-inner .txtBox .simgBox img {display:none;} .subWrap .product_section .floor-two .floor-inner .txtBox .simgBox img {display:none;} .subWrap .product_section .floor-three .floor-inner .txtBox .simgBox img {display:none;} .subWrap .product_section .floor-four .floor-inner .txtBox .simgBox img {display:none;} }