@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css'); 
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');



html {
  font-size: 62.5%; /* 16px × 0.625 = 10px */    
  overflow-x: hidden ;   
} 


body {
    margin : 0 ; 
    padding : 0 ; 
   font-size: 1.6rem ;   
  }
 

  li{
    list-style: none;
  }  

   a{
    text-decoration: none;     
    color : #555 ; 
  }   
    


.header-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;      /* ← 폭 고정 */
  z-index: 20000;
  background-color: #fff;
  border-bottom: 1px solid #999;  
  box-shadow: 0 1px 1px 0 #999;
  
  /* ← 올바른 문법 */
}


.header-container {
  max-width: 1820px;
  height: 70px ; 
  margin: 0 auto;
  display: flex;
  align-items: center;            /* 수직 정렬 */
  padding: 0 24px;                /* 좌우 여백(선택) */
  box-sizing: border-box;
  background-color: #fff;
  width: 100%; }

.util  {
  max-width: 1820px;
  height: 44px ;        /* ← 114px로 맞추기 */
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;    
  align-items: center ;       /* 수직 정렬 */
  padding: 0 24px;                /* 좌우 여백(선택) */
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;     
}   



.lang-links {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px; /* 링크 사이 간격 */  
} 

.lang-links  a {
  text-decoration: none;  
  color : #555 ;  
}

.lang-links .divider {
  color: #ccc; /* 회색 느낌 */
  margin: 0 8px;  
}




.ci { 
width : 200px ; 
height : 70px ;     
box-sizing: border-box;
margin-right: 0;
}

.ci img{
  width : 100% ; 
  height : auto ; 
  padding-top : 36px ;  
}
 

.nav_bar {  
position : relative;  
width : 100% ;  
max-width: 1920px ; 
height: 70px;  
}   

ul.dep1 {
  display : flex ; 
  position : relative ;      
  width : 900px ;      
  margin : auto ; 
  padding-top : 22px ;   
  line-height: 48px ; 
}  

.login {
  width: 180px;
  height: 70px;
}

.login ul {
  display: flex;
  justify-content: space-between; /* 좌-우 끝 배치 */
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
}

/* 로그인 (왼쪽) */
.login-item {
  display: flex;
  align-items: center; 
  padding-top: 20px ; 
}

.login-item a {
  text-decoration: none ; 
  color : #555 ; 
}



.login-item::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background: url("../img/logcon.png") no-repeat center / contain;
}

/* 검색 아이콘 (오른쪽, a 태그 클릭 가능) */

.search-item{
  padding-top: 24px ;
}

.search-item a {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../img/search_h12.png") no-repeat center / contain;
  text-indent: -9999px; /* 텍스트 숨김 (접근성 필요 시 aria-label 사용 권장) */ 
  }

  .search-item img{
    width : 18px ; 
    height : 18px ; 
  }


.nav_bar ul{
  list-style: none; 
  color : #555 ; 
  padding-left : 0 ;     
}  


ul.dep1>li.depth1 {
  position : relative ; 
  width : 110px ;       
  text-align : center ; 
}      


ul.dep1>li.depth1:last-child {
  width : 200px ; 
}   



ul.dep1 > li.depth1 > a {
  position: relative;
display: inline-block;     
}


ul.dep1 > li.depth1 > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: red;
  transition: width 0.3s ease;
}



ul.dep1 > li.depth1 > a:hover::after {
  width: 100%;
}


ul.dep2 {
  display: flex;
  position: relative ;          
  width: 800px ; 
  line-height: 36px ;  
  color : rgb(26, 25, 25) ;      
  z-index : 100 ; 
}      

ul.dep2 > li.depth2 { 
  width : 360px ;     
  font-size: 1.4rem; 
  position: relative; /* dep3의 기준점 */        
  text-align: left ;
} 

ul.dep1 > li.depth1:first-child ul.dep2 > li.depth2 { 
  width : 250px }    


ul.dep1 > li.depth1:nth-child(6) ul.dep2 > li.depth2 { 
  width : 120px ; 
}  




