1794 lines
52 KiB
CSS
1794 lines
52 KiB
CSS
@charset "utf-8";
|
|
|
|
/* ----------------------------------
|
|
|
|
Name: style.css
|
|
Categorie : 디자인, 스타일 정의 (공통)
|
|
Author : 이상혁
|
|
Version : v.1.0
|
|
Created : 2020-03-02
|
|
Last update : 2020-03-02
|
|
|
|
-------------------------------------
|
|
|
|
Table of contents
|
|
|
|
01. Font
|
|
02. Custom
|
|
03. Typography
|
|
04. color
|
|
05. Button
|
|
06. Background image
|
|
07. Important
|
|
08. Magnific popup
|
|
09. Header
|
|
10. Sidebar
|
|
11. Elements
|
|
12. Footer
|
|
13. Animation
|
|
14. table
|
|
15. Others
|
|
// 2023-10-19 LHJ 공지사항 팝업창
|
|
16. Popup notice
|
|
|
|
*/
|
|
|
|
/* ===================================
|
|
01. Font
|
|
====================================== */
|
|
|
|
@font-face {
|
|
font-family: NanumSquare;
|
|
src: url('../fonts/NanumSquare.eot');
|
|
}
|
|
@font-face {
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-family: 'NanumSquare';
|
|
src: url('../fonts/NanumSquare.eot?#iefix') format('embedded-opentype');
|
|
src: local(" "), url("../fonts/NanumSquare.woff") format("woff"), url("../fonts/NanumSquare.ttf") format("truetype");
|
|
}
|
|
|
|
/* ===================================
|
|
02. Custom
|
|
====================================== */
|
|
|
|
body {
|
|
font-family: NanumSquare, dotum, Arial, Helvetica, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-smoothing: antialiased;
|
|
font-size:16px;
|
|
color:#000;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
}
|
|
body, html {
|
|
height: 100%;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
a,
|
|
a:active,
|
|
a:focus {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
a:hover,
|
|
a:active {
|
|
color: #3378c1;
|
|
text-decoration: none;
|
|
}
|
|
a:focus,
|
|
a:active,
|
|
button:focus,
|
|
button:active,
|
|
.btn.active.focus,
|
|
.btn.active:focus,
|
|
.btn.focus,
|
|
.btn:active.focus,
|
|
.btn:active:focus,
|
|
.btn:focus {
|
|
/* outline: none;
|
|
border: 2px solid #000;
|
|
border-style: dotted; */
|
|
/* outline: auto;
|
|
outline-style: dotted;
|
|
outline-width: 2px; */
|
|
}
|
|
img {
|
|
max-width:100%;
|
|
height:auto;
|
|
}
|
|
video {
|
|
background-size: cover;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
}
|
|
input, textarea, select {
|
|
border: 1px solid #d1d1d1;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
padding: 6px 14px;
|
|
width: 100%;
|
|
margin: 0 0 20px 0;
|
|
max-width: 100%;
|
|
resize: none;
|
|
}
|
|
input, select {
|
|
height: 34px;
|
|
}
|
|
input[type="submit"] {
|
|
width: auto;
|
|
}
|
|
input[type="button"],
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="search"],
|
|
input[type="password"],
|
|
input[type="submit"],
|
|
textarea {
|
|
-webkit-appearance: none;
|
|
outline: none;
|
|
}
|
|
input:focus,
|
|
textarea:focus {
|
|
border-color: #585858;
|
|
outline: none;
|
|
}
|
|
input[type="button"]:focus {
|
|
outline: none;
|
|
}
|
|
input:disabled {
|
|
background-color: #ededed;
|
|
}
|
|
iframe {
|
|
border: 0;
|
|
}
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
b, strong {
|
|
font-weight: 600;
|
|
}
|
|
.last-paragraph-no-margin p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.alt-font strong {
|
|
font-weight: 600;
|
|
}
|
|
ul, ol, dl {
|
|
list-style-position: outside;
|
|
list-style-type: none;
|
|
padding:0px;
|
|
margin: 0px;
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
* {
|
|
transition-timing-function: ease-in-out;
|
|
-ms-transition-timing-function: ease-in-out;
|
|
-moz-transition-timing-function: ease-in-out;
|
|
-webkit-transition-timing-function: ease-in-out;
|
|
-o-transition-timing-function: ease-in-out;
|
|
transition-duration: .2s;
|
|
-ms-transition-duration: .2s;
|
|
-moz-transition-duration: .2s;
|
|
-webkit-transition-duration: .2s;
|
|
-o-transition-duration: .2s;
|
|
}
|
|
*:hover {
|
|
transition-timing-function: ease-in-out;
|
|
-ms-transition-timing-function: ease-in-out;
|
|
-moz-transition-timing-function: ease-in-out;
|
|
-webkit-transition-timing-function: ease-in-out;
|
|
-o-transition-timing-function: ease-in-out;
|
|
transition-duration: .2s;
|
|
-ms-transition-duration: .2s;
|
|
-moz-transition-duration: .2s;
|
|
-webkit-transition-duration: .2s;
|
|
-o-transition-duration: .2s;
|
|
}
|
|
::selection {color: #fff; background:#00c48a;}
|
|
::-moz-selection {color:#000; background:#dbdbdb;}
|
|
::-webkit-input-placeholder {color: #6f6f6f; text-overflow: ellipsis;}
|
|
::-moz-placeholder {color: #6f6f6f; text-overflow: ellipsis; opacity:1;}
|
|
:-ms-input-placeholder {color: #6f6f6f; text-overflow: ellipsis; opacity:1;}
|
|
|
|
section {
|
|
overflow: hidden;
|
|
}
|
|
|
|
caption {
|
|
display: none;
|
|
}
|
|
|
|
.no-transition *,
|
|
.swiper-container *,
|
|
.mfp-container *,
|
|
.skillbar-bar-main *,
|
|
.portfolio-grid *,
|
|
.parallax,
|
|
.rev-slider *,
|
|
.header-searchbar *,
|
|
.header-social-icon * {
|
|
transition-timing-function: none;
|
|
-moz-transition-timing-function: none;
|
|
-webkit-transition-timing-function: none;
|
|
-o-transition-timing-function: none;
|
|
-ms-transition-timing-function: none;
|
|
transition-duration: 0s;
|
|
-moz-transition-duration: 0s;
|
|
-webkit-transition-duration: 0s;
|
|
-o-transition-duration: 0s;
|
|
-ms-transition-duration: 0s;
|
|
}
|
|
|
|
.content-wrapper {
|
|
position:relative;
|
|
width:100%;
|
|
display:table;
|
|
box-sizing:border-box;
|
|
}
|
|
.contents {
|
|
position:relative;
|
|
width:100%;
|
|
display:table;
|
|
box-sizing:border-box;
|
|
}
|
|
.contents-row {
|
|
position:relative;
|
|
width:100%;
|
|
display:table;
|
|
box-sizing:border-box;
|
|
}
|
|
.contents-panel {
|
|
position:relative;
|
|
width:100%;
|
|
display:table;
|
|
box-sizing:border-box;
|
|
border: 1px solid #d3d3d3;
|
|
padding: 40px;
|
|
}
|
|
|
|
.trViewOff{ display:none !important; }
|
|
|
|
.font-bold {font-weight:bold;}
|
|
|
|
.word-break { word-break:break-word; }
|
|
.word-break-all { word-break:break-all; }
|
|
|
|
.gg-input.file-input {
|
|
height: 40px;
|
|
line-height: 30px;
|
|
padding: 6px 8px;
|
|
}
|
|
/* 추가 라디오 & 체크박스 컴포넌트 시작 */
|
|
input[type=checkbox],
|
|
input[type=radio] {
|
|
width: 18px;
|
|
height: 18px;
|
|
vertical-align: middle;
|
|
}
|
|
.gg-radio, .gg-checkbox {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 14px;
|
|
margin-bottom: 0px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
padding-left: 30px;
|
|
cursor: pointer;
|
|
webkit-transition: all 0.3s;
|
|
-moz-transition: all 0.3s;
|
|
-ms-transition: all 0.3s;
|
|
-o-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
.gg-checkbox-inline .gg-checkbox,
|
|
.gg-checkbox-inline .gg-radio,
|
|
.gg-radio-inline .gg-checkbox,
|
|
.gg-radio-inline .gg-radio {
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
}
|
|
.gg-checkbox-list .gg-checkbox,
|
|
.gg-checkbox-list .gg-radio,
|
|
.gg-radio-list .gg-checkbox,
|
|
.gg-radio-list .gg-radio {
|
|
display: block;
|
|
}
|
|
.gg-radio > input,
|
|
.gg-checkbox > input {
|
|
position: absolute;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
filter: alpha(opacity=0);
|
|
}
|
|
.gg-radio > span,
|
|
.gg-checkbox > span {
|
|
border: 1px solid transparent;
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0;
|
|
height: 18px;
|
|
width: 18px;
|
|
background: #E6E6E6;
|
|
box-sizing: border-box;
|
|
}
|
|
.gg-radio > span {
|
|
-webkit-border-radius: 50%!important;
|
|
-moz-border-radius: 50%!important;
|
|
-ms-border-radius: 50%!important;
|
|
-o-border-radius: 50%!important;
|
|
border-radius: 50%!important;
|
|
}
|
|
.gg-radio.gg-radio-outline > span,
|
|
.gg-radio.gg-checkbox-outline > span,
|
|
.gg-checkbox.gg-radio-outline > span,
|
|
.gg-checkbox.gg-checkbox-outline > span {
|
|
background: none;
|
|
border: 1px solid #ababab;
|
|
}
|
|
.gg-radio.gg-radio-disabled,
|
|
.gg-radio.gg-checkbox-disabled,
|
|
.gg-checkbox.gg-radio-disabled,
|
|
.gg-checkbox.gg-checkbox-disabled {
|
|
opacity: 0.8;
|
|
filter: alpha(opacity=80);
|
|
cursor: not-allowed;
|
|
}
|
|
.gg-checkbox-inline .gg-checkbox:last-child,
|
|
.gg-checkbox-inline .gg-radio:last-child,
|
|
.gg-radio-inline .gg-checkbox:last-child,
|
|
.gg-radio-inline .gg-radio:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.gg-radio > span:after,
|
|
.gg-checkbox > span:after {
|
|
content: '';
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
.gg-radio > span:after {
|
|
left: 5px;
|
|
top: 5px;
|
|
height: 6px;
|
|
width: 6px;
|
|
border-radius: 100% !important;
|
|
background: #3e3e3e;
|
|
}
|
|
.gg-checkbox > span:after {
|
|
left: 6px;
|
|
top: 2px;
|
|
width: 5px;
|
|
height: 10px;
|
|
border: solid #3e3e3e;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
.gg-radio > input:checked ~ span:after,
|
|
.gg-checkbox > input:checked ~ span:after {
|
|
display: block;
|
|
}
|
|
.gg-checkbox-list-2dep {
|
|
padding: 4px 0px;
|
|
}
|
|
.gg-checkbox-list-2dep .gg-radio,
|
|
.gg-checkbox-list-2dep .gg-checkbox {
|
|
padding: 0px 0px 0px 48px;
|
|
width: 100%;
|
|
background: url(../img/ground-info/icon/treeview-default-line.gif) 0px 0px no-repeat;
|
|
}
|
|
.gg-checkbox-list-2dep .gg-radio > span,
|
|
.gg-checkbox-list-2dep .gg-checkbox > span {
|
|
left: 18px;
|
|
}
|
|
fieldset[disabled] input[type=checkbox] + span,
|
|
fieldset[disabled] input[type=radio] + span,
|
|
input[type=checkbox].disabled + span,
|
|
input[type=checkbox][disabled] + span,
|
|
input[type=radio].disabled + span,
|
|
input[type=radio][disabled] + span {
|
|
background: #E6E6E6;
|
|
border: 1px solid #d2d2d2;
|
|
}
|
|
/* 추가 라디오 & 체크박스 컴포넌트 끝 */
|
|
|
|
/* ===================================
|
|
03. Typography
|
|
====================================== */
|
|
|
|
/* heading */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin:0;
|
|
padding:0;
|
|
letter-spacing: 0;
|
|
font-weight: 400;
|
|
}
|
|
h1 {font-size:30px; line-height:30px;}
|
|
h2 {font-size:28px; line-height:28px;}
|
|
h3 {font-size:26px; line-height:26px;}
|
|
h4 {font-size:24px; line-height:24px;}
|
|
h5 {font-size:22px; line-height:22px;}
|
|
h6 {font-size:20px; line-height:20px;}
|
|
|
|
/* horizontal scale */
|
|
.font-scale-h90 {
|
|
letter-spacing: -0.5px;
|
|
transform:scale(0.9, 1);
|
|
-webkit-transform:scale(0.9, 1);
|
|
}
|
|
|
|
/* ===================================
|
|
04. color
|
|
====================================== */
|
|
|
|
.bg-transparent {background-color: transparent;}
|
|
.bg-white {background-color:#fff;}
|
|
.bg-black {background-color:#000;}
|
|
.bg-extra-dark-gray {background-color:#1c1c1c;}
|
|
.bg-dark-gray {background-color:#757575;}
|
|
.bg-extra-medium-gray {background-color:#939393;}
|
|
.bg-medium-gray {background-color:#dbdbdb;}
|
|
.bg-extra-light-gray {background-color:#e0e0e0}
|
|
.bg-medium-light-gray {background-color:#ededed}
|
|
.bg-light-gray {background-color:#f7f7f7}
|
|
.bg-very-light-gray {background-color:#fafafa}
|
|
.bg-deep-pink {background-color:#ff214f;}
|
|
.bg-white-opacity { background-color: rgba(255, 255, 255, 0.85); }
|
|
.bg-black-opacity { background-color: rgba(0, 0, 0, 0.85); }
|
|
.bg-black-opacity-light { background-color: rgba(0, 0, 0, 0.5); }
|
|
.bg-deep-pink-opacity {background-color: rgba(255, 33, 79, 0.85);}
|
|
.bg-charcoal-gray{background-color: #0e0f10;}
|
|
|
|
.textB{color:#0098de !important;}
|
|
.textB *:link, .textB *:hover, .textB *:active, .textB *:visited{color:#0098de !important;text-decoration:none}
|
|
.textSB{color:#08b3e3 !important;}
|
|
.textSB *:link, .textSB *:hover, .textSB *:active, .textSB *:visited{color:#08b3e3 !important;text-decoration:none}
|
|
.textG{color:#3b874d !important;}
|
|
.textG *:link, .textG *:hover, .textG *:active, .textG *:visited{color:#3b874d !important;text-decoration:none}
|
|
.textY{color:#ffcc00 !important;}
|
|
.textY *:link, .textY *:hover, .textY *:active, .textY *:visited{color:#ffcc00 !important;text-decoration:none}
|
|
.textO{color:#fdb149 !important;}
|
|
.textO *:link, .textO *:hover, .textO *:active, .textO *:visited{color:#fdb149 !important;text-decoration:none}
|
|
.textR{color:#ed2227 !important;}
|
|
.textR *:link, .textR *:hover, .textR *:active, .textR *:visited{color:#ed2227 !important;text-decoration:none}
|
|
.textW{color:#ffffff !important;}
|
|
.textW *:link, .textW *:hover, .textW *:active, .textW *:visited{color:#ffffff !important;text-decoration:none}
|
|
.textWB{color:#afcad6 !important;}
|
|
.textWB *:link, .textWB *:hover, .textWB *:active, .textWB *:visited{color:#afcad6 !important;text-decoration:none}
|
|
|
|
/* ===================================
|
|
05. Button
|
|
====================================== */
|
|
|
|
.btn {
|
|
position: relative;
|
|
display:inline-block;
|
|
border:2px solid transparent;
|
|
letter-spacing: .5px;
|
|
line-height: inherit;
|
|
border-radius: 0;
|
|
width: auto;
|
|
font-weight: 500;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: ease-in-out;
|
|
}
|
|
.btn:active {
|
|
color: #232323 !important;
|
|
background-color: #2cbfc8 !important;
|
|
transition-timing-function: inherit;
|
|
transition-duration: 0s;
|
|
}
|
|
/* button size */
|
|
.btn.btn-very-small {font-size:9px; padding: 1px 17px; line-height: 22px;}
|
|
.btn.btn-small {font-size:12px; padding: 4px 24px;}
|
|
.btn.btn-medium {font-size:16px; padding: 6px 25px 5px;}
|
|
.btn.btn-large {font-size:18px; padding: 9px 34px; line-height: 25px; height: 54px;}
|
|
.btn.btn-extra-large {font-size:20px; padding: 12px 40px 13px; line-height: 25px;}
|
|
.btn-dual .btn {margin: 0 10px; }
|
|
.btn i {vertical-align: middle; position: relative; top:-1px}
|
|
.btn.btn-very-small i {font-size:12px;}
|
|
.btn.btn-small i {font-size:12px;}
|
|
.btn.btn-medium i {font-size:16px;}
|
|
.btn.btn-large i {font-size:18px;}
|
|
.btn.btn-extra-large i {font-size:20px;}
|
|
|
|
/* button background */
|
|
.btn.btn-white {background:#ffffff; border-color: #ffffff; color: #232323}
|
|
.btn.btn-white:hover {background: transparent; color: #fff}
|
|
.btn.btn-black {background:#000000; border-color: #000000; color: #fff}
|
|
.btn.btn-black:hover {background: transparent; color: #000}
|
|
.btn.btn-dark-gray {background: #232323; border-color: #232323; color: #fff}
|
|
.btn.btn-dark-gray:hover {background: transparent; color: #232323}
|
|
.btn.btn-light-gray {background: #dbdbdb; border-color: #dbdbdb; color: #232323}
|
|
.btn.btn-light-gray:hover {background: transparent; border-color: #dbdbdb; color: #dbdbdb}
|
|
.btn.btn-deep-pink {background: #ff214f; border-color: #ff214f; color: #ffffff}
|
|
.btn.btn-deep-pink:hover {background: transparent; border-color: #ff214f; color: #ff214f}
|
|
.btn.btn-ske-blue {background:#19b3e5; border-color: #19b3e5; color: #fff}
|
|
.btn.btn-ske-blue:hover {background: transparent; color: #19b3e5}
|
|
.btn.btn-green {background:#00c48a; border-color: #00c48a; color: #fff}
|
|
.btn.btn-green:hover {background: transparent; color: #00c48a}
|
|
|
|
/* button transparent */
|
|
.btn.btn-transparent-white {background: transparent; border-color: #ffffff; color: #ffffff}
|
|
.btn.btn-transparent-white:hover {background: #ffffff; border-color: #ffffff; color: #232323}
|
|
.btn.btn-transparent-black {background: transparent; border-color: #000000; color: #000000}
|
|
.btn.btn-transparent-black:hover {background: #000000; border-color: #000000; color: #ffffff}
|
|
.btn.btn-transparent-dark-gray {background: transparent; border-color: #232323; color: #232323}
|
|
.btn.btn-transparent-dark-gray:hover {background: #232323; border-color: #232323; color: #ffffff}
|
|
.btn.btn-transparent-light-gray {background: transparent; border-color: #dbdbdb; color: #dbdbdb}
|
|
.btn.btn-transparent-light-gray:hover {background: #dbdbdb; border-color: #dbdbdb; color: #232323}
|
|
.btn.btn-transparent-deep-pink {background: transparent; border-color: #ff214f; color: #ff214f}
|
|
.btn.btn-transparent-deep-pink:hover {background: #ff214f; border-color: #ff214f; color: #fff}
|
|
|
|
/* button rounded */
|
|
.btn.btn-rounded {border-radius: 50px}
|
|
.btn.btn-rounded5 {border-radius: 5px}
|
|
.btn.btn-rounded.btn-very-small, .btn.btn-rounded5.btn-very-small {padding: 2px 10px;}
|
|
.btn.btn-rounded.btn-small, .btn.btn-rounded5.btn-small {padding: 4px 14px;}
|
|
.btn.btn-rounded.btn-medium, .btn.btn-rounded5.btn-medium {padding: 6px 32px;}
|
|
.btn.btn-rounded.btn-large, .btn.btn-rounded5.btn-large {padding: 9px 25px;}
|
|
.btn.btn-rounded.btn-extra-large, .btn.btn-rounded5.btn-extra-large {padding: 12px 45px 13px;}
|
|
|
|
/* icon button */
|
|
.btn.btn-icon-right {padding: 4px 40px 4px 14px;}
|
|
.btn.btn-icon-left {padding: 4px 14px 4px 40px;}
|
|
.btn.btn-icon-right::after, .btn.btn-icon-left::before, .btn-icon-single::before {content: ""; display: inline-block; position: absolute; top: 2px; width: 28px; height: 28px;}
|
|
.btn.btn-icon-right::after {right: 10px;}
|
|
.btn.btn-icon-left::before {left:10px;}
|
|
|
|
.btn.btn-large.btn-icon-right::after, .btn.btn-large.btn-icon-left::before {width: 30px; height: 30px; top: 10px;}
|
|
.btn.btn-large.btn-icon-right {padding: 9px 42px 9px 25px;}
|
|
.btn.btn-large.btn-icon-left {padding: 9px 25px 9px 42px;}
|
|
|
|
.btn.btn-small.btn-icon-right::after, .btn.btn-small.btn-icon-left::before {width: 28px; height: 28px; top: 2px;}
|
|
.btn.btn-small.btn-icon-right {padding: 4px 46px 4px 14px;}
|
|
.btn.btn-small.btn-icon-left {padding: 4px 14px 4px 46px;}
|
|
|
|
.btn.btn-small.btn-icon-single {width: 36px; height: 36px;}
|
|
.btn.btn-small.btn-icon-single::before {top: 2px; left: 2px;}
|
|
|
|
.btn.btn-icon-large.btn-icon-right::after, .btn.btn-icon-large.btn-icon-left::before {width: 34px; height: 34px; top: 8px;}
|
|
.btn.btn-icon-large span {vertical-align: super; line-height: 36px;}
|
|
.btn.btn-icon-large.btn-large.btn-icon-right {padding: 9px 54px 9px 25px;}
|
|
.btn.btn-icon-large.btn-large.btn-icon-left {padding: 9px 25px 9px 54px;}
|
|
|
|
.btn.btn-icon-next::after, .btn.btn-icon-next::before {background: url(../img/common/icon/ico_btn_next.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-nextB::after, .btn.btn-icon-nextB::before {background: url(../img/common/icon/ico_btn_next_b.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-download::after, .btn.btn-icon-download::before {background: url(../img/common/icon/ico_btn_download.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-download-w::after, .btn.btn-icon-download-w::before {background: url(../img/common/icon/ico_btn_download_2.png) no-repeat 50% 50%;}
|
|
|
|
.btn.btn-icon-delete::after, .btn.btn-icon-delete::before {background: url(../img/common/icon/ico_btn_delete.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-preview::after, .btn.btn-icon-preview::before {background: url(../img/common/icon/ico_btn_preview.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-save::after, .btn.btn-icon-save::before {background: url(../img/common/icon/ico_btn_save.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-search::after, .btn.btn-icon-search::before {background: url(../img/common/icon/ico_btn_search.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-area-search::after, .btn.btn-icon-area-search::before {background: url(../img/common/icon/ico_btn_area_search.png) no-repeat 50% 50%;}
|
|
|
|
.btn.btn-icon-pm-plus::after, .btn.btn-icon-pm-plus::before {background: url(../img/common/icon/ico_btn_pm_plus.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-pm-plus:hover::after, .btn.btn-icon-pm-plus:hover::before {background: url(../img/common/icon/ico_btn_pm_plus_dark.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-pm-minus::after, .btn.btn-icon-pm-minus::before {background: url(../img/common/icon/ico_btn_pm_minus.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-pm-minus:hover::after, .btn.btn-icon-pm-minus:hover::before {background: url(../img/common/icon/ico_btn_pm_minus_dark.png) no-repeat 50% 50%;}
|
|
|
|
.btn.btn-icon-zoom-all::after, .btn.btn-icon-zoom-all::before {background: url(../img/common/icon/ico_btn_zoom_all.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-zoom-plus::after, .btn.btn-icon-zoom-plus::before {background: url(../img/common/icon/ico_btn_zoom_plus.png) no-repeat 50% 50%;}
|
|
.btn.btn-icon-zoom-minus::after, .btn.btn-icon-zoom-minus::before {background: url(../img/common/icon/ico_btn_zoom_minus.png) no-repeat 50% 50%;}
|
|
|
|
/* image button */
|
|
.image-button {width: 100%; background: rgba(0,0,0,0.80); padding: 26px; font-size: 16px;}
|
|
.image-button:hover {background: rgba(0,0,0,0.5);}
|
|
|
|
/* ===================================
|
|
06. Background image
|
|
====================================== */
|
|
|
|
.parallax {
|
|
position: relative;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* ===================================
|
|
07. Important
|
|
====================================== */
|
|
|
|
.t-left {text-align:left !important;}
|
|
.t-center {text-align:center !important;}
|
|
.t-right {text-align:right !important;}
|
|
.f-left {float:left !important;}
|
|
.f-center {float:center !important;}
|
|
.f-right {float:right !important;}
|
|
.v-middle {vertical-align:middle !important;}
|
|
.v-top {vertical-align:top !important;}
|
|
|
|
.t-underline {text-decoration:underline !important;}
|
|
.t-strike {text-decoration:line-through !important;}
|
|
|
|
.t-normal{font-weight:normal !important}
|
|
.t-sp{letter-spacing:-1px !important}
|
|
|
|
.disBl{display:block !important;}
|
|
.disInBl{display:inline-block !important;}
|
|
.disIn{display:inline !important;}
|
|
|
|
.scrollOption {overflow: hidden !important; overflow:auto !important;}
|
|
.scrollOptionX {overflow: hidden !important; overflow-x:auto !important;}
|
|
.scrollOptionY {overflow: hidden !important; overflow-y:auto !important;}
|
|
.scrollOptionXnone {overflow-x:hidden !important;}
|
|
.scrollOptionYnone {overflow-y:hidden !important;}
|
|
|
|
.cursor-pointer {cursor: pointer !important;}
|
|
.cursor-default {cursor: default !important;}
|
|
.cursor-text {cursor: text !important;}
|
|
.cursor-copy {cursor: copy !important;}
|
|
.cursor-help {cursor: help !important;}
|
|
.cursor-move {cursor: move !important;}
|
|
|
|
.pointerEventNone {pointer-events: none; opacity: 0.3 !important;}
|
|
|
|
.content-full-height {height: calc(100vh) !important;}
|
|
|
|
.contentFullHeight-100 {height: calc(100vh - 100px) !important;}
|
|
.contentFullHeight-150 {height: calc(100vh - 150px) !important;}
|
|
.contentFullHeight-200 {height: calc(100vh - 200px) !important;}
|
|
.contentFullHeight-250 {height: calc(100vh - 250px) !important;}
|
|
.contentFullHeight-300 {height: calc(100vh - 300px) !important;}
|
|
.contentFullHeight-350 {height: calc(100vh - 350px) !important;}
|
|
.contentFullHeight-400 {height: calc(100vh - 400px) !important;}
|
|
.contentFullHeight-450 {height: calc(100vh - 450px) !important;}
|
|
.contentFullHeight-500 {height: calc(100vh - 500px) !important;}
|
|
.contentFullHeight-550 {height: calc(100vh - 550px) !important;}
|
|
.contentFullHeight-600 {height: calc(100vh - 600px) !important;}
|
|
.contentFullHeight-650 {height: calc(100vh - 650px) !important;}
|
|
.contentFullHeight-700 {height: calc(100vh - 700px) !important;}
|
|
.contentFullHeight-750 {height: calc(100vh - 750px) !important;}
|
|
.contentFullHeight-800 {height: calc(100vh - 800px) !important;}
|
|
.contentFullHeight-850 {height: calc(100vh - 850px) !important;}
|
|
|
|
.border-none {border:0 !important;}
|
|
.borderT-none {border-top:0 !important;}
|
|
.borderR-none {border-right:0 !important;}
|
|
.borderB-none {border-bottom:0 !important;}
|
|
.borderL-none {border-left:0 !important;}
|
|
|
|
.border-radius-20 {border-radius: 20px !important;}
|
|
|
|
.display-block {display:block !important}
|
|
.display-inline-block {display:inline-block !important}
|
|
.display-inline {display:inline !important}
|
|
.display-none {display:none !important}
|
|
.display-inherit {display:inherit !important}
|
|
.display-table {display:table !important}
|
|
.display-table-cell {display:table-cell !important}
|
|
.overflow-hidden {overflow:hidden !important}
|
|
.overflow-visible {overflow:visible !important}
|
|
.overflow-auto {overflow:auto !important}
|
|
|
|
.display-flex {
|
|
-ms-box-orient: horizontal;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-inline-flexbox;
|
|
display: -moz-flex;
|
|
display: -webkit-inline-flex;
|
|
display: flex;
|
|
-webkit-flex-flow: row wrap;
|
|
flex-flow: row wrap;
|
|
-ms-flex-flow: row wrap;
|
|
-moz-flex-flow: row wrap;
|
|
-o-flex-flow: row wrap;
|
|
}
|
|
.display-flex > div:nth-of-type(1) {order: 2;-webkit-order:2;-moz-order:2;-ms-order:2;}
|
|
.display-flex > div:nth-of-type(2) {order: 1;-webkit-order:1;-moz-order:1;-ms-order:1;}
|
|
.display-flex > div:nth-of-type(3) {order: 3;-webkit-order:3;-moz-order:3;-ms-order:3;}
|
|
|
|
.hr-style-01 {border-top: 2px solid #b5bfc8; margin: 30px 0px;}
|
|
|
|
.mar0{margin:0px !important}
|
|
.mar5{margin:5px !important}
|
|
.mar10{margin:10px !important}
|
|
.mar15{margin:15px !important}
|
|
.mar20{margin:20px !important}
|
|
.mar25{margin:25px !important}
|
|
.mar30{margin:30px !important}
|
|
.mar35{margin:35px !important}
|
|
.mar40{margin:40px !important}
|
|
.mar45{margin:45px !important}
|
|
.mar50{margin:50px !important}
|
|
.mar55{margin:55px !important}
|
|
.mar60{margin:60px !important}
|
|
.mar65{margin:65px !important}
|
|
|
|
.marT0{margin-top:0px !important}
|
|
.marT5{margin-top:5px !important}
|
|
.marT10{margin-top:10px !important}
|
|
.marT15{margin-top:15px !important}
|
|
.marT20{margin-top:20px !important}
|
|
.marT25{margin-top:25px !important}
|
|
.marT30{margin-top:30px !important}
|
|
.marT35{margin-top:35px !important}
|
|
.marT40{margin-top:40px !important}
|
|
.marT45{margin-top:45px !important}
|
|
.marT50{margin-top:50px !important}
|
|
.marT55{margin-top:55px !important}
|
|
.marT60{margin-top:60px !important}
|
|
.marT65{margin-top:65px !important}
|
|
|
|
.marL0{margin-left:0px !important}
|
|
.marL5{margin-left:5px !important}
|
|
.marL10{margin-left:10px !important;}
|
|
.marL15{margin-left:15px !important;}
|
|
.marL20{margin-left:20px !important;}
|
|
.marL25{margin-left:25px !important;}
|
|
.marL30{margin-left:30px !important;}
|
|
.marL35{margin-left:35px !important;}
|
|
.marL40{margin-left:40px !important;}
|
|
.marL45{margin-left:45px !important;}
|
|
.marL50{margin-left:50px !important;}
|
|
.marL55{margin-left:55px !important;}
|
|
.marL60{margin-left:60px !important;}
|
|
.marL65{margin-left:65px !important;}
|
|
|
|
.marR0{margin-right:0px !important}
|
|
.marR5{margin-right:5px !important}
|
|
.marR10{margin-right:10px !important}
|
|
.marR15{margin-right:15px !important}
|
|
.marR20{margin-right:20px !important}
|
|
.marR25{margin-right:25px !important}
|
|
.marR30{margin-right:30px !important}
|
|
.marR35{margin-right:35px !important}
|
|
.marR38{margin-right:38px !important}
|
|
.marR40{margin-right:40px !important}
|
|
.marR45{margin-right:45px !important}
|
|
.marR50{margin-right:50px !important}
|
|
.marR55{margin-right:55px !important}
|
|
.marR60{margin-right:60px !important}
|
|
.marR65{margin-right:65px !important}
|
|
|
|
.marB0{margin-bottom:0 !important;}
|
|
.marB5{margin-bottom:5px !important;}
|
|
.marB10{margin-bottom:10px !important;}
|
|
.marB15{margin-bottom:15px !important;}
|
|
.marB20{margin-bottom:20px !important;}
|
|
.marB25{margin-bottom:25px !important;}
|
|
.marB30{margin-bottom:30px !important;}
|
|
.marB35{margin-bottom:35px !important;}
|
|
.marB40{margin-bottom:40px !important;}
|
|
.marB45{margin-bottom:45px !important;}
|
|
.marB50{margin-bottom:50px !important;}
|
|
.marB55{margin-bottom:55px !important;}
|
|
.marB60{margin-bottom:60px !important;}
|
|
.marB65{margin-bottom:65px !important;}
|
|
|
|
.pad0{padding:0px !important}
|
|
.pad5{padding:5px !important}
|
|
.pad10{padding:10px !important}
|
|
.pad15{padding:15px !important}
|
|
.pad20{padding:20px !important}
|
|
.pad25{padding:25px !important}
|
|
.pad30{padding:30px !important}
|
|
.pad35{padding:35px !important}
|
|
.pad40{padding:40px !important}
|
|
.pad45{padding:45px !important}
|
|
.pad50{padding:50px !important}
|
|
.pad55{padding:55px !important}
|
|
.pad60{padding:60px !important}
|
|
.pad65{padding:65px !important}
|
|
|
|
.padT0{padding-top:0px !important}
|
|
.padT5{padding-top:5px !important}
|
|
.padT8{padding-top:8px !important}
|
|
.padT10{padding-top:10px !important}
|
|
.padT15{padding-top:15px !important}
|
|
.padT20{padding-top:20px !important}
|
|
.padT25{padding-top:25px !important}
|
|
.padT30{padding-top:30px !important}
|
|
.padT35{padding-top:35px !important}
|
|
.padT40{padding-top:40px !important}
|
|
.padT45{padding-top:45px !important}
|
|
.padT50{padding-top:50px !important}
|
|
.padT55{padding-top:55px !important}
|
|
.padT60{padding-top:60px !important}
|
|
.padT65{padding-top:65px !important}
|
|
|
|
.padL0{padding-left:0px !important}
|
|
.padL5{padding-left:5px !important}
|
|
.padL10{padding-left:10px !important;}
|
|
.padL15{padding-left:15px !important;}
|
|
.padL20{padding-left:20px !important;}
|
|
.padL25{padding-left:25px !important;}
|
|
.padL30{padding-left:30px !important;}
|
|
.padL35{padding-left:35px !important;}
|
|
.padL40{padding-left:40px !important;}
|
|
.padL45{padding-left:45px !important;}
|
|
.padL50{padding-left:50px !important;}
|
|
.padL55{padding-left:55px !important;}
|
|
.padL60{padding-left:60px !important;}
|
|
.padL65{padding-left:65px !important;}
|
|
|
|
.padR0{padding-right:0px !important}
|
|
.padR5{padding-right:5px !important}
|
|
.padR10{padding-right:10px !important}
|
|
.padR15{padding-right:15px !important}
|
|
.padR20{padding-right:20px !important}
|
|
.padR25{padding-right:25px !important}
|
|
.padR30{padding-right:30px !important}
|
|
.padR35{padding-right:35px !important}
|
|
.padR38{padding-right:38px !important}
|
|
.padR40{padding-right:40px !important}
|
|
.padR45{padding-right:45px !important}
|
|
.padR50{padding-right:50px !important}
|
|
.padR55{padding-right:55px !important}
|
|
.padR60{padding-right:60px !important}
|
|
.padR65{padding-right:65px !important}
|
|
|
|
.padB0{padding-bottom:0 !important;}
|
|
.padB5{padding-bottom:5px !important;}
|
|
.padB8{padding-bottom:8px !important;}
|
|
.padB10{padding-bottom:10px !important;}
|
|
.padB15{padding-bottom:15px !important;}
|
|
.padB20{padding-bottom:20px !important;}
|
|
.padB25{padding-bottom:25px !important;}
|
|
.padB30{padding-bottom:30px !important;}
|
|
.padB35{padding-bottom:35px !important;}
|
|
.padB40{padding-bottom:40px !important;}
|
|
.padB45{padding-bottom:45px !important;}
|
|
.padB50{padding-bottom:50px !important;}
|
|
.padB55{padding-bottom:55px !important;}
|
|
.padB60{padding-bottom:60px !important;}
|
|
.padB65{padding-bottom:65px !important;}
|
|
|
|
.f10{font-size:10px !important;}
|
|
.f11{font-size:11px !important;}
|
|
.f12{font-size:12px !important;}
|
|
.f13{font-size:13px !important;}
|
|
.f14{font-size:14px !important;}
|
|
.f15{font-size:15px !important;}
|
|
.f16{font-size:16px !important;}
|
|
.f17{font-size:17px !important;}
|
|
.f18{font-size:18px !important;}
|
|
.f19{font-size:19px !important;}
|
|
.f20{font-size:20px !important;}
|
|
|
|
/* ===================================
|
|
08. Magnific popup
|
|
====================================== */
|
|
|
|
.mfp-bg {
|
|
background: #000;
|
|
opacity: 0.93;
|
|
}
|
|
.mfp-bg,
|
|
.mfp-wrap {
|
|
z-index: 10007;
|
|
}
|
|
#popup-form {
|
|
cursor:default;
|
|
}
|
|
.mfp-image-holder .mfp-close,
|
|
.mfp-iframe-holder .mfp-close {
|
|
color:#fff;
|
|
background: transparent;
|
|
}
|
|
|
|
.mfp-close,
|
|
.mfp-close:active {
|
|
opacity: 1;
|
|
background-color:transparent;
|
|
color: #fff;
|
|
right: 30px;
|
|
top: 30px;
|
|
}
|
|
.modal-popup-main .mfp-close,
|
|
.modal-popup-main .mfp-close:active {
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.mfp-arrow-right:after,
|
|
.mfp-arrow-left:after {
|
|
display: none;
|
|
}
|
|
.mfp-arrow-right:before {
|
|
border-left: none;
|
|
content: "\e628";
|
|
font-size: 2em;
|
|
font-family: 'themify';
|
|
color: #fff;
|
|
}
|
|
.mfp-arrow-left:before {
|
|
border-right: none;
|
|
content: "\e629";
|
|
font-size: 2em;
|
|
font-family: 'themify';
|
|
color: #fff;
|
|
}
|
|
.mfp-bottom-bar {
|
|
margin-top: -24px;
|
|
font-size: 12px;
|
|
}
|
|
.mfp-close {
|
|
font-size: 36px;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
|
|
@-moz-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
|
|
@-o-keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
|
|
@keyframes fadeIn {0% {opacity: 0;} 100% {opacity: 1;}}
|
|
|
|
.mfp-figure {
|
|
-webkit-animation-name: fadeIn;
|
|
-moz-animation-name: fadeIn;
|
|
-o-animation-name: fadeIn;
|
|
-ms-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
-webkit-animation-duration: .4s;
|
|
-moz-animation-duration: .4s;
|
|
-ms-animation-duration: .4s;
|
|
-o-animation-duration: .4s;
|
|
animation-duration: .4s;
|
|
-webkit-animation-fill-mode: both;
|
|
-moz-animation-fill-mode: both;
|
|
-ms-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility:hidden;
|
|
-ms-backface-visibility:hidden;
|
|
}
|
|
|
|
/* simple fade transition */
|
|
.mfp-fade.mfp-bg {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
-ms-transition: all 0.3s ease-out;
|
|
-o-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-fade.mfp-bg.mfp-ready {
|
|
opacity: 0.9;
|
|
}
|
|
.mfp-fade.mfp-bg.mfp-removing {
|
|
opacity: 0;
|
|
}
|
|
.mfp-fade.mfp-wrap .mfp-content {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
-ms-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
|
|
opacity: 1;
|
|
}
|
|
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ===================================
|
|
09. Header
|
|
====================================== */
|
|
|
|
/* header icon */
|
|
.header-searchbar {
|
|
border-left: 1px solid rgba(0,0,0,.15);
|
|
padding-left: 15px;
|
|
display: inline-block;
|
|
line-height: 15px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.header-social-icon {
|
|
border-left: 1px solid rgba(0, 0, 0, 0.15);
|
|
padding-left: 15px;
|
|
margin-left: 12px;
|
|
display: inline-block;
|
|
line-height: 15px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.heder-menu-button {
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
padding-left: 5px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
nav.navbar.bootsnav .heder-menu-button .navbar-toggle {
|
|
float: none;
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
top: 4px;
|
|
}
|
|
.white-link .header-searchbar,
|
|
.white-link .header-social-icon {
|
|
border-left: 1px solid rgba(255,255,255,.15);
|
|
}
|
|
.header-searchbar a i {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
.search-icon {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/* menu */
|
|
.navbar-collapse {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* header navigation and logo */
|
|
header {width: 100%; z-index: 99;}
|
|
header nav.navbar {border-radius: 0; padding: 0;}
|
|
header nav.navbar-default,
|
|
nav.navbar.bootsnav {border-bottom: 0;}
|
|
header nav {width: 100%; top: 0px; z-index: 99; margin-bottom: 0; display: table; }
|
|
header nav .nav-header-container {display: table-cell; vertical-align: middle; position: relative;}
|
|
header nav .navbar-nav > li > a {color: #232323; font-size: 12px; font-weight: 700; margin:0 20px; padding: 5px 0px 5px; text-transform: uppercase; letter-spacing: 0.015em;}
|
|
header nav .navbar-nav > li > a:hover,
|
|
header nav .navbar-nav > li > a:focus,
|
|
header nav .navbar-nav > li.active > a {background: transparent;}
|
|
header nav .navbar-nav > li:last-child a {margin-right: 0;}
|
|
header nav.navbar .navbar-nav > li > a,
|
|
nav.navbar.bootsnav ul.nav > li > a {color: #232323;}
|
|
|
|
.navbar-fixed-bottom,
|
|
.navbar-fixed-top {z-index: 9000;}
|
|
.navbar-nav > li {position: inherit;}
|
|
.navbar-nav > li.dropdown > .fa {display: none;}
|
|
.navbar-nav > li ul {margin: 0; padding: 0;}
|
|
.navbar-toggle {border-radius: 0; margin-right: 0;}
|
|
.mobile-toggle {display: block;}
|
|
.sidebar-nav .mobile-toggle {display: none;}
|
|
.mobile-toggle span {display: block; width: 16px; height: 2px; background: #232323; content: ""; margin: 3px 0px;}
|
|
.mobile-toggle:hover span,
|
|
.white-link .mobile-toggle:hover span {background-color: red;}
|
|
.white-link .mobile-toggle span {background: #fff;}
|
|
|
|
header a.logo {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
header .logo .logo-dark,
|
|
header .logo .logo-light {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: 0;
|
|
transition-duration: 0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
header .logo .logo-dark.default,
|
|
header .logo .logo-light.default {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
width: auto;
|
|
transition-duration:0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
|
|
/* header sticky */
|
|
header.sticky nav.header-dark-transparent .logo .logo-light,
|
|
header.sticky nav.header-dark .logo .logo-light {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
width: auto;
|
|
transition-duration: 0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
header.sticky nav.header-dark-transparent .logo .logo-dark,
|
|
header.sticky nav.header-dark .logo .logo-dark {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: 0;
|
|
transition-duration:0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
header.sticky nav .logo .logo-dark {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
width: auto;
|
|
transition-duration:0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
header.sticky nav .logo .logo-light {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
width: 0;
|
|
transition-duration:0.5s;
|
|
-webkit-transition-duration: 0.5s;
|
|
-moz-transition-duration: 0.5s;
|
|
-ms-transition-duration: 0.5s;
|
|
-o-transition-duration: 0.5s;
|
|
}
|
|
|
|
/* mega menu */
|
|
nav .accordion-menu {position: inherit;}
|
|
nav.navbar.bootsnav li.dropdown ul li {list-style: none; padding: 0;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full {width: 100%; box-sizing: border-box; background: rgba(35,35,35,1); padding: 45px 50px; box-shadow: none; border-radius: 0; border: 0;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full ul {margin: 0; list-style: none;}
|
|
nav.navbar.bootsnav li.dropdown .menu-back-div > ul {margin: 0 auto; width: auto; display: table; background: rgba(35,35,35,1);}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li.dropdown-header {color: #fff; display: inline-block; font-size: 11px; font-weight: 500; margin-bottom: 8px; white-space: inherit; padding: 0 40px; border-bottom: none; text-transform: uppercase;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li a {text-align: left; font-size: 12px; color: #9d9d9d; padding:3px 40px; text-transform: capitalize; margin: 0; display: block; position: relative; overflow: hidden; left: 0;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li:first-child a,
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul li:first-child .dropdown-header {padding-left: 0;}
|
|
nav.navbar.bootsnav li.dropdown.megamenu-fw .icon-list-menu li > a > i {font-size: 14px; vertical-align: middle; width: 24px;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li {border-right: 1px solid rgba(255, 255, 255, 0.05);}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li:last-child {border: 0;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li:last-child img {padding-left: 40px; background-size: cover; background-position: bottom right;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li > ul {margin-top: 18px;}
|
|
nav.navbar.bootsnav li.dropdown .mega-menu-full > ul > li > ul:first-child {margin-top: 0;}
|
|
nav.navbar.bootsnav li.dropdown .megamenu-fw .icon-list-menu li > a > i {font-size: 14px; vertical-align: middle; width: 24px;}
|
|
nav.navbar.navbar-default ul li.dropdown .dropdown-menu .mega-menu-column li > a.menu-banner-image,
|
|
nav.navbar.navbar-default ul li.dropdown .dropdown-menu .mega-menu-column li > a:hover.menu-banner-image {left: 0; padding: 0; margin-bottom: 20px;}
|
|
nav.navbar.navbar-default ul li.dropdown .dropdown-menu .mega-menu-column li:last-child > a.menu-banner-image {margin-bottom: 0;}
|
|
|
|
/* simple dropdown menu */
|
|
.simple-dropdown.dropdown {
|
|
position: relative;
|
|
}
|
|
.simple-dropdown .dropdown-menu {
|
|
position: absolute;
|
|
left: 0;
|
|
background: rgba(35,35,35,1);
|
|
min-width: 220px;
|
|
padding: 13px 0 15px;
|
|
box-shadow: none;
|
|
}
|
|
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li {
|
|
padding-left: 28px;
|
|
padding-right: 28px;
|
|
}
|
|
.simple-dropdown .dropdown-menu > li > a {
|
|
font-size: 12px;
|
|
color: #9d9d9d;
|
|
}
|
|
.simple-dropdown .dropdown-menu > li a {
|
|
padding: 9px 0 7px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
.simple-dropdown .dropdown-menu > li a:hover {
|
|
background-color: #000;
|
|
color: #fff;
|
|
}
|
|
.simple-dropdown .dropdown-menu > li.dropdown > ul li a {
|
|
color: #9d9d9d;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
font-weight: 400;
|
|
}
|
|
.simple-dropdown .dropdown-menu > li > a.dropdown-toggle .fa,
|
|
nav.navbar.bootsnav.sidebar-nav .nav.navbar-left-sidebar li.dropdown > a > .fa {
|
|
position: absolute; right: 0;
|
|
font-size: 12px;
|
|
margin-top: 0;
|
|
height: 20px;
|
|
width: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
-webkit-transform: translateY(-50%);
|
|
-moz-transform: translateY(-50%);
|
|
-o-transform: translateY(-50%);
|
|
-ms-transform: translateY(-50%);
|
|
}
|
|
nav.navbar.bootsnav.sidebar-nav .nav.navbar-left-sidebar li a .fa {
|
|
font-size: 16px;
|
|
}
|
|
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li.dropdown > ul,
|
|
nav.navbar.bootsnav .simple-dropdown .dropdown-menu > li.dropdown > ul > li.dropdown > ul {
|
|
background: rgba(35,35,35,1);
|
|
display: none;
|
|
left: 220px;
|
|
margin: -13px 0 0 1px;
|
|
min-width: 220px;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
top: 0;
|
|
padding: 13px 0;
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
}
|
|
nav.navbar.bootsnav.navbar-default li.dropdown.simple-dropdown > ul.dropdown-menu > li.active > a {
|
|
color: #fff;
|
|
}
|
|
|
|
/* close button */
|
|
.close-button-menu {
|
|
float: right;
|
|
padding: 10px;
|
|
background-color: transparent;
|
|
color: #232323;
|
|
border: 0;
|
|
position: absolute;
|
|
height: 40px;
|
|
width: 40px;
|
|
outline: none;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.close-button-menu:after,
|
|
.close-button-menu:before {
|
|
content: "";
|
|
display: block;
|
|
background: #000;
|
|
height: 2px;
|
|
width: 18px;
|
|
position: absolute;
|
|
}
|
|
.close-button-menu:after{
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
}
|
|
.close-button-menu:before{
|
|
transform: rotate(-45deg);
|
|
-webkit-transform: rotate(-45deg);
|
|
-moz-transform: rotate(-45deg);
|
|
-ms-transform: rotate(-45deg);
|
|
-o-transform: rotate(-45deg);
|
|
}
|
|
|
|
/* dropdown menu */
|
|
.dropdown-menu .dropdown a {
|
|
position: relative;
|
|
}
|
|
nav.navbar.navbar-default ul.nav > li > a {
|
|
padding:26px 0;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
font-weight: 500;
|
|
}
|
|
nav.navbar.navbar-default ul.nav > li.dropdown > a.dropdown-toggle::after,
|
|
nav.navbar.sidebar-nav ul.nav > li.dropdown > a.dropdown-toggle::after {
|
|
content: "";
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
margin-top: 0;
|
|
}
|
|
nav.navbar.navbar-default ul li.dropdown ul.dropdown-menu > li:last-child {
|
|
border-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
nav.navbar.navbar-default ul li.dropdown .dropdown-menu li > a:hover {
|
|
color: #fff;
|
|
background: transparent;
|
|
left: 5px;
|
|
}
|
|
nav.navbar.navbar-default ul li.dropdown .dropdown-menu li.active > a {
|
|
color: #fff;
|
|
}
|
|
nav.navbar.navbar-default ul.menu-links li.dropdown ul.dropdown-menu li > a:hover,
|
|
nav.navbar.navbar-default ul.menu-links li.dropdown ul.dropdown-menu li.active > a {
|
|
color: #232323;
|
|
}
|
|
.navbar-default ul li li.dropdown ul {
|
|
display: none;
|
|
}
|
|
.navbar-default ul li li.dropdown.on > ul {
|
|
display: block;
|
|
position: absolute;
|
|
left: 100%;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
}
|
|
.navbar-default ul li li.dropdown.on > ul > li.dropdown.on > ul {
|
|
display: block;
|
|
position: absolute;
|
|
left: 100%;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
}
|
|
.navbar-default ul li li.dropdown ul.dropdown-menu {
|
|
position: absolute;
|
|
left: 100%;
|
|
margin-top: 0;
|
|
padding: 0;
|
|
top: 0;
|
|
box-shadow: none;
|
|
}
|
|
.navbar-default ul li li.dropdown ul.dropdown-menu li {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ===================================
|
|
10. Sidebar
|
|
====================================== */
|
|
|
|
/* pull left sidebar */
|
|
.cbp-spmenu {
|
|
background: #fff;
|
|
position: fixed;
|
|
z-index: 1;
|
|
}
|
|
.cbp-spmenu-vertical {
|
|
width: 455px;
|
|
height: 100%;
|
|
top: 0;
|
|
z-index: 10005;
|
|
}
|
|
.cbp-spmenu-right {
|
|
right: -455px;
|
|
}
|
|
.cbp-spmenu-left {
|
|
left: -100%;
|
|
}
|
|
.cbp-spmenu-left.cbp-spmenu-open {
|
|
left: 0;
|
|
}
|
|
.cbp-spmenu-right.cbp-spmenu-open {
|
|
right: 0px;
|
|
overflow-x: auto;
|
|
box-shadow: 0 0 4px rgba(0,0,0,.2);
|
|
}
|
|
.cbp-spmenu-push {
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
left: 0;
|
|
}
|
|
.cbp-spmenu,
|
|
.cbp-spmenu-push {
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
-ms-transition: all 0.3s ease;
|
|
-o-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* custome scrollbar */
|
|
.cbp-spmenu-right::-webkit-scrollbar,
|
|
.navbar-left-sidebar::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
.cbp-spmenu-right::-webkit-scrollbar-track,
|
|
.navbar-left-sidebar::-webkit-scrollbar-track {
|
|
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
-ms-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
-o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
|
}
|
|
.cbp-spmenu-right::-webkit-scrollbar-thumb,
|
|
.navbar-left-sidebar::-webkit-scrollbar-thumb {
|
|
background-color: darkgrey;
|
|
outline: 1px solid slategrey;
|
|
}
|
|
|
|
/* ===================================
|
|
11. Elements
|
|
====================================== */
|
|
|
|
/* search form */
|
|
.search-cart-header {
|
|
padding-top: 14px;
|
|
float: right;
|
|
letter-spacing: 1px;
|
|
}
|
|
.header-search-form {
|
|
color: #232323;
|
|
}
|
|
.search-form .search-input {
|
|
border: none;
|
|
border-radius: 0;
|
|
border-bottom: 2px solid rgba(255,255,255,0.5);
|
|
font-size: 30px;
|
|
font-weight: 100;
|
|
padding: 20px 38px 20px 2px;
|
|
text-transform: capitalize;
|
|
background: transparent;
|
|
line-height: 40px;
|
|
color: #fff;
|
|
}
|
|
.search-form .search-input:focus{
|
|
outline: none;
|
|
}
|
|
.search-input ::-moz-placeholder,
|
|
.search-input [placeholder] {
|
|
color: #ff0000;
|
|
}
|
|
.search-form .search-button {
|
|
font-size:21px;
|
|
color:#fff;
|
|
top:31px;
|
|
right: 0;
|
|
outline: none;
|
|
}
|
|
#search-header {
|
|
height:100%;
|
|
width: 45%;
|
|
margin:0 auto;
|
|
}
|
|
.close-search {
|
|
color: #373737;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 23px;
|
|
z-index: 998;
|
|
cursor: pointer;
|
|
}
|
|
.close-search:hover {
|
|
color: #9a9a9a;
|
|
}
|
|
.search-button {
|
|
cursor: pointer;
|
|
z-index: 0;
|
|
margin-right: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.input-file {
|
|
padding: 4px;
|
|
}
|
|
.table-content-item pre {
|
|
display: block;
|
|
padding: inherit;
|
|
margin: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
background-color: inherit;
|
|
border: inherit;
|
|
border-radius: inherit;
|
|
font-family: inherit;
|
|
}
|
|
/* ===================================
|
|
12. Footer
|
|
====================================== */
|
|
|
|
/* scroll to top */
|
|
.scroll-top-arrow,
|
|
.scroll-top-arrow:focus {
|
|
color: #fff;
|
|
background: #878787;
|
|
line-height: 28px;
|
|
display: none;
|
|
height: 30px;
|
|
width: 30px;
|
|
padding: 0;
|
|
position: fixed;
|
|
right: 45px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
/* top: 91%; */
|
|
bottom: 40px;
|
|
z-index: 10006;
|
|
border-radius: 100%;
|
|
}
|
|
.scroll-top-arrow:hover {
|
|
background-color: #000;
|
|
opacity: .8;
|
|
color: #fff;
|
|
border-color: #ff214f;
|
|
}
|
|
.scroll-top-arrow i {
|
|
line-height: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.bg-dark-footer{
|
|
background-color:#141414;
|
|
}
|
|
.footer-logo {
|
|
max-height: 28px;
|
|
}
|
|
|
|
/* footer input */
|
|
footer input::-webkit-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; font-size: 11px; font-weight: 400; opacity:1;}
|
|
footer input::-moz-placeholder { color: #6f6f6f; text-overflow: ellipsis; font-size: 11px; font-weight: 400; opacity:1;}
|
|
footer input:-ms-input-placeholder { color: #6f6f6f; text-overflow: ellipsis; font-size: 11px; font-weight: 400; opacity:1;}
|
|
footer .newsletter input { color: #6f6f6f; letter-spacing: normal; }
|
|
|
|
/* ===================================
|
|
13. Animation
|
|
====================================== */
|
|
|
|
/* animation */
|
|
@-webkit-keyframes up-down-animation {
|
|
0% {opacity:1; top:0px;}
|
|
25% {opacity:.4; top:2px;}
|
|
50% {opacity:.3; top:4px;}
|
|
75% {opacity:.2; top:5px;}
|
|
100% {opacity:0; top:9px;}
|
|
}
|
|
@keyframes up-down-animation {
|
|
0% {opacity:1; top:0px;}
|
|
25% {opacity:.4; top:4px;}
|
|
50% {opacity:.3; top:8px;}
|
|
75% {opacity:.2; top:12px;}
|
|
100% {opacity:0; top:16px;}
|
|
}
|
|
|
|
/* ===================================
|
|
14. table
|
|
====================================== */
|
|
|
|
.table-scrollable {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
border-color: #d5d5d5;
|
|
border-top: 2px solid #46494c;
|
|
margin: 0px 0px 4px 0px;
|
|
}
|
|
.table-scrollable.scrollableY {
|
|
overflow-y: auto;
|
|
border-bottom: 1px solid #46494c;
|
|
}
|
|
.table {
|
|
display: table;
|
|
border-collapse: separate;
|
|
box-sizing: border-box;
|
|
border-spacing: 2px;
|
|
border-color: grey;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background-color: transparent;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin-bottom: 0px;
|
|
}
|
|
.table-scrollable > .table {
|
|
width: 100% !important;
|
|
background-color: #fff;
|
|
}
|
|
.table-bordered {
|
|
border: 1px solid #e7ecf1;
|
|
}
|
|
.table-scrollable > .table-bordered {
|
|
border-color: #d5d5d5;
|
|
}
|
|
.table-top-control { position:relative;width:100%; display:table; box-sizing:border-box; text-align:right; margin-bottom:4px; }
|
|
.table-top-control button { margin-left:4px; }
|
|
.table-top-control.top-tab-btn { margin-top:-50px; margin-bottom:20px; }
|
|
.table-top-count { float:left; margin-top:4px; }
|
|
.table-bottom-control { position:relative;width:100%; display:table; box-sizing:border-box; text-align:right; margin-top:4px; }
|
|
.table-bottom-control button { margin-left:4px; }
|
|
|
|
.table.table-bordered thead > tr > th { background-color:#ebebeb; font-weight: normal; text-align:center;}
|
|
.table.table-bordered tbody > tr > th { background-color:#ebebeb; font-weight: normal;}
|
|
.table.table-bordered tbody > tr > th.th-head { background:#ebebeb; }
|
|
.table.table-bordered tbody > tr > td.th-head { background:#ebebeb; }
|
|
.table.table-bordered tbody > tr > td.td-head { background:#f5f5f5; }
|
|
.table-bordered > thead > tr > th,
|
|
.table-bordered > thead > tr > td,
|
|
.table-bordered > tbody > tr > th,
|
|
.table-bordered > tbody > tr > td,
|
|
.table-bordered > tfoot > tr > th,
|
|
.table-bordered > tfoot > tr > td { border:1px solid #d5d5d5; }
|
|
.table > thead > tr > th,
|
|
.table > thead > tr > td,
|
|
.table > tbody > tr > th,
|
|
.table > tbody > tr > td,
|
|
.table > tfoot > tr > th,
|
|
.table > tfoot > tr > td { text-align:left; vertical-align:middle; font-size: 14px; padding: 6px 6px; white-space:normal;}
|
|
.table > tbody > tr > th.td-head,
|
|
.table > tbody > tr > td.td-head,
|
|
.table > tfoot > tr > th.td-head,
|
|
.table > tfoot > tr > td.td-head { text-align:center; vertical-align:middle; }
|
|
|
|
.table.table-small > thead > tr > th,
|
|
.table.table-small > thead > tr > td,
|
|
.table.table-small > tbody > tr > th,
|
|
.table.table-small > tbody > tr > td,
|
|
.table.table-small > tfoot > tr > th,
|
|
.table.table-small > tfoot > tr > td { padding: 0px 6px;}
|
|
|
|
.table.table-medium > thead > tr > th,
|
|
.table.table-medium > thead > tr > td,
|
|
.table.table-medium > tbody > tr > th,
|
|
.table.table-medium > tbody > tr > td,
|
|
.table.table-medium > tfoot > tr > th,
|
|
.table.table-medium > tfoot > tr > td { padding: 2px 6px;}
|
|
|
|
.table > tbody > tr > td.td-head .k-input { text-align:left;}
|
|
|
|
.table-scrollable .table-bordered > thead > tr > th:first-child,
|
|
.table-scrollable .table-bordered > tbody > tr > th:first-child,
|
|
.table-scrollable .table-bordered > tfoot > tr > th:first-child,
|
|
.table-scrollable .table-bordered > thead > tr > td:first-child,
|
|
.table-scrollable .table-bordered > tbody > tr > td:first-child,
|
|
.table-scrollable .table-bordered > tfoot > tr > td:first-child {border-left:0;}
|
|
|
|
.table.table-border-none {
|
|
|
|
}
|
|
.table.table-border-none > tbody > tr > td,
|
|
.table.table-border-none > tbody > tr > th,
|
|
.table.table-border-none > tfoot > tr > td,
|
|
.table.table-border-none > tfoot > tr > th,
|
|
.table.table-border-none > thead > tr > td,
|
|
.table.table-border-none > thead > tr > th {
|
|
border: none;
|
|
}
|
|
|
|
.table.table-file {
|
|
margin-top: 20px;
|
|
}
|
|
.table.table-file > tbody > tr > td {
|
|
border-top: none;
|
|
}
|
|
.table.table-file > tbody > tr > td.td-head {
|
|
background-color: #eef2f5;
|
|
border-bottom: 2px solid #fff;
|
|
}
|
|
.file-preview-img {
|
|
border: 2px solid #727272;
|
|
}
|
|
|
|
.table.table-border-none.table-thead-bg {
|
|
border: 1px solid #d1d1d1;
|
|
}
|
|
.table.table-border-none.table-thead-bg > thead > tr > th.td-head {
|
|
background-color: #eef2f5;
|
|
padding: 0.5em 0.6em 0.4em 0.6em;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-panel { display:table; width:100%; background-color:#f3f3f3; border:1px solid #d5d5d5; padding:12px; margin-bottom:20px; }
|
|
.search-panel.table .btn-search { display:block; height:100%; line-height:1.44; margin:0px; }
|
|
.search-panel.table td { height:auto; text-align:left; }
|
|
.search-panel.table td.td-head { background-color:#e8e8e8; text-align:center; white-space:nowrap; }
|
|
.search-panel input, .search-panel select {margin:0px 4px 0px 0px; }
|
|
.search-panel .btn {padding: 3px 14px !important;}
|
|
.search-panel .btn-search {width: auto; height: auto; margin-left: 10px; padding: 0px; border: none;}
|
|
|
|
.btn-search {width: auto; height: auto; margin: 0px; padding: 0px; border: none;}
|
|
|
|
.table input,
|
|
.table select,
|
|
.table textarea,
|
|
.table .input {margin: 0px;}
|
|
|
|
.table-content-item {min-height: 200px;}
|
|
.table-top-btn-group {position: relative; width: 100%; display: table; box-sizing: border-box; text-align: right; padding-bottom: 20px;}
|
|
.table-bottom-btn-group {position: relative; width: 100%; display: table; box-sizing: border-box; text-align: right; padding-top: 20px;}
|
|
.table-top-btn-group a,
|
|
.table-bottom-btn-group a {margin: 0px 4px;}
|
|
.table-top-btn-group a:last-child,
|
|
.table-bottom-btn-group a:last-child {margin-right: 0px;}
|
|
|
|
/* 페이징 */
|
|
.table-paging {width: 100%; margin-top: 10px;}
|
|
.table-paging .navi_cur, .table-paging .navi {padding: 2px 8px; border:1px solid #dadada; border-radius: 8px; vertical-align: middle;}
|
|
.table-paging .navi_cur,
|
|
.table-paging.table-paging-pds .navi_cur + .navi {color: #fff; font-weight: bold; border:1px solid #19b3e5; background-color:#19b3e5;}
|
|
.table-paging.table-paging-pds .navi {margin: 0px 4px 0px 0px;}
|
|
|
|
|
|
.page-top-search {
|
|
display: table;
|
|
width: 100%;
|
|
background-color: #efefef;
|
|
border: 1px solid #d5d5d5;
|
|
border-radius: 5px;
|
|
padding: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.page-top-search .k-dropdown {
|
|
min-width: auto;
|
|
}
|
|
|
|
.page-top-search .btn {
|
|
font-size: 14px;
|
|
height: 34px;
|
|
line-height: 12px;
|
|
}
|
|
.page-top-search .btn::before {
|
|
width: 24px;
|
|
height: 24px;
|
|
top: 2px;
|
|
left: 8px;
|
|
}
|
|
|
|
/* ===================================
|
|
15. Others
|
|
====================================== */
|
|
|
|
/* ===================================
|
|
16. Popup notice
|
|
====================================== */
|
|
/* 2023.10.23 LHJ 팝업 미리보기 화면 추가 */
|
|
.popup_noti {
|
|
width: 500px;
|
|
height: 600px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.bg_noti:nth-child(1) {
|
|
flex-grow: 2.5;
|
|
background-color: #FFCCB3;
|
|
}
|
|
.bg_noti:nth-child(2) {
|
|
flex-grow: 1.5;
|
|
background-color: #FFF2D0;
|
|
}
|
|
.bg_noti:nth-child(3) {
|
|
flex-grow: 6;
|
|
background-color: #DCF1EA;
|
|
}
|
|
.bg_white {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 7%;
|
|
right: 7%;
|
|
bottom: 5%;
|
|
background-color: white;
|
|
border: 1px solid black;
|
|
}
|
|
.subject_noti {
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 7%;
|
|
right: 7%;
|
|
font-family: "NanumGothicB";
|
|
font-weight: bold;
|
|
font-size: 15pt;
|
|
overflow:hidden;
|
|
text-overflow: ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:2;
|
|
-webkit-box-orient:vertical;
|
|
}
|
|
.contents_noti pre {
|
|
display: block;
|
|
padding: inherit;
|
|
margin: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
color: inherit;
|
|
word-break: break-all;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
background-color: inherit;
|
|
border: inherit;
|
|
border-radius: inherit;
|
|
font-family: inherit;
|
|
}
|
|
.contents_noti {
|
|
position: absolute;
|
|
top: 27%;
|
|
left: 7%;
|
|
right: 7%;
|
|
bottom: 5%;
|
|
font-family: "Nanum Gothic";
|
|
font-size: 9pt;
|
|
overflow-y: auto;
|
|
text-overflow: ellipsis;
|
|
display:-webkit-box;
|
|
-webkit-line-clamp:10;
|
|
-webkit-box-orient:vertical;
|
|
}
|