@charset "utf-8";
html, body {word-break: keep-all;font-size:17px;}

/* Business Area  */
#page3 .cts {position:relative; margin-top:40px;}
#page3 .cts ul.fullArea {position:relative; overflow: hidden;}
#page3 .cts ul.fullArea li {width:33.3%; padding-bottom:23.3%; height:0;  float:left; position:relative; cursor:pointer;}
#page3 .cts ul.fullArea li:nth-child(3n) {width:33.4%;}
#page3 .cts ul.fullArea li h3{font-family:'Sen', 'sans-serif;'; font-size:2rem; font-weight:bold; color:#fff;  }
#page3 .cts ul.fullArea li p { font-family: 'Noto Sans Korean', sans-serif;  color:#fff ; font-weight: 200; margin-top:5px; font-size:1.2rem; }
#page3 .cts ul.fullArea li p:last-child {margin-top:22px; font-size:0.95rem;}
#page3 .cts ul.fullArea li .black {  background-color: rgba( 0, 0, 0, 0.5 ); position:absolute; left:0; top:0; width:100%; height:100%; }
#page3 .cts ul.fullArea li .msg {position:absolute; top:22%; left:8%; width:100%; height:100%;}

#page3 .cts ul.fullArea li:hover {background-size:130% 130% !important; -webkit-transition:all 0.3s; transition:all 0.3s; }
#page3 .cts ul.fullArea li:hover .black { background-color: rgba( 0, 0, 0, 0.8 ); -webkit-transition:all 0.3s; transition:all 0.3s;}

/* Portfolio  */
#page4 .wrap1200{max-width:1100px;}
#page4 .head { text-align:right; margin:0 auto; }
#page4 .head a {
    font-family: 'Sen', sans-serif;position:relative;overflow:hidden;display:inline-block;cursor:pointer;margin-right:22px;
}
#page4 .head a:after {
    content:'';height:2px;background:#8b60fe;position:absolute;margin:auto;width:0;top:0;bottom:0;left:0;right:0;transition:all 500ms;
}

#page4 .head a.active {font-weight:bold;}
#page4 .head a:hover:after,
#page4 .head a.active:after {width:100%;}
#page4 .head a:nth-child(1) {animation:section-04-down 1000ms both 1000ms;}
#page4 .head a:nth-child(2) {animation:section-04-down 1000ms both 1100ms;}
#page4 .head a:nth-child(3) {animation:section-04-down 1000ms both 1200ms;}
#page4 .head a:nth-child(4) {animation:section-04-down 1000ms both 1300ms;}
#page4 .head a:nth-child(5) {animation:section-04-down 1000ms both 1400ms;}
#page4 .head a:nth-child(6) {animation:section-04-down 1000ms both 1500ms;}
#page4 .head a:nth-child(7) {animation:section-04-down 1000ms both 1600ms;}
#page4 .head a:nth-child(8) {animation:section-04-down 1000ms both 1700ms;}

#page4 .section{background:#f3f4f5; overflow:hidden;}
#page4 .section .wrap1200{max-width:1100px; width:90%; background:#fff; box-shadow:14px 0 27px rgba(0,0,0,0.3); margin:100px auto; padding:98px 80px; }
#page4 .section .wrap1200 ul{}
#page4 .section .wrap1200 ul li{border-bottom:1px solid #ddd; padding:45px 0; overflow:hidden;}
#page4 .section .wrap1200 .txtx{width:40%; float:left; margin-top: 18px;}
#page4 .section .wrap1200 .txtx h4{font-size:34px; font-weight:700;  line-height:1.2; position:relative; word-break:break-all; }
#page4 .section .wrap1200 .txtx h4:before{content: '';  width:45px; border-top:4px solid #000;  position:absolute; top:-18px; left:0;}
#page4 .section .wrap1200 .txtx table{margin-top: 50px;}
#page4 .section .wrap1200 .txtx table caption{display:none;}
#page4 .section .wrap1200 .txtx table th{padding:6px 2px; position:relative; letter-spacing:0.1rem;}
#page4 .section .wrap1200 .txtx table th span{position:relative;}
#page4 .section .wrap1200 .txtx table th:before{ content: ''; width: 58px;  height:6px; background:#d9c2ff;  position:absolute; top: 17px;}
#page4 .section .wrap1200 .txtx table td{padding-left:18px; word-break: break-all;}
#page4 .section .wrap1200 .innerImg{background-size:100% auto !important; float:right; width: 530px; height: 400px; box-shadow: -5px 5px 12px rgba(0,0,0,0.2);}
#page4 .btn-list-return,
#page4 .btn-view-detail {cursor:pointer; user-select:none;}
#page4 #portfolio-view .view_p{display:flex; flex-wrap:wrap; justify-content:space-between;border-bottom:1px solid #000;}
#page4 #portfolio-view h4{font-size:34px; font-weight:700;  line-height:1.2; position:relative; word-break:break-all; }
#page4 #portfolio-view h4:before{content: '';  width:45px; border-top:4px solid #000;  position:absolute; top:-18px; left:0;}
#page4 #portfolio-view .txtx{ float:unset; margin-top:0; margin-bottom:50px;} 
#page4 #portfolio-view table{margin-top:0; } 

