@charset "utf-8";
/* CSS Document */
html { height:100%; }
body {
	/* 讓 ios 的字體變細 */
	-moz-osx-font-smoothing: grayscale; 
	-webkit-font-smoothing: antialiased;
	background-color:#fff;
	font-size:14px;
	height:100%;
}
ol, ul { list-style: none; padding:0px; margin:0px; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
h1 { font-size:0px; height:0px; display:inline; width:0px; padding:0px; margin:0px; position:fixed; left:0px; top:0px; }


.m_width { box-sizing:border-box; }

.logo_area { background-color:#f5c51e; }
.logo_area .logo_box { width:1300px; height:70px; margin:0px auto; position:relative; }

.logo_link { position:absolute; left:0px; }

.main_menu { position:absolute; right:0px; bottom:15px; white-space:nowrap; }
.main_menu li{ display:inline-block; margin:0px 10px; }
.main_menu li a { color: #333; transition:.2s; padding:5px 10px; border-bottom:2px solid #f5c51e; font-size:16px; }
.main_menu li a:hover { color:#000; border-bottom:2px solid #000; }

.m_menu { background-color:#f5c51e; border-top:1px solid #fff; }
.m_menu li a { padding:5px 10px; text-align:center; color:#333; line-height:30px; font-size:20px; }

.banner { height:502px; background-image:url(../images/banner1.jpg); background-position:50%; background-repeat:no-repeat; background-size:cover; }
.banner2 { height:200px; background-image:url(../images/banner2.png); background-position:50%; background-repeat:no-repeat; border-bottom:2px solid #ccc; }

.contents { width:1280px; margin:0px auto; padding:20px 10px; line-height:24px; box-sizing:border-box; background-color:#fff; }
.contents .con_img { float:right; }
.contents .con_img img { margin:10px; box-shadow:0px 0px 5px #999; }

.service_area { border-top:1px solid #eee; border-bottom:1px solid #eee; box-sizing:border-box; margin:10px auto; padding:10px 0px; width:1300px; box-sizing:border-box; text-align:center; font-size:0px; }
.service_area > div { width:25%; display:inline-block; }

.work_area { width:1300px; margin:30px auto; padding:0px 10px; box-sizing:border-box; }
.work_area .work_pics { font-size:0px; text-align:center; }
.work_area .work_pics img { width:22%; margin:10px; cursor:pointer; }

.footer_area { background-color:#333; padding:20px 0px; }
.footer { padding:10px; width:1300px; margin:0px auto; line-height:30px;}

/* Pages use. */
.con_title { letter-spacing:2px; }
.con_title:before { content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background-color:#ccc; margin-right:10px; vertical-align:inherit; }

.page_title { margin:30px 20px 30px 20px; display:flex; justify-content:space-between; }

.page_menu { width:260px; background-color:#aac734; padding:10px 0px; margin-left:20px; border-radius:5px; font-size:18px; line-height:40px; position:absolute; top:125px; }
.page_menu.p1 { background-color:#aac734; }
.page_menu.p2 { background-color:#46968a; }
.page_menu.p3 { background-color:#a9a22f; }
.page_menu li { padding-left:40px; letter-spacing:1px; color:#fff; font-weight:bold; }
.page_menu li a { color:#fff; display:block; cursor:pointer; }
.page_menu li a:hover { transition:.3s; color:#333; }
.page_menu .sub_li { padding-left:50px; }
.page_menu .sub_li a { border-left:1px dotted #fff; padding-left:15px;}
.page_menu .selected { background-repeat:no-repeat; background-position:15px 50%; background-color:#fff; }
.page_menu .selected a { color:#333; }

.lit_con_area { padding:0px 30px 0px 20px; margin-left:290px; }
.lit_con_area .l_title { padding-left:30px; background:url('../images/icon_little_title.png') no-repeat 0px 50%; }
.lit_con_area .l_title h2 { border-bottom:2px solid #64a0e5; line-height:30px; color:#333; font-size:18px; letter-spacing:1px; }
.lit_con_area .conbox { font-size:15px; line-height:30px; letter-spacing:1px; padding-left:15px; margin-bottom:60px; }
.lit_con_area .conbox > div { clear:both; min-height:200px; margin-bottom:10px;}
.lit_con_area .conbox img { box-shadow:3px 3px 3px #ccc; }

.album_box { width:31%; box-sizing:border-box; box-shadow:0px 0px 3px #aaa; padding:10px; font-size:14px; margin:5px; display:inline-block; }
.album_box img { width:100%; }

.album_box2 { width:47%; text-align:center; border:1px solid #ccc; padding:10px; box-sizing:border-box; margin:10px; min-height:240px; }

.full_con_area { padding:0px 30px 0px 20px; }
.full_con_area .l_title { padding-left:30px; background:url('../images/icon_little_title.png') no-repeat 0px 50%; }
.full_con_area .l_title h2 { border-bottom:2px solid #64a0e5; line-height:30px; color:#333; font-size:18px; letter-spacing:1px; }
.full_con_area .conbox { font-size:15px; line-height:30px; letter-spacing:1px; padding-left:15px; margin-bottom:60px; }
.full_con_area .conbox > div { clear:both; min-height:200px; margin-bottom:10px;}
.full_con_area img,
.full_con_area iframe { box-shadow:3px 3px 3px #ccc; }

.full_con_area .lihyaw_pic{ width:400px; height:250px; }
.full_con_area .lihyaw_map{ width:400px; height:250px; }



/* desktop computer */
@media screen and (min-width: 1301px) {
.m_menu{ display:none; }
}

/* note book */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
.m_width { width:100%; }

.m_menu{ display:none; }

.banner { height:400px; }

.service_area > div img { width:80%; }

.work_area .work_pics img { width:22%; }
}

/* for pad */
@media screen and (min-width: 415px) and (max-width: 1024px) {
.m_width { width:100%; }

.logo_img { height:50px; }
.logo_area .logo_box { text-align:center; height:50px; width:100%; }
.logo_link { position:relative; }

.main_menu { display:none; }

.m_menu { display:flex; justify-content:space-around; }
.m_menu li a { display:inline-block; }

.banner { height:280px; }

.contents .con_img { text-align:center; width:100%; }

.service_area > div img { width:80%; }

.work_area .work_pics img { width:22%; }

.page_menu{ display:none; }
.lit_con_area{ margin-left:0px; }
.album_box{ width:43%; }
.album_box2 { width:45%; }
}

/* mobile */
@media screen and (max-width: 414px) {
.m_width { width:100%; }

.logo_img { height:50px; }
.logo_area .logo_box { text-align:center; height:50px; width:100%; }
.logo_link { position:relative; }

.main_menu { display:none; }

.m_menu { display:flex; justify-content:space-around; }
.m_menu li { border-right:1px solid #fff; }
.m_menu li a { display:inline-block; }

.banner { height:170px;}

.contents .con_img { text-align:center; width:100%; }

.service_area > div { width:50%; }
.service_area > div img { width:80%; }

.work_area .work_pics img { width:43%; }

.page_menu{ display:none; }
.lit_con_area{ margin-left:0px; }
.lit_con_area .conbox img{ width:100%; }
.album_box{ width:100%; }
.album_box2 { width:100%; }
.full_con_area img{ width:100%; height:auto; }
.full_con_area .lihyaw_pic{ width:100%; height:auto; }
.full_con_area .lihyaw_map{ width:100%; height:200px; }
}