@charset 'UTF-8';
/* 웹폰트 CDN(Content Delivery Network) 연결 */
@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
@import url('../css/var.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

/* * {
    border: 1px solid #000;
} */



/* 기본 디자인, 모바일 위주 */
/* 1. 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*:before, *:after {
    box-sizing: border-box;
}
html {}
body {
    font-size: 16px;
    font-family: 'Pretendard', 'PlayfairDisplay', sans-serif;
    line-height: 1.6;
    color: #111;
    background-color: #fff;
    /* overflow: hidden; */
}
h2 {
    color: var(--main-color);
}
a {
    color: #111;
    text-decoration: none;
}
input, button, select, textarea {
    vertical-align: middle;
    color: #111;
    font-size: 1em;
    font-family: 'Pretendard', 'PlayfairDisplay', sans-serif;
    line-height: 1.6;
}
ol, ul {
    list-style-type: none;
}
p {
    margin: 1em 0;
}
img {
    vertical-align: middle;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button, label {
    cursor: pointer;
}
button {
    border-width: 0;
    background-color: transparent;
}
/* 2. 공용클래스(공통디자인) */
.wrap {
    width: 100%;
    max-width: 1580px;
    padding: 0 20px;
    margin: auto;
}
.clearfix:after {
    display: block;
    clear: both;
    content: '';
}
.blind, .sound-only {
    position: absolute;
    left: -9999em;
}
.m0 {
    margin: 0 !important;
}
.p0 {
    padding: 0 !important;
}
.bd0 {
    border-width: 0 !important;
}

/* 3. 글자와 여백 */
.wh, .wh a {color: #fff !important;}
.bk, .bk a {color: #000 !important;}
.fz30 {font-size: 3.0em;}
.fz25 {font-size: 2.5em;}
.fz20 {font-size: 2.0em;}
.fz18 {font-size: 1.8em;}
.fz16 {font-size: 1.6em;}
.fz15 {font-size: 1.5em;}
.fz12 {font-size: 1.2em;}
.fz09 {font-size: 0.9em;}
.fz08 {font-size: 0.8em;}
.fz07 {font-size: 0.7em;}

.pd-l {padding: 60px 0;}
.pd-m {padding: 45px 0;}
.pd-s {padding: 20px 0;}

/* 4.1 바로가기(skip) */
#ww-skip {
    font-size: 1.4em;
}
#ww-skip a {
    position: fixed;
    left: 0;
    top: -60px;
    width: 100%;    
    line-height: 50px;
    color: #fff;
    background-color: var(--main-color);
    text-align: center;
    z-index: 9999;
    opacity: 0;
}
#ww-skip a:focus {
    top: 0;
    opacity: 1;
}
/*more흰색밑줄*/
.more-wh:after { 
    display: block;
    width: 100px;
    height: 1.5px;
    background-color: #fff;
    content: '';
}
.more-bk:after { /*more검정밑줄*/
    display: block;
    width: 100px;
    height: 1.5px;
    background-color: #000;
    content: '';
}

/* 화면 트랜지션 */
.ani-top {
    opacity: 0;
    transform: translateY(-20%);
    transition: 0.6s;
}
.ani-bottom {
    opacity: 0;
    transform: translateY(20%);
    transition: 0.6s;
}
.ani-left {
    opacity: 0;
    transform: translateX(100px);
    transition: 0.6s;
}
.ani-right {
    opacity: 0;
    transform: translateX(-100px);
    transition: 0.6s;
}
.fade-in {
    opacity: 1;
    transform: none;
}
.delay02 {transition-delay: 0.2s;}
.delay04 {transition-delay: 0.4s;}
.delay06 {transition-delay: 0.6s;}
.delay08 {transition-delay: 0.8s;}
.delay10 {transition-delay: 1.0s;}
.speed06 {transition-duration: 0.6s;}
.speed08 {transition-duration: 0.8s;}
.speed10 {transition-duration: 1.0s;}
.speed12 {transition-duration: 1.2s;}
.speed14 {transition-duration: 1.4s;}

/* 헤더 */
#ww-hd {
    position: absolute;
    /* display: block; */
    width: 100%;
    padding: 1em 0;
    z-index: 100;
    /* background-color: #f0f; */
}
#ww-hd.fixed {
    position: fixed;
    background-color: var(--main-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    /* z-index: -1; */
}
.hd-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #f00; */
}
.ww-logo {
    position: relative;
    left: 0;
    top: 0;
    width: 160px;
    /* margin-right: 1em; */
    /* transform: translateX(-50%); */
    /* background-color: #f00; */
}
.ww-logo a {
    min-width: 100px;
    display: block;
    padding-top: 34.65%;
    background: url('../images/logo_wh.png') center center / contain no-repeat;
}
.ww-util-wrap {
    display: block;

}
.util-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.util-wrap a {
    /* background-color: #fff; */
}
.util-wrap .util-btn {
    display: none; 
    /*모바일에서 로그인 메뉴 노출X*/
}
.util-wrap .sitemap-open-btn {
    width: 19px;
    height: 19px;
    margin: 1em 0 1em 1em;
    background: url('../images/open_bar_wh.png') center center / cover no-repeat;
}


