@charset "utf-8";
/* Carousel example from http://designify.me/web-design/pure-css-slider-no-js-because-it-is-possible/ */

.csslider {
                /*-moz-perspective: 1300px;
                -ms-perspective: 1300px;
                -webkit-perspective: 1300px;
                perspective: 1300px;*/
                display: inline-block;
                text-align: left;
                position: relative;
                margin-left:10px;
                width:98%;
                z-index:400;
                }
                .csslider > input {
                  display: none;
                }
                .csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
                  margin-left: -180%;
                }
                .csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
                  margin-left: -160%;
                }
                .csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
                  margin-left: -142%;
                }
                .csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
                  margin-left: -122%;
                }
                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                  margin-left: -104%;
                }
                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
                  margin-left: -84%;
                }
                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                  margin-left: -63%;
                }
                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                  margin-left: -42%;
                }
                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                  margin-left: -20%;
                }
                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                  margin-left: 0%;
                }
                .csslider > ul {
                  position: relative;
                  width: 100%;
                /* height: 290px;*/
                  z-index: 1;
                  font-size: 0;
                  line-height: 0;
                  margin: 0 auto;
                  padding: 0;
                  overflow: hidden;
                  white-space: nowrap;
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                }
                .csslider > ul > li {
                  margin-right:28px;
                  position: relative;
                  display: inline-block;
                  width: 180px;
                  overflow: hidden;
                  padding:0;
                  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
                  -o-transition: all 0.5s ease-out;
                  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
                  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
                  -moz-background-size: cover;
                  -o-background-size: cover;
                  -webkit-background-size: cover;
                  background-size: cover;
                  vertical-align: top !important;
                  -moz-box-sizing: border-box;
                  -webkit-box-sizing: border-box;
                  box-sizing: border-box;
                  white-space: normal;
                }
                .csslider > ul > li img {
                  width: 180px !important;
                  height: 226px;
                  margin-bottom:5px;
                }
                .csslider > ul > li img:hover {
                  width: 178px !important;
                  height: 224px;
                }
                .csslider > ul > li.scrollable {
                  overflow-y: scroll;
                }
                .csslider > .navigation {
                  position: absolute;
                  bottom: -8px;
                  left: 50%;
                  z-index: 10;
                  margin-bottom: -10px;
                  font-size: 0;
                  line-height: 0;
                  text-align: center;
                  -webkit-touch-callout: none;
                  -webkit-user-select: none;
                  -khtml-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                }
                .csslider > .navigation > div {
                  margin-left: -100%;
                }
                .csslider > .navigation label {
                  position: relative;
                  display: inline-block;
                  cursor: pointer;
                  border-radius: 50%;
                  margin: 0 4px;
                  padding: 4px;
                  background: #999999;
                }
                .csslider > .navigation label:hover:after {
                  opacity: 1;
                }
                .csslider > .navigation label:after {
                  content: '';
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  margin-left: -6px;
                  margin-top: -6px;
                  background: #0071bc;
                  border-radius: 50%;
                  padding: 6px;
                  opacity: 0;
                }
                .csslider > .arrows {
                  -webkit-touch-callout: none;
                  -webkit-user-select: none;
                  -khtml-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                }
                .csslider.inside .navigation {
                  bottom: 10px;
                  margin-bottom: 10px;
                }
                .csslider.inside .navigation label {
                  border: 1px solid #7e7e7e;
                }
                .csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
                .csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
                .csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
                .csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
                .csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
                .csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
                .csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
                .csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
                .csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
                .csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
                .csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
                  opacity: 1;
                }
                .csslider > .arrows {
                  position: absolute;
                  left: 0;
                  top: 50%;
                  width: 94%;
                  height: 26px;
                  padding: 0 31px;
                  z-index: 0;
                  -moz-box-sizing: content-box;
                  -webkit-box-sizing: content-box;
                  box-sizing: content-box;
                }
                .csslider > .arrows label {
                  display: none;
                  position: absolute;
                  top: -50%;
                  padding: 13px;
                  box-shadow: inset 4px -4px 0 3px #0071bc;
                  cursor: pointer;
                  -moz-transition: .15s;
                  -o-transition: .15s;
                  -webkit-transition: .15s;
                  transition: .15s;
                }
                .csslider > .arrows label:hover {
                  box-shadow: inset 5px -5px 0 4px #205493;
                  margin: 0 0px;
                }
                .csslider > .arrows label:before {
                  content: '';
                  position: absolute;
                  top: -100%;
                  left: -100%;
                  /*height: 300%;
                  width: 300%;*/
                }
                .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
                .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
                .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
                .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
                .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
                .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
                .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
                .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6),
                .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7),
                .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8),
                .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9),
                .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) {
                  display: block;
                  left: 0;
                  -moz-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
                }
                .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
                .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
                .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
                .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
                .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
                .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6),
                .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7),
                .csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8),
                .csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9),
                .csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10),
                .csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11),
                .csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) {
                  display: block;
                  right: 0;
                  -moz-transform: rotate(225deg);
                  -ms-transform: rotate(225deg);
                  -o-transform: rotate(225deg);
                  -webkit-transform: rotate(225deg);
                  transform: rotate(225deg);
                }

