/**
 * Template Name: Fungi
 * Template Url: http://ethemestudio.com/demo/fungi
 * Author: eThemeStudio
 * Author Url: http://procodr.com
 * Version: 2.2.7
 * Initial Release: November 22, 2022
 * Last Update: December 13, 2023
 * 
 */
/* 

====================
  Table of Contents 
====================

1. Variables
2. Common Styles
3. General Style
4. Header
5. Hero Area
6. Intro Section
7. About Section
8. Skill Section 
9. Portfolio Section 
10. Service Section
11. Features Section
12. Testimonial Section
13. Blog Section
14. Partner Section
15. Contact Section
16. Site Footer
17. Libraries
18. Media Queries

 */
 /* 6. Extra extra large (xxl) */
@media (min-width: 1400px) {
  /* Extra extra large devices (larger desktops) */
}

/* 5. Extra large (xl) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* Extra large devices (large desktops) */
}

/* 4. Large (lg) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Large devices (desktops) */
}

/* 3. Medium (md) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Medium devices (tablets) */
}

/* 2. Small (sm) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Small devices (landscape phones) */
}

/* 1. Extra small (xs) */
@media (max-width: 575.98px) {
  /* Extra small devices (portrait phones) */
}

/***********************************************************
  1. Variables 
************************************************************/
/* brand colors */
:root{
  --primary:#d31421;
  --secondary:#00B5E2
}
/***********************************************************
  2. Common Styles 
************************************************************/
.section-title{width:50%;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:72px}
.section-title h2{position:relative;display:inline-block;line-height:1;font-size:24px;text-transform:uppercase;margin-bottom:24px}
.section-title h2:before,.section-title h2:after{content:'';width:0;height:0;border:8px solid transparent;border-bottom-color:var(--primary);position:absolute;top:2.5px}
.section-title h2:before{border-left-color:var(--primary);right:-30px}
.section-title h2:after{border-right-color:var(--primary);left:-30px}
.section-title.dark h2{color:#fff}
.section-title.dark .lead{color:#bdb9cb}
.block-title{font-size:48px;margin-bottom:30px}
.block-title span{display:block;font-size:18px;text-transform:uppercase;color:var(--primary)}
.lead{color:#948daa}
.lead.dark{color:#b0aac0}
.btn-main{padding:15px 42px;background:var(--primary);color:#fff;border-radius:5px;font-family:'Pretendard',sans-serif;text-transform:uppercase}
.btn-main:hover{background:#a82401;color:#fff}
.btn-ghost{padding:13px 40px;background:transparent;color:#fff;border-radius:5px;font-family:'Pretendard',sans-serif;text-transform:uppercase;border:2px solid var(--primary)}
.btn-ghost:hover{background:var(--primary);color:#fff}
.btn-text{font-family:'Pretendard',sans-serif;text-transform:uppercase}
.fixed-top{background:#f5edd8;z-index:1001!important}
.fixed-top .navbar-brand img{width:108px}
/* Keyframe animations */
@keyframes anim-rotate {
  0%{transform:rotate(-30deg)}
  50%{transform:rotate(-45deg)}
  100%{transform:rotate(-30deg)}
  }
  @keyframes anim-updown {
  0%{transform:translateY(0)}
  50%{transform:translateY(30px)}
  100%{transform:translateY(0)}
  }
  .elem-updown{animation:anim-updown 5s infinite}
  @keyframes anim-move {
  0%{transform:translateX(0)}
  50%{transform:translateX(30px)}
  100%{transform:translateX(0)}
  }
  .elem-move{animation:anim-move 5s infinite}
  @keyframes anim-rotate-full {
  0%{transform:rotate(0deg)}
  50%{transform:rotate(360deg)}
  100%{transform:rotate(0deg)}
  }
  .elem-rotate-full{animation:anim-rotate-full 12s infinite}
  @keyframes anim-zoom {
  0%{transform:scale(0.8)}
  50%{transform:scale(1)}
  100%{transform:scale(0.8)}
  }
.elem-zoom{animation:anim-zoom 5s infinite}
/***********************************************************
  3. General Style 
************************************************************/
body{font-family:'Pretendard',sans-serif;font-size:18px;color:#615978;overflow-x:hidden}
body.dark-mode{background:#222}
a{color:var(--primary);text-decoration:none;transition:.3s}
a:hover{color:#da2f02}
p:last-of-type{margin-bottom:0}
ul{padding-left:0}
li{list-style:none}
.section-block{padding-top:120px;padding-bottom:60px}
.section-block .row > div{margin-bottom:60px}
h1,h2,h3,h4,h5,h6{font-family:'Pretendard',sans-serif;color:#222}
.dark-mode h1,.dark-mode h2,.dark-mode h3,.dark-mode h4,.dark-mode h5,.dark-mode h6{color:#fff}
.dark-mode p{color:#b0aac0}
.dark-mode .modal .modal-content{background:#2f2f2f}
.dark-mode .modal .meta-wrapper{background:#414141;color:#b0aac0}
.dark-mode .modal .meta-wrapper .meta-value{color:#fff}
.dark-mode .design-elements{opacity:.7}
.hidden,.hide{display:none!important}
/***********************************************************
  4. Header
************************************************************/
.site-header{position:absolute;width:100%;z-index:1001}
.site-header .navbar{z-index:1;transition:.3s}
.site-header .navbar.fixed-top{padding-top:12px;padding-bottom:12px}
.site-header .nav-item .nav-link{padding-left:1.2rem;padding-right:1.2rem}
.site-header .nav-item .active{color:var(--primary)}
.site-header a{color:#222;text-transform:capitalize;font-family:'Pretendard',sans-serif;font-weight:700}
.site-header a:hover,.site-header a:focus{color:var(--primary)}
.site-header .navbar-brand img{height:47px;width:auto}
.dark-mode .site-header a{color:#fff}
.dark-mode .site-header a:hover{color:var(--primary)}
.dark-mode .site-header .fixed-top{background:#1a1a1a}
.blog-content .content-wrapper{padding-top:20px;padding-bottom:20px}
/***********************************************************
  5. Hero Area
************************************************************/
.hero-area{background-color:#f5edd8;position:relative;z-index:1;overflow:hidden}
.hero-area .hero-content{position:relative;z-index:10}
.hero-area .hero-content > .row{width:100%}
.hero-area .hero-head{color:#fdb63c;font-size:86px}
.hero-area .hero-head small{font-size:24px;margin-bottom:12px;display:block;color:#222}
.hero-area .hero-head strong{color:var(--primary);display:block}
.hero-area .content-block p{font-size:24px}
.hero-area .image-block{text-align:right}
.hero-area .image-wrapper{position:relative;transform-style:preserve-3d;display:flex}
.hero-area .image-wrapper .img-main{width:100%;margin-left:auto;margin-right:0;display:flex;align-self:end}
.hero-area .hero_color_1,.hero-area .hero_color_2,.hero-area .hero_color_3,.hero-area .hero_color_4{position:absolute;width:80px}
.hero-area .hero_color_1{width:100px;left:20%;top:15%}
.hero-area .hero_color_2{width:240px;left:15%;bottom:7%}
.hero-area .hero_color_3{width:130px;right:9%;top:19%}
.hero-area .hero_color_4{width:180px;right:5%;bottom:11%}
.hero-area .link-group{margin-top:60px}
.hero-area .hero-social{display:inline-block}
.hero-area .hero-social .list-inline-item{margin-right:24px}
.hero-area .hero-social .list-inline-item.facebook-link a:hover{color:#1877f2}
.hero-area .hero-social .list-inline-item.twitter-link a:hover{color:#1da1f2}
.hero-area .hero-social .list-inline-item.linkedin-link a:hover{color:#0077b5}
.hero-area .hero-social .list-inline-item.youtube-link a:hover{color:red}
.hero-area .hero-social .list-inline-item.instagram-link a:hover{color:#405de6}
.hero-area .hero-social a{color:var(--primary);font-size:24px;transition:.3s}
.hero-area .btn-main{margin-right:12px}
.hero-area .btn-text:hover{color:#fff}
.hero-area .ball{position:absolute;border-radius:100%;opacity:.7}
.dark-mode .hero-area{background:#343434}
.dark-mode .hero-area .hero-head small{color:#fff}
.dark-mode .hero-area .hero_color_1,.dark-mode .hero-area .hero_color_2,.dark-mode .hero-area .hero_color_3,.dark-mode .hero-area .hero_color_4{opacity:.9}


.tilt-box .item-wrapper{border:1px solid #e0e0e0;padding:48px;border-radius:12px;position:relative;background:#fff;transition:.3s}
.tilt-box .item-wrapper:after{content:'';width:100%;height:100%;position:absolute;top:0;left:0;background:var(--primary);transition:.3s;z-index:-1;border-radius:12px}
.tilt-box .item-wrapper:hover{box-shadow:10px 10px 50px rgba(0,0,0,0.1);border-color:#fff}
.tilt-box .item-wrapper:hover:after{transform:rotate(-10deg)}
.tilt-box .icon-box{font-size:48px;color:#fdb63c}
.root_daum_roughmap{width:100%!important}
.wrap_map{height:500px!important}
/***********************************************************
  6. Intro Section  
************************************************************/
.tab-content{position:relative;overflow:hidden}
.tab-pane{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}
.tab-pane.show.active{position:relative;opacity:1;visibility:visible}
#pills-tabContent{min-height:400px}
/* 부모 요소에 flexbox 적용 */
.d-flex{display:flex;height:100%}
.intro-section{position:relative;background-repeat:no-repeat;background-position:6% 100%;background-size:auto 782px;min-height:100vh}
.intro-section .nav{border:0;padding-top:10px;}
.intro-section .nav button{color:#555;font-weight:700;display:block;border:1px solid #d2d2d2;margin-bottom:12px}
.intro-section .nav button.active{background-color:var(--primary)}
.intro-section .tab-content .tab-pane p{font-size:16px;line-height:30px;word-break:keep-all}
.intro-section .tab-content .tab-pane button{font-size:19px;font-weight:700!important;background:0 0;color:#222;padding-left:0}
.intro-section .tab-content .tab-pane button i{background:var(--primary);color:#fff;border-radius:100%;padding:3px;margin-right:12px}
.intro-section .tab-content .tab-pane .accordion-button:focus{border-color:transparent;box-shadow:none}
.intro-section .accordion-item{border:0}
.intro-section .tab-content .tab-pane ul li{font-size:16px;margin-bottom:14px}
.tab-content .tab-pane{flex-direction:column;min-height:100%;height:100%;align-items:center}
.section-t{font-weight:700;font-size:52px}
.intro-section h3{font-size:28px;margin-bottom:18px}
.intro-section .de-intro-1{position:absolute;left:5%;top:10%}
.dark-mode .intro-section .item-wrapper{background:#2f2f2f;border:none}

/**/
.youtube-section .swiper-slide{height:340px;transition:all .3s ease;overflow:hidden;border-radius:24px}
.youtube-section .swiper-slide:not(.swiper-slide-active){margin-top:24px}
.youtube-section .swiper-slide:hover{cursor:pointer}
.youtube-section .swiper-slide-active{height:400px}
.youtube-section .swiper-slide .d-flex{height:100%;width:100%}
.youtube-section .swiper-slide img{width:100%;height:100%;object-fit:cover;object-position:center}
.youtube-section .swiper-slide .title{padding:10px;background:rgba(0,0,0,0.7);color:#fff;position:absolute;bottom:0;left:0;right:0;text-align:center}
.youtube-section .swiper-pagination{position:relative;z-index:1}
.youtube-section .swiper-button-prev{left:27px}
.youtube-section .swiper-button-next{right:27px}
.youtube-section .swiper-button-next,.youtube-section .swiper-button-prev{background-image:none;width:40px;height:40px;border:2px solid #222;border-radius:100%;text-align:center;display:flex;justify-content:center;align-items:center;transform:translateY(-50%);top:70%;margin-top:66px}
.youtube-section .swiper-button-next::before,.youtube-section .swiper-button-prev::before{font-family:'xeicon';font-size:34px}
.youtube-section .swiper-button-next::before{content:"\e93e"}
.youtube-section .swiper-button-prev::before{content:"\e93b"}
.youtube-section .swiper-slide .d-flex::before{font-family:'xeicon';content:"\ec32";font-size:104px;color:red;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.popup{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.8)}
.popup-content{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:100%;height:800px}
.youtube-section .swiper-pagination span{height:20px;width:20px;margin:0 3px}
.popup-content iframe{height:100%}
.close{color:#fff;position:absolute;top:-40px;right:0;font-size:28px;font-weight:700;cursor:pointer}
.youtube-section{background:#f5f5f5}
/***********************************************************
  7. About Section 
************************************************************/
.about-section{padding-bottom:80px;background:#f2f5fb;position:relative}
.about-section .img-wrapper{position:relative;text-align:center}
.about-section .img-wrapper:before,.about-section .img-wrapper:after{position:absolute;content:''}
.about-section .img-wrapper:before{width:60px;height:60px;border-radius:7px;border:5px solid #fdb63c;left:30px;top:190px}
.about-section .img-wrapper:after{width:36px;height:36px;background:var(--primary);left:332px;bottom:-90px;border-radius:4px}
.about-section .about-img-2{position:absolute;left:0;bottom:-200px}
.about-section .content-block h2{font-size:48px;margin-bottom:30px}
.about-section .content-block h2 span{display:block;font-size:18px;text-transform:uppercase;color:var(--primary)}
.about-section .content-block h2 strong{display:block;font-size:30px;margin-top:24px}
.about-section .personal-details{margin-top:36px;margin-bottom:36px}
.about-section .personal-details > div{margin-bottom:0}
.about-section .personal-info li{margin-bottom:18px}
.about-section .personal-info h4{font-size:16px;margin-bottom:4px;text-transform:uppercase}
.about-section .de-about-1{position:absolute;right:10%;top:-8%}
.about-section .de-about-2{position:absolute;left:5%;bottom:-3%;z-index:2}
.dark-mode .about-section{background:#2a2a2a}
.dark-mode .about-section .design-elements{opacity:1}
.dark-mode .about-section .design-elements .de-about-1{opacity:.7}
.dark-mode .about-section .design-elements .de-about-2{opacity:.7}
/**/
.contact-section .content-block{
    padding-left: 120px;
}
/***********************************************************
  8. Skill Sections
************************************************************/
.skill-section{background-color:#333;background:url(../image/skill-bg.jpg) no-repeat center center;background-size:cover;position:relative;z-index:1}
.skill-section:after{content:'';position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.1);z-index:-1}
.skill-section h2{color:#fff;font-size:48px;margin-bottom:36px}
.skill-section h2 span{display:block;font-size:18px;text-transform:uppercase;color:var(--primary)}
.skill-section .lead{color:#bdb9cb}
.skill-section .content-block{padding-right:72px}
.skill-section .progress-block{margin-top:30px}
.skill-section .progress-block h4{color:#fff;font-size:16px;margin-bottom:12px}
.skill-section .progress-wrapper{margin-bottom:24px;position:relative}
.skill-section .progress{height:.5rem;position:relative}
.skill-section .progress-bar{background-color:var(--primary)}
.skill-section .progress-value{position:absolute;right:0;top:2px;color:var(--primary);font-size:16px}
.progress-bar{transition-duration:3s}
/***********************************************************
  9. Portfolio Section
************************************************************/
.call-gallery {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  position:absolute;
  top: 0;
  left: 0;
}
.grid-item { margin-bottom: 20px; }
.box { position: relative; overflow: hidden; }
.box img { width: 100%; height: auto; transition: transform 0.3s ease; }
.box:hover img { transform: scale(1.1); }
.box-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.7); color: white; }
.icon-box { position: absolute; top: 10px; right: 10px; }
.icon-box a { color: white; text-decoration: none; }
/* 썸네일 스타일 커스터마이징 */
.grid-item { margin-bottom: 20px; }
.box { position: relative; overflow: hidden; }
.box img { width: 100%; height: auto; transition: transform 0.3s ease; }
.box:hover img { transform: scale(1.1); }
.box-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: rgba(0,0,0,0.7); color: white; }
.icon-box { position: absolute; top: 10px; right: 10px; }
.icon-box a { color: white; text-decoration: none; }
/* 썸네일 스타일 커스터마이징 */
.fancybox-thumbs{top:auto;width:100%!important;bottom:0;left:0;right:0;height:95px;padding:10px 10px 5px;box-sizing:border-box;background:rgba(0,0,0,0.3);display:flex;justify-content:center}
.fancybox-thumbs__list{display:flex;justify-content:center!important;width:auto!important}
.fancybox-show-thumbs .fancybox-inner{right:0;bottom:95px}
.fancybox-thumbs__list a{width:80px!important;height:60px!important}

.portfolio-section{padding-bottom:100px;position:relative;background: #f5edd8;}
.portfolio-section .row > div{margin-bottom:24px}
.portfolio-section .filter-button-group{text-align:center;margin-bottom:48px}
.portfolio-section .filter-button-group button{border:1px solid #e0e0e0;border-radius:4px;background:transparent;padding:6px 12px;color:#615978;font-size:16px;transition:.3s}
.portfolio-section .filter-button-group button:hover{border-color:var(--primary)}
.portfolio-section .filter-button-group .active{background:var(--primary);color:#fff;border-color:var(--primary)}
.portfolio-section .box{background-color:#774691;overflow:hidden;position:relative;border-radius:10px}
.portfolio-section .box:before,.portfolio-section .box:after{content:'';background:var(--primary);height:50%;width:100%;opacity:.8;position:absolute;top:-50%;left:0;z-index:1;transition:all .3s ease-in 0}
.portfolio-section .box:after{top:auto;bottom:-50%}
.portfolio-section .box img{width:100%;height:auto}
.portfolio-section .box .box-content{color:#fff;text-align:center;width:100%;opacity:0;position:absolute;bottom:40%;left:0;z-index:2;transition:all .3s ease-out .1s;padding:36px}
.portfolio-section .box .title{font-size:21px;line-height:1.3;color:#fff;text-transform:capitalize;margin:0}
.portfolio-section .box .category{color:#fff;opacity:.8;font-size:16px;text-transform:uppercase;display:block;font-weight:700;margin-bottom:6px}
.portfolio-section .box .icon-box{
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transition: all .3s ease-out .1s;
  display: inline-block;
  width: 50px;
  text-align: center;
}
.portfolio-section .box:hover .icon-box i {
  color: #fff;
  font-size: 47px;
}
.portfolio-section .box .icon-box a{width:48px;height:48px;line-height:49px;display:block;text-align:center;border-radius:50%;transition:.3s;color:#222}
.portfolio-section .box .icon-box a:hover{background:#fff;color:var(--primary)}
.portfolio-section .box:hover:before{top:0}
.portfolio-section .box:hover:after{bottom:0}
.portfolio-section .box:hover .box-content{opacity:1;bottom:0}
.portfolio-section .box:hover .icon-box{opacity:1;top:50%}
.portfolio-section .box .icon li{margin:0 3px;display:inline-block}
.portfolio-section .box .icon li a{color:#444;background-color:#fff;font-size:15px;text-align:center;line-height:36px;height:35px;width:35px;border-radius:10px;display:block;transition:all .3s ease 0}
.portfolio-section .box .icon li a:hover{color:#fff;background:#12c2e9}
.portfolio-section .btn-close{position:absolute;right:54px;top:54px;background:var(--primary);color:#fff;text-align:center;width:36px;height:36px;line-height:36px;border-radius:50%;transition:.3s}
.portfolio-section .item-content > div{margin-bottom:0}
.portfolio-section .content-wrapper{padding:30px 12px 24px 0}
.portfolio-section .content-wrapper .item-title{font-size:36px;margin-bottom:24px}
.portfolio-section .modal-body{padding:36px 36px 12px}
.portfolio-section .modal-body img{border-radius:12px}
.portfolio-section .meta-wrapper{background:#f6f6f6;padding:30px;margin-top:42px;border-radius:8px}
.portfolio-section .item-meta{font-size:16px}
.portfolio-section .item-meta li{margin-bottom:18px}
.portfolio-section .item-meta li span{font-weight:700;color:#222;margin-left:8px}
.portfolio-section .de-portfolio-1,.portfolio-section .de-portfolio-2{position:absolute}
.portfolio-section .de-portfolio-1{left:5%;top:10%}
.portfolio-section .de-portfolio-2{right:5%;bottom:-4%;z-index:1}
.dark-mode .filter-button-group button{color:#b0aac0;border:1px solid #606060}
.dark-mode .portfolio-section .design-elements{opacity:1}
.dark-mode .portfolio-section .design-elements .de-portfolio-1{opacity:.7}
.dark-mode .portfolio-section .design-elements .de-portfolio-2{opacity:.7}
/***********************************************************
  13. Blog Section
************************************************************/
.blog-section{padding-bottom:36px;position:relative}
.blog-section h3{margin-bottom:0;line-height:1.3}
.blog-section h3 a{text-transform:initial}
.blog-section .post-meta{margin-bottom:6px}
.blog-section .post-meta li{display:inline-block;margin-right:12px;font-size:16px;color:#948daa}
.blog-section .post-meta li a{color:#fff;font-family:'Pretendard',sans-serif;font-weight:400;text-transform:initial;transition:.3s}
.blog-section .post-meta li a:hover{color:var(--primary)}
.blog-section .content-wrapper{position:relative;height:100%}
.blog-section .image-wrapper{border-radius:10px;position:relative;overflow:hidden;height:100%}
.blog-section .image-wrapper img{object-fit:cover;width:100%;height:100%}
.blog-content .col-xl-12 img{width:100%}
.news-row-1 .image-wrapper img{max-height:451px}
.blog-section .post-group h3 a:hover{color:#fff!important}
.blog-section .image-wrapper:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);transition:.3s}
.blog-section .post-content{position:absolute;left:30px;bottom:30px;right:30px;z-index:1}
.blog-section .large-post .post-content{left:48px;bottom:48px;right:48px}
.blog-section .large-post .post-content h3{font-size:30px}
.blog-section .large-post .post-content h3 a{color:#fff;transition:.3s}
.blog-section .large-post .post-content h3 a:hover{color:var(--primary)}
.blog-section .large-post .post-meta li{color:#fff}
.blog-section .large-post .content-wrapper:hover .image-wrapper:after{background:rgba(0,0,0,0.5)}
.blog-section .post-group .row > div{margin-bottom:24px}
.blog-section .post-group .post-content{top:30px}
.blog-section .post-group .post-content .post-meta{position:absolute;height:100%;bottom:0;margin-bottom:0;width:100%}
.blog-section .post-group .post-content .post-meta a{color:#948daa}
.blog-section .post-group .post-content .post-cat{position:absolute;width:100%;top:0;left:0}
.blog-section .post-group .post-content .post-date{position:absolute;width:100%;left:0;bottom:0}
.blog-section .post-group h3{font-size:21px;margin-top:30px;z-index:2;position:relative}
.blog-section .post-group h3 a{color:#222;text-transform:initial;transition:.3s}
.blog-section .post-group h3 a:hover{color:var(--primary)}
.blog-section .post-group .content-wrapper{border:1px solid #e0e0e0;border-radius:10px;height:100%}
.blog-section .post-group .content-wrapper:hover .image-wrapper{opacity:1}
.blog-section .post-group .content-wrapper:hover .image-wrapper:after{background:rgba(0,0,0,0.5)}
.blog-section .post-group .content-wrapper:hover h3{color:#fff}
.blog-section .post-group .content-wrapper:hover h3 a{color:#fff}
.blog-section .post-group .content-wrapper:hover h3 a:hover{color:var(--primary)}
.blog-section .post-group .content-wrapper:hover .post-meta li{color:#fff}
.blog-section .post-group .content-wrapper:hover .post-meta li a{color:#fff}
.blog-section .post-group .content-wrapper:hover .post-meta li a:hover{color:var(--primary)}
.blog-section .post-group .image-wrapper{opacity:0;transition:.3s;height:100%}
.blog-section .post-group .image-wrapper img{height:100%}
.blog-section .btn-close{position:absolute;right:54px;top:54px;background:var(--primary);color:#fff;text-align:center;width:36px;height:36px;line-height:36px;border-radius:50%;transition:.3s}
.blog-section .blog-content > div{margin-bottom:48px}
.blog-section .modal .content-wrapper{border:none}
.blog-section .modal-body{padding:36px 36px 12px}
.blog-section .modal-body img{border-radius:12px}
.blog-section .blog-title{font-size:36px;margin-top:12px;margin-bottom:30px;text-align:center;line-height:1.4}
.blog-section .blog-meta{font-size:16px;margin-bottom:30px;color:#948daa}
.blog-section .blog-meta a{color:#948daa;transition:.3s}
.blog-section .blog-meta a:hover{color:var(--primary)}
.blog-section .blog-meta li{margin-right:24px}
.blog-section .blog-meta li i{margin-right:6px}
.blog-section .blog-meta li:last-child{margin-right:0}
.blog-section .post-footer{margin-top:48px}
.blog-section .post-footer > div{margin-bottom:0}
.blog-section .post-footer h4{font-size:16px;text-transform:uppercase;margin:0;margin-right:12px}
.blog-section .post-footer ul{margin:0}
.blog-section .post-footer ul a{font-size:16px}
.blog-section .post-footer .blog-tags a{color:#948daa;transition:.3s}
.blog-section .post-footer .blog-tags a:hover{color:var(--primary)}
.blog-section .post-footer .blog-share a{font-size:24px}
.blog-section .post-footer .blog-share a.facebook-share{color:#1877f2}
.blog-section .post-footer .blog-share a.twitter-share{color:#1da1f2}
.blog-section .post-footer .blog-share a.linkedin-share{color:#0077b5}
.blog-section .de-blog-1,.blog-section .de-blog-2{position:absolute}
.blog-section .de-blog-1{left:5%;top:15%}
.blog-section .de-blog-2{right:10%;bottom:10%}
.dark-mode .blog-section .post-group h3 a{color:#fff}
.dark-mode .blog-section .content-wrapper{border:1px solid #474747}
.dark-mode .blog-section .modal .content-wrapper{border:none}
/***********************************************************
  14. Partner Section  
************************************************************/
.partner-section{padding-top:90px;padding-bottom:90px;background:#333}
.partner-section .image-wrapper{text-align:center}
/***********************************************************
  15. Contact Section
************************************************************/
.contact-section{padding-bottom:60px;position:relative;background:#f5f5f5}
.contact-section .icon-box{width:60px;height:60px;border-radius:50%;background:#fdb63c;line-height:60px;text-align:center;color:#fff;margin-right:24px;font-size:24px}
.contact-section a{font-family:'Pretendard',sans-serif;color:#615978;text-transform:initial;transition:.3s}
.contact-section a:hover{color:var(--primary)}
.contact-section address{margin-bottom:0}
.contact-section h3{font-size:36px;margin-bottom:48px}
.contact-section .map-wrapper{min-height:396px;background:#f9f9f9;margin-right:90px;border-radius:10px}
.contact-section form > div{margin-bottom:0!important;margin-top:0!important}
.contact-section input,.contact-section textarea{border-radius:4px!important}
.contact-section textarea{min-height:183px}
.contact-section .form-control{padding:12px 18px}
.contact-section .form-control:focus{border-color:#fe9377;box-shadow:none}
.contact-section button{font-family:'Pretendard',sans-serif;text-transform:uppercase}
.contact-section .form-message p{font-size:14px}
.contact-section .form-message p.error,.contact-section .form-message p.success{margin-bottom:12px}
.contact-section .form-message p.success{color:#00b300}
.contact-section .form-message p.error{color:#f33}
.contact-section .de-contact-1,.contact-section .de-contact-2{position:absolute}
.contact-section .de-contact-1{right:7%;top:12%}
.contact-section .de-contact-2{left:4%;bottom:-6%;z-index:2}
.dark-mode .contact-section address{color:#b0aac0}
.dark-mode .contact-section a{color:#b0aac0}
.dark-mode .contact-section a:hover{color:var(--primary)}
.dark-mode .contact-section .form-control{border-color:#606060;background:#2a2a2a}
.dark-mode .contact-section .form-control:focus{border-color:var(--primary)}
.dark-mode .contact-section .design-elements{opacity:1}
.dark-mode .contact-section .design-elements .de-contact-1,.dark-mode .contact-section .design-elements .de-contact-2{opacity:.7}
/***********************************************************
  16. Site Footer 
************************************************************/
.site-footer{background-color:#f5edd8;background-size:cover;padding-top:90px;padding-bottom:60px;position:relative;z-index:1}
.site-footer .container{position:relative}
.site-footer h3{color:#fff;font-size:21px;margin-bottom:30px}
.site-footer p{color:#615978}
.site-footer input{padding-left:24px;padding-right:24px}
.site-footer input:focus{border-color:var(--primary);box-shadow:none}
.site-footer .footer-brand{margin-bottom:36px;display:inline-block}
.site-footer .footer-brand img{width:300px}
.site-footer .footer-social{margin-top:48px}
.site-footer .footer-social li{margin-right:24px}
.site-footer .footer-social li:last-child{margin-right:0}
.site-footer .footer-social li.facebook-link a:hover{color:#1877f2}
.site-footer .footer-social li.twitter-link a:hover{color:#1da1f2}
.site-footer .footer-social li.linkedin-link a:hover{color:#0077b5}
.site-footer .footer-social li.youtube-link a:hover{color:red}
.site-footer .footer-social li.instagram-link a:hover{color:#405de6}
.site-footer .footer-social a{color:var(--primary);transition:.3s;font-size:24px;display:inline-block}
.site-footer .footer-social a:hover{color:var(--primary);transform:translateY(-5px)}
.site-footer .back-to-top{position:absolute;top:-120px;right:var(--bs-gutter-x,0.75rem)}
.site-footer .back-to-top a{width:60px;height:60px;background:var(--primary);text-align:center;line-height:60px;font-size:24px;color:#fff;transition:.3s;border-radius:50%;display:inline-block}
.site-footer .footer-bottom{margin-top:24px}
.site-footer .footer-bottom p{font-size:16px}
.site-footer .footer-bottom ul{margin-bottom:0}
.site-footer .footer-bottom ul a{font-family:'Pretendard',sans-serif;color:#615978;text-transform:capitalize;font-size:16px}
.dark-mode .site-footer{background:#343434}
.dark-mode .site-footer p{color:#b0aac0}
.dark-mode .site-footer .footer-bottom a{color:#b0aac0}
.dark-mode .site-footer .footer-bottom a:hover{color:var(--primary)}
/***********************************************************
  17. Libraries
************************************************************/
/* PRE LOADER */
.flex-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#222;z-index:10000}
.dots .dot{display:inline-block;width:35px;height:35px;margin:0 10px;border-radius:50%;background:#FFF;-webkit-animation:dot-dot-dot 1.4s linear infinite;animation:dot-dot-dot 1.4s linear infinite}
.dots .dot:nth-child(2){animation-delay:.2s}
.dots .dot:nth-child(3){animation-delay:.4s}
@keyframes dot-dot-dot {
  0%,60%,100% {
    -webkit-transform: initial;
    -ms-transform: initial;
    transform: initial;
  }
  30% {
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px);
  }
}
/* swiper */
.swiper{width:100%;height:420px}
.swiper .swiper-pagination-bullet{background:#fff;opacity:.5;width:8px;height:8px}
.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{background:var(--primary);opacity:1}
.partnerCarousel{overflow:hidden;width:100%}
.primary{color:var(--primary)!important}
.hover-fff:hover{color:#fff!important}
.mb0{margin-bottom:0!important}
.mt0{margin-top:0!important}
.pb0{padding-bottom:0!important}
.pt0{padding-top:0!important}
.fullwidth{width:100%}
/***********************************************************
  18. Media Queries 
************************************************************/
/* max-width: 1599px and min-width:992px */
@media (max-width: 1599px) and (min-width: 992px) {
  .hero-area .hero-head{font-size:90px}
}
/* max-width: 1599px and min-width:1200px */
@media (max-width: 1599px) and (min-width: 1200px) {
  .hero-area .image-wrapper:after{width:380px;height:300px;top:60px;right:-10px}
  .hero-area .image-wrapper .img-main{width:66%}
  .hero-area .image-wrapper .hero_color_1{left:34%}
  .hero-area .image-wrapper .hero_color_2{left:34%;bottom:0}
  .hero-area .hero-facts li{padding:16px}
  .hero-area .hero-facts li:first-child{left:96px}
  .hero-area .hero-facts li:nth-child(2){right:-90px}
  .hero-area .hero-facts li p{font-size:36px}
  .hero-area .hero-facts li h4{font-size:15px}
  .about-section .img-wrapper:before{left:24px}
  .service-section .content-wrapper{padding:48px 36px}
  .testimonial-section .swiper{height:480px}
}
/* Max-width: 1599px and Min-width: 1400px */
@media (max-width: 1599px) and (min-width: 1400px) {
  .hero-area .de-hero-1{left:1%;top:16%}
  .hero-area .de-hero-2{right:3%}
  .hero-area .de-hero-3{right:2%}
  .hero-area .de-hero-5{bottom:12%}
}
/* Max-width: 1399px */
@media (max-width: 1599px) {
  .service-section .de-service-1,.service-section .de-service-2{display:none}
  .blog-section .de-blog-2{bottom:5%}
  .contact-section .de-contact-1{top:12%}
}
/* Max-width: 1399px and Min-width: 1200px */
@media (max-width: 1399px) and (min-width: 1200px) {
  .hero-area .hero-content > .row{margin-top:72px}
  .hero-area .de-hero-1{left:3%;top:20%}
  .hero-area .de-hero-2{right:3%}
  .hero-area .de-hero-3{right:2%}
  .hero-area .de-hero-5{left:1%;bottom:8%}
}
@media(min-width:1200px){
  .site-header .navbar{padding-top:24px;padding-bottom:24px}
  .hero-area .hero-content,.hero-area .image-wrapper{min-height:100vh}
  .intro-section{background-image:url(/image/main/profile3.png)}
  .profile-pics img{opacity:0}
  .intro-section .nav{width:260px;margin-right:48px}
  .intro-section .nav li{width:100%}
  .intro-section .nav button{width:120px;height:120px;font-size:30px}
}
/* max-width: 1199px */
@media (max-width: 1199px) {
  .btn-main{padding:12px 30px}
  .btn-ghost{padding:10px 28px}
  .section-title{width:80%}
  .design-elements{display:none}
  .site-header .navbar {
    position: fixed !important;!i;!;
    top: 0;
    left: 0;
    width: 100%;
    background: #f5edd8 !important;!i;!;
  }
  .site-header .navbar-toggler{background:var(--primary);color:#fff;border:1px solid rgba(255,255,255,0.3);padding:.25rem}
  .site-header .navbar-toggler:focus{box-shadow:none}
  .site-header .navbar-toggler-icon{line-height:1.5em}
  .site-header .nav-link{color:#222;padding-top:12px;padding-bottom:12px;border-bottom:1px solid #e0e0e0}
  .site-header .navbar-collapse{background:#fff}
  .site-header .nav-item:last-child .nav-link{border-bottom:none}
  .hero-area{text-align:center}
  .hero-area .content-block{margin-bottom:120px}
  .hero-area .hero-head{font-size:60px}
  .hero-area .image-wrapper{text-align:center;margin-top:160px;margin-bottom:72px}
  .hero-area .image-wrapper:after{width:460px;top:72px;right:102px}
  .hero-area .image-wrapper .img-main{width:60%}
  .hero-area .image-wrapper .hero_color_3{right:25%}
  .hero-area .image-wrapper .hero_color_4{right:18%}
  .hero-area .hero-facts li{padding:14px 16px}
  .hero-area .hero-facts li:first-child{left:80px}
  .hero-area .hero-facts li:nth-child(2){right:85px}
  .hero-area .hero-facts li h4{font-size:14px}
  .hero-area .hero-facts li p{font-size:36px}
  .hero-area .de-hero-4{left:18%;top:48%}
  .about-section .content-block{margin-top:72px}
  .about-section .content-block h2{font-size:48px}
  .about-section .content-block h2 span{margin-bottom:12px}
  .about-section .content-block h2 strong{font-size:24px}
  .about-section .img-wrapper{text-align:left}
  .about-section .img-wrapper:before{left:430px;top:84px}
  .about-section .img-wrapper:after{left:240px;bottom:-72px}
  .about-section .about-img-2{bottom:-96px;left:312px}
  #언론보도 .row > div:not(:first-child) .post-content {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 12px 20px;
}
#언론보도 .row > div:not(:first-child) .image-wrapper::after {
    display: none;
}
.news-row-1 > div:not(:first-child) .content-wrapper{
    border: 1px solid #ddd;
    border-radius:12px;
}

.news-row-1 > div:not(:first-child) {
    margin-bottom: 14px !important;!i;!;
}

.news-row-1 > div:not(:first-child) h3 a {
    color: #222 !important;!i;!;
    text-transform: initial;
    transition: .3s !important;!i;!;
    !i;!;
    font-size: 18px !important;!I;!;
    line-height: 1.2 !important;!i;!;
}

.news-row-1 > div:not(:first-child) .post-datata {
    color: #222 !important;!i;!;
}
  .intro-section{
    padding-bottom:60px !important
  }
  .youtube-section {
      padding: 60px 0 !important;
  }
  .section-t {
      font-size: 35px !important;
  }
  .section-title h2 {
      font-size: 18px !important;
      margin-bottom: 12px !important;
  }
  .intro-section .nav {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  .intro-section .nav button br {
      display: none;
  }
  .intro-section .tab-content .tab-pane p {
      font-size: 16px !important;
      line-height: 1.65 !important;
  }
  .youtube-section .swiper-slide{height:260px}
  .youtube-section .swiper-slide-active {
    height: 316px;
  }
  .blog-section .large-post .post-content h3{font-size:24px}
  .blog-section .large-post img{width:100%}
  .blog-section .post-group h3{font-size:18px}
  .contact-section .icon-box{flex-shrink:0}
  .contact-section .map-wrapper{margin-right:0}
  .site-footer .social-block li{margin-right:15px}
  .news-row-1 > .col-lg-6:not(fist-child){}
  .news-row-1 > .col-lg-6:not(:first-child) .image-wrapper img{
      display:none
  }
  
  #언론보도 .container .row:not(.news-row-1) .post-content h3 {
      margin-top: 0;
  }
  
  #언론보도 .container .row:not(.news-row-1) .image-wrapper {
      display: none;
  }
  
  #언론보도 .container .row:not(.news-row-1) .post-content .post-meta {
      position: relative;
      height: auto;
      bottom: auto;
  }
  
  #언론보도 .container .row:not(.news-row-1) .post-content {
      position: relative;
      top: auto;
      left: auto;
      bottom: auto;
      right: auto;
  }
  
  #언론보도 .container .row:not(.news-row-1) .post-content .post-meta li {
      position: relative;
      top: auto;
      left: auto;
  }
  
  #언론보도 .container .row:not(.news-row-1) .content-wrapper {
      padding: 12px 20px;
  }
  
  #언론보도 .row > div {
      margin-bottom: 14px;
  }
}
/* max-width: 1199px and min-width:992px */
@media (max-width: 1199px) and (min-width: 992px) {
  .blog-section .post-group h3{line-height:1.2;margin-top:24px}
}
/* max-width: 991px and min-width:768px */
@media (max-width: 991px) and (min-width: 768px) {
  .testimonial-section .swiper{height:360px}
  .blog-section .row .large-post{margin-bottom:24px}
  .blog-section .post-footer > div.blog-tags{margin-bottom:18px}
  .blog-section .modal .blog-title{font-size:30px}
  .site-footer .row > div{margin-bottom:48px}
  .site-footer .row > div:last-child{margin-bottom:0}
}
/* max-width: 767px */
@media (max-width: 767px) {
  .btn-main,.btn-ghost,.bt-text{font-size:16px}
  .block-title{font-size:36px}
  .fixed-top .navbar-brand img{width:96px}
  .hero-area .btn-main{margin-right:0;margin-bottom:30px;display:inline-block}
  .hero-area .hero-social{display:block}
  .hero-area .hero-social li:last-child{margin-right:0}
  .hero-area .hero-social a{font-size:21px}
  .hero-area .hero-facts li:first-child{left:0;top:48px}
  .hero-area .hero-facts li:nth-child(2){right:0;bottom:48px}
  .hero-area .image-wrapper:after{width:430px;height:300px;top:72px;right:36px}
  .hero-area .image-wrapper .img-main{width:90%;margin:0 auto}
  .hero-area .image-wrapper .hero_color_1,.hero-area .image-wrapper .hero_color_2,.hero-area .image-wrapper .hero_color_3,.hero-area .image-wrapper .hero_color_4{display:none}
  .hero-area .hero-head{font-size:48px}
  .hero-area .hero-head small{font-size:21px;margin-bottom:12px}
  .hero-area .content-block p{font-size:18px}
  .hero-area .design-elements{display:none}
  .intro-section .row > div{margin-bottom:36px}
  .intro-section .design-elements{display:none}
  .about-section .design-elements{display:none}
  .portfolio-section .content-wrapper{padding-top:24px}
  .portfolio-section .content-wrapper .item-title{font-size:30px}
  .portfolio-section .design-elements{display:none}
  .portfolio-section .modal-body{padding:18px 18px 6px}
  .portfolio-section .meta-wrapper{margin-top:0;margin-bottom:12px}
  .portfolio-section .btn-close{right:30px;top:30px}
  .service-section .design-elements{display:none}
  .blog-section .row .large-post{margin-bottom:24px}
  .blog-section .row .large-post .post-content{left:30px;right:30px;bottom:30px}
  .blog-section .row .large-post .post-content h3{font-size:21px}
  .blog-section .post-meta li{font-size:14px}
  .blog-section .modal .blog-title{font-size:24px;text-align:left;margin-bottom:18px}
  .blog-section .modal .blog-content > div{margin-bottom:24px}
  .blog-section .modal .blog-meta{margin-bottom:18px}
  .blog-section .modal .blog-meta li{margin-bottom:6px}
  .blog-section .modal .btn-close{top:24px;right:24px;width:24px;height:24px;line-height:24px}
  .blog-section .post-footer > div.blog-tags{margin-bottom:18px}
  .blog-section .post-footer > div.blog-tags h4{margin-bottom:6px}
  .blog-section .design-elements{display:none}
  .contact-section .contact-options > div{margin-bottom:30px}
  .contact-section form > div{margin-top:0}
  .contact-section form > div:first-child{margin-bottom:0}
  .contact-section .design-elements{display:none}
  .site-footer{padding-top:60px;padding-bottom:60px}
  .site-footer .btn-main{padding-left:21px;padding-right:21px}
  .site-footer input{padding-left:12px;padding-right:12px}
  .site-footer .row > div{margin-bottom:48px}
  .site-footer .footer-bottom{margin-top:0;text-align:center}
  .site-footer .footer-bottom > div{margin-bottom:24px}
  .site-footer .footer-bottom > div:last-child{margin-bottom:0}
}
/* max-width: 576px */
@media (max-width: 576px) {
  section,.site-footer{padding-left:15px;padding-right:15px}
  .section-title{width:90%;margin-bottom:48px}
  .lead{font-size:1.1rem}
  .site-header .navbar-brand{width:108px}
  .hero-area .image-wrapper{margin-top:77px;margin-bottom:36px}
  .hero-area .image-wrapper:after{width:66%;right:54px;top:2px}
  .hero-area .content-block{margin-bottom:24px}
  .hero-area .hero-facts{display:none}
  .hero-area .link-group{margin-top:36px}
  .intro-section{padding-top:80px;padding-bottom:20px}
  .intro-section .item-wrapper{padding:30px}
  .intro-section .content-wrapper{margin-left:0}
  .intro-section .icon-box{float:none}
  .about-section{padding-top:80px;padding-bottom:40px}
  .about-section .content-block{margin-top:48px}
  .about-section .content-block h2{font-size:36px}
  .about-section .content-block h2 span{margin-bottom:8px}
  .about-section .img-wrapper:before,.about-section .img-wrapper:after{display:none}
  .about-section .about-img-2{left:auto;right:0;width:120px}
  .portfolio-section{padding-top:80px;padding-bottom:60px}
  .portfolio-section .filter-button-group button{margin-bottom:6px}
  .blog-section{padding-top:80px;padding-bottom:0}
  .blog-section .modal-body{padding-left:24px;padding-right:24px;padding-top:24px}
  .blog-section .modal .btn-close{right:36px;top:36px}
  .contact-section{padding-top:80px;padding-bottom:80px}
  .contact-section .row .form-block{margin-bottom:0}
  .site-footer .footer-brand img{width:130px}
  .site-footer .back-to-top{top:-90px}
  .site-footer .footer-social a{font-size:21px}
}
/* max-width: 360px */
@media (max-width: 360px) {
  .block-title{font-size:30px}
  .section-title h2{font-size:16px}
  .section-title h2:before,.section-title h2:after{display:none}
  .hero-area .hero-head{font-size:36px}
  .hero-area .hero-head small{font-size:18px}
  .hero-area .image-wrapper:after{display:none}
  .about-section .content-block h2{font-size:30px}
  .about-section .content-block h2 strong{font-size:21px}
  .service-section .content-wrapper{padding:24px}
  .blog-section .row .large-post .post-content{left:21px;right:21px;bottom:21px}
  .blog-section .post-group .post-content{top:21px;left:21px;right:21px;bottom:21px}
  .blog-section .row .large-post .post-content h3{font-size:18px}
}