로그인

검색

편집파일
2017.12.06 18:39

/layouts/xe_kimtajo_layout/css

조회 수 208 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
@charset "utf-8";

/* Common */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none
}
body, html {
width: 100%;
height: 100%;
min-width: 1240px;
}
body, input, textarea, select, button, table {
font-family: 'Open Sans', '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased
}
img, fieldset, button {
border: 0
}
ul, ol {
list-style: none
}
em, address {
font-style: normal
}
a {
text-decoration: none
}
a:hover, a:active, a:focus {
text-decoration: none
}
.blind {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
font-size: 0;
line-height: 0
}
.edge {
position: absolute;
top: 12px;
right: 4px;
width: 0;
height: 0;
border-width: 0 8px 8px;
border-style: solid;
border-color: transparent transparent #333
}
.clear {
clear: both
}
/* Skip to content */
.skip {
margin: 0
}
.skip > a {
display: block;
overflow: hidden;
height: 0;
line-height: 28px;
text-align: center
}
.skip > a:focus {
height: auto
}
/* Layout */
.container {
min-width: 1400px;
background-color: #fff
}
.header {
position: relative;
z-index: 2;
width: 1200px;
height: 100%;
margin: 0 auto;
zoom: 1
}
.header > .side {
float: right;
z-index: 2;
margin: 39px 0 0 22px;
line-height: 20px
}
.visual {
overflow: hidden;
position: relative;
z-index: 1;
width: 100%
}
.body {
position: relative;
padding: 0px 0           /* 기본 0px 0  */
}
.body .content {
}
.body.fixed-width {
width: 1200px;
margin: 0 auto
}
.header:after, .body:after {
display: block;
clear: both;
content: ''
}
.content {
zoom: 1
}
.content:after {
display: block;
clear: both;
content: ''
}
.content > :first-child {
margin-top: 0
}
.content img {
max-width: 100%;
height: auto
}
/* Header */
.header > h1 {
float: left;
padding: 20px 0; 
margin-right: 32px;
line-height: 60px;

}
.header > h1 img {
vertical-align: middle;
max-height: 40px;

}
/* Fixed Header */
.container.fixed_header {
padding-top: 100px
}
.fixed_header .header_wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
width: auto;
z-index: 1000;
padding: 0;
background-color: #70befd;  /* header color  */

}
.fixed_header .header_wrap.shrink {
position: fixed;
top: 0;
width:auto;
min-width: 1240px;
z-index: 1000;
border-bottom: 1px solid #e1e1e1;
background-color: #70befdd4;
-webkit-animation: ani-header 0.5s forwards;
animation: ani-header 0.5s forwards;
left: 0;
right: 0;
}
.fixed_header .header_wrap.shrink .header > h1 {
padding: 0
}
.fixed_header .header_wrap.shrink .gnb > ul > li > a {
line-height: 60px
}
.fixed_header .header_wrap.shrink .header > .side {
margin: 19px 0 0 22px
}
.fixed_header .header_wrap.shrink .search_area {
padding: 0 20px
}
/* Footer */
.footer {
border-top: 1px solid #e4e4e4;
border-bottom: 3px solid #cda25a;
background-color: #f1f1f1;
font-family: 'Open Sans', '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif
}
.footer a:hover, .footer a:focus {
text-decoration: none
}
.footer .f_info_area {
overflow: hidden;
width: 1200px;
margin: 0 auto;
padding: 48px 0 40px
}
.footer .f_cr_area {
padding: 19px;
background-color: #555
}
.footer .bottom {
width: 1200px;
margin: 0 auto;
font-size: 13px;
color: #f1f1f1;
line-height: 5px
}
.footer .bottom a {
color: #f1f1f1
}
.footer .bottom a:hover,
.footer .bottom a:focus,
.footer .bottom a:active {
color: #cda25a
}
.footer .bottom > .copyright {float:left;}
.footer .bottom > .FNB2 > a{margin-right:20px; float:right;}
.footer .bottom span {
display: inline-block;
}
.footer .sub_desc {
margin-bottom: 16px;
font-size: 13px;
color: #888;
line-height: 22px
}
.footer .f_info {
float: left;
width: 240px;
margin-right: 65px
}
.footer .f_logo {
overflow: hidden;
max-width: 100%;
margin-bottom: 16px;
font-size: 24px;
color: #555
}
.footer .f_logo.log_txt a {
font-size: 24px;
font-weight: bold;
color: #555
}
.footer .f_logo img {
max-width: 240px
}
.footer .f_info2 {
overflow: hidden;
margin-top: 7px
}
.footer .site_map > ul {
display: inline-block;
overflow: hidden;
background: url(../img/bg_sitemap.png) repeat-y
}
.footer .site_map > ul li {
float: left;
width: 282px;
margin: 0 0 0 24px
}
.footer .site_map > ul li:first-child, .footer .site_map > ul li.clear {
clear: both;
margin-left: 0
}
.footer .site_map > ul li a {
display: inline-block;
margin: 0 0 20px;
padding: 0 23px;
font-size: 15px;
font-weight: bold;
color: #555
}
.footer .site_map > ul ul {
overflow: hidden;
margin: 0 0 10px
}
.footer .site_map > ul ul li {
margin-left: 0
}
.footer .site_map > ul ul a {
margin: 0 0 13px;
font-size: 13px;
font-weight: normal;
color: #888;
line-height: 18px
}
.footer .site_map > ul ul a:hover,
.footer .site_map > ul ul a:focus,
.footer .site_map > ul ul a:active {
color: #555
}
.footer .f_cr_area .mobile-footer-member {
display: none;
}
/* button */
.btn_item {
display: inline-block;
margin: 35px 0;
padding: 0 27px;
height: 50px;
font-family: "Open Sans";
background-color: #c7cd5a;
font-size: 14px;
line-height: 50px;
letter-spacing: 1px;
color: #FFF;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.btn_item:hover,
.btn_item:active
.btn_item:focus {
background-color: #CBA061;
color: #fff
}
.btn_item + .btn_item {
margin-left: 10px;
}
.popup_btn {
background-color: #CBA061;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
.popup_btn:hover {
background-color: #555;
}
.popup_btn.b-close, .popup_btn.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}


/* Login */
.header > .side > ul > li {
float: left;
position: relative
}
.header > .side > ul:after {
display: block;
clear: both;
content: ''
}
.header > .side > ul > li > a {
display: block;
width: 22px;
height: 22px;
margin-left: 12px;
font-size: 22px;
line-height: 22px;
color: #fff;
text-align: center
}
.header > .side > ul > li > a:hover, .header > .side > ul > li > a:focus, .header > .side > ul > li > a:active, .header > .side > ul > li.on > a {
color: #cda25a
}
.header > .side > ul .ly {
position: relative;
position: absolute;
top: 100%;
right: 0;
margin-top: 13px;
background-color: #4bb1ec
}
.header > .side > ul .ly.ly_login {
overflow: hidden;
margin-top: 0;
background: url('../img/blank.gif') 0 0 repeat;
height: 0
}
.header > .side > ul .ly.ly_login ul {
position: relative;
margin-top: 18px;
padding: 8px 0;
background-color: #fff;
z-index: 3
}
.header > .side > ul .on .ly.ly_login {
height: auto
}
.header > .side > ul .ly a {
display: block;
min-width: 120px;
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 13px;
color: #3babe6
}
.header > .side > ul .ly a:hover {
color: #f3b517;
text-decoration: none
}
.header > .side > ul > li .login_after {
overflow: hidden;
width: 40px;
height: 40px;
margin-top: -9px;
border-radius: 100%
}
.header > .side > ul > li .login_after img {
width: 40px;
height: 40px
}
.header > .side > ul > li .login_after ~ .ly_login .edge {
right: 11px
}

/* Search */
.search_wrap {
position: relative;
width: 1200px;
margin: 0 auto
}
.search_area {
display: none;
position: absolute;
top: 0;
left: 0;
width: 1160px;
padding: 20px;
z-index: 3;
z-index: 3
}
.search_area input {
font-size: 13px;
vertical-align: top
}
.search_area input[type=text] {
position: relative;
width: 100%;
height: 40px;
padding: 10px 0;
border: 0;
background-color: rgba(249, 249, 249);
font-size: 40px;
color: #444;
-webkit-appearance: none;
}
.search_area input[type=text]:focus {
outline: 0
}
.search_area input[type=text]::-ms-clear {
display: none
}
.search_area .btn_close {
position: absolute;
top: 50%;
right: 0;
width: 20px;
height: 20px;
margin-top: -10px;
font-size: 22px;
color: #888;
text-align: center;
line-height: 20px
}
/* GNB */
.gnb {
    float: left;
    position: relative;
    z-index: 1;
    max-width: 742px;
    height: 100%;
    font-size: 13px
}
.gnb a {
    text-decoration: none;
    white-space: nowrap
}
.gnb > ul > li {
    float: left;
    position: relative;
    text-align: left
}
.gnb > ul:after {
    display: block;
    clear: both;
    content: ''
}
.gnb > ul > li > a {
    display: block;
    position: relative;
    padding: 0 20px;
    line-height: 100px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: blink;
}
.gnb > ul > li > a:hover,
.gnb > ul > li > a:focus,
.gnb > ul > li > a:focus,
.gnb > ul > li.on > a {
    background-color: #efc630;  /*메뉴 영역 hover 색상  */
color: #2196F3;
}
.gnb > ul .depth2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    padding: 8px 0;
    background-color: #fff
}
.gnb > ul .depth2 > li {
    position: relative
}
.gnb > ul .depth2:after {
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #cda25a;
    content: ''
}
.gnb > ul .depth2 a {
    display: block;
    position: relative;
    min-width: 170px;
    height: 40px;
    padding: 0 30px 0 20px;
    line-height: 40px;
    font-size: 13px;
    color: #9d9d9d
}
.gnb > ul .depth2 a:hover,
.gnb > ul .depth2 a:active,
.gnb > ul .depth2 a:focus,
.gnb > ul .depth2 > li.on > a {
    color: #cda25a
}

