/*!
Template Name: Business Saas Pricing Page Template
Template URI: https://www.template.net
Author: Template.net
Author URI: https://www.template.net
License: Template.net
License URI: https://www.template.net/license-agreement
*/


/*==============================================
          Shoppy Website Stylesheet
           Body Core Stylesheet
===============================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8); /* 배경을 어둡게 설정 (필요 시 조정) */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    transition: all 0.3s ease-in-out;
}

body {
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
    background-color: #fff;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

body,
html {
    height: 100%;
}

.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul {
    margin: 0px;
    padding: 0px
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
}

li {
    display: inline-block;
}

a {
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

textarea {
    resize: none;
}

hr {
    margin-bottom: 0;
}
/*-- scroll to top ---*/
#return-to-top {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: none;
    z-index: 9999;
    display: block;
    position: fixed;
    background: #000000;
    text-decoration: none;
    -moz-border-radius: 35px;
    -webkit-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#return-to-top i {
    color: #ffffff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#return-to-top:hover {
    background: #000000;
}
#return-to-top:hover i {
    color: #ffffff;
    top: 5px;
}
/*==============================
      // Header Styles //
==============================*/

header {
    width: 100%;
    height: 40px;
    background-color: #252525;
}

header .navbar-brand {
    padding: 0;
}

header img {
    z-index: 999;
    position: absolute;
    top: 0;
}

header p,
header ul > li > a {
    font-size: 16px;
    color: #bdbdbd;
    padding-top: 5px;
    letter-spacing: 0.5px;
    font-family: 'PT Sans', sans-serif;
}

header p a {
    color: #bdbdbd;
}

header p a:hover,
header ul > li > a:hover {
    color: #ffffff;
}

header ul {
    padding-top: 6px;
}

header ul > li > a {
    margin-left: 15px;
}

header .fa {
    color: #ffffff;
    padding-right: 3px;
}

header span {
    color: #ffffff;
    font-size: 14px;
    background: #e81a20;
    padding: 2px 7px;
    border-radius: 100px;
}

header span a {
    color: #ffffff;
}

/*==============================
      // Nav Styles //
==============================*/

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #ee2d27;
    text-decoration: none;
}

.navbar-light .navbar-nav .nav-link {
    color: #111111;
    padding: 8px 0;
    line-height: 16px;
    padding-bottom: 0;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.bg-light {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.navbar-light .navbar-nav .active .nav-link {
    color: #ee2d27;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

nav ul > li > .active,
nav .nav-link:hover {
    color: #ee2d27;
    border-bottom: 1px solid #ee2d27;
}

.navbar {
    padding: 0;
    height: 60px;
    z-index: 9;
}

.nav-bar {
    background-color: white;
}

nav {
    width: 100%;
    background-color: white;
}

nav ul > li .nav-link {
    padding: 0;
}

nav a:not([href]):not([tabindex]) {
    color: #ffffff;
    margin: 0 20px;
}

a:not([href]):not([tabindex]):hover {
    color: #ffffff;
}

nav ul > li > a {
    font-size: 16px;
    letter-spacing: 2px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

nav .hidden-xs {
    font-size: 2px;
    line-height: 33px;
}

.navbar-dark .navbar-toggler {
    color: rgb(255, 255, 255);
    border-color: rgba(0, 0, 0, 0.43);
}

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, .9);
    margin-top: -2px;
}

.navbar-light .navbar-brand img {
    width: 50%;
}

/*==============================
      // Banner Styles //
==============================*/

.banner img {
    width: 100%;
    height: 875px;
    object-fit: cover;

}

/*      Carousel Captions       */

.banner .carousel-caption {
    transform: translateY(-50%);
    bottom: 0;
    top: 42%;
    text-align: center;


}

.carousel-indicators {
    top: 60%;
}

.banner .carousel-indicators > li {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background-color: #ffffff;
    border-color: #ffffff;
    /* opacity: .7; */
}

.banner .carousel-indicators > li.active {
    opacity: 1;
    background-color: red;
}

.banner .carousel-caption h1 {
    font-size: 56px;
    padding: 5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.banner .carousel-caption h3,
.banner .carousel-caption h4 {
    font-size: 40px;
    padding-bottom: 5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.banner .carousel-caption h4 {
    padding-bottom: 70px;
}

.banner .carousel-caption h4 span {
    border-bottom: 3px solid #ffffff;
}

.banner .carousel-caption {
    opacity: 0;
    -webkit-transition: 1s all ease-in-out .1s;
    -moz-transition: 1s all ease-in-out .1s;
    -ms-transition: 1s all ease-in-out .1s;
    -o-transition: 1s all ease-in-out .1s;
    transition: 1s all ease-in-out .1s;
}

.banner .active .carousel-caption {
    opacity: 1;
    -webkit-transition: 1s all ease-in-out .1s;
    -moz-transition: 1s all ease-in-out .1s;
    -ms-transition: 1s all ease-in-out .1s;
    -o-transition: 1s all ease-in-out .1s;
    transition: 1s all ease-in-out .1s;
}

/*          Custom Buttons      */

.banner .btn.btn-lg {
    padding: 10px 40px;
    outline: none;
    margin: 20px auto;
}

.banner .btn-primary,
.banner .btn-primary:not(:disabled):not(.disabled):active {
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
}

.banner .btn-secondary,
.banner .btn-secondary:not(:disabled):not(.disabled):active {
    color: #ffffff;
    background-color: #ee2d27;
    border-color: #ee2d27;
}

.banner .btn-primary:hover {
    color: #ffffff;
    background-color: transparent;
}

.banner .btn-secondary:hover {
    color: #ffffff;
    background-color: transparent;
}

.banner .btn-secondary,
.banner .btn-primary {
    font-size: 16px;
    padding: 10px 20px;
    outline: none;
    margin: 20px 5px;
    border-radius: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

/*==============================
      // Services Styles //
==============================*/

.services {
    width: 100%;
    height: auto;
    margin-top: 10px;
    position: relative;
    z-index: 99;
}

.services .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#cc000000', GradientType=1);
}

.services .hover-block {
    display: none;
}

.services .box:hover .hover-block {
    display: inline;

}

.services img {
    width: 100%;
    height: 200px;
    object-fit: cover;
	opacity: 0.7;
}

.services figure {
    position: relative;
    margin: 0 0 0;

}

.services h3 {
    font-size: 34px;
}

.services h3 a {
    color: #ffffff;
}

.services span {
    display: block;
    font-size: 24px;
}

.services figure:hover {
    top: 0%;
    left: 0%;
    outline: 2px solid rgba(255, 255, 255, 0.59);
    outline-offset: -10px;

}

.services figcaption {
    width: 100%;
    color: #ffffff;
    padding: 5% 10%;
    margin: 0 auto;
    left: 0%;
    position: absolute;
    transition: .6s;
    text-transform: uppercase;
    transition: .6s;
    bottom: 0px;
    left: 0px;
    text-align: left;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

/*==============================
 // Featured-Products Styles //
==============================*/

.Featured-Products {
    width: 100%;
    height: auto;
    padding-top: 50px;
}

.Featured-Products h3 {
    color: #464646;
    font-size: 32px;
    padding-bottom: 35px;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.Featured-Products h4 {
    color: #ffffff;
    font-size: 31px;
    font-weight: 400;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.Featured-Products h4 a {
    color: #ffffff;
}

.Featured-Products h4 span {
    font-size: 20px;
    display: block;
    padding-top: 3px;
    padding-bottom: 15px;
}

.Featured-Products .fa {
    font-size: 20px;
    margin: 0 3px;
    padding: 7px 10px;
    color: #ffffff;
    background-color: #c03732;
}

.Featured-Products figure img {
    width: 100%;
    height: 310px;
    object-fit: cover;
}

.Featured-Products figure .img-thumbnail {
    border-radius: 0;
    border: none;
    padding: 0;
}

.Featured-Products figure {
    position: relative;
    display: block;
}

.Featured-Products figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.65);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    vertical-align: middle;
}

.Featured-Products figcaption:hover {
    opacity: 1;

}

.Featured-Products figcaption .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    outline: 1px solid #ffffff;
    outline-offset: -10px;
}

/*==============================
  // Latest Products Styles //
==============================*/

.Latest-Products {
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 90px;
}

.Latest-Products h3 {
    color: #464646;
    font-size: 32px;
    padding-bottom: 35px;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.Latest-Products h5 {
    color: #000;
    font-size: 20px;
    padding-bottom: 5px;
    float: left;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.Latest-Products h5 a {
    color: #000000;
}

.Latest-Products h6 {
    color: #ee2d27;
    font-size: 19px;
    font-weight: bold;
    float: right;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.Latest-Products figure img {
    width: 100%;
    height: 310px;
    margin-bottom: 17px;
    object-fit: cover;
}

.Latest-Products figure .img-thumbnail {
    border-radius: 0;
    border: none;
    padding: 0;
}

.Latest-Products figure .fa {
    color: #949494;
}

.Latest-Products figure {
    margin: 0 0 3rem;
}

.Latest-Products .button {
    text-align: center;
}

.Latest-Products .btn-outline-primary {
    color: #000000;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
}

.Latest-Products .button .btn-primary {
    padding: 8px 40px;
    color: #949494;
    border-color: #949494;
    background: transparent;
    border-radius: 0;
    letter-spacing: 0.5px;
}

.Latest-Products .button .btn-primary:not(:disabled):not(.disabled):active,
.Latest-Products .button .btn-primary:hover {
    color: #fff;
    background-color: #949494;
    border-color: #949494;
}

.Latest-Products .button .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

.sales-tag {
    position: absolute;
    right: 30px;
    top: 12px;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    background-color: rgba(238, 45, 39, 0.9);
    vertical-align: middle;
    text-align: center;
    padding: 20px 0 20px 0;
}

.sales-tag p {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
}

/*==============================
      // Blog Styles //
==============================*/

.blog {
    width: 100%;
    height: auto;
    padding-top: 50px;
    background-image: url("../images/title_banner5.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
    z-index: 0;
}

/* iOS에서 배경을 완전히 고정시키기 위한 대체 스타일 */
.background-fixed {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 전체 화면을 덮도록 설정 */
    background-image: url("../images/title_banner5.jpg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    z-index: -1;
}

.blog .top {
    padding-bottom: 65px;
    border-bottom: 2px solid #afafaf;
}

.blog .card {
    background-color: transparent;
    border: none;
    height: 100%;
    border-radius: 0;
}

.blog .card-body {
    color: #ffffff;
    background-color: #000;
    opacity: 0.7;
}

.blog .carousel-inner .carousel-item figure {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.50);
    margin: 0 0 1rem;
}

.blog .carousel-inner .carousel-item figcaption {
    padding: 20px 30px;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.blog .carousel-inner .carousel-item figcaption h4 {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 0.5px;
    padding-bottom: 20px;
}

.blog .carousel-inner .carousel-item figcaption h4 a {
    color: #ffffff;
}

.blog .carousel-inner .carousel-item figcaption .btn-primary {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    border-radius: 0;
    background-color: #ffffff;
    border-color: #ffffff;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.blog .carousel-inner .carousel-item figcaption .btn-primary:hover {
    color: #ffffff;
    background-color: transparent;
}

.blog .heading-1 h4 {
    font-size: 30px;
    letter-spacing: 0.5px;
}

.blog .heading-1 p {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
}


.blog .heading-1 span {
    display: block;
}

.blog .heading-1 {
    background-color: white;
    padding: 30px 30px;
    color: #000000;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.blog .heading-1 .btn-primary {
    color: #a3a3a3;
    background-color: transparent;
    border-color: #dadada;
    border-radius: 0;
    border: 2px solid #dadada;
}

.blog .heading-1 .btn-primary:hover,
.blog .heading-1 .btn-primary:not(:disabled):not(.disabled):active {
    color: #000;
    background-color: transparent;
    border-color: #000;
}

.blog .heading-1 .fa-long-arrow-left {
    padding-right: 8px;
}

.blog .heading-1 .fa-long-arrow-right {
    padding-left: 8px;
}

.blog .card-img-top {
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/*==============================
      // Meddle Styles //
==============================*/

.meddle {
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 60px;
}

.meddle figure {
    position: relative;
    text-align: right;
}

.meddle .box-1 {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 4px 4px 0px 4px rgba(0, 0, 0, 0.30);
}

.meddle .box-2 {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: -4px 4px 0px 4px rgba(0, 0, 0, 0.30);
}

.meddle figure img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.meddle figcaption {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    padding: 0 40px;
    padding-left: 235px;
}

.meddle h3 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -1px;
    padding-bottom: 35px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.meddle h5 {
    font-size: 34px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.meddle h5 a {
    color: #000000;
}

.meddle p {
    font-size: 16px;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.meddle .btn-primary {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.5px;
    background-color: #000000;
    border-color: #000000;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.meddle .btn-primary:hover {
    color: #000000;
    border-color: #000000;
    background-color: transparent;
}

/*==============================
      // subscribe Styles //
==============================*/

.subscribe {
    width: 100%;
    height: 300px;
    color: #ffffff;
}

.subscribe .gradient {
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px;
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#cc000000', GradientType=1);
}

.subscribe .heading-2 {
    padding-top: 60px;
    padding-bottom: 30px;
}

.subscribe .heading-2 h3 {
    font-size: 30px;
    padding-bottom: 5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.subscribe .heading-2 h4 {
    font-size: 19px;
    padding-right: 350px;
    line-height: 30px;
    font-style: italic;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.subscribe .form-inline .form-control {
    width: 100%;
    padding: 10px 10px;
    border-radius: 0;
}

.subscribe .form-inline .btn-primary {
    padding: 10px 30px;
    border-radius: 0;
    color: #fff;
    background-color: #ee2d27;
    border-color: #ee2d27;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.subscribe .form-inline .btn-primary:not(:disabled):not(.disabled):active,
.subscribe .form-inline .btn-primary:hover {
    color: #ffffff;
    background-color: rgba(238, 45, 39, 0.54);
    border-color: transparent;
}

.subscribe ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
    font-weight: 300;
    font-size: 13px;
    text-transform: capitalize;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.subscribe ::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
    font-weight: 300;
    font-size: 13px;
    text-transform: capitalize;
    font-style: ;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.subscribe :-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
    font-weight: 300;
    font-size: 13px;
    text-transform: capitalize;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.subscribe ::placeholder {
    color: #000;
    font-weight: 300;
    font-size: 13px;
    text-transform: capitalize;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

/*==============================
      // Footer Styles //
==============================*/

footer {
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 30px;
}

footer .heading-3 p {
    color: #8d8d8d;
    letter-spacing: 0.5px;
    font-size: 14px;
    padding-right: 30px;
    padding-bottom: 10px;
}

footer .social .fa {
    color: #ffffff;
    width: 34px;
    line-height: 31px;
    text-align: center;
    height: 31px;
    margin-right: 15px;
    border-radius: 5px;
    font-size: 20px;
}

footer .social .fa-facebook {
    background-color: #4867aa;
}

footer .social .fa-twitter {
    background-color: #1da1f2;
}

footer .social .fa-pinterest {
    background-color: #bd081b;
}

footer .social .fa-youtube {
    background-color: #f00;
}

footer .social ul li {
    display: inline-block;
}

footer .social ul {
    padding-bottom: 15px;
}

footer .social img {
    width: 80%;
}

footer .list-unstyled li {
    display: block;
    padding-bottom: 8px;
    text-transform: capitalize;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

footer .list-unstyled li a {
    color: #8d8d8d;
    font-size: 15px;
    font-weight: 400;
}

footer h5 {
    font-size: 24px;
    padding-bottom: 25px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

/*==============================
      // copyright Styles //
==============================*/

.copyright {
    padding: 15px 0;
}

.copyright .right-part {
    padding-top: 5px;
}

.copyright p {
    font-size: 16px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
    margin-bottom: 0;
}

.copyright ul,
.copyright p {
    text-align: right;
    font-weight: 400;
}

.copyright p a {
    color: #ee2d27;
    font-weight: 600;
}

.copyright p {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

/*==============================
      // Footer-Nav-Styles //
==============================*/

.copyright .nav-link:focus,
.copyright .nav-link:hover {
    color: #ee2d27;
}

.copyright .nav-link {
    color: #000;
    padding: 8px 0;
    line-height: 16px;
    padding-bottom: 0;
    text-transform: capitalize;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.copyright .active .nav-link {
    color: #ee2d27;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.copyright ul > li > .active,
.copyright .nav-link:hover {
    color: #ee2d27;
    border-bottom: 1px solid #ee2d27;
}

.copyright ul > li .nav-link {
    padding: 0;
}

.copyright a:not([href]):not([tabindex]) {
    color: #000;
    margin: 0 10px;
}

.copyright ul > li > a {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.copyright .hidden-xs {
    font-size: 13px;
    line-height: 33px;
}

.copyright ul {
    margin-top: -5px;
}

/*===============================
      About Styles
================================*/

.blog-other {
    padding-top: 0;
    position: relative;
}

#about-us {
    border-bottom: 1px solid gray;
    padding-top: 20px;
    padding-bottom: 200px;
    background-color: #fff;
}

#about-us h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

#about-us h5 a {
    color: #616161;
}

#about-us h5 span {
    padding: 0 10px;
}

#about-us h3 {
    color: #ee2d27;
    font-size: 33px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

#about-us p a {
    color: #ee2d27;
    text-decoration: underline;
}

#about-us p {
    margin: 0;
    color: #636363;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 500;
    margin-bottom: 30px;
    padding: 0 50px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#about-us .image {
    width: 100%;
    height: 394px;
    margin-bottom: 52px;
}

#about-us .thumbnail {
    padding: 0;
    border: none;
    border-radius: 0;
    object-fit: cover;
}

/*===============================
      Contact Styles
================================*/

#contact {
    border-bottom: 1px solid gray;
    padding-top: 20px;
    padding-bottom: 200px;
    background-color: #fff;
}

#contact h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

#contact h5 a {
    color: #616161;
}

#contact h5 span {
    padding: 0 10px;
}

#contact h3 {
    color: #ee2d27;
    font-size: 33px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

#contact ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b3b3b3;
    font-size: 14px;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#contact::-moz-placeholder {
    /* Firefox 19+ */
    color: #b3b3b3;
    font-size: 14px;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#contact:-ms-input-placeholder {
    /* IE 10+ */
    color: #b3b3b3;
    font-size: 14px;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#contact:-moz-placeholder {
    /* Firefox 18- */
    color: #b3b3b3;
    font-size: 14px;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#contact input[type=text],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    color: #000;
    border-radius: 0;
    padding: 10px 10px;
}

#contact p {
    font-size: 16px;
    font-weight: 500;
    color: #636363;
    padding-bottom: 20px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

#contact input[type=submit] {
    background-color: #233359;
    text-transform: uppercase;
    font-weight: 600;
    color: white;
    padding: 10px 30px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
    border: 2px solid #233359;
}

#contact input[type=submit]:hover {
    color: #000;
    background-color: transparent;
    border: 2px solid #233359;
}

/*==============================
          Support-Page
===============================*/

.support .main {
    width: 770px;
}

.support {
    padding-top: 20px;
    padding-bottom: 200px;
    text-align: center;
}

.support h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.support h5 a {
    color: #616161;
}

.support h5 span {
    padding: 0 10px;
}

.support h3 {
    color: #ee2d27;
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.support p {
    color: #a3a3a3;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    padding-bottom: 30px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.support .figure {
    width: 100%;
    height: auto;
}

.support .figure img {
    width: 100%;
    object-fit: cover;
}

.support .text-left {
    padding-bottom: 80px;
}

.support .heading {
    text-align: left;
}

.support select {
    width: 100%;
    height: 52px;
    color: #d3d0d0;
    font-size: 12px;
    padding: 0 8px;
    cursor: pointer;
    margin-bottom: 10px;
}

.support .btn-primary {
    color: #fff;
    width: 310px;
    font-size: 14px;
    float: right;
    background-color: #ee2d27;
    border-color: #ee2d27;
    height: 50px;
    border-radius: 0;
    text-transform: uppercase;
}

.support .btn-primary:not(:disabled):not(.disabled):active {
    color: #000;
    background-color: transparent;
    ;
    border-color: #000;
}

.support .btn-primary:hover {
    color: #000;
    background-color: transparent;
    border-color: #000;
}

.support .form-control {
    height: 52px;
    border-radius: 0;
    margin-bottom: 10px;
    border: 1px solid #acacac;
}

.support textarea.form-control {
    height: auto;
    margin-bottom: 15px;
    padding: 20px 13px;
}

.support ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b8b8b8;
    text-transform: capitalize;
    font-size: 14px;
}

.support ::-moz-placeholder {
    /* Firefox 19+ */
    color: #b8b8b8;
    text-transform: capitalize;
    font-size: 14px;
}

.support ::-ms-input-placeholder {
    /* IE 10+ */
    color: #b8b8b8;
    text-transform: capitalize;
    font-size: 14px;
}

.support ::-moz-placeholder {
    /* Firefox 18- */
    color: #b8b8b8;
    text-transform: capitalize;
    font-size: 14px;
}

/*===============================
        Blog-page Styles
================================*/

.blog-page {
    padding-top: 20px;
    padding-bottom: 100px;
}

.main-content {
    padding-top: 50px;
}

.blog-page h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.blog-page h3 {
    color: #ee2d27;
    font-size: 24px;
    padding-top: 30px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.blog-page h5 a {
    color: #616161;
}

.blog-page h5 span {
    padding: 0 10px;
}

.blog-page .top {
    padding-bottom: 65px;
    border-bottom: 2px solid #afafaf;
}

.blog-page .card {
    background-color: transparent;
    border: none;
    height: 100%;
    border-radius: 0;
}

.blog-page .card-body {
    color: #ffffff;
    background-color: #000;
    opacity: 0.7;
}

.blog-page figure {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.50);
    margin: 0 0 2rem;
}

.blog-page figcaption {
    padding: 20px 30px;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.blog-page figcaption h4 {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: 0.5px;
    padding-bottom: 20px;
}
.blog-page figcaption h4 a {color: #ffffff;}
.blog-page figcaption .btn-primary {
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    border-radius: 0;
    background-color: #ffffff;
    border-color: #ffffff;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.blog-page figcaption .btn-primary:hover {
    color: #ffffff;
    background-color: transparent;
}

.blog-page .card-img-top {
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/*==============================
          Single-Page
===============================*/

.single .myrow {
    margin-bottom: 55px;
}

.single {
    width: 100%;
    height: auto;
    padding-top: 20px;
}

.review {
    width: 100%;
    clear: both;
}

.single h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.single h3 {
    color: #ee2d27;
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.single h5 a {
    color: #616161;
}

.single h5 span {
    padding: 0 10px;
}

.single p {
    font-size: 16px;
    line-height: 30px;
    color: #000;
    margin-bottom: 30px;
}

.single-hr {
    border-top: 2px solid #c9c9c9;
    margin-bottom: 48px;
}

.slider-content ul {
    list-style: none;
    padding: 0;
}

.slider-content .mylist {
    text-decoration: line-through;
    color: #7d7d7d;
}

.slider-content .myspan {
    font-size: 24px;
    color: #7d7d7d;
}

.slider-content .myspan1 {
    font-size: 28px;
    color: #ee2d27;
}

.slider-content .b1,
.slider-content .b2 {
    width: 264px;
    height: 44px;
    outline: 0;
    border: none;
    color: #fff;
    font-size: 17px;
    display: inline-block;
    text-align: center;
    padding: 8px 0;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.slider-content .b1 {
    background: #ee2d27;
    margin-bottom: 15px;
}

.slider-content .b2 {
    background: #7d7d7d;
}

.mylist {
    margin-left: 63px;
    display: block;
}

.mylist1 {
    margin-left: 53px;
    display: block;
    font-weight: 500;
}

.single #myCarousel .carousel-indicators {
    margin-left: initial;
    position: absolute;
    top: 0;
    right: 0;
    left: initial;
    bottom: inherit;
    display: block;
    margin-right: 0;
    width: 115px;
}

.single #myCarousel .carousel-indicators > li {
    width: 100%;
    margin-left: 0;
    height: initial;
    text-indent: initial;
    display: block;
    margin-bottom: 12px;
}

.single .carousel-inner {
    position: relative;
    width: calc(100% - 160px);
    overflow: hidden;
}

.nav-item a:hover {
    text-decoration: underline;
}

a,
button {
    cursor: pointer;
}

.w549 {
    width: 549px;
    height: 549px;
    object-fit: cover;
}

.w98 {
    width: 98px;
    height: 98px;
	margin-top:-10px;
}

.slider-sec {
    max-width: 670px;
}

.single .carousel-inner {
    width: calc(100% - 140px);
}

.single #myCarousel .carousel-indicators > li {
    margin-bottom: 20px;
}

/* review-content */

.review-content h6 {
    color: #274a61;
    font-size: 21px;
    padding-bottom: 15px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.review-content h6 span {
    color: #7d7d7d;
    font-size: 16px;
    font-weight: 500;
}

.review-content {
    border: 1px solid #c9c9c9;
    padding: 26px 0 5px 30px;
    margin-bottom: 30px;
}

.review h2 {
    font-size: 30px;
    line-height: 30px;
    padding-bottom: 30px;
    font-weight: 500;
    color: #464646;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.review-content p {
    padding-right: 315px;
    font-size: 16px;
    line-height: 32px;
    color: #646464;
    font-weight: 500;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.write-review h2 {
    margin-bottom: 15px;
    font-size: 30px;
    line-height: 30px;
    color: #464646;
}

/* contact-form */

.contact-form {
    width: 100%;
    height: auto;
    padding-bottom: 100px;
}

.contact-form h2 {
    font-size: 30px;
    line-height: 30px;
    padding-bottom: 30px;
    font-weight: 500;
    color: #464646;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form .form-control {
    height: 50px;
    margin-bottom: 20px;
    border-radius: 0;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form :-moz-placeholder {
    font-size: 16px;
    color: #cecece;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form :-ms-input-placeholder {
    font-size: 16px;
    color: #cecece;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form ::-moz-placeholder {
    font-size: 16px;
    color: #cecece;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form ::-webkit-input-placeholder {
    font-size: 16px;
    color: #cecece;
    font-style: italic;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.contact-form .btn-primary {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.5px;
    padding: 10px 60px;
    border-radius: 0;
    color: #fff;
    background-color: #7d7d7d;
    border-color: #7d7d7d;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

/* contact-form */

.another-Featured-Products {
    width: 100%;
    height: auto;
    padding-top: 50px;
    padding-bottom: 100px;
}

.another-Featured-Products h3 {
    color: #464646;
    font-size: 32px;
    padding-bottom: 35px;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.another-Featured-Products h4 {
    color: #ffffff;
    font-size: 31px;
    font-weight: 400;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}
.another-Featured-Products h4 a {color: #ffffff;}
.another-Featured-Products h4 span {
    font-size: 20px;
    display: block;
    padding-top: 3px;
    padding-bottom: 15px;
}

.another-Featured-Products .fa {
    font-size: 20px;
    margin: 0 3px;
    padding: 7px 10px;
    color: #ffffff;
    background-color: #c03732;
}

.another-Featured-Products figure img {
    width: 100%;
    height: 310px;
    object-fit: cover;
}

.another-Featured-Products figure .img-thumbnail {
    border-radius: 0;
    border: none;
    padding: 0;
}

.another-Featured-Products figure {
    position: relative;
    display: block;
}

.another-Featured-Products figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.65);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
    vertical-align: middle;
}

.another-Featured-Products figcaption:hover {
    opacity: 1;

}

.another-Featured-Products figcaption .content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    display: flex;
    outline: 1px solid #ffffff;
    outline-offset: -10px;
}

/*==============================
          Settings-page
===============================*/

.settings-page {
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 100px;
}

.settings-page h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.settings-page h3 {
    color: #ee2d27;
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.settings-page h5 a {
    color: #616161;
}

.settings-page h5 span {
    padding: 0 10px;
}

.settings-page p {
    font-size: 16px;
    padding-bottom: 20px;
    color: #898989;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.settings-page .form-control {
    border-radius: 0;
}

.settings-page .btn-success {
    color: #fff;
    font-size: 14px;
    background-color: #363636;
    border-color: #363636;
    border-radius: 0;
    padding: 8px 20px;
    text-transform: uppercase;
}

.settings-page form {
    color: #898989;
    font-size: 16px;
    font-weight: 400;
}

.settings-page .btn-primary {
    color: #fff;
    font-size: 14px;
    background-color: #fc4733;
    border-color: #fc4733;
    border-radius: 0;
    padding: 8px 20px;
    text-transform: uppercase;
}

.settings-page .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #fc4733;
    border-color: #fc4733;
}

.settings-page .btn-success:not(:disabled):not(.disabled):active {
    background-color: #363636;
    border-color: #363636;
}

.settings-page .form-control:focus,
.settings-page .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

#img-upload {
    width: 100%;
}

.settings-page textarea {
    margin-top: 0;
    margin-bottom: 0;
}

.settings-page :-moz-placeholder {
    font-size: 12px;
    color: #c1c1c1;
}

.settings-page :-ms-input-placeholder {
    font-size: 12px;
    color: #c1c1c1;
}

.settings-page ::-moz-placeholder {
    font-size: 12px;
    color: #c1c1c1;
}

.settings-page ::-webkit-input-placeholder {
    font-size: 12px;
    color: #c1c1c1;
}

.btn-file {
    color: #ffffff;
    background: #636363;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.form-control[readonly] {
    background-color: transparent;
}

/*===============================
      blog_single Styles
================================*/

.blog_single {
    border-bottom: 1px solid gray;
    padding-top: 20px;
    padding-bottom: 200px;
    background-color: #fff;
}

.blog_single h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

.blog_single h2 {
    color: #464646;
    font-size: 42px;
    font-weight: 600;
    padding: 30px 30px;
    padding-bottom: 40px;
}

.blog_single h5 a {
    color: #616161;
}

.blog_single h5 span {
    padding: 0 10px;
}

.blog_single h4 {
    color: #464646;
    width: 100%;
    font-size: 18px;
    border-bottom: 1px solid #464646;
    line-height: 0.1em;
    margin: 0 0 50px;
}

.blog_single h4 span {
    background: #fff;
    padding: 0 30px;
}

.blog_single p a {
    color: #ee2d27;
    text-decoration: underline;
}

.blog_single p {
    margin: 0;
    color: #636363;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin-bottom: 30px;
    padding: 0 50px;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.blog_single .image {
    width: 100%;
    height: 394px;
    margin-bottom: 52px;
}

.blog_single .thumbnail {
    padding: 0;
    border: none;
    border-radius: 0;
    object-fit: cover;
    margin-top: 75px;
}

/*==============================
          Settings-page
===============================*/

.shipping {
    width: 100%;
    height: auto;
    color: #636363;
    padding-top: 20px;
    padding-bottom: 200px;
}

.shipping h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.shipping h3 {
    color: #ee2d27;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 40px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.shipping h5 a {
    color: #616161;
}

.shipping h5 span {
    padding: 0 10px;
}

.shipping p {
    font-size: 17px;
    padding-bottom: 15px;
    font-family: 'Hammersmith One', sans-serif;
}

.shipping p a {
    color: #ee2d27;
    border-bottom: 1px solid #ee2d27;
}

.shipping h4 {
    font-size: 30px;
    padding-bottom: 20px;
    font-family: 'Hammersmith One', sans-serif;
}

/*==============================
          Login-page
===============================*/

.login {
    width: 100%;
    height: auto;
    color: #636363;
    padding-top: 20px;
    padding-bottom: 200px;
}

.login h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.login h3 {
    color: #ee2d27;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 40px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.login h5 a {
    color: #616161;
}

.login h5 span {
    padding: 0 10px;
}

.login :-moz-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login :-ms-input-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login ::-moz-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login ::-webkit-input-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login .btn-success {
    color: #fff;
    font-size: 16px;
    background-color: #363636;
    border-color: #363636;
    border-radius: 0;
    padding: 10px 60px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login .btn-success:not(:disabled):not(.disabled):active {
    background-color: #363636;
    border-color: #363636;
}

.login .form-control:focus,
.login .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

.login .input-group input {
    height: 50px;
    border-radius: 0;
}

.login .button-1 {
    margin: 20px 0;
}

.login .form-group span {
    color: #ee2d27;
    font-size: 30px;
    margin-top: -12px;
    padding-left: 5px;
}

.login .button-1 span {
    padding-left: 20px;
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.login .button-1 span a {
    color: #ee2d27;
    font-weight: 600;
    border-bottom: 1px solid #ee2d27;
}

.login .form-control {
    border: 1px solid #bababa;
}

/*==============================
          Register-page
===============================*/

.register-page {
    width: 100%;
    height: auto;
    color: #636363;
    padding-top: 20px;
    padding-bottom: 200px;
}

.register-page h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.register-page h3 {
    color: #ee2d27;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 40px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.register-page h5 a {
    color: #616161;
}

.register-page h5 span {
    padding: 0 10px;
}

.register-page :-moz-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page :-ms-input-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page ::-moz-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page ::-webkit-input-placeholder {
    font-size: 14px;
    color: #c1c1c1;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page .btn-success {
    color: #fff;
    font-size: 16px;
    background-color: #363636;
    border-color: #363636;
    border-radius: 0;
    padding: 10px 60px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page .btn-success:not(:disabled):not(.disabled):active {
    background-color: #363636;
    border-color: #363636;
}

.register-page .form-control:focus,
.register-page .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

.register-page .input-group input {
    height: 50px;
    border-radius: 0;
}

.register-page .button-1 {
    margin: 20px 0;
}

.register-page .form-group span {
    color: #ee2d27;
    font-size: 30px;
    margin-top: -12px;
    padding-left: 5px;
}

.register-page .button-1 span {
    padding-left: 20px;
    text-transform: uppercase;
    font-size: 16px;
    color: #000;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.register-page .button-1 span a {
    color: #ee2d27;
    font-weight: 600;
    border-bottom: 1px solid #ee2d27;
}

.register-page .form-control {
    border: 1px solid #bababa;
}

/*==============================
          Product-page
===============================*/

.product-page {
    padding-top: 20px;
    background-color: #fff;
}

.product-page h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
}

.product-page h5 a {
    color: #616161;
}

.product-page h5 span {
    padding: 0 10px;
}

.product-page h3 {
    color: #ee2d27;
    font-size: 33px;
    padding-top: 30px;
    padding-bottom: 0;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

/*==============================
          My-purchases
===============================*/

.my-purchases {
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 200px;
    font-family: 'Hammersmith One', sans-serif;
}

.my-purchases h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    font-family: 'Bitter', 'Noto Sans KR', serif;
}

.my-purchases h3 {
    color: #ee2d27;
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    letter-spacing: 1px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.my-purchases h5 a {
    color: #616161;
}

.my-purchases h5 span {
    padding: 0 10px;
}

.my-purchases p {
    color: #616161;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 40px;
}

.my-purchases table {
    text-align: center;
}

.table thead th {
    color: darkgray;
    font-weight: 300;
}

.my-purchases table tr th:nth-child(2),
.my-purchases table tr td:nth-child(2) {
    text-align: left;
    padding-left: 30px;
}

.my-purchases .btn-primary,
.my-purchases .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    padding: 10px 30px;
    text-transform: uppercase;
    background-color: #363636;
    border-color: #363636;
}

.my-purchases tbody tr:nth-child(2) {
    height: 160px;
}

/*==============================
        My-profile-page
===============================*/

.my-profile {
    width: 100%;
    height: auto;
    padding-top: 20px;
    padding-bottom: 200px;
}

.my-profile h5 {
    color: #616161;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
}

.my-profile h3 {
    color: #ee2d27;
    font-size: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: 'Montserrat', 'Noto Sans KR',  cursive;
}

.my-profile h5 a {
    color: #616161;
}

.my-profile h5 span {
    padding: 0 10px;
}

.my-profile p {
    font-size: 16px;
    padding-bottom: 20px;
    color: #898989;
    font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
}

.my-profile img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.my-profile p span {
    padding-right: 50px;
}

.my-profile .fa-facebook-official {
    color: #5674b9;
}

.my-profile .fa-twitter {
    color: #00bff3;
}

.my-profile .fa-pinterest {
    color: #ff00ff;
}

.my-profile .fa-youtube {
    color: #fa363f;
}

.my-profile .fa {
    font-size: 20px;
    padding-right: 10px;
}

/*==============================================
            Media Queries Styles
===============================================*/

/*== 1920px Media Queries Styles ==*/

@media screen and (max-width: 1920px) {}

/*== 1440px Media Queries Styles ==*/

@media screen and (max-width: 1440px) {
    .navbar-light .navbar-brand img {
        width: 54%;
    }
}

/*== 1024px Media Queries Styles ==*/
@media (max-width: 1024px) {
    .navbar-collapse {
        background: white !important; /* 1024px 이하에서도 배경색 유지 */
        padding: 10px; /* 내부 여백 추가 */
        border-radius: 8px; /* 모서리 둥글게 */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
    }
}
@media screen and (max-width: 1024px) {
    .navbar-light .navbar-brand img {
        width: 50%;
    }
    .container {
        max-width: 100%;
    }
    header {
        height: 40px;
    }
    nav ul > li > a {
        font-size: 14px;
    }
    nav a:not([href]):not([tabindex]) {
        color: #000;
        margin: 0 15px;
    }
    header p a {
        display: none;
    }
    header p,
    header ul > li > a {
        font-size: 12px;
    }
    header img {
        width: 77%;
    }
    .navbar {
        height: 80px;
    }
    header ul {
        padding-top: 3px;
    }
    .banner .carousel-caption h1 {
        font-size: 40px;
    }
    .banner .carousel-caption h3,
    .banner .carousel-caption h4 {
        font-size: 24px;
    }
    .banner .btn-secondary,
    .banner .btn-primary {
        font-size: 12px;
        padding: 8px 10px;
        outline: none;
        margin: 20px 5px;
    }
    .banner .carousel-caption h4 {
        padding-bottom: 30px;
    }
    .carousel-indicators {
        top: 55%;
    }
    .banner img {
        height: 700px;
    }
    .services h3 {
        font-size: 30px;
    }
    .services span {
        font-size: 20px;
        letter-spacing: 0.5px;
    }
    .Featured-Products figure img {
        height: 260px;
    }
    .Featured-Products h4 {
        font-size: 22px
    }
    .Featured-Products h4 span {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .Featured-Products .fa {
        font-size: 14px;
        padding: 6px 8px;
    }
    .Latest-Products figure img {
        height: 260px;
    }
    .Latest-Products h5 {
        font-size: 16px;
    }
    .Latest-Products h6 {
        font-size: 16px;
    }
    .Latest-Products .button .btn-primary {
        font-size: 14px;
        padding: 8px 30px;
    }
    .blog .heading-1 h4 {
        font-size: 26px;
    }
    .blog .carousel-inner .carousel-item figcaption h4 {
        font-size: 18px;
        padding-bottom: 15px;
    }
    .meddle figure img {
        height: 260px;
    }
    .meddle figcaption {
        top: 16%;
        left: 0;
        padding-left: 180px;
    }
    .meddle h5 {
        font-size: 24px;
    }
    .meddle p {
        font-size: 14px;
    }
    .meddle .btn-primary {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .subscribe .heading-2 h3 {
        font-size: 26px;
        padding-bottom: 15px;
    }
    .subscribe .heading-2 h4 {
        font-size: 16px;
        line-height: 25px;
    }
    footer .heading-3 p {
        font-size: 12px;
        padding-bottom: 0;
    }
    footer h5 {
        font-size: 19px;
        padding-bottom: 20px;
    }
    footer .list-unstyled li a {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    footer .list-unstyled li {
        padding-bottom: 2px;
    }
    footer .social .fa {
        width: 30px;
        line-height: 28px;
        height: 28px;
        margin-right: 10px;
        font-size: 16px;
    }
    .copyright img {
        width: 80%;
    }
    .copyright .right-part {
        padding-top: 0;
        margin-top: -15px;
    }
    .copyright ul > li > a {
        font-size: 14px;
    }
    .copyright p {
        font-size: 12px;
    }
    #about-us {
        padding-bottom: 100px;
    }
    #about-us .thumbnail {
        margin-bottom: 30px;
    }
    #about-us p {
        font-size: 14px;
        margin-bottom: 20px;
    }
    #contact h3 {
        font-size: 26px;
        padding-top: 20px;
    }
    #contact {
        padding-bottom: 100px;
    }
    #contact p {
        font-size: 14px;
    }
    #contact input[type=text],
    select,
    textarea {
        margin-bottom: 12px;
        padding: 8px 10px;
    }
    #contact:-moz-placeholder {
        font-size: 12px;
    }
    #contact:-ms-input-placeholder {
        font-size: 12px;
    }
    #contact::-moz-placeholder {
        font-size: 12px;
    }
    #contact ::-webkit-input-placeholder {
        font-size: 12px;
    }
    .support textarea.form-control {
        height: 200px;
    }
    .support {
        padding-top: 20px;
        padding-bottom: 100px;
        text-align: center;
    }
    .support .text-left {
        padding-bottom: 50px;
    }
    .support p {
        font-size: 14px;
        padding: 0;
        line-height: 30px;
        padding-bottom: 10px;
    }
    .blog-page figcaption h4 {
        font-size: 19px;
    }
    .single p {
        font-size: 14px;
        line-height: 25px;
    }
    .mylist {
        margin-left: 35px;
    }
    .mylist1 {
        margin-left: 20px;
    }
    .slider-content .b1,
    .slider-content .b2 {
        width: 199px;
        height: 35px;
        font-size: 12px;
        ;
        padding: 8px 0;
    }
    .slider-content .b1 {
        margin-bottom: 10px;
    }
    .w98 {
        width: 80px;
        height: 80px;
    }
    .w549 {
        width: 100%;
        height: 420px;
    }
    .contact-form {
        padding-bottom: 20px;
    }
    .another-Featured-Products figure img {
        height: 260px;
    }
    .another-Featured-Products h4 {
        font-size: 22px
    }
    .another-Featured-Products h4 span {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .another-Featured-Products .fa {
        font-size: 14px;
        padding: 6px 8px;
    }
    .review-content p {
        padding-right: 0;
    }
    .settings-page p {
        font-size: 14px;
    }
    .settings-page form {
        font-size: 14px;
    }
    .settings-page .btn-success,
    .settings-page .btn-primary {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .settings-page h5 span {
        padding: 0 5px;
    }
    .settings-page h5 {
        font-size: 14px;
    }
    .blog_single {
        padding-bottom: 100px;
    }
    .blog_single .thumbnail {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .blog_single p {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .blog_single h2 {
        font-size: 32px;
        padding: 0 100px;
        line-height: 40px;
        padding-bottom: 40px;
    }
    .blog_single h4 {
        font-size: 16px;
        margin: 0 0 40px;
    }
    .blog_single h2 {
        font-size: 22px;
        padding: 0;
        line-height: 30px;
        padding-bottom: 30px;
    }
    .shipping {
        padding-bottom: 100px;
    }
    .my-purchases h5 {
        font-size: 14px;
    }
    .my-purchases h3 {
        ;
        font-size: 26px;
        padding-top: 30px;
    }
}

/*== 768px Media Queries Styles ==*/

@media screen and (max-width: 768px) {
    .navbar-light .navbar-toggler {
        background: rgb(255, 255, 255);
    }
    .navbar-light .navbar-brand {
        margin-top: -10px;
        margin-bottom: -10px;
    }
    .navbar-light .navbar-brand img {
        width: 50%;
    }
    header p,
    header ul > li > a {
        font-size: 12px;
    }
    header img {
        width: 49%;
        margin-top: 41px;
    }
    header ul > li > a {
        margin-left: 5px;
    }
    .navbar-nav {
        padding: 20px 0;
    }
    .navbar-nav .nav-item {
        padding: 5px 0;
    }
    .banner img {
        height: 550px;
    }
    .banner .carousel-caption h1 {
        font-size: 36px;
    }
    .banner .carousel-caption h3,
    .banner .carousel-caption h4 {
        font-size: 20px;
        letter-spacing: 0.5px;
    }
    .banner .carousel-caption h4 {
        padding-bottom: 15px;
    }
    .carousel-indicators {
        top: 58%;
    }
    .banner .carousel-indicators > li {
        width: 10px;
        height: 10px;
    }
    .banner .btn-secondary,
    .banner .btn-primary {
        padding: 5px 10px;
    }
    .services h3 {
        font-size: 26px;
    }
    .services {
        margin-top: -40px;
    }
    .services img {
        height: 200px;

    }
    .banner .carousel-caption {
        top: 40%;
    }
    .services span {
        font-size: 14px;
    }
    .Featured-Products {
        padding-top: 30px;
    }
    .Featured-Products figure img {
        height: 230px;
    }
    .Latest-Products figure img {
        height: 230px;
    }
    .Latest-Products figure {
        margin: 0 0 2rem;
    }
    .Latest-Products h5 {
        font-size: 18px;
    }
    .Latest-Products {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    .blog .heading-1 span {
        display: inline-block;
    }
    .blog .carousel-inner .carousel-item figcaption h4 {
        font-size: 14px;
        font-weight: 400;
        line-height: 25px;
    }
    .blog .top {
        padding-bottom: 30px;
    }
    .meddle {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .meddle figcaption {
        padding-left: 80px;
    }
    .meddle .btn-primary {
        padding: 8px 15px;
    }
    .meddle h3 {
        font-size: 22px;
    }
    .subscribe .heading-2 {
        padding-top: 40px;
    }
    .subscribe .heading-2 h4 {
        font-size: 14px;
        line-height: 20px;
        padding-right: 100px;
    }
    .subscribe .heading-2 h3 {
        font-size: 21px;
        padding-bottom: 10px;
    }
    .subscribe .form-inline .form-control {
        padding: 8px 10px;
    }
    .subscribe .form-inline .btn-primary {
        width: 100%;
        padding: 8px 0;
    }
    .subscribe {
        height: 230px;
    }
    .subscribe .gradient {
        height: 230px;
    }
    footer .heading-3 {
        padding-bottom: 20px;
    }
    footer {
        padding-top: 30px;
        padding-bottom: 20px;
    }
    footer .list-unstyled li a {
        font-size: 13px;
    }
    .copyright .right-part {
        margin-top: 0;
    }
    .copyright {
        text-align: center;
        padding: 15px 0;
    }
    .copyright img {
        width: 70%;
        padding-bottom: 10px;
    }
    .copyright ul,
    .copyright p {
        text-align: center;
    }
    .copyright a:not([href]):not([tabindex]) {
        margin: 0 5px;
    }

    .navbar {
        height: auto;
        padding: .5rem 0;
    }
    .hidden-xs {
        display: none;
    }
    nav ul > li > .active,
    nav .nav-link:hover {
        border-bottom: none;
    }
    header .box-2 {
        display: none;
    }
    header .box-1 {
        display: none;
    }
    #about-us h5 {
        font-size: 14px;
    }
    #about-us h3 {
        font-size: 26px;
        padding-top: 20px;
    }
    #about-us p {
        font-size: 12px;
    }
    #about-us {
        padding-bottom: 50px;
    }
    #about-us p {
        padding: 0;
    }
    .blog-page figcaption h4 {
        font-size: 13px;
        line-height: 20px;
    }
    .main-content {
        padding-top: 30px;
    }
    .blog-page figcaption .btn-primary {
        font-size: 10px;
    }
    .single h5 {
        font-size: 14px;
    }
    .single h3 {
        font-size: 22px;
        padding-top: 20px;
    }
    .w98 {
        width: 50px;
        height: 50px;
    }
    .w549 {
        width: 100%;
        height: 300px;
    }
    .review h2 {
        font-size: 24px;
        line-height: 0;
        padding-bottom: 40px;
    }
    .contact-form h2 {
        font-size: 24px;
        line-height: 0;
        padding-bottom: 40px;
    }
    .review-content h6 {
        font-size: 18px;
        padding-bottom: 10px;
    }
    .review-content p {
        font-size: 14px;
        line-height: 26px;
    }
    .contact-form .form-control {
        height: 40px;
        margin-bottom: 10px;
    }
    .contact-form :-moz-placeholder {
        font-size: 12px;
    }
    .contact-form :-ms-input-placeholder {
        font-size: 12px;
    }
    .contact-form ::-moz-placeholder {
        font-size: 12px;
    }
    .contact-form ::-webkit-input-placeholder {
        font-size: 12px;
    }
    .contact-form .btn-primary {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
        padding: 10px 40px;
    }
    .contact-form {
        padding-bottom: 0;
    }
    .another-Featured-Products h3 {
        font-size: 26px;
        padding-bottom: 30px;
    }
    .blog_single h5 {
        font-size: 14px;
    }
    .blog_single h3 {
        font-size: 26px;
        padding-top: 20px;
    }
    .blog_single p {
        font-size: 16px;
    }
    .blog_single {
        padding-bottom: 50px;
    }
    .blog_single p {
        padding: 0;
    }
    .shipping h3 {
        color: #ee2d27;
        font-size: 26px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .shipping p {
        font-size: 14px;
        padding-bottom: 10px;
    }
    .shipping h4 {
        font-size: 22px;
        padding-bottom: 15px;
    }
    .shipping {
        padding-bottom: 50px;
    }
    .login h3 {
        font-size: 26px;
    }
    .login .input-group input {
        height: 40px;
    }
    .login .btn-success {
        font-size: 14px;
        padding: 8px 50px;
    }
    .login .button-1 span {
        font-size: 14px;
    }
    .register-page h3 {
        font-size: 26px;
    }
    .register-page .input-group input {
        height: 40px;
    }
    .register-page .btn-success {
        font-size: 14px;
        padding: 8px 50px;
    }
    .register-page .button-1 span {
        font-size: 14px;
    }
    .my-purchases h3 {
        font-size: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .my-purchases .btn-primary,
    .my-purchases .btn-primary:not(:disabled):not(.disabled):active {
        padding: 8px 20px;
    }
    .my-purchases {
        padding-bottom: 40px;
    }
    .my-profile p {
        font-size: 12px;
        padding-bottom: 0;
    }
    .my-profile img {
        height: 120px;
    }
    .my-profile h5 {
        font-size: 14px;
    }
    .my-profile {
        padding-bottom: 100px;
    }
    .my-profile h3 {
        font-size: 22px;
        padding-top: 30px;
    }
	.blog {
    width: 100%;
    height: auto;
    padding-top: 50px;
    background-image: url("../images/title_banner5.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
}
}

/*== 425px Media Queries Styles ==*/

@media screen and (max-width: 425px) {
    .navbar-light .navbar-brand img {
        width: 53%;
    }
    .banner .carousel-caption h3,
    .banner .carousel-caption h4 {
        font-size: 16px;
    }
    .banner .carousel-caption {
        left: 15px;
        right: 15px;
    }
    .banner .carousel-caption h1 {
        font-size: 24px;
    }
    .banner .carousel-caption h3 {
        display: inline;
    }
    .banner img {
        height: 475px;
    }
    .carousel-indicators {
        top: 52%;
    }
    .banner .carousel-caption {
        top: 37%;
    }
    .Featured-Products h3 {
        font-size: 22px;
        padding-bottom: 20px;
    }
    .Latest-Products h3 {
        font-size: 22px;
        padding-bottom: 20px;
    }
    .Latest-Products h5 {
        font-size: 19px;
    }
    .subscribe {
        height: 420px;
    }
    .subscribe .gradient {
        height: 420px;
    }
    .subscribe .heading-2 h4 {
        padding-right: 0;
    }
    footer h5 {
        padding-bottom: 10px;
        padding-top: 20px;
    }
    footer .social img {
        width: 50%;
    }
    footer .heading-3 p {
        padding-right: 0;
    }
    #about-us h5 span {
        padding: 0 5px;
    }
    #about-us h3 {
        font-size: 24px;
    }
    #about-us .image {
        height: 200px;
    }
    #about-us p {
        text-align: left;
    }
    .copyright img {
        width: 70%;
    }
    #contact h5 {
        font-size: 12px;
    }
    #contact h5 span {
        padding: 0 5px;
    }
    #contact h3 {
        font-size: 24px;
    }
    #contact p {
        font-size: 12px;
    }
    #contact input[type=text],
    select,
    textarea {
        margin-bottom: 5px;
        padding: 5px 10px;
    }
    #contact {
        padding-bottom: 50px;
    }
    .blog-page figcaption h4 {
        font-size: 16px;
        line-height: 30px;
    }
    .blog-page h3 {
        font-size: 20px;
        padding-top: 20px
    }
    .blog-page h5 {
        font-size: 14px;
    }
    .blog-page {
        padding-bottom: 50px;
    }
    .another-Featured-Products {
        padding-bottom: 50px;
    }
    .review-content {
        padding: 10px 10px 0 10px;
        margin-bottom: 40px;
    }
    .review-content h6 {
        font-size: 16px;
    }
    .review-content h6 span {
        font-size: 12px;
    }
    .review-content p {
        font-size: 12px;
        line-height: 20px;
    }
    .contact-form .btn-primary {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 8px 20px;
    }
    .single p {
        font-size: 12px;
        letter-spacing: 0.5px;
        line-height: 22px;
    }
    .single h3 {
        font-size: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .single {
        padding-top: 10px;
    }
    .single h5 {
        font-size: 12px;
    }
    .slider-content .b1,
    .slider-content .b2 {
        width: 100px;
        height: 30px;
        font-size: 12px;
        padding: 5px 0;
    }
    .single .myrow {
        margin-bottom: 35px;
    }
    .review h2 {
        font-size: 22px;
        padding-bottom: 30px;
    }
    .contact-form h2 {
        font-size: 22px;
    }
    .settings-page p {
        font-size: 12px;
    }
    .settings-page h3 {
        font-size: 22px;
        padding-bottom: 15px;
    }
    .settings-page {
        padding-bottom: 50px;
    }
    .blog_single h5 span {
        padding: 0 5px;
    }
    .blog_single h3 {
        font-size: 24px;
    }
    .blog_single .image {
        height: 200px;
    }
    .blog_single p {
        text-align: left;
    }
    .blog_single h2 {
        font-size: 18px;
        padding: 0;
        line-height: 25px;
        padding-bottom: 25px;
    }
    .blog_single h4 span {
        padding: 0 12px;
    }
    .blog_single h4 {
        font-size: 14px;
        margin: 0 0 20px;
    }
    .blog_single p {
        margin-bottom: 10px;
    }
    .shipping h4 {
        font-size: 18px;
    }
    .shipping h5 span {
        padding: 0 5px;
    }
    .shipping h5 {
        font-size: 14px;
    }
    .login .button-1 {
        text-align: center;
    }
    .login .button-1 span {
        padding-left: 0;
        display: block;
        padding: 20px 0;
    }
    .register-page .button-1 {
        text-align: center;
    }
    .register-page .button-1 span {
        padding-left: 0;
        display: block;
        padding: 20px 0;
    }
    .product-page h3 {
        font-size: 26px;
        padding-top: 20px;
    }
    .product-page h5 {
        font-size: 14px;
    }
    .table-bordered td,
    .table-bordered th {
        padding-left: 10px;
        font-size: 12px;
    }
    .my-purchases .btn-primary,
    .my-purchases .btn-primary:not(:disabled):not(.disabled):active {
        padding: 5px 10px;
        font-size: 12px;
    }
    .my-purchases p {
        font-size: 14px;
        padding-bottom: 10px;
    }
    .my-purchases h3 {
        font-size: 22px;
    }
    .my-purchases table tr th:nth-child(2),
    .my-purchases table tr td:nth-child(2) {
        text-align: left;
        padding-left: 15px;
    }
    .my-purchases tbody tr:nth-child(2) {
        height: 100px;
    }
}

/*== 375px Media Queries Styles ==*/

@media screen and (max-width: 375px) {
    .banner .carousel-caption {
        left: 0;
        right: 0;
    }
    .shipping h3 {
        font-size: 24px;
        padding-top: 15px;
        padding-bottom: 20px;
    }
    .my-purchases h3 {
        font-size: 18px;
    }
}

/*== 320px Media Queries Styles ==*/

@media screen and (max-width: 320px) {}

 * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }

 *:before,
 *:after {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }

 body {
     margin: 0px;
     padding: 0px;
     color: black;
     position: relative;
     overflow-x: hidden;
     background-color: white;
     font-family: 'Montserrat', 'Noto Sans KR',  sans-serif;
     position: relative;
 }

 body,
 html {
     height: 100%;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p{
    margin: 0;
    padding: 0;
 }
 a,a:hover{
    text-decoration: none;
 }
 .container{
    max-width: 1180px;
 }

    

    /*-- css styles start --*/

/*-- pricing-banner start --*/
 .pricing-banner {
     background-image: url(../images/title_banner1.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top;
     position: relative;
     width: 100%;
     height: auto;
 }

 .gradient1 {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     background-color: black;
     opacity: 0.41;

 }

 .pricing-header{
  padding:159px 0;
 }

.pricing-banner h1,h2{
    font-size: 62px;
    color: #fff;
    font-weight: bold;
}

.pricing-banner h2{
    margin-bottom: 35px;
}

.pricing-banner p{
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    font-weight: 500;
    width: 72%;
}
/*-- pricing-banner end --*/
.pricing .card {
height:340px;
}
.pricing .cards {
    overflow: hidden; /* 내용이 둥근 모서리를 벗어나지 않도록 처리 */
    background-color: #ffffff; /* 흰색 배경 추가 (기본 부트스트랩 카드 색상) */
    border: 1px solid #ddd; /* 회색 테두리 추가 (기본 부트스트랩 카드 테두리) */
    border-radius: 10px; /* 원하는 둥근 정도에 따라 값을 조절하세요 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 (선택 사항) */
	padding:0px;
	height:200px;
}

.pricing .card-header {
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 10px;
    background-color: #f8f9fa; /* 헤더 배경색 추가 (선택 사항) */
    border-bottom: 1px solid #ddd; /* 헤더 하단 테두리 추가 */
}

.pricing .card-block {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
         padding: 20px;
}



/*-- pricing start --*/
.pricing{
    margin-top:85px;
    margin-bottom: 118px;
}

.pricing h2{
    font-size: 38px;
    font-weight:bold;
    color: #000000;
    text-align: center;
    margin-bottom: 60px;
}

.card{
    border:0;
    padding-bottom: 80px;
    padding-right: 25px;
}

.card-header{
    background-color: #ffffff;
    border-bottom: 0;
    padding: 0;
}

.pricing .card-header h3{
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 5px;
}

.pricing .card-header .users{
    font-size: 14px;
    color: #00000087;
    font-weight: bold;
    margin-left: 7px;
}

.pricing .card-header .currency{
    font-size: 44px;
    font-weight: bold;
    color: #f26c4f;
    margin-bottom: 7px;
}

.pricing .card-header p{
    font-size: 16px;
    line-height: 22px;
    color: #00000096;
    font-family: arial;
    border-bottom:1px solid #00000087;
   padding-bottom: 15px;
   padding-right: 60px;
}

.pricing .card-header h6{
    font-size: 14px;
    line-height: 20px;
    color: #00000087;
    font-family: arial;
    letter-spacing: 3.8px;
    text-transform: uppercase;
    margin-top:3px;
    margin-bottom: 25px;
}

.pricing .card-header .btn{
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    padding: 11px 47px;
    background-color: #464646;
    border-radius: 5px;
    transition: all 0.7s;
}

.pricing .pricing-content{
    padding-bottom: 20px;
    display: flex;
}

.pricing  h5{
    font-size: 36px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    margin-bottom: 45px;
}

.pricing .pricing-content .box{
    border-right: 1px solid #c2c2c2;
    padding:0 0 0 30px;
}

.pricing .pricing-content .box:first-child{
    padding-left: 0;
}

.pricing .pricing-content .box:nth-child(2){
    padding-right: 40px;
}

.pricing .pricing-content .box:last-child{
    border-right: 0;
}

.pricing .pricing-content li{
    list-style: none;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 35px;
    display: flex;
}

.pricing .pricing-content li:last-child{
    margin-bottom: 0;
}

.pricing .pricing-content i{
    font-size: 16px;
    color: #8dc63f;
    vertical-align: middle;
    margin-top:3px;
    margin-right: 10px;
}

.pricing-bottom h3{
    font-size: 32px;
    color: #464646;
    font-weight: bold;
    margin-bottom: 20px;
}

.pricing-bottom p{
    font-size: 16px;
    line-height: 26px;
    color: #00000085;
    font-family: arial;
    width: 715px;
    margin:0 auto;
    padding-bottom: 35px;
}

.pricing-bottom a{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #f26c4f;
    padding: 20px 74px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.7s;
}

/*-- pricing end --*/


/*-- footer-content start --*/
.footer-content {
     padding: 18px 0;
     background-color: #6dcff6;
 }

 .footer-content h2 {
     font-size: 24px;
     color: #000000;
     padding-bottom: 52px;
     font-weight: bold;
 }

 .footer-content h4{
     font-size: 18px;
     color: #000000;
     padding-bottom: 14px;
      font-weight: bold;
      display: inline-block;
 }

 .footer-content p {
     font-size: 18px;
     line-height: 32px;
     color: #000;
     font-family: arial;
     margin:0 45px 47px 0; 
 }
 .footer-content span{
    width: 8%;
 }
 .footer-content .icon-body{
    width: 92%;
    margin-top: 2px;
 }
 .footer-content i{
     font-size: 28px;
    color: #000000;
 }
 .footer-content .icon {
   display: flex;
 }

 
 /*-- footer-content end --*/

  /* Hover Effects start*/
 
 .pricing .card-header .btn:hover{
    background: #464646c7;
    -webkit-box-shadow: 0 6px 6px -6px #000;
     -moz-box-shadow: 0 6px 6px -6px black;
     box-shadow: 0 6px 6px -6px #000;
 }
  .pricing-bottom a:hover{
    background: #c74b30;
    -webkit-box-shadow: 0 8px 8px -6px #f26c4f;
    -moz-box-shadow: 0 8px 8px -6px #f26c4f;
    box-shadow: 0 8px 8px -6px #f26c4f;
  }  



  /* Hover Effects end*/

 

       /*=======================
        media query styles start
        ========================*/

 /*-- 1920 to 1430 styles start --*/
@media only screen and (max-width: 1920px) and (min-width: 1430px) {
     .container {
         max-width: 1180px;
     }
 }
 

@media only screen and (max-width: 1440px) {
.container{
    max-width: 1300px;
}
.pricing-header {
    padding: 110px 0;
}
.pricing-banner h1, h2{
    font-size: 50px;
}
.pricing-banner p{
    width: 59%;
    line-height: 27px;
}
.pricing {
    margin-top: 70px;
    margin-bottom: 80px;
}
.pricing h2{
    font-size: 35px;
    margin-bottom:50px; 
}
.pricing h5{
    margin-bottom: 65px;
}
.pricing .pricing-content li{
    margin-bottom: 30px;
}
.footer-content{
    padding: 90px 0;
}
.footer-content p{
    font-size: 17px;
    line-height: 28px;
}
}
 
 @media only screen and (max-width: 1024px){
.container{
    max-width: 100%;
}
.pricing-header {
    padding: 90px 0;
}
.pricing-banner h1, h2 {
    font-size: 40px;
}
.pricing-banner h2 {
    margin-bottom: 20px;
}
.pricing-banner p {
    font-size: 16px;
    width: 70%;
    line-height: 24px;
}
.pricing {
    margin-top: 50px;
    margin-bottom: 70px;
}
.pricing h2 {
    font-size: 30px;
    margin-bottom: 45px;
}
.pricing .card-header h3{
    font-size: 18px;
 }    
 .pricing .card-header .users{
    font-size: 13px;
 }
 .pricing .card-header .currency{
    font-size: 40px;
 }
 .pricing .card-header p{
    font-size: 15px;
 }
 .pricing .card-header h6{
    font-size: 13px;
 }
 .pricing .card-header .btn{
    padding: 10px 37px;
 }
 .pricing .pricing-content .box:nth-child(2) {
    padding-right: 23px;
}
.pricing .pricing-content li {
    font-size: 14px;
    margin-bottom: 25px;
}
.pricing .pricing-content {
    padding-bottom: 70px;
}
.pricing-bottom h3{
    font-size: 28px;
}
.pricing-bottom a{
    font-size: 15px;
    padding: 18px 50px;
}
.footer-content {
    padding: 80px 0;
}
.footer-content span i{
    font-size: 23px;
}
.footer-content h4{
    font-size: 17px;
}
.footer-content p {
    font-size: 16px;
    line-height: 26px;
    margin: 0 40px 47px 0;
}
}


@media only screen and (max-width:814px){
.pricing-header {
    padding: 70px 0;
}
.pricing-banner h1, h2 {
    font-size: 35px;
}
.pricing-banner h2 {
    margin-bottom: 20px;
}
.pricing-banner p {
    font-size: 15px;
    width: 76%;
    line-height: 22px;
}


.pricing {
    margin-top: 40px;
    margin-bottom: 60px;
}
.pricing h2 {
    font-size: 28px;
    margin-bottom: 40px;
}
.pricing .card-header h3{
    font-size: 15px;
 }    
 .pricing .card-header .users{
    font-size: 12px;
    margin-left: 4px;
 }
 .pricing .card-header .currency{
    font-size: 30px;
 }
 .pricing .card-header p{
    font-size: 14px;
   padding-right: 10px;
 }
 .pricing .card-header h6{
    font-size: 12px;
    margin-bottom: 20px;
 }
 .pricing .card-header .btn{
    padding: 10px 30px;
 }
 .card {
    padding-right: 15px;
    padding-bottom: 70px;
 }

 .pricing .pricing-content .box:nth-child(2) {
    padding-right:15px;
}
.pricing .pricing-content li {
    font-size: 13px;
    margin-bottom: 20px;
}
.pricing .pricing-content {
    padding-bottom: 70px;
}
.pricing-bottom h3{
    font-size: 25px;
}
.pricing-bottom p{
    font-size: 15px;
    line-height: 24px;
    padding-bottom: 25px;
}
.pricing-bottom a{
    font-size: 14px;
    padding: 15px 25px;
}


.footer-content {
    padding: 60px 0;
}
.footer-content .icon-body {
    width: 92%;
    margin-top: 0;
}
.footer-content span i{
    font-size: 20px;
    margin-right: 8px;
}
.footer-content h4{
    font-size: 16px;
}
.footer-content p {
    font-size: 15px;
    line-height: 24px;
    margin: 0 27px 25px 0;
}

}

@media only screen and (max-width:640px){
.pricing-banner p {
    font-size: 14px;
    width: 100%;
}
.card{
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
}
.pricing-bottom p{
    width: 100%;
}
.footer-content span i {
    vertical-align: middle;
    margin-right: 0;
}
}

@media only screen and (max-width:480px){
.pricing-banner h1, h2{
    font-size: 30px;
}
.pricing h2 {
    font-size: 24px;
    margin-bottom: 30px;
}
.pricing h5{
    font-size: 19px;
}
.card {
    padding-left: 0;
    padding-right: 0;
}
.pricing h5 {
    margin-bottom: 30px;
}
.pricing .pricing-content{
    display: block;
}
.pricing .pricing-content .box{
    padding:20px 0 0 0;
    border:0;
    text-align: center;
}
.pricing .pricing-content .box:nth-child(2){
    padding-right: 0;
}
.pricing-bottom p {
    font-size: 14px;
    line-height: 22px;
}
.footer-content h2 {
    font-size: 21px;
    color: #000000;
    padding-bottom: 40px;
    font-weight: bold;
}
.footer-content h4 {
    font-size: 15px;
}
.footer-content p {
    font-size: 14px;
    line-height: 23px;
    margin: 0 0 25px 0;
}
}

@media only screen and (max-width:375px){
.pricing-header {
    padding: 60px 0;
}
.pricing-banner h1, h2 {
    font-size: 27px;
}
.pricing-banner p{
    font-size: 13px;
    line-height: 20px;
}
.pricing {
    margin-top: 25px;
    margin-bottom: 50px;
}
.pricing h2 {
    font-size: 21px;
}
.pricing-bottom h3 {
    font-size: 22px;
    margin-bottom: 10px;
}
.pricing-bottom a {
    font-size: 13px;
    padding: 15px 15px;
}
.footer-content h4{
    padding-bottom: 10px;
}
.footer-content h2 {
    font-size: 20px;
    text-align: center;
}
}

.image-container {
  width: 100%; /* 컨테이너 너비 설정 */
  height: 600px; /* 고정된 높이 설정 */
  overflow: hidden; /* 이미지가 컨테이너 밖으로 넘지 않게 숨김 */
  position: relative;
}

.image-container img {
  width: 100%; /* 이미지를 컨테이너 너비에 맞게 설정 */
  height: 100%; /* 이미지를 컨테이너 높이에 맞게 설정 */
  object-fit: cover; /* 이미지가 컨테이너를 가득 채우며 잘리도록 설정 */
  object-position: center center; /* 이미지의 중앙을 기준으로 잘리도록 설정 */
}
/* --- Google Reviews Slider Section --- */
.google-reviews-section {
    padding: 60px 0; /* 상하 여백 */
    background-color: #f4f7f6; /* 섹션 배경색 */
}

/* Google Reviews 섹션 제목 및 설명 텍스트 색상 */
.google-reviews-section h2,
.google-reviews-section p {
    color: #333; /* 짙은 회색으로 변경 (거의 검정에 가까움) */
}

.google-reviews-slider-container {
    width: 100%;
    overflow: hidden; /* 이 부분 중요: 슬라이드 영역을 제한하고 내부의 슬라이더 아이템들이 넘치지 않도록 함 */
    margin: 0 auto;
    position: relative; /* 자식 요소의 position: absolute 기준점 */
    padding: 20px 0; /* 슬라이더 위아래 패딩 */
}

.google-reviews-slider-wrapper {
    display: flex; /* 자식 요소들을 가로로 배치 */
    white-space: nowrap; /* 자식 요소들이 줄바꿈되지 않도록 */
    animation: slideReviews 20s linear infinite; /* 애니메이션 적용 */
    animation-play-state: running; /* 기본적으로 재생 상태 */

    /* 하드웨어 가속 및 성능 최적화 (iOS 및 WebKit 기반 브라우저) */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform; /* 애니메이션 속성 변경 예정임을 브라우저에 미리 알림 */
}

/* 마우스 호버 시 슬라이더 애니메이션 일시 정지 (선택 사항) */
.google-reviews-slider-wrapper:hover {
    animation-play-state: paused;
}

.review-item {
    flex-shrink: 0; /* 아이템이 줄어들지 않도록 */
    width: 350px; /* 각 리뷰 박스의 너비 */
    margin-right: 25px; /* 각 리뷰 박스 사이의 간격 */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    text-align: center;

    /* ⭐ 중요: 마우스 호버 시 review-item 자체의 높이가 자연스럽게 변하도록 설정 */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, height 0.3s ease-out, max-height 0.3s ease-out;
    position: relative; /* z-index 작동 및 내부 absolute 요소 기준점 */
    overflow: hidden; /* 초기 상태에서는 내부 내용이 review-item을 벗어나지 않도록 함 */
}

.review-item:hover {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* 호버 시 그림자 강화 */

    /* ⭐ 중요: review-item에 마우스 올렸을 때 내부 내용이 넘쳐도 보이도록 */
    overflow: visible;
    z-index: 10; /* 다른 리뷰 아이템 위로 올라오도록 (겹침 방지) */
}

.review-item .stars {
    color: #f7b731; /* 별 색상 (골드) */
    font-size: 1.2em;
    margin-bottom: 10px;
}

.review-item h4 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #333;
}
.review-item h5 {
    font-size: 1.1em; /* 필요에 따라 조정 */
    color: #333;
    margin-bottom: 12px;

    white-space: normal;          /* 줄바꿈 허용 */
    overflow-wrap: break-word;    /* 단어가 길어도 줄바꿈 허용 */
    word-break: keep-all;         /* 한국어 줄바꿈 자연스럽게 */
    line-height: 1.4;
}

/* ⭐ 핵심: 리뷰 텍스트 (줄임/확장 기능) */
.review-item .review-text { /* HTML에서 <p> 태그에 review-text 클래스를 추가해야 합니다. */
    font-size: 0.95em;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;

    /* 기본 상태: 5줄로 제한 및 말줄임표 */
    overflow: hidden;
    text-overflow: ellipsis; /* 단일 줄 말줄임표 */
    display: -webkit-box; /* 웹킷 기반 브라우저를 위한 플렉스 박스 */
    -webkit-line-clamp: 5; /* 5줄로 제한 (원하는 줄 수로 조절) */
    -webkit-box-orient: vertical; /* 텍스트 방향 수직으로 설정 */
    word-wrap: break-word; /* 긴 단어가 박스를 넘어가지 않도록 */
    white-space: normal; /* 줄바꿈 허용 */

    /* 부드러운 전환 효과를 위한 max-height */
    max-height: 8em; /* 5줄 정도의 높이. 폰트 사이즈와 line-height에 맞춰 조절하세요. */
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    position: relative; /* 의사 요소를 위한 기준 (선택 사항) */
}

/* 마우스를 올렸을 때 전체 텍스트 표시 */
.review-item:hover .review-text {
    max-height: 500px; /* 충분히 큰 값으로 설정하여 전체 내용이 보이도록 함 */
    overflow: visible; /* 말줄임표 제거 및 모든 내용 표시 */
    -webkit-line-clamp: unset; /* 줄 제한 해제 */
    white-space: normal; /* 원래대로 복원 */
    opacity: 1;
}

/* 리뷰 아이템 내의 리뷰어 정보 (이미지+이름) 컨테이너 */
.review-item .reviewer-info {
    display: flex; /* Flexbox 사용하여 내부 아이템 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-top: 15px; /* 리뷰 본문과의 간격 */
    margin-bottom: 5px; /* 이미지와 이름 전체 아래 간격 */
}

/* 리뷰어 프로필 이미지 스타일 */
.review-item .reviewer-avatar {
    width: 40px; /* 이미지 너비 */
    height: 40px; /* 이미지 높이 */
    border-radius: 50%; /* 원형으로 만듦 */
    object-fit: cover; /* 이미지가 잘리지 않고 원형 안에 채워지도록 */
    margin-right: 10px; /* 이미지와 이름 사이 간격 */
    border: 1px solid #eee; /* 선택적으로 테두리 추가 */
}

/* 리뷰어 이름 스타일 */
.review-item .reviewer-name {
    font-weight: 600; /* 구글 리뷰처럼 이름 강조 */
    color: #555; /* 글씨 색상 */
    font-size: 0.9em; /* 글씨 크기 */
    margin: 0; /* 기본 마진 제거 */
    white-space: nowrap; /* 이름은 줄바꿈되지 않도록 (필요시) */
}

/* --- 애니메이션 키프레임 --- */
@keyframes slideReviews {
    0% {
        transform: translateX(0); /* 시작 지점 (원래 위치) */
    }
    100% {
        /* 복사된 아이템들의 총 너비만큼 왼쪽으로 이동 */
        /* review-item의 너비(350px) + margin-right(25px) = 375px */
        /* 현재 리뷰가 8개라면, 애니메이션이 끝날 때 첫 4~5개 아이템 세트(원본과 복사본)가 모두 지나가도록 설정 */
        /* 예를 들어, 8개 아이템이 모두 슬라이딩 한 바퀴 돌고 다시 시작하려면 8 * 375px = 3000px */
        /* 혹은, 총 아이템 수가 N개일 때, 첫 N/2개의 아이템이 한 세트이고, 그것이 복사되어 뒤에 붙는다면
           translateX(-(N/2 * (item_width + item_margin))) 이 됩니다.
           현재 8개의 고유 리뷰가 있고, 슬라이더는 보통 이 세트를 복사해서 뒤에 붙입니다.
           따라서 한 세트의 너비는 8 * 375px = 3000px 입니다. */
        transform: translateX(-3000px); /* 이 값을 실제 아이템의 총 너비에 맞춰 정확히 조절해야 합니다. */
    }
}


/* 반응형 디자인 (선택 사항) */
@media (max-width: 992px) {
    .review-item {
        width: 300px; /* 태블릿 크기에서 너비 조정 */
        margin-right: 20px;
    }
    @keyframes slideReviews {
        100% {
            /* 8개 아이템 기준으로 8 * (300px + 20px) = 8 * 320px = 2560px */
            transform: translateX(-2560px);
        }
    }
}

@media (max-width: 768px) {
    .review-item {
        width: 280px; /* 모바일 크기에서 너비 조정 */
        margin-right: 15px;
        padding: 20px;
    }
    @keyframes slideReviews {
        100% {
            /* 8개 아이템 기준으로 8 * (280px + 15px) = 8 * 295px = 2360px */
            transform: translateX(-2360px);
        }
    }
}

@media (max-width: 576px) {
    .review-item {
        width: 90vw; /* 뷰포트 너비의 90% */
        margin-right: 10px;
    }
    @keyframes slideReviews {
        100% {
            /* 8개 아이템 기준으로 8 * (90vw + 10px) - 이건 복잡해지므로, 단순 픽셀이나 %로 대체 */
            /* 만약 90vw + 10px = 320px 이라면 8 * 320px = 2560px */
            /* 뷰포트 너비에 따라 정확한 픽셀 계산이 어려우면, 50%나 더 작은 값으로 애니메이션 재조정 필요 */
            /* 예: transform: translateX(calc(-100% * 4)); 4개의 아이템을 지나가게 하려면. */
            transform: translateX(calc(-90vw * 8 - 10px * 8)); /* 8개 아이템을 모두 지나가도록 */
        }
    }
}
/* --- Tools We Use Section --- */
.tools-we-use-section {
    padding: 80px 0; /* 상하 여백 */
    background-color: #ffffff; /* 흰색 배경 */
    border-top: 1px solid #eee; /* 상단 구분선 */
    border-bottom: 1px solid #eee; /* 하단 구분선 */
}

.tools-we-use-section h3 {
    font-size: 2.2em;
    color: #2c3e50; /* 진한 남색 계열 */
    margin-bottom: 20px;
    font-weight: 700;
}

.tools-we-use-section .lead {
    font-size: 1.1em;
    color: #666;
    max-width: 800px; /* 설명 텍스트 너비 제한 */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;

}

.tool-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 30px 20px;
    height: 100%; /* Flexbox에서 높이를 동일하게 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 내용 상하 정렬 */
    align-items: center; /* 로고, 텍스트 중앙 정렬 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	height:260px;
}
    .tool-logo {
	max-height:40px;
	}
.tool-item:hover {
    transform: translateY(-8px); /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 그림자 강화 */
}

.tool-logo {
    max-width: 100px; /* 로고 최대 너비 */
    height: auto; /* 비율 유지 */
    object-fit: contain; /* 이미지 비율 유지하며 컨테이너에 맞춤 */
    filter: grayscale(80%); /* 기본적으로 흑백에 가깝게 */
    opacity: 0.8;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.tool-item:hover .tool-logo {
    filter: grayscale(0%); /* 호버 시 원본 색상 */
    opacity: 1;
}

.tool-name {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin-top: 15px;
    margin-bottom: 10px;
}

.tool-description {
    font-size: 0.9em;
    color: #777;
    line-height: 1.5;
    margin-bottom: 0; /* 단락 하단 마진 제거 */
    flex-grow: 1; /* 설명 텍스트가 남은 공간을 채우도록 (높이 동일화에 도움) */
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .tools-we-use-section {
        padding: 50px 0;
    }
    .tools-we-use-section h3 {
        font-size: 1.8em;
    }
    .tools-we-use-section .lead {
        font-size: 1em;
    }
    .tool-item {
        padding: 20px 15px;
    }
    .tool-logo {
        max-height: 40px;
    }
    .tool-name {
        font-size: 1.1em;
    }
    .tool-description {
        font-size: 0.85em;
    }
}

@media (max-width: 576px) {
    .tools-we-use-section .lead {
        padding: 0 15px; /* 모바일에서 좌우 패딩 추가 */
    }
    .col-6 { /* 모바일에서 2열로 배치 */
        width: 50%;
    }
}
/* 일반 태블릿 랜드스케이프 및 작은 데스크톱 (예: 아이패드 프로 12.9 랜드스케이프 해상도) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .services .col-sm-4 {
        /* 각 컬럼의 너비를 명시적으로 설정하거나, col-md-4, col-lg-4 등 더 큰 그리드 클래스 사용 권장 */
        /* 예: flex: 0 0 33.333%; max-width: 33.333%; */
    }
    .blog .col-xl-3, .blog .col-lg-4,
    .blog .col-xl-9, .blog .col-lg-8 {
        /* 아이패드 랜드스케이프에서 컬럼 너비 조정 */
    }
    /* 기타 레이아웃 조정 필요 */
}

/* 더 큰 화면 (아이패드 프로 12.9 랜드스케이프의 @2x 픽셀 너비에 해당할 수도 있음) */
@media (min-width: 1367px) {
    /* 필요하다면 추가적인 데스크톱 레이아웃 조정 */
}