@charset "utf-8";

*{ box-sizing: border-box;}
section.in{ margin:50px 0 }
.in h1{ padding:20px; text-align:center}

header{ width:100%; height:180px; background:url(../images/nav_bg.jpg) no-repeat; background-position:center center; position:relative}
nav{ margin-top:70px; width:100%; height:40px; background:#fff; position:absolute;
     -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
          box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
}
.nav_icon{ position:absolute; top:11px; right:20px; width:90px }
.nav_icon span{ border:1px solid #C09C78;border-radius:20px; padding:7px 8px 0}
header .logo{ background:url(../images/logo_6.gif); display:block; width:137px; height:157px; position:absolute; top:-58px; left:calc(50% - 68.5px ) }
nav ul{ display:block; width:900px; margin:0 auto; position:relative}
nav li{ display:inline-block; font-size:13px; margin:0 35px; position:relative;}
nav li:nth-child(3){ margin:0 225px 0 35px}
nav li:last-child{ margin:0 0 0 35px}
nav li a{ color:#C09C78; display:block; padding:13px 0 0; text-decoration:none}
nav ul li a:after{ background:#C09C78; content:""; display:block; width:0%; height:1px; -webkit-transition: all 0.3s ease;
                                   transition: all 0.3s ease; margin:3px 0 0; position:absolute; left:50%;-webkit-transform: translateX(-50%);
          transform: translateX(-50%); }
nav ul li a:hover:after{ content:""; display:block; width:100%; hanging-punctuation:1px; margin:3px 0 0; -webkit-transition: all 0.3s ease;
                                   transition: all 0.3s ease; }
								   
/*---header smaller---*/	
header.smaller{ background:#fff; height:75px; position:fixed; top:0; z-index:1 }
header.smaller nav{ margin-top:35px; position:fixed}
header.smaller .logo{ background:url(../images/logo_6s.png); width:94px; height:105px; top:-33px; left:calc(50% - 47px)}
/*.overlay*/
.overlay{ display:none}

/*關於wone*/
.gold_bg{ width:100%; height:30px; background:url(../images/gold_bg.jpg); background-position:center; background-repeat:no-repeat; position:relative}

.row{ font-size:0}
.about_wone .row{ 
	background: #fbf4ef; 
	background: -moz-linear-gradient(-45deg, #fbf4ef 0%, #f0ddd2 100%);
	background: -webkit-linear-gradient(-45deg, #fbf4ef 0%,#f0ddd2 100%); 
	background: linear-gradient(135deg, #fbf4ef 0%,#f0ddd2 100%); 
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbf4ef', endColorstr='#f0ddd2',GradientType=1 );
    overflow:hidden; position:relative
}
.about_wone .row li{ display:inline-block; color:#555; font-size:13px; position:relative; vertical-align:top; width:35%; margin:5% 15% 5% 10%}
.about_wone .row li:nth-child(1){ width:40%; background:url(../images/abouy_bg.png) no-repeat; background-size: contain; background-position:right center; height:300px; margin:6% 0;}
.row:before{ content: ""; display: block;; background:#fff; width:100%; height:100%; transform:translate( 90%,0) skew(-45deg, 0deg) scale(2, 1) ; transition:all 0.3S; position:absolute}
.about_wone .row li p{ letter-spacing:1px; line-height:200%}
.about_wone h1+div{ padding:20px 0}

/*關於攝影造型*/
.about ul{ font-size:0; display:table; width:100%}
.about ul li{ display: table-cell; width:50%; vertical-align:top }
.about ul li{ background:url(../images/photography_bg.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
.about ul li:nth-child(2){ background:url(../images/stylist_bg.jpg);background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
.about article{ border:5px solid #C09C78; margin:10%; padding:10%; min-height:800px}

.about h1,.about_wone h1{ font-size:40px; color:#C09C78; border-bottom:1px solid #666; padding-bottom:15px; position:relative}
.about h1:after,.about_wone h1:after{ content:""; display:block; width:20%; height:3px; background:#666; position:absolute; bottom:-4px }
.about h2,.about_wone h2{ font-size:21px; color:#C09C78; margin:20px 0 0}
.face+h3{ font-size:17px; color:#fff; padding:0 0 10px}
.face{ border-radius:50%; background: url(../images/photo01.jpg); background-size: cover; width:60%; height:0; padding-bottom:60%; margin:8% auto}
.face.f2{ background: url(../images/photo02.jpg); background-size: cover; width:60%; height:0; padding-bottom:60%; margin:8% auto}
.about p{ font-size:13px; color:#fff; letter-spacing:1px; line-height:200%}


/*---NEWS---*/

.grid{ max-width:1200px; margin:0 auto}
.grid-sizer,.grid-item { width: 20%}
.grid:after { content: ''; display: block; clear: both}
.news .content{ margin:5px 5px 5px; border: 1px solid #eaeaea; background:#f8f8f8; padding:10px;
                -moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
             -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
                     box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.15);
}
.news .content img{ width:100%; height:auto}
.news .content h2{ color:#333; font-size:15px; text-align:center; padding:10px}
.news .content a{ text-decoration:none; outline:none}
.news .content p{color:#777; font-size:13px; line-height:130%}
.news .content p.news_date{ color:#999; font-size:12px; text-align: right; padding:15px 0 0}

/*攝影作品*/
.portfolio .grid{ max-width:100%}
.element-item{ width:100%;}
.element-item .grid_box{ width:100%; height:0; padding-bottom:66.5625%; overflow:hidden; position:relative}
.element-item .grid_box img{ width:100%; height:auto; transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1); transition: 1.2s ease-in-out; -ms-transition: 1.2s ease-in-out; -webkit--transition: 1.2s ease-in-out}
.element-item:hover .grid_box img{ transform: scale(1.2);-webkit-transform: scale(1.2);}
.element-item p{ background:rgba(193, 61, 61, 0.5); border-top:1px solid #fdb0b0; border-bottom:1px solid #fdb0b0; color:#fff; display:block; font-size:15px; padding:5px 10px ; position:absolute; top:70%; width:90%; left:-100%;transition: .3s ease-in-out;-ms-transform: .3s ease-in-out;-webkit-transition: .3s ease-in-out}
.element-item:hover p{ left:5%}

.element-item{ background:#ccc}
.element-item:nth-child(even){ background:#ddd}
/* ---- button ---- */
.button{ display: inline-block; background:#e9e9e9; border: none; border-radius: 7px; color: #333;cursor: pointer; padding: 0.35em .7em; font-family: "微軟正黑體",sans-serif; font-size: 12px; margin-top:10px;outline:0}
.button:hover { background: #fcece3;color: #222}
.button:active,.button.is-checked { background:#9e9280}
.button.is-checked { color: #fff}
.button:active { box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8)}

/* ---- button-group ---- */
.button-group { margin-bottom: 20px; text-align:center}
.button-group:after { content: ''; display: block; clear: both}
.button-group .button { border-radius: 0; margin-left: 0; margin-right: 1px}
.button-group .button{ border-radius: 1em}

.back_btn{ background:#9e9280; border-radius:10px; color:#fff; display:block; font-size:15px; margin:20px auto 80px; padding:3px 0; text-align:center; text-decoration:none; width:56px;  }
/* ---- .element-item ---- */ 

.element-item { position: relative; float: left; width:16.6666667%}
.element-item > * { margin: 0; padding: 0}

/*footer*/
footer .f_icon{ padding:0 0 35px}
@media screen and (max-width:1300px){
	/*攝影作品*/
    .element-item { width:20%}
}
@media screen and (max-width:1100px){
	.nav_icon{ top:-50px; right:10px}
	.nav_icon span{ background:#fff}
	
	header.smaller nav .nav_icon{ top:-20px}
	/*攝影作品*/
	.element-item { width:25%}
}
@media screen and (max-width:1000px){
	/*.overlay*/
	.overlay{ background-size:45%} 
	.grid-sizer,.grid-item{ width: 25%}
	
	.about_wone .row li{ margin:0 15% 6%; width:70%}
	.about_wone .row li:nth-child(1){ background-position:center; margin:4% 0; width:100%;}
	
}
@media screen and (max-width:950px){
	header nav ul,.nav_icon{ display:none}
	.hamburger{ background:url(../images/s_nav.png); background-position:center; width:30px; height:30px; position:absolute; top:5px; right:15px; cursor:pointer}
	
	/*.overlay*/
	.overlay { display:block; height:0; width: 100%; position: fixed;top: 0;left: 0; z-index:20; background: rgba(255,255,255, 1); overflow-y: hidden; transition: 0.5s; background-image:url(../images/snav_bg.jpg); background-repeat:no-repeat; background-position:left bottom; background-size:70%}
	.closebtn{ background:url(../images/s_nav_c.jpg); display:block; width:30px; height:30px; position:absolute; top:20px; right:20px }	
	.overlay-content{ margin:30px auto; position: relative; top: 10%; width: 100%; text-align: center}
	.overlay-content a{ display:block; color:#C09C78; font-size:21px; padding:10px 0; text-decoration:none}
	.overlay-content .nav_icon{ display:block; margin:15px auto; position:relative; top:0; right:0}
	.overlay-content .nav_icon a{ display:inline-block}
	
	.about ul{ display:block}
	.about ul li{ width:100%; display:inline-block}
	.about article{ min-height:auto}
	
   	/*攝影作品*/
    .element-item { width:33.33333%}
}
@media screen and (max-width:880px){
	.footer_c p{ width:250px}
}
@media screen and (max-width:768px){
	.footer_c{ padding:0; margin:0 auto }
	.grid-sizer,.grid-item{ width: 33.333333%}

}
@media screen and (max-width:640px){
	
	.about_wone .row li:nth-child(1){ height:230px}
	
	.grid-sizer,.grid-item{ width: 50%}
	/*攝影作品*/
    .element-item { width:50%}
}
@media screen and (max-width:480px){
	/*攝影作品*/
    .element-item { width:100%}
	.element-item p{ left:5%}
    .element-item:hover p{ left:5%}
}
@media screen and (max-width:375px){
	
	.about_wone .row li:nth-child(1){ height:150px;}
	.grid-sizer,.grid-item{ width: 100%}
}
@media screen and (orientation:landscape) {
	/*.overlay*/
	.overlay{ background-size:30%;}
}