.depth3>ul {
    display : flex ;   
} 

.depth3>ul > li {
    width : 140px ;     
    font-size: 1.2rem; 

}   



ul.dep2,
ul.dep3 {
  display: none;
}


.w100 {
  position: fixed;
  left: 50%;
  top: 114px ; 
  width : 100% ;  
  height: 0;
  background: #ffffff ;
  z-index : 10 ; 
  transition: height 0.3s;
  transform: translateX(-50%);    
  box-shadow: 0px 2px 2px 0px #999;  
  border-top: 1px solid #999 ;
}


ul.dep2, ul.dep3 { display: none; }
ul.dep1 > li.depth1:hover > ul.dep2 { display: flex; }
ul.dep1 > li.depth1:hover ul.dep3 { display: flex; flex-direction: column; } 

ul.dep1:hover ~ .w100,
ul.dep1:focus-within ~ .w100 {
  height: 460px; } /* 원하는 드롭다운 높이 */ 


/* 스와이퍼 시작 */   


     .swiper {  
      width : 100% ;           
      max-width : 1920px ; 
      height : 800px ;             
      top : 114px ; 
      margin-left: auto ; 
      margin-right: auto ;        
      position : relative ;         


    } 


    .swiper-wrapper{
     margin-left : 180px ;       
     width : 100% ; 
     max-width : 1920px ;    
     height : 800px ;          
     position : relative ;                
    }

 
    .prev_box{ 
      width : 100% ;  
      height : auto ; 
      max-width: 180px ; 
      height : 800px ;          
      top : 114px ;   
      left : 0 ;  
      padding : 0 ; 
    }  


 

 .horizontals .swiper-slide { position: relative; overflow: hidden; }

.caption{
  position: absolute; left: 12%; bottom: 40%;
  max-width: min(48ch, 60vw);
  color: #fff; z-index: 5; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.35); 
}


.caption .t1{ line-height: 1.1; font-size: clamp(28px,4vw,56px); letter-spacing: .02em; }
/* 50px 위로 이동 */
.caption .t1 {
  margin-top: -120px;
}
.caption .t2{ margin-top: .6em; font-size: clamp(14px,1.6vw,22px); opacity: .9; }     

.caption .t2 {
  transform: translateY(-30px);
}


.page_line {
  display: flex;  
  justify-content: flex-start;
  align-items: center; 
  transform: translateY(10px); } 

.line1 span,
.line2 span,
.line3 span,
.line4 span
{
  display: inline-block; 
  transform: translateY(-40px) ;  
  padding-left : 10px ; 
}



.line1, .line2, .line3, .line4 {
  width: 15%;
  height: 2px;
  background: #ece9e9;
  opacity: 0.3;
  animation: highlight 20s infinite; /* 4개 합쳐서 20초 루프 */
}

/* 각 선에 시작 지연을 줘서 배너 순서에 맞춤 */
.line1 { animation-delay: 0s; }
.line2 { animation-delay: 5s; }
.line3 { animation-delay: 10s; }
.line4 { animation-delay: 15s; }

@keyframes highlight {
  0%   { opacity: 0.3; } 
  5%   { opacity: 1; }   /* 첫 1초 동안 밝아짐 */
  25%  { opacity: 1; }   /* 4초 유지 */
  30%  { opacity: 0.3; } /* 다음 배너 넘어가면 다시 흐려짐 */
  100% { opacity: 0.3; }
}






.vertical-line {
  width: 2px;
  height: 150px;                 /* 최종 높이 고정 */
  background: #fff ; 
  margin: 0 16px;
  display: inline-block;
  opacity: 0.7;                    /* 고정 */
  transform-origin: top;         /* 꼭대기에서 시작 */
  transform: translateY(380px) scaleY(0);   /* 처음엔 0 */
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}

.vertical-line:after {
  content: '';
  display: block;
  width: 16px;           /* 화살표 이미지 너비 */
  height: 16px;          /* 화살표 이미지 높이 */
  margin: 0 auto;
  margin-top: 150px;       /* 세로선과의 간격 */
  background-image: url(../img/arrow_down.png);
  background-repeat: no-repeat;
  background-size: contain;  
  transform: translateX(-7px);

}

