@charset "utf-8";

/* 1. 기본 설정 및 공통 UI */
html { font-size: 62.5% }

#navi { position:fixed; width:170px; height:244px; top:50%; right:30px; font-size:0; background-color:#14141480; border:1px solid #ffffff80; margin:-102px auto 0; z-index: 100 }
#navi:after { display:inline-block; height:100%; vertical-align:middle; content:'' }
#navi ul { display:inline-block; vertical-align:middle; margin:0 0 0 -20px }
#navi ul li { display:inline-block; margin:15px 0 }
#navi ul li a { display:block }
#navi ul li a p { display:inline-block; vertical-align:top; font-size:1.4rem; line-height:1; margin:0 0 0 25px }
#navi ul li a p.en { width:86px; color:transparent; text-align:right }
#navi ul li a p.num { position:relative; color:#ffffff5e; font-weight:600; margin:0 0 0 12px; padding:0 0 9px; transition:padding .5s }
#navi ul li a p.num:after { position:absolute; display:inline-block; width:100%; height:2px; bottom:0; left:0; background:#ffffff5e; content:'' }
#navi ul li.active a p.num, #navi ul li:hover a p.num { padding:0 0 15px; color:#fff }
#navi ul li.active a p.num:after, #navi ul li:hover a p.num:after { background:#fff }
#navi ul li.active a p.en, #navi ul li:hover a p.en { color:#fff }
@media all and (max-width:1200px) { 
#navi { display:none } 
 } 