@media screen and (max-width: 160em) { /* width 2560px */
                .navigation {
                display:none;
                }
}
@media screen and (max-width: 64em) and (min-width: 35.5em){ /* width 1024px */
                .csslider {
                margin:0 2% 0 2%;
                width:95%;
                }
                .csslider > input {
                  display: none !important;
                }
                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                margin-left: -829px;
                }
                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
                margin-left: 0;
                }
                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                margin-left: -829px;
                }
                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                margin-left: 0;
                }
                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                margin-left: -829px;
                }
                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                margin-left: 0;
                }
                .csslider > ul {
                width: 89%;
                height: 310px;
                margin: 0 auto;
                padding: 0;
                }
                .csslider > ul > li {
                width: 180px;
                /*height: 100%;*/
                padding:0;
                vertical-align: top !important;
                }
                .csslider > .arrows {
                position: absolute;
                left: 0;
                top: 45%;
                width: 93%;
                height: 26px;
                }
                .navigation {
                display:block;
                }
                .csslider > .navigation label.tabhide {
                display:none;
                }
    .csslider > .arrows label.tabhide {
        display: none;
    }

    /* last checked*/

    .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(6) {
        display: block;
        right: 0;
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
        display: none;
   }

    .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(1) {
        display: block;
        left: 0;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5) {
        display: none;
    }

}
@media screen and (max-width: 62.45em) and (min-width: 35.5em) { /* width 999px */
    .csslider {
        margin: 0 7% 0 5%; /* nkim 102418 */
        width: 89%; /* nkim 102418 */
    }

        .csslider > input {
            display: none !important;
        }

            .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                margin-left: -623px;
            }

            .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
               margin-left: 0;
            }

            .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                margin-left: -623px;
            }

            .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                margin-left: 0;
            }

            .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                margin-left: -623px;
            }

            .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                margin-left: 0;
            }

        .csslider > ul {
            width: 92%;
            height: 310px;
            margin: 0 auto;
            padding: 0;
        }

            .csslider > ul > li {
                width: 180px;
                /*height: 100%;*/
                padding: 0;
            }

        .csslider > .arrows {
            position: absolute;
            left: 0;
            margin-left: 0;
            top: 45%;
            width: 90%;
            /*width: 91.5%;*/
            height: 26px;
        }

    .navigation {
        display: block;
    }

    .csslider > .navigation label.tabhide {
        display: none;
    }

    .csslider > .arrows label.tabhide {
        display: none;
    }

     /* last checked*/

    .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(6) {
        display: block;
        right: 0;
        -moz-transform: rotate(225deg);
        -ms-transform: rotate(225deg);
        -o-transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }

    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
        display: none;
    }

    .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(1) {
        display: block;
        left: 0;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5) {
        display: none;
    }
}

