@charset "UTF-8";
@import "base.css";

html, body { height: 100%; background: url(../images/global/background.gif) center top repeat-y #ded9d2; }

/* DIV FLOAT CLEAR */
div {
	position: relative;
	margin: 14;
	padding: 0;
	border: 0;
	zoom: 1;
}
div:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* --------------------------------------------------
	HEADER
-------------------------------------------------- */
div#header { margin: 0 auto 10px; width: 960px; height: 100px; }
div#header p#toplogo {
	position: absolute;
	left: 0px;
	top: 10px;
	margin: 0;
	width: 200px;
	height: 80px;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../images/global/toplogo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
div#header p#toplogo a { display: block; width: 200px; height: 80px; }
div#header p#topcopy {
	position: absolute;
	left: 210px;
	top: 15px;
	margin: 0;
	width: 380px;
	color: #666;
	font-size: 12px;
}
div#header div#topinfo { position: absolute; right: 0; top: 10px; width: 350px; height: 80px; }
div#header div#topinfo p { margin-bottom: 6px; float: left; height: 24px; line-height: 24px; }
div#header div#topinfo p a { color: #08c; text-decoration: underline; }
div#header div#topinfo p#facebook {
	margin-right: 10px;
	padding-left: 28px;
	background: url(../images/global/snsicn_fb.gif) 0 50% no-repeat;
	font-size: 12px;
}
div#header div#topinfo p#twitter {
	padding-left: 28px;
	background: url(../images/global/snsicn_tw.gif) 0 50% no-repeat;
	font-size: 12px;
}
div#header div#topinfo a#info {
	display: block;
	margin: 0;
	width: 350px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../images/global/topinfo.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
div#header div#topinfo a#info:hover { background-position: 0 -50px; }

/* --------------------------------------------------
	Global-Navigation
-------------------------------------------------- */
div#globalnavi { margin: 0 auto 10px; width: 960px; height: 30px; }
div#globalnavi ul { margin: 0; padding: 0; border: 0; }
div#globalnavi li { float:left; list-style-type: none; }
div#globalnavi li a { display: block; width: 160px; height: 30px; background: url(../images/global/globalnavi.gif) 0 0 no-repeat; text-indent: -9999px; text-decoration: none; /*\*/overflow: hidden;/**/ }
div#globalnavi li#home a { background-position: 0 0; }
div#globalnavi li#about a { background-position: -160px 0; }
div#globalnavi li#prod a { background-position: -320px 0; }
div#globalnavi li#flow a { background-position: -480px 0; }
div#globalnavi li#works a { background-position: -640px 0; }
div#globalnavi li#faq a { background-position: -800px 0; }
div#globalnavi li#home a:hover { background-position: 0 -30px; }
div#globalnavi li#about a:hover, div#globalnavi li#about_on a { background-position: -160px -30px; }
div#globalnavi li#prod a:hover, div#globalnavi li#prod_on a { background-position: -320px -30px; }
div#globalnavi li#flow a:hover, div#globalnavi li#flow_on a { background-position: -480px -30px; }
div#globalnavi li#works a:hover, div#globalnavi li#works_on a { background-position: -640px -30px; }
div#globalnavi li#faq a:hover, div#globalnavi li#faq_on a { background-position: -800px -30px; }


/*------------------------------------------------------------
	DIV
------------------------------------------------------------*/
div#wrapper { margin: 0 auto; width: 960px; }
div#leftColumn { float: left; margin: 0 20px 40px 0; width: 220px; }
div#rightColumn {
	width: 720px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
	float: left;
}
div.contents {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #ccc;
	width: 720px;
	float: left;
}