.vertical-line.active {
  transform: translateY(380px) scaleY(1);  
  opacity : 1 ;  /* 위→아래로 펼쳐짐 */
}




.s_text { 
  transform: translateY(350px); 
}


.line {  /* 더모어 라인 */
  position: relative;
  width: 15%;
  height: 2px;
  background: #993232;
  opacity: 0.3;
  overflow: hidden;
}
  

/* 숫자 스타일 */
.line span {
  position: absolute;
  top: -100px;   /* 라인 위쪽으로 띄움 */
  left: 50%;
  transform: translateX(-50%);  
  font-size: 10px;
  font-weight: 500;
  color: #666;     
}
/* 배너 컨테이너가 기준점이 되도록 */
.swiper.horizontals {position: relative; } 

.chatbot1 {
  position: fixed;
  width: 100px;
  height: 100px;
  right: 40px;
  top: 35px;
  z-index: 20000;
  transition: position 0.5s ease; /* 부드러운 전환 느낌 */ 
}

.chatbot1:before{
  content: "";
  position: absolute;
  top: -45px;                    /* Position above the chatbot */
  left: 45%;
  transform: translateX(-100%);   /* Center horizontally */
  width: 180px;                  /* Adjust size as needed */
  height: 80px;                  /* Adjust size as needed */
  background-image: url(../img/chat_text.png);
  background-repeat: no-repeat;
  background-size: contain;      /* Fit image within dimensions */
  background-position: left; 
  z-index: -1;    
}


.chatbot1 img {
  width: 72%;
  height: 72%;
}

/* 스크롤 920px 이후 적용될 상태 */
.chatbot1.sticky {
  position: sticky;
  top: 140px; /* sticky에서 기준점 */
  right : 30px ; 
  transform: translateX(1790px)  
}



.chatbot2 {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 170px;
  bottom: 20px;
  z-index: 30000; 
/*     background-color: rgb(136, 65, 65);
 */
} 




.chatbot2 img {
  width : 72% ; 
  height : 72% ; 
}


.chatbot2::before {
  content: "";
  position: absolute;
  top: -45px;                    /* Position above the chatbot */
  left: 45%;
  transform: translateX(-100%);   /* Center horizontally */
  width: 180px;                  /* Adjust size as needed */
  height: 80px;                  /* Adjust size as needed */
  background-image: url(../img/chat_text.png);
  background-repeat: no-repeat;
  background-size: contain;      /* Fit image within dimensions */
  background-position: left; 
  z-index: -1;  
}



/* 메인 콘텐츠 시작 */ 


.main-container {
  position: relative;
  width: 100%;
  height: auto; 
  box-sizing: border-box;     
  z-index: 1;  
  padding-top: 180px; 
}  



 .shopping_now{ 
  width : 100% ; 
  max-width : 1280px ;        
  height : 300px ;  
  margin: auto ;  
  padding-top : 30px ; 
 }


 .title_a {  
  width: 1280px;
  height: 72px;  
  margin : auto ; 
 text-align : center ;  
   align-items: center;   
}


.eng_title_01{ 
  font-family: Garamond, serif;
  font-size: 60px; 
  font-weight : 400 ; 
  align-items: center;   
}  




.desc_1 {
  position: relative;
  width: 700px;
  height: 60px;   
  margin-top: 53px ;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;        
 transform : translateX(5px) ;    
 display: flex;
 align-items: center ; 
} 

.desc_1::before{
  content: ''; 
  background-image: url(../img/news_login.gif) ; 
  background-repeat: no-repeat;
  width : 60px ; 
  height : 60px ; 
}





.more-info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 45px;
  margin: 36px auto 0;
  font-size: 14px;
  color: #9c2323;
  cursor: pointer;  
} 



/* 공통 라인 스타일 */
.more-info .line 
{
  position: absolute;
  background: #9c2323;
  transition: transform 0.3s ease;
} 




