@charset "utf-8";
/* 공통 */
.mainContent {min-height: 100vh; padding-top: 130px; background-color: #fff;}


/* 메인 이미지*/
#mainVis .mainSlider {position: relative;}
#mainVis .mainSlider .list > li {display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh;}
#mainVis .mainSlider .list > li img {width: 100%; height: 100%; object-fit: cover;}

#mainVis .mainSlider .mainSlideTit {position: absolute; display: flex;  width: 100%;  padding: 0 5rem; bottom: 8rem; left: 0; right: 0; margin: auto;  gap: 1.5rem; max-width: 115rem; z-index: 3; text-indent: -1000000em; font-size: 0;}
#mainVis .mainSlider .mainSlideTit > li {position: relative; width: calc(100% / 5);  letter-spacing: -0.25px; opacity: 1; font-size: 1.09rem; color: #12b7ee; font-weight: 500;}
#mainVis .mainSlider .mainSlideTit > li .barBox {display: inline-block; position: relative; width: 100%; height: 3px; background-color: rgba(255, 255, 255, .4); margin-bottom: 20px;}
#mainVis .mainSlider .mainSlideTit > li .barTit em {color: #fff; padding-left: 5px; font-weight: 400;}
/*#mainVis .mainSlider .mainSlideTit > li.swiper-pagination-bullet-active {background: #fff; color: #fff;}*/
#mainVis .mainSlider .mainSlideTit > li .bar {position: absolute; top: 0; left: 0; width:0; height: 3px; background: #fff;}
#mainVis .mainSlider .mainSlideTit > li.swiper-pagination-bullet-active .bar {animation-name: countingBar; animation-duration: 6s; animation-timing-function: linear; animation-fill-mode:forwards;}
#mainVis .mainSlider .mainSlideTit > li.swiper-pagination-bullet {width: inherit; height: 0; border-radius: 0; background-color: transparent; opacity: inherit;}

@keyframes countingBar {
	0% {width: 0;}
	100% {width:100%;}
}

#mainVis {position: relative; height: 100vh; overflow: hidden; margin: -130px 0px 0; background-color: #000113; background-repeat: no-repeat; background-size: cover;}
#mainVis .mainVisTit {position: absolute; left: 120px; top: 50%; transform: translate(0, -50%); width: 90%; text-align: left; z-index: 10;}
#mainVis .mainVisTit span.basicSpan {display: block; font-size: 5.5vw; line-height: 1; color: #fff;} /*6.5rem*/
#mainVis .mainVisTit span.basicSpan:nth-child(2) {padding-bottom: 25px;}
#mainVis .mainVisTit p.basicP {font-size: 1.5vw; letter-spacing: -0.4px; line-height: 1.3; color: #fff;} /*2.15rem*/
#mainVis .mainVisTit span.mainSpan {font-size: 1.75vw; font-style: italic; color: #fff; font-weight: 700; display: block; padding-bottom: 10px;}
#mainVis .mainVisTit span.mainSpan02 {font-size: 4.7vw;}
#mainVis .mainVisTit .mainCol {background-image: linear-gradient(-45deg, #0076e4, #0076e4, #fff, #0076e4, #0076e4, #0076e4, #0076e4); background-clip: text; -webkit-background-clip: text; color: transparent;}
#mainVis .mainVisTit .mainCol2 {position: relative;}
#mainVis .mainVisTit .mainCol2:before {content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 45%; background-color:rgba(56, 148, 234, 0.7); z-index: -1;}
/*#mainVis .mainVisTit .point {position: relative; display: inline-block;}*/
/*#mainVis .mainVisTit .point:after {content: ""; display: block; position: absolute; top: -14px; left: 50%; width: .8vw; min-width:14px; height: .8vw; min-height:14px; background-color: #fff; border-radius: 50%; transform: translateX(-50%);}*/
#mainVis .mainVisTit p.mainP {color: #fff; font-size: 1.4vw; font-weight: 300;	letter-spacing: -0.45px; line-height: 1.4; padding: 10px 0;}
#mainVis .mainVisTit p.mainP02 {font-weight: 700 !important; font-size: 1.6vw !important;}

/* 메인이미지 타이틀 자간간격 */
.letterSBasic {letter-spacing: 0 !important;}
.letterS12 {letter-spacing: -1.2px !important;}

/* 서비스 */
#intro {position: relative; padding-bottom: 80px; overflow: hidden;}
#intro .svgWrap {position: absolute; overflow: hidden; left: 0; right: 0; top: 0; height: 940px; z-index: 20;}
#intro .svgWrap .svgCont {position: absolute; left: 0; right: 0; top: 0; height: 940px; z-index: 20;}

#intro .plm,
#intro .si {position: relative; z-index: 10; float: left; width: 50%; padding-top: 360px; padding-bottom: 360px; text-align: center;}
#intro .plm {padding-left: 32px; background: url("../images/main/plm_bg.png"); background-size: cover;}
#intro .si {padding-right: 32px; background: url("../images/main/si_bg.png"); background-size: cover;}
#intro .plm:hover .frame {animation: frameHover 0.5s forwards;}
#intro .si:hover .frame {animation: frameHover02 0.5s forwards;}
#intro .plm:hover .frame:after,
#intro .si:hover .frame:after {content: "";	display: block;	position: absolute;	top: 0;	width: 100%; height: 100%; box-shadow: 8px 10px 10px rgba(0, 0, 0, 0.22);}
#intro .plm:before,
#intro .si:before {content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.5);}

@keyframes scales {
	0% {
		width: 100vw;
		height: 940px;
	}
	100% {
		width: 35000vw;
		height: 329000px;
		margin-left: -40%;
	}
}
@keyframes frame {
	0% {
		border: 0;
		opacity: 0.5;
	}
	100% {
		border: 64px solid #fff;
		border-right-width: 32px;
		opacity: 1;
	}
}
@keyframes frame02 {
	0% {
		border: 0;
		opacity: 0.5;
	}
	100% {
		border: 64px solid #fff;
		border-left-width: 32px;
		opacity: 1;
	}
}
@keyframes frameHover {
	0% {
		border: 64px solid #fff;
		border-right-width: 32px;
		opacity: 1;
	}
	100% {
		border: 32px solid #fff;
		border-right-width: 16px;
		opacity: 1;
	}
}
@keyframes frameHover02 {
	0% {
		border: 64px solid #fff;
		border-left-width: 32px;
		opacity: 1;
	}
	100% {
		border: 32px solid #fff;
		border-left-width: 16px;
		opacity: 1;
	}
}

#intro.frameWrap .plm .frame {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 20;}
#intro.frameWrap .si .frame {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 20;}
#intro .fadeUpWrap {opacity: 0; position: relative; z-index: 21; width: calc(100% - 90px); margin: 0 auto;}

.fadeUpSmall {
	opacity: 0;
	animation: fadeUpSmall 0.5s ease forwards;
}
@keyframes fadeUpSmall {
	0% {
		transform: translate3d(0, 50px, 0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

#intro .tit {position: relative;  display: inline-block; z-index: 20; font-size: 5rem; font-weight: 700; color: #fff; padding: 0 10px 7px; border-bottom: 2px solid #fff;}
#intro .txt {position: relative; z-index: 20; padding: 40px 20px 0; font-size: 1.38rem; font-weight: 300; color: #fff; margin: 0 auto 40px; height: 150px; line-height: 38px;}
#intro .more {background: rgba(0, 0, 0, 0.1); border: 1px solid #fff; color: #fff;}

#intro .tit {opacity: 0; transform: translateY(50px); transition: all 1s 0.25s ease;}
#intro .txt {opacity: 0; transform: translateY(50px); transition: all 1s 0.5s ease;}
#intro.show .tit,
#intro.show .txt {opacity: 1; transform: translateY(0);}


/* plm&si 소개 */
#business {padding-bottom: 170px;}
#business .lgInner {border-top: 1px solid #000; padding-top: 60px;}
#business .tab {position: relative;}
#business .tab .tabList {display: flex; justify-content: flex-start; align-items: center; padding-bottom: 12px; letter-spacing: -1.5px;}
#business .tab .tabList li {position: relative; margin: 0 50px;}
#business .tab .tabList li.on a,
#business .tab .tabList li a:hover {color: #000;}
#business .tab .tabList li:first-child {margin-left: 0;}
#business .tab .tabList li:first-child:after {content: ""; display: block; position: absolute; top: 50%; right: -50px; width: 10px; height: 10px; background-color: #d7d7d7; border-radius: 50%; transform: translateY(-50%);}
#business .tab .tabList li a {font-size: 4.5rem; font-weight: 800; color: #c5c5c5;}

#business .tab .tabList,
#business .tab .titInfo {opacity: 0; transform: translateY(50px); transition: all 1s 0.25s ease;}
#business.show .tab .tabList,
#business.show .tab .titInfo {opacity: 1; transform: translateY(0);}

#business .tab .tabCont .accorBox li.aos-animate.active .activeBox .logo {opacity: 0; transform: translateX(-50px); transition: all 1s .7s ease;}
#business.show .tab .tabCont .accorBox li.aos-animate.active .activeBox .logo {opacity: 1; transform: translateX(0);}
#business.show .tab .tabCont .accorBox li.aos-animate.active .activeBox .logo h4 {font-size: 2.3rem;}
#business .tab .tabCont .accorBox li.aos-animate.active .activeBox p {opacity: 0; transform: translateY(50px); transition: all 1s .79s ease;}
#business.show .tab .tabCont .accorBox li.aos-animate.active .activeBox p {opacity: 1; transform: translateY(0);}

#business .tab .tabCont {margin-top: 60px;}
#business .tab .tabCont .contList.on {display: block !important;}
#business .tab .tabCont .accorBox {display: flex; gap: 20px;}
#business .tab .tabCont .accorBox li {width: 10%; height: 360px; transition: width .7s; border-radius: 10px; overflow: hidden; isolation: isolate; transition: all .5s; cursor: pointer;}
#business .tab .tabCont .accorBox li.aos-animate.active {animation: sec2Width_five 1s ease both; box-shadow: 5px 5px 15px rgb(75, 75, 75, .6);}
#business .tab .tabCont .accorBox li.aos-animate .box:after {opacity: 1;}
#business .tab .tabCont .accorBox li.active .box {display: flex; align-items: baseline; justify-content: space-between; padding: 50px 15% 40px 8%;}

#business .tab .tabCont .accorBox li .box:after {content: ""; position: absolute;  display: block; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: opacity .5s .5s ease; background-size: cover; background-position: 50% 50%;}
#business .tab .tabCont .accorBox li.aos-animate.active.catia .box:after {background-image: url("../images/main/plm/catia_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.enovia .box:after {background-image: url("../images/main/plm/enovia_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.simulia .box:after {background-image: url("../images/main/plm/simulia_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.biovia .box:after {background-image: url("../images/main/plm/biovia_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.delmia .box:after {background-image: url("../images/main/plm/delmia_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.dcs .box:after {background-image: url("../images/main/plm/3dcs_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.imspost .box:after {background-image: url("../images/main/plm/imspost_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.qchecker .box:after {background-image: url("../images/main/plm/qchecker_Pc_bg.jpg");}

#business .tab .tabCont .accorBox li.aos-animate.active.si01 .box:after {background-image: url("../images/main/si/si01_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.si02 .box:after {background-image: url("../images/main/si/si02_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.si03 .box:after {background-image: url("../images/main/si/si03_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.si04 .box:after {background-image: url("../images/main/si/si04_Pc_bg.jpg");}
#business .tab .tabCont .accorBox li.aos-animate.active.si05 .box:after {background-image: url("../images/main/si/si05_Pc_bg.jpg");}

@keyframes sec2Width_five {
	0% {
		width: 10%;
	}

	100% {
		width: 60%;
	}
}

#business .tab .tabCont .accorBox .box {position: relative; width: 100%; height: 100%; padding: 40px 0;}
#business .tab .tabCont .accorBox .box .accorBg {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
#business .tab .tabCont .accorBox .box .accorBg img {width: 100%; height: 100%; object-fit: cover;}
#business .tab .tabCont .accorBox .box .accorLogo {position: relative; display: flex; justify-content: center;}
#business .tab .tabCont .accorBox .box .accorLogo .m,
#business .tab .tabCont .accorBox .box .accorLogo .mTxt {display: none;}
#business .tab .tabCont .accorBox .box .accorLogo .pcTxt {display: flex; justify-content: center; writing-mode: sideways-rl; color: #fff; font-size: 1.5rem; font-weight: 600; letter-spacing: 2.5px;}

#business .tab .tabCont .accorBox .box .activeBox {display: none;}
#business .tab .tabCont .accorBox .box .activeBox .logo {opacity: 1; margin-bottom: 25px;}
#business .tab .tabCont .accorBox .box .activeBox p {line-height: 1.6; letter-spacing: -.5px; font-size: 1.12rem; font-weight: 300;}
#business .tab .tabCont .accorBox .enovia .box .activeBox p {text-shadow: 2px 2px 3px #d66d0b;}
#business .tab .tabCont .accorBox .biovia .box .activeBox p {text-shadow: 2px 2px 3px #707e04}
#business .tab .tabCont .accorBox .delmia .box .activeBox p {text-shadow: 2px 2px 3px #c46a00;}

#business .tab .tabCont .accorBox li.aos-animate.active .accorBg,
#business .tab .tabCont .accorBox li.aos-animate.active .accorLogo {display: none;}
#business .tab .tabCont .accorBox li.aos-animate.active .activeBox {display: flex; position: relative; width: 100%; color: #fff; z-index: 1;}

#business .tab .tabCont .si .accorBox li.active .box {padding: 60px 15% 40px 8%;}
/* #business .tab .tabCont .si .accorBox .box .accorLogo {align-items: center; height: 100%;} */

#business .tab .more {position: absolute; top: 8px; right: 0;}


/* 회사 소개 */
#corporation {position: relative; width: 100%; height: 640px;  padding: 160px 0;}
#corporation:before {content: ""; display: block; position: absolute; top:0; width: 100%; height: 100%; background-image: url("../images/main/company_bg.jpg"); background-size: cover; background-position: 50% 50%;}
#corporation .inner {display: flex;	align-items: center; gap: 160px; height: 280px;}
#corporation .smTit,
#corporation .lgTit {color: #fff;}

#corporation .corpTit {flex: none; z-index: 10;}
#corporation .corpList {display: flex; align-items: center; width: 100%; gap: 10px; z-index: 10; opacity: 0; transform: translateY(50px); transition: all 1s 0.25s ease;}
#corporation .corpList .corpCont {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: calc(100% / 4);}
#corporation .corpList .corpCont:after {content: ''; display: inline-block; position: absolute; top:-35px; right: 0; z-index: -1; opacity: 1; background-repeat: no-repeat; background-position: 50% 50%;}
#corporation .corpList .corpCont:nth-child(1):after {width: 76px; height: 73px; right: 38px; background-image: url("../images/main/com_01_icon.png");}
#corporation .corpList .corpCont:nth-child(2):after {width: 58px; height: 74px; background-image: url("../images/main/com_02_icon.png");}
#corporation .corpList .corpCont:nth-child(3):after {width: 75px; height: 70px; right: -10px; background-image: url("../images/main/com_03_icon.png");}
#corporation .corpList .corpCont:nth-child(4):after {width: 78px; height: 75px; background-image: url("../images/main/com_04_icon.png");}

#corporation .corpList .corpCont .top {position: relative; display: flex; align-items: center; color: #fff; padding-bottom: 25px;}
#corporation .corpList .corpCont .top b {font-size: 5.8rem; letter-spacing: -4px; font-weight: 800;}
#corporation .corpList .corpCont .top em {font-size: 1.19rem; padding: 22px 0 0 5px; font-weight: 300;}
#corporation .corpList .corpCont p {font-size: 1.4rem; color: #fff; font-weight: 400;}

#corporation .corpList {opacity: 0; transform: translateY(50px); transition: all 1s .5s ease;}
#corporation.show .corpList {opacity: 1; transform: translateY(0)}


/* 파트너*/
#partner {padding: 150px 0;}
#partner .partnerCont {padding-top: 70px;}
#partner .partnerCont h3 {position: relative; font-size: 2rem; font-weight: 800; color: #000; padding-left: 15px; letter-spacing: -1.5px;}
#partner .partnerCont h3:after {content: ""; display: block; position: absolute; left: 0; top: 3px; width: 5px; height: 25px; background-color: #0076e4;}
#partner .partnerCont ul {position: relative; overflow: hidden; padding-top: 50px;}
#partner .partnerCont ul li {display: flex; padding: 0 0 2rem;}
#partner .partnerCont ul li img {object-fit: contain; display: block; max-width: none; width: 95rem;}

#partner .partnerCont .siPart {margin-top: 75px;}
#partner .partnerCont .plmPart ul li img {animation: flowRolling1 25s linear infinite;}
#partner .partnerCont .siPart ul li img {animation: flowRolling2 25s linear infinite;}
#partner .partnerCont .plmPart ul li:hover img,
#partner .partnerCont .siPart ul li:hover img {animation-play-state: paused;}

@keyframes flowRolling1 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@keyframes flowRolling2 {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0); }
}


/* 문의하기*/
#contact .contactBg {padding: 140px 0; background: #08090b; display: flex; flex-direction: column;align-items: center; gap: 64px; border-top-right-radius: 70px; border-top-left-radius: 70px;}
#contact .contactBg .inner {position: relative;}
#contact .titBox {text-align: center; padding-bottom: 80px;}
#contact .titBox .lgTit,
#contact .titBox .titInfo {color:#fff;}
#contact .titBox .titInfo {padding-top: 18px;}

#contact .contactForm {opacity: 0; transform: translateY(50px); transition: all 1s 0.7s ease;}
#contact.show .contactForm{opacity: 1; transform: translateY(0);}

#contact .contactForm .type {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-bottom: 2rem;}
#contact .contactForm .type p {margin-right: 3rem; color: #fff; font-size: 1.12rem; font-weight: 400;}
#contact .contactForm .type .checkBox {margin-right: 1.8rem;}
#contact .contactForm .type .checkBox input {color: rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
#contact .contactForm .type .checkBox input[type="radio"] {display: none; visibility: hidden;}
#contact .contactForm .type .checkBox label {position: relative; display: inline-flex; padding-left: 1.3rem; padding-right: 1.3rem; line-height: 40px; cursor: pointer; color: #bcbcbc; z-index: 1; font-size: 1rem;}
#contact .contactForm .type .checkBox label:before {content: " "; position: absolute; left: 0; display: block; width: 100%; height: 40px; top: 0; border-radius: 20px; z-index: -1; background: rgb(255 255 255 / 20%);}
#contact .contactForm .type .checkBox label,
#contact .contactForm .type .checkBox label:before {transition: 0.25s all ease;}
#contact .contactForm .type .checkBox input[type=radio]:checked ~ label {color: #FFF; font-weight: 500;}
#contact .contactForm .type .checkBox input[type=radio]:checked ~ label:before {top: 0; width: 100%; background: #0076e4;}

#contact .contactForm .form {position: relative; float: left; width: 47%; margin-bottom: 20px; margin-right: 6%;}
#contact .contactForm .form.even {margin-right: 0px;}
#contact .contactForm .form input {border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#contact .contactForm .form input[type="text"],
#contact .contactForm .message textarea {color: #fff; font-size: 1.12rem; font-weight: 400; height: 50px; padding: 12px 20px 12px 20px; padding-left: 0; width: 100%; border-radius: 0px; margin-bottom: 0px; background-color: transparent;}
#contact .contactForm .form input::placeholder,
#contact .contactForm .message textarea::placeholder {color: #fff;}
#contact .contactForm .form:after {clear: both; content: " "; display: table;}

#contact .contactForm .form.message {float: left; width: 100%; margin-top: 60px; margin-right: 0;}
#contact .contactForm .message textarea {border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; resize: none; height: 50px; box-sizing: border-box; padding: 14px 20px 6px 20px; padding-left: 0; margin-bottom: 40px; font-family:'Pretendard', sans-serif;}
#contact .contactForm .message textarea:after {position: absolute; content: ""; height: 2px; left: 0px; top: 20px; width: 100%; background-color: #000; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
#contact .contactForm .message textarea::-webkit-scrollbar {width: 10px; height: 5px; background-color: #2b2b2b; border-radius: 10px;}
#contact .contactForm .message textarea::-webkit-scrollbar-thumb {cursor: pointer; background: #0076e4; border-radius: 10px;}

#contact .contactForm .form.formTxt {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; height: auto; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 15px;}
#contact .contactForm .form.formTxt span {display: inline-block; font-size: 1.12rem; color: #949494; opacity: .8; height: 35px;	line-height: 50px;}
#contact .contactForm .form.formTxt ul {display: flex; padding-top: 14px;}
#contact .contactForm .form.formTxt ul li {display: flex; flex-wrap: wrap; padding-right: 20px; gap: 5px 5px;}
#contact .contactForm .form.formTxt ul li label {color: #fff; padding-left: 5px; font-weight: 300; font-size: 1rem; opacity: .7;}
#contact .contactForm .form.formTxt ul li::before,
#contact .contactForm .form.attachFile ul li::before{display: none;}

#contact .contactForm .form.attachFile {display: flex; align-items: center; flex-wrap: wrap; gap: 15px 0; margin-top: 20px; margin-bottom: 0;}
#contact .contactForm .form.attachFile > span {display: inline-block;	font-size: 1.12rem;	color: #949494;	opacity: .8; padding-bottom: 5px;}
#contact .contactForm .form.attachFile > div {width: 100%;}
#contact .contactForm .form.attachFile .fileAttach .fileTop .f_r {color: #fff; opacity: .5; font-size: 14px;}
#contact .contactForm .form.attachFile .fileAttach .fileMain {margin-top: 12px;	border: none;}
#contact .contactForm .form.attachFile .fileAttach .fileMain .fileHeader {background: #393a3c; border-radius: 10px 10px 0 0;}
#contact .contactForm .form.attachFile .fileAttach .fileMain .fileHeader .fileLi span {color: #fff; opacity: .6;}
#contact .contactForm .form.attachFile .fileAttach .fileList {background-color: #c2c2c2; border-top: 1px solid rgba(255, 255, 255, 0.4); height: 45px; padding: 8px 0; border-radius: 0 0 10px 10px;}
#contact .contactForm .form.attachFile .fileAttach .fileMain .none {color: #393939;}

#contact .agree input[type="checkbox"]{display: none;}
#contact .agree input[type="checkbox"] ~ label {position: relative; color: #fff; font-size: 1.09rem; font-weight: 400; padding-left: 55px; line-height: 30px;}
#contact .agree input[type="checkbox"] ~ label:before {display: block; content: ''; clear: both; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid #fff; background-color: transparent; }
#contact .agree input[id="agree3"]:checked ~ label::after{content:'✔'; font-size: 1.09rem; width: 30px; height: 30px; text-align: center; color: #fff; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

#contact .more {position: absolute; bottom: 10px; right: 0;}
#contact .more:after {width: 18px; height: 17px; background: url("../images/common/contact_more_icon.png") no-repeat; background-size: 91%; top: 3px;}





/* 반응형*/
@media all and (max-width:1780px){

	/* 문의하기*/
	#contact .more {right: 2rem;}

}

@media all and (max-width:1680px){

	/* 회사 소개 */
	#corporation .inner {gap: 50px;}
	#corporation .corpList .corpCont .top b {font-size: 5rem;}
	#corporation .corpList .corpCont .top em {font-size: 1.12rem;}
	#corporation .corpList .corpCont p {font-size: 1.25rem;}

}

@media all and (max-width:1320px){

	/* plm&si 소개 */
	#business {padding-bottom: 130px;}
	#business .tab .tabCont {margin-top: 30px;}
	#business .tab .tabCont .accorBox li {height: 320px;}
	#business .tab .tabCont .accorBox li.active .box {padding: 40px 8%;}
	#business .tab .tabCont .accorBox .box .activeBox p {font-size: 1.05rem}

}

@media all and (max-width:1240px){

	/* 메인 이미지*/
	#mainVis .mainVisTit {left: 2rem;}
	#mainVis .mainVisTit span.basicSpan,
	#mainVis .mainVisTit span.mainSpan02 {font-size: 5.2rem;}
	#mainVis .mainVisTit p.basicP {font-size: 1.6rem; font-weight: 600; line-height: 1.25;}
	#mainVis .mainVisTit span.mainSpan {font-size: 1.6rem;}
	#mainVis .mainVisTit p.mainP {font-size: 1.4rem;}
	#mainVis .mainVisTit p.mainP02 {font-size: 1.6rem !important;}

	#mainVis .mainSlider .mainSlideTit {padding: 0 2rem; gap: 1rem; bottom: 7rem;}
	#mainVis .mainSlider .mainSlideTit > li {font-size: 1.05rem;}

	/* 서비스 */
	#intro {padding-bottom: 50px;}
	#intro .plm, #intro .si {padding-top: 300px; padding-bottom: 300px;}
	#intro.frameWrap .plm .frame {border: 50px solid #fff !important; border-right-width: 32px !important;}
	#intro.frameWrap .si .frame {border: 50px solid #fff !important; border-left-width: 32px !important;}
	#intro .tit {font-size: 3.7rem;}
	#intro .txt {padding: 35px 20px 0; font-size: 1.11rem; margin: 0 auto 20px; line-height: 31px; height: 175px;}
	#intro .txt br {display: none;}
	#intro .more {position: initial;}

	/* plm&si 소개 */
	#business .tab .tabList li a {font-size: 3.5rem;}
	#business .tab .tabCont .accorBox li.active .box {padding: 40px 8%;}
	#business .tab .tabCont .accorBox .box {padding: 40px 20px;}

	/* 회사 소개 */
	#corporation {height: auto; padding: 120px 0;}
	#corporation .inner {flex-direction: column; gap: 100px; align-items: flex-start; height: 440px;}
	#corporation .corpList {gap: 0;}
	#corporation .corpList .corpCont .top {padding-bottom: 20px;}
	#corporation .corpList .corpCont .top b {font-size: 4.2rem;}
	#corporation .corpList .corpCont p {font-size: 1.2rem;}

	/* 문의하기*/
	#contact .contactForm .type p,
	#contact .contactForm .type .checkBox label,
	#contact .contactForm .form input[type="text"], #contact .contactForm .message textarea,
	#contact .agree input[type="checkbox"] ~ label {font-size: 1rem;}
	#contact .agree input[type="checkbox"] ~ label {padding-left: 45px;}
	#contact .agree input[type="checkbox"] ~ label:before {width: 25px; height: 25px;}
}

@media all and (max-width:1024px){

	/* plm&si 소개 */
	#business .tab .tabCont .accorBox {flex-direction: column;}
	#business .tab .tabCont .accorBox li {width: 100%; height: 140px; cursor: auto;}
	#business .tab .tabCont .accorBox li.aos-animate.active {width: 100%; height: 320px;}

	@keyframes sec2Width_five {
		100% {
			height: 320px;
		}

	}

	#business .tab .tabCont .accorBox li.active .box {padding: 40px 5%;}
	#business .tab .tabCont .accorBox .box {display: flex; align-items: center;}
	#business .tab .tabCont .accorBox .box .accorLogo img {height: 40px; max-width: 170px; object-fit: contain;}
	#business .tab .tabCont .accorBox .box .accorLogo .pc,
	#business .tab .tabCont .accorBox .box .accorLogo .pcTxt {display: none;}
	#business .tab .tabCont .accorBox .box .accorLogo .m {display: block; max-height: 37px;}
	#business .tab .tabCont .accorBox .box .accorLogo .mTxt {display: block; color: #fff; font-size: 1.3rem; font-weight: 500; letter-spacing: 1px;}

	#business .tab .t_a_c .more {margin-top: 70px;}
	#business .tab .more {position: initial; transform: translateY(50px);}
	#business.show .tab .more {transform: translateY(0);}

	/* 회사 소개 */
	#corporation {padding: 90px 0 120px;}
	#corporation .inner {gap: 55px;	height: auto;}
	#corporation.show .corpList {flex-wrap: wrap; gap: 20px 20px;}
	#corporation .corpList .corpCont {width: calc(50% - 10px); height: 185px; border: 1px solid rgb(255 255 255 / 30%); background-color: rgb(0 0 0 / 10%); padding: 10px; border-radius: 20px;}
	#corporation .corpList .corpCont:after {top: 25%; right: 0 !important; left: 50%; width: 60px !important; height: 60px !important; transform: translate(-50%, -50%); border-radius: 50%; background-size: 60%; border: 1px dashed #0076e4;}
	#corporation .corpList .corpCont .top {padding-bottom: 10px; padding-top: 65px;}
	#corporation .corpList .corpCont .top b {font-size: 3.5rem;}
	#corporation .corpList .corpCont .top em {font-size: 1.07rem;}
	#corporation .corpList .corpCont p {font-size: 1.12rem;}

	/* 파트너*/
	#partner {padding: 110px 0;}
	#partner .partnerCont ul li img {width: 90rem;}

}

@media all and (max-width:768px){

	/* 공통 */
	.mainContent {padding-top: 110px;}

	/* 메인 이미지*/
	#mainVis .mainVisTit span.basicSpan,
	#mainVis .mainVisTit span.mainSpan02{font-size: 3rem;}
	#mainVis .mainVisTit span.mainSpan {font-size: 1.3rem;}
	#mainVis .mainVisTit p.basicP,
	#mainVis .mainVisTit p.mainP {font-size: 1.15rem; font-weight: 300; line-height: 1.3; padding: 0 0 10px;}
	#mainVis .mainVisTit p.mainP02 {font-size: 1.22rem !important;}
	#mainVis .mainVisTit p br {display: none;}
	#mainVis .mainVisTit .point:after {min-width: 9px; min-height: 9px;}

	#mainVis .mainSlider .mainSlideTit {gap: 0;}
	#mainVis .mainSlider .mainSlideTit > li .barTit em {display: none;}

	/* 서비스 */
	#intro .plm, #intro .si {width: 100%; padding-top: 150px; padding-bottom: 150px;}
	#intro .plm {padding-left: 0;}
	#intro .si {padding-right: 0;}
	#intro .txt {height: auto;}
	#intro.frameWrap .plm .frame {border: 1.5rem solid #fff !important;}
	#intro.frameWrap .si .frame {border: 1.5rem solid #fff !important;}

	/* 문의하기*/
	#contact .contactBg {padding: 110px 0; border-top-right-radius: 50px; border-top-left-radius: 50px;}
	#contact .contactForm .type {margin-bottom: 20px;}
	#contact .contactForm .type p {width: 100%; margin-bottom: 15px;}
	#contact .contactForm .type .checkBox {margin-right: 10px; margin-bottom: 10px;}
	#contact .contactForm .type .checkBox label {padding-left: 13px; padding-right: 13px; line-height: 30px; font-size: 0.9rem;}
	#contact .contactForm .type .checkBox label:before {height: 32px; border-radius: 6px;}
	#contact .contactForm .form {width: 100%; margin-right: 0; margin-bottom: 12px;}
	#contact .contactForm .form.message {margin-top: 40px; margin-bottom: 5px;}
	#contact .contactForm .form.formTxt ul li {padding-right: 5px;}
	#contact .contactForm .form.formTxt ul li label {font-size: .97rem;}

	#contact .more {position: initial; margin-top: 20px; opacity: 0; transform: translateY(50px) !important; transition: all 1s 0.9s ease;}
	#contact.show .more {opacity: 1; transform: translateY(0) !important;}

}

@media all and (max-width:640px){

	/* 메인 이미지*/
	#mainVis .mainVisTit span.basicSpan {font-size: 2.8rem;}

	/* 회사 소개 */
	#corporation .corpList .corpCont {width: 100%;}
	#corporation .corpList .corpCont .top b {font-size: 2.8rem;}
	#corporation .corpList .corpCont p {font-size: 1.07rem;}
	#corporation .corpList .corpCont .top em {font-size: 1rem;}

	/* 파트너*/
	#partner {padding: 80px 0;}
	#partner .partnerCont {padding-top: 60px;}
	#partner .partnerCont h3 {font-size: 1.7rem;}
	#partner .partnerCont ul {padding-top: 35px;}
	#partner .partnerCont ul li img {width: 80rem;}
	#partner .partnerCont .siPart {margin-top: 40px;}

}