/*------------------------------------------------------------------
Project:    Haswell
Version:    2.5
Last change:    07.11.2020
Author: Abcgomel
Site: https://themeforest.net/user/abcgomel/portfolio
-------------------------------------------------------------------*/

/*    GLOBAL STYLES
===================================================================*/
/*=== CONTENT OF CSS FILE =========================================

    #PRELOADER
    #CSS RESET
  #SEARCH
  #REVO #SLIDER custom
    #IMAGES
    #HEADER
  #FEATURES 1
  #FEATURES 2-3
  #FEATURES 4
  #FEATURES 5
  #FEATURES 6
  #FEATURES 7
  #FEATURES 8
  #FEATURES 9
  #FEATURES 10
  #SHOP
  #SHOP #DEPARTMENT
  #SHOP #ITEMS
  #SHOP #INFO
  #PORTFOLIO 1 GRID
  #PORTFOLIO 1
  #PORTFOLIO SINGLE
  #CLIENTS 1
  #TESTIMONIALS 1
  #TESTIMONIALS 2
  #WORK PROCESS 1
  #ABOUT US 1
  #ABOUT US 2
  #COUNTERS 1
  #ADS 1 & 2
  #VIDEO ADS 1
  #BLOG SECTION 1
  #BLOG SECTION 2
  #BLOG #WIDGETS
  #CONTACT INFO SECTION 1
  #GMAPS 1
  #STATICK MEDIA
  #PAGE TITLE
  #CONTACT MENU
  #CONTACT FORM
  #FOOTER 1
  #FOOTER 2
  #FOOTER 2 BLACK
  #MENU 
        #MAIN-MENU MENU
        #INDENT MAIN CONTAINER  ( responsive in "media query" section)
        #STICKY ICON BUTTON ANIMATION
        #ANIMATION FOR SUB MENU
    #MEGAMENU
    #PRIMARY MENU
  #HEADER FIX
  #LOGO
  #BREADCRUMB 
  #CAROUSEL
  #NEWSLETTER
  #OUR CLIENTS
  #TABS
  #BLOCKQUOTES
  #TESTIMONIALS
  #PAGE TITLE
  #404
  #COMING SOON
  #ALERT BOXES
  #SHORTCODES #DEMO
  #BLOG
  #COMMENTS 
  #WORK NAV
  #RELATED POSTS
  #PROGRESS BAR
  #MAINTENANCE
  #PORTFOLIO
  #ELEMENTS
  #FOOTER
  #TYPOGRAPHY
  #BUTTONS
  #MARGINS #PADDINGS
  #BACK TO TOP BUTTON
  #FAQ
  #COUNTER
  #ACCORDION-CUSTOM
  #ACCORDION 3
  #ACCORDION
  #TOGGLE
  #PRICING TABLE
  #TIMELINE
  #CLEARFIX
   
  === #RESPONSIVE STYLES =======================================
  
    #PORTFOLIO FILTER
    
    Max Width "600px"
        #TESTIMONIALS
        
    Max Width "640px"

    Max Width "767px"

    Max Width "875px"

    Max Width "991px" - Min Width "768px"
        #SERVICES
        
    Max Width "991px"  PHONE
        #MARGINS MOBILE
        #PAGE TITLE
        #GOOGLE MAP
        #NEWSLETTER
        #HEADER
        #SLIDER 1
        #TWITTER
        #TESTIMONIALS
        #SERVICES
        #TIMELINE 
        #MAINTENANCE
        #HEADER MENU
        #INDENT MAIN CONTAINER
        #FOOTER
        #FOOTER 2
        #PRICING TABLE
    
    Min Width "992px" DESKTOP
        
    Max Width "1199px" - Min Width "992px"

    Max Width "1024px" TABLET
        #BOXES 2 
        #FOOTER
        #FOOTER 2
        #TWITTER
        #FOOTER CONTACT INFO
        
    Max Width "1200px"  
    
    Max Width "479px"
    
=== #Core Owl Carousel CSS File 
=== #Owl Carousel Owl Demo THEME CSS File 
=== #Magnific Popup CSS File

  #INDEX-PORTFOLOLIO 2 NEW
  #TRAVEL NEW
  #SIDE MENU NEW 
  #FULL SCREEN MENU NEW
  #TWITTER FEEDS NEW
  #FLICKR FEEDS NEW
  #TOP BAR NEW
  #CONSTRUCTION 2 NEW
  #CAFE NEW

*/

/*폰트 및 사이즈 추가 */

.fs60 {font-size: 60px}
.fs56 {font-size: 56px}
.fs52 {font-size: 52px} 
.fs48 {font-size: 48px} 
.fs44 {font-size: 44px} 
.fs40 {font-size: 40px}
.fs36 {font-size: 36px} 
.fs30 {font-size: 30px} 
.fs24 {font-size: 24px} 
.fs20 {font-size: 20px}
.fs18 {font-size: 18px}
.fs16 {font-size: 16px}
.fs14 {font-size: 14px}
.fs12 {font-size: 12px}

.fc-3a {color:#3a3a3a} 
.fc-80 {color:#800000} 
.fc-gr {color:#a0ce4e}
.fc-sky {color:#03a9f4}
.fc-white {color:#fff}

.pd5 {padding: 5px}
.pd10 {padding: 10px}
.pd20 {padding: 20px}
.pd30 {padding: 30px}

.pl10 {padding: 10px}

.wd100 {width: 100%}

.txt-red {color: #ff0000}
.txt-blue {color: #0a69c8}

.mht100 {min-height:100px}

.lt-10 {line-height: 100%}
.lt-13 {line-height: 130%}
.lt-15 {line-height: 150%}
.lt-18 {line-height: 180%}
.lt-20 {line-height: 200%}
.lt-24 {line-height: 240%}

.mt-10 {margin-top: 10px}
.mt-20 {margin-top: 20px}
.mt-30 {margin-top: 30px}
.mt-40 {margin-top: 40px}
.mt-50 {margin-top: 50px}
.mt-60 {margin-top: 60px}
.mt-70 {margin-top: 70px}
.mt-80 {margin-top: 80px}
.mt-90 {margin-top: 90px}
.mt-100 {margin-top: 100px}

.mb-10 {margin-bottom: 10px}
.mb-20 {margin-bottom: 20px}
.mb-30 {margin-bottom: 30px}
.mb-40 {margin-bottom: 40px}
.mb-50 {margin-bottom: 50px}
.mb-60 {margin-bottom: 60px}
.mb-70 {margin-bottom: 70px}
.mb-80 {margin-bottom: 80px}
.mb-90 {margin-bottom: 90px}
.mb-100 {margin-bottom: 100px}

.red {color:#dd3d32; }
.sky {color:#229cff; }
.blue {color:#3765aa; }
.green {color: #15a625;}
.purple {color: #a37dd4}
.olive {color: #827f0a}
.ocean {color: #00aead}
.st {font-weight: bold}


.wb-k {word-break:keep-all;}
.tc {text-align:center;}
.divcon {width: 100%;max-width: 600px;}

.box-solid {border: 1px solid #f1f1f1;min-height: 100px;padding: 10px;}

.flexcenter {display: flex;justify-content: center;align-items: center;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

@font-face {
    font-family: 'MinSans-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MinSans-Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/MinSans-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.my_btn {    
    background: var(--accent-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border-radius: 50px;
    transition: 0.3s;
}
.my_btn a{
    color: #fff;
}


.ams_title {
  width: 100%;
  background: linear-gradient(315deg, #5fa8ff, #2d6cdf);
  color: #ffffff;
  padding: 12px 20px;
  font-size: 22px;
  font-weight: 700;
  border-radius: 12px;              /* 둥근 모서리 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);  /* 은은한 그림자 */
  box-sizing: border-box;
  letter-spacing: -0.5px;  
  margin-top: 20px;
}

/* 모바일 */
@media (max-width: 768px) {
  .titlebar {
    font-size: 19px;
    padding: 16px 18px;
    border-radius: 10px;
  }
}


/* 전체 컨테이너 - 그리드 */
.btn-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* PC 6개 */
  gap: 12px; /* 버튼 간격 */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 16px;
  margin-bottom: 20px;
}

/* 버튼 스타일 */
.btn-item {
  background: #f8f9fc;
  border: 1px solid #dcddec;
  padding: 18px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;   /* 네모(살짝 둔각) */
  transition: 0.2s;
  width: 100%;
}

/* hover 효과 */
.btn-item:hover {
  background: #e2e5f3;
  border-color: #b7b9c9;
}

/* 태블릿: 4개 */
@media (max-width: 992px) {
  .btn-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 모바일: 2개 */
@media (max-width: 600px) {
  .btn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.icon-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px; /* 아이콘과 글씨 간격 */
  text-decoration: none; /* 밑줄 제거 */
  border: none;
}

.icon-box h4 {
  margin: 0;
}

.why-us .icon-box a{
border: 0px solid
}