/*yck 추가 2차메뉴 hover 배경색상  */
.gnb > ul .depth2> li > a:hover {

background-color: #1bb4fe;
color: #fff;
    text-decoration: blink;   /* 2차메뉴 밑줄 없애기  */

}




.gnb > ul .depth3 {
    display: none;
    position: absolute;
    top: -8px;
    left: 100%;
    z-index: 2;
    padding: 8px 0;
    background-color: #333
}
.gnb > ul .depth2 > li.more > a:after {
    position: absolute;
    right: 20px;
    content: '>'
}
.onepage .shrink .header > .side > ul > li > a {
    color: #444;
}
.onepage .shrink .gnb {
    margin-top: 0;
}
.magazine .shrink .gnb {
    margin-bottom: 10px;
}
.magazine .shrink h1 {
    margin-top: 10px;
}
.magazine .header_wrap.shrink .gnb > ul > li > a {
    line-height: 40px;
}
/* VISUAL */
.visual.sub {
position: relative;
padding: 35px 0;
background-color: #f6f6f6;
line-height: 30px
}
.visual.sub .sub_title {
position: relative;
z-index: 2;
width: 1200px;
margin: 0 auto
}
.visual.sub .sub_title h1 {
position: relative;
font-weight: 700;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
font-size: 17px;
color: #444
}
.visual.sub .sub_title h1:after {
position: absolute;
top: 115%;
left: 0;
width: 22px;
height: 2px;
background-color: #444;
content: ''
}
.visual.sub .bg_img {
/*display: none;*/
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover
}
.visual.sub.sub_type2 {
padding: 70px 0
}
.visual.sub.sub_type2 .bg_img {
display: block
}
.visual.sub.sub_type2 .sub_title h1 {
color: #fff;
font-weight: 400;
font-size: 23px;
letter-spacing: 1px
}
.visual.sub.sub_type2 .sub_title h1:after,
.visual.sub.sub_type3 .sub_title h1:after {
background: none
}
.visual.sub.sub_type3 {
padding: 250px 0 210px;
line-height: 40px;
text-align: center
}
.visual.sub.sub_type3 .bg_img {
display: block;
background-attachment: fixed;
background-size: auto auto
}
.visual.sub.sub_type3 .sub_title h1 {
font-size: 39px;
font-weight: 400;
color: #fff;
letter-spacing: 2px
}
/* LNB */
.body.fixed-width.right .lnb {
   float: right;
   background-color: aliceblue;


}

