@import url("typho.css");
/* @import url("header.css"); */
@import url("animation.css");
@import url("flexslider.css");
@import url("intro.css");
/* @import url("footer.css"); */
@import url("btn.css");
@import url("promotion.css");
@import url("about.css");
@import url("service.css");
/* @import url("product.css"); */
/*  */
/* @import url("dii-phase-2.css"); */
@import url("member.css");
@import url("member-detail.css");
@import url("cart.css");
@import url("payment.css");
/* @import url("product-detail.css"); */

.test{background-color: red;}


* {margin: 0; padding: 0; outline: none; }

a:hover {text-decoration: inherit;}
a {cursor: pointer;}
section {max-width: 1250px; margin: auto; padding: 0 20px;}
.flex-direction-nav a {z-index: 5;}
.flexslider {background: transparent; border: none;}

.grid-story1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 20px auto;
    grid-gap: 20px;
}
.grid-story2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 20px auto;
    grid-gap: 20px;
}
.grid-story3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 20px auto;
    grid-gap: 20px;
}
.grid-story4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 20px auto;
    grid-gap: 20px;
}
.grid-story5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 20px auto;
    grid-gap: 20px;
}


.modal-content {border-radius: 0;}





	@media screen and (max-width: 960px) {
		
			.wrapper {padding: 20px 20px;}
	}
	

	
	

    @media (max-width: 1024px) {
        header section {padding: 0 20px;}
        .grid-story2 {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            margin: 20px auto;
        }
    }
    
    @media (max-width: 768px) {
        .grid-story3 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            margin: 20px auto;
        }
    }
    
    @media (max-width: 580px) {
    }