/**/
#portfolio {}
#portfolio div {opacity:0; position:relative; left:20px;}
#portfolio .website .innerImg{ border-radius:4px; }
#portfolio-view .btn-list-return{background:#000;color:#fff;}
#portfolio-view .content{margin-top:80px;}
#portfolio-view .content p img{width:100%; height:auto;}



/* company Info */
#page5 img {max-width:100%;}
#page5 h3 { font-size: 2.8em; letter-spacing: 2px; font-weight: bold; font-family:'Sen', 'sans-serif';  }
#page5 .ani1 { text-align: center; padding-top:70px; padding-bottom:150px; }
#page5 .ani1 .mainImg {overflow: hidden;}
#page5 .ani1 .mainImg img {transform: scale(1.2);}
#page5 .ani1 .mainImg.on img {transform: scale(1.0);  -webkit-transition:all 1.2s 0.2s; transition:all 1.2s 0.2s; }
#page5 .ani1 .wrap {position: relative; overflow: hidden;}
#page5 .ani1 .msg { color:#171a1c; font-family: 'Noto Sans Korean', sans-serif; margin-top:125px; margin-right:10%; text-align:right; }
#page5 .ani1 .msg h3 {opacity:0 ; position: relative; top:30px; }
#page5 .ani1 .msg p {margin-top:40px;  line-height:33px; max-width:750px; width:80%; float:right; opacity:0 ; position: relative; top:30px; }

#page5 .ani1.active .msg h3 {opacity: 1; top:0; -webkit-transition:all 0.3s 0.1s; transition:all 0.3s 0.1s;}
#page5 .ani1.active .msg p { opacity: 1; top:0; -webkit-transition:all 0.3s 0.2s; transition:all 0.3s 0.2s;}

#page5 .ani2 {background:#ebebeb; padding-top:70px; padding-bottom:150px; clear: both; }
#page5 .ani2 h3 {text-align:center;}
#page5 .ani2 ul {position: relative; overflow: hidden; width:fit-content; margin:0 auto; margin-top:90px; }
#page5 .ani2 ul li {width:300px; height:450px; float:left; margin-left:10px; text-align: center; color:#171a1c;  margin-bottom:10px; opacity: 0; position: relative; left:250px; }
#page5 .ani2 ul li:first-child {margin-left:0;}
#page5 .ani2 ul li:nth-child(1) { background:url('../../images/contents/com_icon1.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(2) { background:url('../../images/contents/com_icon2.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(3) { background:url('../../images/contents/com_icon3.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(4) { background:url('../../images/contents/com_icon4.png') center 255px no-repeat #fff;  }

#page5 .ani2.active ul li:nth-child(1) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.4s; transition:all 0.4s 0.4s; }
#page5 .ani2.active ul li:nth-child(2) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.6s; transition:all 0.4s 0.6s; }
#page5 .ani2.active ul li:nth-child(3) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.8s; transition:all 0.4s 0.8s; }
#page5 .ani2.active ul li:nth-child(4) { opacity: 1; left: 0;   -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s; }


#page5 .ani2 ul li h4 {margin-top:100px; font-family:'Sen', 'sans-serif';  ; font-weight: bold; font-size:1.3em;}
#page5 .ani2 ul li p {margin-top:30px;}

#page5 .ani3 { padding-top:120px; padding-bottom:120px; position: relative; overflow: hidden; }
#page5 .ani3 .bg {height:700px; width:95%; max-width:1865px; float:right; background:url('../../images/contents/company_bg02.jpg') left center no-repeat}
#page5 .ani3 .bg h3 {margin-top:155px; margin-left:222px; font-weight: 800; color:#fff; opacity: 0;}
#page5 .ani3 .bg .inner {max-width:1160px; margin-top:95px; position: relative; overflow: hidden; margin-left:222px; opacity: 0;}
#page5 .ani3 .bg .inner .line {border-top:2px solid #fff; width:10%; float:left; margin-top:14px;}
#page5 .ani3 table {width:86%; float:left; margin-left:4%;}
#page5 .ani3 table caption {display: none;}
#page5 .ani3 table th , #page5 .ani3 table td {color:#fff;}
#page5 .ani3 table th {font-weight:500; height:32px;}
#page5 .ani3 table td {font-weight:100;}