@media screen and (max-width: 46em) { /* width 736px */
                .csslider {
                margin:0 3% 0 3%;
                padding:0;
                width:92%;
                }
                /*.csslider > input {
                  display: none !important;
                }
                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                  margin-left: -623px;
                }
                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
                  margin-left: 0;
                }
                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                  margin-left: -623px;
                }
                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                  margin-left: 0;
                }
                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                  margin-left: -623px;
                }
                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                margin-left: 0;
                }*/
                .csslider > ul {
                height: 310px;
                margin: 0 auto;
                padding: 0;
                width: 90%;
                }
                .csslider > ul > li {
                width: 180px;
                height: 100%;
                margin-right:28px;
                padding:0;
                text-align: center;
                top:0;
                vertical-align: top !important;
                }
                .csslider > .arrows {
                position: absolute;
                left: 0;
                margin-left:0;
                top: 45%;
                width: 90%;
                height: 26px;
                }
                .navigation {
                display:block;
                }

                .csslider > .navigation label.tabhide {
                display:none;
                }

    .csslider > .arrows label.tabhide {
        display: none;
    }

}

@media screen and (max-width: 35.5em) { /* width 568px */
                .csslider {
                margin:0 15% 0 15%;
                padding:0;
                width:70%;
                }
                .csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
                  margin-left: -2101px;
                }
                .csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
                  margin-left: -1856px;
                }
                .csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
                  margin-left: -1621px;
                }
                .csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
                 margin-left: -1386px;
                }
                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                  margin-left: -940px;
                }
                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
                  margin-left: -750px;
                }
                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                  margin-left: -560px;
                }
                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                  margin-left: -370px;
                }
                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                  margin-left: -180px;
                }
                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                margin-left: 14px;
                }

                .csslider > ul {
                height: 310px;
                margin: 0 auto;
                padding: 0;
                width: 200px;
                }
                .csslider > ul > li {
                width: 180px;
                height: 100%;
                margin-right:10px;
                padding:0;
                text-align: center;
                top:0;
                vertical-align: top !important;
                }
                .csslider > .arrows {
                position: absolute;
                left: 0;
                margin-left:-28px;
                top: 45%;
                width: 97%;
                height: 26px;
                }
                .navigation {
                display:block;
                }
                .csslider > .navigation label.tabhide {
                display:inline-block;
                }

    .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5) {
        display: block;
    }

    .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
        display: block;
    }

}
@media screen and (max-width: 30em) { /* width 480px */
                .csslider {
                margin:0 15% 0 15%;
                padding:0;
                width:70%;
                }
                .csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
                  margin-left: -2101px;
                }
                .csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
                  margin-left: -1866px;
                }
                .csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
                  margin-left: -1631px;
                }
                .csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
                  margin-left: -1396px;
                }
                .csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
                  margin-left: -1161px;
                }
                .csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
                  margin-left: -926px;
                }
                .csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
                  margin-left: -691px;
                }
                .csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
                  margin-left: -456px;
                }
                .csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
                  margin-left: -221px;
                }
                .csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
                margin-left: 14px;
                }
                .csslider > ul {
                height: 310px;
                margin: 0 auto;
                padding: 0;
                width: 210px;
                }
                .csslider > ul > li {
                width: 180px;
                height: 100%;
                margin-right:10px;
                padding:0;
                text-align: center;
                top:0;
                vertical-align: top !important;
                }
                .csslider > .arrows {
                position: absolute;
                left: 0;
                margin-left:-28px;
                top: 45%;
                width: 97%;
                height: 26px;
                }
                .navigation {
                display:block;
                }
                .csslider > .navigation label.tabhide {
                display:inline-block;
                }

    .csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5) {
        display: block;
    }

    .csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
    .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
    .csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
    .csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
    .csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
    .csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
        display: block;
    }


}
@media screen and (max-width: 22.5em) { /* width 320px */
                .csslider > ul.small {
                    margin-left:-15px;
                }
}