
:root {
  --txt-color: #ff861f;
  }

.alt-logo,
.mobile-logo,
.default-logo {height:40px}


p{margin-bottom:0}
.navbar .container{width:94%;max-width:1680px;padding:0}
section .container{width:94%;max-width:1680px;}

.txt-color{color:var(--txt-color)}

.position-relative{position: relative;}

.text-left{text-align:left !Important}
.text-right{text-align:right !Important}


body{background:#171717}

.navbar .navbar-nav .nav-link {
  font-size: 16px;
  line-height: 20px;
  padding: 10px 0px;
  margin: 0 20px;
  position: relative;
  font-weight: 500;
  opacity: 1;
  word-break: normal;

  color: var(--white);

}


header.sticky.sticky-active [data-header-hover=light] .navbar-nav .nav-link {
  color: #000;
}
header.sticky.sticky-active [data-header-hover=light] .navbar-nav .nav-link:hover {
   color: #ff861f;
}

.navbar .navbar-nav .nav-item:hover .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
  opacity: 1.0;
  color: #ff861f;
  position: relative;
}

@media (min-width: 992px) {
	

	.navbar .navbar-nav .nav-item:hover .nav-link:after, .navbar .navbar-nav .nav-item.active .nav-link:after {
	   content:"";position: absolute;bottom:20px;left:0;background:#ff861f;width:100%;height:1px
	}
}

.navbar .navbar-nav .nav-item .nav-link.active {
  opacity: 1.0;
  color: #ff861f !important;
  position: relative;
}

.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a{font-size:18px !important;}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover {
  color: #ff861f; font-family: "Inter", sans-serif !important

}

.nav-item:last-child .nav-link{margin-right:0}

.slide-swiper {
  width:100%; height: 100vh;
}
.slide-swiper .swiper-wrapper {
  width: 100%; height: 100%; 
}


.slide-swiper .swiper-slide {background-size:cover;background-position:center;height: 100vh;}

.slide1{background:url(/base_2/img/slide/1.jpg)}
.slide2{background:url(/base_2/img/slide/2.jpg)}
.slide3{background:url(/base_2/img/slide/3.jpg)}
.slide4{background:url(/base_2/img/slide/4.jpg)}
.slide5{background:url(/base_2/img/slide/5.jpg)}

