@charset "utf-8";
/* CSS Document */
/*---------------------- Contents ------------------------*/
#header{
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
will-change: auto;
}
#contents {
padding-top: 0;
background-color: #000000;
}
@media (min-width: 768px) {
#header .cheerInstaBtn{
position:fixed;
right:20px;
top:-50px;
margin:0;
z-index: 20;
}
#contents .inner {
max-width: 1280px;
}
#contents .container-fluid{
padding:0;
}
#contents .container-fluid.inner{
max-width: 100%;
min-width: 100%;
width:100%;
}
}
@media (max-width: 767px){
#header .cheerInstaBtn{
position:fixed;
right:10px;
top:-50px;
margin:0;
z-index: 20;
}
#contents .container-fluid,#contents .container-fluid.inner{
padding:0;
}
}
/*---------------------- Slide Banner ------------------------*/
#slideBanner li.banner img{
width: 100%;
}
#slideBanner{
margin: 0px auto;
position:relative;
}
#slideBanner .copy{
text-align:center;
padding:0 20px;
margin:40px 0 40px;
}
@media (min-width: 768px) {
#slideBanner{
padding: 39% 0 0;
}
#slideBanner .slick-prev,
#slideBanner .slick-next{
top:50%;
}
}
@media (max-width: 767px){
#slideBanner{
padding: 39% 0 0;
}
#slideBanner .slick-prev,
#slideBanner .slick-next{
bottom:-10px;
}
#slideBanner .copy{
margin:15px 0 15px;
}
}
#slideBanner .slideBannerInner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
#slideBanner .slick-prev:before,
#slideBanner .slick-next:before{
font-size: 30px;
}
#slideBanner .slick-prev,
#slideBanner .slick-next{
width: 30px;
height: 30px;
position: absolute;
z-index: 10;
}
#slideBanner .slick-prev{
left:10px;
}
#slideBanner .slick-next{
right:10px;
}
/*---------------------- Products ------------------------*/
#products{
margin:100px 0;
text-align: center;
}
#products h2{
margin:0 0 50px;
}
#products .banner{
margin:0 0 60px;
}
#products .banner a{
display: inline-block;
border: 2px solid #FFFFFF;
max-width: 980px;
box-sizing: border-box;
}
#products ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width:980px;
margin:auto;
}
#products ul li a{
color: #FFFFFF;
font-size: 0.9em;
}
#products ul li a img{
display: block;
}
#products ul li a p{
margin:10px 0 0;
line-height: 180%;
}
@media (min-width: 768px) {
#products ul li{
margin-right:2%;
margin-bottom:3%;
width:calc(96% / 3);
text-align: center;
}
#products ul li:nth-child(3n){
margin-right:0;
}
}
@media (max-width: 767px){
#products{
margin:30px 20px;
}
#products h2{
margin:0 0 20px;
}
#products h2 img{
height:50px;
}
#products .banner{
margin:0 0 25px;
}
#products ul li{
margin-right:20px;
margin-bottom: 20px;
width:calc((100% - 20px) / 2);
text-align: center;
}
#products ul li:nth-child(2n){
margin-right:0;
}
#products ul li a p{
font-size:0.8em;
}
}
/*---------------------- Item List ------------------------*/
@media (min-width: 768px) {
.itemList{
margin:100px 0;
text-align: center;
}
.itemList h2{
margin:0 0 50px;
}
.itemList li{
margin:0 0 50px;
line-height: 0;
}
.itemList li a{
display: inline-block;
border: 2px solid #FFFFFF;
width:980px;
box-sizing: border-box;
}
.itemList li.borderNone a{
border: none;
}
.itemList li a img{
display: block;
}
}
@media (max-width: 767px){
.itemList{
margin:30px 20px;
text-align: center;
}
.itemList h2{
margin:0 0 20px;
}
#regularItem.itemList h2 img{
width:100%;
height:auto;
}
#orderItem.itemList h2 img{
width:84%;
height:auto;
}
.itemList li{
margin:0 0 20px;
line-height: 0;
}
.itemList li a{
display: block;
border: 2px solid #FFFFFF;
box-sizing: border-box;
}
.itemList li.borderNone a{
border: none;
}
.itemList li a img{
display: block;
}
}
/*---------------------- Brand Concept ------------------------*/
#brandConcept{
text-align: center;
}
#brandConcept .concept{
margin:0;
}
#brandConcept .linkBanner{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
margin:auto;
}
@media (min-width: 768px) {
#brandConcept .concept img{
width:500px;
}
#brandConcept .linkBanner{
width:980px;
margin-top:60px;
}
}
@media (max-width: 767px){
#brandConcept .concept img{
width:250px;
}
#brandConcept .linkBanner{
padding:40px 20px 0;
}
}
/*---------------------- Client ------------------------*/
#client{
max-width:980px;
margin:80px auto 0;
padding:80px 0 0;
border-top:2px solid #FFFFFF;
text-align: center;
}
@media (min-width: 768px) {
#client ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#client ul li{
margin-right:60px;
margin-bottom:60px;
width:calc((100% - 60px) / 2);
}
#client ul li:nth-child(2n){
margin-right:0;
}
}
@media (max-width: 767px){
#client{
margin:30px 20px 0;
padding:30px 0 0;
}
#client ul li{
margin-bottom:20px;
}
#client ul li:last-child{
margin-bottom:0;
}
}