/*모바일 gnb */
#ww-gnb { /*pc gnb*/
    display: none;
}

.ww-mo-gnb-sec {
    position: fixed;
    right: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    z-index: 99;

}
.ww-util-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px 15px;
    height: 140px;
    background-color: var(--main-color);
}
.mo-util-btn {
    display: block;
    font-size: 0.8em;
    margin-right: 1em;
    font-weight: 300;
}
.sitemap-btn {
    position: absolute;
    right: 5%;
    top: 10%;
}
.sitemap-close-btn {
    width: 15px;
    height: 15px;
    background: url('../images/close_bar.png')center center /cover no-repeat;
}
.mo-logo {
    position: absolute;
    left: calc(50% - 100px);
    top: calc(60% - 40px);
    display: block;
    width: 200px;
    height: 80px;
    background: url('../images/logo_wh.png')center center / contain no-repeat;
    opacity: 0.5;
}
.mo-gnb-container {
    height: calc(100% - 140px);
    background-color: #fff;
}
.mo-gnb-wrap {
    height: 100%;
}
.mo-gnb {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 14px;
}
.mo-depth1 {
    width: 40%;
}
.mo-depth1 > a {
    display: block;
    line-height: 76px;
    font-size: 1.25em;
    font-weight: 600;
    padding-left: 1em;
    color: #ccc;
}

.mo-depth2 {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    padding: 15px;
    background-color: var(--light-beige);
    overflow: auto;
}

.mo-depth2 a {
    display: inline-block;
    width: 100%;
    text-align: left;
    font-size: 1.1em;
    font-weight: 600;
    padding: 10px 0 0 15px;
}
.mo-depth2 > li { /* ㅡ밑줄*/
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
/* .mo-depth1.active .mo-depth2 > li {
    top: 0;
    opacity: 1;
} */
.mo-menu1 {}
.mo-menu2 .mo-depth2 {
    opacity: 1;
}
.mo-menu3 {}
.mo-menu4 {}

/*사이트메뉴 동작*/
.mo-depth1.active .mo-depth2 {
    display: block; 
    /* height: auto; */
    padding: 1.2em;
    opacity: 1;
}
.mo-depth1.active > a {
    color: var(--main-color);
}
.mo-depth1.active > a:after {
    transform: scaleY(-1);
}
/* 푸터 */

.ww-ft {
    padding-bottom: 30px;
    background-color: var(--main-color);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);

}

.ww-ft-container {
    padding: 1.5em 0;
}
.ft-info a{
    color: #eee;
}
.ft-pc {
    position: relative;
}
.ft-tel {}
.ft-fax {
    padding-left: 1em;
}
.copyright {
    font-size: 0.85em;
    color: var(--medium-gray);
}

.ft-pc:after {}
.portfolio {
    padding-bottom: 2em;
    font-size: 0.85em;
    color: var(--medium-dark-gray);
}


/* 서브비주얼 */
.sub-visual-sec {}
.sub-visual-wrap {
    position: relative;
}
.sub-visual-bg {
    position: relative;
    height: 100vw;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);    /*오각형*/
}
.sub-visual-bg:after { /*비주얼이미지 검정배경*/
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: -1;
}
/*비주얼이미지*/
.bg0-0 { 
    background: url('../images/sub-visual1.jpg') center center / cover no-repeat;
}
.sub-visual-bg > h2{
    position: absolute;
    left: 50%;
    top: 45%;
    font-size: 36px;
    font-weight: 600;
    font-family: var(--serif-pre);
    color: #fff;
    transform: translate(-50%, -50%);
}
.ww-lnb {
    position: absolute;
    left: 0;
    bottom: 20%;
    width: 100%;
}
.ww-lnb-list {
    display: flex;
    justify-content: space-evenly;
}
.ww-lnb-depth2 {
    display: none;
}


/* active된 lnb 디자인 */
.ww-lnb-depth2 li {
    position: relative;
    line-height: 1.5em;
}
.ww-lnb-depth2 li.active {
    border-bottom: 2px solid rgba(255,255,255,0.5);
}
.ww-lnb-depth2 li.active:after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 -5px;
    background-color: rgba(255,255,255,0.5);

}