.slide__txt {color:#fff;width:92%;position: absolute;bottom:140px;left:50%; transform:translateX(-50%);}
.slide__txt h2{margin-bottom:150px;color:#fff}
.slide__txt p{font-size:18px;line-height:1.5;color:#fff}
.slide__txt p.en{font-size:18px;line-height:1.5;color:#fff}

.swiper-slide.con2 {
  background: #000;
}
.swiper-slide.con3 {
  background: green;
}

.swiper-form-table02-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin :0;
    margin-right: 20px;
}

.slide-swiper .swiper-pagination{margin-bottom:30px;left:50%; transform:translateX(-50%);;width:92%;display:flex;gap:10px}
.slide-swiper .swiper-pagination-bullet {

	position: relative;
    width: 20%;
    height: auto;
    text-align: left;
    border-radius: 0;
    opacity: 1;
	margin:0 !important;
    padding:0 2px !important;
    background-color: transparent;
    em {
        font-size: 0;
        line-height: 28px;
        font-weight: bold;
        letter-spacing: -0.38px;
        color: #111;
    }
    i {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 3px;
        background-color: #383837 ;
      //progress bar 배경
    }
    b {
        position: absolute;
        bottom: 0;
        left:  0;
        z-index: 2;
        width: 0%;
        height: 3px;
        background-color: #e2e2e2;
      //progress bar 채워지는 부분
    }
}
.slide-swiper .swiper-pagination-bullet-active {
    background-color: transparent;
    b {  
        animation-name: countingBar;
        animation-duration: 3s;//autopaly 시간과 맞춰주기
        animation-timing-function: ease-in;
        animation-iteration-count: 1;
        animation-direction: alternate ;
        animation-fill-mode:forwards;
    }
}


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


.main__txt h2{font-size:28px;line-height:1.8}
.main__txt p{font-size:18px;line-height:1.8; color: var(--white);margin-bottom:50px}
.main__txt a{}

.main__tit{text-align:center}
.main__tit p{font-size:20px;color:#fff;margin-bottom:60px !important;font-weight:700}


.client-4col{display:flex; justify-content: center; align-items: center; gap:100px;margin-bottom:50px}
.client-3col{display:flex; justify-content: center; align-items: center; gap:100px;margin-bottom:50px}

.client-4col img, .client-3col img{max-width:300px}

.img-hover{position: relative;overflow:hidden; cursor: pointer;transition: all 0.4s ease;}
.img-hover .bg-color{position: absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,134,31,0.5);z-index:1;opacity: 0;transition: opacity 0.4s ease;}

.img-hover:hover{border-radius:20px;transition: all 0.4s ease;}
.img-hover:hover .bg-color{opacity: 1;transition: opacity 0.4s ease;}


.btn_color{border:1px var(--txt-color) solid;padding:10px 20px;color:var(--txt-color);font-size:14px}
.btn_color:hover{background:var(--txt-color);color:#000;border-radius:50px}

.btn-flex{display:flex;gap:30px;}
.btn_port{border:1px var(--txt-color) solid;color:var(--txt-color);padding:6px 20px;font-size:12px}
.btn_port:hover{border-radius:30px;background:var(--txt-color);color:#000}


.footer__div{display:flex;flex-direction: column; justify-content: space-between;color:#fff;height:100%;}
.footer__div .tit{font-size:18px;margin-top:8px;margin-bottom:50px;font-weight:700}
.footer__div .copy{font-size:14px;}


.form-table td:nth-child(1){display:none}
.form-table input {background:none;border:0;border-bottom:1px #8f8f8f solid;padding-left:5px;margin-bottom:15px;color:#fff}
.form-table textarea{background:#404040;border:0;border-bottom:1px #8f8f8f solid;padding-left:15px;color:#fff}

.form-table textarea::placeholder,
.form-table input::placeholder {
  color: #fff !important; /* 원하는 색상 */
}


ol,
ul {
  padding-left: 0;
}


.studio h2{line-height:1.4}

.studio__txt p{font-size:18px;line-height:1.6;width:95%;margin-bottom:30px}

section.sticky{
	position:fixed;
	top:0px; left:0;width:100%;
	z-index: 8;
	padding-top:30px;padding-bottom:10px; background: linear-gradient( to bottom,  black 0%,  black 30%,  transparent 100%);
	}
.subnavi {
	display:flex;margin:0 !important;
	gap:20px;

  }
.subnavi li {padding:0 !important;}
.subnavi li a{font-size:24px;color:#5a5a5a}
.subnavi li a:hover, .subnavi li a.active{color:var(--white)}

.portfolio__txt h5{font-size:18px;color:#fff;margin-bottom:10px;font-weight:700}
.portfolio__txt p{font-size:14px;color:#fff;line-height:1.6}


@media (max-width: 767px) {

	.studio h2{font-size:24px !important}
	.subnavi {display:flex;margin:0 !important;width:100% !important;	gap:20px;  }
    .subnavi li{}
	.subnavi li a{display:block ;font-size:18px !important;color:#5a5a5a;}

	.slide__txt {color:#fff;width:92%;position: absolute;bottom:100px;left:50%; transform:translateX(-50%);}
	.slide__txt h2{font-size:38px;margin-bottom:50px;color:#fff}
	.slide__txt p{font-size:15px;line-height:1.5;color:#fff}
	.slide__txt p.en{font-size:15px;line-height:1.5;color:#fff}

	.main__txt h2{font-size:18px;line-height:1.8}
	.main__txt p{font-size:14px;line-height:1.8; color: var(--white);margin-bottom:50px}


	.btn-flex{display:flex;flex-direction: column;gap:5px;justify-content: center;}
	.btn_port{width:70%;font-size:12px;text-align:center;margin:0 auto}


	.btn_port{border:1px var(--txt-color) solid;color:var(--txt-color);padding:6px 20px;font-size:12px}
	.btn_port:hover{border-radius:30px;background:var(--txt-color);color:#000}

	.form-table td:nth-child(1){display:none}
	.form-table input {background:none;border:0;border-bottom:1px #8f8f8f solid;padding-left:5px;margin-bottom:15px;color:#fff;font-size:14px !important}
	.form-table textarea{background:#404040;border:0;border-bottom:1px #8f8f8f solid;padding-left:15px;color:#fff;font-size:14px !important}

	.form-table textarea::placeholder,
	.form-table input::placeholder {
	  font-size:14px !important;
	  color: #fff !important; /* 원하는 색상 */
	}

	.footer__div{display:flex;flex-direction: column; justify-content: space-between;color:#fff;height:100%;font-size:14px;line-height:1.6}
	.footer__div .tit{font-size:18px;margin-top:8px;margin-bottom:50px;font-weight:700}
	.footer__div .copy{font-size:12px;}

	.main__tit{text-align:center}
	.main__tit p{font-size:22px;color:#fff;margin-bottom:40px !important}


	.client-4col{display:flex;flex-wrap: wrap; justify-content: center;  gap:50px !important;margin-bottom:20px;width:85%;margin-left:auto;margin-right:auto}
	.client-3col{display:flex;flex-wrap: wrap; justify-content: center;  gap:50px !important;margin-bottom:20px;width:85%;margin-left:auto;margin-right:auto}

	.client-4col img, .client-3col img{max-width:100px !important;height:auto;}

	.portfolio__txt h5{font-size:18px;color:#fff;margin-bottom:10px}
	.portfolio__txt p{font-size:15px;color:#fff;line-height:1.6}

}


.portfolio__box {
  display: flex;
  gap: 10px; /* 선택 */
  margin-bottom:10px
}

.portfolio__box .left {
  flex: 7;
}

.portfolio__box .right {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 선택 */
}

.portfolio__box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 오른쪽 이미지를 반씩 나누기 */
.portfolio__box .right img {
  flex: 1;
}

.portfolio__box2 {
  display: flex;
  gap: 10px; /* 선택 */
  margin-bottom:10px
}

.portfolio__box2 .left {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 선택 */
}

.portfolio__box2 .right {
  flex: 7;

}

.portfolio__box2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 오른쪽 이미지를 반씩 나누기 */
.portfolio__box2 .right img {
  flex: 1;
}

.portfolio__box3 {
  display: flex;
  gap: 10px; /* 선택 */
  margin-bottom:10px
}

.portfolio__box3 .left {
  flex: 1;

}

.portfolio__box3 .right {
  flex: 1;

}

.portfolio__box3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 오른쪽 이미지를 반씩 나누기 */
.portfolio__box3 .right img {
  flex: 1;
}

@media (max-width: 1024px) {

.md-padding-15px-lr{padding-left:15px !important;padding-right:15px !important;}
.studio h2{font-size:45px}

.studio__counter {display:flex;align-items: center;;gap:10px;font-size:40px}

}


@media (max-width: 767px) {
	
	.md-order-1{order:1}
	.md-order-2{order:2}
	
	.portfolio__box ,.portfolio__box2,.portfolio__box3  {
	  display: flex;
	  gap: 10px; /* 선택 */
	  margin-bottom:10px;
	  flex-direction: column;
	}

	.portfolio__box .left {
	  flex: 1;
	}

	.portfolio__box3 .right,
	.portfolio__box2 .right,
	.portfolio__box .right {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  gap: 10px; /* 선택 */
	}

	.portfolio__box img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	}
	/* 오른쪽 이미지를 반씩 나누기 */
	.portfolio__box .right img {
	  flex: 1;
	}
}


.navbar-collapse-show{top:0 !Important;}

header.sticky .header-reverse-back-scroll {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
header.sticky.sticky-appear .header-reverse-back-scroll { 
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
   
}

.txt-white p{color:#fff}
.txt-gray p{color:#a5a5a5}


.studio__counter {display:flex;align-items: center;;gap:10px;font-size:70px}

.studio__tit > div{}
.studio__tit h1{font-size:32px;color:#fff}
.studio__tit h2{font-size:32px;color:#fff}
.studio__tit p.txt01{font-size:20px;color:#fff;line-height:1.6;margin-bottom:10px;font-weight:700}
.studio__tit p.txt02{font-size:16px;color:#fff;line-height:1.6;margin-bottom:30px;font-weight:600}
.studio__tit p.txt03{font-size:16px;color:#d6d6d6;line-height:1.6;margin-bottom:30px}
.studio__tit p.txt04{font-size:16px;color:#d6d6d6;line-height:1.6;}

ul.what{margin-bottom:30px}
ul.what li{position: relative;;font-size:16px;color:#d6d6d6;vertical-align:top;line-height:1.4;padding:10px 0;padding-left:15px;word-break: break-all;}
ul.what li:before{ content:"";position: absolute;top:20px;left:0;background:#d6d6d6;width:3px;height:3px;border-radius:50%}

.studio__tit p.n_txt01{font-size:20px;line-height:1.6;color:#fff;margin-bottom:10px;}
.studio__tit p.n_txt02{font-size:20px;line-height:1.6;color:#a5a5a5}


.studio_client > div{display:flex;flex-wrap: wrap;gap:50px;margin-bottom:40px}
.studio_client img{height:40px}


.history {display:flex;gap:30px}
.history li:nth-child(1){width:100px;text-align:center}
.history p.ul_txt01{font-size:20px;color:#fff;line-height:1.6;font-weight:500}
.history p.ul_txt02{font-size:20px;color:#adadad;line-height:1.6;font-weight:500;margin-bottom:50px}

.history li{position: relative;}
.history li.line:after{ content:"";position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;width:2px;height:65%}

.how_we_work{display:flex; gap:50px;position: relative;border-bottom:2px #a5a5a5 solid}
.how_we_work:after{content:"";position: absolute;top:140px;left:0;;background:#a5a5a5;width:100%;height:2px;z-index:9}

.how_we_work2{display:flex; gap:50px;position: relative;}
.how_we_work2 > div{width:20%}
.how_we_work > div{width:20%}

.how_we_work h2{font-size:20px;color:#fff}
.how_we_work .txt01{font-size:20px;color:#a5a5a5;line-height:1.6;height:30px;word-break: break-all;}
.how_we_work .txt02{font-size:20px;color:#fff;line-height:1.6;height:30px;word-break: break-all;}

.how_tit01{font-size:20px;color:#fff;line-height:1.6;margin-bottom:10px}
.how_tit02{font-size:20px;color:#a5a5a5;line-height:1.2}


.how_box_bg{background:#1f1f1f; }

.how_box ul{background:#1f1f1f; }
.boxline{}

.box_padding01{padding:40px 20px 40px 20px;background:#1f1f1f;word-break: break-all;}

.box_padding02{padding:30px 20px 0px 20px;background:#1f1f1f;min-height:200px;word-break: break-all;}
.box_padding03{padding:30px 20px 0px 20px;background:#1f1f1f;min-height:220px;word-break: break-all;}

.container .row > div{padding-left:0;padding-right:0}

.col-3{display:flex;gap:30px}

@media (min-width: 1280px) {
	.lg-hidden{display:none}

}

@media (max-width: 1280px) {

	.container .row > div{padding-left:15px;padding-right:15px}
	.how_tit01{font-size:16px;color:#fff;line-height:1.6;margin-bottom:10px}
	.how_tit02{font-size:16px;color:#a5a5a5;line-height:1.2}

	.box_padding01{font-size:18px;padding:20px 10px 40px 10px;background:#1f1f1f;}


	.how_we_work h2{font-size:16px;color:#fff}
	.how_we_work .txt01{font-size:16px;color:#a5a5a5;line-height:1.6;height:30px}
	.how_we_work .txt02{font-size:16px;color:#fff;line-height:1.6;height:30px}

	.how_we_work{display:flex; gap:20px;position: relative;border-bottom:2px #fff solid}
	.how_we_work:after{content:"";position: absolute;top:120px;left:0;;background:#a5a5a5;width:100%;height:2px;z-index:9}

	.how_we_work2{display:flex; gap:20px;position: relative;}

	.box_padding02{padding:30px 10px 0px 10px;background:#1f1f1f;min-height:200px}
	.box_padding03{padding:30px 10px 0px 10px;background:#1f1f1f;min-height:210px}

	.studio_client img{height:22px}

	.client-4col{display:flex; justify-content: center; align-items: center; gap:100px;margin-bottom:30px}
	.client-3col{display:flex; justify-content: center; align-items: center; gap:100px;margin-bottom:30px}

	.client-4col img, .client-3col img{max-width:200px}

	
	.studio__counter {display:flex;align-items: center;;gap:10px;font-size:50px}


}


/*테블릿 */

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

	.container .row > div{padding-left:15px;padding-right:15px}
	.client-4col{display:flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:50px;margin-bottom:50px}
	.client-3col{display:flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:50px;margin-bottom:50px}

	.client-4col img, .client-3col img{max-width:160px}

	.dropdown-menu{display:block !Important;margin-left:20px !important}
	.dropdown-menu li a{font-size:14px !Important;color:#fff !important}
	.navbar-nav{height:100vh;background:#171717 !important}

	.studio_client > div{display:flex;flex-wrap: wrap;gap:50px;margin-bottom:40px}
	.studio_client img{height:22px}


	.box_padding01{padding:20px 10px 40px 10px;background:#1f1f1f;}
    .box_padding02{padding:40px 10px 0px 10px;background:#1f1f1f;min-height:260px}
    .box_padding03{padding:30px 10px 0px 10px;background:#1f1f1f;min-height:250px}


	.studio h2{font-size:35px}
	.studio__counter {display:flex;align-items: center;;gap:10px;font-size:50px}

	
}

.mo-box_padding01{display:none}

@media (max-width: 767px) {
	
	.container .row > div{padding-left:15px;padding-right:15px}
	.md-hidden{display:none}

	.sm-hidden{display:none}

	.navbar .navbar-nav .nav-link {  font-size: 20px !Important;}


	.navbar.mo-top{background:#171717 !important}

	.dropdown-menu{display:block !Important;margin-left:20px !important}
	.dropdown-menu li a{font-size:14px !Important;color:#fff !important}
	.navbar-nav{height:calc(100vh - 100px);background:#171717 !important}

	.studio__txt p{font-size:16px;line-height:1.6;width:100%;margin-bottom:30px}
	
	.studio__counter {display:flex;align-items: center;;gap:0px;font-size:50px}
	.feature-box-content{width:100%}

	.history p.ul_txt01{font-size:16px;color:#fff;line-height:1.6;font-weight:500}
	.history p.ul_txt02{font-size:16px;color:#adadad;line-height:1.6;font-weight:500;margin-bottom:50px}

	.studio__tit > div{}
	.studio__tit h1{font-size:24px;color:#fff}
	.studio__tit h2{font-size:24px;color:#fff}
	.studio__tit p.txt01{font-size:18px;color:#fff;line-height:1.6;margin-bottom:10px;font-weight:700}
	.studio__tit p.txt02{font-size:16px;color:#fff;line-height:1.6;margin-bottom:30px;font-weight:600}
	.studio__tit p.txt03{font-size:16px;color:#d6d6d6;line-height:1.6;margin-bottom:30px}
	.studio__tit p.txt04{font-size:16px;color:#d6d6d6;line-height:1.6;}

	.studio__tit p.n_txt01{font-size:16px;line-height:1.6;color:#fff;margin-bottom:10px;}
    .studio__tit p.n_txt02{font-size:16px;line-height:1.6;color:#a5a5a5}


	ul.what{margin-bottom:30px}
	ul.what li{position: relative;;font-size:14px;color:#d6d6d6;vertical-align:top;line-height:1.4;padding:4px 0;padding-left:15px;}
	ul.what li:before{ content:"";position: absolute;top:14px;left:0;background:#d6d6d6;width:3px;height:3px;border-radius:50%}

	.how_we_work{display:flex; flex-wrap: wrap;gap:10px;position: relative;border-bottom:0px #fff solid}
	.how_we_work:after{content:"";position: absolute;top:140px;left:0;;background:#fff;width:100%;height:0;z-index:9}

	.how_we_work2{display:flex; flex-wrap: wrap ;gap:10px;position: relative;}
	.how_we_work2 > div{width:100%}
	.how_we_work > div{width:100%}

	.how_we_work h2{font-size:16px;color:#fff}
	.how_we_work .txt01{font-size:16px;color:#a5a5a5;line-height:1.6;height:auto}
	.how_we_work .txt02{font-size:18px;color:#fff;line-height:1.6;height:auto}

	.how_tit01{font-size:16px;color:#fff;line-height:1.6;margin-bottom:10px}
	.how_tit02{font-size:16px;color:#a5a5a5;line-height:1.2}

	.studio_client > div{display:flex;flex-wrap: wrap;justify-content: center;gap:50px;margin-bottom:40px}
	.studio_client img{height:22px}


	.mo-box_padding01{display:block;padding:20px 20px 0px 20px;background:#1f1f1f;}
	.mo-box_padding01 .txt01{font-size:16px;color:#a5a5a5;line-height:1.6;height:auto}
	.mo-box_padding01 .txt02{font-size:18px;color:#fff;line-height:1.6;height:auto}


	.box_padding01{padding:20px 20px 20px 20px;background:#1f1f1f;}
    .box_padding02{padding:0px 20px 10px 20px;background:#1f1f1f;min-height:auto}
    .box_padding03{padding:20px 20px 10px 20px;background:#1f1f1f;min-height:auto}
	.md_padding_0{background:none;padding:20px 0}

	.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
	  font-size: 15px;
	  line-height: 26px;
	  border-bottom: 0 !important;
	  padding: 10px 5px;
	}

	.col-3{display:flex;flex-wrap: wrap;gap:30px}
	.col-3 > div{width:100%}
	.col-3 > div img{width:100%}

}

.formmail_cell_bgcolor {
  font-size: 0;
}

@media (max-width: 486px) {


	.client-4col{display:flex;flex-wrap: wrap; justify-content: center;  gap:30px !important;margin-bottom:20px;width:85%;margin-left:auto;margin-right:auto}
	.client-3col{display:flex;flex-wrap: wrap; justify-content: center;  gap:30px !important;margin-bottom:20px;width:85%;margin-left:auto;margin-right:auto}

	.client-4col img, .client-3col img{max-width:100px !important;height:auto;}

	.btn_port{width:80%;font-size:12px;text-align:center;margin:0 auto}

	.xs-hidden{display:none}

	.studio_client img{height:18px}

}