/************************************************************\
* 1. member-1 / MEMBER LOGIN
* 2. member-2 / SIGN UP
* 3. member-3 / FORGOT PASSWORD
* 4. member-4 / MODIFY
* 5. member-5 / CATELOG DOWNLOAD
\************************************************************/


/************************************************************\
* [Block] Member Menu
\************************************************************/
#member_menu{
	text-align: center;
	width: 1001px;
	height: 117px;
	margin: 0 auto;
	padding-top: 73px;
	padding-right: 4px;
	border-bottom: 1px solid #363636;
}
#member_menu a{
	color: #fff;
	box-sizing: border-box;
	float: left;
	width: 33.33%;
	height: 97px;
	border-right: 1px solid #bfbfbf;
}
#member_menu a:nth-child(3){
	border-right: none;
}
#member_menu a > div{
	display: inline-block;
	margin: 25px auto;
	
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;   
}
#member_menu a:nth-child(1) > div{
	padding-right: 15px;
}
#member_menu a:nth-child(2) > div{
	padding-right: 11px;
}
#member_menu a:nth-child(3) > div{
	padding-right: 12px;
}
#member_menu a .ico{
	float: left;
}
#member_menu a:hover > div{
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}
#member_menu a span{
	text-align: left;
	color: #303030;
	float: left;
	height: 46px;
	margin-top: 6px;
	margin-left: 31px;
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
#member_menu a:nth-child(2) span{
	margin-left: 41px;
}
#member_menu a span.oneline {
	line-height: 46px;
}
#member_menu a img{
	top: 9px;
}
#member_menu a .img_on{
	display: none;
	opacity:0;
}

/************************************************************\
* member-1 / MEMBER LOGIN
\************************************************************/
#member_login{
}
#member_login .container{
	margin: 0 auto 70px;
	padding-top: 77px;
}
#member_login h2{
	margin-bottom: 77px;
	opacity: 0;
}
/*****************************\
* form
/*****************************/
#member_login form{
	box-sizing: border-box;
	float: left;
	width: 503px;
	padding-right: 87px;
	border-right: 1px solid #d9d9d9;
}
#member_login .formarea{
	opacity: 0;
}
#member_login .field{
	
}
#member_login .field input[type="text"],
#member_login .field input[type="password"],
#member_login .field_verification input[type="text"]{
	height: 34px;
}
#member_login .field_button{
	margin-top: 42px;
}
/*****************************\
* links
/*****************************/
#member_login .member_link a > div{
	display: inline-block;
	margin: 28px auto 0;
	
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;   
}
#member_login .member_link a:nth-child(1) > div{
	padding-right: 31px;
}
#member_login .member_link a:nth-child(3) > div{
	padding-right: 12px;
}
#member_login .member_link a .ico{
	float: left;
}
#member_login .member_link a:hover > div{
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}
#member_login .member_link a span{
	text-align: left;
	color: #303030;
	float: left;
	margin-top: 5px;
	margin-left: 15px;
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
#member_login .member_link a span.oneline {
	line-height: 46px;
}
#member_login .member_link a img{
	top: 9px;
}
#member_login .member_link a .img_on{
	display: none;
	opacity:0;
}
/*****************************\
* right tip
/*****************************/
#member_login .right_tip{
	box-sizing: border-box;
	position: relative;
	float: left;
	width: 499px;
	margin-top: 2px;
	padding-left: 71px;
	opacity: 0;
}
#member_login .right_tip > img{
	position: absolute;
	top: 0;
	right: 93px;
}
#member_login .right_tip .tip_top{
	color: #727272;
	margin-top: 152px;
	font-size: 12px;
	line-height: 34.56px;
	letter-spacing: 0.05em;
}
#member_login .right_tip .tip_slogan{
	color: #292929;
	width: 250px;
	margin-top: 40px;
	font-family: proxima_novasemibold;
	font-weight: 500;
	font-size: 24px;
	line-height: 27px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}
#member_login .right_tip p{
	color: #565656;
	width: 372px;
	margin-top: 66px;
	margin-left: 3px;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.045em;
}

