@charset "utf-8";

@import url("reset.css");

@import url("loading.css");

/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



html { height:100% }

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll }

body, td, th {/* font-size:12px; font-family: 'Rosarivo', serif, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;*/ }

body, td, th { font-size:12px; font:12px/18px 'Rosarivo', '微軟正黑體', sans-serif; }

.iframe_ch { display:none }

.middle{ vertical-align:middle; }

.width100{ width:100%;}

.pager{width:100%; margin:0 auto; text-align:center; margin:70px 0;}

.button1{border:1px solid #b2b2b2; color:#666666; padding:5px 50px; letter-spacing:1px; cursor:hand; cursor:pointer;}

.button1:hover{ color:#ffffff; background:#666666; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

.button2{border:1px solid #bf956b; color:#bf956b; padding:8px 40px; letter-spacing:1px; cursor:hand; cursor:pointer; margin:0 10px;}

.button2:hover{ color:#ffffff; background:#bf956b; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

.button3{border:1px solid #bda575; color:#bda575; padding:8px 40px; letter-spacing:1px; cursor:hand; cursor:pointer; margin:0 10px;}

.button3:hover{ color:#ffffff; background:#bda575; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }



.submit{ height:39px;border:1px solid #bf956b; background:#FFFFFF; color:#bf956b; padding:8px 40px; letter-spacing:1px; cursor:hand; cursor:pointer; margin:0 10px; font-size:15px; font:15px/18px 'Rosarivo', '微軟正黑體', sans-serif;}

.submit:hover{ color:#ffffff; background:#bf956b; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }



.iframech { display:none }

.editor{ width:100%; overflow:hidden;}

/*a { text-decoration:none; color:#231815;}

a:hover { color:#666;}*/



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Common <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



/*PageLoad*/

#wrapper { opacity: 0; min-height:1000px; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in;}

#wrapper.load { opacity: 1; }



.overlay{ position:absolute; display:none; width:100%; height:100%; z-index:9; top:0; left:0; background-color: rgba(0,0,0, 0.5); transition: 0.5s;}


.advisory_fixbtn{ position:fixed; bottom:25px; left:10px; }


#wrapper{ position:relative; width:100%; overflow:hidden; }

#header{ z-index:8; position:fixed; width:100%; text-align:left; background:#FDFDFD; margin-bottom:20px; box-shadow: 0 4px 8px 0 rgba(5, 5, 5, 0.1), 0 6px 5px 0 rgba(235, 235, 235, 0.19); }

#header .header_wrap{ position:relative; max-width:1200px; height:105px; margin:0 auto; display:flex; align-items:center;  }

#header .logo{ position:absolute; top:20px; left:0px; }

#header ul{ list-style:none; margin:0 0 0 200px; padding:0; max-width:850px; }

#header ul li{ position:relative; float:left; width:100px; padding:40px 0; text-align:center; font-size:15px; color:#2B2B2B; letter-spacing:1px; cursor:pointer; cursor:hand; }

#header ul li img{ vertical-align:middle; padding:0 0 0 5px; }

#header ul li div{ font-size:10px; color:#ADADAD; margin:8px 0; }

#header ul li .submenu{ /*opacity:0;*/ display:none; position:absolute; min-width:200px; padding:20px; min-height:50px; text-align:left; background:#333333; top:105px; left:-40px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:default; }

#header ul li .submenu a{ display:inline-block; color:#FFF; text-decoration:none; font-size:15px; letter-spacing:1px; padding:8px 0;}

#header ul li .submenu a:hover{ text-decoration:underline; }

#header ul li:hover .submenu{ /*opacity:1;*/ display:block; }

#header ul li:hover .submenu:after{ content:""; border:transparent 8px solid; border-bottom-color:#333333 ;position:absolute; text-align:center; top:-16px; left:49%}





#header_nav{ position:absolute; letter-spacing:1px; top:30px; right:0; }

#header_nav img{ vertical-align:middle; padding:0 5px 0 0; }

#header_nav a{ text-decoration:none; color:#2B2B2B; }

#header_nav a:hover{ text-decoration:underline; }



#mobile_menu{ display:block; position:absolute; top:25px; right:10px; background:#CCCCCC; width:50px; height:50px; cursor:pointer; cursor:hand; }

#mobile_menu:hover{ background:#7A5653; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

#mobile_menu .menu_line{ background:white; width:38px; height:5px; margin:9px auto; }



#hideMenu{ position:fixed; top:0; right:0; width:250px; overflow:hidden; display:none; }

#hideMenu .bTitle{width:100%; padding:20px 0; text-align:center; font-size:30px; background:#6F4745; color:#FFF; letter-spacing:5px;}

#hideMenu ul{ list-style:none; margin:0; padding:0; }

#hideMenu ul li{ display:inline-block; width:100%; margin-bottom:5px; background:#fff; color:#673D3A; padding:15px 0 15px 10px; font-size:16px; letter-spacing:1px; border-bottom:2px solid #FFF; cursor:hand; cursor:pointer; }

#hideMenu ul li:hover{ background:#6F4745; color:#fff; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }



#hideMenu div a::before { content: "》 ";}

#hideMenu div{ font-size:14px; padding-left:20px; font-weight:normal; letter-spacing:1px; margin-bottom:20px; }

#hideMenu div a{ text-decoration:none; color:#000;}

#hideMenu div a:hover{ text-decoration:underline;}



#sitemap{ color:#85816f; letter-spacing:1px; font-size:14px; margin:30px 0; }

#sitemap a{ color:#85816f; text-decoration:none; }

#sitemap a:hover{ text-decoration:underline; }



#container{ position:relative; font-size:15px; margin-top:120px; }

#container .container_wrap{position:relative;overflow:hidden;max-width:1200px; line-height:35px; margin:30px auto;padding:0 10px;color:#282828;font-size:15px;letter-spacing:1px;}

#container .container_left{max-width:900px;padding:  0 20px;box-sizing:  border-box;width: 75%;float:left;}

#container .container_right{ max-width:300px; width:25%; float:left; }

#container .link{ color:#85816f; text-decoration:none; }

#container .link:hover{ text-decoration:underline; }

#container .advisory_btn{ position:absolute; right:0; }



.about_bg1{width:100%; height:436px; background:url(../../images/about1.jpg) no-repeat; background-size:cover; background-position:center;}

.about_bg2{width:100%; height:436px; background:url(../../images/about2.jpg) no-repeat; background-size:cover; background-position:center;}



.about_hclass{ width:45%; box-sizing: border-box; max-width:590px; overflow:hidden; margin:25px 2%; float:left; }

.about_hclass .hclass_left{ float:left; max-width:180px; width:35%; }

.about_hclass .hclass_left img{ padding-right:20px; max-width:149px; width:90%;}

.about_hclass .hclass_right{ float:left; width:65%; }

.about_hclass .hclass_title{ font-size:18px; line-height:25px; color:#bda575; }

.about_hclass .hclass_content{ font-size:14px; line-height:25px; }



.goTop{ position:absolute; bottom:-105px; left:49%; }



/*帝芬妮 旗鑑館*/

.about_frame{ text-align:center; width:100%; overflow:hidden; }

.about_item{ margin:5px; width:280px; height:185px; text-align:center; display:inline-block; position:relative; }



/*打造您的專屬幸福*/



/*

.about_wrap{

    display: grid;

    grid-gap: 10px;






    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));

    margin-bottom: 2em;	

}	

.about_box {

  color: #fff;

  padding: 20px;

  font-size: 150%; 

  text-align:center;

}

*/



.about_wrap{ text-align:center; width:100%; overflow:hidden; }

.about_box{ margin:5px 40px; width:307px; overflow:hidden; text-align:center; display:inline-block; vertical-align:top; }


.about_box_title{font-size:16px; line-height:25px; color:#bda575;}



.about_box_content{font-size:13px; line-height:25px; color:#282828; text-align:left;}







.about_item:hover .about_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }



.about_item_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.8); color:#FFF; color:#FFF; display:flex; align-items:center; }



.about_item_mask span{vertical-align:middle; margin:0 auto; text-align:center; padding:15px; border:1px solid #FFF;}







.common_title{ font-size:24px; text-align:center; color:#282828; letter-spacing:1px; margin:50px 0; }



.common_title .btitle{border-bottom:1px solid #7D7C77;}



.common_title .stitle{ display:inline-block; margin:20px 0; font-size:14px; color:#BABABA; }



#footer{ width:100%; overflow:hidden; background:#F6F6F6; padding:60px 0 0 0; margin-top:70px; }

#footer .footer_wrap{  max-width:1200px; margin:0 auto; }

#footer .footer_icon{ display:inline-block; width:100%; margin:20px 0; padding:10px 0; margin-left:0; border-bottom:1px solid #D8D8D8; overflow:hidden; }

#footer .footer_icon img{ padding-right:10px; }

#footer .logo{ width:100%; text-align:left;}



#footer .footer_left{ float:left; width:30%; padding-left:20px; box-sizing:border-box; }

#footer .footer_right{ float:left; width:70%;  max-width:800px; overflow:hidden; }

#footer .footer_contact{ color:#747273; letter-spacing:1px;}



/*

.footer_frame{

    display: grid;

    grid-gap: 10px;

    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));

    margin-bottom: 2em;	

}	

.footer_box {

  color: #fff;

  border-radius: 5px;

  padding: 20px;

  font-size: 150%; 

  text-align:left;

  letter-spacing:1px;

}

*/



.footer_frame{ text-align:center; width:100%; overflow:hidden; }

.footer_box{ margin:5px 10px; width:210px; overflow:hidden; text-align:left; display:inline-block; vertical-align:top; }



.footer_box_title{font-size:15px; color:#896866; border-bottom:1px solid #afafaf; margin:10px 0; height:30px; letter-spacing:1px;}

.footer_box_content{font-size:14px; line-height:25px; letter-spacing:1px; color:#777777;}

.footer_box_content a{ color:#777777; text-decoration:none;}

.footer_box_content a:hover{ color:#000000;}



#copyright{ text-align:right; letter-spacing:1px; color:#777777; line-height:22px; }

#copyright a{ color:#777777; }



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Index <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/


.index_design_left{ width:35%; float:left; box-sizng:border-box; }
.index_design_left img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); width:100%; }
.index_design_right{ float:left; width:60%; overflow:hidden; }
.index_design_right img{ max-width:565px; float:right }
.index_desing_area{ float:left; width:100%; display:block; min-height:250px; overflow:hidden; background:#333333; margin:30px 0; box-sizing:border-box; padding:10px 20px 10px 40px; }
.index_desing_title{ color:#c1aa7c; font-size:24px; padding:20px 0; letter-spacing:1px; }
.index_design_right p{ color:#FFF; line-height:20px; }
.index_desing_more { width:100%; text-align:right; }
.index_desing_more a{ color:#c1aa7c; font-size:12px; }

.index_evaluate{ float:right; max-width:350px; }
.index_evaluate_btitle{ font-size:30px; padding:30px 0 0 0; color:#FFF; letter-spacing:5px; }
.index_evaluate_btitle2{ color:#eadab9; letter-spacing:5px; padding-bottom:20px; }
.index_evaluate_box{ width:100%; color:#efefef; border-bottom:1px solid #474747; font-size:14px; line-height:20px; margin-bottom:20px; }
.index_evaluate_name{ font-size:14px; }

.index_event_title{width:100%;border-top:1px solid #d1d1d1;margin:50px 0 30px 0;padding:10px 0;text-align: left;font-size:24px;}
.index_event_title span{ font-size:14px; color:#acacac; padding:0 30px; }

.event_wrap{ text-align:center; width:100%; overflow:hidden; }
.event_box{margin:5px 10px;max-width: 565px;width: 100%;overflow:hidden;text-align:left;vertical-align:top;display:inline-block;}
.event_title{ padding:0 10px; box-sizing: border-box; color:#BDA575;}
.event_title a{ color:#BDA575; text-decoration:none; }
.event_title a:hover{ text-decoration:underline; }
.event_title2 a{ color:#333; text-decoration:none; }
.event_title2 a:hover{ text-decoration:underline; }
.event_title3{padding:0 10px; box-sizing: border-box; font-size:14px; line-height:16px; margin:0 0 10px 0; color:#858585;}
.event_content{padding:0 10px; box-sizing: border-box; font-size:14px; line-height:22px; margin:0 0 10px 0; min-height:100px;}
.event_date{ margin:10px 10px; box-sizing: border-box; border-top:1px solid #c3b88d;}
.event_date2{ margin:10px 0px; box-sizing: border-box; border:0; color:#998969; }
.event_img{ position:relative;}
.event_img img{ display:block;}
.event_item_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.7); color:#FFF; color:#FFF; display:flex; align-items:center;}
.event_item_mask span{vertical-align:middle; margin:0 auto; text-align:center; padding: 0 12px; border:1px solid #FFF; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; }
.event_box:hover .event_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }
.event_more{ float:right; background:#bda575; color:#fff; padding:0px 10px; cursor:hand; cursor:pointer; text-decoration:none; }
.event_more:hover{ background:#cba65c; }
.event_list{display:flex;width:100%;overflow:hidden;padding-bottom: 20px;}
.event_list .lefter{ flex:1; }
.event_list .righter{flex:1;text-align: left;padding: 0 20px;}
.event_list .righter .title{
    font-size: 25px;
    font-weight: bold;
}
.event_list .righter .title_en{}
.event_list .righter .content{ padding:10px 0;}
.event_list .righter .event_more{ float:left; }

/*帝芬妮記事*/
.datebook_wrap{ text-align:center; width:100%; overflow:hidden; }
.datebook_box{ margin:5px 10px; width:565px; overflow:hidden; text-align:left; vertical-align:top; display:inline-block; }
.datebook_title{ padding:5px 10px; box-sizing: border-box; color:#BDA575;}
.datebook_title a{ color:#BDA575; text-decoration:none; }
.datebook_title a:hover{ text-decoration:underline; }
.datebook_title2{font-weight:bold;padding:5px 0;line-height:22px;min-height: 45px;}
.datebook_title2 a{ color:#333; text-decoration:none; }
.datebook_title2 a:hover{ text-decoration:underline; }
.datebook_title3{padding:0 0px; box-sizing: border-box; font-size:15px; line-height:16px; margin:0 0 10px 0; color:#858585;}
.datebook_content{padding:0 0px; box-sizing: border-box; font-size:15px; line-height:22px; margin:0 0 10px 0; min-height:50px;}
.datebook_date{ margin:10px 0px; box-sizing: border-box; border-top:1px solid #c3b88d;}
.datebook_date2{ box-sizing: border-box; border:0; color:#998969; font-size:18px; letter-spacing:1px; font-weight:bold; }
.datebook_img{ position:relative;}
.datebook_img img{ display:block;}
.datebook_item_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.7); color:#FFF; color:#FFF; display:flex; align-items:center;}
.datebook_item_mask span{vertical-align:middle; margin:0 auto; text-align:center; padding: 0 12px; border:1px solid #FFF; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; }
.datebook_box:hover .datebook_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }
.datebook_more{ background:#bda575; color:#fff; padding:6px 10px; cursor:hand; cursor:pointer; text-decoration:none; }
.datebook_more:hover{ background:#cba65c; }
.datebook_tag{ border:1px solid #dcdcdc; background:#faf9f7; color:#837f70; font-size:16px; padding:15px 0; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.datebook_tag2{ border:1px solid #dcdcdc; background:#faf9f7; color:#837f70; font-size:24px; padding:15px 0; text-align:center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.datebook_tag2 span{ font-size:16px !important; }

.datebook_tag3{border:1px solid #b2b2b2 !important;color:#b2b2b2 !important;display:inline-block;padding: 0px 15px !important;margin:5px 0px !important;font-size:14px !important;letter-spacing:1px;cursor:hand;cursor:pointer;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}
.datebook_tag3:hover{ color:#ffffff; background:#b2b2b2; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

#advisory1{ display:inline-block; width:323px; height:158px; margin-right:11px; margin-bottom:20px; background:url(../../images/advisory_bg1.jpg);}
#advisory2{ display:inline-block; width:323px; height:158px; margin-right:11px; margin-bottom:20px; background:url(../../images/advisory_bg2.jpg);}
#advisory1 .name, #advisory2 .name{color:#414141; font-size:15px;}
#advisory1 .name a, #advisory2 .name a{color: #333333;font-size:15px;font-weight: bold;}
#advisory1 .date, #advisory2 .date{color:#414141;}
#advisory1 .title, #advisory2 .title{color:#5E3732; font-size: 15px;}
#advisory1 .content, #advisory2 .content{ color:#7D5B5A;}
#advisory1 .content a, #advisory2 .content a{ color:#333333;}
#advisory1 .reply, #advisory2 .reply{ color:#333333;}
#advisory1 .noreply, #advisory2 .noreply{ color:#CCC;}

#mainmenu .bigtitle{ color:#653938; font-size:20px;}
#mainmenu .smalltitle{ color:#A19B85; font-style:oblique;}
#mainmenu .more{ color:#5F3632; font-size:14px;}
#mainmenu a{ color:#958970; text-decoration:none;}
#mainmenu a:hover{ text-decoration:underline;}

.advisory_member{ color:#9b947a; padding: 0 0 25px 0; text-align:center; width:100%;}
.advisory_member a{ color:#7B5D5B;}

@media screen and (max-width: 1400px) {
	.index_evaluate{ padding-right:5%;  }
}
@media screen and (max-width: 1023px) {
	.index_evaluate{ padding-right:15%;  }
	.index_design_left{ display:none; }
}
@media screen and (max-width: 768px) {
	.index_evaluate{ padding-right:inherit; float:none; margin:0 auto; }
	.index_design_right{ width:90%; }
	.event_list{ display:block; }
}

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Discount <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.discount_wrap{ text-align:center; width:100%; overflow:hidden; }

.discount_box{ margin:5px 10px; width:565px; overflow:hidden; text-align:left; vertical-align:top; display:inline-block; border:1px solid #cdcdcd; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }

.discount_title{ padding:0 10px; box-sizing: border-box; color:#BDA575;}

.discount_title a{ color:#BDA575; text-decoration:none; }

.discount_title a:hover{ text-decoration:underline; }

.discount_title2{padding: 10px 10px;line-height: 20px;}

.discount_title2 a{color:#333;text-decoration:none;font-weight: bold;line-height: 20px;}

.discount_title2 a:hover{ text-decoration:underline; }

.discount_content{padding:0 10px; box-sizing: border-box; font-size:14px; line-height:22px; margin:0 0 10px 0;}

.discount_date{ margin:10px 10px; box-sizing: border-box; border-top:1px solid #c3b88d;}

.discount_date2{margin: 10px 0px;padding-right: 10px;box-sizing: border-box;border:0;color:#998969;}

.discount_img{ position:relative;}

.discount_img img{ display:block;}

.discount_item_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.7); color:#FFF; color:#FFF; display:flex; align-items:center;}

.discount_item_mask span{vertical-align:middle; margin:0 auto; text-align:center; padding: 0 12px; border:1px solid #FFF; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; }

.discount_box:hover .discount_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Photography <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.photo_gallery{ position:relative; /*float:left; width:25%;*/ }

.photo_gallery_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(255,255,255, 0.7); color:#FFF; color:#FFF; display:flex; align-items:center;}

.photo_gallery_mask span{vertical-align:middle; margin:0 auto; color:#333333; text-align:center; padding: 0 12px; font:16px; letter-spacing:1px; -webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; }

.photo_gallery_mask img{ margin:0 0 20px 0;}

.photo_gallery_img{ width:100%; overflow:hidden;}



.photo_gallery_img img {

    -webkit-transition: all 1s ease; /* Safari and Chrome */

    -moz-transition: all 1s ease; /* Firefox */

    -o-transition: all 1s ease; /* IE 9 */

    -ms-transition: all 1s ease; /* Opera */

    transition: all 1s ease;

    max-width: 100%;

}

.photo_gallery:hover img {

    -webkit-transform:scale(1.15); /* Safari and Chrome */

    -moz-transform:scale(1.15); /* Firefox */

    -ms-transform:scale(1.15); /* IE 9 */

    -o-transform:scale(1.15); /* Opera */

     transform:scale(1.15);

}



.photo_gallery:hover .photo_gallery_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }



.photo_tag{ text-align:center; width:100%; overflow:hidden; }

.photo_tag_item{ margin:5px; padding:2px 10px; text-align:center; border: 1px solid #b2afaf; color:#896866; display:inline-block; cursor:hand; cursor:pointer; }

.photo_tag_item_on{ margin:5px; padding:2px 10px; text-align:center; border: 1px solid #b2afaf; color:#ffffff; background:#896866; display:inline-block; cursor:hand; cursor:pointer; }



.photo_tag_item:hover{ background:#896866; color:#ffffff; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }







/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Photography Detail <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.flex_gallery{ position:relative; }

.flex_gallery_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.7); color:#FFF;  display:flex; align-items:center;}

.flex_gallery:hover .flex_gallery_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }

.flex_gallery_border{border:1px solid #FFF; width:95%; height:95%; margin:0 auto; display:flex; align-items:center;}





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Feedback <<<----------------------------------------------------------------*/


/* ----------------------------------------------------------------------------------------------------------------*/



@keyframes dropHeader {

  0% {

    transform: translateY(-150%);

  }

  100% {

    transform: translateY(0);

  }

}



.feedback_banner{ width:100%; height:293px; background:url(../../images/feeback_banner.jpg) no-repeat; background-size:cover; background-position:center; display:flex; align-items:center; }

.feedback_banner_text{ font-size:30px; letter-spacing:5px; margin:0 auto; color:#FFF; animation: 1s ease-out 0s 1 dropHeader;}



.feedback_frame

{

    text-align:center;

    width:100%;

  	overflow:hidden;

	margin:50px 0;

}

.feedback_item

{

margin: 20px 5px;

width: 360px;

height: 280px;

vertical-align:top;

text-align:center;

border: 1px solid #dcdcdc;

display:inline-block;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

padding: 15px;

box-sizing: border-box;
}

.feedback_item_list{width:100%;overflow:hidden;padding: 0 0 1px 0;border-bottom: 1px solid #c3b88d;}

.feedback_item_left{float:left; padding:0 10px; }

.feedback_item_right{ float:left; width:100px; text-align:left;}

.feedback_item_right div{ font-size:13px; vertical-align:top; }

.feedback_item_title1{ color:#000;  line-height:20px; }

.feedback_item_title1 a{ color:#000; text-decoration:none; }

.feedback_item_title1 a:hover{ text-decoration:underline; }

.feedback_item_title2{ color:#837f70; line-height:25px; }

.feedback_item_title3{color:#897f6e;text-align:left;font-size:14px;}

.feedback_item_title4{font-size:14px;line-height:22px;margin: 0px 0 5px 0;text-align:left;/*min-height: 75px;*/}

.feedback_item_title5{width:100%;overflow:hidden;display:flex;padding: 0 0 10px 0;}

.feedback_item_title5 span{position:relative;margin:0 2px;display: inherit;}
.feedback_item_title5 span .mask{opacity:1;position:absolute;width:100%;height:100%;top:0;left:0;background-color: rgba(0,0,0, 0.7);color:#FFF;font-size: 24px;font-weight: bold;display: flex;align-items:center;justify-content: center;}


.feedback_title{ position:relative; background:#F5F4F0; width:100%; overflow:hidden; padding:20px; box-sizing: border-box; margin:0 0 50px 0; }

.feedback_item_right .camera{ position:absolute; top:10px; right:10px; }

.feedback_left{ float:left; }

.feedback_right{ float:left; }

.feedback_bold_word{ font-weight:bold; font-size:16px; }

.feedback_detail{border:1px solid #EAE9E4; width:100%; margin-bottom:50px;}

.feedback_detail_title{width:100%; background:#f5f4f0; font-size:16px; letter-spacing:1px; padding:5px 10px; box-sizing: border-box;}

.feedback_detail_content{ padding:5px 10px; box-sizing: border-box; }

.feedback_detail_content2{ padding:0 5px 0 0; margin:10px 0 0 0;}

.feedback_progress{ padding:50px; }

.feedback_progress_area{ width:100%; overflow:hidden; }

.feedback_progress_left{ float:left; width:500px; }

.feedback_progress_right{ float:left; width:400px; }

.feedback_jcarousel{ width:100%;overflow:hidden;display:flex;flex-wrap: wrap;border:1px solid #EAE9E4;justify-content: space-between;}

.feedback_jcarousel span{ transition: transform .2s; position:relative;display:inline-block;flex: 1 30%;margin: 10px 10px;background:#ebebeb;border:1px solid #cccccc;height:200px;cursor: pointer;}

.feedback_jcarousel span:hover {
  transform: scale(1.02); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.feedback_message{ width:100%; overflow:hidden; border:1px solid #EAE9E4; margin:50px 0; box-sizing: border-box; padding:10px; margin: 50px 0 30px 0; }

.feedback_message_area{ position:relative; width:100%; overflow:hidden; padding-bottom:30px; border-top:1px dotted #7f7f7f; padding:10px 0; }

.feedback_message_left{ float:left; }

.feedback_message_left img{ padding:0 10px 0 0;}

.feedback_message_right{ float:left; font-size:14px; }

.feedback_message_textarea{ width:98%; border:1px solid #eaeaea; height:100px; padding:10px; font-size:14px; letter-spacing:1px; }



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Login <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.login_area{ width:100%; overflow:hidden; }

.login_area_left{ float:left; width:50%; }

.login_area_right{ float:left; width:50%; text-align:center; }

.login_frame{ box-sizing:border-box; border:1px solid #EAE9E4; width:100%; max-width:550px; margin:0 auto; }

.login_frame_title{ width:100%; background:#f5f4f0; font-size:16px; letter-spacing:1px; padding:5px 10px; box-sizing: border-box; }

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

.login_frame_content table td{ border-bottom:1px solid #f5f4f0; padding: 15px 0 15px 20px; font-size:14px; }

.login_frame_content table td input[type="text"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }

.login_frame_content table td input[type="password"]{ border:1px solid #e9e8e8; width:80%; height:25px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }

.login_frame_content table td textarea{ border:1px solid #e9e8e8; width:80%; height:125px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px; }



.login_title{ color:#333333; font-size:14px; padding-left:20px; width:70px; }

.login_title_en{ width:100px; color:#9e9e9e; font-size:14px; padding-left:20px; width:80px; }

.login_area_right img{ width:100%; max-width:364px; }



@media screen and (max-width: 1023px) {

	.login_area_left{ float:none; margin:0 auto; width:80%; }	

	.login_area_right{ margin-top:30px;  width:100%; margin:30px 0; }	

	.login_area_right img{ display:block; text-align:center; margin:0 auto; padding-bottom:20px; }

}

@media screen and (max-width: 768px) {

	.login_area_left{ width:95%; }	

	.login_title_en{ display:none; }

	.login_frame_content table td{ padding: 15px 0 15px 5px; }

}



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Register <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.register_title{ width:20%; max-width:250px; text-align:right; color:#333333; font-size:14px; padding-left:20px; }

.login_frame_content table td select{ border:1px solid #e9e8e8; width:25%; height:35px; color:#6b6b6b; font-size:15px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:5px 10px;font-size:14px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif; color:#646464; }



#login_frame_content_none table td{ border-bottom:0px #ffffff; padding: 0px 0 0px 0px; }



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Member <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/





#member_menu{ font-size:16px; text-align:center; color:#282828; letter-spacing:1px; text-align:center; width:100%; overflow:hidden; border-bottom:5px solid #eeeae3; }

.member_menu_line{ width:100%; height:5px; border-bottom:1px solid #eeeae3; margin-bottom:50px;}

#member_menu .square{margin: 0 0px;padding: 0 0px;width: 140px;text-align:center;display:inline-block;font-size:14px;letter-spacing:1px;font-weight:bold;line-height:20px;cursor:hand;cursor:pointer;}

#member_menu .square img{ display:block; margin:0 auto; }

#member_menu .color1{ color:#86d8e6; }

#member_menu .color2{ color:#9f859f; }



.member_title{position:relative; padding:15px 10px;}

.member_info{ position:absolute; top:7px; right:10px; line-height:20px; height:55px; display:flex; align-items:center; }

.member_info_left{float:left; font-size:13px; padding:0 10px; text-align:right;}

.member_info_left span{ font-size:12px; color:#999999; }

.member_info_right{ float:left; padding-right:5px; }



.member_form_bg3{ background:#F5F4F0; font-size:16px; padding:15px 10px; color:#6B6954; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}

.member_form_bg4{ background:#F5F4F0; font-size:16px; padding:15px 10px; color:#6B6954; border-top:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC;}

.member_form_bg5{ color:#ACA592; border-bottom:1px solid #CCCCCC; border-right:1px solid #CCCCCC; padding-top:5px; padding-bottom:5px;}

.member_form_bg5 a{color:#ACA592; text-decoration:none;}

.member_form_bg5 a:hover{color:#ACA592; text-decoration:underline;}

.member_form_bg6{ color:#ACA592; border-bottom:1px solid #CCCCCC;}



.member_form_nonedata{ color:#6B6954; border-bottom:1px solid #CCCCCC; padding-top:100px; padding-bottom:100px;}



.calendar_frame_title{ width:100%; font-size:16px; letter-spacing:1px; padding:5px 10px; box-sizing: border-box; border-bottom:1px dotted #b2b2b2; }

.calendar_frame_title span{ position:absolute; top:0; right:0; background:#333333; color:#FFF; font-size:13px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding:0 10px; cursor:hand; cursor:pointer; }

.cal_flow{ width:100%; overflow:hidden; border-bottom:1px dotted #b2b2b2; letter-spacing:px; padding:5px 0; }

.cal_flow_left{ float:left; color:#85816f; width:100px;  }

.cal_flow_right{ float:left; }



.member_evatextarea { border:1px solid #CCCCCC; background: #FFFFFF; line-height: 20px; color : #343434; font-family:"微軟正黑體"; letter-spacing : 0px; text-align:left; width : 100%; height:80px; }



.course-detail{ width:100%; overflow:hidden; box-sizing:border-box; }

.course-detail-title{ font-size:18px; color:#484848; letter-spacing:1px; font-weight:bold; margin:20px 0; }

.course-detail-item{ background:#f2f2f2; color:#0078ff; font-weight:bold; letter-spacing:1px; font-size:15px; padding:5px 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }

.course-detail-content{ color:#484848; font-size:15px; letter-spacing:1px; line-height:25px; padding:20px 5px; margin:30px 0;}





.message_text_a { border:1px solid #EAE9E4; border-top:0; padding:5px; margin-bottom:50px; }

.message_text_b { color:#006 }

.message_text_c { line-height:20px; letter-spacing:1px; padding:10px 0; }

.message_text_d { line-height:20px; color: #666; font-size:11px; letter-spacing:1px; padding:5px 0; }







/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Dress <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/





.dress_wrap{ width:100%; overflow:hidden; display: flex; }

.dress_square{ width:24%; overflow:hidden; margin:20px 1% 50px 1%; float:left; flex: 1; max-height:400px }

.dress_square img{display:block;/* height:100%;*/ max-height:400px;}

.dress_head{ background:#333333; padding:20px 20px; box-sizing:border-box; }

.dress_title{color:#c0aa7e; border-bottom:1px solid #5e5e5e; padding:0 0 10px 0;}

.dress_content{ color:#b7b7a9; margin:20px 0 0 0; line-height:25px; font-size:14px; }

.dress_more{ color:#fff; margin:20px 0; text-align:center; }

.dress_more a{ color:#fff; text-decoration:none; font-size:13px;}

.dress_more a:hover{ text-decoration:underline; }



.dress_square:hover .discount_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }





@media screen and (max-width: 1023px) {



	.hidden1{ display:none; }

	

}



@media screen and (max-width: 768px) {

	.hidden2{ display:none; }

}



@media screen and (max-width: 480px) {

	.hidden3{ display:none; }

}



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Spot <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.spot_area{ width:100%; overflow:hidden; padding:50px 0; text-align:center; width:100%; }

.spot_item{  margin:5px 8px; width:240px; overflow:hidden; text-align:center; border: 1px solid #dcdcdc; display:inline-block; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; vertical-align:top; }

.spot_item_title{ position:relative; width:100%; padding:10px 0; background:#f8f7f4;}

.spot_item_title span{ color:#837f70; font-size:30px; font-family:Verdana, Geneva, sans-serif; font-style:italic; }

.spot_item_content{ padding:10px; text-align:left; }

.spot_item_content span{ font-size:30px; color:#837f70; font-weight:bold; vertical-align:middle; }



@media screen and (max-width: 768px) {

	.spot_item{  margin:5px 5px; }

}


a.oversea_detail_link:link    { text-decoration:none; color:#282828; border: #CDCDCD solid; border-width: 0px 0px 1px }
a.oversea_detail_link:visited { text-decoration:none; color:#282828; border: #CDCDCD solid; border-width: 0px 0px 1px }
a.oversea_detail_link:hover   { text-decoration:none; color:#282828; border: #CDCDCD solid; border-width: 0px 0px 1px }
a.oversea_detail_link:active  { text-decoration:none; color:#282828; border: #CDCDCD solid; border-width: 0px 0px 1px }


a.oversea_detail_link1:link    { text-decoration:none; color:#FE508A; }
a.oversea_detail_link1:visited { text-decoration:none; color:#FE508A; }
a.oversea_detail_link1:hover   { text-decoration:underline; color:#FE508A; }
a.oversea_detail_link1:active  { text-decoration:none; color:#FE508A; }

/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Spot_detail <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.spot_bg1{width:100%; height:434px; background:url(../../images/spot1.jpg) no-repeat; background-size:cover; background-position:center;}

.spot_bg2{width:100%; height:434px; background:url(../../images/spot2.jpg) no-repeat; background-size:cover; background-position:center;}

.spot_bg3{width:100%; height:434px; background:url(../../images/spot3.jpg) no-repeat; background-size:cover; background-position:center;}

.spot_bg4{width:100%; height:434px; background:url(../../images/spot4.jpg) no-repeat; background-size:cover; background-position:center;}

.spot_bg5{width:100%; height:434px; background:url(../../images/spot5.jpg) no-repeat; background-size:cover; background-position:center;}





.spot_margin{ max-width:1000px !important; margin:100px auto !important; }

.spot_list{ width:100%; overflow:hidden; border-bottom:1px dashed #b2b2b2; display:flex; align-items:center; }

.spot_list_left{ float:left; width:135px; font-size:24px; }

.spot_list_left span{ font-size:40px;}

.spot_list_right{ float:left; width:80%;  }

.spot_list_right table{ margin:10px 0 10px 0; }

.spot_list_right table td{ font-size:15px; line-height:30px; letter-spacing:1px; }



.masonry_wrap{ position:relative; max-width:1200px; margin:30px auto; padding:0 10px; color:#282828; font-size:15px; letter-spacing:1px; line-height:35px; }

.spot_masonry{ width:42%; overflow:hidden; border:1px solid #e7dfcc; margin:2%; background:#FFF; }



.masonry_wrap_img{ max-width:1200px; margin:30px auto; padding:0 10px; color:#282828; font-size:15px; letter-spacing:1px; line-height:35px; }

.spot_masonry_img{ background:#FFF; width:30%; margin:1% }

.spot_masonry_img:hover .discount_item_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }





.spot_masonry_title{ font-size:36px; padding:20px 15px; border-bottom:1px dashed #b2b2b2; color:#c3bcaa; box-sizing:border-box; }

.spot_masonry_content{ padding:20px 15px; }

.spot_masonry_content span{ color:#a9a495; }





@media screen and (max-width: 1023px) {

	.spot_masonry_img{ width:46%; margin:1% }	

}

@media screen and (max-width: 768px) {

	.spot_masonry{ width:90%; }	

	.spot_masonry_img{ width:95%; }		

}

@media screen and (max-width: 480px) {

	.spot_margin{ margin:20px auto; }

	.spot_list{ display:inherit; }

	.spot_list_left{ float:none; text-align:center; width:100%; margin:30px 0; }

	.spot_list_right{ float:none; width:100% }	

	

}



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> RWD <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



@media screen and (max-width: 1600px) {

	.photo_gallery{ float:left; width:33.3%; }

}



@media screen and (max-width: 1250px) {

	.discount_box{ width:45%; }

}



@media screen and (min-width: 1100px) {



	#mobile_menu{ display:none; }



}



@media screen and (max-width: 1100px) {



	#header ul li{ display:none; }

	#header_nav{ right:70px; top:43px; }

	#mobile_menu{ display:block; }

	

	.about_box{ width:90%; }

	.about_box_left{ width:40%; float:left;}

	.about_box_right{ width:55%; float:left; text-align:left; padding-left:5%}

	
	.photo_gallery{ float:left; width:50%; }	

	#container .container_left{ max-width:none; width:100%; float:left; }
	
	#container .container_right{ max-width:none; width:100%; float:left; }

}



@media screen and (max-width: 1023px) {



	.about_hclass{ float:none; width:100%; max-width:none; }

	.footer_right, #copyright{ display:none;}

	#footer .footer_left{ margin:0 auto; float:none; text-align:left; width:300px; padding-bottom: 25px;}

	#footer .footer_logo{ text-align:center;}

	#footer .footer_icon{ text-align:center;}

	

	

	.feedback_item

	{

	    margin:5px 5px;	

	}	

	

}



@media screen and (max-width: 768px) {



	#copyright{ padding:30px 0; text-align:center;}

	#footer .footer_left{ float:none;}

	#footer .footer_right{ width:100%; }

	#footer .footer_icon{ margin:10px 0;}

	

	.about_box{ margin:5px 0;}

	.about_box_left{ width:100%; float:none;}

	.about_box_right{ width:100%; padding-left:0;}	

	

	.photo_gallery{ float:left; width:100%; }	

	.discount_box{ width:auto; }

	.goTop{ left:45%;}

	

}



@media screen and (max-width: 480px) {



	.about_hclass .hclass_left{ width:100%; float:none; margin:0 auto;}

	.about_hclass .hclass_right{ width:100%; }

	

}





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Tips <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/





.popup {position:absolute;background:#666;font-size:11px;color:#ddd;background: url(../../images/index_tip_bg.png) no-repeat left top;z-index: 20;}

#article-finished { position:fixed; bottom:0px; right:40px; width:356px; height:180px; -webkit-transition:right 700ms ease-in-out; -moz-transition:right 700ms ease-in-out; transition:right 700ms ease-in-out; }

#article-finished .tip_box { width: 290px; height:45px; margin: 110px 33px 0 33px; text-align: left; color:#FFF; position:relative; font-size:13px; }

#article-finished a.close { display:block; position:absolute; right:10px; top:30px; width:15px; height:15px; color:#FFF; }

#article-finished.hiding { right:-420px; }

article { float:left; clear:both; width: 100%; }





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> CSS Animation <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



* { /*-webkit-transition: all 0.5s;*/ }



@-webkit-keyframes swing

{

	15%


	{

		-webkit-transform: translateX(5px);

		transform: translateX(5px);

	}

	

	30%

	{

		-webkit-transform: translateX(-5px);

		transform: translateX(-5px);

	}

	

	50%


	{

		-webkit-transform: translateX(3px);

		transform: translateX(3px);

	}

	

	65%

	{

		-webkit-transform: translateX(-3px);

		transform: translateX(-3px);

	}

	

	80%

	{

		-webkit-transform: translateX(2px);

		transform: translateX(2px);

	}

	

	100%

	{

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



@keyframes swing

{

	15%

	{

		-webkit-transform: translateX(5px);

		transform: translateX(5px);

	}

	

	30%

	{

		-webkit-transform: translateX(-5px);

		transform: translateX(-5px);

	}

	

	50%

	{

		-webkit-transform: translateX(3px);

		transform: translateX(3px);

	}

	

	65%

	{

		-webkit-transform: translateX(-3px);

		transform: translateX(-3px);

	}

	

	80%

	{

		-webkit-transform: translateX(2px);

		transform: translateX(2px);

	}

	

	100%

	{

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



.swing:hover{

  		-webkit-animation: swing 1s ease;

        animation: swing 1s ease;

        -webkit-animation-iteration-count: 1;

        animation-iteration-count: 1;	

}





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.Loadaction_Box { position: fixed; left: 0px; top:0px; background-image:url(../../images/action_bg.png); z-index:100000000 }

.Loadaction { position: fixed; padding-top:5px; width: 220px; height: 45px; left: 42%; top: 42%; background-image:url(../../images/action_bg.png); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

.Actionupload_Text { font-size:13px; color:#FFFFFF; height:20px; }



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Pager <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

.pgis_num{color: #fff; font-size:12px; letter-spacing:1px; text-align:center; line-height:15px;height:20px; width:20px; background-color:#643734;}

.pg_num{color: #fff; font-size:12px; letter-spacing:1px; cursor:pointer; text-align:center; line-height:20px;height:20px; width:20px; background-color:#bbb;}

.pg_num:hover{background-color:#eaeaea; transition:1s}





.cssa { color:#555; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }

.cssb {  letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }

.cssc { letter-spacing:1px; font-size:15px;height:40px }

.cssd {  font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }