/*mainStyle.css*/
.white {color:#fff !important;}
.clear {clear:both;}
#container{overflow: hidden;}

/* 메인 공통 css */
.main_sec{width: 100%;}

.link_a{margin-top: 80px;}
.link_a a{display: inline-block; padding: 2px 10px; border: 1px solid #bebebe; box-sizing: border-box; transition: .25s;}
.link_a a:hover{background: #3f3d3b; color: #fff; border: 1px solid #3f3d3b;}

/* 메인 배너 */
.main_banner{width: 100%; height: 100vh; position: relative; display: flex; align-items: center;}
.main_banner .inner p{padding-top: 50px;}

.main_banner .main_txt_motion{width: 100%; border: 0;}
.main_banner .main_txt_motion video{max-width: 100%; border: 0;}

.main_banner .fade_txt{height: 240px; overflow-y: hidden;}
.main_banner .fade_txt:nth-child(1){opacity: 1; visibility: visible; display: block;}
.main_banner .fade_txt:nth-child(2){opacity: 0; visibility: hidden; display: none;}

.main_banner .fade_txt h1,
.main_banner .fade_txt h2{height: 120px; overflow-y: hidden;}

.main_banner .fade_txt h1 span,
.main_banner .fade_txt h2 span{transform: translateY(100%); -webkit-font-smoothing: antialiased; transition: 1.2s cubic-bezier(0.19, 1, 0.60, 1);animation: txt_up forwards ease 1s; display: inline-block;}

.main_banner .fade_txt:nth-child(1) h1 span:nth-child(1){animation-delay: 0.04s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(2){animation-delay: 0.08s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(3){animation-delay: 0.12s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(4){animation-delay: 0.16s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(5){animation-delay: 0.2s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(6){animation-delay: 0.24s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(7){animation-delay: 0.28s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(8){animation-delay: 0.32s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(9){animation-delay: 0.36s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(10){animation-delay: 0.40s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(11){animation-delay: 0.44s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(12){animation-delay: 0.48s;}
.main_banner .fade_txt:nth-child(1) h1 span:nth-child(13){animation-delay: 0.52s;}

.main_banner .fade_txt:nth-child(1) h2 span:nth-child(1){animation-delay: 0.24s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(2){animation-delay: 0.28s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(3){animation-delay: 0.32s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(4){animation-delay: 0.36s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(5){animation-delay: 0.40s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(6){animation-delay: 0.44s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(7){animation-delay: 0.48s;}
.main_banner .fade_txt:nth-child(1) h2 span:nth-child(8){animation-delay: 0.52s;}

@keyframes txt_up{
    0%{transform: translateY(100%);}
    100%{transform: translateY(0%);}
}
@keyframes txt_opacity0{
    0%{opacity: 1; visibility: visible; display: block;}
    100%{opacity: 0; visibility: hidden; display: none;}
}
@keyframes txt_opacity1{
    0%{opacity: 0; visibility: hidden; display: none;}
    100%{opacity: 1; visibility: visible; display: block;}
}


.main_sec.about {background: url(../img/main/img01.png) no-repeat center; background-size:cover; }
.main_sec.about img {width:235px; filter: grayscale(100%) brightness(0) saturate(100%) invert(66%) sepia(3%) saturate(57%) hue-rotate(180deg);}
.main_sec.about ul {display:flex; align-items: center;}
.main_sec.about ul li {width:50%; position: relative; padding:50px 0px}
.main_sec.about ul li:last-child div:nth-child(2) {padding:30px 0px 50px}
.main_sec.about ul li:last-child {margin-left:100px}

.main_sec.about ul li  .circle {
  position: relative;
  width: 40vw;   /* 반응형 크기 */
  height: 40vw;
  max-width: 850px;   /* 너무 커지지 않도록 제한 */
  max-height: 850px;
  border: 1px solid rgba(255,255,255,0.4); /* 흰색 원 테두리 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
   -webkit-animation: rotX 4s infinite linear;
  animation: rotX 4s infinite linear;
  transform-style: preserve-3d;
}

@-webkit-keyframes rotX {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(180deg);}
}

@keyframes rotX {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(180deg);}
}

.circle img {
  position: absolute;         /* 부모 회전에 영향을 덜 받도록 */
  transform: rotateY(0deg);   /* 기본값 고정 */
  animation: logoFix 4s infinite linear;
}

@keyframes logoFix {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); } /* 부모와 반대방향 회전 */
}

.main_sec.about ul li .line {width:1px; height:100%; background:rgba(255,255,255,0.4); position: absolute; top:0px; left:50%;}


.main_sec.branding  {border-bottom:1px solid #ACACAC }
.main_sec.branding ul {display:flex; align-items: center;}
.main_sec.branding ul li {position: relative;}
.main_sec.branding ul li {width:50%}
.main_sec.branding ul li table {width:100%;   border-collapse: collapse;   border-spacing: 0}
.main_sec.branding .branding_grid {width:100%}
.main_sec.branding ul li table th {border:1px solid #ACACAC; font-size:25px; padding:20px}
.main_sec.branding ul li table td {border:1px solid #ACACAC; font-size:20px; padding:20px}
.main_sec.branding ul li table td:last-child {padding:0; border-left:0px}
.main_sec.branding ul li table td.txt {border-right:0px}
.main_sec.branding ul li table td:last-child div {display:flex;     justify-content: flex-end;}
.main_sec.branding ul li table td:last-child img {width:100%; max-width:210px}
.main_sec.branding ul li table td:last-child img {
  transition: filter 0.3s ease; /* 부드러운 전환 효과 */
}

.main_sec.branding ul li table td:last-child img:hover {
  filter: grayscale(100%); /* 흑백 처리 */
}
.main_sec.branding ul li table tr:last-child td, .main_sec.branding ul li table tr:nth-child(4) th{border-bottom:0px}

.main_sec.branding ul li table td.first {border-left:1px solid #ACACAC ; padding:88px 0px 0px}

.main_sec.branding .dot {position: absolute; top:50%; left:-25px; transform:translateY(-50%) z-index: 66;}



.main_sec.branding ul li:first-child div:nth-child(2) {padding:30px 50px 30px 0px;     word-break: keep-all;}
.main_sec.branding ul li:first-child div:nth-child(3) {padding-right:50px;     word-break: keep-all;}
.main_sec.branding ul li:first-child div:nth-child(4) {padding-top:60px} 


/*  */
.main_sec.project{margin-bottom:0px;}
.main_sec .info_detail_01{width: 100%;}
.main_sec .info_detail_01 ul{display: flex; flex-wrap: wrap; /*border: 1px solid #ACACAC;*/ border-left: 0; border-right: 0; box-sizing: border-box; padding: 100px 0px 20px; justify-content: space-between;     align-items: flex-end;}
.main_sec .info_detail_01 ul li{width: 50%;}
.main_sec .info_detail_01 ul li:nth-child(2){text-align: right;}
.main_sec .info_detail ul li:nth-child(2) a {}


.main_sec .info_detail{width: 100%;}
.main_sec .info_detail ul{display: flex; flex-wrap: wrap; /*border: 1px solid #ACACAC;*/ border-left: 0; border-right: 0; box-sizing: border-box; padding: 100px 6% 0px; justify-content: space-between;     align-items: flex-end;}
.main_sec .info_detail ul li{width: 50%;}
.main_sec .info_detail ul li:nth-child(2){text-align: right;}






/* 메인 flex */
.main_sec.contact > .flex{display: flex; flex-wrap: wrap; padding: 150px 6% 250px;  box-sizing: border-box;     justify-content: space-between;     align-items: center;}


.main_sec.contact > .flex .flex_ctt_r {display: flex; align-items: center;     justify-content: flex-end;}
.main_sec.contact > .flex .flex_ctt_r > p {margin-right:20px}

.main_sec.contact > .flex > div:first-child > div:nth-child(2) {padding:30px 0px 10px}
.main_sec.contact > .flex > div:first-child > div:nth-child(3) a {display:inline-block;  text-decoration: underline;}
.main_sec.contact > .flex > div:first-child > div:nth-child(3) a:last-child {margin-left:20px;}
.main_sec.contact > .flex > div:first-child > div:nth-child(3) {  text-decoration: underline;}

.main_sec.contact .inner {position: relative; border-right:1px solid #ACACAC;  border-left:1px solid #ACACAC}
.main_sec.contact h2 {position: absolute; bottom:-50px; padding-left:6%}

/* 서비스 리스트 */
.main_sec ul.service_list{width: 100%;border-top: 1px solid #bebebe; box-sizing: border-box; margin-bottom: 150px;}
.main_sec ul.service_list li{border-bottom: 1px solid #bebebe; box-sizing: border-box; padding: 75px 6%; display: flex; flex-wrap: wrap; align-items: center; transition: .25s;}
.main_sec ul.service_list li span:nth-child(1){width: 40%;}
.main_sec ul.service_list li span:nth-child(2){width: 30%;}
.main_sec ul.service_list li p{width: 30%;}

.main_sec ul.service_list li span b{font-weight: 600;}

.main_sec ul.service_list li:hover{background: #2e2e2e; color: #fff;}


/* 인스타 컨텐츠 */
.main_sec .insta_ctt{padding: 10px 6% 75px 6%; }
.main_sec.insta{border-bottom:1px solid #ACACAC}




@media screen and (max-width : 1400px) {
.main_sec.contact h2 {bottom:-30px}
}

@media screen and (max-width : 1200px) {
    .main_sec ul.service_list li span:nth-child(1){width: 30%;}
    .main_sec ul.service_list li span:nth-child(2){width: 30%;}
    .main_sec ul.service_list li p{width: 40%;}
	.main_sec.about img {width:185px; }
	
	br.none {display:none}
	
	
	.main_sec.contact > .flex > div .font-20 {font-size:17px}
}
@media screen and (max-width : 1020px) {
    .main_sec > .flex .flex_tit_l{width: calc(50% - 40px); margin-right: 40px;}
    .main_sec > .flex .flex_ctt_r{width: 50%;}

    .main_sec > .flex .flex_tit_l h2{flex-wrap: wrap; flex-direction: column; align-items: flex-start;}
    .main_sec > .flex .flex_tit_l h2 span{display: block; padding-left: 0%;}
	
	.main_sec.about img {width:125px; }

    .main_sec ul.service_list li{padding: 50px 4%;}
	
	.btn_bottom_red {width:120px; height:120px}
	.btn_bottom_red_01 {width:120px; height:120px}
	
	.main_sec.branding ul li table th {font-size:20px}
	.main_sec.branding ul li table td.txt {font-size:16px}
}

@media screen and (max-width :900px) {
.main_sec.about ul {flex-wrap: wrap;}
.main_sec.about ul li {width:100%; text-align:center; padding:50px 20px}
.main_sec.about ul li:last-child {margin-left:0px; border-top:1px solid rgba(255, 255, 255, 0.4);}
.main_sec.about ul li .circle {margin:0 auto;     width: 90vw;    height: 90vw;}
.main_sec.about .inner {padding:0px}

.main_sec.branding ul {flex-wrap: wrap;}
.main_sec.branding ul li {width:100%}
.main_sec.branding ul li:first-child {padding:50px 0px}

.main_sec.branding ul li:first-child div:nth-child(2) {padding:30px 50px 30px 0px;     word-break: keep-all;}
.main_sec.branding ul li:first-child div:nth-child(3) {padding-right:50px;     word-break: keep-all;}
.main_sec.branding ul li:first-child div:nth-child(4) {padding-top:60px} 
.main_sec.branding ul li table td.first {padding:50px 0px 0px}

	.main_sec.branding ul li table th {font-size:16px; padding:10px}
	.main_sec.branding ul li table td.txt {font-size:14px}
	.main_sec.branding ul li table td {padding:10px}
	
.main_sec.branding .dot {top:-25px; left:50%;     transform: translateY(0%);     transform: translateX(-50%);} 	


.main_sec.contact > .flex {flex-wrap: wrap;}
.main_sec.contact > .flex > div {width:100%}
.main_sec.contact > .flex .flex_ctt_r {margin-top:20px}

.main_sec.branding ul li table td.first{display: none;}


.main_sec.branding .inner{padding: 0;}
.main_sec.branding .inner > ul > li:first-child{padding: 100px 20px 30px;}

}

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

	.main_sec.contact h2 {bottom:-18px}

	.main_banner{width: 100%; height: auto; padding: 280px 0 220px;}
	.main_banner .inner p{padding-top: 20px; font-size: 17px;}

	.main_sec ul.service_list li:last-child{border-bottom: 0;}

    .main_sec .info_detail_01 ul li:nth-child(1){width: 100%;}
    .main_sec .info_detail_01 ul li:nth-child(2){width: 100%; text-align: left; margin-top: 10px}
    .main_sec .info_detail_01 ul li:nth-child(3){width: 100%; height: 30px;}


    .main_sec > .flex .flex_tit_l{width: calc(50% - 20px); margin-right: 20px;}
    .main_sec > .flex .flex_ctt_r{width: 50%;}

    .main_sec > .flex{padding: 80px 20px;}

    .main_sec .info_detail ul{padding: 40px 0;}

    .main_sec .insta_ctt{padding: 40px 20px;}

    .main_sec ul.service_list li{align-items: flex-start; padding: 40px 20px;}
    .main_sec ul.service_list li span:nth-child(1){width: 100%; margin-bottom: 30px;}
    .main_sec ul.service_list li span:nth-child(2){width: 30%;}
    .main_sec .info_detail ul li:nth-child(2) a{font-size: 13px;}
    .main_sec ul.service_list li p{width: 70%;}
	.main_sec .info_detail ul{position: relative;}
	.main_sec .info_detail ul li.absolute{position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: auto !important; z-index: 3;}

    .main_sec .info_detail ul.two li:nth-child(1){width: 50%;}
    .main_sec .info_detail ul.two li:nth-child(2){width: 50%; text-align: right;}
    .main_sec .info_detail ul.two li:nth-child(3){display: none;}

	.main_sec.branding ul li:first-child div:nth-child(2) {padding:10px 50px 10px 0px;}
	.main_sec.branding ul li:first-child div:nth-child(4){padding-top: 30px;}

	.main_sec.about ul li:last-child div:nth-child(2){padding: 20px 0px 20px}

	.main_sec.contact > .flex .flex_ctt_r{justify-content: flex-start;}

	.main_sec.contact > .flex > div:first-child > div:nth-child(2){padding: 10px 0px 5px;}

	.main_sec.contact > .flex{display: flex; flex-wrap: wrap; padding: 100px 6% 100px;}
}
@media screen and (max-width : 600px) {
    .main_sec > .flex .flex_tit_l{width: calc(100%); margin-right: 0px;}
    .main_sec > .flex .flex_ctt_r{width: 100%; margin-top: 30px;}
    .main_sec .link_a{margin-top: 40px;}
    
    .main_sec .insta_ctt{padding: 20px 20px;}
    
    .main_sec ul.service_list li span:nth-child(2){width: 100%; margin-bottom: 12px;}
    .main_sec ul.service_list li p{width: 100%;}
	
	.main_sec.contact h2 {padding-left:0px}
}
@media screen and (max-width : 550px) {
	
	.main_sec.about img {width:100px; }
    .main_sec .info_detail ul li:nth-child(1){width: 100%;}
    .main_sec .info_detail ul li:nth-child(2){width: 100%; text-align: left;}
}