@charset "utf-8";

/* common: resposive grid system */
.grid{position: relative; width: 100%;}
.grid *[class*="pc-"],
.grid *[class*="tablet-"],
.grid *[class*="mobile-"]{float: left; min-height: 1px; padding: 0 10px; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transition: all .2s cubic-bezier(.4, 0, .2, 1); -webkit-transition: all .2s cubic-bezier(.4, 0, .2, 1); -moz-transition: all .2s cubic-bezier(.4, 0, .2, 1); -o-transition: all .2s cubic-bezier(.4, 0, .2, 1);}
.grid:after{content: ''; display: table; clear: both;}

/* upper pc */                                    
.pc-1{
    width: 8.3333%;
}

.pc-2{
    width: 16.6666%;
}

.pc-3{
    width: 25%;
}

.pc-4{
    width: 33.3333%;
}

.pc-5{
    width: 41.6666%;
}

.pc-6{
    width: 50%;
}

.pc-7{
    width: 58.3333%;
}

.pc-8{
    width: 66.6666%;
}

.pc-9{
    width: 75%;
}

.pc-10{
    width: 83.3333%;
}

.pc-11{
    width: 91.6666%;
}

.pc-12{
    width: 100%;
}

/* under tablet */
@media screen and (max-width: 1279px){
    .tablet-1{
        width: 8.3333%;
    }

    .tablet-2{
        width: 16.6666%;
    }

    .tablet-3{
        width: 25%;
    }

    .tablet-4{
        width: 33.3333%;
    }

    .tablet-5{
        width: 41.6666%;
    }

    .tablet-6{
        width: 50%;
    }

    .tablet-7{
        width: 58.3333%;
    }

    .tablet-8{
        width: 66.6666%;
    }

    .tablet-9{
        width: 75%;
    }

    .tablet-10{
        width: 83.3333%;
    }

    .tablet-11{
        width: 91.6666%;
    }

    .tablet-12{
        width: 100%;
    }
}

/* under mobile */
@media screen and (max-width: 767px){
    .mobile-1{
        width: 8.3333%;
    }

    .mobile-2{
        width: 16.6666%;
    }
    
    .mobile-3{
        width: 25%;
    }
    
    .mobile-4{
        width: 33.3333%;
    }
    
    .mobile-5{
        width: 41.6666%;
    }
    
    .mobile-6{
        width: 50%;
    }
    
    .mobile-7{
        width: 58.3333%;
    }
    
    .mobile-8{
        width: 66.6666%;
    }
    
    .mobile-9{
        width: 75%;
    }
    
    .mobile-10{
        width: 83.3333%;
    }
    
    .mobile-11{
        width: 91.6666%;
    }
    
    .mobile-12{
        width: 100%;
    }
}

/* customized: init */
.grid *[class*="pc-3"]{
    padding-right: 0;
}

.grid *[class*="pc-9"]{
    padding-left: 0;
}