/* $bgcolor-main_menu:rgba(62,62,68,0.57); //set color background tile menu $bordercolor-main_menu:rgba(93,93,93,0.94); // set color border tile menu $bordercolor-main_menu-before : rgba(93,93,93,0.94); //set triangle color*/ /*$bgcolor-res-title:$color-res-fullcalendar;*/ /*$color-res-title:$color-main-theme;*/ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.3.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } body { margin: 0px; overflow-y: scroll; overflow-x: hidden; } .header { display: block; } .container { width: 80% !important; } .container-90 { width: 90% !important; } .container-98 { width: 98% !important; } .top-bar { /*@include setBg($bgcolor-top-bar,$color-top-bar);*/ background-color: #2A2A2A !important; color: #FFFFFF !important; /*@include setBlock(); height: $height-top-bar; line-height: $line-height; top: 0px; min-height: 40px;*/ z-index: 500; } .navbar-default { background-color: inherit !important; } .navbar-default .navbar-nav > li:hover { background-color: #474747 !important; } .navbar-brand { font-size: 15px; } .top-tool { display: block; float: left; width: 100%; height: 100%; padding-left: 1%; } .top-user { display: block; float: left; font-size: 16px; padding-right: 20px; } .flag-left { display: block; float: left; width: 2%; font-size: 16px; padding-left: 2px; } .tools-left { display: block; float: left; width: 9%; font-size: 16px; color: #FFFFFF; padding-left: 6px; transition-property: background-color; transition-duration: 0.7s; text-align: center; } .tools { display: block; float: right; width: 7%; background-color: transperant; color: #FFFFFF; cursor: pointer; font-size: 16px; vertical-align: middle; text-align: center; height: 100%; text-decoration: none; transition-property: background-color; transition-duration: 0.7s; } [class^="tools"]:hover { background-color: #474747; } .flag-left img:hover { cursor: pointer; } .tools-text { padding-left: 5px; } .menu-bar { display: block; float: left; width: 100%; background-color: #212121; color: #FFFFFF; height: 70px; min-height: 70px; } .menu-logo { display: block; float: left; width: 35%; text-align: center; font-size: 20px; height: 100%; line-height: 70px; } .menu-logo img { padding-left: 70%; width: 135%; max-width: 135%; height: auto; } .menu-bar-list { display: block; float: left; width: 65%; line-height: 70px; height: 100%; padding-left: 5%; } .li { display: block; float: left; width: 12%; background-color: transperant; color: #FFFFFF; cursor: pointer; font-size: 14px; vertical-align: middle; text-align: center; height: 100%; text-decoration: none; transition-property: background-color; transition-duration: 0.7s; padding-top: 0px !important; } .li-menu { display: none; float: left; width: 200%; position: absolute; z-index: 200; max-width: 250px; padding: 0px; margin: 0px; font-size: 14px; text-align: left; list-style: none; background-color: #474747; line-height: 40px; } .li-sub-menu { display: block; float: left; width: 100%; background-color: transperant; color: #FFFFFF; cursor: pointer; font-size: 14px; vertical-align: middle; height: 100%; text-decoration: none; padding-left: 3%; } a { color: #FFFFFF; text-decoration: none; text-indent: none; outline: none; cursor: pointer; } a:hover { text-decoration: none; outline: none; } .li:hover { background-color: #474747; } .li-sub-menu:hover { background-color: #212121; } .fa-angle-down { padding-left: 3%; } .i-sub { float: right; padding-right: 5%; line-height: 40px; } .li-menu-sub { position: absolute; z-index: 200; display: none; left: 100%; margin-top: -40px; width: 100%; font-size: 14px; text-align: left; background-color: #555555; line-height: 40px; margin-left: 0 !important; } /* main-slide */ #main-slide { display: block; float: left; width: 100%; margin: 0px; padding: 0px; height: 15%; } .carousel-inner { height: 550px; } #main-slide .prev, #main-slide .next { background-color: rgba(83, 83, 83, 0.6); color: #FFFFFF; position: absolute; top: 60%; display: inline-block; margin-top: -25px; height: 40px; line-height: 40px; width: 40px; text-align: center; border-radius: 4px; z-index: 5; } #main-slide .prev { left: 10px; } #main-slide .next { right: 10px; } #main-slide .carousel .btn-slide { background-color: #0072C6; color: #FFFFFF; padding: 8px 20px; border-radius: 4px; margin-top: 25px; display: inline-block; } #main-slide .carousel .slider-img { text-align: right; position: absolute; } #main-slide .carousel .item { background-position: 50%; background-repeat: no-repeat; background-size: cover; left: 0 !important; opacity: 0; top: 0; display: block !important; width: 100%; height: 100%; position: absolute; /*-webkit-transition: opacity ease-in-out 6s; -moz-transition: opacity ease-in-out 6s; -o-transition: opacity ease-in-out 6s; transition: opacity ease-in-out 6s;*/ } #main-slide .carousel .item:first-child { top: auto; position: relative; } #main-slide .carousel .item.active { opacity: 1; -webkit-transition: opacity ease-in-out 1.3s; -moz-transition: opacity ease-in-out 1.3s; -o-transition: opacity ease-in-out 1.3s; transition: opacity ease-in-out 1.3s; z-index: 1; } #main-slide .carousel-indicators li { width: 20px; height: 20px; background-color: #FFFFFF; margin: 0 15px 0 0; position: relative; } #main-slide .carousel-indicators li:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background: #FFFFFF; border: 1px solid #FFF; left: -3px; top: -3px; } #main-slide .carousel-indicators .active { width: 20px; height: 20px; background-color: #0072C6; margin: 0 15px 0 0; border: 1px solid #0072C6; position: relative; } #main-slide .carousel-indicators .active:after { position: absolute; content: ""; width: 24px; height: 24px; border-radius: 100%; background-color: #0072C6; border: 1px solid #0072C6; left: -3px; top: -3px; } #main-slide .active .animation.animated-item-1 { -webkit-animation: fadeInUp 300ms linear 300ms both; -moz-animation: fadeInUp 300ms linear 300ms both; -o-animation: fadeInUp 300ms linear 300ms both; -ms-animation: fadeInUp 300ms linear 300ms both; animation: fadeInUp 300ms linear 300ms both; } #main-slide .active .animation.animated-item-2 { -webkit-animation: fadeInUp 300ms linear 600ms both; -moz-animation: fadeInUp 300ms linear 600ms both; -o-animation: fadeInUp 300ms linear 600ms both; -ms-animation: fadeInUp 300ms linear 600ms both; animation: fadeInUp 300ms linear 600ms both; } #main-slide .active .animation.animated-item-3 { -webkit-animation: fadeInUp 300ms linear 900ms both; -moz-animation: fadeInUp 300ms linear 900ms both; -o-animation: fadeInUp 300ms linear 900ms both; -ms-animation: fadeInUp 300ms linear 900ms both; animation: fadeInUp 300ms linear 900ms both; } #main-slide .active .animation.animated-item-4 { -webkit-animation: fadeInUp 300ms linear 1200ms both; -moz-animation: fadeInUp 300ms linear 1200ms both; -o-animation: fadeInUp 300ms linear 1200ms both; -ms-animation: fadeInUp 300ms linear 1200ms both; animation: fadeInUp 300ms linear 1200ms both; } .carousel-content h1, .carousel-content h2 { color: #FFFFFF; font-style: bold; } .slider-img .img-responsive { max-height: 550px; } /*Service*/ #Event { margin-bottom: 15px; } .table-responsive { width: 100% !important; } .service-item { display: block; float: left; width: 100%; background: #ECECEC; height: 25%; } .service-item-all { display: block; float: left; width: 100%; background: #FFFFFF; height: 25%; } .center { text-align: center; padding-bottom: 25px; padding-top: 15px; } .csc-content .center { padding-bottom: 15px; padding-top: 10px; } .csc-content .center .csc-block-head { font-size: 24px; } .row { margin-left: 0px; margin-right: 0px; } #Event .row { margin-bottom: 30px; } .media:first-child { margin-top: 0px; } .services-wrap { padding: 15px; background-color: #FFFFFF; border-radius: 4px; margin-bottom: 15px; height: 250px; max-height: 250px; } .services-wrap-all { background-color: #ECECEC !important; } .services-wrap:hover { border: 1px solid #D2D2D2; } .services-wrap h3 { text-align: center; font-size: 20px; margin: 10px 0px; } .datest-detail { font-size: 16px; } .dateed-detail { font-size: 16px; } .detail { padding-top: 15px; font-size: 16px; text-indent: 15px; } .read-news { display: block; } /* news*/ .news { display: block; float: left; width: 100%; margin-bottom: 50px; height: 25%; background: #FFFFFF; } .news-wrap { position: block; width: 100%; height: 100%; } .news-wrap img { width: 100%; height: 270px; } .news .col-md-3 { padding-left: 0px !important; padding-right: 0px !important; } .overlay { background-color: #0072C6; color: #FFFFFF; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; border-radius: 0px; vertical-align: middle; padding: 30px; transition: opacity 700ms; } .overlay:hover { opacity: 1; } .news-wrap h3 { text-align: center; font-size: 20px; margin: 10px 0px; } .news-wrap .detail { padding-top: 0px; } /* feature */ .feature { display: block; float: left; width: 100%; background: #ECECEC; height: 25%; position: static; } .features { padding: 0px; } .feature-wrap { margin-bottom: 35px; overflow: hidden; } .feature-wrap i { background-color: #FFFFFF; color: #0072C6; font-size: 44px; height: 110px; width: 110px; margin: 3px 25px 3px 3px; border-radius: 100%; line-height: 110px; text-align: center; border: 3px solid #FFFFFF; float: left; box-shadow: 0px 0px 0px 5px #F2F2F2 inset; transition: all 450ms ease 0s; z-index: 1; } .feature-wrap i:hover { background-color: #0072C6; color: #FFFFFF; box-shadow: 0px 0px 0px 5px #0072C6 inset; border: 3px solid #0072C6; } .feature-head { font-size: 20px; margin-top: 50px; } /* all-menu*/ .all-menu { display: block; float: left; width: 100%; background: #FFFFFF; height: 25%; } .features a { color: #4D4D4D; cursor: pointer; } #top-button { display: block; float: left; width: 50px; position: fixed; background: rgba(83, 83, 83, 0.6); color: white; height: 50px; right: 2%; border-radius: 7px; font-size: 35px; text-align: center; bottom: 10%; outline: none; text-indent: none; z-index: 300; } #bottom-button { display: block; float: left; width: 50px; position: fixed; background: rgba(83, 83, 83, 0.6); color: white; height: 50px; right: 2%; border-radius: 7px; font-size: 35px; text-align: center; bottom: 10%; outline: none; text-indent: none; z-index: 300; } .icon-res { display: block; float: left; width: 50px; position: fixed; background: rgba(83, 83, 83, 0.6); color: white !important; height: 50px; left: 2%; bottom: 10%; border-radius: 7px; font-size: 35px; text-align: center; outline: none; text-indent: none; z-index: 300; } #bottom-button .top-word { font-size: 14px; color: #B2B2B2; text-align: center; width: 150%; margin-left: -11px; } #top-button .top-word { font-size: 14px; color: #B2B2B2; text-align: center; width: 150%; margin-left: -11px; } .emp { display: block; float: left; width: 100%; background: #FFFFFF; } .emp .row { margin-left: -15px; margin-right: -15px; } .clients-comments { background-position: center 118px; background-repeat: no-repeat; margin-bottom: 110px; background-image: url("../IMAGES/EMPVIEW_INDEX/image_bg.png"); } .clients-comments img { background: #DDD none repeat scroll 0% 0%; border: 1px solid #DDD; height: 182px; width: 182px; padding: 3px; transition: all 0.2s ease 0s; } .clients-comments img:hover { background: #B1B1B1 none repeat scroll 0% 0%; border: 1px solid #B1B1B1; } .clients-comments h3 { margin-top: 50px; font-size: 20px; } /* service-with-media */ .service-with-media { display: block; float: left; width: 100%; background: #ECECEC; height: 25%; } .emp-detail { padding-top: 2px; } .clients-comments .detail { text-align: left; text-indent: 0px; margin-bottom: 0px; padding-top: 1px; } /* Awarding */ #Awarding { background: #FFFFFF; } #Awarding .services-wrap { background: #ECECEC; } #Awarding .img-resize { float: left; width: 40%; height: 90%; overflow: hidden; } #Awarding .img-responsive { height: 100%; } #Awarding .pull-left { width: 100%; height: 100%; } #Awarding .detail { text-indent: 0px; margin-bottom: 0px; padding-top: 2px; } #Awarding .media-body { padding-left: 10px; } #Anniversary { background: #FFFFFF; } #Anniversary .img-resize { float: left; width: 30%; height: 90%; overflow: hidden; } #Anniversary .pull-left { width: 100%; height: 90%; } #Anniversary .img-responsive { height: 100%; } #Anniversary .detail { text-indent: 0px; margin-bottom: 0px; padding-top: 2px; } #Anniversary .services-wrap { background: #ECECEC; border-radius: 5px; } #Anniversary .media-body { padding-left: 10px; } #Birthday { background: #FFFFFF; } #Birthday .services-wrap { background: #ECECEC; border-radius: 5px; } #Birthday h3 { margin: 0px; margin-top: 0px; margin-bottom: 5px; text-align: left; font-size: 18px; } #today { margin-bottom: 70px; } #Birthday .img-resize { float: left; width: 30%; height: 90%; overflow: hidden; } #Birthday .pull-left { width: 100%; height: 90%; } #Birthday .img-responsive { margin-top: 10px; height: 100%; } #Birthday .detail { text-indent: 0px; margin-bottom: 0px; padding-top: 4px; } #Birthday .media-body { padding-left: 10px; } .services-wrap-disabled { opacity: 0.6; padding: 15px; background-color: #ECECEC; border-radius: 4px; margin-bottom: 15px; height: 200px; max-height: 200px; } #wrapper { display: block; float: left; width: 100%; height: auto; border-right: 0px; border-left: 0px; } .view-more { color: #4D4D4D; text-align: right; padding-right: 200px; font-size: 18px; text-decoration: underline; text-indent: none; outline: none; } .view-more:focus { outline: none; } .read-news { display: block; width: 100%; height: 75%; } /* .read-news a{ color: #8D8D8D; } */ .img-topic { top: 15%; } .publish-by, .publish-date { text-align: right; } .a-event, .a-event:hover { color: #4D4D4D; } .read-event { display: block; width: 100%; height: 70%; } .date-event { font-size: 16px; padding-left: 38%; } .center-detail { text-align: center; padding-top: 30px; padding-bottom: 20px; } .service-item-all .services-wrap { max-height: 1000px; height: auto; } .desspan { font-size: 26px; color: #FFF; display: block; width: 100%; float: left; height: 350px; } .back-news { text-align: center; background-color: #0072C6; width: 100px; height: 50px; border-radius: 4px; margin-bottom: 30px; line-height: 50px; } .back-news i { font-size: 16px; color: #FFFFFF; } #triangle-up { width: 20px; height: 20px; left: 10%; top: -10px; border-style: solid; border-width: 15px; } #block-menu { position: absolute; display: none; width: 280%; z-index: 200; } /* #main_menu{ position: absolute; display: block; background-color: $bgcolor-main_menu; top: 10px !important; left: -255%; z-index : 200; width: 300%; height: inherit !important; min-height: 0px !important; border: 2px solid $bordercolor-main_menu; } .tile-area{ top: 0% !important; z-index : 200; } .tile-group{ margin-left:5%; margin-right:6%; margin-bottom: 40px !important; padding-top:40px !important; z-index : 200; } #main_menu:before { position: absolute; content:""; width: 0; height: 0; border-style: solid; left: 90%; top: -20px; border-width: 10px; border-color: transparent transparent $bordercolor-main_menu-before transparent; z-index: 1; }*/ .bg-com { /*background:$bg-company;*/ background: #f0f0f0; position: fixed; display: block; float: left; width: 100%; height: 100%; z-index: -1; top: 0; } section { display: block; float: left; width: 100%; height: inherit; min-height: 610px; } section.pm { min-height: 310px !important; } .detail-table { font-size: 14px; margin-bottom: 10px; color: #4D4D4D; font-weight: bold; } .detail-table select { color: #4D4D4D; } .table { width: 100%; max-width: inherit; border-spacing: 0px; font-size: 14px; } .table a { color: #4D4D4D; text-decoration: underline !important; } .table thead { width: 100%; } .table-head th { background-color: #4B95E6; color: #FFFFFF; padding: 8px; font-size: 13px; text-align: center; } .table-left th { background-color: #4B95E6; color: #FFFFFF; padding: 8px; text-align: left; } .table-hover:hover { background-color: #E3E3E3; color: #4D4D4D; } .table tr { background-color: #FFFFFF; color: #4D4D4D; font-size: 13px; } .table th, td { vertical-align: middle !important; } .table-fixed th { width: 20%; } .table-fixed td { width: 20%; } .table-fixed-small th { width: 15%; max-width: 15%; } .table-title-left .table-title { text-align: left; padding: 8px; } .table-content-center td { text-align: center; } .table-bordered th, .table-bordered td { border: 1px solid #DDD; } .table-double-width { width: 40%; } .table-double-width-md { width: 30%; } .table-double-width-sm { width: 25%; } .table-double-width-xs { width: 20%; } .table-small-width { width: 10% !important; } td.result, td.result-right { background-color: #88C3FF; color: #FFFFFF; font-weight: bold; } td.result-right { text-align: right; } td.head { background: #DEDEDE; } td .list { padding: 5px; padding-left: 20px; } .csc-block { display: block; float: left; width: 100%; height: inherit; border: 2px solid rgba(84, 163, 255, 0.85); background: rgba(84, 163, 255, 0.85); margin-bottom: 20px; } .csc-block-white-crystal { display: block; float: left; width: 100%; height: inherit; border: 1px solid rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.87); margin-bottom: 30px; } .csc-block-white { display: block; float: left; width: 100%; height: inherit; background: #FFFFFF; margin-bottom: 30px; } .csc-block-center-window { top: 250px !important; } .csc-block-head { color: #FFFFFF; } .csc-content { margin-top: 20px; } .control-label { font-size: 14px; color: #FFFFFF; padding-left: 5px; padding-top: 6px !important; text-align: left !important; font-weight: normal; } .csc-block-white-crystal .control-label { font-size: 14px; color: #4D4D4D; padding-left: 5px; text-align: left; } .csc-block-white-crystal .radio-inline { color: #4D4D4D; } .csc-block-white-crystal .control-label a { font-size: 14px; color: #4D4D4D; padding-left: 5px; text-decoration: underline !important; } .legend-control { color: #0072C6; font-size: 21px; padding-left: 5px; font-weight: bold; } .control-label-form { font-size: 14px; color: #4D4D4D; padding-left: 5px; } .ol-cscblock { padding-top: 10px; padding-left: 5%; } .ol-cscblock li { padding-top: 5px; font-size: 16px; color: #FFFFFF; } .label-list { text-align: left; } .label-list a { text-align: left; color: #4D4D4D; } .label-list a:hover { text-align: left; color: #4D4D4D; } .csc-link { color: #FFFFFF !important; } .csc-link:hover { color: #FFFFFF !important; } .csc-tab { display: block; float: left; width: 100%; } .csc-tab-head { display: block; float: left; width: 100%; height: 70px; text-align: center; line-height: 70px; } .csc-list-head { display: block; float: left; width: 20%; background-color: #0072C6; color: #FFFFFF; height: 100%; border: 1px solid #FFFFFF; font-size: 16px; cursor: pointer; } .tab-active { background: #FFFFFF !important; border-top: 5px solid #212121; border-left: 0px solid #9f9f9f; border-right: 0px solid #9f9f9f; border-bottom: 0px solid #9f9f9f; color: #4D4D4D; } .csc-tab-body { display: none; float: left; width: 100%; height: 80%; background: #FFF; padding-top: 50px; padding-left: 20px; padding-right: 20px; font-size: 16px; } .body-active { display: block; } .label-right { float: right; } .form-control { display: inline-block !important; border-radius: 2px !important; height: 28px !important; font-size: 12px; } input[type="radio"] { margin: 4px 4px 0px; } input[type="checkbox"] { margin: 0px 4px 0px !important; } .input-group-addon { font-size: 12px; border-radius: 2px !important; } .radio-inline { color: #FFFFFF; } .btn-primary { background-color: #0035D2 !important; border-radius: 2px !important; width: 130px; } .icon-form { font-size: 25px; color: #0072C6; } .icon-form:hover { color: #4D4D4D !important; cursor: pointer; } .changepage-icon { color: #4D4D4D; font-size: 18px; } .changepage-icon:hover { color: #000000 !important; cursor: pointer; } .vdo-content { display: block; float: left; width: 18%; height: 100%; margin-right: 1%; margin-left: 1%; cursor: pointer; } .footer { display: block; float: left; width: 100%; background: #212121; height: 230px; margin-top: 20px; } .footer-content { margin-top: 30px; } .footer-content-product { display: block; float: left; width: 30%; height: 100%; } .footer-content-contactus { display: block; float: left; width: 25%; height: 100%; margin-left: 4%; } .footer-content-contactdetail { display: block; float: right; width: 20%; height: 100%; } .footer-head { font-size: 16px; font-weight: bold; color: #FFFFFF; } .footer-body { font-size: 14px; padding-top: 10px; color: #FFFFFF; } .footer-icon { font-size: 8px !important; color: #FFFFFF; } .col-md-1s { width: 5%; } .ui-widget-content { border: 1px solid #aaa; background: #FFFFFF; text-align: center; } .ui-datepicker { display: none; width: 18em; padding: 0.3em 0.9em 0px; z-index: 50 !important; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.3em 0px; } .ui-widget-header { font-weight: bold; } .ui-datepicker .ui-datepicker-prev { position: absolute; top: 2px; left: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; right: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev i, .ui-datepicker .ui-datepicker-next i { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker i { font-size: 22px; color: #000; cursor: pointer; } .ui-datepicker .ui-datepicker-title { margin: 0px 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0px 1px 1em; } .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: bold; border: 0px none; } .ui-datepicker td { border: 0px none; } .ui-state-default { color: #000; } .ui-state-disabled span { text-align: center; color: #FF0000; } .form-control-50 { width: 60% !important; } .fa-large { font-size: 25px; padding-right: 15px; } .show-content a { color: #4D4D4D !important; } .list-event { display: block; float: left; width: 20%; min-height: 700px; height: inherit; } .list-status { margin-top: 10px; margin-left: 32px; } .status-default { background-color: #007ec3; color: #007ec3; width: 10px; height: 10px; margin-right: 5px; } .status-wait { background-color: #FF9B2B; color: #FF9B2B; width: 10px; height: 10px; margin-right: 5px; } .status-approve { background-color: #038600; color: #038600; width: 10px; height: 10px; margin-right: 5px; } .status-notapprove { background-color: #FF4F41; color: #FF4F41; width: 10px; height: 10px; margin-right: 5px; } .status-timeover { background-color: #6E6565; color: #6E6565; width: 10px; height: 10px; margin-right: 5px; } .status-comingsoon { background-color: #710067; color: #710067; width: 10px; height: 10px; margin-right: 5px; } .present { color: #fff !important; background-color: #9ad9fc !important; } .dayoff { color: #fff !important; background-color: #fe9890 !important; } .annual-holiday { color: #fff !important; background-color: #66ff63 !important; } .highlight-present { background-color: #9ad9fc; color: #9ad9fc; width: 12px; height: 17px; margin-right: 5px; position: absolute; } .highlight-dayoff { background-color: #fe9890; color: #fe9890; width: 12px; height: 17px; margin-right: 5px; position: absolute; } .highlight-holiday { background-color: #66ff63; color: #66ff63; width: 12px; height: 17px; margin-right: 5px; position: absolute; } .list-block-event { height: 100%; width: 100%; border: 2px solid #8C8C8C; margin-left: 30px; margin-top: 100px; margin-bottom: 25px; } .full-calendar { display: block; float: left; width: 80%; padding-top: 3%; padding-bottom: 5%; padding-right: 5%; padding-left: 5%; } .title-list-event { padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: 18px; } .body-event { padding-left: 10%; padding-top: 10px; } .listof-body-event { padding-left: 20px; padding-top: 5px; } .default-list { color: #007ec3; } .default-list a { color: #007ec3; } .wait-list { color: #FF9B2B; } .wait-list a { color: #FF9B2B; } .approve-list { color: #038600; } .approve-list a { color: #038600; } .notapprove-list { color: #FF4F41; } .notapprove-list a { color: #FF4F41; } .timeover-list { color: #6E6565; } .timeover-list a { color: #6E6565; } .comingsoon-list { color: #710067; } .comingsoon-list a { color: #710067; } .week { color: #FF4F41; } .week a { color: #FF4F41; } .week a:hover { color: #FF4F41; } .holiday { color: #038600; } .holiday a { color: #038600; } .holiday a:hover { color: #038600; } .absent { color: #007ec3; } .absent a { color: #007ec3; } .absent a:hover { color: #007ec3; } .class-title { background-color: #007ec3; color: #FFFFFF; width: 90%; margin-left: 5%; padding-left: 10px; } .class-list { margin-bottom: 20px; color: #007ec3; } .fc-event { font-size: 15px; } .default-ev-list { background-color: #007ec3; color: #FFFFFF; border-color: #007ec3; } .wait-ev-list { background-color: #FF9B2B; color: #FFFFFF; border-color: #FF9B2B; } .approve-ev-list { background-color: #038600; color: #FFFFFF; border-color: #038600; } .notapprove-ev-list { background-color: #FF4F41; color: #FFFFFF; border-color: #FF4F41; } .timeover-ev-list { background-color: #6E6565; color: #FFFFFF; border-color: #6E6565; } .comingsoon-ev-list { background-color: #710067; color: #FFFFFF; border-color: #710067; } label { cursor: default; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 10px; padding-right: 10px; } .pm-list { display: block; float: left; width: 100%; overflow: hidden; } .pm-label { color: #4D4D4D; font-size: 14px; } .pm-list-head { margin-bottom: 25px; margin-top: 20px; font-size: 20px; font-style: bold; } .pm-inbox:before { font-family: 'FontAwesome'; content: "\f003"; font-size: 16px; padding-right: 10px; } .pm-sendbox:before { font-family: 'FontAwesome'; content: "\f1fa"; font-size: 16px; padding-right: 10px; } .pm-list-title { display: block; float: left; width: 100%; font-size: 14px; padding-left: 15px; padding-bottom: 10px; color: #969696; } .pm-list-menu { display: block; float: left; width: 100%; height: 50px; font-size: 16px; line-height: 50px; padding-left: 20px; margin-bottom: 3px; color: #4D4D4D; } a.pm-list-menu { color: #4D4D4D; } .pm-list-menu-active { background: #0081FF !important; color: #FFFFFF; border-radius: 4px; } a.pm-list-menu-active { color: #FFFFFF; } .pm-list-menu:hover { background: #d4d4d4; cursor: pointer; border-radius: 4px; } .no-button { background: #FFFFFF; border: 0px; transition: background 0.7s, color 0.5s; } .no-button:hover { background: #0081FF; color: #FFFFFF; border-radius: 4px; } .sender { padding-left: 35px; font-size: 14px; color: #4D4D4D; } .sender-formes { font-size: 14px; color: #4D4D4D; } .private-rowtools { margin-top: 30px; } .private-tools { display: block; float: left; width: 100%; padding-left: 25px; } .label-checkAll { /*padding-left:35px;*/ padding-right: 5px; padding-left: 5px; } .backdis { background-color: #D2CBCB; } .iconpadding { padding-right: 5px; } .subject { font-size: 14px; color: #4D4D4D; } .time { float: right; color: #909090; } .pm-message-list { margin-top: 10px; height: 700px; overflow-y: auto; } .private-list:hover { background: #F2F3F3; border-radius: 2px; } .private-list-active { background: #F2F3F3; border-radius: 2px; } .cscframe { border: 0px; width: 100%; min-height: 750px; max-height: 1000px; opacity: 1; } body.nooverflow { overflow-y: hidden !important; } .message-block { display: block; float: left; width: 100%; } .message-header, .reply-header, .reply-to, .reply-subject, .reply-body { display: block; float: left; width: 100%; padding-bottom: 25px; border-bottom: 1px solid #DDD; height: 10%; } .message-header-left { display: block; float: left; width: 70%; } .message-header-right { display: block; float: left; width: 30%; margin-top: 25px; } .message-tools { display: block; float: right; width: 100%; font-size: 20px; color: #4D4D4D; padding-left: 5px; text-align: right; } .message-time { display: block; float: right; width: 100%; text-align: right; color: #929292; } .message-tools i { padding-left: 15px; padding-right: 15px; margin-top: -10px; height: 40px; line-height: 40px; transition: background 0.7s, color 0.5s,border-radius 0.5s; border-radius: 40px; } .message-tools a { color: #4D4D4D; } .message-tools i:hover { background: #0081FF; color: #FFFFFF; border-radius: 4px; } .message-header h1, .reply-header h1, .reply-to h1, .reply-subject h1, .reply-body h1 { font-size: 40px; color: #4D4D4D; } .message-body-detail { display: block; float: left; width: 100%; margin-bottom: 15px; padding-left: 5px; padding-top: 10px; padding-bottom: 10px; } .message-body-gray { background: #F2F3F3; } .reply-header, .reply-to, .reply-subject, .reply-body { border-bottom: 0px; } .reply-body { display: block; float: left; width: 100%; } .form-reply { border: 0px; border-bottom: 1px solid #DDD; box-shadow: 0px 0px 0px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s,border-width 0.15s ease-in-out 0s; font-size: 14px !important; } .form-reply.form-control:focus { border-color: #0081FF; border-width: 2px; -webkit-box-shadow: 0px 0px 0px; box-shadow: 1px 0px 0px #0081FF; } .message-body { display: block; float: left; width: 100%; padding-top: 20px; padding-bottom: 20px; overflow-y: auto; height: 600px; } .private-list { display: block; float: left; width: 100%; padding-top: 20px; padding-bottom: 20px; padding-right: 20px; padding-left: 15px; border-bottom: 1px solid #DDD; max-height: 175px; } .blankspacebot { height: 20%; width: 100%; position: relative; } .checkbox-privatelist { position: absolute; } .private-unread.private-list::before { font-family: 'FontAwesome'; content: "\f02b"; font-size: 16px; margin-left: -10px; padding-right: 5px; color: #727272; } .private-title { padding-left: 35px; font-size: 18px; font-weight: bold; padding-top: 4px; color: #4D4D4D; } .private-detail { padding-left: 35px; padding-top: 4px; color: #727272; } .btn-compose { text-align: left !important; border-radius: 4px; height: 30px; line-height: 15px; background: #0081FF; color: #FFFFFF !important; padding-left: 10px; padding-right: 10px; } a.btn-compose:hover { color: #FFFFFF; } .btn-compose-hover { background: #0072C6; animation-name: changeBg; animation-duration: 1s; } .btn-compose-unhover { animation-name: composeBg; animation-duration: 1s; } @keyframes changeBg { from { background-color: #0081FF; } to { background-color: #0072C6; } } @keyframes composeBg { from { background-color: #0072C6; } to { background-color: #0081FF; } } .pm-detail { display: block; float: right; width: 60%; height: 100%; } .pm-mail { display: block; float: right; width: 25%; height: 100%; } .pm-detail table { margin-top: 75px; margin-left: 1%; width: 98%; } .table-head-pm .th-pm { background: #0081FF !important; color: #FFF; } .table-pm td { border-top: 0px solid #DDD !important; border-bottom: 1px solid #DDD; } .td-bold { font-weight: bold; } .detail-table-pm { margin-left: 1%; } .changepage-pm { float: right; margin-right: 1%; } .trash, .trash-inline a { text-align: right; } .trash-inline a { color: #FFF; font-style: bold; float: right; } .trash-inline-hover a { color: #ADADAD; } #listpage { min-width: 50px; } .form-group { margin-bottom: 10px; } .highlight { background: rgba(51, 255, 140, 0.7); color: #000; padding-left: 10px; padding-right: 10px; } .fc-year-month-header { background: #A1A1A1; color: #FFFFFF; } .fc-widget-header { background: #A1A1A1; color: #FFFFFF; } .tab { display: block; float: left; width: 100%; height: inherit; } .tab-left { display: block; float: left; width: 20%; } .tab-body { display: none; float: left; width: 80%; border: 1px solid #DDD; height: 600px; } .child-tab { display: block; float: left; width: 100%; text-align: center; font-size: 16px; cursor: pointer; border: 1px solid #D1CACA; background-color: #FFFFFF; color: #000000; } .child-tab.active { background-color: #0072C6; color: #FFFFFF; display: block !important; } .tab-body.active { background-color: #FFFFFF; color: #4D4D4D; display: block !important; } .tab-detail { padding-left: 50px; padding-right: 50px; padding-top: 20px; } .tab-data { font-size: 16px; margin-bottom: 10px; } .tab-form { border-radius: 5px; padding-bottom: 20px !important; } .label-manual input[type="radio"] { margin: 0px; margin-right: 4px; margin-left: 4px; } .tab-detail label { color: #4D4D4D; } .tab-note { margin-top: 50px; } .csc-list { padding-left: 20px; } .csc-sub-list { padding-left: 40px; } label { font-weight: normal !important; } .fixed-scroll { overflow: hidden; } .linkicon { cursor: pointer; padding-right: 15px; } @media screen and (max-width: 1490px) { .tools { width: 7%; font-size: 14px; } .flag-left { width: 3%; } .li { font-size: 14px !important; width: 13% !important; } .li-menu { max-width: 200px !important; font-size: 12 !important; } .li-sub-menu { font-size: 12px !important; } .news-wrap h3 { font-size: 16px !important; margin: 3px 0px !important; } .detail { font-size: 14px !important; } .datest-detail { font-size: 14px !important; } .dateed-detail { font-size: 14px !important; } .tools-left { width: 9% !important; } #Birthday h3 { font-size: 16px !important; } #Birthday .detail { font-size: 14px !important; } #block-menu { width: 260% !important; } #triangle-up { left: 8% !important; } .tile-group { margin-left: 6% !important; margin-right: 7% !important; } .tile-area { padding-left: 0px !important; } .tile-large .tile-label, .tile .tile-label, .tile-super .tile-label { top: 65% !important; } .tile-label-wide-normal { top: 35% !important; } .tile-wide .tile-label { top: 35%; } #main_menu { width: 350% !important; left: -300% !important; } .container { width: 90% !important; } .table { font-size: 12px !important; } .control-label { font-size: 12px !important; } .section { min-height: 620px; } .footer { height: 205px !important; } .footer-content { margin-top: 20px; } section.pm { min-height: 210px !important; } .pm-list { height: 82% !important; } } @media screen and (max-width: 1366px) { .tools { width: 11% !important; font-size: 14px !important; } .tools-left { width: 15% !important; } .flag-left { width: 5% !important; } .li { font-size: 14px !important; width: 13% !important; } .li-menu { max-width: 200px !important; font-size: 12px !important; } .li-sub-menu { font-size: 12px !important; } #Birthday h3 { font-size: 16px !important; } #Birthday .detail { font-size: 14px !important; } .news-wrap h3 { font-size: 16px !important; margin: 3px 0px !important; } .detail { font-size: 13px !important; } #main_menu { left: -260% !important; width: 310% !important; } .section { min-height: 580px; } .footer { height: 180px !important; } .footer-body { font-size: 12px !important; padding-top: 8px !important; } .footer-content { margin-top: 20px !important; } .csc-block { margin-bottom: 15px !important; } .form-control { height: 27px !important; font-size: 13px !important; padding: 2px 8px !important; } .input-group-addon { font-size: 12px !important; padding: 2px 9px !important; } .center { padding-top: 15px; padding-bottom: 20px; } .csc-content .center { padding-top: 5px !important; padding-bottom: 5px !important; } .csc-content .center .csc-block-head { font-size: 20px !important; } .csc-block-head { font-size: 18px !important; } .control-label { padding-top: 5px !important; font-size: 13px !important; font-wieght: normal; } .form-group { margin-bottom: 8px !important; } .detail-table { margin-bottom: 5px !important; } .table-head th { font-size: 13px !important; padding: 5px !important; } tr { padding: 5px !important; font-size: 12px; } .fc-year-view .fc-row.fc-last .fc-bg table { border-bottom: 3px solid #DDD; } .container-98 { width: 99% !important; } section.pm { min-height: 210px !important; } .pm-list { height: 82% !important; } .sender { font-size: 14px !important; } .time, .private-detail { font-size: 11px !important; } .private-title { font-size: 15px !important; } .message-header h1, .reply-header h1, .reply-to h1, .reply-subject h1, .reply-body h1 { font-size: 24px !important; } .message-tools { font-size: 14px !important; } .btn-compose { height: 35px !important; line-height: 20px !important; } .pm-list-menu { font-size: 12px !important; height: 40px; line-height: 40px; } .pm-inbox:before { font-size: 12px !important; } .form-reply { font-size: 14px !important; } } @media screen and (max-width: 1100px) { .icon-res, #bottom-button, #top-button { bottom: 4% !important; } section { min-height: 650px !important; } .services-wrap { height: 220px; max-height: 220px; } .footer-content-contactus { width: 33% !important; } .footer-content-contactdetail { width: 26% !important; } .title-list-event { font-size: 11px !important; } .class-title { font-size: 11px !important; } .class-list { font-size: 10px !important; } .fc-event { font-size: 12px !important; } h3.center-detail { font-size: 16px !important; } .fc-center h2 { font-size: 20px !important; } .view-more { padding-right: 11% !important; font-size: 16px !important; } .csc-list-head { font-size: 12px !important; } .fa-large { font-size: 20px !important; padding-right: 3px !important; } .table-title-mini { min-width: 300px !important; } #main-slide .prev, #main-slide .next { top: 55% !important; } .menu-bar-list { padding-left: 5% !important; } .li { font-size: 12px !important; width: 16% !important; } .menu-logo { font-size: 20px !important; } .navbar-default { font-size: 13px !important; } .pm-message-list { height: 500px; } } @media screen and (min-width: 868px) { .icon-res { display: none !important; } } @media screen and (max-width: 867px) { .menu-bar-active { background-color: #212121; color: #FFFFFF; display: block !important; position: absolute !important; width: 100% !important; height: 100% !important; min-height: 1000px !important; z-index: 50 !important; overflow-y: auto !important; } .menu-bar-list { width: 100% !important; line-height: 50px !important; padding-left: 0% !important; } .menu-logo { width: 100% !important; height: 100% !important; text-align: center !important; line-height: 100px !important; top: 3% !important; height: 10% !important; margin-bottom: 7% !important; } .li { font-size: 14px !important; width: 100% !important; height: 5% !important; padding-left: 20% !important; text-align: left !important; } .menu-logo .menu-bar-list { width: 100% !important; padding-left: 0% !important; line-height: 50px !important; } .menu-bar { display: none !important; } #main-slide .prev, #main-slide .next { display: none !important; } .news-wrap img { height: 200px !important; } .news-work-inner h3 { font-size: 12px !important; } .detail { font-size: 10px !important; } .footer { height: 415px !important; } .footer-content-product { width: 100% !important; margin-bottom: 5% !important; } .footer-content-contactus { width: 100% !important; margin-bottom: 5% !important; margin-left: 0% !important; } .footer-content-contactdetail { width: 100% !important; } .footer-head { font-size: 14px !important; text-align: center !important; } .footer-body { font-size: 12px !important; margin-left: 17% !important; } .form-control { padding: 1px 5px !important; font-size: 6px !important; } .control-label { font-size: 9px !important; } .detail-table { font-size: 10px !important; } .csc-content .center .csc-block-head, .csc-content .center h2 { font-size: 14px !important; } .table-head th { font-size: 9px !important; } .btn { font-size: 12px !important; width: 100px !important; margin: 2px !important; } .csc-list-head span, .csc-list-head label { display: none !important; } label { margin-bottom: 0px !important; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { padding-bottom: 2px !important; padding-right: 0px !important; margin-right: 0px !important; } .pm-message-list { height: auto; } } /*# sourceMappingURL=EMPVIEW_LAYOUT.css.map */