.body.fixed-width .lnb > ul {
position: relative;
z-index: 1;
margin-top: 15px;
padding: 40px 0 0
background-color: #3300cc

    margin-top: 15px;
}
.body.fixed-width .lnb > ul > li {
margin-bottom: 20px    /*서브메뉴 위아래 간격 */
}
.body.fixed-width .lnb > ul > li > a,
.body.fixed-width .lnb > ul > li > span {
display: block;
line-height: 21px;
padding: 0 30px 0 20px;
/*
margin-bottom: 5px;
    margin-left: 15px;
    margin-top: 15px;

*/
font-size: 15px;
color: #444

}

.body.fixed-width .lnb ul ul li.on a {
color: #fff
}


/*충기추가  hover 시 배경 색상  */
.body.fixed-width .lnb > ul > li > a:hover {

display: block;
    line-height: 21px;
    font-size: 15px;
    color: #fff;
    background-color: #1bb4fe;
padding: 10px 10px 10px 10px;
}



.body.fixed-width .lnb ul ul a {
display: block;
padding: 10px 0px 10px 20px;
font-size: 14px;
line-height: 20px;
color: #888;
text-decoration: none
}
.body.fixed-width .lnb ul ul a:hover,
.body.fixed-width .lnb ul ul a:focus,
.body.fixed-width .lnb ul ul a:active {
background-color: #d4e8a3;
color: #cda25a
}
.body.fixed-width .lnb img {
vertical-align: top
}
.body.fixed-width.left .lnb,
.body.fixed-width.right .lnb {
float: left;
width: 260px;
padding: 0 0 16px
}
.body.fixed-width.left .content,
.body.fixed-width.right .content {
float: right;
width: 900px;
min-height: 400px;
padding: 40px 0 100px
}
.body.fixed-width.right .lnb {
float: right
}
.body.fixed-width.right .content {
float: left
}
.body.fixed-width.none .lnb {
display: none
}
.body.fixed-width.none .content {
float: none;
width: 1200px
}

