@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@800&display=swap');
/****************************************************************
        main-visual-slick-custom
****************************************************************/

/* HEADER */
#header
{/*height:95px;*/ background:#fff; height:80px;}
#header .container-wide
{padding:0 50px;}
#header .gnb .menu-items > li > a
{color:#303030; font-size:19px; line-height:80px; letter-spacing:0px; padding:0 50px; }
#header .gnb .menu-items > li > .subnav-wrap
{width:280px;}
#header .gnb .menu-items > li .subnav
{background:#f9f9f9; padding:15px 0px;}
#header .gnb .menu-items > li .subnav > li > a:hover span
{color:#fa5c5c;}
#header .gnb .language
{padding:5px 30px; border-radius:50px; background:linear-gradient(135deg, #c93369, #cf7b3d); display:inline-block; color:#fff; font-size:20px; font-weight:300;}
#header .gnb .language:hover
{background:linear-gradient(135deg, #cf7b3d, #c93369); opacity:.8; transition-duration:0.25s}
/* HEADER STICKY */
#header.sticky
{background:#fff; height:80px;}
#header.sticky .gnb .menu-items > li > a
{line-height:80px;}

/* SIDE MENU (MOBILE, TABLET) */
#header .side-nav .side-logo a
{font-size:25px; max-width:100%; color:#fff; font-family:'Libre Franklin';}

#intro {min-height: 100vh; background-color: #7e7b85;}

#main-page
{margin-top:80px; display:flex; /*height:844px;*/ height:775px; align-items:stretch;}

/* VISUAL IMG */
.main-visual .visual01
{background:url('../images/visual01.jpg');}
.main-visual .visual02
{background:url('../images/visual02.jpg');}
.main-visual .visual03
{background:url('../images/visual03.jpg');}
.main-visual .visual04
{background:url('../images/visual04.jpg');}
.main-visual .visual05
{background:url('../images/visual05.jpg');}
.main-visual .visual06
{background:url('../images/visual06.jpg');}
.main-visual .slick-list
{display:inline-block; width:100%; height:100%;}
.main-visual .slick-list .slick-track
{height:100%; display:inline-block;}
.main-visual .visual
{width:100%; position:relative; background-size:cover; background-repeat:no-repeat;}
.main-visual .visual .visual-box
{/*background:url('../images/visual-box.png') no-repeat;*/ top:27%; position:absolute; width:33%; transform:translateX(30px); transition:opacity .35s, transform .35s; transition-delay : .85s; opacity:0;}

/* VISUAL WRAP */
.main-visual
{width:67.4%; height:100%;}
.main-visual .visual-txt
{position: relative; padding:25px 40px 30px; margin-left: 30px; background: #1449e3; z-index: 10;}
.main-visual .visual-txt::after {
    content: "";
    position: absolute;
    width: 110%;
    height: 105%;
    left: -15%;
    top: -10%;
    border: 3px solid #fff;
    z-index: -1;
}
.main-visual .visual-txt h2
{font-size:42px; color:#fff; margin:10px 0 10px; font-family:'Libre Franklin';line-height: 1;}
.main-visual .visual-txt p
{font-size:18px; color:#fff; font-weight:300;}
.main-visual .visual-txt p br {display: none;}
.main-visual .visual.slick-active .visual-box
{opacity: 1; transform: translateX(0)}

/* VISUAL DOTS */
.main-visual .slick-dots {position: absolute; bottom: 50px; left: 0; right: 0; font-size: 0; text-align: center; z-index: 10}
.main-visual .slick-dots li {display: inline-block; margin: 0 6px; vertical-align: middle; width: 16px; height: 16px; text-indent: -9999em; padding: 0; border: none; border-radius: 50%; background-color:#da1978; transition: width .25s, height .25s, background-color .25s; outline: 0; position:relative;}
.main-visual .slick-dots li button {}
.main-visual .slick-dots li.slick-active  { margin:0px 7px; background: #1449e3;}
.main-visual .slick-dots li.slick-active:after
{content:''; width: 28px; height:28px; border:1px solid #1449e3; position:absolute; top:-6px; border-radius:50%; left:-6px;}


/* MAIN PRODUCT IMG */
.main-prd-wrap .main-prd-box:nth-child(1) .main-prd-img
{background-image:url('../images/main-product02.jpg');}
.main-prd-wrap .main-prd-box:nth-child(2) .main-prd-img
{background-image:url('../images/main-product04.jpg');}
.main-prd-wrap .main-prd-box:nth-child(3) .main-prd-img
{background-image:url('../images/main-product01.jpg');}
.main-prd-wrap .main-prd-box:nth-child(4) .main-prd-img
{background-image:url('../images/main-product03.jpg');}
.main-prd-wrap .main-prd-box:nth-child(5) .main-prd-img
{background-image:url('../images/main-product05.jpg');}
.main-prd-wrap .main-prd-box:nth-child(6) .main-prd-img
{background-image:url('../images/main-product05.jpg');}

/* MAIN PRODUCT CONTAIN */
.main-prd
{width:100%;}
.main-prd-wrap
{display:flex; justify-content:space-between; flex-wrap:wrap; height:100%; align-items:stretch;}
.main-prd-wrap .main-prd-box
{width:50%; border:1px solid #ddd; border-left:none; border-left:none; border-bottom:none; background-color: #fff;}
.main-prd-wrap .main-prd-box:nth-child(even)
{border-left:1px solid #ddd;}
.main-prd-wrap .main-prd-box a
{display:inline-block; width:100%; height:100%;position:relative;}
.main-prd-wrap .main-prd-box .main-prd-img
{padding-top:186px; background-position:center; background-repeat:no-repeat; border-bottom:1px solid #ddd;}
.main-prd-wrap .main-prd-box .overlay
{position:absolute; width:100%; height:100%; left:0px; top:0px; display:inline-block; transition:all 0.3s;}
.main-prd-wrap .main-prd-box .overlay:before
{content:'Detail View'; position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0; transition:opacity 0.5s, -webkit-transform 0.5s; background:rgba(0,0,0,0.6); display:flex; justify-content:center; align-items:center; color:#fff;}
.main-prd-wrap .main-prd-box .overlay:hover,
.main-prd-wrap .main-prd-box .overlay:hover:before,
.main-prd-wrap .main-prd-box .overlay:hover:after
{opacity:1;}
/* MAIN PRODUCT NAME */
.main-prd-wrap .main-prd-box .main-prd-name
{/*height:90px;*/height:60px; display:flex; justify-content:center; align-items:center; position:relative;}
.main-prd-wrap .main-prd-box .main-prd-name:before
{content:''; position:absolute; width:35%; height:5px; background:#da1978; top:-2.5px;}
.main-prd-wrap .cs-box
{background:#da1978;}
.main-prd-wrap .cs-box .cs-box-txt
{padding:15px 40px; text-align:center;}
.main-prd-wrap .cs-box .cs-box-txt h4
{font-size:21px; color:#fff;}
.main-prd-wrap .cs-box .cs-box-txt p
{color:#fff; font-size:17px; font-weight:200; margin:15px 0px 10px;}
.main-prd-wrap .cs-box .cs-box-txt ul li
{font-size:16px; color:#fff; font-weight:200;}
.main-prd-wrap .cs-box .cs-box-txt ul li strong
{font-size:30px; color:#fff; letter-spacing:0.5px;}
.main-prd-wrap .cs-box .cs-box-txt .online-btn
{display:inline-block; border:1px solid #fff; border-radius:50px; margin-top:20px; color:#fff; font-size:16px; padding:10px 0px; position:relative; overflow:hidden; transition-duration:0.25s}
.main-prd-wrap .cs-box .cs-box-txt .online-btn:hover
{border:1px solid #fa5c5c; background:#fa5c5c;}


#footer
{position:relative;}
.footer
{background:#7e7b85; padding:15px 0; text-align:center; z-index: 100; position: relative;}
.footer ul li 
{line-height:25px;}
.footer ul li span
{color:#fff; font-size:15px; padding-right:15px;}
.footer ul li a
{color:rgb(226, 226, 226); font-size:15px; padding-right:15px;}




#sub-hero
{margin-top:80px; height:400px;}
.dropdown-nav-section .dropdown-wrap > .dropdown
{padding:0px;}
/* 서브메뉴 dropdown02 width값 조정 */
.dropdown-nav-section .dropdown-02 > a
{min-width:300px;}

.sub-section .main-heading
{ opacity:0; transition-duration:2s; transform:translateX(30px); margin-bottom:10px;}
/*
.sub-section .main-heading:before
{position:absolute; animation:loader 2s ease; width:20px; height:20px; border:5px solid #db3a3a; bottom:0px; left:calc(50% - 10px); content:'';}
*/
.sub-section .main-heading.load
{opacity:1; transform:translateX(0);}


.sub-section
{padding-top:10px; padding-bottom:70px;}
.sub-section .sub-body
{max-width:1200px; margin:0 auto; opacity:0; transform:translateX(-30px); transition-duration:3s;}
.sub-section .sub-body.load
{opacity:1; transform:translateX(0);}


/* GREETING */
.greeting-logo
{text-align:center; margin:15px 0 50px; display:inline-block; width:100%;}
.greeting-logo h2
{font-size:46px; font-weight:bold; background:linear-gradient(160deg, #cb4161, #cf7343); display:inline-block; color:transparent; -webkit-background-clip:text; background-clip:text; padding:0 0 15px; position:relative;}
_:-ms-input-placeholder, :root .greeting-logo h2
{color:#fff; padding:0 20px;}
.greeting-logo h2:after
{content:''; position:absolute; width:100%; height:3px; left:0; background:linear-gradient(86deg,transparent, #cb485d, transparent); bottom:0px;}
.greeting-txt-box p
{font-size:17px; color:#555; line-height:30px;}
.greeting-txt-box p strong
{color:#000;}

/* LOCATION */
.location-map
{ margin-bottom:80px;}


/* PRODUCT */
.brand
{border:1px solid #ccc; padding:5px 30px; text-align:center; }
.brand img {height: 40px; display: inline-block;}
.brand .brand-link 
{margin: 15px 0; display: inline-block; vertical-align: middle;}
.brand .brand-link a
{display:inline-block; padding:10px 20px; border:1px solid #ccc; font-size:15px; color:#333; position:relative; overflow:hidden;}
.brand .brand-link a:before
{content:''; color:#fff; position:absolute; opacity:0; left:-230px; top:0px; background:#db3a3a; transition:all 0.5s; width:115%; height:110%; transform:skew(35deg);}
.brand .brand-link a:after
{content:'사이트 바로가기'; opacity:0; left:-230px; position:absolute; top:0px; padding:10px 20px; color:#fff; font-size: 14px;}
.brand .brand-link a:hover:before
{opacity:1; left:-15px; }
.brand .brand-link a:hover:after
{opacity:1; left:0px; }

.brand-prd-wrap
{margin-top:30px;}
.brand-prd
{text-align:center; display: flex; flex-wrap: wrap;}
.brand-prd:after
{clear:both; content:''; display:block;}
.brand-prd .prd-list
{width:23%; margin:0 1% 20px;}
.brand-prd .prd-list .prd-img
{padding:0px 0px; position:relative; border:1px solid #ddd;}
.brand-prd .prd-list .prd-name
{margin:10px 0px; color:#333; font-size:16px; letter-spacing: -0.03em;}
/* 제품소개 페이지 각 제품별 링크 마우스 호버 효과*/
/*
.brand-prd .prd-list .sub-prd-overlay
{position:absolute; width:100%; height:100%; left:0px; top:0px; display:inline-block; transition:all 0.3s;}
.brand-prd .prd-list .sub-prd-overlay:before
{content:''; border-top:2px solid #f68383; border-bottom:2px solid #f68383; position:absolute; top:0px; left:0px; width:100%; height:100%; transform:scale(0,1); transition:opacity 0.25s, -webkit-transform 0.25s}
.brand-prd .prd-list .sub-prd-overlay:after
{content:''; border-right:2px solid #f68383; border-left:2px solid #f68383; position:absolute; top:0px; left:0px; width:100%; height:100%; transform:scale(1,0); transition:opacity 0.25s, -webkit-transform 0.25s}
.brand-prd .prd-list .brand-prd .prd-list:hover .prd-img
{transition-duration:0.35s; border-color:transparent;;}
.brand-prd .prd-list:hover .sub-prd-overlay:before,
.brand-prd .prd-list:hover .sub-prd-overlay:after
{transform:scale(1);}
.brand-prd .prd-list:hover .prd-name
{color:#777;}
*/

/* CONTACT */
.contact-section .sub-body .btn-primary
{border-color:#cb5057; background-color:#cb5057}


.brand.goto-link {border: none; text-align: left; padding: 0;}
.brand.goto-link .brand-link a {color: #fff;}
.location-map iframe 
{box-shadow: 10px 30px 30px rgba(0,0,0,0.2);}

@media screen and (max-width:1670px){
   #main-page
   {flex-wrap: wrap; height:auto; width:100%;}
   #main-page .main-visual
   {height:52vh; width:100%;}

   .main-prd-wrap
   {flex-wrap:nowrap;}
   .main-prd-wrap .cs-box .cs-box-txt
   {padding:25px 10px;}
   .main-prd-wrap .cs-box .cs-box-txt ul li strong
   {font-size:26px;}

   /* 추가 */
   .main-visual .visual{
    background-position: center;
   }

}



@media screen and (max-width:1240px){
   .main-visual .visual .visual-box
   {top: 15%;}
   .main-visual .visual .visual-box .visual-txt
   {background: rgba(20,73,227,0.8);padding: 50px 30px 80px;}

   .main-prd-wrap
   {flex-wrap:wrap;}
   .main-prd-wrap .main-prd-box
   {width:33.3333%; border:1px solid #ddd;}
   .main-prd-wrap .main-prd-box:nth-child(3n)
   {border-left:none;}
    
    
    
    .main-visual .visual-txt h2 {font-size: 2.5em;}
    .main-visual .visual-txt p {font-size: 1em;}
}




@media screen and (max-width:770px){
   .main-visual .visual .visual-box
   {background-size:contain; width:100%;}
   .main-prd-wrap .main-prd-box
   {width:50%;}
    .main-visual .visual .visual-box .visual-txt
    {max-width: 90%; margin: 0 auto; text-align: center;padding: 50px 30px;}
    .main-visual .visual-txt::after
    {width: 105%; height: 110%; left: 50%; top: 50%; border: 5px solid #fff; transform: translate(-50%, -50%);}
    .brand.goto-link {text-align: center;}
    #main-page .main-visual
    {height: 50vh;}
    .main-visual .visual02
    {background-position: right center;}
}




@media screen and (max-width:414px){
   #header .container-wide
   {padding:0 15px;}
   #header .logo .logo-light
   {display:inline-block;}
   #main-page .main-visual
   {height:350px;}
   .main-visual .visual-txt
   {padding: 30px 50px;}
   .main-visual .visual-txt h2
   {font-size:1.5em;}
   .main-visual .visual-txt p
   {font-size:0.825em;}
   .main-visual .visual-txt p br
   {display:none;}
   .main-visual .slick-dots
   {bottom:15px;}
   .main-prd-wrap .main-prd-box
   {width:100%;}


   .sub-section .main-heading h2
   {font-size:26px;}
   /* sub dropdown menu */
   .dropdown-nav-section .dropdown-01
   {width:35%;}
   .dropdown-nav-section .dropdown-02
   {width:65%;}
   .dropdown-nav-section .dropdown-wrap > a
   {padding:0 15px;}
   .dropdown-nav-section .dropdown-wrap > a:after
   {right:15px;}
   .dropdown-nav-section .dropdown-02 > a
   {min-width:0;}

   .greeting-txt-box p
   {display:inline}
   .location-map
   {margin-bottom:40px;}
   .brand-prd  .prd-list
   {width:100%; margin:0px;}
    
    .main-visual .visual .visual-box .visual-txt
    {padding:50px 20px 30px;}

}