/*------------------------------------------------------------
	BASIC TABLE
------------------------------------------------------------*/
table { margin: 0; border-collapse: collapse; width: 100%; }
table th, table td { border-collapse: collapse; border: 1px solid #ccc; padding: 10px; text-align: left; vertical-align: middle; }
table th { background-color: #f5f5f5; width: 25%; }
table p { margin: 0; }


/*------------------------------------------------------------
	TEXT
------------------------------------------------------------*/
.txt_gray, .txt_gray a { color: #999; }
.txt_pink, .txt_pink a { color: #e4006e; }
.txt_skyblue, .txt_skyblue a { color: #3fa9f5; }
.txt_blue, .txt_blue a { color: #0071bc; }
.txt_green, .txt_green a { color: #638c0b; }
.txt_orange, .txt_orange a { color: #f15a24; }
.txt_purple, .txt_purple a { color: #93278f; }
.txt_brown, .txt_brown a { color: #a67c52; }
.txt_yellow, .txt_yellow a {
	color: #FFCC00;
}
p.default { margin-bottom: 40px; font-size: 16px; line-height: 28px; color: #666; } 
p.go-top { text-align: right; }
img.sa_img2 {
	left: 0;
	bottom: 40px;
}


/*------------------------------------------------------------
	H1 TEXT
------------------------------------------------------------*/
h1#selectGoods, h1#selectSports, h1#soccer, h1#sports_apparel, h1#aboutimg, h1#caseimg, h1#flowimg, h1#prodimg, 
h1#uniform, h1#ladies, h1#keeper, h1#tee, h1#polo, h1#jersey, h1#piste, h1#userimg, h1#inquiry, h1#baseball, h1#cheer
{ margin-bottom: 20px; width: 720px; height: 270px; text-indent: -9999px; overflow: hidden; background-position: 0 0; background-repeat: no-repeat; }
h1#selectGoods { background-image: url(../images/prod/h1_selectgoods.jpg); }
h1#selectSports { background-image: url(../images/prod/h1_selectsports.gif); }
h1#soccer {
	margin-bottom: 10px;
	background-image: url(../images/prod/product/h1_soccer.png);
}
h1#sports_apparel { margin-bottom: 10px; background-image: url(../images/prod/h1_sports_apparel.jpg); }
h1#aboutimg { margin-bottom: 40px; background-image: url(../images/pages/h1_about.jpg); }
h1#caseimg {
	margin-bottom: 40px;
	background-image: url(../images/pages/h1_case.png);
}
h1#flowimg { margin-bottom: 40px; background-image: url(../images/pages/h1_flow.jpg); }
h1#prodimg {
	margin-bottom: 20px;
	background-image: url(../images/prod/h1_prod.png);
}
h1#uniform {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_uniform.png);
}
h1#ladies {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_ladies.png);
}
h1#keeper {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_gk.png);
}
h1#tee {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_tshirts.png);
}
h1#polo {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_polo.png);
}
h1#jersey {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_jersey.png);
}
h1#piste {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_piste.png);
}
h1#userimg {
	margin-bottom: 20px;
	background-image: url(../images/pages/h1_user.png);
}
h1.h1normal { margin-bottom: 20px; padding-left: 15px; border-left: 4px solid #999;  font-weight: normal; }
h1#inquiry { height:165px; margin-bottom: 20px; background-image: url(../images/inquiry/h1_inquiry.jpg); }
h1#baseball {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_baseball.png);
}
h1#cheer {
	margin-bottom: 20px;
	background-image: url(../images/prod/product/h1_cheer.png);
}
h1#kari { border-bottom:1px solid #ccc; padding:10px 0; margin-bottom:15px; font-size:36px; line-height:40px; font-weight:normal; }

