@charset "utf-8";

/*-------------------------------------------------------*/
/* Mask Layer
/*-------------------------------------------------------*/
.miso-mask { position: absolute; bottom: 0px; left: 0px; width: 100%; z-index:10; overflow:hidden; line-height:1px; pointer-events: none; margin-bottom:-1px; }
.miso-mask .mask-svg { position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.miso-mask svg { display:block; }
.miso-mask-a { height: 64px; }
.miso-mask.miso-mask-a { z-index: 11; }
.miso-mask-b { height: 57px; }
.miso-mask-c { height: 74px; }
.miso-mask-c .mask-fill { -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; transform: skewY(-0.2deg); }
.miso-mask-c .mask-over { z-index: 11; }
.miso-mask-d1 { height: 27px; }
.miso-mask-d2 { height: 57px; }
.miso-mask-d2 .mask-svg { margin-bottom: -15px;}
.miso-mask-e1 { padding-bottom: 6%; }
.miso-mask-e1 .mask-fill { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: skewY(-3deg); transform: skewY(-3deg); -webkit-transform-origin: 100% 0;transform-origin: 100% 0; }
.miso-mask-e2 { height: 40px; }
.miso-mask-e3 { height: 80px; }
.miso-mask-e4 { height: 100px; }
.miso-mask-f { padding-bottom: 6%; }
.miso-mask-f .mask-fill { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: skewY(3deg); transform: skewY(3deg); -webkit-transform-origin: 0 100%;transform-origin: 0 100%; }
.miso-mask-g1 { height: 30px; }
.miso-mask-g2 { height: 20px; }
.miso-mask-h { height: 80px; }
.miso-mask-i1 { height: 12px; }
.miso-mask-i2 { height: 16px; }
.miso-mask-j { height: 40px; }
.miso-mask-k1 { height: 50px; }
.miso-mask-k { height: 100px; }
.miso-mask-k svg { float:left; }
.miso-mask-rev { bottom:auto; top:0px; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); left: -1px; width: calc(100% + 1px); }
.miso-mask-rev.miso-mask-g1 svg { margin-bottom:-30px; }
.miso-mask-rev.miso-mask-j { height:39px; }
.miso-mask-rev.miso-mask-k { height:100px; }

.miso-mask-l,
.miso-mask-l svg { height:99px; }
.miso-mask-l { margin-bottom:-1px; }
.miso-mask-rev.miso-mask-l { margin-top:-1px; }

.miso-mask-m,
.miso-mask-m svg { height: 120px; }
.miso-mask-m { margin-bottom:-1px; }
.miso-mask-rev.miso-mask-m { margin-top:-1px; }

.mask-zone { display:none; margin-bottom:-1px; }
.mask-show .mask-zone { display:block; }
.at-footer-mask { position:relative; margin-bottom:-1px; }

@media all and (max-width:991px) {
	.responsive .miso-mask-e4,
	.responsive .miso-mask-e4 svg { height:60px; }
	.responsive .miso-mask-k { height: 80px; }
	.responsive .miso-mask-k svg { height: 136px; }
	.responsive .miso-mask-rev.miso-mask-k { height:80px; }

	.responsive .miso-mask-l,
	.responsive .miso-mask-l svg { height:80px; }

	.responsive .miso-mask-m,
	.responsive .miso-mask-m svg { height:80px; }
}
@media all and (max-width:767px) {
	.responsive .miso-mask-e4,
	.responsive .miso-mask-e4 svg { height:40px; }
	.responsive .miso-mask-k1,
	.responsive .miso-mask-k1 svg { height:25px; }
	.responsive .miso-mask-k { height: 60px; }
	.responsive .miso-mask-k svg { height: 102px; }
	.responsive .miso-mask-rev.miso-mask-k { height:60px; }

	.responsive .miso-mask-l,
	.responsive .miso-mask-l svg { height:60px; }

	.responsive .miso-mask-m,
	.responsive .miso-mask-m svg { height:50px; }
}
@media all and (max-width:480px) {
	.responsive .miso-mask-e4,
	.responsive .miso-mask-e4 svg { height:20px; }
	.responsive .miso-mask-k { height: 40px; }
	.responsive .miso-mask-k svg { height: 68px; }
	.responsive .miso-mask-rev.miso-mask-k { height:40px; }

	.responsive .miso-mask-l,
	.responsive .miso-mask-l svg { height:30px; }

	.responsive .miso-mask-m,
	.responsive .miso-mask-m svg { height:30px; }
}
/*-------------------------------------------------------*/
/* Zone Style
/*-------------------------------------------------------*/
.at-mask { position:relative; }
.at-cover,
.at-raster { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.at-tbl { position:relative; z-index:1; display:table; table-layout:fixed; width:100%; height:100%; padding:0; margin:0; border-collapse: collapse; }
.at-cell { display:table-cell; vertical-align:middle; padding:30px 0; width:100%; height:100%; }
.at-cell-t { display:table-cell; vertical-align:top; padding:30px 0; width:100%; height:100%; }
.at-cell-b { display:table-cell; vertical-align:bottom; padding:30px 0; width:100%; height:100%; }

/*-------------------------------------------------------*/
/* Raster Layer
/*-------------------------------------------------------*/
.img-raster1 { background-image: url('../img/raster-1.png'); }
.img-raster2 { background: url('../img/raster-2.png'); }
.img-raster3 { background: url('../img/raster-3.png'); }
.img-raster4 { background: url('../img/raster-4.png'); }
.img-raster5 { background: url('../img/raster-5.png'); }

/*-------------------------------------------------------*/
/* Background Style
/*-------------------------------------------------------*/
.img-pattern { }
.img-cover,
.img-parallax { background-size: cover !important; background-position: center center !important; }
.img-cover-t,
.img-parallax-t { background-size: cover !important; background-position: center top !important; }
.img-cover-b,
.img-parallax-b { background-size: cover !important; background-position: center bottom !important; }
@media only screen and (min-width: 768px) {
	.responsive .img-parallax,
	.responsive .img-parallax-t,
	.responsive .img-parallax-b { background-attachment: fixed !important; }
}

/*-------------------------------------------------------*/
/* Opacity
/*-------------------------------------------------------*/
.img-opa10 { opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1; -khtml-opacity:0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); }
.img-opa20 { opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2; -khtml-opacity:0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); }
.img-opa30 { opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; -khtml-opacity:0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); }
.img-opa40 { opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4; -khtml-opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
.img-opa50 { opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5; -khtml-opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }
.img-opa60 { opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6; -khtml-opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); }
.img-opa70 { opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7; -khtml-opacity:0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); }
.img-opa75 { opacity:0.75; -webkit-opacity:0.75; -moz-opacity:0.75; -khtml-opacity:0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); }
.img-opa80 { opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8; -khtml-opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); }
.img-opa85 { opacity:0.85; -webkit-opacity:0.85; -moz-opacity:0.85; -khtml-opacity:0.85; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); }
.img-opa90 { opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9; -khtml-opacity:0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); }
.img-opa95 { opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95; -khtml-opacity:0.95; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); }
.img-opa0 { display:none; }