/************************************************************\
* member-2 / SIGN UP
\************************************************************/
#sign_up{
}
#sign_up .container{ /* cover */
	width: 1007px;
	margin: 0 auto 26px;
	padding-top: 67px;
}
#sign_up form{
}
#sign_up .row{
	overflow: hidden;
	clear: both;
	margin-bottom: 67px;
}
#sign_up .row:nth-child(2){
	margin-bottom: 60px;
}
#sign_up .row:nth-child(3){
	margin-bottom: 0;
}
#sign_up .block_title{
	float: left;
	width: 25%;
	min-height: 150px;
	margin-top: 10px;
	font-family: proxima_novasemibold;
	font-size: 36px;
	line-height: 38px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}
#sign_up .row:nth-child(3) .block_title{
	margin-top: -5px;
}
#sign_up .field{ /* cover */
	float: right;
	width: 742px;
}
#sign_up .field input[type="text"],
#sign_up .field input[type="password"]{ /* cover */
	width: 553px;
}
#sign_up .provision{ /* cover */
    color: #9a9a9a;
	width: 740px;
	margin-right: 4px;
	border: none;
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 0.044em;
}
#sign_up .term_wrapper{
	box-sizing: border-box;
    margin-bottom: 20px;
    padding: 42px 38px 42px 43px;
	border: 1px solid #dadada;
	
	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(209,209,209,1);
	-moz-box-shadow: inset 0px 0px 2px 0px rgba(209,209,209,1);
	box-shadow: inset 0 0 2px 0px rgba(209,209,209,1);
}
#sign_up .terms{
    display: inline-block;
	box-sizing: border-box;
    position: relative;
	width: 100%;
	height: 452px;
}
#sign_up .terms .inner {
	float: left;
	width: 94%;
	margin-right:
}
#sign_up .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    background-color: #3b3b3b;
}
#sign_up .ps-container > .ps-scrollbar-y-rail{
    background-color: #ededed;
}
#sign_up .terms h3{
	color: #1a1a1a;
	margin-top: 55px;
	margin-bottom: 30px;
	font-size: 18px;
	letter-spacing: 0.08em;
}
#sign_up .provision .agree{
    text-align: center;
    display: block;
	margin-right: 30px;
}
#sign_up .provision .agree *{
	vertical-align: middle;
}
#sign_up .field_button{
	text-align: center;
	margin-top: 23px;
}
#sign_up .field_button .button{
	float: none;
	margin-left: 3px;
	margin-right: 3px;
}
#sign_up .field .select {
    background: rgba(0, 0, 0, 0) url("../images/contact_s.jpg") no-repeat scroll right center;
	float: right;
    overflow: hidden;
	width: 553px;
    margin-bottom: 0;
    border: 0 none;
}
#sign_up .field .select select {
    background: transparent none repeat scroll 0 0;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0;
    width: 100%;
    height: 34px;
    padding: 0;
	
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
}

/************************************************************\
* member-3 / FORGOT PASSWORD
\************************************************************/
#forgot_password{
}
#forgot_password .container{
	width: 1005px;
	margin: 0 auto 109px;
	padding-top: 75px;
}
#forgot_password h2{
	opacity: 0;
}
#forgot_password form{
	float: left;
	width: 414px;
	margin-top: -7px;
	opacity: 0;
}
#forgot_password .field_button{
	margin-top: 42px;
}
#forgot_password .right_tip{
	float: left;
	margin-top: 2px;
	margin-left: 103px;
	opacity: 0;
}
#forgot_password .right_tip p{
	color: #575757;
	margin-top: 13px;
	padding-left: 5px;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0.025em;
}

/************************************************************\
* member-4 / MODIFY
\************************************************************/
#modify{
}
#modify .container{ /* cover */
	width: 1007px;
	margin: 0 auto 84px;
	padding-top: 74px;
}
/*****************************\
* Top Tip
\*****************************/
#modify .top_tip{
	overflow: hidden;
	padding-bottom: 64px;
	margin-bottom: 86px;
	border-bottom: 4px solid #ededed;
}
#modify .top_tip .tip_title{
	color: #292929;
	float: left;
	width: 30%;
	font-family: proxima_novasemibold;
	font-size: 36px;
	line-height: 38px;
	letter-spacing: 0.015em;
	text-transform: uppercase;
}
#modify .top_tip p{
	color: #575757;
	box-sizing: border-box;
	float: right;
	width: 60%;
	margin-top: 12px;
	padding: 7px 0 8px 50px;
	border-left: 1px solid #c6c6c6;
	font-size: 15px;
	line-height: 21px;
	letter-spacing: 0.042em;
}
/*****************************\
* Form
\*****************************/
#modify form{
}
#modify .row{
	overflow: hidden;
	clear: both;
	margin-bottom: 67px;
}
#modify .row:nth-child(2){
	margin-bottom: 58px;
}
#modify .row:nth-child(3){
	margin-bottom: 0;
}
#modify .block_title{
	color: #292929;
	float: left;
	width: 25%;
	min-height: 150px;
	margin-top: 10px;
	font-family: proxima_novasemibold;
	font-size: 36px;
	line-height: 38px;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}
#modify .with_member{
	margin-top: 30px;
}
#modify .with_member span{
	vertical-align: top;
	margin: 2px 15px 0 0;
}
#modify .with_member em{
	color: #606060;
	vertical-align: middle;
	display: inline-block;
	font-family: Myriad Pro;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.065em;
	text-transform: none;
}
#modify .row:nth-child(3) .block_title{
}
#modify .field{ /* cover */
	float: right;
	width: 742px;
}
#modify .field4 .name{ /* cover */
	line-height: 30px;
}
#modify .field4 input{ /* cover */
	height: 32px;
}
#modify .field input[type="text"],
#modify .field input[type="password"]{ /* cover */
	width: 553px;
}
#modify .field.unline{
	border-bottom: none;
}
#modify .field_button{
	margin-top: 58px;
	margin-right: 5px;
}
#modify .field_button .button{
	float: none;
	margin-left: 3px;
	margin-right: 4px;
}
#modify .field .select {
    background: rgba(0, 0, 0, 0) url("../images/contact_s.jpg") no-repeat scroll right center;
	float: right;
    overflow: hidden;
	width: 553px;
    margin-bottom: 0;
    border: 0 none;
}
#modify .field .select select {
    background: transparent none repeat scroll 0 0;
    -moz-appearance: none;
    border: 0 none;
    border-radius: 0;
    width: 100%;
    height: 34px;
    padding: 0;
	
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
}

/************************************************************\
* member-5 / CATELOG DOWNLOAD
\************************************************************/
#download .container{
	overflow: hidden;
	position: relative;
    z-index: 1;
	width: 1003px;
	margin: 0 auto;
	padding-top: 79px;
}
#download .masonry_wrap{
	margin: 0 auto;
}



/*****************************\
* GRID
\*****************************/
#download .grid{
	float: left;
	width: 308px;
	padding: 0 13px 39px;
	
	-webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
		 -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	        transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
#download .grid .img {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
#download .grid .img > img {
    float: left;
	width: 100%;
	
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	-webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
		 -o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
	        transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
#download .grid:hover .img > img {
	-webkit-transform: scale(1.05);
	   -moz-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	     -o-transform: scale(1.05);
	        transform: scale(1.05);
}
#download .grid .img_cover {
    background-color: rgba(245, 203, 0, 0.75);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
	-webkit-transition: all 0.5s ease 0s;
		 -o-transition: all 0.5s ease 0s;
	        transition: all 0.5s ease 0s;
}
#download .grid:hover .img_cover {
    opacity: 1;
}
#download .grid .img_cover img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -34px;
    opacity: 0;
}

/*****************************\
* SUMMARY
\*****************************/
#download .grid .summary{
	box-sizing: border-box;
	clear: both;
	position: relative;
	width: 308px;
	height: 201px;
	padding: 39px 28px;
	border: 1px solid #c6c6c6;
}
#download .grid .summary .info{
	width: 170px;
	color: #292929;
	font-size: 16.65px;
	line-height: 19.98px;
	letter-spacing: 0.05em;
	font-weight: 500;
}
#download .grid .summary .more{
	position: absolute;
	top: 47px;
	right: 35px;
	
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#download .grid:hover .summary .more{
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}