#page5 .ani3.active .bg h3 { opacity: 1; -webkit-transition:all 0.4s 0.9s; transition:all 0.4s 0.9s; }
#page5 .ani3.active .bg .inner {opacity: 1; -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s;}


#page5 .ani4 { padding-top:120px; padding-bottom:170px; position: relative; overflow: hidden; }
#page5 .ani4 .bg {background:#ebebeb; width:95%; max-width:1865px; float:left;  height:700px; }
#page5 .ani4 .bg h3{margin-left:10%; margin-top:105px;}
#page5 .ani4 .bg ul { margin-left:10%; position: relative; overflow: hidden; margin-top:60px; width:80%; }
#page5 .ani4 .bg ul li {min-width:255px; padding-bottom:30px; width:33%;  float:left; box-sizing: border-box;     border-width:0 0 0 0px; border-style: solid;-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5637ca), to( #3d4ed1 )) 1 100%;-webkit-border-image: -webkit-linear-gradient(#5637ca, #3d4ed1) 1 100%;-moz-border-image: -moz-linear-gradient(#5637ca,#3d4ed1) 1 100%;-o-border-image: -o-linear-gradient(#5637ca, #3d4ed1) 1 100%;border-image: linear-gradient(to bottom, #5637ca, #3d4ed1) 1 100%; }
#page5 .ani4 .bg ul li div {margin-left:50px; color:#171a1c; margin-top:25px; opacity: 0; position: relative; top:20px;}
#page5 .ani4 .bg ul li div:first-child {margin-top:-15px;}
#page5 .ani4 .bg ul li div p {font-weight: bold; font-size:2.2rem; font-family: 'Sen', 'sans-serif';}
#page5 .ani4 .bg ul li div span{font-size:0.9rem; font-weight: 100;}



#page5 .ani4.active .bg ul li:nth-child(1) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 0.7s; transition:all 0.4s 0.7s;  }
#page5 .ani4.active .bg ul li:nth-child(2) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s;  }
#page5 .ani4.active .bg ul li:nth-child(3) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 1.2s; transition:all 0.4s 1.2s;}

#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.3s; transition:all 0.4s 0.7s;  }
#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.4s; transition:all 0.4s 0.8s;  }
#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(3) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.5s; transition:all 0.4s 0.9s;  }

#page5 .ani4.active .bg ul li:nth-child(2) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.6s; transition:all 0.4s 1.0s;  }
#page5 .ani4.active .bg ul li:nth-child(2) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.7s; transition:all 0.4s 1.1s;  }

#page5 .ani4.active .bg ul li:nth-child(3) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.8s; transition:all 0.4s 1.2s;  }
#page5 .ani4.active .bg ul li:nth-child(3) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.9s; transition:all 0.4s 1.3s;  }



@keyframes section-04-down {
    0% { opacity:0; transform:translateY(-20px); }
    100% { opacity:1; transform:none; }
}





@media screen and (max-width:1325px) {
    #page4 .section .wrap1200{padding:60px 80px;}
    #page5 .ani1{padding-top:40px; padding-bottom:80px;}
    #page5 .ani1 .msg {margin-top:60px;}
    #page5 .ani2{padding-bottom:80px;}
    #page5 .ani2 ul li:nth-child(3) {margin-left:0; clear: both; }
    #page5 .ani3{padding-top:90px; padding-bottom:20px;}
    #page5 .ani4{padding-top:70px; padding-bottom:90px;}
    #page5 .ani4 .bg h3{margin-top:80px;}
    

}

@media screen and (max-width:1170px) {
    #page4 .wrap1200{max-width:100%;}
    #page4 .section .wrap1200 .innerImg{width:55%; height:315px;}
    #page5 .ani3 .bg .inner{max-width:100%;}
    
}

@media screen and (max-width:1100px) {
    .container-section {padding:75px 0 0 0;}
    #page4 .head{text-align:center; margin:40px 0 20px 0;}
    #page4 .head a{margin-right:0; width:80%; border:1px solid #5738ca; border-radius:7px; padding:10px 0; margin:4px 0; font-weight:bold;}
    #page4 .head a:after{display:none;}
    #page4 .head a.active {color:#fff; background:#5738ca; text-transform:uppercase;}
    

    #page5 .ani1 .msg {margin-right: 5%;}
    #page5 .ani2 ul{margin-top:40px;}
    #page5 .ani4 .bg h3 {margin-left:5%;}
    #page5 .ani4 .bg ul {width:95%; margin-left:5%; margin-top:6%;}
    

}