/*-------------------------------------------------------*/
/* Page Setup Button
/*-------------------------------------------------------*/
.page-setup { position:fixed; z-index: 3332; left:0px; top:140px; color:#fff; width: 40px; height: 35px; text-align: center; line-height:35px; font-size: 17px; border-radius:0px 3px 3px 0px;}
.page-setup a { display:block; color:#fff !important; }

/*-------------------------------------------------------*/
/* Header Layout
/*-------------------------------------------------------*/
.pc-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    position: relative;
}

.pc-header-logo {
    flex: 0 0 auto;
}

.pc-header-search {
    flex: 0 0 auto;
    width: 400px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pc-header-search .search-input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 15px;
    border: 2px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
	color:#333;
}

.pc-header-search .search-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
}

.pc-header-banner {
    flex: 0 0 auto;
    width: 300px;
    text-align: right;
    margin-left: auto;
}

/* 메뉴 레이아웃 수정 */

.pc-menu {
    padding-left: 0 !important;
    width: calc(100% - 150px) !important;
}

.pc-menu-cell .menu-ul {
    width: 100%;
    display: flex !important;
    justify-content: flex-start;
    margin: 0;
    flex-wrap: nowrap;
}

.pc-menu-cell .menu-li {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    position: relative;
}

.pc-menu .menu-a {
    font-size: 12px;
    white-space: nowrap;
    display: block;
    font-weight: bold;
    color: #fff;
    padding: 0;
}

.pc-menu .menu-span {
    padding: 7px 1px;
    margin: 0 1px;
    line-height: 16px;
}

.pc-menu-tbl {
    position: relative;
    width: 100%;
}

.pc-menu-right {
    position: absolute;
    right: 0;
    top: 15px;
    width: 150px;
    height: 100%;
}

.pc-menu-cell.pc-menu {
    padding-right: 35px;
}

.pc-menu-cell.pc-menu-icon {
    width: 35px;
    position: absolute;
    right: 150px;
}

.pc-menu-icon .menu-span {
    padding: 7px 5px;
}

@media (max-width: 991px) {
    .pc-header-wrap {
        flex-direction: column;
        text-align: center;
    }
    
    .pc-header-search {
        position: relative;
        left: auto;
        transform: none;
        margin: 20px auto;
        width: 100%;
        max-width: 400px;
    }
    
    .pc-header-banner {
        margin: 20px 0 0 0;
        width: 100%;
        text-align: center;
    }

    .pc-menu {
        width: 100% !important;
    }

    .pc-menu-cell .menu-ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pc-menu-cell .menu-li {
        flex: 0 0 auto;
    }

    .pc-menu .menu-a {
        font-size: 12px;
    }

    .pc-menu .menu-span {
        padding: 5px 1px;
        margin: 0;
    }

    .pc-menu-cell.pc-menu {
        padding-right: 0;
    }

    .pc-menu-cell.pc-menu-icon {
        position: static;
        width: auto;
    }

    .pc-menu-right {
        display: none;
    }
}