#service {width:100%; margin:0 auto; overflow:hidden;}
#service p.txtP { padding-bottom:20px; font-size:20px;  line-height:35px; }
#service .sub_txt01 { padding:0 10px;}
#service div.icoBox {overflow:hidden; margin:40px 0 60px 0;}
#service section {width:100%; padding:50px 35px 40px 35px; text-align:center; margin:1% 1%; box-sizing:border-box; min-height:320px; float:left; }
#service section.ico1 {background:url("../img/img1.png")no-repeat center 40px;}
#service section.ico2 {background:url("../img/img2.png")no-repeat center 40px;}
#service section.ico3 {background:url("../img/img3.png")no-repeat center 40px;}
#service section.ico4 {background:url("../img/img4.png")no-repeat center 40px;}
#service section.ico5 {background:url("../img/img5.png")no-repeat center 40px;}
#service section.ico6 {background:url("../img/img6.png")no-repeat center 40px;}
#service div.tit {font-size:20px; padding-bottom:20px;}
#service div.txt {font-size:14px; }

#contentWrap #content{max-width:100%;}

/* 본사 홈페이지 복사본 */
#contentWrap #content #contentsArea{margin:auto; width:100%;}
#service{position:relative;}
.container_black{background:#000;}
#service.container_black .sub_inner{width:100%;}
.pdbottom_50{padding-bottom:50px;}
.pdbottom_100{padding-bottom:100px;}
.canvasTTL p{
  width:100%;
  position: absolute;
  top: 5.8%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  vertical-align: middle;
  margin: auto;
  letter-spacing: -5px;
  font-size: 8vw;
  font-weight:600;
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  color:transparent;
  -webkit-background-clip:text;
}
.myCanvas canvas{height: 700px; width: 100%;}
.two{
  width:100%;
  margin:auto;
  display:flex;
  position:relative;
  justify-content: center;
}
.two_phone img{width:600px;}
.inphone{
  width:374px;
  height:817px;
  position:absolute;
  top:44px;
  left:50%;
  transform:translateX(-50%);
  border-radius: 46px;
  overflow:hidden;
  opacity: 0.4;
}
.inphone div{height:817px;  position:relative;}
.inphone video{
  height:100%;
  position:absolute;
}
.inphone01 video{
  left:50%;
  transform:translateX(-47%);
}
.inphone02 video{
  left:50%;
  transform:translateX(-46%);
}
.inphone03 video{
  left:50%;
  transform:translateX(-65%);
}
.inphone04 video{
  left:50%;
  transform:translateX(-75%);
}
.outphone{
  width:350px;
  font-size:60px;
  position:absolute;
  top:11%;
  left:50%;
  transform:translateX(-50%);
}
.outphone div{text-align:center;}
.outphone img{width:250px;}
.outphone p{
  font-size:65px;
  font-weight:600;
  color:#fff;
  text-align:center;
  margin-top:30px;
  text-shadow: 0 0 10px #000;
  line-height:1.2;
}
.outphone p:nth-child(3){
  font-size:17px;
  margin-top:25px;
  font-weight:400;
  line-height:1.6;
}
.outphone p:nth-child(4){
  margin-top:0px;
}
.outphone ul{padding:0 44px;}
.outphone ul li{
  font-size:16px;
  color:#fff;
  margin-top:20px;
  margin-left:-5px;
  text-shadow: 0 0 5px #000;
  letter-spacing:-0.05rem;
}
.outphone ul li:first-child{margin-top:45px;}
.landing{
  display:inline-block;
  width:70%;
  font-size:16px;
  color:#fff;
  border:1px solid #fff;
  border-radius:50px;
  padding:13px 30px;
  transition:0.3s ease;
  color:#fff !important;
  font-weight:500;
}
.landing span{float:right;}
.landing:hover{background:#fff;  color:#333 !important;  text-shadow:none;}


/* 탭메뉴 */

.zeroblack_tab{
  position: relative;
  background: #000;
  color: #fff;
  font-size: 20px;
}
.zeroblack_tab h2{
  font-size:3vw;
  text-align:center;
  padding:0 0 70px 0;
}
.grid {
  list-style: none;
  margin-left: -40px;
}
.gc {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 380px;
  padding-left: 40px;
  vertical-align: top;
}
.gc--1-of-3 {width: 50%;}
.gc--2-of-3 {width: 50%;}
.gc--2-of-3 ul li em{font-style:normal; font-size:20px; font-weight:500; line-height:2;}
.gc--2-of-3 ul li em:hover{color:#00ff15;}
ul.nacc li span{display:inline-block;}
.q_card{margin-bottom:15px !important;}
.naccs {position: relative; max-width: 1300px; margin: auto;}
.naccs .menu div {
  padding: 17px 20px 15px 40px;
  margin-bottom: 10px;
  color:#fff;
  background: #222;
  border-radius:0 50px 50px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-weight: 300;
  font-size:18px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.naccs .menu div:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.naccs .menu div span.light {
  height: 10px;
  width: 10px;
  position: absolute;
  top: 24px;
  left: 15px;
  background-color: #00ff15;
  border-radius: 100%;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.naccs .menu div.active span.light {
  background-color: #00ff15;
  left: 0;
  height: 100%;
  width: 5px;
  top: 0;
  border-radius: 0;
}
.naccs .menu div.active {color: #00ff15;  padding: 15px 20px 15px 25px;}
.naccs .menu{text-align:left;}

ul.nacc {
  position: relative;
  height: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
ul.nacc li {
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
ul.nacc li.active {
  transition-delay: .3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}
ul.nacc li p {
  margin: 0;
  color:#fff;
  font-size:19px;
  font-weight:300;
  letter-spacing:0;
  text-align:left;
}

/* 14개 아이콘 슬라이드 */


.sub_rolling{position:relative; width:1300px; margin:auto;}
.sub_rolling_section{display:flex; padding:0 0 0 0;}
.sub_rolling_section .inner{display:flex; width:1300px; padding:50px; margin:auto;}


.sub_rolling_text{width:25%; text-align:left; display:flex; align-items:center;}
.sub_rolling_text span{display:inline-block; font-size:20px; margin-bottom:50px; font-weight:300;}


.sub_rolling_text p{font-family:'S-CoreDream'; font-size:40px; font-weight:600; color:#fff;}
.sub_rolling_text em{color:#00ff15; font-style:normal;}


.sub_rolling_section .wrap { display: flex; overflow: hidden;width:75%; float:right;}
.sub_rolling_section .wrap::before{
  content:'';
  position:absolute;
  width:250px;
  z-index:1;
  top:0px;
  bottom:0px;
  background-image:linear-gradient(to right, #000, #00000000)
}
.sub_rolling_section .wrap::after{
  content:'';
  position:absolute;
  width:250px;
  z-index:1;
  top:0px;
  bottom:0px;
  right:50px;
  background-image:linear-gradient(to left, #000, #00000000)
}
.sub_rolling_section .wrap .rolling-list ul {display: flex;}
.sub_rolling_section .wrap .rolling-list ul li { 
width: 240px; 
height: 240px; 
  box-sizing: border-box; 
  border-radius: 20px; 
  margin: 35px -5px; 
  padding: 46px 31px; 
  display: flex; 
  align-items: center; 
  flex-shrink: 0;
}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(1) {margin-left:-5px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(even) {
margin-top: 270px;
  margin-left:-150px;
  margin-right:-80px;
}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap { 
padding-right: 32px; 
  width: 240px; 
  flex-shrink: 0; 
}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap > img { 
width: 100%;
  border-radius: 30px;
  background:#e9e9e9;
}


.sub_rolling_section .wrap .rolling-list ul li .desc {font-family: 'BMJUA';}
.sub_rolling_section .wrap .rolling-list ul li .desc strong { 
display: block; 
  font-size: 24px; 
  margin-bottom: 24px;
}
.sub_rolling_section .wrap .rolling-list ul li .desc span {font-size: 18px;  line-height: 1.2;}


.rolling-list.original animation: rollingleft1 50s linear infinite;}
.rolling-list.clone {animation: rollingleft2 50s linear infinite;}


@keyframes rollingleft1 {
0% { transform: translateX(0); }
50% { transform: translateX(-100%); }
50.01% { transform: translateX(100%); }
100% { transform: translateX(0); }
}


@keyframes rollingleft2 {
0% { transition: translateX(0); }
100% { transform: translateX(-200%); }
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#contentWrap #content{padding:0px;}
#service {width:100%; }	
#service div.icoBox {padding:0 15px;}
.canvasTTL p{top:4.5%;}
}

@media screen and (max-width:1200px){
.myCanvas canvas{height:500px;}
.canvasTTL p{top:5.5%;}
#service.container_black .sub_inner{padding:0px;}
.zeroblack_tab{padding:0 60px 100px;}
.zeroblack_tab h2{font-size:5vw;}
}

@media (max-width: 768px) {
#service section {width:100%;  margin:2% 0%;}	
.myCanvas canvas{height:400px;}
.canvasTTL p{top:3.6%; font-size:11vw;}
.zeroblack_tab{padding-bottom:320px;}
.zeroblack_tab h2{font-size:6vw;}
.gc--1-of-3{width:100%;}
.gc--2-of-3{width:100%;}
ul.nacc li{transform:none;}
ul.nacc li p{padding-top:30px; padding-bottom:50px;}

.sub_rolling{width:100%;}
.sub_rolling_section .inner{display:block; width:100%;}
.sub_rolling_text{width:100%; justify-content:center;}
.sub_rolling_text p{font-size:30px;}
.sub_rolling_section .wrap{width:100%; float:unset;position:relative;margin:-40px 0 -60px 0;}
.sub_rolling_section .wrap::after{right:0;}
.sub_rolling_section .wrap .rolling-list ul li{margin:0px -35px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(1){margin-left:-35px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(even){margin-top:180px !important;}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap{width:200px;}
}

@media (max-width: 640px) {
.canvasTTL p{top:3.6%;}
.zeroblack_tab{padding-bottom:350px;}
}

@media screen and (max-width: 600px){
.sub_rolling_section{padding:30px 0 0 0;}
.sub_rolling_text span{display:block; text-align:center;margin-bottom:10px; font-size:20px;}
.sub_rolling_section .wrap{margin:0 0 -60px 0;}
.sub_rolling_section .wrap .rolling-list ul li{margin:0px -44px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(1){margin-left:-44px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(even){margin-top:160px !important;}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap{width:180px;}
.sub_rolling_section .wrap::before{width:150px;}
.sub_rolling_section .wrap::after{width:150px;}
}


@media (max-width: 480px) {
.myCanvas canvas{height:300px;}
.two_phone img{width:400px;}
.inphone{width:251px; height:547px; top:28px; border-radius:31px;}
.outphone img{width:130px;}
.outphone p{font-size:40px; margin-top:20px;}
.outphone p:nth-child(3){font-size:14px; margin-top:20px;}
.outphone ul li{font-size:14px; margin-left:25px;}
.outphone ul li:first-child{margin-top:25px;}
.landing{width:60%; font-size:14px; padding:8px 30px;}
.zeroblack_tab h2{font-size:8vw;}
.naccs .menu div{font-size:15px;}
ul.nacc li p{font-size:15px;}
.gc--2-of-3 ul li em{font-size:16px;}

.sub_rolling_text p{font-size:25px;}
.sub_rolling_section .wrap .rolling-list ul li{margin:0px -57px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(1){margin-left:-57px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(even){margin-top:135px !important;}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap{width:160px;}
.sub_rolling_section .wrap::before{width:100px;}
.sub_rolling_section .wrap::after{width:100px;}
}

@media screen and (max-width: 385px){
.sub_rolling_text p{font-size:20px;}
.sub_rolling_text span{font-size:17px;}
.sub_rolling_section .wrap{margin:0 0 -30px 0;}
.sub_rolling_section .wrap .rolling-list ul li{margin:-30px -63px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(1){margin-left:-63px;}
.sub_rolling_section .wrap .rolling-list ul li:nth-child(even){margin-top:94px !important;}
.sub_rolling_section .wrap .rolling-list ul li .image-wrap{width:140px;}
.sub_rolling_section .wrap::before{width:50px;}
.sub_rolling_section .wrap::after{width:50px;}
}

@media screen and (max-width:380px){
.zeroblack_tab{padding-bottom:380px;}
.gc{min-height: 420px;}
}

@media screen and (max-width:340px){
.zeroblack_tab{padding-bottom:420px;}
}

@media (max-width: 320px) {
}