@charset "utf-8";

/*코투스애드 common.css */
body{font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; word-break: keep-all; font-size: 1.125rem; overflow-x: hidden;}
a{text-decoration: none; color: #333;}
ul, li{list-style: none; margin: 0; padding: 0;}
:root{
  --blue_color:#00a1ff;
  --navy_color:#061737;
  --deep_blue:#416EFF;
  --red_color:#f00;
}

.blue{color: #00A1FF;}
.deep_blue{color: var(--deep_blue);}
.navy{color: #061737;}
.bold{font-weight: bold;}
.semi_bold{font-weight: 600;}
.semi_bold2{font-weight: 300;}
.red{color: var(--red_color);}

@keyframes shake{
  0%{transform: rotate(0);}
  20%{transform: rotate(-5deg);}
  40%{transform: rotate(5deg);}
  60%{transform: rotate(-5deg);}
  80%{transform: rotate(5deg);}
  100%{transform: rotate(0);}
}

/* 메가메뉴 슬라이드 애니메이션 추가 */
@keyframes slideInFromLeft{
  0%{
    opacity: 0;
    transform: translateX(-30px);
  }
  100%{
    opacity: 1;
    transform: translateX(0);
  }
}

/* header */
header{width: 100%; height: 90px;  background: transparent; /*box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/ transition: background-color 0.3s ease; position: fixed; top: 0; left: 0; z-index: 1000; border-bottom: 1px solid rgba(100,100,100,0.3);}
header.is_scrolled{background: #000;}
.header_inner{max-width: 1400px; display: flex; justify-content: space-between; margin: 0 auto; align-items: center; padding: 0px 40px;}
.header_inner h1 img{padding-top: 5px;}
.header_inner .gnb{display: flex; justify-content: space-around; max-width: 1000px; align-items: center; color: #fff; gap: 50px;}
.gnb > li{position: relative; cursor: pointer;}
.gnb > li > a{transition: color 0.3s; color: #fff; font-size: 1.5rem; font-weight: bold; position: relative; display: inline-block;}
.gnb > li > a:hover{color: var(--blue_color);}

/* Portfolio, Contact, About 호버 시 한글 변경 효과 */
.gnb > li > a[data-kr]{overflow: hidden; min-height: 2.5rem;line-height: 2.5rem;min-width: 150px;display: inline-flex;align-items: center;justify-content: center; padding: 0 10px;}
.gnb > li > a[data-kr]::before{content: attr(data-kr); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-100%); transition: all 0.3s ease;}
.gnb > li > a[data-kr]:hover::before{opacity: 1; transform: translateY(0);}
.gnb > li > a[data-kr]:hover{color: var(--blue_color);}
.gnb > li > a[data-kr] span{display: inline-block; transition: all 0.3s ease;}
.gnb > li > a[data-kr]:hover span{opacity: 0; transform: translateY(100%);}

/* 드롭다운 메뉴 공통 스타일 (Service & Consulting) */
.has_dropdown > a{position: relative; overflow: hidden; display: inline-flex; align-items: center;}
.has_dropdown > a .menu_text{display: inline-block; transition: all 0.3s ease; position: relative; min-height: 2.5rem; line-height: 2.5rem; min-width: 100px; padding: 0 5px; text-align: center;}
.has_dropdown > a i{transition: transform 0.3s ease; font-size: 0.875rem; flex-shrink: 0;}
.has_dropdown > a:hover i{transform: rotate(180deg); color: var(--blue_color);}
.has_dropdown > a:hover .menu_text{color: var(--blue_color);}

/* Service & Consulting 호버 시 한글 변경 효과 */
.has_dropdown > a[data-kr] .menu_text{overflow: hidden;}
.has_dropdown > a[data-kr] .menu_text::before{content: attr(data-kr); position: absolute; top: 0; left: 50;  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-100%) translateX(-50%); transition: all 0.3s ease;}
.has_dropdown > a[data-kr]:hover .menu_text::before{opacity: 1; transform: translateY(0) translateX(-50%);}
.has_dropdown > a[data-kr]:hover .menu_text{color: var(--blue_color);}
.has_dropdown > a[data-kr] .menu_text span{display: inline-block; transition: all 0.3s ease;}
.has_dropdown > a[data-kr]:hover .menu_text span{opacity: 0; transform: translateY(100%);}

.mega_menu{position: absolute; top: 50px; left:250%; transform: translateX(-50%); width: auto; display: none; padding: 30px 0 40px 0; z-index: 999; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.consulting_menu{left: 50%;}
.mega_menu.active{display: block; opacity: 1; transform: translateX(-45%) translateY(0);}
.mega_menu_inner{width: auto; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;}
.has_dropdown:nth-child(2) .mega_menu_inner{grid-template-columns: repeat(2, 1fr); max-width: 600px;}

.mega_menu .lnb{ background: rgba(0, 0, 0, 0.9);  padding: 10px 15px;  border-radius: 8px;  border: 1px solid rgba(255, 255, 255, 0.1);   transition: all 0.3s;  width: 180px; opacity: 0; transform: translateX(-30px);}
.mega_menu.active .lnb{  animation: slideInFromLeft 0.5s ease forwards;}
.mega_menu.active .lnb:nth-child(1){animation-delay: 0s;}
.mega_menu.active .lnb:nth-child(2){animation-delay: 0.1s;}
.mega_menu.active .lnb:nth-child(3){animation-delay: 0.2s;}
.mega_menu.active .lnb:nth-child(4){animation-delay: 0.3s;}

.mega_menu .lnb_title{color: var(--blue_color) !important; font-weight: bold; font-size: 1.125rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--blue_color); display: flex; align-items: center; gap: 8px; }
.mega_menu .lnb_title i{font-size: 0.875rem;}
.mega_menu .lnb li:not(.lnb_title){margin-bottom: 5px;}
.mega_menu .lnb li a{color: rgba(255, 255, 255, 0.85); display: block; padding: 5px; transition: all 0.3s ease; font-size: 0.938rem; border-radius: 4px; line-height: 1; display: flex; align-items: center;}
.mega_menu .lnb li a:hover{color: var(--blue_color); text-decoration: underline; /*background: rgba(0, 161, 255, 0.15); padding-left: 25px; transform: translateX(5px);*/}

.quick_mnu{position: fixed; right: 0; top: 20%; z-index: 10000; border-radius: 5px 0 0 5px;  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);}
.quick_mnu ul{width: 80px; height: 585px; text-align: center; background: var(--navy_color); border-radius: 10px 0 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.quick_mnu ul li{padding: 15px 0px; border-bottom: 1px solid rgba(255,255,255,0.3); width: 85%; margin: 0 auto;}
.quick_mnu ul li p{color: #fff; font-size: 0.875rem; transition: 0.3s;}
.quick_mnu ul li img{transition: 0.3s; transform: translateY(10px);}
.quick_mnu ul li:first-child{height:100px; background: #fff; font-weight: bold; width: 100%; border-radius: 5px 0 0 0; transition: 0.3s; padding: 19px 0 0 0;}
.quick_mnu ul li:first-child img{background: #fff; font-weight: bold; margin-bottom: 10px; transform: translateY(0); /* 첫 번째는 초기값 0 */}
.quick_mnu ul li:first-child p{font-size: 1.5rem; color: var(--navy_color);}
.quick_mnu ul li:last-child{border: none;}
.quick_mnu ul li:last-child img{padding-bottom: 10px;}

/* 퀵메뉴 호버 이벤트 */
.quick_mnu ul li:first-child img{transition: 0.3s; }
.quick_mnu ul li:first-child:hover img{animation: shake 0.8s infinite ease;}
.quick_mnu ul li:first-child p{opacity: 1;}
.quick_mnu ul li p{opacity: 0;}

/* 첫 번째 li를 제외한 나머지만 호버 효과 적용 */
.quick_mnu ul li:not(:first-child):hover p{opacity: 1; transform: translateY(-5px);}
.quick_mnu ul li:not(:first-child):hover img{transform: translateY(-3px);}

/* mn04 전용 흰색 헤더 */
header.white_header { 
  background: #fff; 
  border-bottom: 1px solid #e0e0e0; 
}
header.white_header .gnb > li > a { color: #333; }
header.white_header .gnb > li > a:hover { color: var(--blue_color); }
header.white_header .has_dropdown > a .menu_text span { color: #333; }
header.white_header .has_dropdown > a i { color: #333; }

/* mn05 전용 헤더 (기본: 흰배경/검정텍스트, 스크롤: 검정배경/흰텍스트) */
header.black_header { background: #fff; }
header.black_header .gnb > li > a { color: #333; }
header.black_header .gnb > li > a:hover { color: var(--blue_color); }
header.black_header .has_dropdown > a .menu_text span { color: #333; }
header.black_header .has_dropdown > a i { color: #333; }
header.black_header.is_scrolled { background: #000; }
header.black_header.is_scrolled .gnb > li > a { color: #fff; }
header.black_header.is_scrolled .has_dropdown > a .menu_text span { color: #fff; }
header.black_header.is_scrolled .has_dropdown > a i { color: #fff; }

/* top 버튼 */
.top_btn{position: fixed; bottom: 5%; right: 1%; cursor: pointer; z-index: 10000;}
.top_btn a {display: flex; align-items: center; justify-content: center;  width: 50px; height: 50px; background: #fff;  text-decoration: none; color: #333; border-radius: 50%;  box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: 0.3s;}
.top_btn_inner:hover {background: #f0f0f0;}

/* footer */
footer{width: 100%; height: 150px; background: #333;}
.footer_inner{max-width: 1400px; height: 100%; margin: 0 auto; color: #fff; display: flex; justify-content: space-around; align-items: center;}
.footer_inner .l_logo{width: 200px; display: flex; align-items: center;}
.footer_inner .r_txt{max-width: 1200px; height: 100%; display: flex; flex-direction: column; justify-content: center;}
.footer_inner .r_txt ul{display: flex; justify-content: left; max-width: 800px; align-items: center; }
.footer_inner .r_txt ul li{margin-right: 30px; font-size: 14px; padding-bottom: 10px;}
.footer_inner .r_txt ul li span{margin-right: 5px; color: #ccc;}
.footer_inner address{font-size: 12px; color: #ccc; line-height: 1.5;}
.footer_inner .link{display: flex; gap: 10px;}
.footer_inner .link a{color: #fff; width: 160px; display: inline-block; text-align: center; border: 1px solid #4a4744; padding:20px 15px; background: #333; border-radius: 10px; box-sizing: border-box; transition: all 0.3s;}
.footer_inner .link a:hover{background: #0c0c0c;}
.footer_inner .link a p:first-child{color: #c7bcb5; padding-bottom: 5px; font-size: 0.875rem;}
#m_header_area{display: none;}
@media screen and (max-width: 1499px) {
  .header_inner{padding: 0 32px;}
  .header_inner .gnb{gap: 32px;}
  .mega_menu{left:200%;}
  .consulting_menu{left: 50%;}
  .mega_menu_inner{gap: 20px;}
}
@media screen and (max-width: 1279px) {
  .header_inner{padding: 0 24px;}
  .header_inner .gnb{gap: 0px;}
  .mega_menu{left:150%;}
  footer{height: 300px;}
  .footer_inner{display: block;}
  .footer_inner .l_logo{padding: 10px 0 0 10px;}
  .footer_inner .r_txt{max-width: 1200px; display: block; height: auto; padding: 20px 0 20px 10px;}
  .footer_inner .link{padding-left: 10px;}
}
@media (min-width: 1025px) {#m_header_area { display: none; }}
@media (max-width:1024px){
  #header_area{display: none;}
  #m_header_area{display: block;}
  /* 모바일 헤더 */
#m_header {width: 100%; position: fixed; top: 0; left: 0;  background: transparent; transition: background-color 0.3s ease;  z-index: 100000;}
#m_header.is_scrolled{ background: #000;}
.m_header_inner {height: 56px;padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;}
.logo{position: relative; z-index: 1000;}
.logo img {height: 56px;}
.hamburger {width: 30px; height: 25px; position: relative; border: none;  background: none; padding: 0; cursor: pointer; z-index: 1000;}
.hamburger span {position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: 0.3s ease;}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) {top: 50%; transform: rotate(45deg);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3) {bottom: auto; top: 50%; transform: rotate(-45deg);}

/* nav */
.m_nav {display: none; position: fixed; top: 0; left: 0;  width: 100%; height: calc(100vh - 56px); background: #000; color: #fff; overflow-y: auto; padding-top: 65px;}
.m_nav.active {display: block;}
.m_nav .gnb{text-align: center;}
.m_nav .gnb > li{border-bottom: 1px solid #424242; padding: 10px 0;}
.m_nav .lnb {display: none; padding: 8px 0 16px; text-align: center;}
.m_nav .lnb .lnb_title{color: var(--blue_color); padding-bottom: 10px;}
.m_nav .lnb a{color: #fff; line-height: 1.5;}
/* .m_nav .has_dropdown.service.active .lnb{display: block;} */
.m_nav .has_dropdown > a {display: flex;  justify-content: space-between; align-items: center;}
.m_nav .has_dropdown.active > a i {transform: rotate(180deg);}
.m_nav i {transition: 0.3s;}

/* mn04 모바일 헤더 */
#m_header.white_header,
#m_header.white_header.is_scrolled {background: #fff !important;
  border-bottom: 1px solid #e0e0e0;}
#m_header.white_header .hamburger span {background-color: #333;}
#m_header.white_header .hamburger.active span {background-color: #fff;}

/* mn05 모바일 헤더 */
#m_header.black_header { background: #fff !important; border-bottom: 1px solid rgba(100,100,100,0.3);}
#m_header.black_header .hamburger span { background-color: #333; }
#m_header.black_header.is_scrolled { background: #000 !important; }
#m_header.black_header.is_scrolled .hamburger span { background-color: #fff; }


  /* 퀵메뉴 */
.m_quick{color: #fff; position: fixed; bottom: 0; left: 0; width: 100%; background: #000; z-index: 10000; height: 75px;padding: 10px 0; border-top: 1px solid #424242;}
.m_quick ul{display: flex; justify-content:space-around; gap: 30px;}
.m_quick ul li{text-align: center; align-items: center; display: flex; cursor: pointer;}
.m_quick ul li p{color: #fff; font-size: 0.75rem;}
.m_quick ul li:first-child img{width: 25px; transform: translateY(-8px);}
.m_quick ul li:nth-child(2) img{height: 49px;}
.m_quick ul li:first-child{transform: translateY(10px);}
.m_quick ul li:last-child{transform: translateY(5px);}
.m_quick ul li:last-child img{padding-bottom: 10px;}
.footer_inner{padding-bottom: 100px; background: #333;}

.top_btn{position: fixed; bottom: 13%; right: 5%; cursor: pointer; z-index: 10000;}
}
@media (max-width:767px){
  .m_quick ul{gap: 0px;}
  footer{height: auto; padding-bottom: 30px;}
  .footer_inner .l_logo{margin: 0 auto; width: 135px; padding: 10px 0;}
  .footer_inner .r_txt ul{display: block; justify-content: left; align-items: center; width: 100%;}
  .footer_inner .link{justify-content: center; padding: 0;}
}
@media (max-width:460px){}
@media (max-width:390px){}