@media screen and (max-width:1085px) {

    #page3 .cts ul.fullArea li {width:50%; padding-bottom:34.3%}
    #page3 .cts ul.fullArea li:nth-child(3n) { width:50%;}
}


@media screen and (max-width:900px) {
    #page4 .section .wrap1200{padding:60px 30px;}
    #page4 .section .wrap1200 .txtx{width:100%;}
    #page4 .section .wrap1200 .innerImg{ width: 100%;  height:0; padding-bottom:75%;  margin-top: 20px;}
}
   

@media screen and (max-width:870px) {

    #page5 .ani3 .bg h3 {margin-left:80px;}
    #page5 .ani3 .bg .inner {margin-left:80px;}

    #page5 .ani4 .bg {height: auto; padding-bottom:30px;}
    #page5 .ani4 .bg ul li {width:100%; margin:0; border-left:0 solid #5637ca;  border-image: none; }

}


@media screen and (max-width:767px) {
    #page5 h3{font-size:2.2em;}
    #page5 .ani1 .msg p{max-width:100%;}
    #page5 .ani4 .bg ul li div:first-child {margin-top:-8px;}
    
}

@media screen and (max-width:665px) {
    #page3 .cts {margin-top:20px;}
    #page4 .head {margin:20px 0 20px 0;}
    #page4 .head a{font-size:14px; padding:7px 0;}
    #page4 .section .wrap1200 {padding:20px 30px; margin: 60px auto;}
    #page4 .section .wrap1200 ul li{padding:35px 0;}
    #page4 .section .wrap1200 .txtx h4{font-size:26px;}
    #page4 .section .wrap1200 .txtx h4:before{content:''; width:30px; height:2px; border-top:2px solid #000; position:absolute; top:-12px; left:0;}
    #page4 .section .wrap1200 .txtx table{margin-top:0;}
	#page4 #portfolio-view h4{font-size:26px;}
	#page4 #portfolio-view h4:before{content:''; width:30px; height:2px; border-top:2px solid #000; position:absolute; top:-12px; left:0;}
	#portfolio-view .content{margin-top:60px;}
    #page5 h3{font-size:27px;}
    #page5 .ani1{padding-bottom:40px;}
    #page5 .ani1.active .msg{margin-right:0; margin-top: 30px;}
    #page5 .ani1.active .msg h3{line-height:1;}
    #page5 .ani1.active .msg h3, #page5 .ani1.active .msg p{text-align:center; float:inherit; margin:0 auto;}
    #page5 .ani1.active .msg p{line-height:1.5; font-size:16px; padding-top:10px;}
    #page5 .ani2{padding-bottom:40px; padding-top:40px;}
    #page5 .ani2 ul li {clear: both; margin-left:0; height:340px;}
    #page5 .ani2 ul li h4{margin-top:30px; color:#5738ca;}
    #page5 .ani2 ul li:nth-child(1){background: url(../../images/contents/com_icon1.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(2){background: url(../../images/contents/com_icon2.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(3){background: url(../../images/contents/com_icon3.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(4){background: url(../../images/contents/com_icon4.png) center 166px no-repeat #fff;}
    #page5 .ani3 .bg {width:100%;}
    #page5 .ani3 .bg h3 {margin-left:3%;}
    #page5 .ani3 .bg .inner {margin-left:3%;}
    #page5 .ani3 .bg .inner .line {display:none;}
    #page5 .ani3 table {width:98%; margin-left:0%;}
    #page5 .ani4 {padding:40px;}
    #page5 .ani4 .bg ul li div p{font-size:1.5rem;}
}

@media screen and (max-width:645px) {
    #page3 .cts ul.fullArea li {width:100%; padding-bottom:65.3%}
    #page3 .cts ul.fullArea li:nth-child(3n) {width:100%;}
    #page3 .cts ul.fullArea li h3{font-size:1.5rem;}
    #page4 .section .wrap1200 .txtx h4{font-size:20px; font-weight:bold;}
	#page4 #portfolio-view .view_p{margin-top:35px;}
	#page4 #portfolio-view h4{font-size:20px; font-weight:bold;}
    #page5 .ani1 {padding-top:20px;}
    #page5 .ani3{padding-top:0;}
    #page5 .ani3 .bg{height:100%; max-width:100%; }
    #page5 .ani3 .bg .inner{margin:3rem 0 5rem 3%;}
    #page5 .ani3 .bg h3 {margin-top:5rem;}
    #page5 .ani3 table tbody tr{font-size:16px;}
    #page5 .ani3 table th{padding-right:10px;}
    #page5 .ani4{padding-top:0;}
   
    
    

}