/* Scroll to top link */
.btn_top {
display: none;
position: fixed;
right: 0;
bottom: 57px;
z-index: 1000;
width: 48px;
height: 48px;
background-color: #8fb5d6;
font-size: 24px;
color: #fff;
text-align: center;
opacity: 0.8;
filter: alpha(opacity=80);
border-radius: 50%;
}
.btn_top:hover {
background-color: #1672c1;
color: #fff;
text-decoration: none;
opacity: 1;
filter: alpha(opacity=100)
}
.btn_top i {
line-height: 48px
}
/*
.swiper-container {
height: 600px;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif;
}*/

.swiper-container > div > div {
display: table;
height: 600px;
color: #fff;
background-size: cover;
}
.swiper-container > div > div > div {
display: table-cell;
vertical-align: middle;
}
.swiper-container > div > div > div > div {
width: 1200px;
margin: 0 auto;
}
.swiper-container h1 {
font-weight: 700;
margin: 0 0 19px 0;
font-size: 60px;
line-height: 70px;
text-decoration: none;
}
.swiper-container p {
font-size: 20px;
line-height: 22px;
}
.swiper-button {
position: absolute;
top: 50%;
display: none;
margin:-25px 0 0 0;
}
.swiper-container:hover .swiper-button {
display: block;
}
.swiper-button.left {
left: 20px;
}
.swiper-button.right {
right: 20px;
}
.swiper-button i {
width: 50px;
line-height: 50px;
text-align: center;
font-size: 24px;
color: #fff;
}
.swiper-button button {
background-color: #333;
border-radius: 50px;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.swiper-pagination {
position: absolute;
left: 0;
text-align: center;
bottom: 5px;
width: 100%;
}
.swiper-pagination-switch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #fff;
opacity: 0.6;
margin: 0 3px;
cursor: pointer;
}
.swiper-active-switch {
background: #fff;
opacity: 1;
}

