@charset "utf-8";
/* ===================================================

◇　charm CSS　◇

====================================================== */
#charm h2 { background: url(../../img/charm/img/title_bg.jpg) no-repeat center top;}

#charm #contents { padding: 25px 0 0 0; background: url(../../img/charm/img/con_bg.png) no-repeat center top;}
#charm h3 { padding: 0; margin: 35px 0 35px 0; background: url(../../img/charm/img/con_line.png) no-repeat center center; border: none; text-align: center;}

#charm section { position: relative; background: url(../../img/charm/img/sec_bg.png) no-repeat 71px 240px, url(../img/sec_bg.png) repeat-x center 80px;}
#charm section h4,
#charm .detail { width: 296px; float: left; position: relative; z-index: 10;}
#charm section h4 { padding: 38px 0 25px 0; margin: 0; border: none;}
#charm section h4 span { display: block; padding: 0 0 2px 0; margin: 0 0 53px 0; background: url(../../img/charm/img/num_bg.png) no-repeat center bottom; text-align: center;}
#charm .flexslider_con,
#charm .photo { width: 620px; float: right; position: relative; z-index: 10;}
#charm .detail a { display: block; width: 275px; margin: 40px auto 0 auto;}
#charm .detail a:hover img { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity:0.7;}

#charm #sec7 { background-position: 71px bottom, center 80px;}


/* clear
------------------------------------------------------ */
#charm section { zoom: 1;}
#charm section:after { clear: both; content: "."; display: block; height: 0; font-size: 0; visibility: hidden; }