.container {
	width: 1000px;
	max-width: 1000px;
	margin: auto;
}


.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

@-webkit-keyframes moveDSelectButton {
    from {
        -webkit-transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(30%);
    }
}
@-moz-keyframes moveDSelectButton {
    from {
        -moz-transform: translateY(0);
    }
    to {
        -moz-transform: translateY(30%);
    }
}
@-o-keyframes moveDSelectButton {
    from {
        -o-transform: translateY(0);
    }
    to {
        -o-transform: translateY(30%);
    }
}
@-ms-keyframes moveDSelectButton {
    from {
        -ms-transform: translateY(0);
    }
    to {
        -ms-transform: translateY(30%);
    }
}
@keyframes moveDSelectButton {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(30%);
    }
}

@-webkit-keyframes moveUSelectButton {
    from {
        -webkit-transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-30%);
    }
}
@-moz-keyframes moveUSelectButton {
    from {
        -moz-transform: translateY(0);
    }
    to {
        -moz-transform: translateY(-30%);
    }
}
@-o-keyframes moveUSelectButton {
    from {
        -o-transform: translateY(0);
    }
    to {
        -o-transform: translateY(-30%);
    }
}
@-ms-keyframes moveUSelectButton {
    from {
        -ms-transform: translateY(0);
    }
    to {
        -ms-transform: translateY(-30%);
    }
}
@keyframes moveUSelectButton {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-30%);
    }
}

@media only screen and (max-width: 1140px) {
	#topbar { height: 80px; }
	#topbar .name { font-size: 15px; line-height: 80px; }
	#topbar .logo { margin: 6px 16px 6px 12px; width: 204px; height: 68px; background-size: 204px; }
}

@media only screen and (min-width: 767px) and (max-width: 1024px) {
	.container { width: 724px; }
	#topbar { height: 80px; }
	#topbar .name { font-size: 15px; line-height: 80px; }
	#topbar .logo { margin: 6px 16px 6px 12px; width: 204px; height: 68px; background-size: 204px; }
	#selectbutton .content-slider1 .title { margin: 0 36px 26px 0; font-size: 23px; }
	#selectbutton .content-slider2 .title { margin: 0 0 26px 36px; font-size: 23px; }
	#selectbutton .content-slider1 .description { margin: 6px 30px 0 0; font-size: 19px; line-height: 28px; }
	#selectbutton .content-slider2 .description { margin: 6px 0 0 30px; font-size: 19px; line-height: 28px; }
	#selectbutton .content-slider1 .more { height: 28px; margin: 168px 34px 0 0; font-size: 16px; line-height: 24px; border-radius: 14px; }
	#selectbutton .content-slider2 .more { height: 28px; margin: 168px 0 0 34px; font-size: 16px; line-height: 24px; border-radius: 14px; }
}

@media only screen and (max-width: 766px) {
	#topbar { height: 64px; }
	#topbar .name { font-size: 12px; line-height: 64px; }
	#topbar .logo { margin: 2px 14px 2px 10px; width: 168px; height: 56px; background-size: 168px; }
	#selectbutton .content-slider1 .title { margin: 0 34px 20px 0; font-size: 20px; }
	#selectbutton .content-slider1 .description { margin: 4px 28px 0 0; font-size: 16px; line-height: 24px; }
	#selectbutton .content-slider1 .more { height: 26px; margin: 144px 32px 0 0; font-size: 14px; line-height: 22px; border-radius: 13px; }
	#selectbutton .content-slider1 .arrows { margin-top: 16px; right: -26px; width: 48px; height: 48px; border: none; background-size: cover; border-radius: 50%; }
	#selectbutton .content-slider2 .title { margin: 0 0 20px 34px; font-size: 20px; }
	#selectbutton .content-slider2 .description { margin: 4px 0 0 28px; font-size: 16px; line-height: 24px; }
	#selectbutton .content-slider2 .more { height: 26px; margin: 144px 0 0 32px; font-size: 14px; line-height: 22px; border-radius: 13px; }
	#selectbutton .content-slider2 .arrows { margin-top: 16px; left: -22px; width: 48px; height: 48px; border: none; background-size: cover; border-radius: 50%; }
}

@media only screen and (max-width: 640px) {
	#selectbutton .content-slider1 .title { margin: 0 32px 18px 0; font-size: 17px; }
	#selectbutton .content-slider2 .title { margin: 0 0 18px 32px; font-size: 17px; }
	#selectbutton .content-slider1 .description { margin: 4px 28px 0 0; font-size: 14px; line-height: 22px; }
	#selectbutton .content-slider2 .description { margin: 4px 0 0 28px; font-size: 14px; line-height: 22px; }
	#selectbutton .content-slider1 .more { height: 24px; margin: 128px 30px 0 0; font-size: 13px; line-height: 20px; border-radius: 12px; }
	#selectbutton .content-slider2 .more { height: 24px; margin: 128px 0 0 30px; font-size: 13px; line-height: 20px; border-radius: 12px; }
}

@media only screen and (min-width: 480px) and (max-width: 766px) {
	.container { width: 420px; }
	.fright { float: none; }
	.fleft { float: none; }
	#topbar .name { display:none; }
	#topbar .cutname { display:inline-block; font-size:12px; line-height: 64px; }
}

@media screen and (max-width : 479px) {	
	.container { width: 300px; }
	.fright { float: none; }
	.fleft { float: none; }
	#topbar { height: 48px; }
	#topbar .name { display: none; }
	#topbar .shortname { display: inline-block; font-size: 11px; line-height: 48px; }
	#topbar .logo { margin: 2px 10px 2px 10px; width: 126px; height: 42px; background-position: 0 50%; background-size: 126px; }
	#selectbutton .content-slider1 { top: -30%; left: 0; height: 80%; width: 100%; z-index: 49; }
	#selectbutton .content-slider1 .content-slider-overlay { width: 100%; height: 80%; }
	#selectbutton .content-slider1:hover { z-index: 89; -webkit-transform: translateY(30%); -moz-transform: translateY(30%); -o-transform: translateY(30%); -ms-transform: translateY(30%); transform: translateY(30%); -webkit-animation: moveDSelectButton 1s ease-in-out; -moz-animation: moveDSelectButton 1s ease-in-out; -o-animation: moveDSelectButton 1s ease-in-out; -ms-animation: moveDSelectButton 1s ease-in-out; animation: moveDSelectButton 1s ease-in-out; }
	#selectbutton .content-slider1 .white { padding: 0 0 4px 0; }
	#selectbutton .content-slider1 .photo { background-position: 33% 50%; }
	#selectbutton .content-slider1 .title { left: 0; right: 0; margin: 0 0 36px 0; font-size: 20px; }
	#selectbutton .content-slider1:hover .title { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; }
	#selectbutton .content-slider1 .description, #selectbutton .content-slider1 .more { display:none; }
	#selectbutton .content-slider1 .arrows { position: absolute; display: block; margin: 0 auto; padding: 0; margin-left: -24px; margin-top: -22px; left: 50%; top: 100%; width: 48px; height: 48px; border: none; background:url(../images/select_buttond.png) no-repeat center center #fff; background-size: cover; border-radius: 50%; }
	#selectbutton .content-slider2 { top: 50%; left: 0; height: 80%; width: 100%; z-index: 49; }
	#selectbutton .content-slider2 .content-slider-overlay { width: 100%; height: 80%; }
	#selectbutton .content-slider2:hover { z-index: 89; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -o-transform: translateY(-30%); -ms-transform: translateY(-30%); transform: translateY(-30%); -webkit-animation: moveUSelectButton 1s ease-in-out; -moz-animation: moveUSelectButton 1s ease-in-out; -o-animation: moveUSelectButton 1s ease-in-out; -ms-animation: moveUSelectButton 1s ease-in-out; animation: moveUSelectButton 1s ease-in-out; }
	#selectbutton .content-slider2 .white { padding: 4px 0 0 0; }
	#selectbutton .content-slider2 .photo { background-position: 80% 50%; }
	#selectbutton .content-slider2 .title { top: 0; bottom: auto; right: 0; margin: 36px 0 0 0; font-size: 20px; }
	#selectbutton .content-slider2:hover .title { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; }
	#selectbutton .content-slider2 .description, #selectbutton .content-slider2 .more { display:none; }
	#selectbutton .content-slider2 .darken { top: 4px; left: 0; }
	#selectbutton .content-slider2 .arrows { position: absolute; display: block; margin: 0 auto; padding: 0; margin-left: -24px; margin-top: -22px; left: 50%; top: 0; width: 48px; height: 48px; border: none; background:url(../images/select_buttond.png) no-repeat center center #fff; background-size: cover; border-radius: 50%; }
}

@media screen and (max-width : 399px) {	
	.container { width: 295px; }
	#topbar .shortname { display: block; font-size: 10px; line-height: 48px; float: none; text-align: center; width: 100%; }
	#topbar .logo { display: none; }
	#selectbutton .content-slider1 .title, #selectbutton .content-slider2 .title { font-size: 18px; }
}

@media screen and (max-width : 240px) {	
	.container { width: auto; }
	#selectbutton .content-slider1 .title, #selectbutton .content-slider2 .title { font-size: 16px; }
}