-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
276 lines (243 loc) · 15.6 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
@charset "utf-8";
/* 스킵 내비게이션 */
#skip { }
#skip a {position: absolute; left: 0px; top: -35px; width: 140px; border: 1px solid #fff; color: #fff; text-align: center; background: #333; line-height: 30px;}
#skip a:active,
#skip a:focus {top: 0;}
/*
#skip a:hover {background: #f00; } 마우스를 오버 했을 때
#skip a:focus {background: blue; } 마우스를 클릭 했을 때
#skip a:active {background: white; } 마우스를 클릭하고 떼었을 때
*/
/* 레이아웃 */
#wrap { }
#header { height: 325px;
/*
background-image: url(../img/header_bg.jpg);
background-position: center top;
background-repeat: repeat-x;
*/
background : url(../img/header_bg.jpg) center top repeat-x; }
#contents { }
#footer { height: 200px; border-top: 1px solid #ccc; }
/* 컨텐츠 레이아웃 */
#cont_nav {background-color: #f6fdff; display: none;}
#cont_tit {background-color: #eaf7fd; background-color: rgba(154, 216, 244, 0.2); } /* ie9부터 적용 */
#cont_ban {background-color: #dceff7; }
#cont_cont { background-color: #fff; }
/* 컨테이너 */
.container {width: 990px; margin: 0 auto; /* background: rgba(255,255,255,0.3); */ }
/* 헤더 */
.header { }
.header .header-menu {text-align: right; }
.header .header-menu a {color: #fff; padding: 10px 0px 10px 13px; display: inline-block; }
.header .header-menu a:hover {color: #666; }
.header .header-tit {text-align: center; }
.header .header-tit h1 { color: #fff; background-color: #4aa8d4; display: inline-block; font-size: 28px; padding: 5px 20px 6px 20px; margin-top: 40px; font-weight: normal; text-transform: uppercase; }
.header .header-tit a {display: inline-block; background-color: #2698cb; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px; }
.header .header-icon { text-align: center; margin-top: 30px;}
.header .header-icon a { width: 60px;height: 60px; display: inline-block;
background: url(../img/icon@3.png); margin: 0 3px;}
.header .header-icon a.icon1 {background-position: 0px 0;}
.header .header-icon a.icon2 {background-position: 0px -60px;}
.header .header-icon a.icon3 {background-position: 0px -120px;}
.header .header-icon a.icon4 {background-position: 0px -180px;}
.header .header-icon a:hover.icon1 {background-position: -60px 0;}
.header .header-icon a:hover.icon2 {background-position: -60px -60px;}
.header .header-icon a:hover.icon3 {background-position: -60px -120px;}
.header .header-icon a:hover.icon4 {background-position: -60px -180px;}
/* 전체 메뉴*/
.nav {overflow: hidden; padding: 20px 0; }
/*.nav div { } .nav의 자식 중에 모든 div를 선택 */
.nav > div { float: left; width: 40%; }/* .nav의 자식 중에 첫 번째 자식만 선택 */
.nav > div:last-child {width: 20%; } /* ie9부터 사용가능 */
.nav > div.last ol li {width: 20%; }
.nav > div h3 { font-size: 18px;; color: #25a2d0; margin-bottom: 4px; font-weight: bold;}
.nav > div ol { overflow: hidden; }
.nav > div ol li { float: left; width: 50%; padding-bottom: 2px;}
.nav > div.last ol li {width: 100%; }
.nav > div ol li a:hover {text-decoration: underline; }
/* 타이틀 */
.tit {position: relative; text-align: center; }
.tit h2 {font-size: 40px; color:#2c94c4; letter-spacing: 2px; letter-spacing: 2px; padding: 5px 0; font-family: 'Nanum Brush Script', cursive; }
.tit .btn {width: 60px; height: 60px; display: block;
background: url(../img/icon@3.png); position: absolute; right: 0; top: 0; margin: 5px 0; }
.tit a.btn.on {background-position: 0px -660px;}
.tit a:hover.btn {background-position: -60px -660px;}
/* 배너 */
/*.ban {position: relative; padding: 24px 0 20px; margin-bottom: 30px; }
.ban a.prev {position: absolute; left: -70px; top: 60px; width: 43px; height: 43px; background-color: #ccc; background: url(../img/icon.png) -150px 0}
.ban a.next {position: absolute; right: -70px; top: 60px; width: 43px; height: 43px; background-color: #ccc; background: url(../img/icon.png) -150px -43px }
.ban a:hover.prev {background-position: -193px 0;}
.ban a:hover.next {background-position: -193px -43px;}
.ban ul {overflow: hidden; }
.ban ul li {float: left; width: 330px; }
.ban ul li:nth-child(2) {text-align: center; } ie9부터 적용
.ban ul li:last-child {text-align: right; } ie9부터 적용
.ban ul li.ban_img1 {text-align: left; }
.ban ul li.ban_img2 {text-align: center; }
.ban ul li.ban_img3 {text-align: right; }
.ban ul li img {border: 4px solid #dcdcdc; }
.ban ul li img:hover {border-color: #98dcdc;}*/
/* Slick 배너 */
.ban {padding: 24px 0 40px; margin-bottom: 30px;}
.ban img {border: 4px solid #dcdcdc;}
.ban img:hover {border-color: #98dcdc; }
.ban .slick-prev {position: absolute; left: -70px; top: 80px; width: 43px; height: 43px; background-color: #ccc; background: url(../img/icon.png) -150px 0; text-indent: -9999px;}
.ban .slick-next {position: absolute; right: -70px; top: 80px; width: 43px; height: 43px; background-color: #ccc; background: url(../img/icon.png) -150px -43px; text-indent: -9999px;}
.ban .slick-prev:hover {background-position: -193px 0;}
.ban .slick-next:hover {background-position: -193px -43px;}
.slick-slide {margin: 12px; }
.slick-dots {position: absolute; bottom: 15px; display: block; width: 100%; text-align: center;}
.slick-dots li {display: inline-block; width: 15px; height: 15px; margin: 5px;}
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 15px; height: 15px; cursor: pointer; background: #5dbfeb; border-radius: 50%; }
.slick-dots li.slick-active button {background: #2b91c8; }
/* 컨텐츠 박스 요소 width = padding + magin + border */
.cont {overflow: hidden; }
.cont .column { position: relative; float: left; width: 289px; height: 363px; margin: 0 30px 30px 0; padding-right: 30px; }
.cont .col1 {border-right: 1px solid #c8c8c8; }
.cont .col2 {border-right: 1px solid #c8c8c8; }
.cont .col3 { margin-right: 0; padding-right: 0; }
.cont .col4 {border-right: 1px solid #c8c8c8; }
.cont .col5 { border-right: 1px solid #c8c8c8; }
.cont .col6 { margin-right: 0; padding-right: 0; }
.cont .column .ico_img { display:block; width: 60px; height: 60px; background: url(../img/icon.png);
position: absolute; left: 0; top: 0; }
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4; }
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px;}
.cont .col1 .ico_img {background-position: 0px -240px;}
.cont .column.col2 .ico_img {background-position: 0px -300px;}
.cont .col3 .ico_img {background-position: 0px -360px;}
.cont .col4 .ico_img {background-position: 0px -420px;}
.cont .col5 .ico_img {background-position: 0px -480px;}
.cont .col6 .ico_img {background-position: 0px -540px;}
.cont .col1 .ico_img:hover {background-position: -60px -240px;}
.cont .column.col2 .ico_img:hover {background-position: -60px -300px;}
.cont .col3 .ico_img:hover {background-position: -60px -360px;}
.cont .col4 .ico_img:hover {background-position: -60px -420px;}
.cont .col5 .ico_img:hover {background-position: -60px -480px;}
.cont .col6 .ico_img:hover {background-position: -60px -540px;}
/* 게시판 */
.notice { position: relative; }
.notice h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; }
.notice ul li { overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 10px;}
.notice a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px; }
.notice a.more:hover { background-position: -167px -90px; }
/* 게시판 2 */
.notice2 {position: relative; margin-top: 20px; }
.notice2 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; }
.notice2 li { overflow: hidden; background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 10px;}
.notice2 li a {float: left; width: 60%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice2 li span { float: right; width: 30%;text-align: right;}
.notice2 a.more { position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
.notice2 a.more:hover { background-position: -167px -90px; }
/* 게시판3 */
.notice3 {position: relative; }
.notice3 h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; }
.notice3 li {position: relative; padding: 8px 0 13px 60px; }
.notice3 li a img {position: absolute; left: 0; top: 0; width: 50px; border: 1px solid skyblue; }
.notice3 li a strong { display: block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice3 li a span { display: block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice3 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px; }
.notice3 a.more:hover { background-position: -167px -90px; }
/* 팝업 */
.popup h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}
.popup ul { overflow: hidden; }
.popup li { float: left; width: 93px; margin-right: 5px;}
.popup li:last-child {margin-right: 0; }
.popup li.last {margin-right: 0; }
.popup li a img { width: 100%; }
/* 마우스 오버효과1 */
.notice_hover h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}
.notice_hover ul { overflow: hidden; }
.notice_hover li { float: left; width: 93px; margin-right: 5px; text-align: center; }
.notice_hover li:last-child { margin-right: 0; }/* ie9부터 적용 */
.notice_hover li.last { margin-right: 0; }/* 모든 브라우저 버전 적용 */
.notice_hover li a span {position: relative; display: block; width: 93px; height: 93px; line-height: 93px; }
.notice_hover li a span img {width: 93px; }
.notice_hover li a span em { visibility: hidden; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); color: #fff; width: 100%; height: 100%; text-align: center; } /* rgba ie9부터 적용*/
.notice_hover li a span:hover em {visibility: visible; }
.notice_hover li a strong { padding-top: 3px; display: inline-block; }
/* 마우스 오버효과2 */
.notice_hover2 ul { overflow: hidden; }
.notice_hover2 li { float: left; width: 93px; margin-right: 5px; text-align: center; }
.notice_hover2 li:last-child { margin-right: 0; }/* ie9부터 적용 */
.notice_hover2 li.last { margin-right: 0; }/* 모든 브라우저 버전 적용 */
.notice_hover2 li a span {position: relative; display: block; width: 93px; height: 93px; }
.notice_hover2 li a span img {width: 93px; }
.notice_hover2 li a span em { visibility: hidden; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,0.7); color: #fff; width: 100%; height: 20%; text-align: center; } /* rgba ie9부터 적용*/
.notice_hover2 li a span:hover em {visibility: visible; }
.notice_hover2 li a strong { padding-top: 3px; display: inline-block; }
/* 탭 메뉴 */
.tab_menu {position: relative; border: 1px solid #ccc; padding: 9px; height: 105px; }
.tab_menu ul {overflow: hidden; border-bottom: 1px solid #ccc; }
.tab_menu ul li {float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; }
.tab_menu ul li a {padding: 5px 10px; display: block; }
.tab_menu ul li ul {position: absolute; left: 0; top: 48px; border: 0; width: 270px;}
.tab_menu ul li ul li { padding-left: 1px; float: none; border: 0; }
.tab_menu ul li ul li a { float: left; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0 3px 0; background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 10px; margin-left: 10px;}
.tab_menu ul li.active { background: #2c94c4;}
.tab_menu ul li.active a { color: #fff;}
.tab_menu ul li.active ul li a { color: #333; }
/* 탭 메뉴2 */
.notice4 {position: relative; margin-top: 20px; border: 1px solid #ccc; height: 115px; }
.notice4 h4 {font-size: 14px; color: black; border-bottom: 1px solid #ccc; margin-bottom: 8px; font-weight: 700; padding: 8px 10px;}
.notice4 h4 em {color: #cf3292;}
.notice4 li { overflow: hidden; background: url(../img/dot.gif) no-repeat 0 9px; padding-left: 5px; margin: 0 10px; }
.notice4 li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 8px;}
.notice4 li span { float: right; width: 30%; text-align: right;}
.notice4 a.more { position: absolute; right: 9px; top: 9px; }
/* 갤러리 */
.gallery {position: relative; border: 1px solid #ccc; height: 252px; overflow: hidden; }
.gallery h4 { font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold; }
.gallery .gallery_btn {position: absolute; right: 5px; top: 7px; }
.gallery .gallery_btn ul {overflow: hidden; }
.gallery .gallery_btn li {float: left; margin: 1px 2px;}
.gallery .gallery_btn ul li a {width: 23px; height: 23px; display: block; background: url(../img/icon.png) no-repeat; }
.gallery .gallery_btn ul a.start {background-position: -150px -120px;}
.gallery .gallery_btn ul a.stop {background-position: -150px -143px;}
.gallery .gallery_btn ul a.preview {background-position: -150px -166px;}
.gallery .gallery_btn ul a.next {background-position: -150px -189px;}
.gallery .gallery_btn ul a:hover.start {background-position: -173px -120px;}
.gallery .gallery_btn ul a:hover.stop {background-position: -173px -143px;}
.gallery .gallery_btn ul a:hover.preview {background-position: -173px -166px;}
.gallery .gallery_btn ul a:hover.next {background-position: -173px -189px;}
.gallery .gallery_img img { width: 100%; }
.gallery .gallery_btn ul li a span{ }
/* slick 갤러리 */
.gallery .gallery_img .slick-slide {margin: 0; }
.gallery .gallery_btn button {float: left; margin: 1px 2px; width: 23px; height: 23px; display: block; background: url(../img/icon.png) no-repeat; }
.gallery .gallery_btn .gb_icon1 {background-position: -150px -120px;}
.gallery .gallery_btn .gb_icon2 {background-position: -150px -143px;}
.gallery .gallery_btn .gb_icon3 {background-position: -150px -166px;}
.gallery .gallery_btn .gb_icon4 {background-position: -150px -189px;}
.gallery .gallery_btn .gb_icon1:hover {background-position: -173px -120px;}
.gallery .gallery_btn .gb_icon2:hover {background-position: -173px -143px;}
.gallery .gallery_btn .gb_icon3:hover {background-position: -173px -166px;}
.gallery .gallery_btn .gb_icon4:hover {background-position: -173px -189px;}
/* 로그인 */
#login-wrap {border: 1px solid #ccc; height: 120px; margin-bottom: 15px; padding: 15px; }
.login_header {overflow: hidden; font-size: 12px; height: 30px; }
.login_header .lh_check {float: left; padding-right: 15px;}
.login_header .lh_check .input_check { vertical-align: -2px; }
.login_header .lh_ip {float: left; }
.login_header .lh_ip em {color: #0093bd; text-decoration: underline; }
.login_content {position: relative; }
.login_content .lc_btn {position: absolute; right: 0; top: 0; width: 62px; height: 47px; background: #fff; border: 1px solid #bebebe; }
.login_content .input_text { width: 180px; height: 16px; padding: 2px 5px; border: 1px solid #bebebe; margin-bottom: 3px; background: #fff; }
.login_footer {margin-top: 5px; }
.login_footer li {display: inline; }
.login_footer li a { font-size: 12px; }
/* 푸터 */
.footer {text-align: center; padding: 25px 0; }
.footer ul { margin-bottom: 20px; }
.footer ul li {position: relative; display: inline; padding: 0 5px 0 7px; }
.footer ul li:before {content: ' '; width: 1px; height: 12px; background-color: #ccc; position: absolute; left: 0; top: 2px; }
.footer ul li:first-child:before {width: 0; height: 0;}
.footer .w3c { margin-top: 10px; }
/* 레이어 팝업 */
#layer {display: none; position: fixed; left: 50px; top: 50px; width: 600px; border: 10px solid #dceff7; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); }
#layer img {width: 100%; display: block;}
#layer .close {position: absolute; right: 20px; top: 20px; background: #0093bd; padding: 1px 6px; color: #fff;}
#layer .close:hover {text-decoration: underline;}