/*------------------------------------------------------------
	H2/H3 TEXT
------------------------------------------------------------*/
h2 { margin-bottom: 20px; padding-left: 10px; border-left: 4px solid #e4006e; font-size: 18px; color: #e4006e; }
h2.pages {
	margin-bottom: 5px;
	padding-left: 10px;
	border-left: 4px solid #e4006e;
	font-weight: bold;
	font-size: 1.7em;
	color: #E4026E;
}
h2.flowpage {
	margin-bottom: 15px;
	padding-left: 10px;
	border-left: 4px solid #638c0b;
	font-weight: bold;
	font-size: 1.7em;
	color: #638C0A;
}
h2.faqpage {
	margin-bottom: 15px;
	padding-left: 10px;
	border-left: 4px solid #93278f;
	font-weight: bold;
	font-size: 1.7em;
	color: #93288F;
}
h2.uservoice { margin-bottom: 15px; padding-left: 10px; border-left: 4px solid #3fa9f5; font-weight: normal; font-size: 18px; color: #333; }
h2.h2txt_top1   
{
	padding: 0;
	border: 0;
	width: 720px;
	text-indent: -9999px;
	overflow: hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 400px;
	margin: 0px;
}
h2.h2txt_top1_2   
{
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	width: 720px;
	text-indent: -9999px;
	overflow: hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 260px;
	background-image: url(../images/top/top_suggest_002.png);
}
h2.h2txt_top1_3   
{
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	width: 720px;
	text-indent: -9999px;
	overflow: hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 574px;
	background-image: url(../images/top/top_suggest_004.png);
}
h2.h2txt_top2, h2.h2txt_top3  
{
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	width: 720px;
	text-indent: -9999px;
	overflow: hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 40px;
}
h2.h2txt_top1 {
	background-image: url(../images/top/top_suggest_001.png);
	height: 400px;
}
h2.h2txt_top2 {
	background-image: url(../images/top/h2txt_top2.png);
}
h2.h2txt_top3 {
	background-image: url(../images/top/h2txt_top3.png);
}
h3 { margin-bottom: 10px; font-weight: normal; font-size: 24px; line-height: 30px; color: #333; }

/*------------------------------------------------------------
	KEYVISUAL
------------------------------------------------------------*/
#keyvisual { margin: 0 0 30px; border: 1px solid #ccc; width: 958px; height: 298px; }
#keyvisual .flexslider { margin: 0; } /* flexslider.js & flexslider.css  */


/*------------------------------------------------------------
	FOOTER
------------------------------------------------------------*/
#globalfooter { clear: both; margin: 0 auto; padding: 40px 0; width: 960px; text-align: center; font-size: 12px; line-height: 18px; color: #666; }
#globalfooter a { margin-right: 8px; padding-left: 10px; border-left: 1px solid #999; color: #08c; text-decoration: none; }
#globalfooter a.last { padding-right: 8px; border-right: 1px solid #999; }
#globalfooter a:hover { color: #08c; text-decoration: underline; }
#globalfooter hr { margin-bottom: 10px; border: 0; border-bottom: 1px solid #999; }
#globalfooter div#footer { text-align: left; color: #666; }
#globalfooter div#footer img { float: left; margin-right: 10px; }
#globalfooter div#footer p { margin-bottom: 3px; color: #333; }
#globalfooter div#footer a { margin: 0; padding: 0; border: 0; }


/* --------------------------------------------------
	BREADCRUMBS
-------------------------------------------------- */
div#breadcrumbs { margin: 0 auto 20px; padding-top: 5px; border-top: 1px solid #ccc; width: 960px; font-size: 10px; line-height: 15px; color: #999; }
div#breadcrumbs a { color: #999; text-decoration: none; margin-right: 7px; padding-right: 14px; background: url(../images/global/breadcrumbs_arr.gif) 100% 40% no-repeat; }
div#breadcrumbs a:hover { color: #08c; text-decoration: underline; }


/* --------------------------------------------------
	CONTENTS MENU
-------------------------------------------------- */
div.leftmenu { margin: 0 0 10px; padding: 0; border: 1px solid #999; }
div.leftmenu p { margin: 0; padding: 8px; border-bottom: 1px solid #efefef; font-size: 14px; }
div.leftmenu p.pagetitle { border: 0; background-color: #999; color: #fff; }
div.leftmenu p.pagetitle a { color: #fff; }
div.leftmenu p.pagetitle a:hover { color: #fd0; text-decoration: underline; }
div.leftmenu ul { margin: 0; border-bottom: 1px solid #999; }
div.leftmenu ul li { margin: 0; padding: 5px 8px; border-bottom: 1px solid #efefef; list-style-image: url(../images/global/menulist.gif); list-style-position: inside; font-size: 12px; color: #666; }
div.leftmenu ul li:last-child { border: 0; }
.china { margin-bottom:10px;}

/* --------------------------------------------------
	TOP PAGE SNS
-------------------------------------------------- */
img#ceoimg { position: absolute; right: 5px; top: 100px; }
p#ceotxt { width: 530px; }
div#snsbox { margin: 0 0 40px; width: 720px; }
div#fbbox, div#twbox { float: left; margin: 0; width: 350px; }
div#fbbox { margin-right: 20px; }
div#fbbox img, div#twbox img { margin-bottom: 10px; width: 350px; height: 40px; }


/* --------------------------------------------------
	FLOAT COLUMN
-------------------------------------------------- */
div.columnbox { margin: 0 0 20px; width: 720px; }
div.clm2Box { float: left; margin-bottom: 10px; margin-right: 10px; width: 355px; }
div.clm2Box.rt { margin-right: 0; }
div.clm4Box { float: left; margin-bottom: 4px; margin-right: 4px; width: 177px; }
div.clm4Box.rt { margin-right: 0; }
div.clm4Box-txt { float: left; margin-bottom: 4px; margin-right: 4px; width: 175px; border:1px solid #ccc; padding:8px 0; background-color:#fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
div.clm4Box-txt.rt { margin-right: 0; }
div.clm4Box-txt a { padding-left:10px; display:block; }
div.clm4Box-txt a span { color:#e1147f; margin-right:5px; font-weight:bold; }
div.clm4Box-txt a span.noMgn { margin:0; }
div.clm4Box-txt a:hover {text-decoration:none; color:#e1147f; }

/* --------------------------------------------------
	BUTTON - INQUIRY
-------------------------------------------------- */
div.inqBox { margin: 40px 0; width: 720px; }
div.inqBox p { margin: 0; width: 720px; height: 200px; }
div.inqBox p a {
	display: block;
	width: 720px;
	height: 200px;
	text-indent: -9999px;
	overflow: hidden;
	background-image: url(../images/global/inq_button.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}
div.inqBox p a:hover {
	background-position: 0 -200px;
}
div.inqBox .mid { margin: 0; }


/* --------------------------------------------------
	FAQ PAGE
-------------------------------------------------- */
p.faq_q, p.faq_a { margin: 0; padding-left: 14px; padding-right: 20px; }
p.faq_q {
	margin-bottom: 8px;
	font-size: 1.3em;
	line-height: 1.6em;
	color: #93278f;
}
p.faq_a {
	margin-bottom: 30px;
}
p.faq_a span { color: #666; }
p.faq_a a { color: #08c; text-decoration: none; }
p.faq_a a:hover { color: #08c; text-decoration: underline; }


/* --------------------------------------------------
	USER PAGE
-------------------------------------------------- */
table.tbl-userimg { margin: 0; border-collapse: collapse; width: 720px; }
table.tbl-userimg th, table.tbl-userimg td { border-collapse: collapse; border: 1px solid #ccc; padding: 10px; text-align: center; vertical-align: middle; }
table.tbl-userimg th { padding: 60px 0; }
table.tbl-userimg th img { max-width: 680px; }
table.tbl-userimg td { border-bottom: 0; }
table.tbl-userimg td img { max-width: 300px; }
table.tbl-user { margin: 0; border-collapse: collapse; width: 720px; }
table.tbl-user th, table.tbl-user td { border-collapse: collapse; border: 1px solid #ccc; padding: 10px; text-align: left; vertical-align: middle; }
table.tbl-user th { background-color: #f5f5f5; width: 30%; }
table.tbl-user td p { margin: 0; color: #3fa9f5; }
table.tbl-user td p.faqtxt { color: #666; font-weight: bold; }
div.userlink { clear: both; margin: 0 auto; padding: 0 auto 20px; width: 720px; text-align: center; font-size: 12px; line-height: 22px; color: #333; }
div.userlink a { margin-right: 6px; padding-left: 8px; border-left: 1px solid #999; color: #08c; text-decoration: none; }
div.userlink a.onpage { color: #333; }
div.userlink a.last { padding-right: 8px; border-right: 1px solid #999; }
div.userlink a:hover { color: #08c; text-decoration: underline; }


/* SITEMAP */
div.sitemap { float: left; margin-bottom: 20px; width: 240px; font-size: 12px; line-height: 20px; }
div.sitemap p { margin-bottom: 5px; font-size: 14px; color: #000; }
div.sitemap p a { color: #000; }
div.sitemap ul { margin-bottom: 5px; }
div.sitemap ul li { color: #333; }

div.sitemap a:hover { color: #08c; text-decoration: underline; }


/* FORM */
span.must { margin-left:5px; font-weight:bold; color:#e1147f; }
.text-center { text-align:center; }
.inqBtn { margin: 20px 5px 0; padding:5px 20px; border: solid 1px #e1147f; font-size: 14px; color: #333; background:#fff; transition: all .3s ease-in-out; }
.inqBtn:hover,
.inqBtn2:focus,
.inqBtn:active,
.inqBtn.active { border: solid 1px #e1147f; color: #fff !important; background: #e1147f; }
#formbtn input{ cursor: pointer; }
label { display: block; }