@charset "utf-8";
/* ********************************************************************
 * name : SEM
 * filename : main.css
 * description : 메인 콘텐츠 css 
 * date : 2023-12-17
********************************************************************* */

/* === 메인비주얼 === */

.visTxt{padding-top: 28vh;overflow: hidden;}
.visTxt .titleBox {width: 100%;color: #505050;font-size: 22px;-webkit-font-smoothing: antialiased;font-weight: 400;margin-left:9.5%}
.visTxt .titleBox span {display: inline-block;color:#2856be;font-weight: 500;}
.visTxt .titleBox .letter {transition: transform 1.5s cubic-bezier(0.43, 0.1, 0.57, 0.9), filter 1s ease, opacity 1s ease;opacity: 0;filter: blur(5px);}
.visTxt .titleBox .letter:nth-of-type(2) {transform: translateY(-160px);transition-duration: 1s;}
.visTxt .titleBox .letter:nth-of-type(3) {filter: blur(0);transform: translateY(-170px);transition-duration: 2s;}
.visTxt .titleBox .letter:nth-of-type(4) {transform: translateY(-200px);transition-duration: 1.5s;}
.visTxt .titleBox .letter.loaded {opacity: 1;transform: translateY(0);filter: blur(0);}

.visTxt .txtBox{margin-top: 3em;margin-left:9.5%}
.visTxt .txtBox p{text-transform: uppercase;font-size: 72px;color: #1e1e1e;font-weight: 900;letter-spacing: -0.03em;line-height: 1.1;animation: text-clip 1.5s 0s cubic-bezier(0.5, 0, 0.1, 1) both;}
.mVis{position: relative;z-index: -1;top: -39px;overflow: hidden;}
.mVis .imgBox{overflow: hidden;transition: opacity 1.1s;}
.mVis .imgBox{position: relative;width:100%;height:100%;animation: image-in 1.7s cubic-bezier(0.5, 0, 0.1, 1) 0.7s backwards;}
.mVis .imgBox img{width:100%;}

.mVis .pin-spacer{width: 100% !important;height:auto !important;}

.panel {width: 100%;min-height: calc(100vh - 64px);display: flex;flex-direction: column;position: relative;box-sizing: border-box;overflow:hidden;}
.panelBg{width: 100%;background: #fff;height: 5vh;}

/* === 어바웃 === */
.semAbout{overflow: visible;background: #fff;}

.aboutCon .sticky .txtBox h2{font-size:50px;color:#000;font-weight: 900;line-height: 1;}
.aboutCon .sticky .txtBox p{line-height: 1.6;margin-top: 2em;}
.aboutCon .sticky .txtBox .th2{line-height: 1.3;font-weight: 600;}
.aboutCon .sticky .txtBox .th2 span{color: #2856be;}
.aboutCon .sticky .imgBox img{display: block;height: 100%;-o-object-fit: contain;object-fit: contain;width: 100%;}


/* === 프로덕트 === */

.proWrap{background: #fff;width: 100%;overflow: hidden;}
.proWrap .proTitle{text-align: center;padding: 3.5em 0 6.5em;}
.proWrap .proTitle h2{font-size:72px;color:#000;letter-spacing: -0.05em;}
.proWrap .proTitle p{font-size:19px;color:#606060;margin-top: 1em;line-height: 1.8;}
.proWrap .pin-spacer {height: 100vh !important;padding-bottom: 2400px !important;}
.proWrap .accordions {display: flex;flex-direction: column;align-items: center;padding-bottom: 20vh;}
.proWrap .accordion {}
.proWrap .accordion .title {font-size: 24px;color: #010101;border-top: 3px solid #5d5d5d;border-bottom: 1px solid #d9d9d9;padding: 20px 0;margin: 20px 0;font-weight: 500;}
.proWrap .accordion .title i{border: 1px solid #dadada;border-radius: 50%;color: #d83535;font-size: 14px;font-weight: 600;padding: 12px;margin-right: 25px;}
.proWrap .accordion:nth-child(2) .title{}
.proWrap .accordion:nth-child(3) .title{}
.proWrap .accordion .img {overflow: hidden;position: relative;padding-bottom: 0 !important;}
.proWrap .accordion .img img{}
.proWrap .accordion .img .lm{margin-left: 15px;}
.proWrap .accordion .img .accBtn{position: absolute;z-index: 1;right: 20px;bottom: 20px;transition: all 0.5s;}
.proWrap .accordion .img .accBtn span{border: 1px solid #c1c1c1;border-radius: 50%;margin-left: 15px;display: inline-block;width: 40px;height: 40px;vertical-align: middle;position: relative;}
.proWrap .accordion .img .accBtn i{font-size: 16px;animation: accbtn 1.2s cubic-bezier(0, 0, 0.03, 0.9) infinite;position: absolute;top: 11px;left: 13px;}
.proWrap .accordion .img:hover .accBtn {background: #2d2d2d;padding: 10px 20px;border-radius: 50px;color: #fff;}

/* === 테크놀로지 === */

.techWrap{position: relative;}
.techWrap h2{font-size:20px;color:#050505;font-weight: 500;letter-spacing: -0.05em;margin-top: -70px;}
.techWrap h2 span{margin:0 15px;}
.techWrap h2 i{width: 188px;height: 1px;background: #000;display: inline-block;vertical-align: middle;}
.techWrap .techCon{display: flex;justify-content: space-between;}
.techWrap .techCon .titBox{width: 53%;letter-spacing: -0.05em;display: flex;flex-direction: column;justify-content: center;height: 709px;}
.techWrap .techCon .titBox h3{font-size: 40px;color:#212126;line-height: 1.2;font-weight: 600;}
.techWrap .techCon .titBox p{font-size:18px;color:#2c2c2c;line-height: 1.8;margin: 2em 3em 4em 0;}
.techWrap .techCon .titBox a{width:304px;height:66px;font-size:18px;color:#fff;background:#314a95;text-align: center;line-height: 65px;border-radius: 50px;transition: all 0.5s;}
.techWrap .techCon .titBox a:hover{background:#2d2d2d;}
.techWrap .techCon .titBox .btnEffect {position: relative;overflow: hidden;}
.techWrap .techCon .titBox .btnEffect:before,
.techWrap .techCon .titBox .btnEffect span {transition: all 0.4s;transition-timing-function: cubic-bezier(0.85, 0, 0.2, 1);}
.techWrap .techCon .titBox .btnEffect:before {position: absolute;top: -10px;left: -20px;width: 100%;content: attr(data-text);transform: translate3d(0, 10px, 0);}
.techWrap .techCon .titBox .btnEffect span {display: inline-block;opacity: 0;transform: translate3d(0, -10px, 0);}
.techWrap .techCon .titBox .btnEffect:hover:before {opacity: 0;transform: translate3d(0, 40px, 0);}
.techWrap .techCon .titBox .btnEffect:hover span {opacity: 1;transform: translate3d(0, 0, 0);}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(1) {transition-delay: 0.04s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(2) {transition-delay: 0.08s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(3) {transition-delay: 0.12s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(4) {transition-delay: 0.16s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(5) {transition-delay: 0.2s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(6) {transition-delay: 0.24s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(7) {transition-delay: 0.28s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(8) {transition-delay: 0.32s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(9) {transition-delay: 0.36s;}
.techWrap .techCon .titBox .btnEffect:hover span:nth-child(10) {transition-delay: 0.4s;}
.techWrap .techCon .titBox a i{margin-left: 20px;}
.techWrap .techCon .tachBg{width: 1446px;height: 709px;background: #f2f7ff;position: absolute;z-index: -1;top: 0;left: 0;}
.techWrap .techCon .imgBox{visibility: hidden;position: relative;width: 80%;height: 80%;max-width: 735px;overflow: hidden;}
.techWrap .techCon .imgBox img{height: 100%;width: 100%;object-fit: cover;transform-origin: left;}
.techWrap .clear{margin: 40vh 0;}
.techWrap .techCon1{display: flex;flex-direction: column;}
.techWrap .techCon1 .titBox{width: 785px;height: auto;flex-wrap: wrap;align-content: flex-end;margin-top: 7em;margin-left: 52%;}
.techWrap .techCon1 .imgBox{width: 100%;height: 100%;max-width:100%;z-index: -1;margin-top: -35px;}

/* === 요소찾기 === */

.hide {visibility: hidden;}
.show {visibility: visible;}
.img-in-scale{animation: imgscale 5s ease-out both;}


/*
===============================================
animation
===============================================
*/
@keyframes text-clip {
  from {clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
  to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}

@keyframes image-in {
  from {clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
  to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
}

@keyframes accbtn {
	0%, 44%, 88.1%, 100% {transform-origin: left;}	
	0%, 100%, 88% {transform: scaleX(0);}	
	44.1%, 88% {transform-origin: right;}	
	33%, 44% {transform: scaleX(1);}
}

@keyframes imgscale {
  0% {  
	-webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
}

/*
===============================================
반응형 css
===============================================
*/

@media (min-width: 920px){
	.semAb {contain:paint;height: 100vh;height: calc(var(--vh,1vh)*100);padding: 0}
	.semAb:first-child .aboutCon {top: 0}
	.semAb:first-child .aboutCon,
	.semAb:last-child .aboutCon {height: 200vh;height: calc(var(--vh,1vh)*200)}

	.aboutCon {height: 300vh;height: calc(var(--vh,1vh)*300);left: 0;position: absolute;right: 0;top: -100vh;top: calc(var(--vh,1vh)*-100);z-index: 2}
	.aboutCon .sticky {display: flex;height: 100vh;height: calc(var(--vh,1vh)*100);position: sticky;top: 0;align-items: center;justify-content: space-between;}
	.aboutCon .sticky .txtBox {/* position: absolute; *//* left:9.5%; */width: 50%;}
	.aboutCon .sticky .txtBox h2{font-size:82px;}
	.aboutCon .sticky .txtBox p{font-size: 22px;}
	.aboutCon .sticky .txtBox .th2{font-size: 74px;}
	.aboutCon .sticky .imgBox {width: 50%;display: flex;justify-content: flex-end;}
	.aboutCon .sticky .imgBox .picture{position: absolute;height: 40vw;width: 36vw;top: 50%;transform: translateY(-50%);}
}

@media all and (min-width:1921px){
	.visTxt {padding-top: 12%;}
	.visTxt .titleBox {font-size: 26px;}
	.visTxt .txtBox p {font-size: 82px;}
	.mVis {top: -44px;}

	.aboutCon .sticky .imgBox .picture {width: 29vw;}
	.aboutCon .sticky .txtBox .th2 {font-size: 65px;}
}

@media all and (max-width:1800px){
	.visTxt {padding-top: 12%;}
}

@media all and (max-width:1600px){
	.visTxt .titleBox,
	.visTxt .txtBox{margin-left: 3%;}
	.visTxt {padding-top: 15%;}
	.mVis .imgBox img {width: 100%;height: 100%;object-fit: cover;}

	.proWrap .proTitle {padding: 4em 0;}
	.proWrap .proTitle h2 {font-size: 65px;}
	#acc_content{width: calc(100% - 6%);margin: 0 3%}
	.proWrap .accordion {width: 100%;}
	.proWrap .accordion .img {display: flex;align-items: flex-start;width: 100%;}
	.proWrap .accordion .img img {width: 50%;}

	.techWrap .techCon1 .titBox {width: calc(100% - 6%);margin: 7em 3% 0;}
	.techWrap .techCon .techImg {width: 60%;}

	.aboutCon .sticky{width:calc(100% - 6%);}
	.aboutCon .sticky .txtBox{left:3%;}
	.aboutCon .sticky .imgBox .picture {height: 50vw;width: 44vw;}
}

@media all and (max-width:1450px){
	.proWrap .pin-spacer {padding-bottom: 2100px !important;}
	.techWrap .techCon1 .titBox {margin-top: 0;}
	.techWrap .techCon .titBox p br{display:none;}
	.techWrap .techCon .titBox p i{display:block;margin-top:20px;}
	.techWrap .techCon .titBox p i.t2{margin-top:0;}
	.techWrap .techCon .tachBg {width: 100%;overflow: hidden;}

	.aboutCon .sticky .txtBox .th2 {font-size: 65px;}
}

@media all and (max-width:1280px){
	.visTxt .txtBox p {font-size: 58px;}
	.mVis {top: -31px;}

	.proWrap .pin-spacer {padding-bottom: 1950px !important;}
	.techWrap .techCon .titBox{height: 640px;}
	.techWrap .techCon .tachBg {height: 640px;}
	.techWrap .techCon .titBox h3 {font-size: 36px;}
	.techWrap .techCon .titBox p {font-size: 17px;}
	.techWrap .techCon .techImg {width: 46%;height: 500px;}
	.techWrap .techCon1 .titBox{height: auto;}
	.techWrap .clear {margin: 25vh 0;}
	.techWrap .techCon1 {padding-top: 50px;}
	.techWrap .techCon1 .titBox {align-content: flex-start;}
}

@media all and (max-width:1200px){
	.proWrap .accordion .title {font-size: 22px;}

	.aboutCon .sticky .txtBox h2 {font-size: 62px;}
	.aboutCon .sticky .txtBox p {font-size: 20px;}
	.aboutCon .sticky .txtBox .th2 {font-size: 54px;}
}

@media all and (max-width:1100px){
	.aboutCon .sticky .txtBox .th2 {font-size: 50px;}
}

@media all and (max-width:980px){	
	.visTxt .txtBox p {font-size: 48px;}
	.mVis {top: -27px;}

	.proWrap .pin-spacer {padding-bottom: 1800px !important;}
	.techWrap .techCon {flex-direction: column;}
	.techWrap .techCon .titBox h3 br,
	.techWrap .techCon .titBox p br{display:none;}
	.techWrap .techCon .titBox{width:100%;height: 630px;}
	.techWrap .techCon .titBox a {width: 235px;height: 55px;line-height: 54px;}
	.techWrap .techCon .titBox p{margin: 2em 0;}
	.techWrap .techCon .tachBg {height: 700px;}
	.techWrap .techCon .techImg {max-width: 100%;width: 100%;height: 100%;transform: none !important;margin-top: -40px;}
	.techWrap .techCon .techImg img{transform: none !important;}
	.techWrap .clear {margin: 18vh 0;}
	.techWrap .techCon1 {padding-top: 30px;}
	.techWrap .techCon1 .titBox{height: auto;width: calc(100% - 6%);}
}

@media (max-width: 919px){
	.semAbout{padding: 8em 0 0;}
	.semAb {margin-bottom:4em;}

	.aboutCon .sticky {width: calc(100% - 40%);margin: 0 20%;}
	.aboutCon .sticky .txtBox p {font-size: 18px;}
	.aboutCon .sticky .imgBox {width: 100%;display: flex;justify-content: center;margin-top: 2em;}
	.aboutCon .sticky .imgBox .picture{height: 100%;width: 100%;}
	.aboutCon .sticky .imgBox img{display: block;height: 100%;width: 100%;}
}

@media all and (max-width:920px){	
	.proWrap .pin-spacer {padding-bottom: 1800px !important;}
}

@media all and (max-width:768px){
	.mVis .imgBox{height:450px;}
	.proWrap .proTitle h2 {font-size: 52px;}
	.proWrap .proTitle p {font-size: 17px;}
	.proWrap .accordion .img {flex-direction: column;}
	.proWrap .accordion .img img {width: 100%;}
	.proWrap .accordion .img .lm {margin-left: 0;}
	.proWrap .pin-spacer {padding-bottom: 2900px !important;}
	.proWrap .accordion .title {font-size: 18px;padding: 10px 0;margin: 10px 0;border-top: 2px solid #5d5d5d}
	.proWrap .accordion .title i {padding: 8px;margin-right: 12px;}

	.aboutCon .sticky .txtBox h2 {font-size: 42px;}
	.aboutCon .sticky .txtBox .th2 {font-size: 30px;}
}

@media all and (max-width:700px){
	.visTxt {padding-top: 15vh;}
	.visTxt .txtBox p {font-size: 44px;}
	.mVis {top: -19px;}
}

@media all and (max-width:640px){
	.visTxt .titleBox, 
	.visTxt .txtBox {margin-left: 5%;}
	.visTxt {padding-top: 18vh;}
	.visTxt .txtBox p {font-size: 32px;}
	.mVis {top: -25px;}
	.visTxt .titleBox em{display:block;}		
	.mVis .imgBox {height: 350px;}

	/*#acc_content {width: calc(100% - 10%);margin: 0 5%;}*/
	
	.proWrap .proTitle h2 {font-size: 43px;}
	.proWrap .pin-spacer {padding-bottom: 2600px !important;}
	.proWrap .proTitle {padding: 2em 0;}
	.proWrap .proTitle p br{display:none;}

	.techWrap .techCon .titBox h3 {font-size: 28px;}
	.techWrap .clear {margin: 15vh 0 0;}
	.techWrap .techCon1 .imgBox{height:350px;}
	.techWrap .techCon1 .titBox {width: calc(100% - 10%);}

	.semAbout {padding: 5em 0 0;}
	.aboutCon .sticky {width: calc(100% - 10%);margin: 0 5%;}
	.aboutCon .sticky .txtBox h2 {font-size: 36px;}
	.aboutCon .sticky .txtBox p {font-size: 16px;}
}

@media all and (max-width:550px){
	.proWrap .pin-spacer {padding-bottom: 2400px !important;}
	.techWrap .techCon .techImg {margin-top: -20px;}
}

@media all and (max-width:490px){
	.proWrap .pin-spacer {padding-bottom: 2200px !important;}

	.proWrap .proTitle {text-align: left;}
	.proWrap .proTitle h2 {font-size: 42px;}
	.proWrap .proTitle p br{display:none;}
}

@media all and (max-width:430px){	
	.mVis {top: -53px;}
	.visTxt {padding-top: 20vh;}
	.mVis .imgBox {height: 460px;}

	.proWrap .pin-spacer {padding-bottom: 2000px !important;}

	.techWrap .techCon1 .titBox{height:auto;}
}