@charset "utf-8"; /* CSS Document */ @import url("reset.css"); @import url("fancybox.css"); html { width:100%; height: 100%;} html, body { margin:0; padding:0;} body { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-size:13px ; line-height:18px; color:#555; width:100%; background:#ddd6cc; letter-spacing:1px; -webkit-text-size-adjust: none; overflow-x: hidden;} a{ text-decoration:none; color: inherit;} p.img{ font-size:0; line-height:0; position:relative;} p.img img{ width:100%; height:auto;} p.img img.pimg{ max-width:100%; width:auto; max-height:100%; height:auto; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} header{ display:block; width:100%; height:80vh; padding:50px 0 0 0;} #pages header{ background:#c4aa99; height:120px; padding:40px 0 0 0;} .moblie header{ display: none;} header nav{ display:block; width:100%; max-width:1200px; margin:0 auto; text-align:right; position:relative; z-index:4;} header nav ul{ display:inline-block; vertical-align: bottom;} header nav ul li{ display:inline-block; margin:0 25px; font-size:18px; line-height:100%; color:#FFF; font-weight: bold; position:relative;} header nav ul li a{ padding:15px 0;} header nav ul li a span{ display:inline-block; margin:6px 0 0 0; vertical-align: middle;} header nav ul li a strong{ display:inline-block; margin:-2px 0 0 5px; width:20px; height:20px; border-radius:10px; font-size:13px; line-height:20px; text-align:center; color:#FFF; background:#ac2020; vertical-align: middle;} header nav ul li p{ display: none; width:150px; padding:15px 15px 0 15px; position:absolute; top:32px; left:calc(50% - 75px); background:#c4aa99; text-align:left; z-index:99;} header nav ul li p a{ display: block; margin:0 0 15px 0; padding:0; font-size:16px;} header nav ul li:hover p{ display: block;} header nav ul li:last-child{ display: none;} #pages header nav ul li:last-child{ display:inline-block;} header nav a.logo{ display:inline-block; margin:0 50px 4px 0; height:48px; background:url(../images/logo.png) no-repeat; padding:0 0 0 190px; vertical-align: bottom; position:relative;} header nav a.logo span{ display: inline-block; font-size:22px; color:#FFF; font-weight: bold; margin:25px 0 0 0;} #pages header nav a.logo{ margin:0 50px 0 0;} #pages header nav a.logo span{ display:block; width:200px; font-size:16px; color:#FFF; font-weight: bold; position:absolute; top:20px; left:195px; margin:0;} .bx-wrapper{ width:100%; position: absolute; top:0; left:0;} .bx-controls{ display: block; width:100%; text-align:center;} .bx-controls-direction{ display: none;} .bx-pager-item{ display: inline-block; width:25px; height:25px; margin:0 2px; transform: scale(0.9,0.9)} .bx-pager-item a{ display:block; width:25px; height:25px; text-indent:-5000px; font-size:0; position:relative; cursor: pointer;} .bx-pager-item a::after{ content:''; display:block; width:12px; height:12px; border-radius:12px; background:#ae9588; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} .bx-pager-item a.active::after{ width:12px; height:12px; background:#633117;} header ul.banner{ display:block; width:100%; height:80vh; position: absolute; top:0; left:0; z-index:1;} header ul.banner li{ display:block; width:100%; height:100%; position:absolute; top:0; left:0; background-position: center center; background-size: cover;} #pages header nav a.logo{ float:left;} #pages header nav ul{ margin:20px 0 0 0;} .indexproduct{ display: block; width:100%; padding:80px 0; background:#ddd6cc;} .indexproduct h1{ display:block; width:90%; max-width:1200px; margin:0 auto 50px auto; font-size:18px; line-height:190%; color:#595757; text-align:center;} .indexproduct ul{ display:block; width:90%; max-width:1200px; margin:0 auto; vertical-align: top; font-size:0; letter-spacing:0; line-height:0;} .indexproduct ul li{ display: inline-block; width:calc(100% / 3 - 2%); margin:0 1% 50px 1%; padding:20px; background: #dbcdc0; vertical-align: top;} .indexproduct ul li:hover{ background: #c4aa99;} .indexproduct ul li .en{ display:block; width:100%; margin:0 0 15px 0; font-size:24px; line-height:200%; color:#FFF; font-family:Myriad Pro; font-style:italic; text-align:center;} .indexproduct ul li p.img{ display:block; width:100%; margin:0 0 20px 0;} .indexproduct ul li h2{ display:block; width:100%; font-size:18px; line-height:190%; color:#595757; text-align:center;} .contact{ display:block; width:100%; padding:50px 0; background:#f5f1ee;} .moblie .contact{ display: none;} .contact .main{ display:block; width:90%; max-width:1200px; margin:0 auto; padding:50px 0; font-size:0; letter-spacing:0;} .contact .main ul.left{ display: inline-block; width:30%; vertical-align: middle;} .contact .main ul.left li{ display:block; width:100%; margin:0 0 15px 0; font-size:0; letter-spacing:0; line-height:0; text-align: center; position:relative;} .contact .main ul.left li input[type=text]{ display: inline-block; width:100%; height:38px; padding:0 15px; background:#FFF; font-size:16px; color:#111;} .contact .main ul.left li:first-child input[type=text]{ width:50%} .contact .main ul.left li:first-child input[type=text]:first-child{ width:calc(50% - 10px); margin:0 10px 0 0;} .contact .main ul.left li:last-child{ margin:0;} .contact .main ul.left li textarea{ display: inline-block; width:100%; height:150px; padding:10px 15px; background:#FFF; font-size:16px; color:#111;font-family: "微軟正黑體",Arial, Helvetica, sans-serif;} .contact .main ul.left li input[type=button],.contact .main ul.left li input[type=submit]{display: inline-block; width:100px; height:30px; margin:0 10px; background:#FFF; font-size:16px; color:#111; text-align:center; cursor: pointer;} .contact .main ul.left li .code{ display:inline-block; position:absolute; top:0px; right:0px;} .contact .main ul.left li .code a{ display:inline-block; width:38px; height:38px; background:url(../images/reload.jpg) no-repeat;} .contact .main .right{ display: inline-block; width:30%; margin:0 5%; padding:0 0; vertical-align: middle;} .contact .main .right h2{ display:block; margin:0 0 25px 0; font-size:18px; line-height:190%; color:#595757;} .contact .main .right p{ display:block; font-size:16px; line-height:230%; color:#111;} .contact .main .right p span{ display:inline-block; line-height:190%;} .contact .main .right p img{ margin:0 20px 0 0;} .contact .main .map{ display: inline-block; width:30%; vertical-align: top;} .contact .main .map iframe{ display:block; width:100%; height:309px;} .contact .center{ display: block; width:90%; max-width:1200px; margin:0 auto; vertical-align: middle; overflow:hidden; position:relative;} .contact .center h2{ display:block; margin:0 0 25px 0; font-size:18px; line-height:190%; color:#111;} .contact .center p{ display:block; width:350px; font-size:16px; line-height:230%; color:#111; float:left;} .contact .center p img{ display:inline-block; margin:0 20px 0 0; vertical-align: middle;} .contact .center span{ display: inline-block; position:absolute; bottom:0; right:0;} .contact .center span img{ display:inline-block; margin:0 0 0 20px; vertical-align: middle;} footer{ display:block; width:100%; padding:20px 0; background: #96887d; font-size:15px; line-height:100%; color:#FFF; text-align:center;} .moblie footer{ display: none;} .aboutmain{ display:block; width:90%; max-width:1000px; margin:100px auto 100px auto; font-size:0; letter-spacing:0;} .aboutmain p.img{ display:inline-block; width:40%; vertical-align: top;} .aboutmain p.text{ display:inline-block; width:52%; margin:0 0 0 8%; vertical-align: top; font-size:16px; line-height:190%; color:#3a3a3a;} .link{ display:block; width:100%; max-width:1000px; margin:0 auto 100px auto; font-size:15px; line-height:100%; color:#111;} .product{ display:block; width:100%; background: #FFF; padding:100px 0;} .product .main{ display: block; width:90%; max-width:1200px; margin:0 auto; overflow:hidden;} .product .main .left{ display:block; width:150px; float:left;} .product .main .left .search{ display:block; width:100%; height:30px; margin:0 0 50px 0; border:1px solid #595959; font-size:0; letter-spacing:0;} .product .main .left input[type=text]{ display: inline-block; width:calc(100% - 30px); height:30px; padding:0 5px 0 5px; font-size:16px; vertical-align: middle;} .product .main .left input[type=submit]{ display:inline-block; width:30px; height:30px; background:url(../images/search_icon.png) no-repeat center center; vertical-align: middle; cursor: pointer;} .product .main .left select{ display: none; width:100%; height:40px; margin:0 0 20px 0; background:#ddd6cc; border: none; padding:0 15px; font-size:16px;} .product .main .left nav{ display:block;} .product .main .left nav a{ display:block; width:100%; margin:0 0 10px 0; padding:0px 10px; font-size:18px; line-height:160%; color:#3a3a3a;} .product .main .left nav a.current{ background:#f5f1ee; color:#96887d;} .product .main .right{ display:block; width:calc(95% - 150px); padding:15px 0 0 0; float:right; position:relative;} .product .main .right.search{ float: none; margin:0 auto; width:100%;} .product .main .right .link{ margin:0 0 50px 0;} .product .main .right ul{ display:block; width:100%; margin:0 0 50px 0; padding:0 80px 0 0; font-size:0; letter-spacing:0; line-height:0;} .product .main .right.search ul{ padding:0 80px;} .product .main .right ul li{ display: inline-block; width:calc(94% / 4); margin:0 2% 30px 0; vertical-align: middle;} .product .main .right.search ul li{ width:calc(92% / 5);} .product .main .right ul li:nth-child(4n){ margin:0 0 30px 0;} .product .main .right.search ul li:nth-child(4n){ margin:0 2% 30px 0;} .product .main .right.search ul li:nth-child(5n){ margin:0 0 30px 0;} .product .main .right ul li p.img{ display:block; width:100%; padding:0 0 100% 0; margin:0 0 10px 0; position: relative; overflow:hidden;} .product .main .right ul li p.img::before{ content:''; display:block; width:100%; height:100%; background:#edecea; position:absolute; top:0; left:0; z-index:2; opacity:0;} .product .main .right ul li:hover p.img::before{ opacity:0.8;} .product .main .right ul li p.img img{ max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;} .product .main .right ul li p.number{ display:block; width:100%; height:29px; font-size:16px; line-height:29px; color:#111; overflow:hidden;} .product .main .right ul li p.number span{ display:inline-block; margin:0 8px 0 0; color:#96887d;} v.product .main .right ul li p.number strong{ display:inline-block; font-weight: bold;} .product .main .right a.next{ display:block; width:30px; height:50px; background: url(../images/next.png) no-repeat center right; position: fixed; top:calc(50% + 60px); right: 50px;} .product .main .right a.prev{ display:block; width:30px; height:50px; background: url(../images/prev.png) no-repeat center left; position: fixed; top:calc(50% + 60px); left: 50px;} .icon{ display:block; width:70px; height:70px; position:absolute; bottom:0; right:0; z-index:3;} .icon.new{ background:url(../images/icon01.png) no-repeat; background-size:100% auto;} .icon.special{ background:url(../images/icon02.png) no-repeat; background-size:100% auto;} .icon.sale{ background:url(../images/icon03.png) no-repeat; background-size:100% auto;} .product .main .right p.pages{ display:block; text-align: center;} .product .main .right p.pages a{ display:inline-block; margin:0 10px 5px 10px; font-size:15px; line-height:13px; color:#3a3a3a; vertical-align: middle;} .product .main .right p.pages a.current{ color:#c4aa99;} .productmain{ display:block; width:100%; max-width:900px; background: #464848; font-size:0; letter-spacing:0; line-height:0;} .productmain .link{ display: none; width:80%; margin:0 auto 30px auto;} .productmain p.img{ display: inline-block; width:54%; height:620px; position:relative; vertical-align: middle;} .productmain p.img img{ max-width:100%; max-height:100%; width:auto; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;} .productmain p.img a{ display: none; width:10%; position:absolute; top:calc(50% - 15px); left:-10%; font-size:30px; font-weight: bold; line-height:100%; text-align:center;} .productmain p.img a.next{ left:inherit; right:-10%;} .productmain .text{ display:inline-block; width:46%; padding:0 8%; vertical-align: middle;} .productmain .text span{ display:block; margin:0 0 5px 0; font-size:16px; line-height:160%; color:#96887d;} .productmain .text h1{ display:block; margin:0 0 40px 0; font-size:18px; line-height:190%; color:#FFF;} .productmain .text p{ display:block; height:calc(21px * 10); overflow:hidden; margin:0 0 40px 0; font-size:16px; line-height:21px; color:#FFF;} .productmain .text a{ display:block; width:100%; max-width:100px; height:25px; background:#FFF; font-size:16px; line-height:25px; color:#111; text-align:center;} .productmain .icon{ width:83px; height:83px;} .searchtext{ display:block; width:100%; margin:0 0 20px 0; padding:0 0 0 25px; background:url(../images/search_icon.png) no-repeat left center; font-size:15px; line-height:32px; color:#333;} .searchtext strong{ display:inline-block; margin:0 15px; font-size:18px; border-bottom:1px solid #333;} .searchtext span{ display:inline-block; color:#8d2c2c;} /*聯絡我們*/ p.infor{display:block; width:90%; max-width:1000px; margin:0 auto 30px auto; padding:20px; font-size:18px; line-height:190%; color:#3a3a3a; text-align:center; border: 1px solid #aaa; overflow:hidden;} ul.contactmain{ display:block; width:90%; max-width:1000px; margin:0 auto 0 auto; padding:0px 0 0 0;} ul.contactmain li{ display:block; width:100%; margin:0 0 35px 0; padding: 35px 0 35px 0; border-bottom: 1px solid #000; overflow:hidden;} ul.contactmain li:last-child{ border-bottom: none;} ul.contactmain li .title{ display:block; width: 150px; font-size:18px; line-height:40px; color:#111; float:left; font-weight: bolder;} ul.contactmain li .right{ display:block; width: calc(100% - 150px); float:right; position:relative;} ul.contactmain li .right input.text{ display:block; width:48%; height:40px; margin:0 0 10px 2%; padding: 0 20px; border: none; background: #f0f0f0; float: left; font-size:16px; line-height:40px; color:#111; font-family:"微軟正黑體";} ul.contactmain li .right input.text.text2{ width:100%;} ul.contactmain li .right input.submit{ display:block; width:48%; height:40px; margin:0 0 10px 2%; padding: 0 30px; background: #000000; float: left; font-size:16px; line-height:40px; color:#FFF; font-family:"微軟正黑體"; cursor: pointer;-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; -ms-transition:all 0.5s ease; transition:all 0.5s ease; } ul.contactmain li .right p{ display:block; width:98%; margin:0 0 0 2%; padding:0 0 0px 0; float: none; border-bottom:1px solid #e2e2e2;} ul.contactmain li .right p.last{ border: none;} ul.contactmain li .right p strong{ display:inline-block; width:115px; font-size:16px; line-height:80px; color:#111; font-weight: normal;} ul.contactmain li .right p span{ display:inline-block; margin:0 40px 0 0;} ul.contactmain li .right p span.stitle{ line-height:80px;} ul.contactmain li .right p span input{ display:inline-block; width:15px; height:15px; margin:0 10px 0 0; border:1px solid #767676; background: none;} ul.contactmain li .right textarea{ display:block; width:98%; height:200px; margin:0 0 10px 2%; padding: 3px 20px; border: none; background: #f0f0f0; float: left; font-size:16px; line-height:31px; color:#111; font-family:"微軟正黑體"; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none;} ul.contactmain li .right .code{ display:block; width:130px; height:40px; line-height:45px; background:#141414; position:absolute; left:calc(50% - 130px); bottom:10px; vertical-align:middle; padding:0 0 0 10px;} ul.contactmain li .right .code img{ display:inline-block;} ul.contactmain li .right .code a.reload{ display:inline-block; width:38px; height:38px; background:url(../images/reload.jpg) no-repeat; cursor: pointer;} ul.contactmain li .right ul.inquirylist{ display:block; width:100%; padding:0 0 0 2%;} ul.contactmain li .right ul.inquirylist li{display:block; width:100%; margin:0 0 10px 0; padding:0 0 0 0; border: none; background:url(../images/point_line.png) repeat-x left bottom; font-size:0; letter-spacing:0; position:relative; overflow:visible;} ul.contactmain li .right ul.inquirylist li p{ margin:0; padding:0; border: none;} ul.contactmain li .right ul.inquirylist li p.img{ display:inline-block; width:12%; padding: 0 0 12% 0; vertical-align: middle; background-color:#FFF; background-size: auto 100%; background-position: center center; background-repeat: no-repeat;} ul.contactmain li .right ul.inquirylist li p.name{ display:inline-block; width:40%; padding:0 0 0 3%; font-size:18px; line-height:29px; color: #111; vertical-align: middle; font-weight: bold;} ul.contactmain li .right ul.inquirylist li p.name span{ display:block; font-size:16px; color:#b49e81; font-weight: normal;} ul.contactmain li .right ul.inquirylist li input.text{ display:inline-block; height:40px; line-height:40px; margin:0; float: none; vertical-align: middle;} ul.contactmain li .right ul.inquirylist li a.clear{ display:block; width:30px; height:30px; background:url(../images/clear_icon.png) no-repeat center center; position:absolute; top:calc(50% - 15px); left:-40px; cursor: pointer;} .navbtn{ display: none; width:70px; height:70px; position:fixed; top:0px; right:0px; z-index:10; cursor:pointer; background:#c4aa99;} .navbtn a{ display:block; width:70px; height:70px; position:relative;} .navbtn a .bar{ display:block; width:28px; height:2px; background:#FFF; border-radius:3px; position:absolute; top: calc(50% - 1.5px); left:calc(50% - 14px); z-index:2;} .navbtn a .bar1{ top: calc(50% - 10px); z-index:2;} .navbtn a .bar2{ top: calc(50% + 7px); size:2;} a.moonline,a.moinquiry{position:fixed;bottom:0;z-index:999;display:block;width:50%; max-width:300px; height:40px;color:#fff;text-align:center;font-weight:bolder;font-size:18px;font-family:"微軟正黑體";line-height:40px} a.moonline{right:0%;background:#04c303 url(../images/line.png) no-repeat;background-size:auto 25px; background-position: calc(50% - 50px) center; text-indent:30px; border-radius:15px 0 0 0;} a.moinquiry{ display: none;left:0%;background:#c4aa99;} a.moinquiry strong{ display:inline-block; margin:-2px 0 0 5px; width:20px; height:20px; border-radius:10px; font-size:13px; line-height:20px; text-align:center; color:#FFF; background:#ac2020; vertical-align: middle;} @media screen and (min-width: 1050px) { } @media screen and (max-width: 1400px) { .product .main .right a.next{ right: 20px;} .product .main .right a.prev{ left: 20px;} .product .main .right.search a.next{ right: 20px;} .product .main .right.search a.prev{ left: 20px;} } @media screen and (max-width: 1280px) { } @media screen and (max-width: 900px) { header nav a.logo{ height:35px; background-size:auto 35px;} #pages header{ height:100px;} #pages header nav a.logo{ height:30px; background-size:auto 30px;} #pages header nav a.logo span{ left:120px; top:10px;} #pages header nav ul{ margin: 8px 0 0 0;} header nav ul li{ margin:0 8px; font-size:16px;} } @media screen and (max-width: 700px) { a.moinquiry{ display: block;} a.moonline{ border-radius:0;} .navbtn{ display: block; position: absolute;} header{ padding:20px 0 0 0; height:40vh;} header ul.banner{ height:40vh;} header nav ul{ display: none; width:100%; min-height:100vh; padding:80px 0 0 0; position: absolute; top:-20px; left:0; background:#c4aa99; z-index:99;} header nav ul li{ display:block; width:100%; height:auto; margin:0 auto 25px auto; padding:0 0 25px 0; font-size:22px; font-weight: normal; text-align:center; border-bottom:1px solid rgba(255,255,255,0.5)} header nav ul li:nth-child(2){ padding:0;} header nav ul li a{ display:block; padding:0;} header nav ul li p{ display:block; width:100%; padding:0; position: inherit; top:inherit; left:inherit; margin:25px 0 0 0; transform:none; background: #d9cdc1; } header nav ul li p a{ display:block; margin:0 auto 0 auto; padding:25px 0 25px 0; font-size:22px; font-weight: normal; text-align:center;border-top:1px solid rgba(255,255,255,0.5);} header nav ul li p a::after{} header nav ul li p a:last-child{ margin:0;} header nav ul li p a:last-child::after{ display: none;} #pages header nav ul li:last-child{ display:block; margin:0;} header nav a.logo{ position:absolute; top:10px; left:calc(50% - 110px); background-size:auto 35px; height:35px; padding:0 0 0 140px;} header nav a.logo span{ margin:17px 0 0 0;} #pages header{ height:85px; padding:0;} #pages header nav a.logo{ height:30px; position:absolute; top:18px; left:5%; background-size:auto 30px;} #pages header nav a.logo span{ left:0px; top:40px;} #pages header nav ul{ margin:0;} .indexproduct h1{ font-size:13px; letter-spacing:0;} .indexproduct ul{ width:80%;} .indexproduct ul li{ width:100%; margin:0 0 30px 0;} .contact .main{ display: flex; width:80%; flex-direction: column-reverse;} .contact .main ul.left{ display:block; width:100%; order:1;} .contact .main .right{ display:block; width:100%; order:3; margin:0 0 50px 0;} .contact .main .map{ display:block; width:100%; margin:0 0 50px 0; order:2;} .contact .main .map ifram{ height:309px;} .product .main{ width:90%;} .product .main .left{ width:100%; float: none;} .product .main .left .search{ margin:0 0 20px 0; height:40px;} .product .main .left input[type=text]{ height:40px;} .product .main .left input[type=submit]{ height:40px;} .product .main .left select{ display: block;} .product .main .left nav{ display: none;} .product .main .right{ width:100%; float: none;} .product .main .right .link{ margin:0 0 30px 0;} .product .main .right a.prev,.product .main .right a.next{ display: none;} .product .main .right ul{ padding:0;} .product .main .right.search ul{ padding:0;} .product .main .right ul li,.product .main .right.search ul li{ width:46%; margin:0 2% 30px 2%;} .product .main .right ul li:nth-child(4n),.product .main .right.search ul li:nth-child(4n),.product .main .right.search ul li:nth-child(5n){ margin:0 2% 30px 2%;} .product .main .right ul li p.img{ overflow:visible;} .moblie header,.moblie .contact,.moblie footer{ display: block;} .contact .center p{ width:100%; float: none;} .contact .center span{ display:block; margin:20px 0 0 0; position:inherit; bottom:inherit; right:inherit; text-align: center;} .contact .center span img{ margin:0 10px;} .product{ padding:50px 0;} .productmain{ background: none; padding:50px 0; position:relative;} .productmain .link{ display: block;} .productmain p.img{ display:block; width:80%; padding:0 0 100% 0; height:auto; margin:0 auto 30px auto;} .productmain p.img a{ display:inline-block;} .productmain .text{ display:block; width:80%; margin:0 auto 30px auto; padding:0;} .productmain .text h1{ color:#111;} .productmain .text p{ color:#111; height:auto;} .productmain .text a{ max-width:none; height:35px; line-height:35px;} .aboutmain{ width:80%; margin:50px auto;} .aboutmain p.img{ display:block; width:100%; margin:0 0 30px 0;} .aboutmain p.text{ display:block; width:100%; margin:0;} .link{ margin:0 0 30px 0;} ul.contactmain{ width:80%; padding:0;} ul.contactmain li p{ width:100%; margin:0 0 30px 0;} ul.contactmain li select{ width:100%; height:60px; line-height:60px;} ul.contactmain li .title{ width:100%; float: none;} ul.contactmain li .right{ width:100%; float: none;} ul.contactmain li .right input.text{ width:100%; height:60px; line-height:60px; margin:0 0 10px 0; float: none;} ul.contactmain li .right p{ padding:0 0 10px 0;} ul.contactmain li .right p strong{ display: block;} ul.contactmain li .right textarea{ width:100%; margin:0 0 10px 0; float: none;} ul.contactmain li .right .code{ width:100%; margin:0 0 10px 0; position:inherit; bottom: inherit; left:inherit; text-align:right; background: none;} ul.contactmain li .right input.submit{ width:100%; margin:0; height:60px; line-height:60px;} ul.contactmain li .right ul.inquirylist li{ padding: 0 0 20px 40px;} ul.contactmain li .right ul.inquirylist li a.clear{ left:0;} ul.contactmain li .right ul.inquirylist li p.img{ width:25%; padding:0 0 25% 0;} ul.contactmain li .right ul.inquirylist li p.name{ width:70%; margin:0 0 0 5%;} ul.contactmain li .right ul.inquirylist li input.text{ margin:10px 0 0 0;} footer{ padding: 20px 0 60px 0} } @media screen and (max-height: 400px) and (max-width: 700px) { .navbtn{ position:absolute;} header nav ul{ position: absolute; height:auto;} header nav ul li{ font-size:20px; margin:0 auto 15px auto; padding:0 0 15px 0;} }