/* 밑줄(기본 보이게) */
.more-info .bottom 
{
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;  
}


/* 나머지 변 (처음엔 숨김) */ 

.more-info .right  
 {
  bottom: 0;
  right: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition-delay: 0.2s; 
}

.more-info .top
 {
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition-delay: 0.2s;
}

.more-info .left 
{
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition-delay: 0.2s;   
}


/* hover 시 순차적으로 라인 표시 */

.more-info:hover .right 
{
  transform: scaleY(1); 
}

.more-info:hover .top 
{
  transform: scaleX(1); 
}

.more-info:hover .left   
{
  transform: scaleY(1);
} 


.more-info-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 45px; 
  font-size: 14px; 
  color: #fff ;   
  top : 240px ;  
  left : 300px ;   
} 



.more-info-2 .line{
  position: absolute;
  background: #fff ; 
  transition: transform 0.5s ease;
}


.more-info-2 .bottom 
{
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;  
}

.more-info-2 .right  
 {
  bottom: 0;
  right: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  transition-delay: 0.1s; 
}

.more-info-2 .top
 {
  top: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition-delay: 0.3s;
}


.more-info-2 .left 
{
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition-delay: 0.4s;     
}


.more-info-2.hover .top { transform: scaleX(1); }
.more-info-2.hover .right { transform: scaleY(1); }
.more-info-2.hover .left { transform: scaleY(1); }  


.shin_now{
  width : 100% ; 
  max-width : 1280px ;  
  margin-top: 180px ;
  height : auto ; 
 text-align: center;  
  margin: 160px auto 0  ;     
  padding : 30px ; }  








.gal_pop{
  position: relative; 
  display: flex;  
  justify-content: space-evenly; /* 아이템을 박스 안에서 완전히 균등 간격으로 배분 */
  width: 1280px;
  height: 356px; 
  margin: 60px auto;   
  padding-top: 20px; 
}

.image-box1  { 
  width: 234px; 
  height: 356px;     
  border-bottom: 1px solid red;  
  overflow: hidden;
}

.image-box1  > a > img {
  width: 100%; 
  height: 100%;    
} 




.des_box1 {
  width: 234px; 
  height: 200px; 
  background-color: rgba(0, 0, 0, 0.7) ; 
  opacity: 0; 
  transition: all 0.5s;  
  color : white ;    
  text-align: left ;   
  padding-left : 20px ; 
}

.des_box1 h6, h4 {
  font-weight: 400 ;   
}

.des_box1 h6:first-child::after {
  content: '' ; 
  background-image: url(../img/insta.png);  
  width : 20px ; 
  height : 20px ;  
}



.image-box1:hover .des_box1,
.image-box2:hover .des_box1,
.image-box3:hover .des_box1,
.image-box4:hover .des_box1 {
  border-top: 1px solid red;
  opacity: 1; 
  transform: translateY(-200px);   
}




.desc_6{
   width : 100% ; 
  max-width : 1280px ;  
  height : 96px ; 
  margin : auto ; 
  padding-top: 60px ; 
  padding-bottom: 15px;   
  text-align: center; 
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
  font-size: 1.6rem;
  font-weight: 600 ; 
  box-sizing: border-box;   
}  


 .desc_7 { 
  position: relative; 
  width : 100% ; 
  max-width : 1280px ;  
  margin: auto;
    margin-bottom: 30px ;  
  height: 14px;
  line-height: 14px;
  margin-bottom: 30px ;  
  text-align : center ;  
  box-sizing: border-box;
} 


.sns_box { 
  width : 100% ; 
  max-width : 350px ;
  height: 50px ; 
  margin : 0 auto ;    
  box-sizing: border-box; 
}



.sns_box ul {
  width : 350px ; 
  height : 30px ; 
  display : flex;  
  margin : 0 ; 
  padding : 0 ; 
  justify-content: space-between;       
}  





.art_culture{  
  width : 100% ; 
  max-width : 2000px ;  
  height : 800px ; 
  margin : auto ;     
  margin-top: 180px ; 
  padding-top : 30px ; 
}

 .art_culture .title_a {
  margin-bottom: 60px ; } 




