ul, .widthLimit, .header, .header .work .icon-notice .list, .wrapper, .wrapper h1.title, .wrapper .centerSection, .wrapper .rightSide, .select .defaultShow, span.iconName, .whiteBox, .popout { zoom: 1; }
ul:before, .widthLimit:before, .header:before, .header .work .icon-notice .list:before, .wrapper:before, .wrapper h1.title:before, .wrapper .centerSection:before, .wrapper .rightSide:before, .select .defaultShow:before, span.iconName:before, .whiteBox:before, .popout:before { content: ""; display: table; }
ul:after, .widthLimit:after, .header:after, .header .work .icon-notice .list:after, .wrapper:after, .wrapper h1.title:after, .wrapper .centerSection:after, .wrapper .rightSide:after, .select .defaultShow:after, span.iconName:after, .whiteBox:after, .popout:after { content: ""; display: table; clear: both; }

/*frame */
* { webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; width: 100%; }

body { font-family: "OpenSans", "MicrosoftJhengHei"; }

b { font-weight: bold; }

p { margin: 0; }

a { text-decoration: none; }

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

table { width: 100%; }

input[type=text] { outline: none; }

.on { display: block; }

.mask { background: #000; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 998; display: none; }

.widthLimit { min-width: 1024px; margin: 0 auto; position: relative; }

.header { width: 100%; min-width: 1024px; height: 80px; background-color: #15c9a1; position: relative; }
.header .logoutConfirm { display: none; }
.header .logo { float: left; padding: 14px 0 0 30px; color: #fff; font-size: 24px; line-height: 1em; }
.header .logo span { display: inline-block; margin-left: 15px; vertical-align: top; padding-top: 12px; }
.header .work { float: right; padding: 25px 26px 0 0; }
.header .work > div { display: inline-block; }
.header .work .logoutConfirm { display: none; }
.header .work .name { color: #FFF; font-size: 14px; line-height: 30px; margin-right: 40px; vertical-align: top; }
.header .work .icon-notice { margin-right: 44px; position: relative; }
.header .work .icon-notice:hover .list { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.header .work .icon-notice .num { display: inline-block; width: 18px; height: 18px; background: #ff3f3f; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #FFF; font-size: 14px; line-height: 18px; text-align: center; position: absolute; top: -5px; right: -6px; }
.header .work .icon-notice .list { width: 220px; background: #FFF; -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: absolute; top: 36px; left: 50%; margin: 0 0 0 -110px; z-index: 99; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 0.1s ease-in-out 0.1s; -o-transition: all 0.1s ease-in-out 0.1s; -webkit-transition: all 0.1s ease-in-out; -webkit-transition-delay: 0.1s; transition: all 0.1s ease-in-out 0.1s; -webkit-transform-origin: center top; -moz-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; }
.header .work .icon-notice .list.on { -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.header .work .icon-notice .list:before { position: absolute; top: -8px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #ffffff transparent; }
.header .work .icon-notice .list li { border-top: solid 1px #e4e4e4; }
.header .work .icon-notice .list li:first-child { border-top: 0; }
.header .work .icon-notice .list li.green .point { background: #40c768; }
.header .work .icon-notice .list li.yellow .point { background: #f5a623; }
.header .work .icon-notice .list li.red .point { background: #ff4057; }
.header .work .icon-notice .list li.red .eventTitle { color: #FF4057; }
.header .work .icon-notice .list li a { display: block; width: 100%; height: 100%; }
.header .work .icon-notice .list li a > div { display: inline-block; vertical-align: middle; }
.header .work .icon-notice .list li a .point { width: 8px; height: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin: 26px 15px; }
.header .work .icon-notice .list li a .eventTitle { color: #000; font-size: 14px; line-height: 1.7em; }
.header .work .icon-notice .list li a .eventTime { color: #929292; font-size: 11.2px; line-height: 1.35em; }
.header .work .icon-notice .list li a .eventTime > span { display: inline-block; }
.header .work .icon-notice .list li a .eventTime > img { vertical-align: middle; }
.header .work .icon-notice .list li a .eventTime .time { margin: 0 7px 0 5px; }

.wrapper { position: relative; width: 100%; min-width: 1024px; min-height: calc(100% - 80px); background: #E4E9EB; padding: 0 0 60px 0; overflow-x: hidden; }
.wrapper.bgWhite { background: #FFF; }
.wrapper h1.title { color: #4a4a4a; font-size: 24px; line-height: 1em; letter-spacing: 0.5px; margin: 23px 0 0; font-weight: normal; }
.wrapper h1.title.mt35 { margin-top: 35px; }
.wrapper .centerSection { width: 100%; height: calc(100% - 37px); margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; }
.wrapper .leftSide { background-color: #f2f5f6; width: 247px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.wrapper .leftSide .profile { width: 100%; height: 210px; background: #fff; position: relative; }
.wrapper .leftSide .profile .icon-setting { position: absolute; top: 4px; left: 4px; cursor: pointer; }
.wrapper .leftSide .profile .icon-setting a { width: 100%; height: 100%; display: block; }
.wrapper .leftSide .profile .member { text-align: center; padding-top: 30px; }
.wrapper .leftSide .profile .member .pic { width: 60px; height: 60px; overflow: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #000; margin: 0 auto; }
.wrapper .leftSide .profile .member .name { color: #000; font-size: 18px; line-height: 1.33em; margin: 12px 0 6px; }
.wrapper .leftSide .profile .member .email { color: #9b9b9b; font-size: 12px; line-height: 1.41em; }
.wrapper .leftSide .profile .link { width: 100%; position: absolute; bottom: 14px; left: 0; }
.wrapper .leftSide .profile .link a { display: inline-block; width: 86px; border: solid 1px #15c9a1; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; color: #15c9a1; font-size: 14px; line-height: 1.57em; text-align: center; margin: 0 0 0 25px; }
.wrapper .leftSide .nav li { width: 100%; height: 60px; display: table; -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; }
.wrapper .leftSide .nav li a { color: #4a4a4a; font-size: 14px; line-height: 1em; letter-spacing: 0.3px; display: table-cell; vertical-align: middle; height: 100%; }
.wrapper .leftSide .nav li a .icon { margin: 0px 10px 0 20px; display: inline-block; vertical-align: middle; }
.wrapper .leftSide .nav li:hover { background-color: #dde5e7; }
.wrapper .leftSide .nav li.on { background-color: #15C9A1; }
.wrapper .leftSide .nav li.on a { color: #FFF; }
.wrapper .leftSide .nav li.on .icon-home { background: url(../Images/btn_home_s.png) 0 0 no-repeat; }
.wrapper .leftSide .nav li.on .icon-scenes { background: url(../Images/btn_scenes_s.png) 0 0 no-repeat; }
.wrapper .leftSide .nav li.on .icon-place { background: url(../Images/btn_place_s.png) 0 0 no-repeat; }
.wrapper .leftSide .nav li.on .icon-manager { background: url(../Images/btn_manager_s.png) 0 0 no-repeat; }
.wrapper .rightSide { width: 100%; min-width: 777px; min-height: 651px; padding: 0 36px 0 283px; position: relative; }
.wrapper .breadcrumbs { margin: 7px 0 0 0; }
.wrapper .breadcrumbs a { color: #4a4a4a; font-size: 14px; line-height: 19px; }
.wrapper .breadcrumbs span { font-size: 20px; }

.footer { width: 100%; min-width: 1024px; height: 37px; background: #9b9b9b; color: #fff; font-size: 14px; line-height: 1.1em; text-align: center; position: absolute; bottom: 0; left: 0; z-index: 2; display: table; }
.footer > div { display: table-cell; vertical-align: middle; }
.footer a { display: inline-block; color: #FFF; text-decoration: underline; margin-left: 20px; }

/* Icon Style */
.icon { cursor: pointer; position: relative; }
.icon:hover .iconName { visibility: visible; }

.icon-logout { width: 30px; height: 30px; background: url(../Images/btn_logout.png) 0 0 no-repeat; }
.icon-logout:hover { background: url(../Images/btn_logout_h.png) 0 0 no-repeat; }

.icon-notice { width: 30px; height: 30px; background: url(../Images/btn_bell.png) 0 0 no-repeat; }
.icon-notice:hover { background: url(../Images/btn_bell_h.png) 0 0 no-repeat; }

.icon-setting { width: 30px; height: 30px; background: url(../Images/btn_setting.png) 0 0 no-repeat; }
.icon-setting:hover { background: url(../Images/btn_setting_h.png) 0 0 no-repeat; }

.icon-home { width: 36px; height: 36px; background: url(../Images/btn_home.png) 0 0 no-repeat; }

.icon-scenes { width: 36px; height: 36px; background: url(../Images/btn_scenes.png) 0 0 no-repeat; }

.icon-place { width: 36px; height: 36px; background: url(../Images/btn_place.png) 0 0 no-repeat; }

.icon-manager { width: 36px; height: 36px; background: url(../Images/btn_manager.png) 0 0 no-repeat; }

.icon-download { width: 30px; height: 30px; background: url(../Images/btn_download.png) 0 0 no-repeat; }
.icon-download:hover { background: url(../Images/btn_download_h.png) 0 0 no-repeat; }

.icon-share { width: 30px; height: 30px; background: url(../Images/btn_share.png) 0 0 no-repeat; }
.icon-share:hover { background: url(../Images/btn_share_h.png) 0 0 no-repeat; }

.icon-del { width: 30px; height: 30px; background: url(../Images/btn_del.png) 0 0 no-repeat; }
.icon-del:hover { background: url(../Images/btn_del_h.png) 0 0 no-repeat; }

.icon-play { width: 50px; height: 50px; background: url(../Images/btn_play.png) 0 0 no-repeat; }
.icon-play:hover { background: url(../Images/btn_play_h.png) 0 0 no-repeat; }

.icon-addUser { width: 30px; height: 30px; background: url(../Images/btn_add_user.png) 0 0 no-repeat; }
.icon-addUser:hover { background: url(../Images/btn_add_user_h.png) 0 0 no-repeat; }

.icon-edit { width: 30px; height: 30px; background: url(../Images/btn_edit.png) 0 0 no-repeat; }
.icon-edit:hover { background: url(../Images/btn_edit_h.png) 0 0 no-repeat; }

.icon-addGroup { width: 34px; height: 30px; background: url(../Images/btn_add_group.png) 0 0 no-repeat; }
.icon-addGroup:hover { background: url(../Images/icon_add_group_h.png) 0 0 no-repeat; }

.icon-editOk { width: 30px; height: 30px; background: url(../Images/btn_edit_ok.png) 0 0 no-repeat; }
.icon-editOk:hover { background: url(../Images/btn_edit_ok_h.png) 0 0 no-repeat; }

.icon-refresh { width: 30px; height: 30px; background: url(../Images/btn_refresh.png) 0 0 no-repeat; }

.icon-warning { width: 16px; height: 14px; background: url(../Images/icon_warning.png) 0 0 no-repeat; }

.icon-stop { width: 30px; height: 30px; background: url(../Images/btn_nav_dnd.png) 0 0 no-repeat; }

.icon-grid { width: 30px; height: 30px; background: url(../Images/btn_mode_grid_d.png) 0 0 no-repeat; }
.icon-grid:hover, .icon-grid.on { background: url(../Images/btn_mode_grid_s.png) 0 0 no-repeat; }

.icon-list { width: 30px; height: 30px; background: url(../Images/btn_mode_list_d.png) 0 0 no-repeat; }
.icon-list:hover, .icon-list.on { background: url(../Images/btn_mode_list_s.png) 0 0 no-repeat; }

.icon-index-door { width: 70px; height: 70px; background: url(../Images/icon-index-door.png) 0 0 no-repeat; }

.icon-index-gas { width: 70px; height: 70px; background: url(../Images/icon-index-gas.png) 0 0 no-repeat; }

.icon-index-ipcam { width: 70px; height: 70px; background: url(../Images/icon-index-ipcam.png) 0 0 no-repeat; }

.icon-index-irc { width: 70px; height: 70px; background: url(../Images/icon-index-irc.png) 0 0 no-repeat; }

.icon-index-smk { width: 70px; height: 70px; background: url(../Images/icon-index-smk.png) 0 0 no-repeat; }

.icon-index-sml { width: 70px; height: 70px; background: url(../Images/icon-index-sml.png) 0 0 no-repeat; }

.icon-index-spg { width: 70px; height: 70px; background: url(../Images/icon-index-spg.png) 0 0 no-repeat; }

.icon-index-ths { width: 70px; height: 70px; background: url(../Images/icon-index-ths.png) 0 0 no-repeat; }

.icon-playvideo { width: 30px; height: 30px; background: url(../Images/btn_playvideo_n.png) 0 0 no-repeat; }

.icon-SD { width: 38px; height: 38px; background: url(../Images/btn_sd_n.png) 0 0 no-repeat; }
.icon-SD:hover { background: url(../Images/btn_sd_h.png) 0 0 no-repeat; }
.icon-SD:active, .icon-SD.on { background: url(../Images/btn_sd_p.png) 0 0 no-repeat; }

.icon-HD { width: 38px; height: 38px; background: url(../Images/btn_hd_n.png) 0 0 no-repeat; }
.icon-HD:hover { background: url(../Images/btn_hd_h.png) 0 0 no-repeat; }
.icon-HD:active, .icon-HD.on { background: url(../Images/btn_hd_p.png) 0 0 no-repeat; }

.icon-FHD { width: 38px; height: 38px; background: url(../Images/btn_fhd_n.png) 0 0 no-repeat; }
.icon-FHD:hover { background: url(../Images/btn_fhd_h.png) 0 0 no-repeat; }
.icon-FHD:active, .icon-FHD.on { background: url(../Images/btn_fhd_p.png) 0 0 no-repeat; }

.icon-photo { width: 38px; height: 38px; background: url(../Images/btn_photo_n.png) 0 0 no-repeat; }
.icon-photo:hover { background: url(../Images/btn_photo_h.png) 0 0 no-repeat; }
.icon-photo:active, .icon-photo.on { background: url(../Images/btn_photo_p.png) 0 0 no-repeat; }

.icon-rec { width: 38px; height: 38px; background: url(../Images/btn_rec_n.png) 0 0 no-repeat; }
.icon-rec:hover { background: url(../Images/btn_rec_h.png) 0 0 no-repeat; }
.icon-rec:active, .icon-rec.on { background: url(../Images/btn_rec_p.png) 0 0 no-repeat; }

.icon-mic { width: 38px; height: 38px; background: url(../Images/btn_mic_n.png) 0 0 no-repeat; }
.icon-mic:hover { background: url(../Images/btn_mic_h.png) 0 0 no-repeat; }
.icon-mic:active, .icon-mic.on { background: url(../Images/btn_mic_p.png) 0 0 no-repeat; }

.icon-speaker { width: 38px; height: 38px; background: url(../Images/btn_speaker_n.png) 0 0 no-repeat; }
.icon-speaker:hover { background: url(../Images/btn_speaker_h.png) 0 0 no-repeat; }
.icon-speaker:active, .icon-speaker.on { background: url(../Images/btn_speaker_p.png) 0 0 no-repeat; }

.icon-zoomin { width: 38px; height: 38px; background: url(../Images/btn_zoomin_n.png) 0 0 no-repeat; }
.icon-zoomin:hover { background: url(../Images/btn_zoomin_h.png) 0 0 no-repeat; }
.icon-zoomin:active, .icon-zoomin.on { background: url(../Images/btn_zoomin_p.png) 0 0 no-repeat; }

.icon-zoomout { width: 38px; height: 38px; background: url(../Images/btn_zoomout_n.png) 0 0 no-repeat; }
.icon-zoomout:hover { background: url(../Images/btn_zoomout_h.png) 0 0 no-repeat; }
.icon-zoomout:active, .icon-zoomout.on { background: url(../Images/btn_zoomout_p.png) 0 0 no-repeat; }

.icon-up { width: 38px; height: 38px; background: url(../Images/btn_up_n.png) 0 0 no-repeat; }
.icon-up:hover { background: url(../Images/btn_up_h.png) 0 0 no-repeat; }
.icon-up:active, .icon-up.on { background: url(../Images/btn_up_p.png) 0 0 no-repeat; }

.icon-down { width: 38px; height: 38px; background: url(../Images/btn_down_n.png) 0 0 no-repeat; }
.icon-down:hover { background: url(../Images/btn_down_h.png) 0 0 no-repeat; }
.icon-down:active, .icon-down.on { background: url(../Images/btn_down_p.png) 0 0 no-repeat; }

.icon-left { width: 38px; height: 38px; background: url(../Images/btn_left_n.png) 0 0 no-repeat; }
.icon-left:hover { background: url(../Images/btn_left_h.png) 0 0 no-repeat; }
.icon-left:active, .icon-left.on { background: url(../Images/btn_left_p.png) 0 0 no-repeat; }

.icon-right { width: 38px; height: 38px; background: url(../Images/btn_right_n.png) 0 0 no-repeat; }
.icon-right:hover { background: url(../Images/btn_right_h.png) 0 0 no-repeat; }
.icon-right:active, .icon-right.on { background: url(../Images/btn_right_p.png) 0 0 no-repeat; }

.icon-cam-live { width: 50px; height: 24px; background: url(../Images/btn_cam_offline.png) 0 0 no-repeat; }
.icon-cam-live.on { background: url(../Images/btn_cam_live.png) 0 0 no-repeat; }

/* Button Style */
.button { cursor: pointer; border: 0; padding: 0; margin: 0; outline: none; }

.buttonGray { width: 120px; height: 30px; background-color: #79818e; text-align: center; margin: 0 15px 0 0; cursor: pointer; color: #FFF; font-size: 14px; line-height: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; }
.buttonGray:hover { background-color: #6C747F; }
.buttonGray.on { background-color: #15C9A1; }
.buttonGray a { display: block; width: 100%; height: 100%; }

.btnRed, .btnGreen, .btnGray { width: 150px; height: 50px; display: inline-block; text-align: center; margin: 15px 5px 0; -webkit-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -4px 0 0 rgba(0, 0, 0, 0.15); color: #FFF; font-size: 18px; line-height: 50px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; }
.btnRed a, .btnGreen a, .btnGray a { display: block; width: 100%; height: 100%; color: #FFF; }

.btnRed { background-color: #ff223c; }
.btnRed:hover { background-color: #ff3c53; }
.btnRed:active { background-color: #e01d34; -webkit-box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); }

.btnGreen { background-color: #15c9a1; }
.btnGreen:hover { background-color: #31cfac; }
.btnGreen:active { background-color: #12b08d; -webkit-box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 4px 0 0 rgba(0, 0, 0, 0.15); }

.btnGray { background-color: #9b9b9b; }

.btn_inc { width: 40px; height: 26px; background: url(../Images/btn_ctrl_up_n.png) 0 0 no-repeat; }
.btn_inc:hover { background: url(../Images/btn_ctrl_up_h.png) 0 0 no-repeat; }

.btn_dec { width: 40px; height: 26px; background: url(../Images/btn_ctrl_low_n.png) 0 0 no-repeat; }
.btn_dec:hover { background: url(../Images/btn_ctrl_low_h.png) 0 0 no-repeat; }

.pageLink { margin: 20px 0 0 26px; }
.pageLink a { color: #a4a4a4; font-size: 15px; line-height: 1.2em; display: inline-block; margin: 0 5px; }
.pageLink a.on { color: #000; }
.pageLink a.prevPage { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }

/* Input Style */
input[type=radio], input[type=checkbox] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; width: 1px; margin: 0; padding: 0; position: absolute; top: 0; left: 0; }

input[type=range] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; margin: 0; padding: 0; position: absolute; top: 0; left: 0; }

x-slider { vertical-align: middle; }
x-slider.w75 .slider-track { width: 75px; height: 2px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: #999; }
x-slider.w75 .slider-progress { height: 2px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: #d4d4d4; }
x-slider.w75 .slider-thumb { width: 14px; height: 14px; background: #e3e3e3; }

.slider-track { width: 400px; height: 10px; -webkit-border-radius: 41px; -moz-border-radius: 41px; border-radius: 41px; background: #dcdfe0; }
.slider-track.rainbow { background-image: linear-gradient(to right, #ff0000, #ffa000 16%, #fff800 33%, #00ff21 49%, #0041ff 68%, #993eea 84%, #fe00ff); }

.slider-progress { height: 10px; -webkit-border-radius: 41px; -moz-border-radius: 41px; border-radius: 41px; }

.slider-thumb { width: 20px; height: 20px; display: inline-block; background: #FFF; border: 1px solid #e4e4e4; position: absolute; top: 50% !important; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

.radio { position: relative; display: inline-block; }
.radio input[type=radio]:not(old) + label { display: inline-block; }
.radio input[type=radio]:not(old) + label > span.model { height: 20px; width: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #979797; background: #FFF; display: inline-block; vertical-align: middle; }
.radio input[type=radio]:not(old):checked + label > span.model > span { display: block; background: #15c9a1; width: 12px; height: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; margin: 3px auto 0; }

.checkbox { position: relative; }
.checkbox .model { display: inline-block; height: 20px; width: 20px; cursor: pointer; position: relative; background-repeat: no-repeat; background-size: contain; border: 1px solid #979797; vertical-align: middle; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; }
.checkbox.fake-radio .default--checkbox:not(old):checked + label > span.model > span { display: block; }
.checkbox.fake-radio .default--checkbox:checked + label > span.model { background-image: none; border: 1px solid #979797; }
.checkbox.fake-radio .model span { display: none; background: #15c9a1; width: 12px; height: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; margin: 3px auto 0; }
.checkbox.bgBlack .model { background-image: url(../Images/checkbox.png); }
.checkbox .default--checkbox:checked + .model { background-image: url(../Images/checkbox_v.png); border: 0; }
.checkbox .default--checkbox:checked + label > span.model { background-image: url(../Images/checkbox_v.png); border: 0; }
.checkbox.loginCheckbox .model { background-image: url(../Images/login_checkbox.png); border: 0; -webkit-border-radius: 0%; -moz-border-radius: 0%; border-radius: 0%; }
.checkbox.loginCheckbox:hover .model { background-image: url(../Images/login_checkbox_h.png); }
.checkbox.loginCheckbox .default--checkbox:checked + label > span.model { background-image: url(../Images/login_checkbox_v.png); }

.checkbox--switch .switch, .checkbox--switch .switch:before, .checkbox--switch .switch:after, .checkbox--switch .default--checkbox, .checkbox--switch .default--checkbox:before, .checkbox--switch .default--checkbox:after, .checkbox--switch .toggle--feature, .checkbox--switch .toggle--feature:before, .checkbox--switch .toggle--feature:after { -moz-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -webkit-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.checkbox--switch .switch:before, .checkbox--switch .switch:after, .checkbox--switch .default--checkbox:before, .checkbox--switch .default--checkbox:after, .checkbox--switch .toggle--feature:before, .checkbox--switch .toggle--feature:after { content: ""; display: block; }
.checkbox--switch .default--checkbox { display: none; }
.checkbox--switch .switch { display: block; position: relative; width: 36px; height: 20px; background: #d6d6d6; margin: 0 auto; cursor: pointer; font-size: 1.4em; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; }
.checkbox--switch .switch:before { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: #FFF; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.checkbox--switch .default--checkbox:checked + .switch { background: #15c9a1; }
.checkbox--switch .default--checkbox:checked + .switch:before { left: 17px; -webkit-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.3); }
.checkbox--switch.w40 .switch { width: 40px; height: 24px; }
.checkbox--switch.w40 .switch:before { top: 2px; left: 1px; width: 20px; height: 20px; }
.checkbox--switch.w40 .default--checkbox:checked + .switch:before { left: 19px; }
.checkbox--switch.w24 .switch { width: 24px; height: 14px; }
.checkbox--switch.w24 .switch:before { top: 2px; left: 1px; width: 10px; height: 10px; }
.checkbox--switch.w24 .default--checkbox:checked + .switch:before { left: 12px; }
.checkbox--switch.red .default--checkbox:checked + .switch { background: #ff1f3b; }

.searchBox { position: absolute; right: 36px; top: 44px; }
.searchBox .search { width: 200px; background: #fff url("../Images/icon_search.png") no-repeat 162px center; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; }
.searchBox .search:hover { border-color: #a5a5a5; }
.searchBox .search:focus { border-color: #bdbdbd; }

input[type=text], input[type=password] { width: 300px; height: 35px; padding: 0 0 0 19px; border: 1px solid #b9bec7; outline: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #262626; font-size: 15px; line-height: 35px; -moz-transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; -o-transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; -webkit-transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; }
input[type=text]:hover, input[type=password]:hover { border-color: #a5a5a5; }
input[type=text]:focus, input[type=password]:focus { border-color: #bdbdbd; }
input[type=text].w100, input[type=password].w100 { width: 100px; height: 30px; }
input[type=text].loginInput, input[type=password].loginInput { padding: 0 0 0 40px; color: #25313e; font-size: 16px; line-height: 35px; border: 1px solid #b9bec7; }
input[type=text].loginInput:hover, input[type=password].loginInput:hover { border-color: #a5a5a5; }
input[type=text].loginInput:focus, input[type=password].loginInput:focus { border: 2px solid #15c9a1; -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); }
input[type=text].account, input[type=password].account { background: url(../Images/icon_email.png) 5px center no-repeat; }
input[type=text].password, input[type=password].password { background: url(../Images/icon_pw.png) 5px center no-repeat; }
input[type=text].birthday, input[type=password].birthday { background: url(../Images/icon_cake.png) 5px center no-repeat; }
input[type=text].lineType, input[type=password].lineType { background: none; width: 22px; height: 22px; padding: 0; border: 0; border-bottom: 1px solid #4a4a4a; text-align: center; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }

.loginInput::-webkit-input-placeholder { font-size: 14px; }

.loginInput:-moz-placeholder { font-size: 14px; opacity: 1; }

.loginInput::-moz-placeholder { font-size: 14px; opacity: 1; }

.loginInput:-ms-input-placeholder { font-size: 14px; }

.select { position: relative; display: inline-block; vertical-align: middle; }
.select .defaultShow { position: relative; cursor: pointer; display: block; overflow: hidden; padding: 0 0px 0 11px; height: 35px; text-align: left; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #c8c8c8; min-width: 70px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #25313e; font-size: 16px; line-height: 35px; }
.select .defaultShow:before { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px 6px 0 6px; border-color: #9b9b9b transparent transparent transparent; position: absolute; top: 50%; right: 8px; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.select > div { position: absolute; top: 100%; left: 0px; width: 100%; background: #FFF; z-index: 1; }
.select ul { min-height: 3em; overflow-y: scroll; overflow-x: hidden; border: 1px solid #d3d3d3; border-top: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.select ul li { cursor: pointer; text-align: left; padding: 4px 0 4px 11px; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s; }
.select ul li:hover { background: #898989; color: #FFF; }

/* Box Style */
span.iconName { display: inline-block; white-space: nowrap; visibility: hidden; background: #FFF; padding: 0 19px; position: absolute; top: -25px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); color: #000; font-size: 12px; line-height: 20px; }
span.iconName:after { width: 0; height: 0; border-style: solid; border-width: 8px 4px 0 4px; border-color: #ffffff transparent transparent transparent; position: absolute; bottom: -8px; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }

ul li:hover span.iconName { visibility: visible; }

.whiteBox { width: 100%; min-width: 705px; background: #fff; position: relative; -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 -4px 5px 0 rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 -4px 5px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), inset 0 -4px 5px 0 rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

/* Popout Style */
.popout { position: fixed; left: 0; right: 0; top: 50%; z-index: 999; margin: 0 auto; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.5); display: none; }
.popout .btn { text-align: center; }

.confirm { width: 360px; padding: 45px 17px 15px; }
.confirm .con { color: #262626; font-size: 18px; line-height: 1.5em; text-align: center; min-height: 75px; }

.loading-circle { position: relative; width: 100px; height: 100px; margin: 50px auto 0; }
.loading-circle .circle { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100px; height: 100px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgk8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTVjOWExIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZS1kYXNoYXJyYXk9IjEwNCwxNTYiIHN0cm9rZS1kYXNob2Zmc2V0PSItNTIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CgkJPGFuaW1hdGUgaWQ9ImFuaW0xIiBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGZvcm09IjAiIHRvPSI4IiBkdXI9IjAuNnMiIGJlZ2luPSIwczthbmltNS5lbmQiIGZpbGw9ImZyZWV6ZSIgLz4gCgkJPGFuaW1hdGUgaWQ9ImFuaW0yIiBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGZvcm09IjgiIHRvPSI0IiBkdXI9IjAuMThzIiBiZWdpbj0iYW5pbTEuZW5kIiBmaWxsPSJmcmVlemUiIC8+IAoJCTxhbmltYXRlIGlkPSJhbmltMyIgYXR0cmlidXRlTmFtZT0ic3Ryb2tlLXdpZHRoIiBmb3JtPSI0IiB0bz0iNiIgZHVyPSIwLjEycyIgYmVnaW49ImFuaW0yLmVuZCIgZmlsbD0iZnJlZXplIiAvPiAKCQk8YW5pbWF0ZSBpZD0iYW5pbTQiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgZm9ybT0iNiIgdG89IjYiIGR1cj0iMXMiIGJlZ2luPSJhbmltMy5lbmQiIGZpbGw9ImZyZWV6ZSIgLz4gCgkJPGFuaW1hdGUgaWQ9ImFuaW01IiBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGZvcm09IjYiIHRvPSIwIiBkdXI9IjFzIiBiZWdpbj0iYW5pbTQuZW5kKzVzIiBmaWxsPSJmcmVlemUiIC8+Cgk8L2NpcmNsZT4KPC9zdmc+") no-repeat; -moz-animation: circleRotate 1s linear infinite; -webkit-animation: circleRotate 1s linear infinite; animation: circleRotate 1s linear infinite; }

@-webkit-keyframes circleRotate { 0%,100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@-moz-keyframes circleRotate { 0%,100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@keyframes circleRotate { 0%,100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
@-webkit-keyframes stroke { 0% { stroke-width: 0; }
  10% { stroke-width: 8; }
  13% { stroke-width: 4; }
  15% { stroke-width: 6; }
  75% { stroke-width: 6; }
  90% { stroke-width: 0; }
  100% { stroke-width: 0; } }
@-moz-keyframes stroke { 0% { stroke-width: 0; }
  10% { stroke-width: 8; }
  13% { stroke-width: 4; }
  15% { stroke-width: 6; }
  75% { stroke-width: 6; }
  90% { stroke-width: 0; }
  100% { stroke-width: 0; } }
@keyframes stroke { 0% { stroke-width: 0; }
  10% { stroke-width: 8; }
  13% { stroke-width: 4; }
  15% { stroke-width: 6; }
  75% { stroke-width: 6; }
  90% { stroke-width: 0; }
  100% { stroke-width: 0; } }