@charset "utf-8";
/*NAV*/
nav{ background:#fff; width:160px; position:absolute; top:50%; left:5%; transform:translateY(-240px); z-index:10}
.nav_w{ margin:10px; border:1px solid #C09C78; position:relative; text-align:center}
.nav_w:before{ content:""; display:block; background:url(../images/nav_bg01.png); width:63px; height:79px; position:absolute; top:130px; left:-50px}
.nav_w:after{ content:""; display:block; background:url(../images/nav_bg02.png); width:80px; height:89px; position:absolute; bottom:-25px; right:-20px}
nav a.logo{ background:url(../images/logo.png); display:block; width:120px; height:120px; margin:10px}
nav ul{ padding:10px 0 0 0}
nav ul li{ padding:0 0 20px; position:relative}
nav ul li a{ display:inline-block; font-size:13px; color:#C09C78; text-decoration:none; position:relative; margin:0 10px} 
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; }

.nav_icon{ text-align: center; margin:0 auto 63px; width:100px}								   
.nav_icon a{ width:18px; height:19px; display:inline-block; margin:3px; vertical-align:middle}
.nav_icon span{ border:1px solid #C09C78;border-radius:20px; padding:1px 3px 3px; }


/*---header smaller---*/	
header.smaller{ background:#fff; height:75px; position:fixed; top:0; z-index:1 }
header.smaller nav{ margin-top:0; position:fixed; top:0 ;left:0 ; transform:none; width:100%; height:75px;
                   -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);}
header.smaller .nav_w:before,header.smaller .nav_w:after{ display:none}
header.smaller .nav_w{ border:none; margin:0}
header.smaller .logo{ background:url(../images/logo_6s.png); width:94px; height:105px; top:2px; left:calc(50% - 47px); position:absolute; margin:0}
header.smaller nav ul{ margin:0 auto; padding:48px 0 0 0; text-align:left; width:900px}
header.smaller nav ul li{ display:inline-block; vertical-align:top; margin:0 35px}
header.smaller nav li:nth-child(3){ margin:0 225px 0 35px}
header.smaller nav li:last-child{ margin:0 0 0 35px}
header.smaller nav ul li a{ margin:0}
header.smaller nav .nav_icon{ position:absolute; right:20px; top:40px}

.overlay{ display:none}

/*banner*/
.banner{ position:relative}
.banner picture{ font-size:0;}
.banner img{ width:100%; height:auto;}
.lubo{ width: 100%; clear: both; position: relative; height:0; padding-bottom:37.8%}
.lubo_box{ position: relative; width: 100%; height:0; padding-bottom:37.8%}
.lubo_box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:auto;; opacity: 0;filter:alpha(opacity=0)}
.lubo_box li a{ display: block;width: 100%;  height: 0; padding-bottom:37.8%}
/*banner_nav*/
.cir_box{ overflow: hidden; position: absolute; bottom:10%; //z-index:2;}
.cir_box li{ float: left; width:14px; height:16px; cursor: pointer; background-image:url(../images/Bnav_off.png); margin:0 10px}
.cir_on{ background-image:url(../images/Bnav_on.png) !important;}
.left_btn,.right_btn{display:none}
.banner:after{ content:""; clear:both}

/*首頁相簿*/
.mainfoto li{ background:#eee; display:inline-block; width:20%; height:0; overflow:hidden; padding-bottom:20%; position:relative; vertical-align:top}
.mainfoto li:nth-child(even){ background:#e9e9e9}
.mainfoto li div{ background:rgba(210, 210, 210, 0.9) ; height:100%; width:100%; opacity:0; transition:all .6s ease-in; position: absolute; top:0; /*z-index:1;*/ pointer-events:none}
.mainfoto li img{ width:100%; height:auto}

.mainfoto li div p{ display:table; position:relative; width:100%; height:100%}
.mainfoto li div span{ color:#333; display: table-cell; font-size:15px; padding:0 20px; text-align:center; position: relative; transform:translateY(20px); transition:all .6s ease-in; vertical-align:middle; opacity:0; width:calc(100% - 40px)}
.mainfoto li:hover div{ opacity:1}
.mainfoto li:hover div span{ transform:translateY(0);opacity:1}

.mainfoto{ background:#f9f9f9}
.mainfoto >div{ padding:0 0 30px; text-align:center}
.more_a{ width:100%; padding:50px 0 100px; text-align:center}
.more_a a{ border:1px solid #C09C78; color:#C09C78; padding:10px 30px; text-decoration:none }
.more_a a:hover{ background:#C09C78; color:#fff}
/*team*/
.team{ font-size:15px; color:#C09C78; padding:50px 0; text-align:center}
.team span{ padding:0 20px}
.team span img{ padding:0 20px 0; vertical-align:middle; width:50px}

/*關於wone*/
.gold_bg{ width:100%; height:30px; background:url(../images/gold_bg.jpg); background-position:center; background-repeat:no-repeat; position:relative}
.about-click{ display:block; width:32px; height:32px; border-radius:50%; background:#EBD8CA; background-image:url(../images/down.png); cursor:pointer; margin:0 0 0 -16px; position:absolute; top:-10px; left:50%;-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.4);
box-shadow: 0 5px 5px rgba(0,0,0,0.4);
 }

.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}
.about ul li{ display:inline-block; 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%}

/*連絡我們*/
.contact>div{ margin:0 auto; text-align:center}
.contact h1,.mainfoto h1{ font-size:40px; color:#C09C78; padding:35px 0 10px}
.contact h2,.mainfoto h2{ font-size:21px; #333}
.map-container{ margin:40px 0 60px}

/*控制google map滑鼠滾輪*/
.map-container { width: 100%}
.map-container iframe{ width: 100%;	display: block;	pointer-events: none; position: relative; /* IE needs a position other than static */}
.map-container iframe.clicked{ pointer-events: auto}

@media screen and (max-width: 1400px) {
	header{ width:100%; height:180px; background:url(../images/nav_bg.jpg) no-repeat; background-position:center center; position:relative; }
	nav{ margin-top:0; width:100%; height:40px; background:#fff; position:absolute;top:-170px; left:0; transform:translateY(240px);
		 -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_w{ margin:0; border:none; position:relative}
	.nav_w:before,.nav_w:after{ display:none}
	nav a.logo{ background:url(../images/logo_6.gif); display:block; width:137px; height:157px; margin:0; position:absolute; top:-58px; left:calc(50% - 68.5px ) }
	
	.nav_icon{ position:absolute; top:11px; right:20px; width:90px; margin:5px auto 0 }
	.nav_icon span{ border:1px solid #C09C78;border-radius:20px; padding:7px 8px 0}
	
	nav ul{ display:block; width:900px; margin:0 auto; padding:0; position:relative; text-align:left}
	nav ul 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 ul li a{ color:#C09C78; display:block; padding:13px 0 0; margin:0; text-decoration:none}
	nav a.logo,nav ul,.nav_icon{ display:inline-block; vertical-align:top}
	.nav_icon a{ margin:-10px 0 0}
	
	header.smaller nav ul{ padding:37px 0 0 0}

}
@media screen and (max-width: 1100px) {
	.nav_icon{ top:-49px; right:15px}
	.nav_icon span{ background:#ffff}
	
	header.smaller nav .nav_icon{ top:15px; right:15px}
}
@media screen and (max-width: 1000px) {
	.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%;}
	/*首頁相簿*/
	.mainfoto li{ width:25%; padding-bottom:25%}
}
@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}
	header.smaller .hamburger{ top:40px}
	
	/*.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 li{ width:100%}
	.about article{ min-height:auto}
}
@media screen and (max-width: 768px) {

	.lubo,lubo_box,.lubo_box li a{ padding-bottom:75.5%}
	.lubo{ //margin-top:60px}
	.gold_bg{ height:25px}
	.gold_bg:before{ top:-15px}
	/*首頁相簿*/
	.mainfoto li{ width:33.33333%; padding-bottom:33.33333%}
	
}
@media screen and (max-width: 767px) {
	.hamburger{ background:url(../images/s_nav.png); background-position:center; width:30px; height:30px; position:absolute; right:15px; cursor:pointer}
	
	/*NAV 導覽列*/
	.topnav.responsive{ width:100%; height:100%; background:#fff; position:fixed; top:0}
	nav.topnav.responsive .hamburger{ top:20px;background:url(../images/s_nav_c.jpg); z-index:20}
	nav.topnav.responsive a.logo{ display:none}
	nav.topnav.responsive nav ul li:hover .nav2{ display:none}
	nav.topnav.responsive ul, nav.topnav.responsive .nav_icon{ display:block; position:relative}
	nav.topnav.responsive li{ display:block}
	nav.topnav.responsive .nav2{ display:block}
	

}
@media screen and (max-width: 767px){
    nav ul li:hover .nav2{ display:none}
	.team{ font-size:13px}
	.team span{ display:block;padding:5px 20px}
	.team i{ display:none}
}
@media screen and (max-width: 640px) {
	
	.about_wone .row li:nth-child(1){ height:230px}
	/*首頁相簿*/
	.mainfoto li{ width:50%; padding-bottom:50%}
	
}
@media screen and (max-width: 480px) {
	.mainfoto li{ height:auto; padding:0 }
	.mainfoto li div{ background:#eee; height:auto; min-height:30px; padding:20px 0; position:relative; opacity:1}
	.mainfoto li div p{ display:table; position:relative; width:100%; height:100%}
	.mainfoto li div span{ color:#333; transform:translateY(0); opacity:1}
	
	
	.about_wone .row li:nth-child(1){ height:200px; margin:10% 0}
	.about h1,.about_wone h1{font-size:30px}
	.contact h1,.mainfoto h1{ font-size:30px; color:#C09C78; padding:35px 0 10px}
    .contact h2,.mainfoto h2{ font-size:17px; #333}
}
@media screen and (max-width: 375px) {
	.about_wone .row li:nth-child(1){ height:150px;}

}
@media screen and (orientation:landscape) {
	/*.overlay*/
	.overlay{ background-size:30%;}
}