@media all and (max-width: 479px) {
body, html {
min-width: 100%;
}
a.btn_top {
display: none;
}
/* Layout */
.container {
min-width: 100%;
background-color: #fff
}
.header {
position: relative;
z-index: 2;
width: 100%;
height: auto;
margin: 0 auto;
zoom: 1
}
.header > .side {
display: none;
}
.body.fixed-width {
width: auto;
margin: 0
}
.header:after, .body:after {
clear: both;
content: ''
}
.body {
padding: 0;
}
.content {
zoom: 1;
}
.content:after {
clear: both;
content: ''
}
.content > :first-child {
margin-top: 0;
}
.body.fixed-width.none .content {
width:auto;
}
.content img {
max-width: 100%;
height: auto
}
.body.fixed-width.left .content,
.body.fixed-width.right .content {
width: auto;
float: none;
min-height: 100%;
padding: 40px 0;
}
/* Header */
.header > h1 {
float: none;
margin-right: 0;
padding: 0 15px;
line-height: 50px;
display: block;
}
.header > h1 img {
max-height: 15px;
padding: 0;
margin: 0;
}
.header.sub_type3 {
position: absolute;
}
/* Fixed Header */
.container.fixed_header {
padding-top: 0
}
.header_wrap.shrink {
display: none;
}
.fixed_header .header_wrap {
position: static;
top: 0;
left: 0;
width: 100%;
z-index: 1000
}
.fixed_header .header_wrap.shrink {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid #e1e1e1;
background-color: #fff;
-webkit-animation: ani-header 0.5s forwards;
animation: ani-header 0.5s forwards
}
.fixed_header .header_wrap.shrink .header > h1 {
padding: 0
}
.fixed_header .header_wrap.shrink .gnb > ul > li > a {
line-height: 60px
}
.fixed_header .header_wrap.shrink .header > .side {
margin: 19px 0 0 22px
}
.fixed_header .header_wrap.shrink .search_area {
padding: 0 20px
}
/* Footer */
.footer {
border-top: 1px solid #e4e4e4;
border-bottom: 3px solid #cda25a;
background-color: #f1f1f1;
}
.footer a:hover, .footer a:focus {
text-decoration: none
}
.footer .f_info_area {
width: auto;
margin: 0;
padding: 0;
}
.footer .f_cr_area {
padding: 0;
background-color: #555;
color: #fff;
}
.footer .bottom {
width: auto;
margin: 0;
font-size: 12px;
color: #f1f1f1;
line-height: 16px
}
.footer .bottom span {
display: inline-block;
margin-left: 0px
}
.footer .bottom > .copyright {float:none;}
.footer .bottom > .FNB2 > a{margin-right:20px; float:none; display: none;}
.footer .sub_desc {
display: none;
}
.footer .f_info {
float: none;
width: auto;
margin-left: 0;
margin-right: 0;
}
.footer .f_logo {
padding: 8px 15px;
margin-bottom: 0;
}
.footer .f_logo.log_txt a {
font-size: 16px;
font-weight: bold;
color: #555
}
.footer .f_logo img {
max-width: auto;
max-height: 30px;
}
.footer .f_info2 {
display: none;
}
.footer .site_map {
display: none;
}
.footer .f_info2 {
display: none;
}
.footer .f_logo {
padding: 8px 15px;
}
.footer .f_logo img {
max-height: 30px;
}
.footer .sub_desc {
display: none;
}
.footer .f_cr_area {
padding: 0;
background-color: #555;
color: #fff;
}
.footer .f_cr_area p {
margin: 0;
padding: 8px 14px;
}
.footer .f_cr_area a {
color: #fff;
}
.footer .f_cr_area .mobile-footer-member {
padding: 0;
margin: 0;
border-top: 1px solid #444;
list-style: none;
overflow: hidden;
display: block;
}
.footer .f_cr_area .mobile-footer-member li {
float: left;
width: 50%;
border-left: 1px solid #444;
box-sizing: border-box;
}
.footer .f_cr_area .mobile-footer-member li:first-child {
border-left: 0;
}
.footer .f_cr_area .mobile-footer-member li a {
display: block;
line-height: 32px;
text-align: center;
}
/* button */
.btn_item {
display: inline-block;
margin: 35px 0;
padding: 0 27px;
height: 50px;
font-family: "Open Sans";
background-color: #555;
font-size: 14px;
line-height: 50px;
letter-spacing: 1px;
color: #FFF;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.btn_item:hover,
.btn_item:active
.btn_item:focus {
background-color: #CBA061;
color: #fff
}
.btn_item + .btn_item {
margin-left: 10px;
}
/* Login */
.header > .side {
display: none;
}
.header > .custom_area {
display:none;
}
/* Search */
.search_wrap {
display: none;
}
.gnb {
float: none;
position: static;
z-index: 1;
max-width: 100%;
height: 100%;
font-size: 1em;
background: #fff;
}
.gnb a {
white-space: normal;
font-size: 14px;
display: block;
padding: 10px 0;
border-top: 1px solid #eee;
}
.gnb > ul {
display: none;
padding: 0 14px 14px 14px;
max-height: 240px;
overflow-x: scroll;
border-bottom: 1px solid #eaeaea;
background: #fff;
-webkit-overflow-scrolling: touch;
}
.gnb > ul > li {
float: none;
position: static;
}
.gnb > ul > li:first-child > a {
border-top: 0;
}
.gnb > ul:after {
display: none;
}
.gnb > ul > li > a {
position: static;
padding: 10px 0;
line-height: normal;
font-size: normal;
color: #444;
font-weight: bold;
}
.gnb > ul .depth2 {
display: block;
position: static;
padding: 0;
background-color: #fff
}
.gnb > ul .depth2 > li {
position: static
}
.gnb > ul .depth2:after {
display: none
}
.gnb > ul .depth2 a {
position: static;
min-width: 100%;
height: auto;
padding: 10px 0;
line-height: normal;
color: #555;
}
.gnb > ul .depth3 {
display: block;
position: static;
background-color: #fff;
padding: 0;
}
.gnb > ul .depth3 a {
color: #999;
}
.gnb > ul .depth2 > li.more > a:after {
display: none;
}
/* GNB */
.gnb {
float: none;
position: static;
z-index: 1;
max-width: 100%;
height: 100%;
font-size: 1em;
display: block;
}
.gnb #mobile_menu_btn {
display: block;
}
.gnb .menu_btn {
height: 22px;
width: 44px;
display: block;
position: absolute;
top: 14px;
right: 3px;
display: inline-block;
}
.gnb .menu_btn .menu_bar {
width: 20px;
height: 14px;
position: relative;
top: 4px;
left: 12px;
}
.gnb .menu_btn .menu_bar div {
height: 0;
border-top: 2px solid #383431;
position: absolute;
}
.header.sub_type3 .gnb .menu_btn .menu_bar div {
border-top: 2px solid #fff;
}
.gnb .menu_btn .menu_bar div.btn1 {
width: 20px;
top: 0;
}
.gnb .menu_btn .menu_bar div.btn2 {
width: 20px;
top: 6px;
transition: all 0.1s
}
.gnb .menu_btn .menu_bar div.btn3 {
width: 20px;
bottom: 0;
}
.gnb .menu_btn.opened .menu_bar div.btn1 {
top: 6px;
width: 20px;
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.gnb .menu_btn.opened .menu_bar div.btn2 {
top: 6px;
display: none;
}
.gnb .menu_btn.opened .menu_bar div.btn3 {
top: 6px;
width: 20px;
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.body {
}
.body .lnb {
display: none;
}
.body .content {
overflow: hidden;
}
.visual {
box-sizing: border-box;
}
.visual.sub {
position: relative;
padding: 15px 14px 30px 14px;
background-color: #f6f6f6;
line-height: 30px
}
.visual.sub .sub_title {
position: relative;
z-index: 2;
width:auto;
margin:0;
}
.visual.sub .sub_title h1 {
position: relative;
font-weight: 700;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '맑은 고딕', 'Malgun Gothic', '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
font-size: 17px;
color: #444
}
.visual.sub .sub_title h1:after {
position: absolute;
top: 115%;
left: 0;
width: 22px;
height: 2px;
background-color: #444;
content: ''
}
.visual.sub .bg_img {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover
}
.visual.sub.sub_type2 {
padding: 40px 15px
}
.visual.sub.sub_type2 .bg_img {
display: block
}
.visual.sub.sub_type2 .sub_title h1 {
color: #fff;
font-weight: 400;
font-size: 23px;
letter-spacing: 1px
}
.visual.sub.sub_type2 .sub_title h1:after,
.visual.sub.sub_type3 .sub_title h1:after {
background: none
}
.visual.sub.sub_type3 {
padding: 80px 0 0;
line-height: 40px;
text-align: center
}
.visual.sub.sub_type3 .bg_img {
display: block;
background-attachment: fixed;
background-size: auto auto
}
.visual.sub.sub_type3 .sub_title {
padding:100px 0 70px 0;
}
.visual.sub.sub_type3 .sub_title h1 {
font-size: 23px;
font-weight: 400;
color: #fff;
letter-spacing: 2px
}
.swiper-container {
height: 270px;
font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif;
}
.swiper-container > div > div {
display: table;
height: 270px;
color: #fff;
}
.swiper-container > div > div > div {
display: table-cell;
vertical-align: middle;
}
.swiper-container > div > div > div > div {
padding: 0 14px;
width: auto;
margin: 0;
}
.swiper-container h1 {
font-weight: 600;
margin: 0 0 10px 0;
font-size: 24px;
line-height: 30px;
text-decoration: none;
}
.swiper-container p {
font-size: 14px;
line-height: 18px;
}

}
/* header animation */
@-webkit-keyframes ani-header {
0% {
top: -60px
}
100% {
top: 0px
}
}
@keyframes ani-header {
0% {
top: -60px
}
100% {
top: 0px
}
}

 

Who's 꽃지닷컴

profile

Respect yourself and others will respect you

- 창의적 사고를 하자!

- 소규모 웹사이트 제작 및 수정 (24시간 항시대기)

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 XE/Rhmix 오라클 클라우드 - 우분투(Ubuntu) php7.3에서 php7.4로 업그레이드 하기 꽃지닷컴 2022.03.17 88
공지 XE/Rhmix 라이믹스,XE 외부페이지 php 보안관련 꽃지닷컴 2022.03.16 90
공지 XE/Rhmix PHP PDO CRUD with ajax jQuery and Bootstrap 회원관리(사진등록) file 꽃지닷컴 2021.03.19 668
공지 XE/Rhmix soengsouy- PHPCRUD ALL FILE file 꽃지닷컴 2021.03.19 130
공지 XE/Rhmix [구매하자] CRUD Application with PHP, PDO, and MySQL secret 꽃지닷컴 2021.03.19 0
공지 XE/Rhmix 라이믹스 사이트 모음 꽃지닷컴 2021.03.02 266
공지 XE/Rhmix XE 참고 사이트 모음 secret 꽃지닷컴 2017.04.13 134
265 PC 윈도우7 암호분실 시 2 file 꽃지닷컴 2017.07.22 14892
264 OracleCloud 우분투 Nginx 지우고 다시 설치하기 꽃지닷컴 2021.01.16 6335
263 PC 윈도우10 설치 새파티션을 만들거나 기존파티션 찾을 수 없다. 꽃지닷컴 2017.11.01 1139
262 OFFICE PDF 윤곽선처리 file 꽃지닷컴 2017.04.13 1058
261 XE/Rhmix 위젯 사용자정의 url 구현 꽃지닷컴 2017.04.13 1022
260 WEB HTML DIV tag: 영역 배경 색상과 배경그림(이미지) 넣기 꽃지닷컴 2017.04.13 863
259 XE/Rhmix XE 레이아웃 모음 꽃지닷컴 2017.07.01 849
258 WORDPRESS 워드프레스 사이트 이전하기 꽃지닷컴 2021.01.19 824
257 PC USB 읽기전용 되었을때 해제 방법 꽃지닷컴 2017.11.01 802
256 WEB TEXT 슬라이드 효과주기 꽃지닷컴 2017.12.14 689
255 WEB Drag & Drop reorder 드래그앤드롭으로 이미지 리스트 정렬하기, 배너 드래그앤드롭 꽃지닷컴 2021.03.19 681
254 XE/Rhmix 비로그인 스케치북 글쓰기시 이메일 홈페이지 없애기 꽃지닷컴 2018.02.27 556
253 WEB [엑셀] Unix / Linux Timestamp 형식을 엑셀에서 date 형식으로 변환하기 꽃지닷컴 2017.04.24 539
252 XE/Rhmix 라이믹스 설치 메뉴얼 꽃지닷컴 2018.04.17 524
251 XE/Rhmix 라이믹스에서 짧은주소 사용하기 꽃지닷컴 2021.03.26 509
250 PC Dns 캐시 삭제해서 느린 사이트 속도 높이는 방법 file 꽃지닷컴 2018.05.04 438
249 그누보드 company 테마 서브페이지 서브메뉴 추가 꽃지닷컴 2018.04.07 417
248 편집파일 widgets/contentextended/skins/default/css/widget.css 꽃지닷컴 2017.12.06 412
247 WEB Mariadb 상위버전 설치되어 있을때 하위버전 설치시 의존성 에러가 발생한다면 꽃지닷컴 2021.01.18 407
246 XE/Rhmix 레이아웃 꽃지닷컴 2023.08.17 397
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 14 Next
/ 14