.playbox {
  position: relative;   
  width: 2000px;
  height: 480px; 
  background: #475235; 
  left : -1400px ;  
  padding-right : 100px ;  
  margin-top :  60px ; 
}





  .artimg{
  position : relative ; 
  display: flex;
  flex-direction : row ; 
  flex-wrap: nowrap;
  padding-top : 30px ;  
  left : 1800px; 
  top : 50px ; 
  width : 1520px ; 
  height : 480px ;    
  transform: translateX(100px);  
  transform: translateY(-500px);      
}    

.artimg7 {
  position: relative;
  width: 480px;
  height: 480px;   
  margin-right : 40px ; 
}  

.artimg7 > a >img {
  width : 100% ; 
  height : 100% ; 
}


.artimg8 {
  position: relative;
  width: 480px;
  height: 480px;   
  margin-right : 40px ; 
} 

.artimg8 > a > img {
    width : 100% ; 
  height : 100% ;   
} 

.artimg9 {
  position: relative;
  width: 480px;
  height: 480px;  
  margin-right : 40px ;   
}

.artimg9 > a > img {
  width : 100% ; 
  height : 100% ;   
}





/* 브랜드 갤러리 */    

.brand{
  width: 100%;
  max-width: 1920px;
  height : auto ; 
  margin-top: 160px ; 
  margin-right : auto ; 
  margin-left : auto ; 
  padding-top: 30px;        
}     


/* 래퍼 */

.logo-rail{
  position: relative;
  max-width: 1280px;
  margin: 40px auto;
  padding: 0 40px; /* 좌우 여백은 줄임 */
  box-sizing: border-box;
  overflow: hidden;  
}

.inline-slick .slide{
  padding: 0 16px;
  box-sizing: border-box;
}


.inline-slick .slide img{
  display: block;
  height: 100px;
  width: auto; 
}

/* 커스텀 화살표 버튼 */
.mid-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 위치를 "사이"로 조정 */
.mid-arrow.prev{ left: 35%; }   /* 가운데 왼쪽 */
.mid-arrow.next{ right: 35%; }  /* 가운데 오른쪽 */





/* 브랜드 갤러리 그리드 */
.gallery-box {
  width: 100%;
  max-width: 1280px;
  height: 1064px;                   margin: 120px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);  /* 2행 균등 분배 */  
}

/* 그리드 셀 공통 */
.gallery-box > div {
  position: relative;
  min-width: 0;      /* ↓ 콘텐츠가 셀보다 커도 축소 허용 */
  min-height: 0;
  overflow: hidden;
}

/* 셀을 100%로 채우는 동영상 */
.gallery-box > div > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 꽉 채우되 잘림 허용(비율 유지) */
}

.media01 { grid-area: 1 / 1 / 2 / 2; } /* 1행 1열 */
.media02 { grid-area: 1 / 2 / 2 / 3; } /* 1행 2열 */
.media03 { grid-area: 1 / 3 / 2 / 4; } /* 1행 3열 */
.media04 { grid-area: 2 / 1 / 3 / 2; } /* 2행 1열 */
.media05 { grid-area: 2 / 2 / 3 / 3; } /* 2행 2열 */
.media06 { grid-area: 2 / 3 / 3 / 4; } /* 2행 3열 */


/* 매거진 */  

.magazin{ 
  position: relative;
  width : 100% ; 
  max-width : 1920px ; 
  height : 3000px ; 
  margin-top: 180px ; 
  margin-left: auto;  
  margin-right: auto;   
  padding-top: 30px ;  
} 



.mega_box{ 
  position: relative;
  width : 100% ; 
  max-width : 1300px ;  
  height : auto ; 
  margin-top: 60px ; 
  margin-left: auto;  
  margin-right: auto;    
  display : flex ; 
  flex-direction: row;  
}

.mega_01{  
  position : relative ;   
  width :400px ; 
  margin-top: 40px ;
  height : 2500px ;    
  padding-right : 40px ; 
  padding-top : 40px ;     
  border-right: 0.1px solid #999;    
  overflow-y: visible; 
}  

