.jn_img_preload { opacity: 0; pointer-events: none; }

.jn_img_loaded { opacity: 1; pointer-events: auto; }

#jn_image { width: 100%; position: relative; overflow: hidden; border-bottom: 1px solid #ddd; }
#jn_image img { vertical-align: bottom; }
#jn_image #img_list { width: 100%; overflow: hidden; z-index: 5000; background: url(../img/loading.gif) center center no-repeat; }
#jn_image.loaded #img_list { background: none; }

#jn_image #img_list > div { position: absolute; width: 100%; top: 0; opacity: 0; transition-property: opacity; transition-duration: 1s; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; }
#jn_image #img_list > div img { position: absolute; }
#jn_image #img_list div.active { opacity: 1; transition-duration: 1s; -webkit-transition-duration: 1s; }
#jn_image #img_list div img { position: absolute; bottom: 0; }

#jn_image #img_list > div { width: 100%; }
#jn_image #img_list > div p.c_copy { padding: 0 20px; position: absolute; z-index: 6001; width: 100%; max-width: 1240px; }
#jn_image #img_list > div p.c_copy.t_left { top: 20px; left: 50%; text-align: left; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy.t_center { top: 20px; left: 50%; text-align: center; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy.t_right { top: 20px; left: 50%; text-align: right; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy.m_left { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: left; }
#jn_image #img_list > div p.c_copy.m_center { top: 50%; left: 50%; right: auto; bottom: auto; text-align: center; transform: translate(-50%, -50%); }
#jn_image #img_list > div p.c_copy.m_right { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: right; }
#jn_image #img_list > div p.c_copy.b_left { bottom: 20px; left: 50%; text-align: left; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy.b_center { bottom: 20px; left: 50%; text-align: center; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy.b_right { bottom: 20px; left: 50%; text-align: right; transform: translateX(-50%); }
#jn_image #img_list > div p.c_copy img { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; position: inherit; vertical-align: middle; width: auto !important; height: auto !important; }
#jn_image #img_list > div p.c_copy.com1 img { max-width: 610px; }
#jn_image #img_list > div p.c_copy.com_ri { line-height: 2.2; width: 100%; color: #fff; font-size: 36px; max-width: 2000px; letter-spacing: 0.16em; }
#jn_image #img_list > div p.c_copy.com_ri + img { top: 0; }

@media screen and (max-width: 640px) { #jn_image #img_list > div p.c_copy.com1 img { max-width: 266px; }
  #jn_image #img_list > div p.c_copy.com_ri { line-height: 2; font-size: 25px; }
  #jn_image #img_list > div p.c_copy.com_ri + img { top: 0; } }
/*640px*/
#jn_image #img_control { position: absolute; width: 100%; top: 50%; z-index: 5002; }
#jn_image #img_control div { position: absolute; top: 0; width: 70px; height: 70px; margin-top: -35px; padding: 23px 0 0; text-align: center; background-color: rgba(255, 255, 255, 0.5); }
#jn_image #img_control div:hover { cursor: pointer; color: #fff; background: #aaa; }
#jn_image #img_control div img { vertical-align: middle; }
#jn_image #img_control .jn_prev { left: 0; }
#jn_image #img_control .jn_next { right: 0; }

#jn_image #img_thumbnail { position: absolute; width: 100%; top: 43px; left: 30px; line-height: 8px; text-align: left; letter-spacing: 0.5em; z-index: 5002; }
#jn_image #img_thumbnail div { display: inline-block; position: relative; width: 50px; height: 8px; background: #999; }
#jn_image #img_thumbnail div.active { background: #005dbc; }
#jn_image #img_thumbnail div:hover { cursor: pointer; background: #005dbc; }
#jn_image #img_thumbnail.ri { top: 24px; left: 30px; }
#jn_image #img_thumbnail.ri div { margin: 0; display: inline-block; position: relative; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
#jn_image #img_thumbnail.ri div.active { background: #003eba; }
#jn_image #img_thumbnail.ri div:hover { cursor: pointer; background: #0271bd; }

#jn_image #fix_logo { position: absolute; width: 235px; left: 50px; top: 50%; z-index: 5002; }
#jn_image #fix_logo img { width: 100%; }

#jn_image #img_scroll { position: absolute; left: 50%; bottom: 20px; width: 50px; height: 50px; margin-left: -25px; padding: 0; color: #333; opacity: 1; text-align: center; z-index: 5003; background: #fff; border-radius: 25px; transition-property: opacity; transition-duration: 0.5s; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; }
#jn_image #img_scroll:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.6); }
#jn_image #img_scroll.active { opacity: 0; }
#jn_image #img_scroll.active:hover { cursor: default; }

@media screen and (max-width: 640px) { #jn_image #img_control div { width: 40px; height: 40px; margin-top: -20px; padding: 8px 0 0; }
  #jn_image #img_thumbnail { top: 20px; left: 10px; line-height: 6px; }
  #jn_image #img_thumbnail div { width: 30px; height: 6px; } }
/*640px*/
@media screen and (max-width: 640px) { #jn_image #fix_logo { left: 35%; top: 40%; width: 275px; } }
/*640px*/

/*# sourceMappingURL=jn_image.css.map */