@charset "utf-8";

/**************************************************

		base
        
**************************************************/

#wrapper {width: 100%;margin: 0;overflow: hidden;background-color: #fbfbfb;}


/*---------------------------------------------header*/

header {position: fixed;top: 0;left: 0;width: 100%;height: 90px;background: #fff;color: #fff;z-index: 999;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;border-bottom: 1px solid #3a9738;}
header div{display: table;width: 100%;background-color: #fff; margin-top:15px;  -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
header h1 { background: url(../images/logo_t-f-lab.png) 44% no-repeat, url(../images/tennis_footwear_lab-by.png) 70% no-repeat, url(../images/logo_racketplaza.gif) 93% no-repeat;height: 60px;overflow: hidden; display: table-cell; margin-top:10px;width: 75%;}
header.thin {width: 100%;height: 60px;    display: table;}
header.thin div {margin-top: 0; /*display: block;*/}

header nav ol li{width: 32%; margin: 0 auto;text-align: center;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
header nav ol li a{color: #128341; position: relative; border: 1px solid #128341; border-radius: 20px;margin: 0 auto; padding: 5px 15px; font-size: 10px; box-shadow: 1px 2px 2px #aaa;}
header nav ol li.selected a{background: #0e8340;box-shadow: none;color:#fff;}
header nav ol li a:active{ top:2px;box-shadow:0px 0px #000;}
header nav ol li.selected a:active{top:0;}


/*-----------------------------------------------contents*/

#contents{width:860px;margin:130px auto 0; padding-bottom:40px;overflow:hidden;background: url(../images/bg.gif);}
#contents .section{width:90%;    margin: 50px auto;;margin-bottom:50px;}
#contents .intro{background-color: #fbfbfb;display: block;padding-bottom: 30px;}
#contents .intro dl{;width: 80%;margin: 0 auto;border: 1px solid #3a9738;padding: 20px;}
#contents .intro dl dt{background:url(../images/intro.png) no-repeat; display: block; width:40%;height: 50px;background-size:100%; margin:0 auto 10px;}
#contents .intro dl dd{width:80%;font-size:11px;color:#0e8340;line-height:1.5em;display:block;margin:0 auto;}
#contents .preface p{width: 100%;display: table-cell;vertical-align: top;line-height: 1.6em;}
#contents .preface .img{width: 40%;padding-right: 30px;}
#contents .preface .text{display: block;margin:0;}
#contents .desc .section .box{width:100%;font-family: "Century Gothic", sans-serif;}
#contents .desc .section .box ul,ol{ width: 100%;}
#contents .desc .section .box ul li,ol li{width: 32%; display: inline-block;margin-right: 0px;vertical-align: top;}
#contents .brand{width:100%;background-color:#fff;    margin: 20px auto;text-align: center;}
#contents .brand ul{width:95%; margin:0 auto;padding: 20px 0;}
#contents .brand ul li{display:inline-block;margin: 0 10px;vertical-align:middle;    width: 17%;}
#contents .brand ul li a{display:block;}


/*--------------------------------------------------footer*/

footer{width:100%;margin:0 auto;background-color:#fff;}
footer a:hover{opacity:1;}
footer nav{width: 100%;background-color: #0e8340;}
footer nav ol {width: 45%;margin: 0 auto;padding: 18px 0;}
footer nav ol li{overflow:hidden;display:inline-block;padding: 0px 66px;text-align:center;border-right: 1px solid #fff; width:auto;}
footer nav ol li:last-child {border:none;}
footer nav ol li a{display:block;overflow:hidden;line-height:25px;text-decoration:none;color:#fff;border-bottom: 1px solid #0e8340;}
footer nav ol li a:hover,
footer nav ol li.selected a {background:none;border-bottom:1px solid #fff;}
footer .back{width:28%;margin: 0 auto 20px;padding: 5px 0;text-align: center;}
footer .back a{border: 1px solid #0e8340;border-radius: 5px;padding: 5px 80px;box-shadow: 2px 2px 2px #aaa;position: relative;top: 0;left: 0;color: #0e8340;position: relative;font-family:"Century Gothic", sans-serif;}
footer .back a:active{top:2px;box-shadow:0px 0px #000;}
footer div{width:32%; margin:0 auto;}
footer div img.tflab{max-width: 66%;height: auto;vertical-align: middle;}
footer div img.racketplaza{max-width: 30%;height: auto;padding-left: 20px;vertical-align: middle;}
footer small a{color: #555;width: 100%;margin: 20px auto 0;text-align:center;display: block;padding:10px 0;}
#pagetop {position: fixed;width: 65px; right: 0; bottom: -80px;z-index: 9999; cursor: pointer; padding-bottom:10px;}	
#pagetop img {width: 50px;height: 50px;}


@media screen and (max-width: 1440px){
#wrapper { width: 100%;}

/*---------------------------------------------header */
header h1 {    background: url(../images/logo_t-f-lab.png) 30% no-repeat, url(../images/tennis_footwear_lab-by.png) 65% no-repeat, url(../images/logo_racketplaza.gif) 100% no-repeat;width: 55%;}
header #btnNav {right: 30px;}
/* --------------------------------------------------- footer*/
footer nav ol {width: 59%;}
footer .back {width: 31%;}
footer div {width: 35%;}
}


@media screen and (max-width: 1040px){
/*---------------------------------------------header */
header h1 {    background: url(../images/logo_t-f-lab.png) 14% no-repeat, url(../images/tennis_footwear_lab-by.png) 52% no-repeat, url(../images/logo_racketplaza.gif) 100% no-repeat;width: 65%;}
header #btnNav {right: 30px;}

/* --------------------------------------------------- footer*/
footer nav ol {width:82%;}
footer .back {width: 43%;}
footer div {width: 49%;}
}


@media screen and (min-width: 760px) and (max-width: 1440px){
#wrapper { width: 100%;}

/*---------------------------------------------header*/
header div{display: block;margin: 25px 0;}
header h1 a{display:block;}
header nav { display:none;}
header.thin div { margin:0;}
	
/* --------------------------------------------------- menu btn */
header #btnNav { position: absolute; top:27px; z-index: 101; width: 40px; height: 40px; display: block; background: url(../images/btn_glonav.png) no-repeat; -webkit-transition: background-position 0.35s; -moz-transition: background-position 0.35s; transition: background-position 0.35s; -moz-background-size: 40px auto; -webkit-background-size: 40px auto; -o-background-size: 40px auto; -ms-background-size: 40px auto; background-size: 40px auto; text-indent: 110%; white-space: nowrap; overflow: hidden; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
header #btnNav.active { background-position: 0 -46px; }
header nav { z-index: -2; position: fixed; filter: alpha(opactiy=0);-moz-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; top: 0; left: 0; right: 0; bottom: 0;background: rgba(255, 255, 255, 0.75); -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; transition:opacity 0.35s;}
header nav.active { display: block; z-index: 100; filter: alpha(opactiy=100); -moz-opacity: 1; -khtml-opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; top: 92px;}
header nav ol { margin: 40px 0; }
header nav ol li { margin-bottom: 15px; width: 100%;}
header nav ol li:last-child { margin-bottom: 0; }
header nav ol li a{background-color: #0e8340;color: #fff;display: inline-block;min-width: 80px; padding: .7em .5em;line-height: 1; text-align: center; border: none;width: 70%; border-radius:0; box-shadow:none;font-size: 18px;}
header.thin #btnNav{ top: 12px;}
header.thin nav.active { top: 60px;}
}


@media screen and (max-width: 780px) {
#wrapper { width: 100%;}

/*---------------------------------------------header*/
header h1 {    background: url(../images/logo_t-f-lab.png) 3% no-repeat, url(../images/tennis_footwear_lab-by.png) 43% no-repeat, url(../images/logo_racketplaza.gif) 100% no-repeat;background-size: auto 90%;height: 32px;width: 90%; display: block;    margin: 15px 0;}
header #btnNav {right: 0px;}
/*-----------------------------------------------contents*/
#contents{width:100%; display: block;}
#contents .brand ul li { margin: 0 2px;}

/* --------------------------------------------------- footer */
footer nav ol {width: 100%;}
footer nav ol li {padding: 0 54px;}
footer .back {width: 87%;}
footer .and ul {width: 95%;}
footer .back a { padding: 5px 15px;}
footer div {width: 80%;}
footer div img.tflab {max-width: 60%;}
footer div img.racketplaza {max-width: 30%;padding-left: 15px;}

}

@media screen and (max-width: 480px){
/*---------------------------------------------header*/
header {/*width: 860px;*/height: auto; position: fixed;}
header h1 {background: url(../images/logo_t-f-lab.png) 1% no-repeat, url(../images/tennis_footwear_lab-by.png) 40% no-repeat, url(../images/logo_racketplaza.gif) 99% no-repeat; background-size: auto 43%; height: 32px;margin: 0;}
header div { display:block; margin: 15px 0;}
header nav { display:none;}
header.thin { display: block;height: 31px;}

/* --------------------------------------------------- menu btn */
header #btnNav { position: absolute; right: 0px; top:18px; z-index: 101; width: 30px; height: 30px; display: block; background: url(../images/btn_glonav.png) no-repeat; -webkit-transition: background-position 0.35s; -moz-transition: background-position 0.35s; transition: background-position 0.35s; -moz-background-size: 30px auto; -webkit-background-size: 30px auto; -o-background-size: 30px auto; -ms-background-size: 30px auto; background-size: 30px auto; text-indent: 110%; white-space: nowrap; overflow: hidden; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;}
header #btnNav.active { background-position: 0 -36px; }
header nav { z-index: -2; position: fixed; filter: alpha(opactiy=0); -moz-opacity: 0; -khtml-opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.75); -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; transition: opacity 0.35s; }
header nav.active { display: block; z-index: 100; filter: alpha(opactiy=100); -moz-opacity: 1; -khtml-opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; top: 63px;}
header nav ol { margin: 40px 0; }
header nav ol li { margin-bottom: 15px; width: 100%;}
header nav ol li:last-child { margin-bottom: 0; }
header nav ol li a{background-color: #0e8340;color: #fff;display: inline-block;min-width: 80px; padding: .7em .5em;line-height: 1; text-align: center; border: none;width: 90%; border-radius:0; box-shadow:none;font-size: 12px;}
header.thin #btnNav{ top: 5px;}
header.thin nav.active { top: 33px;}

/* --------------------------------------------------- contents */
#contents{width:100%; margin: 90px auto 0;}
#contents div{display:block;}
#contents .intro dl {display: block; width: 80%;height:auto;}
#contents .intro dl dt { background: url(../images/what_tflab.png) 50% no-repeat; margin: 0;width: 100%;}
#contents .intro dl dd { padding-right:0px;}
#contents .desc .section .box ul li, ol li {display: block; width:80%;margin: 0 auto;}
#contents .brand ul li { margin: 0 6px; width: 15%;}
#contents .brand ul li img{ width:100%;}
#contents .brand ul li a {display: block;padding: 0;}	

/* --------------------------------------------------- footer */
footer nav ol {width: 100%; padding:0;}
footer nav ol li {display: block;padding: 10px 0;border-bottom: 1px solid #fff;}
footer nav ol li.selected{ background-color:#fff;}
footer nav ol li.selected a{ background-color:#fff;border-bottom: none; color:#0e8340;}
footer .back {width: 87%;}
footer .and ul {width: 95%;}
footer .back a { padding: 5px 15px;}
footer div {width: 80%;}
footer div img.tflab {max-width: 60%;}
footer div img.racketplaza {max-width: 30%;padding-left: 15px;}
}