.mega_01 img {
  position : sticky ;  
  top : 120px ;      
}  




.mega_02, .mega_03, .mega_04{
  position: relative;   
  width :300px ;  
  height : auto ;    
  box-sizing: border-box;  
  padding-top : 40px ;  
  border-right: 0.1px solid #999; 

}    


.mega_02 ul,
.mega_03 ul, 
.mega_04 ul {
  width: 260px;     
  box-sizing: border-box;    
  margin-bottom : 100px ;    
} 

.mega_02 img, 
.mega_03 img, 
.mega_04 img {
  width : 100% ; 
  height : auto ; 
}




.li_title{ 
  padding : 30px 20px 0 10px ; 
  font-weight: 400; 
  font-size : 1.8rem ; 
} 

.li_desc{ 
  padding : 10px 20px 0 10px ; 
  font-weight: 400 ;  
  font-size: 1.6rem; 
}



.media02 {
  padding : 20px ; 
}

.media02 h3 {
  font-size: 2.4rem ;  
  font-weight: 400 ;
  font-family: 'Nanum Myeongjo', serif;
  letter-spacing : 6px ;     
  text-align: center; 
}



.media02 h5 {
font-size : 16px ; 
text-align: center ; 
font-weight: 300 ;  
}


.media02 h6{
  font-size: 1.2rem ;    
  margin-top : 120px ;  
  color : #767676;     
  text-align: center;
  text-decoration: underline ;   
}


/* 메인 배너 애니메이션 */

.swiper-slide {
  position: relative; 
  width : 100% ; 
  max-width: 1920px;       /* 필요 시 반응형으로 바꿔도 OK */
  height: 1080px;
  overflow: hidden;  
}



.banner-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;            /* JS에서 키움 */
  height: 100%;  
  object-fit: cover;
  visibility: hidden;  /* JS에서 보이게 전환 */
  /* transition은 기본적으로 꺼둠 (JS에서 on/off 제어) */
  transition: none;
}

.banner-anim-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;            /* JS에서 키움 */
  height: 100%;  
  object-fit: cover;
  visibility: hidden;  /* JS에서 보이게 전환 */
  /* transition은 기본적으로 꺼둠 (JS에서 on/off 제어) */
  transition: none;
}



footer{
  width : 100% ; 
  height : auto ; 
  background-color: #232323 ;    
  color : #777 ;  
}
 

.footer_inner{
width: 1280px ;   
max-height : 250px ; 
margin : 0 auto ;   
display: grid;  
grid-template-columns: 1fr 9fr ;   
grid-template-rows: 2fr 1fr 7fr ;   
font-size: 12px ; 
color : #555 ; 
} 



.f_ci{ 
  grid-column: 1/2; 
  grid-row: 1/2; 
  max-height : 80px ;    
  padding-top: 20px ;  
} 

.f_ci > img {  
  width : 100% ; 
}   


.combo { 
 grid-column: 1/-1; 
  grid-row: 2/3 ; 
  max-height : 50px ; 
} 

.combo ul {
  display : flex ; 
  justify-content : flex-end ;  
} 


.combo ul li img {
  width : 70% ;   
}


.f_content {
  grid-column: 2/-1; 
  grid-row: 1/2 ;    
  max-height : 100px ;   
}

.f_content ul{
  display: flex; 
  padding-left : 20px ;  
}

.f_content ul:first-child li {
  width : 100px ;    
  text-align: left ;    
}


.f_content ul:nth-child(2) li {
  width : 140px ;  
  text-align: left ;  }     

.f_content ul:nth-child(2) li:nth-child(2){ 
   width : 180px ; 
  text-align : left ; 
}

.f_content ul:nth-child(2) li:nth-child(3){
  text-align : center ; 
}

.address{
  grid-column: 1/-1 ; 
  grid-row : 3/4 ;       
}  

.address ul {
  display : flex ; 
  justify-content: space-between;     
  padding-left: 0 ;  
  }    


.address ul li {
    text-align: left ;   
}