/* Always TOP */
.side-buttons { position: fixed; bottom: 10px; right: 10px; z-index: 101; /* 헤더보다 높게 설정하려면 조정 */}
.circle-box { width: 130px; height: 130px; background-color: #14141480; border-radius: 50%; text-align: center; line-height: 1.2; display: flex; align-items: center; justify-content: center; font-size: 2.0rem; position: relative; margin-top: 10px; transition: all 0.3s; overflow: hidden;}
.circle-box:hover { background-color: #123672; letter-spacing: -1px;}
.circle-box a { color: #ffffff; display: flex; align-items: center; justify-content: center ; width: 100%; height: 100%; text-decoration: none;}
.circle-box h3 { margin: 0; padding: 0;}
.only_m_top {display: none;}

@media all and (max-width:1200px) { 
.only_m_top {display: flex;}
}

@media all and (max-width:768px) { 
.circle-box { width: 100px; height: 100px; font-size: 1.4rem;}
}

@media all and (max-width:500px) { 
.circle-box { width: 80px; height: 80px; font-size: 1.4rem;}
}

/*#sticky_box { position:fixed; width:170px; height:244px; top:20%; right:30px; font-size:0; background-color:#14141480; border:1px solid #ffffff80; margin:-82px auto 0; z-index: 100 }
#sticky_box ul { display:inline-block; vertical-align:middle; text-align: center;}
#sticky_box ul li { display:inline-block; margin:25px 0; }
#sticky_box ul li a { display:block }
#sticky_box ul li a p { display:inline-block; vertical-align:top; font-size:1.8rem; line-height:1; margin:10px 0 0 25px; color: white; text-align: center;}
 /*#navi-contact:after { display:inline-block; height:100%; vertical-align:middle; content:'' }
#navi-contact ul { display:inline-block; vertical-align:middle; margin:0 0 0 -20px }
#navi-contact ul { display:inline-block; vertical-align:middle; margin:0 0 0 -20px }
#navi-contact ul li { display:inline-block; margin:15px 0 }
#navi-contact ul li a { display:block }
#navi-contact ul li a p { display:inline-block; vertical-align:top; font-size:1.4rem; line-height:1; margin:0 0 0 25px }
#navi-contact ul li a p.en { width:86px; color:transparent; text-align:right }
#navi-contact ul li a p.num { position:relative; color:#ffffff5e; font-weight:600; margin:0 0 0 12px; padding:0 0 9px; transition:padding .5s }
#navi-contact ul li a p.num:after { position:absolute; display:inline-block; width:100%; height:2px; bottom:0; left:0; background:#ffffff5e; content:'' }
#navi-contact ul li.active a p.num, #navi-contact ul li:hover a p.num { padding:0 0 15px; color:#fff }
#navi-contact ul li.active a p.en, #navi-contact ul li:hover a p.en { color:#fff }*/


 /*vs*/
.main .vs { font-family:'Montserrat','Noto Sans KR',sans-serif } 
.main .vs .swiper-container { height:100% } 
.main .vs .swiper-wrapper { height:100% } 
.main .vs .swiper-slide { height:100% } 
.main .vs .swiper-control { position:absolute; top:45%; left:50%; margin:45px 0 0 -970px; transform:rotate(90deg); z-index:2 } 
.main .vs .swiper-pagination { position:relative; display:inline-block; vertical-align:middle; transition:none; transform:none } 
.main .vs .swiper-pagination-bullet { 
 position:relative; width:auto; height:auto; font-size:2rem; color:#ffffffbd; font-weight:300; background:transparent; border-radius:0; margin:0 14px; padding:0; opacity:1; transition:padding .8s } 
.main .vs .swiper-pagination-bullet:before { 
 position:absolute; display:inline-block; width:0; height:2px; top:50%; left:40px; background:#b5b5b5; margin:-1px auto 0; transition:width .8s; transition-delay:0s; content:''; z-index:1 } 
.main .vs .swiper-pagination-bullet-active { color:#ffff; font-weight:400; padding:0 125px 0 0 } 
.main .vs .swiper-pagination-bullet-active:before { width:100px; transition-delay:.8s } 
.main .vs .swiper-pagination-bullet-active:after { 
 position:absolute; display:inline-block; 
 width:0; height:2px; top:50%; left:40px; background:#fff; margin:-1px auto 0; 
 content:''; z-index:2; animation-name:bullet_anim; animation-duration:5s; 
 animation-timing-function:linear; animation-iteration-count:1; 
 animation-direction:alternate; animation-fill-mode:forwards; animation-delay:1.2s } 
@keyframes bullet_anim { 
0% { width:0 } 
100% { width:100px } 
 } 
.main .vs .swiper-button { position:relative; display:inline-block; vertical-align:middle; font-size:0; margin:0 0 0 10px; cursor:pointer; z-index:1 } 
.main .vs .swiper-button span { display:none; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:100% } 
.main .vs .swiper-button span.pause { display:inline-block; background-image:url(../img/main/vs-pause.png) } 
.main .vs .swiper-button span.play { background-image:url(../img/main/vs-play.png) } 
.main .vs .bg { position:absolute; width:100%; height:100%; top:0; left:0; background-repeat:no-repeat; background-position:center; background-size:cover } 
.main .vs .bg01 { background-image:url(../img/main/vs-bg01.jpg) } 
.main .vs .bg02 { background-image:url(../img/main/vs-bg02.jpg) } 
.main .vs .bg03 { background-image:url(../img/main/vs-bg03.jpg) } 
.main .vs .bg04 { background-image:url(../img/main/vs-bg04.jpg) } 
.main .vs .bg05 { background-image:url(../img/main/vs-bg05.jpg) } 
.main .vs .inner { height:100% } 
.main .vs .txt { height:100%; padding:0 60px } 
.main .vs .txt:after { display:inline-block; height:100%; vertical-align:middle; content:'' } 
.main .vs .txt>div { display:inline-block; vertical-align:middle; opacity:0; transform:translateY(30px); transition:opacity 0.7s,transform .7s; transition-delay:1s,1s } 
.main .vs .txt h3 { font-size:3.2rem; color:#fff; font-weight:400 } 
.main .vs .txt h2 { font-size:5.6rem; color:#fff; font-weight:900; margin:8px auto 0 } 
.main .vs .txt ul { margin:20px auto 0 } 
.main .vs .txt ul li { font-size:2rem; color:#fff; font-weight:500; line-height:2 } 
.main .vs .swiper-pagination-bullet-active.no-delay:after { animation-duration:3s; animation-delay:0s } 
.main .vs .swiper-pagination-bullet-active.stop:after { animation-play-state:paused } 
.main .vs .swiper-slide-active .txt>div { opacity:1; transform:translateY(0) } 
@media all and (max-width:1700px) { 
.main .vs .swiper-control { margin:45px 0 0 -890px } 
.main .vs .txt { padding:0 100px } 
 } 
@media all and (max-width:1500px) { 
.main .vs .swiper-control { position:absolute; width:100%; top:inherit; bottom:30px; left:0; right:0; margin:0; text-align:center; transform:rotate(0); z-index:2 } 
.main .vs .swiper-pagination-bullet { font-size:3.4rem; margin:0 12px } 
.main .vs .swiper-pagination-bullet:before { left:70px } 
.main .vs .swiper-pagination-bullet-active { padding:0 130px 0 0 } 
.main .vs .swiper-pagination-bullet-active:before { width:120px } 
.main .vs .swiper-pagination-bullet-active:after { left:70px } 
@keyframes bullet_anim {0% { width:0 } 100% { width:90px } } 
.main .vs .swiper-button { margin:0 0 0 8px } 
.main .vs .swiper-button span { width:60px; height:60px } 
.main .vs .txt { padding:0 50px } 
.main .vs .txt h3 { font-size:3rem } 
.main .vs .txt h2 { font-size:5.2rem; margin:6px auto 0 } 
.main .vs .txt ul { margin:16px auto 0 } 
.main .vs .txt ul li { font-size:1.5rem } } 

@media all and (max-width:1200px) { 
.main .vs .swiper-pagination-bullet { font-size:4rem; margin:0 10px } 
.main .vs .swiper-pagination-bullet:before { left:60px } 
.main .vs .swiper-pagination-bullet-active { padding:0 125px 0 0 } 
.main .vs .swiper-pagination-bullet-active:before { width:110px } 
.main .vs .swiper-pagination-bullet-active:after { left:60px } 
@keyframes bullet_anim { 0% { width:0 } 100% { width:110px } } 
.main .vs .swiper-button { margin:0 0 0 6px } 
.main .vs .swiper-button span { width:50px; height:50px } 
.main .vs .txt { padding:0 50px} 
.main .vs .txt>div { text-align:left } 
.main .vs .txt h3 { font-size:2.5rem } 
.main .vs .txt h2 { font-size:4rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:12px auto 0 } 
.main .vs .txt ul li { font-size:2rem } } 

@media all and (max-width:1024px) { 
.main .vs .swiper-pagination-bullet { font-size:3rem; margin:0 10px } 
.main .vs .txt h3 { font-size:2.5rem } 
.main .vs .txt h2 { font-size:3.5rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:12px auto 0 } 
.main .vs .txt ul li { font-size:2rem } 
}

@media all and (max-width:820px) { 
.main .vs .txt h3 { font-size:2rem } 
.main .vs .txt h2 { font-size:3rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:12px auto 0 } 
.main .vs .txt ul li { font-size:1.7rem } 
}

@media all and (max-width:768px) { 
.main .vs .txt h3 { font-size:1.8rem } 
.main .vs .txt h2 { font-size:2.7rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:12px auto 0 } 
.main .vs .txt ul li { font-size:1.6rem } 
 } 

@media all and (max-width:450px) { 
.main .vs .swiper-pagination-bullet { font-size:2rem; margin:0 10px } 
.main .vs .swiper-pagination-bullet:before { left:30px } 
.main .vs .swiper-pagination-bullet-active { padding:0 50px 0 0 } 
.main .vs .swiper-pagination-bullet-active:before { width:50px } 
.main .vs .swiper-pagination-bullet-active:after { left:30px } 
@keyframes bullet_anim { 0% { width:0 } 100% { width:50px } } 
.main .vs .txt { padding:0 20px} 
.main .vs .txt h3 { font-size:1.6rem } 
.main .vs .txt h2 { font-size:2.5rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:12px auto 0 } 
.main .vs .txt ul li { font-size:1.6rem } 
 } 

@media all and (max-width:350px) { 
.main .vs .txt { padding:0 10px} 
.main .vs .txt h3 { font-size:1.5rem } 
.main .vs .txt h2 { font-size:1.8rem; margin:5px auto 0 } 
.main .vs .txt ul { margin:10px auto 0 } 
.main .vs .txt ul li { font-size:1.5rem } 
}

/*기업소개*/
.main .about { font-family:'Montserrat','Noto Sans KR',sans-serif } 
.main .about .inner { max-width:1320px; padding:90px 20px 0 } 
.main .about .title .txt { text-align:center } 
.main .about .title .txt h2 { font-size:4rem; color:#191919; font-weight:800 } 
.main .about .content { margin:34px auto 0 } 
.main .about .content .left { position:relative; display:inline-block; width:50%; height:610px; vertical-align:top; overflow:hidden } 
.main .about .content .left>div { position:absolute; width:100%; height:100%; top:0; left:-100%; transition:left .7s } 
.main .about .content .left a { display:block; padding:106px 00px 0 } 
.main .about .content .left .bg { position:absolute; width:100%; height:100%; top:0; left:0; background:url(../img/main/about_bg01.jpg) no-repeat center / cover; z-index:1 } 
.main .about .content .left .txt { position:relative; text-align:right; opacity:0; transition:opacity .7s; transition-delay:1.4s; z-index:2; left:0px; right: 0px; padding:50px 50px 50px; background: rgba(0,0,0,0.5); z-index:2; box-sizing: border-box; } 
.main .about .content .left .txt .en { font-size:1.4rem; color:#fff; font-weight:700 } 
.main .about .content .left .txt h2 { font-size:3.4rem; color:#fff; font-weight:300; line-height:1.38235; } 
.main .about .content .left .txt h2 span { font-weight:400 } 
.main .about .content .left .txt .desc { font-size:1.8rem; color:#fff; font-weight:400; line-height:1.82352; margin:24px auto 0 } 
.main .about .content .left .cover { position:absolute; width:100%; height:100%; top:0; left:0; background:#99bbde; transition:left .7s; transition-delay:.7s; z-index:10 } 
.main .about .content .right { display:inline-block; width:50%; height:610px; vertical-align:top } 
.main .about .content .right .top { width:100%; height:50% } 
.main .about .content .right .top .notice { background:#f9f9f9; padding:44px 25px 44px 40px } 
.main .about .content .right .top .notice h2 { opacity:0; transition:opacity .7s; transition-delay:.7s } 
.main .about .content .right .top .notice h2 a { position:relative; display:block; font-size:2.7rem; color:#191919; font-weight:700 } 
.main .about .content .right .top .notice h2 a:after { 
 position:absolute; display:inline-block; width:18px; height:18px; top:50%; right:0; background:url(../img/main/about-icon01.png) no-repeat center / 100%; margin:-9px auto 0; content:'' } 
.main .about .content .right .top .notice ul { margin:21px auto 0; opacity:0; transition:opacity .7s; transition-delay:.7s } 
.main .about .content .right .top .notice ul li a { display:block } 
.main .about .content .right .top .notice ul li a .desc { 
 display:inline-block; vertical-align:top; width:77%; font-size:1.7rem; color:#424242; font-weight:350; line-height:2.411764; text-overflow:ellipsis; white-space:nowrap; overflow:hidden } 
.main .about .content .right .top .notice ul li a .desc img { width:11px; height:11px } 
.main .about .content .right .top .notice ul li a .date { display:inline-block; vertical-align:top; width:23%; font-size:1.7rem; color:#888; font-weight:300; text-align:right; line-height:2.411764 } 
.main .about .content .right .btm { width:100%; height:50% } 
.main .about .content .right .btm ul { height:100% } 
.main .about .content .right .btm ul li { display:inline-block; width:50%; height:100%; vertical-align:top } 
.main .about .content .right .btm ul li:nth-child(1) { background:#194286 } 
.main .about .content .right .btm ul li:nth-child(2) { background:#a8a7b2 } 
.main .about .content .right .btm ul li a { position:relative; display:block; height:100%; padding:50px 42px 0; overflow:hidden } 
.main .about .content .right .btm ul li .txt { position:relative; z-index:2 } 
.main .about .content .right .btm ul li .txt h2 { font-size:2.7rem; color:#fff; font-weight:700; opacity:0; transition:opacity .7s } 
.main .about .content .right .btm ul li .txt p { font-size:1.7rem; color:#fff; font-weight:350; line-height:1.82352; margin:16px auto 0; opacity:0; transition:opacity .7s; transition-delay:.3s } 
.main .about .content .right .btm ul li img { position:absolute; display:inline-block; width:auto; bottom:42px; right:-150px; transition:right .7s; transition-delay:1s; z-index:1 } 
.main .about .content .left>div.go { left:0 } 
.main .about .content .left>div.go .cover { left:-100% } 
.main .about .content .left>div.go .txt { opacity:1 } 
.main .about .content .right .top .notice.go h2,.main .about .content .right .top .notice.go ul { opacity:1 } 
.main .about .content .right .top .notice ul li a:hover .desc { text-decoration:underline } 
.main .about .content .right .btm ul li a.go .txt h2,.main .about .content .right .btm ul li a.go .txt p { opacity:1 } 
.main .about .content .right .btm ul li a.go img { right:60px } 
.main .about.fp-completely .content .left>div { left:0 } 
.main .about.fp-completely .content .left>div .cover { left:-100% } 
.main .about.fp-completely .content .left>div .txt { opacity:1 } 
.main .about.fp-completely .content .right .top .notice h2,.main .about.fp-completely .content .right .top .notice ul { opacity:1 } 
.main .about.fp-completely .content .right .top .notice ul li a:hover .desc { text-decoration:underline } 
.main .about.fp-completely .content .right .btm ul li a .txt h2,.main .about.fp-completely .content .right .btm ul li a .txt p { opacity:1 } 
.main .about.fp-completely .content .right .btm ul li a img { right:60px } 

@media all and (max-width:1200px) { 
.main .about .inner { padding:100px 20px } 
.main .about .title .txt h2 { font-size:4.2rem } 
.main .about .content { margin:26px auto 0 } 
.main .about .content .left { width:100%; height:450px } 
.main .about .content .left a { padding:0px; } 
.main .about .content .left .txt { text-align:left } 
.main .about .content .left .txt .en { font-size:2.6rem } 
.main .about .content .left .txt h2 { font-size:3rem; margin:20px auto 0 } 
.main .about .content .left .txt .desc { font-size:1.8rem; margin:18px auto 0 } 
.main .about .content .right { width:100%; height:auto } 
.main .about .content .right .top .notice { padding:30px } 
.main .about .content .right .top .notice h2 a { font-size:2.4rem } 
.main .about .content .right .top .notice h2 a:after { width:12px; height:12px; margin:-6px auto 0 } 
.main .about .content .right .top .notice ul { margin:16px auto 0 } 
.main .about .content .right .top .notice ul li a .desc { font-size:1.6rem } 
.main .about .content .right .top .notice ul li a .date { font-size:1.6rem } 
.main .about .content .right .btm ul li a { padding:35px 26px } 
.main .about .content .right .btm ul li .txt h2 { font-size:2.4rem } 
.main .about .content .right .btm ul li .txt p { font-size:1.8rem; margin:12px auto 0 } 
.main .about .content .right .btm ul li img { width:12%; bottom:20px; right:-120px } 
.main .about .content .right .btm ul li a.go img { right:30px } 
.main .about.fp-completely .content .right .btm ul li a img { right:30px } 
}

@media all and (max-width:768px) { 
.main .about .inner { padding:60px 20px } 
.main .about .title .txt h2 { font-size:2.6rem } 
.main .about .content { margin:18px auto 0 } 
.main .about .content .left { height:320px } 
.main .about .content .left a { padding:0px } 
.main .about .content .left .txt .en { font-size:1.25rem } 
.main .about .content .left .txt h2 { font-size:2.4rem; } 
.main .about .content .left .txt .desc { font-size:1.6rem;} 
.main .about .content .right .top .notice { padding:25px } 
.main .about .content .right .top .notice h2 a { font-size:1.8rem } 
.main .about .content .right .top .notice h2 a:after { width:10px; height:10px; margin:-5px auto 0 } 
.main .about .content .right .top .notice ul { margin:10px auto 0 } 
.main .about .content .right .top .notice ul li { margin:7px auto 0 } 
.main .about .content .right .top .notice ul li:first-child { margin:0 } 
.main .about .content .right .top .notice ul li a .desc { width:100%; font-size:1.6rem } 
.main .about .content .right .top .notice ul li a .date { width:100%; font-size:1.6rem; text-align:left } 
.main .about .content .right .btm ul li { width:100% } 
.main .about .content .right .btm ul li a { padding:25px } 
.main .about .content .right .btm ul li .txt h2 { font-size:1.8rem } 
.main .about .content .right .btm ul li .txt p { font-size:1.6rem; margin:8px auto 0 } 
.main .about .content .right .btm ul li img { width:10% } 
 } 

@media all and (max-width:450px) { 
.main .about .content .left .txt h2 { font-size:1.8rem; } 
.main .about .content .left .txt .desc { font-size:1.5rem;} 
}

/*기술소개*/
.main .technology { font-family:'Montserrat','Noto Sans KR',sans-serif; background:url(../img/main/technology-bg.jpg) no-repeat center / cover } 
.main .technology .inner, .main .products .inner { max-width:1500px; padding:90px 20px 0 } 
.main .technology .title .txt, .main .products .title .txt { text-align:center } 
.main .technology .title .txt h2, .main .products .title .txt h2 { font-size:4rem; color:#fff; font-weight:800 } 
.main .technology .content, .main .products .content { margin:107px auto 0 } 
.main .technology .content ul, .main .products .content ul { margin:0 -20px } 
.main .technology .content ul li, .main .products .content ul li { display:inline-block; width:25%; vertical-align:top; padding:0 20px } 
.main .technology .content ul li:nth-child(1), .main .products .content ul li:nth-child(1) { margin:0 } 
.main .technology .content ul li:nth-child(2), .main .products .content ul li:nth-child(2) { margin:80px auto 0 } 
.main .technology .content ul li:nth-child(3), .main .products .content ul li:nth-child(3) { margin:-35px auto 0 } 
.main .technology .content ul li:nth-child(4), .main .products .content ul li:nth-child(4) { margin:50px auto 0 } 
.main .technology .content ul li a, .main .products .content ul li a
{ position:relative; display:inline-block; width:347px; height:477px; padding:0 20px; opacity:0; transform:translateY(30px); transition:opacity 1s,transform 1s } 
.main .technology .content ul li:nth-child(1) a, .main .products .content ul li:nth-child(1) a { transition-delay:.5s } 
.main .technology .content ul li:nth-child(2) a, .main .products .content ul li:nth-child(2) a { transition-delay:.5s } 
.main .technology .content ul li:nth-child(3) a, .main .products .content ul li:nth-child(3) a { transition-delay:.5s } 
.main .technology .content ul li:nth-child(4) a, .main .products .content ul li:nth-child(4) a { transition-delay:.5s } 
.main .technology .content ul li .bg, .main .products .content ul li .bg
 { position:absolute; width:307px; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; z-index:1 } 
.main .technology .content ul li .bg span, .main .products .content ul li .bg span
 { position:absolute; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1); transition:transform 1s ease } 
.main .technology .content ul li .bg span.bg01 { background-image:url(../img/main/technology-img01.jpg) } 
.main .technology .content ul li .bg span.bg02 { background-image:url(../img/main/technology-img02.jpg) } 
.main .technology .content ul li .bg span.bg03 { background-image:url(../img/main/technology-img03.jpg) } 
.main .technology .content ul li .bg span.bg04 { background-image:url(../img/main/technology-img04.jpg) } 
.main .technology .content ul li .txt, .main .products .content ul li .txt
 { position:absolute; bottom:0; left:19px; right: 19px; padding:20px 20px 100px 50px; background: rgba(0,0,0,0.5); z-index:2; box-sizing: border-box; } 
.main .technology .content ul li .txt h2, .main .products .content ul li .txt h2 { font-size:2.3rem; color:#fff; font-weight:800 } 
.main .technology .content ul li .txt p, .main .products .content ul li .txt p { font-size:1.6rem; color:#fff; font-weight:400; line-height:1.875; margin:20px auto 0 } 
.main .technology .content ul li a>p, .main .products .content ul li a>p
 { position:absolute; top:11%; right:-47px; font-size:1.4rem; color:#fff; font-weight:500; transform:rotate(90deg); transition:top 1s ease } 
.main .technology .content ul li a:hover .bg span, .main .products .content ul li a:hover .bg span { transform:scale(1.3) } 
.main .technology .content ul li a:hover>p, .main .products .content ul li a:hover>p { top:86% } 
.main .technology .content ul li a.go, .main .products .content ul li a.go { opacity:1; transform:translateY(0) } 
.main .technology.fp-completely .content ul li a, .main .products.fp-completely .content ul li a { opacity:1; transform:translateY(0) } 

@media all and (max-width:1200px) { 
.main .technology .inner, .main .products .inner { padding:30px 20px } 
.main .technology .title .txt h2, .main .products .title .txt h2 { font-size:4.2rem } 
.main .technology .content, .main .products .content { margin:80px auto -100px } 
.main .technology .content ul, .main .products .content ul { margin:20px }
.main .technology .content ul li, .main .products .content ul li { padding:60px 10px }
.main .technology .content ul li a, .main .products .content ul li a { width:100%; height:420px; padding:0 12px } 
.main .technology .content ul li .bg, .main .products .content ul li .bg { width:100%; } 
.main .technology .content ul li .txt, .main .products .content ul li .txt { padding:60px 20px } 
.main .technology .content ul li .txt h2, .main .products .content ul li .txt h2 { font-size:2.5rem } 
.main .technology .content ul li .txt p, .main .products .content ul li .txt p { font-size:1.8rem; margin:14px auto 0 } 
.main .technology .content ul li a>p, .main .products .content ul li a>p { top:-40px; right:0; font-size:1.5rem; transform:rotate(0); transition:right 1s ease } 
.main .technology .content ul li a:hover>p, .main .products .content ul li a:hover>p { top:-18px; right:calc(100% - 112px) } 
 } 
@media all and (max-width:768px) { 
.main .technology .inner, .main .products .inner { padding:30px 20px } 
.main .technology .title .txt h2, .main .products .title .txt h2 { font-size:2.6rem } 
.main .technology .content, .main .products .content { margin:50px auto 0 } 
.main .technology .content ul, .main .products .content ul { margin:-20px; padding: 0 0 0 120px;} 
.main .technology .content ul li, .main .products .content ul li { padding:30px 20px; width: 40%; box-sizing: border-box; } 
.main .technology .content ul li:nth-child(1), .main .products .content ul li:nth-child(1) { margin:0px auto 0 } 
.main .technology .content ul li:nth-child(2), .main .products .content ul li:nth-child(2) { margin:0px auto 0 } 
.main .technology .content ul li:nth-child(3), .main .products .content ul li:nth-child(3) { margin:0px auto 0 } 
.main .technology .content ul li:nth-child(4), .main .products .content ul li:nth-child(4) { margin:0px auto 0 } 
.main .technology .content ul li a, .main .products .content ul li a { height:340px; padding:0 10px } 
.main .technology .content ul li .txt, .main .products .content ul li .txt { width:100%; left:0; padding:35px 12px } 
.main .technology .content ul li .txt h2, .main .products .content ul li .txt h2 { font-size:2rem } 
.main .technology .content ul li .txt p, .main .products .content ul li .txt p { font-size:1.6rem; margin:10px auto 0 } 
.main .technology .content ul li a>p, .main .products .content ul li a>p { top:-20px; right:0; font-size:1.3rem; transform:rotate(0); transition:right 1s ease } 
} 
@media all and (max-width:500px) { 
.main .technology .content ul, .main .products .content ul { margin:-20px; padding: 0 0 0px;} 
.main .technology .content ul li, .main .products .content ul li { padding:20px 10px; width: 50%; box-sizing: border-box; } 
.main .technology .content ul li a, .main .products .content ul li a { height:240px; padding:0 10px } 
.main .technology .content ul li .txt h2, .main .products .content ul li .txt h2 { font-size:1.5rem } 
.main .technology .content ul li .txt p, .main .products .content ul li .txt p { font-size:1.4rem; margin:10px auto 0 } 
} 

/*제품소개*/
.main .products { font-family:'Montserrat','Noto Sans KR',sans-serif; background:url(../img/main/products-bg.jpg) no-repeat center / cover } 
.main .products .content ul li .bg span.bg01 { background-image:url(../img/main/products-img01.jpg) } 
.main .products .content ul li .bg span.bg02 { background-image:url(../img/main/products-img02.jpg) } 
.main .products .content ul li .bg span.bg03 { background-image:url(../img/main/products-img03.jpg) } 
.main .products .content ul li .bg span.bg04 { background-image:url(../img/main/products-img04.jpg) }