/*2017-09-26 18:02*/ .mcipcsldr_pos { position: relative; width: 100%; } .mcipcsldr_arw { position: relative; } .mcipcsldr_pics { height: 0; overflow: hidden; position: relative; } .mcipcsldr_pics img { width: 100%; height: auto; vertical-align: top; } .mcipcsldr_pos ul, .mcipcsldr_pos li, .mcipcsldr_dotbtns_box ul, .mcipcsldr_dotbtns_box li { list-style: none; margin: 0; padding: 0; } .mcipcsldr_pics ul, .mcipcsldr_pics ul > li { position: absolute; left: 0; top: 0; width: 100%; } .mcipcsldr_pics ul { height: 100%; } .mcipcsldr_pics ul > li { height: 0; overflow: hidden; } .mcipcsldr_pics ul > li:first-child { height: 100%; } .mcipcsldr_itemfull { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; } .mcipcsldr_itemfull img { display: none; } .mcipcsldr_itemfull iframe { width: 100%; height: 100%; vertical-align: top; } .mcipcsldr_dotbtns_box ul { position: relative; } /*.mcipcsldr_pics ul { white-space: nowrap; }*/ .mcipcsldr_dotbtns_box ul { letter-spacing: -0.35em; text-align: center; } /*.mcipcsldr_pics li,*/ .mcipcsldr_dotbtns_box li { letter-spacing: normal; display: inline-block; vertical-align: middle; } /*.mcipcsldr_pics li { width: 100%; position: absolute; left: 0; top: 0; }*/ /*鎖定按鈕*/ .mcipcsldr_pos .locked, .mcipcsldr_pos .locked a { cursor: default; } /*下方圖片列表*/ .mcipcsldr_botlist_box { margin: 20px 0; overflow: hidden; padding: 10px 0; /*關聯:.mcipcsldr_botlist_box li.locked a.mcipcsldr_botlist*/ } .mcipcsldr_botlist_box > div { margin-left: 50%; } .mcipcsldr_botlist_pos { position: relative; } .mcipcsldr_botlist_box ul { letter-spacing: -0.35em; white-space: nowrap; position: relative; left: 0; } .mcipcsldr_botlist_box li { letter-spacing: normal; white-space: normal; display: inline-block; vertical-align: middle; position: relative; } .mcipcsldr_whkpr { height: 0; padding-bottom: 100%; } a.mcipcsldr_botlist { display: block; box-sizing: border-box; background-color: #FFF; border: 1px solid #ccc; overflow: hidden; letter-spacing: -0.35em; text-align: center; position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; /* */ background-position: center center; background-repeat: no-repeat; background-size: cover; } .mcipcsldr_botlist_box li.locked a.mcipcsldr_botlist { border-color: #333; z-index: 2; left: -10px; top: -10px; right: -10px; bottom: -10px; } a.mcipcsldr_botlist > div, a.mcipcsldr_botlist > img { vertical-align: middle; } a.mcipcsldr_botlist > div { display: inline-block; width: 0; height: 100%; } a.mcipcsldr_botlist > img { max-width: 100%; max-height: 100%; width: auto; height: auto; border: none; } /*下方圖片列表箭頭*/ .mcipcsldr_botlist_hasarrow { position: relative; } .mcipcsldr_btlstarw_box { position: absolute; top: 0; height: 100%; } .btlstarw_left { left: 0; } .btlstarw_left a.mcipcsldr_btlstarw { background-image: url(../Images/mci_picsldr/listarw_lft.png); } .btlstarw_right { right: 0; } .btlstarw_right a.mcipcsldr_btlstarw { background-image: url(../Images/mci_picsldr/listarw_rgt.png); } a.mcipcsldr_btlstarw { display: block; width: 30px; height: 100%; background-repeat: no-repeat; background-position: center center; } a.mcipcsldr_btlstarw > span { display: none; } .mcipcsldr_btlst_mid { margin: 0 40px; } /*點狀按鈕*/ .mcipcsldr_arwdot { position: relative; } .mcipcsldr_dotbtns_box { left: 0; bottom: 15px; width: 100%; box-sizing: border-box; } .dot_add_arrow .mcipcsldr_dotbtns_pos { margin: 0 25px; } .mcipcsldr_dotbtns_pos li { margin: 8px 5px; } .mcipcsldr_dotbtns_box > div { position: relative; display: table; margin: 0 auto; } .mcipcsldr_darw { position: absolute; top: 0; height: 100%; } .mcipcsldr_darwlft { left: 0; } .mcipcsldr_darwrgt { right: 0; } a.mcipcsldr_darwbtn, a.mcipcsldr_dotbtn { display: block; } a.mcipcsldr_darwbtn { width: 20px; height: 20px; margin: 5px 0; background-color: #999; background-position: center center; background-repeat: no-repeat; border-radius: 3px; } .mcipcsldr_darwlft a.mcipcsldr_darwbtn { background-image: url(../images/mci_picsldr/darw_lft.png); } .mcipcsldr_darwrgt a.mcipcsldr_darwbtn { background-image: url(../images/mci_picsldr/darw_rgt.png); } a.mcipcsldr_dotbtn { width: 14px; height: 14px; border-radius: 100%; background-color: #eee; } .mcipcsldr_dotbtns_pos .locked a { background-color: #999; } .mcipcsldr_dotbtns_box, .mcipcsldr_arwbtns_box { position: absolute; z-index: 5; } /*箭頭按鈕*/ .mcipcsldr_arwbtns_box { top: 50%; } .mcipcsldr_arwlft { left: 0; } .mcipcsldr_arwlft a.mcipcsldr_arwbtn { background-image: url(../images/mci_picsldr/arw_lft.png); border-radius: 0 8px 8px 0; } .mcipcsldr_arwrgt { right: 0; } .mcipcsldr_arwrgt a.mcipcsldr_arwbtn { background-image: url(../images/mci_picsldr/arw_rgt.png); border-radius: 8px 0 0 8px; } a.mcipcsldr_arwbtn { position: relative; display: block; background-color: #000; background-color: rgba(0,0,0,0.7); background-position: center center; background-repeat: no-repeat; top: -37px; width: 57px; height: 74px; } a.mcipcsldr_arwtype.locked { opacity: 0.3; } a.mcipcsldr_darwbtn > span, a.mcipcsldr_dotbtn > span, a.mcipcsldr_arwbtn > span, a.mcipcsldr_botlist > span { display: none; } /*焦點用*/ a.mcipcsldr_focus { display: block; width: 0; height: 0; overflow: hidden; line-height: 0; padding: 0; margin: 0; clear: none; float: none; position: static; outline: none; border: none; } a.mcipcsldr_focus span { display: none; } /*維持比例*/ .mcipcsldr_sclkpr { height: 0; position: relative; overflow: hidden; } .mcipcsldr_sclkpr .szkp_center { text-align: center; position: absolute; width: 100%; height: 100%; } .szkp_center > div { display: inline-block; width: 0; height: 100%; } .szkp_center > div, .szkp_center img { vertical-align: middle; } .mcipcsldr_sclkpr img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .mcipcsldr_sclkpr iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }