@charset "utf-8";
@import url("./plugin.css");

*,
*::before,
*::after {
    box-sizing: inherit;
}
*,
::after,
::before {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    /* font-smoothing: antialiased; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    text-rendering: optimizeLegibility;
    text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
}
*::-moz-selection {
    color: #ffffff;
    background-color: #19b3b5;
}
*::selection {
    color: #ffffff;
    background-color: #19b3b5;
}
*::-webkit-selection {
    color: #ffffff;
    background-color: #19b3b5;
}
[data-scrollbar] .scrollbar-thumb,
[scrollbar] .scrollbar-thumb,
scrollbar .scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #19b3b5;
    border-radius: 0;
}

html {
    overflow-x: hidden;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
    overflow-x: hidden;
}
html,
body {
    margin: 0;
    background: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #2b2b2b;
}

body {
    min-height: 100%;
    position: relative;
}

/* pop190604 */
.pop_190604 {
    position: fixed;
    right: 240px;
    bottom: 80px;
    width: 24%;
    max-width: 375px;
    z-index: 101;
}
.pop_img_190604 {
    display: block;
    width: 100%;
}
.pop_link_190604 {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
}
.pop_btn_190604 {
    display: block;
    width: 8%;
    position: absolute;
    right: 3%;
    top: 3%;
    cursor: pointer;
}

.project a {
    padding: 30px;
}
.family a {
    padding: 5px;
}

/* intro */
.preload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    background: #000;
    z-index: 103;
    overflow: hidden;
}
.preload .cover {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #fff;
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.preload .loadin {
    position: absolute;
    top: 43.4%;
    left: 10.4%;
}
.preload .loadin .loadin_cont {
    opacity: 0;
    position: relative;
}
.preload .loadin .loadin_cont .date {
    position: relative;
    padding-bottom: 40px;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 18px;
    opacity: 0;
} /*letter-spacing:-1px*/
.preload .loadin .loadin_cont .date span {
    display: inline-block;
    padding-right: 0;
    color: #fff;
    -webkit-transform: scaleX(0.9);
    transform: scaleX(0.9);
}
.preload .loadin .loadin_cont .date span.day {
    padding-right: 6px;
    font-weight: 300;
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
.preload .loadin .loadin_cont .date span.month {
    font-weight: 700;
}
.preload .loadin .loadin_cont .date span.year {
    font-weight: 700;
}
.preload .loadin .loadin_cont p {
    margin-left: -87px;
    padding-bottom: 20px;
    font-size: 80px;
    color: #fff;
    letter-spacing: 0.5px; /*-2px*/
    line-height: 60px;
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
.preload .loadin .loadin_cont p.greeting {
    color: #fff;
}
.preload .loadin .loadin_cont p.text {
    opacity: 0.5;
}
.preload .loadin .loadin_cont .datecover {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0;
    height: 20px;
    background: #fff;
}

/* screen motion */
.transitioncover {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 100%;
    background-color: #9cc700;
    z-index: 2000;
}

/* font */
.font_noto {
    font-family: "noto-sans-scott", sans-serif;
}
.font_roboto {
    font-family: "Roboto", sans-serif;
}
.font_robotocon {
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
}

/* background color */
.bg_color1 {
    background: #439ab3;
} /* 청록색 */
.bg_color2 {
    background: #ff6194;
} /* 핑크색 */
.bg_color3 {
    background: #594cbb;
} /* 보라색 */
.bg_color4 {
    background: #3d4a90;
} /* 남색 */
.bg_color5 {
    background: #ed7e69;
} /* 오렌지색 */
.bg_color6 {
    background: #bde17f;
}
.bg_color7 {
    background: #00a88e;
} /* 진한 녹색*/
.bg_color8 {
    background: #5ab862;
} /* ??*/
.bg_color9 {
    background: #6799ff;
} /*G9 파랑*/
.bg_color10 {
    background: #ff4848;
} /*퀘이커 레드*/
.bg_color11 {
    background: #000000;
}

/* button animation */
.btnani1 {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.btnani1::before,
.btnani1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.25);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.btnani1:hover::before,
.btnani1:hover::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* icon style */
.ic {
    display: inline-block;
    position: absolute;
    top: 48%;
    right: 20px;
    width: 8px;
    height: 15px;
    margin-top: -7.5px;
    line-height: 13px;
}
.ic.arrow_b {
    background: url("../images/common/icon_arrow.png");
    background-position: 0 14px;
    background-repeat: no-repeat;
}
.ic.arrow_w {
    background: url("../images/common/icon_arrow.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* site border */
.site-borders .border {
    opacity: 1;
    position: absolute;
    z-index: 100;
    background: #fff;
    width: 0px;
    height: 0px;
    pointer-events: none;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
}
.site-borders .border.top {
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
}
.site-borders .border.right {
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
}
.site-borders .border.bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
}
.site-borders .border.left {
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
.site-borders .border.active {
    opacity: 1;
}
.site-borders .border.top.active {
    height: 130px;
}
.site-borders .border.right.active {
    width: 90px;
}
.site-borders .border.left.active {
    width: 90px;
}

/* input style */
input::placeholder {
    color: #fff;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
    letter-spacing: -0.5px;
    opacity: 0.2;
}
input::-webkit-input-placeholder {
    color: #fff;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
    letter-spacing: -0.5px;
    opacity: 0.2;
}
input:-ms-input-placeholder {
    color: #fff;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
    letter-spacing: -0.5px;
    opacity: 0.2;
}

/*--------------------------------------------------------------------------------------------------헤더-----------------------------------------------------------------------------------------------*/
#header {
}
#header .logo {
    position: fixed;
    top: 40px;
    right: 40px;
    width: 122px;
    height: 54px;
    font-size: 0;
    z-index: 201;
    background: url("../images/common/logo_b.png");
    display: block;
}
#header .gnb {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 101;
}
#header .gnb a {
    display: block;
    padding: 5px 20px 5px 10px;
}
#header .gnb span {
    display: block;
}
#header .gnb span.num {
    margin: 10px 0 10px 10px;
    font-size: 16px;
    color: #2b2b2b;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 12px;
}
#header .gnb span.gnb_item {
    font-size: 0;
    width: 28px;
    height: 2px;
    margin: 8px 0;
    background: #2b2b2b;
}
#header .gnb span.gnb_item:nth-child(2) {
    width: 38px;
}
#header .gnb span.gnb_item:nth-child(3) {
    width: 22px;
}
#header .family {
    position: fixed;
    bottom: 340px;
    left: 40px;
    transform: rotate(90deg);
    transform-origin: bottom left;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    z-index: 101;
}
#header .family a {
    display: inline-block;
    padding-left: 30px;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #2b2b2b;
    font-family: "Roboto Condensed", sans-serif;
}
#header .sns {
    position: fixed;
    top: 136px;
    right: 40px;
    z-index: 101;
}
#header .sns a {
    position: relative;
    display: block;
    margin-bottom: 40px;
    background: url("../images/common/icon_social.png");
    text-align: right;
}
#header .sns a.fb {
    width: 18px;
    height: 18px;
    background-position: 0 0;
}
#header .sns a.fb span {
    top: 2px;
}
#header .sns a.insta {
    width: 18px;
    height: 18px;
    background-position: 0 -19px;
}
#header .sns a.insta span {
    top: 1px;
}
#header .sns a.blog {
    width: 18px;
    height: 16px;
    background-position: 0 -38px;
}
#header .sns a.blog span {
    top: 1px;
}
#header .sns a.youtube {
    width: 18px;
    height: 13px;
    background-position: 0 -55px;
}
#header .sns a.youtube span {
    top: -1px;
}
#header .sns a span {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 100px;
    font-size: 12px;
    color: #2b2b2b;
    font-family: "Roboto", sans-serif;
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#header .sns a:hover span {
    position: absolute;
    right: 30px;
    opacity: 1;
}
#header .project {
    position: fixed;
    bottom: 40px;
    right: 43px;
    font-size: 12px;
    letter-spacing: 1px;
    transform: rotate(90deg);
    transform-origin: bottom right;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    z-index: 101;
}
#header .project .ic_project {
    display: inline-block;
    width: 14px;
    height: 10px;
    background: url("../images/common/icon_project.png");
}
#header .award_tag {
    position: fixed;
    bottom: 330px;
    right: 0;
    width: 152px;
    height: 101px;
    z-index: 102;
    background: url("../images/common/award_tag2018.png") no-repeat center right;
    background-size: contain;
}
#header .award_tag_rightbottom {
    display: block;
    position: fixed;
    bottom: 50px;
    right: 140px;
    width: 156px;
    height: 50px;
    z-index: 102;
    display: none;
}
#header .award_tag_rightbottom.wannaone {
    background: url("../images/common/naward_tag2018_wannaone.png") no-repeat center right;
    background-size: contain;
    display: block;
}
#header .award_tag_rightbottom.sacademy {
    background: url("../images/common/naward_tag2018_sacademy.png") no-repeat center right;
    background-size: contain;
    display: block;
}
#header .award_tag_rightbottom.lg_nwm {
    background: url("../images/common/naward_tag2019_lg_nwm.png") no-repeat center right;
    background-size: contain;
    display: block;
}
#header .award_tag_rightbottom.sulwhasoo {
    background: url("../images/award/award_tag2019_sulwhasoo.png") no-repeat center right;
    background-size: contain;
    display: block;
}
#header .award_tag_rightbottom.kto {
    background: url("../images/award/award_tag2019_kto.png") no-repeat center right;
    background-size: contain;
    display: block;
}

/* nav */
#nav {
    position: fixed;
    width: 420px; /* width:462px; */
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    background: #000000cc;
    z-index: 330;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}
#nav.open {
    -webkit-transform: translateX(0px) translateX(0);
    transform: translateX(0px) translateX(0);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}
#nav .nav_close {
    display: block;
    position: absolute; /* top:40px; */
    top: 64px;
    left: 40px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#nav .nav_close:hover {
    opacity: 0.5;
}
#nav .menu_list {
    margin: 140px 55px 0; /* margin:140px 80px 0; */
    padding: 21px 0 10px 25px; /*padding-bottom:10px;*/
    border-bottom: 1px solid #333333;
}
#nav .menu_list li {
    overflow: hidden;
    padding: 0 0 52px 10px; /* padding:0 0 60px 10px; */
}
#nav .menu_list li .num {
    display: inline-block;
    width: 55px;
    margin-top: 0; /* margin-top:-3px; */
    font-size: 16px;
    letter-spacing: 0;
    vertical-align: top;
    font-family: "Roboto Condensed", sans-serif;
}
#nav .menu_list li a {
    font-size: 25px; /* font-size:28px; */
    color: #fff;
    line-height: 21px;
    letter-spacing: 0.5px;
}
#nav .menu_list li a span {
    float: left;
    opacity: 0.5;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
}
#nav .menu_list li:hover a span,
#nav .menu_list li:focus a span,
#nav .menu_list li a.active span {
    opacity: 1;
}
#nav .family_list {
    margin: 46px 55px 0; /* margin:54px 80px 0; */
    padding-left: 25px;
    border-bottom: 1px solid #333333;
}
#nav .family_list li {
    padding: 0 0 30px 10px;
    line-height: 10px;
}
#nav .family_list li a {
    font-size: 12px;
    color: #fff;
    line-height: 10px;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#nav .family_list li a:hover {
    color: #19b3b5;
}
#nav .family_list li a.project {
    display: inline-block;
    margin: 10px 0; /*margin:10px 0 20px;*/
    font-weight: 200;
    font-family: "noto-sans-scott", sans-serif;
}
#nav .footer {
    margin: 40px 0 0 64px; /* margin:40px 0 0 90px; */
    padding-left: 20px;
    font-size: 12px;
    color: #fff;
    line-height: 10px;
    font-family: "Roboto", sans-serif;
}
#nav .footer .tel {
    display: inline-block;
    margin-bottom: 30px;
    padding-right: 20px; /*padding-right:50px;*/
    line-height: 10px;
}
#nav .footer .address {
    line-height: 17px;
}
/*-----------------------------------------------------------------------------------------------헤더 끝--------------------------------------------------------------------------------------------------*/

#wrap {
    width: 100%; /*max-width:1920px;*/
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.container {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.container.overlay-open {
    -webkit-transform: translateX(140px);
    transform: translateX(140px);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}
.content {
    position: relative; /* overflow-x:hidden;height:100% */
}

/*-------------------------------------------------------------------------------------------메인 본문----------------------------------------------------------------------------------------------------*/
#main {
    overflow: hidden;
}
#main .font_slim {
    display: inline-block;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
    word-break: keep-all;
}
#main .mainslider {
    height: 100vh;
    background: #fff;
    overflow: hidden;
}
#main .mainslider .slider_controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 30;
}
#main .mainslider .slider_content {
    display: table;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#main .mainslider .slider_content .slider_inner {
    /*display: table-cell;*/
    display: table;
    vertical-align: middle;
    text-align: left; /* padding:440px 0 0 452px*/
    position: absolute; /* top:527px; */
    bottom: 23%;
    left: 15.5%;
} /*left:18.2%*/
#main .mainslider .slider_content .slider_text {
    text-transform: uppercase;
    pointer-events: none;
}
#main .mainslider .slider_content .slider_text .slide_title {
    margin-bottom: 22px;
}
#main .mainslider .slider_content .slider_text .slide_title a {
    display: inline-block;
    font-size: 80px;
    color: #2b2b2b;
    line-height: 72px;
    letter-spacing: -4.5px;
} /*letter-spacing:-7.5px*/
#main .mainslider .slider_content .slider_text .slider-progress {
    position: relative;
    margin: 0 0 30px 5px;
    width: 360px;
    height: 2px;
    background: #7d8892;
}
#main .mainslider .slider_content .slider_text .slider-progress::before {
    content: "";
    display: block;
    height: 2px;
    width: 360px;
    background: #2b2b2b;
    opacity: 0.2;
}
#main .mainslider .slider_content .slider_text .slider-progress .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: #2b2b2b;
    opacity: 1;
}
#main .mainslider .slider_content .slider_text .slide_desc {
    margin-bottom: 14px;
    font-size: 24px;
    color: #2b2b2b;
    line-height: 17px;
}
#main .mainslider .slider_content .slider_text .slide_desc .slider_client {
    display: inline-block;
    margin-right: -10px;
    font-weight: 300;
}
#main .mainslider .slider_content .slider_text .slide_desc .slider_type {
    display: inline-block;
    font-weight: 700;
}
#main .mainslider .slider_content .slider_text .slide_date {
    margin-bottom: 110px;
    font-size: 18px;
    color: #2b2b2b;
    line-height: 13px;
}
#main .mainslider .slider_content .slider_num {
    letter-spacing: -1px;
}
#main .mainslider .slider_content .slider_num .num_total {
    display: inline-block;
    font-size: 18px;
    color: #2b2b2b;
    font-weight: 400;
    vertical-align: bottom;
}
#main .mainslider .slider_content .slider_num .num_active {
    display: inline-block;
    margin-right: -2px;
    font-size: 30px;
    color: #2b2b2b;
    font-weight: 700;
    vertical-align: top;
}
#main .mainslider .slider_content .slider_btn {
    overflow: hidden;
    margin: -80px 0 50px;
}
#main .mainslider .slider_content .slider_btn .slick-arrow {
}
#main .mainslider .slider_content .slider_btn .slick-arrow span {
    opacity: 1;
    display: none;
    float: left;
    margin-right: 14px;
    cursor: pointer;
}
#main .mainslider .slider_content .slider_btn .slick-arrow span:hover {
    opacity: 0.5;
}
#main .mainslider .slider_content .slider_btn .slick-arrow .dark {
}
#main .mainslider .slider_content .slider_btn .slick-arrow .light {
}
#main .mainslider .slider_content .slider_btn .slick-arrow.prev {
    left: 0;
}
#main .mainslider .slider_content .slider_btn .slick-arrow.next {
    right: 0;
}
#main .mainslider .slider_content span.font_robotocon {
    display: inline-block;
    letter-spacing: 0.5px;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
    transform-origin: top left;
} /*-0.5px*/
#main .mainslider .backfac1e,
#main .mainslider .round {
    background-position: center;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
#main .mainslider .back1face {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /*-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1);*/
    overflow: hidden;
}

.slider-wrapper .slider {
    height: 100vh;
}
.slider-wrapper .slider .slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover !important;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
    height: 100%;
}

.backface {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /*-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);-webkit-transform:scale(1.1, 1.1);transform:scale(1.1, 1.1);*/
    overflow: hidden;
}
.backface .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 90;
    will-change: opacity;
}

.greenishCover {
    position: absolute;
    height: 100%; /* width:100%; */
    width: 1903px;
    overflow: hidden;
}
.height.greenishCover div {
    position: relative;
    height: 100%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}
.height.greenishCover img {
    display: inline;
    height: 100%;
    margin-top: 0 !important;
}
.height.left.greenishCover div {
    position: absolute;
    left: 0px;
    text-align: left;
}
.height.right.greenishCover div {
    position: absolute;
    right: 0px;
    left: auto;
    text-align: right;
}
.width.greenishCover div {
    position: relative;
    width: 100%;
    top: 50%;
}
.width.greenishCover img {
    display: block;
    width: 100%;
}
.width.top.greenishCover div {
    position: absolute;
    top: 0px;
}
.width.top.greenishCover img {
    margin-top: 0px !important;
}
.width.bottom.greenishCover div {
    position: absolute;
    bottom: 0px;
}
.width.bottom.greenishCover img {
    margin-top: 0px !important;
    position: absolute;
    bottom: 0px;
}

/* background type light */
.bg_light #header .logo {
    background: url("../images/common/logo_w.png"); /* mix-blend-mode: difference; */
}
.bg_light #header .gnb span.num,
.bg_light #header .gnb a {
    color: #fff;
}
.bg_light #header .gnb span.gnb_item {
    background: #fff;
}
/* .bg_light #header .sns a{mix-blend-mode: difference;} */
.bg_light #header .sns a.fb {
    width: 18px;
    height: 18px;
    background-position: -19px 0;
}
.bg_light #header .sns a.insta {
    width: 18px;
    height: 18px;
    background-position: -18px -19px;
}
.bg_light #header .sns a.blog {
    width: 18px;
    height: 16px;
    background-position: -19px -38px;
}
.bg_light #header .sns a.youtube {
    width: 18px;
    height: 13px;
    background-position: -18px -55px;
}
.bg_light #header .sns a span {
    color: #fff;
}
.bg_light #header .family a {
    color: #fff;
}
.bg_light #header .project a {
    color: #fff;
}
.bg_light #header .project .ic_project {
    background-position: -14px 0;
}
.bg_light #main .mainslider .slider_content .slider_text .slide_title a,
.bg_light #main .mainslider .slider_content .slider_text .slide_desc,
.bg_light #main .mainslider .slider_content .slider_text .slide_date,
.bg_light #main .mainslider .slider_content .slider_num .num_total,
.bg_light #main .mainslider .slider_content .slider_num .num_active {
    color: #fff;
}
.bg_light #main .mainslider .slider_content .slider_text .slider-progress .progress {
    background: #fff;
    opacity: 1;
}
.bg_light .slider-progress .progress {
    background: #fff;
}

.centerd-image {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#portfolio .portfolio_view .view_content .view_visual .visual_img .centerd-image {
    width: 100%;
}

/* 20180902 */
.slider-wrapper .slider {
    position: relative;
}
.slider-wrapper .slick-dots {
    position: absolute; /*  top:814px;  */
    bottom: 25%; /*right:84%;*/
    left: 13.5%;
    width: auto;
    letter-spacing: -0.5px;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
    transform-origin: top left;
}
.slider-wrapper .slick-dots li {
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    margin: 0;
    font-size: 18px;
    opacity: 0;
    font-weight: 100;
    height: 46px;
}
.slider-wrapper .slick-dots li a {
    color: #2b2b2b;
    font-weight: bold;
}
.bg_light .slider-wrapper .slick-dots li a {
    color: #fff;
}
.slider-wrapper .slick-dots li a span {
    font-size: 30px;
}
.slider-wrapper .slick-dots li.slick-active {
    opacity: 1;
}
.slider-wrapper .slick-dots li:nth-child(n + 10) a span b {
    display: none;
}
.main_c02 {
    display: inline-block;
    position: absolute;
    top: 16px;
    font-size: 18px !important;
    left: 93px;
    font-weight: 300;
}
/*----------------------------------------------------------------------------------------------------------메인 본문 끝----------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------about 페이지--------------------------------------------------------------------------------------*/
#about {
    overflow: hidden;
}
#about .position {
    position: absolute;
    top: 10%;
    left: 0;
    width: 1px;
    height: 1px;
}
#about .sub_title {
    padding-bottom: 31px;
    font-size: 24px;
    color: #2b2b2b;
    font-weight: 300;
    letter-spacing: 1.5px; /*-0.5px*/
    line-height: 17px;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
#about .sub_title span {
}
#about .sub_title strong {
    font-weight: 700;
}
#about .big_title {
    padding-bottom: 58px;
    font-size: 54px;
    color: #000;
    letter-spacing: -0.5px; /*-2.5px*/
    line-height: 39px;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
}
#about .big_title p {
    padding-bottom: 20px;
    text-transform: uppercase;
}
#about .title {
    padding-bottom: 25px;
    font-size: 44px;
    font-weight: 200;
    color: #000;
    letter-spacing: 1px; /*-1.5px*/
    line-height: 54px;
}
#about .text {
    font-size: 16px;
    color: #666666;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 0px; /*-0.5px*/
}
#about .visual {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-bottom: 100px;
}
#about .visual video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    transform: translate(-50%, -50%);
}

#about .profile {
    width: 100%;
    max-width: 1920px;
    margin: 200px auto 150px;
    position: relative;
    padding: 0 0 0 10%;
}
#about .profile .profile_cont {
    opacity: 0;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1s;
    transition: all 1s;
}
#about .profile .profile_cont.cont1 {
    height: 1000px;
    z-index: 99;
}
#about .profile .profile_img {
    max-width: 45%;
    position: absolute;
    top: 0;
    left: 48%;
}
#about .profile .profile_img img {
    width: 100%;
}
#about .profile .profile_cont.cont2 {
    padding-left: 49%;
    padding-top: 13%;
}
#about .profile .profile_play {
    position: absolute;
    top: 833px;
    left: 0;
    width: 50%;
    height: 680px;
}
#about .profile .profile_play iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#about .profile .btn_profile > a {
    position: relative;
    display: inline-block;
    width: 296px;
    height: 50px;
    margin: 30px 0 0;
    border: 2px solid #666;
    font-size: 22px; /*color:#2b2b2b;*/
    line-height: 45px;
    text-align: center;
    transition: 0.3s ease all;
}

#about .about_slider_wrap {
    width: 100%;
    max-width: 1920px;
    position: relative;
    margin: 0 auto 150px;
}
#about .about_slider_wrap:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 25%;
}
#about .aboutSldCont {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#about .aboutSldWrp {
}
#about .aboutSld {
    width: auto;
    height: 100%;
}
#about .aboutSldImg {
    display: block;
    width: auto;
    height: 100%;
}
#about .swiper-button-prev,
#about .swiper-button-next {
    width: 60px;
    height: 100px;
    margin-top: -40px;
    background-size: contain;
}
#about .swiper-button-next,
#about .swiper-container-rtl .swiper-button-prev {
    right: 80px;
    background-image: url("../images/about/aboutSldBtnNext.svg?v=0");
    background-position: -12px center;
}
#about .swiper-button-prev,
#about .swiper-container-rtl .swiper-button-next {
    left: 80px;
    background-image: url("../images/about/aboutSldBtnPrev.svg?v=0");
    background-position: 12px center;
}

#about .boundary {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1s;
    transition: all 1s;
}
#about .boundary .sub_title {
    transform-origin: top center;
}
#about .boundary .title {
    padding-bottom: 20px;
    line-height: 41px;
}
#about .boundary .text {
    line-height: 16px;
}
#about .boundary .boundary_list {
    overflow: hidden;
    width: 80%;
    margin: 0 auto;
    padding: 120px 0 50px;
}
#about .boundary .boundary_list li {
    float: left;
    width: 20%;
    text-align: left;
    padding-bottom: 100px;
}
#about .boundary .boundary_list li .boundary_title {
    padding-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
    color: #39bcbd;
    line-height: 17px;
    letter-spacing: 1px; /*-0.5px*/
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
#about .boundary .boundary_list li .boundary_cont {
    padding-bottom: 26px;
    font-size: 16px;
    color: #666666;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 0.5px; /*-0.5px*/
    line-height: 14px;
}
#about .boundary .boundary_list li .boundary_cont p {
    padding-bottom: 14px;
}
#about .boundary .boundary_list li .boundary_italic {
    font-size: 15px;
    color: #2b2b2b;
    line-height: 30px;
    font-style: italic;
    letter-spacing: 0px; /*-0.5px*/
    line-height: 13px;
}
#about .boundary .boundary_list li .boundary_italic p {
    padding-bottom: 18px;
}

#about .branding {
    position: relative;
    height: 900px;
    margin-bottom: 200px;
    background: #1a1a1a;
}
#about .branding .branding_inner {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
#about .branding .box {
    width: 40%;
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 1s;
    transition: all 1s;
    position: absolute;
    left: 55%;
    top: 20%;
    z-index: 99;
}
#about .branding .sub_title {
    color: #fff;
}
#about .branding .title {
    color: #fff;
}
#about .branding .title {
    line-height: 54px;
}
#about .branding .text {
    color: #fff;
}
#about .branding .branding_img {
    width: 45%;
    position: absolute;
    top: -50px;
    left: 5%;
    opacity: 0;
    -webkit-transform: translateY(-170px);
    transform: translateY(-170px);
    -webkit-transition: all 1.5s;
    transition: all 1.5s;
}
#about .branding .branding_img img {
    width: 100%;
}

#about .client {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}
#about .client .sub_title {
    transform-origin: top center;
}
#about .client .title {
    padding-bottom: 20px;
    line-height: 41px;
}
#about .client .text {
    padding-bottom: 120px;
    line-height: 16px;
}
#about .client .client_img {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#about .client .client_img img {
    width: 55%;
    margin: 0 auto;
}
#about .profile_cont.cont1.on,
#about .profile_cont.cont2.on,
#about .boundary.on,
#about .branding.on .box,
#about .branding.on .branding_img,
#about .client.on .client_img {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#about .client2 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 140px;
    text-align: center;
}
#about .client2 .client_img {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#about .client2 .client_img img {
    width: 55%;
    margin: 0 auto;
}
#about .client2.on .client_img {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#about .partner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding-bottom: 200px;
    text-align: center;
}
#about .partner .sub_title {
    transform-origin: top center;
}
#about .partner .title {
    padding-bottom: 20px;
    line-height: 41px;
}
#about .partner .text {
    padding-bottom: 120px;
    line-height: 16px;
}
#about .partner .partner_img {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
#about .partner .partner_img img {
    width: 55%;
    margin: 0 auto;
}
#about .partner.on .partner_img {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
/*--------------------------------------------------------------------------------------------------------about 페이지 끝---------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------------portfolio 페이지--------------------------------------------------------------------------------------------*/
#portfolio {
    width: 100%;
    height: 100%;
}
#portfolio .portfolio_bg1 {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    background: url(../images/portfolio/portfolio_bg1.png) no-repeat center top;
    background-size: contain; /*transition:all 0.5s;-webkit-transition:all 0.5s;*/
}
#portfolio .portfolio_bg2 {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    background: url(../images/portfolio/portfolio_bg2.png) no-repeat center bottom;
    background-size: contain;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
#portfolio .loader_wrap {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
#portfolio .loader_wrap .loader {
    position: absolute;
    width: 130px;
    height: 130px; /*box-sizing:border-box;*/
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -65px;
    margin-top: -65px;
    border: 2px solid #e5e5e5;
    border-radius: 50%;
    border-top: 2px solid #5c5c5c;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform-origin: center center;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform-origin: center center;
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#portfolio .loader_wrap .loader_txt {
    position: absolute;
    width: 130px;
    height: 130px;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin-left: -65px;
    margin-top: -65px;
    line-height: 130px;
    text-align: center;
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: center center;
    font-weight: 600;
}

#portfolio .portfolio_list {
    text-align: center; /* max-width:1740px; */
    max-width: 1653px;
    margin: 0 auto; /*margin-left:11%;*/ /* padding:130px 0 140px; */
    overflow: hidden;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    padding: 180px 0 170px;
} /* padding-top:100px -> padding:100px 0 -> padding:150px 0 -> padding:135px 0 170px*/
/* 포트폴리오 리스트 순차등장 */
#portfolio .portfolio_list .item {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 300px; /*380px*/ /* background:#ddd; */
    margin: 35px;
    border-radius: 50%; /*animation:opaanimation 1s ease alternate; animation-fill-mode: forwards;*/
    opacity: 0; /*overflow:hidden;*/
}
/*181002 애니메이션 딜레이효과->뷰포터체크 플러그인*/
#portfolio .portfolio_list .item.hidden {
    opacity: 0;
}
/*#portfolio .portfolio_list .item:nth-child(1) {animation-delay:0s;}
#portfolio .portfolio_list .item:nth-child(2) {animation-delay:.4s;}
#portfolio .portfolio_list .item:nth-child(3) {animation-delay:.8s;}
#portfolio .portfolio_list .item:nth-child(4) {animation-delay:1.2s;}
#portfolio .portfolio_list .item:nth-child(5) {animation-delay:1.6s;}
#portfolio .portfolio_list .item:nth-child(6) {animation-delay:2s;}
#portfolio .portfolio_list .item:nth-child(7) {animation-delay:2.4s;}
#portfolio .portfolio_list .item:nth-child(8) {animation-delay:2.8s;}
#portfolio .portfolio_list .item:nth-child(9) {animation-delay:3.2s;}
#portfolio .portfolio_list .item:nth-child(10) {animation-delay:3.6s;}
#portfolio .portfolio_list .item:nth-child(11) {animation-delay:4s;}
#portfolio .portfolio_list .item:nth-child(12) {animation-delay:4.4s;}
#portfolio .portfolio_list .item:nth-child(13) {animation-delay:4.8s;}
#portfolio .portfolio_list .item:nth-child(14) {animation-delay:5.2s;}
#portfolio .portfolio_list .item:nth-child(15) {animation-delay:5.6s;}
#portfolio .portfolio_list .item:nth-child(16) {animation-delay:6s;}
#portfolio .portfolio_list .item:nth-child(17) {animation-delay:6.4s;}
#portfolio .portfolio_list .item:nth-child(18) {animation-delay:6.8s;}
#portfolio .portfolio_list .item:nth-child(19) {animation-delay:7.2s;}
#portfolio .portfolio_list .item:nth-child(20) {animation-delay:7.6s;}
#portfolio .portfolio_list .item:nth-child(21) {animation-delay:8s;}
#portfolio .portfolio_list .item:nth-child(22) {animation-delay:8.4s;}
#portfolio .portfolio_list .item:nth-child(23) {animation-delay:8.8s;}
#portfolio .portfolio_list .item:nth-child(24) {animation-delay:9.2s;}
#portfolio .portfolio_list .item:nth-child(25) {animation-delay:9.6s;}
#portfolio .portfolio_list .item:nth-child(26) {animation-delay:10s;}
#portfolio .portfolio_list .item:nth-child(27) {animation-delay:10.4s;}
#portfolio .portfolio_list .item:nth-child(28) {animation-delay:10.8s;}
#portfolio .portfolio_list .item:nth-child(29) {animation-delay:11.2s;}
#portfolio .portfolio_list .item:nth-child(30) {animation-delay:11.6s;}
#portfolio .portfolio_list .item:nth-child(31) {animation-delay:12s;}
#portfolio .portfolio_list .item:nth-child(32) {animation-delay:12.4s;}
#portfolio .portfolio_list .item:nth-child(33) {animation-delay:12.8s;}
#portfolio .portfolio_list .item:nth-child(34) {animation-delay:13.2s;}
#portfolio .portfolio_list .item:nth-child(35) {animation-delay:13.6s;}
#portfolio .portfolio_list .item:nth-child(36) {animation-delay:14s;}
#portfolio .portfolio_list .item:nth-child(37) {animation-delay:14.4s;}
#portfolio .portfolio_list .item:nth-child(38) {animation-delay:14.8s;}
#portfolio .portfolio_list .item:nth-child(39) {animation-delay:15.2s;}
#portfolio .portfolio_list .item:nth-child(40) {animation-delay:15.6s;}
#portfolio .portfolio_list .item:nth-child(41) {animation-delay:16s;}
#portfolio .portfolio_list .item:nth-child(42) {animation-delay:16.4s;}
#portfolio .portfolio_list .item:nth-child(43) {animation-delay:16.8s;}
#portfolio .portfolio_list .item:nth-child(44) {animation-delay:17.2s;}
#portfolio .portfolio_list .item:nth-child(45) {animation-delay:17.6s;}
#portfolio .portfolio_list .item:nth-child(46) {animation-delay:18s;}
#portfolio .portfolio_list .item:nth-child(47) {animation-delay:18.4s;}
#portfolio .portfolio_list .item:nth-child(48) {animation-delay:18.8s;}
#portfolio .portfolio_list .item:nth-child(49) {animation-delay:19.2s;}
#portfolio .portfolio_list .item:nth-child(50) {animation-delay:19.6s;}
#portfolio .portfolio_list .item:nth-child(51) {animation-delay:20s;}
#portfolio .portfolio_list .item:nth-child(52) {animation-delay:20.4s;}
#portfolio .portfolio_list .item:nth-child(53) {animation-delay:20.8s;}
#portfolio .portfolio_list .item:nth-child(54) {animation-delay:21.2s;}
#portfolio .portfolio_list .item:nth-child(55) {animation-delay:21.6s;}
#portfolio .portfolio_list .item:nth-child(56) {animation-delay:22s;}
#portfolio .portfolio_list .item:nth-child(57) {animation-delay:22.4s;}
#portfolio .portfolio_list .item:nth-child(58) {animation-delay:22.8s;}
#portfolio .portfolio_list .item:nth-child(59) {animation-delay:23.2s;}
#portfolio .portfolio_list .item:nth-child(60) {animation-delay:23.6s;}
#portfolio .portfolio_list .item:nth-child(61) {animation-delay:24s;}
#portfolio .portfolio_list .item:nth-child(62) {animation-delay:24.4s;}
#portfolio .portfolio_list .item:nth-child(63) {animation-delay:24.8s;}
#portfolio .portfolio_list .item:nth-child(64) {animation-delay:25.2s;}
#portfolio .portfolio_list .item:nth-child(65) {animation-delay:25.6s;}
#portfolio .portfolio_list .item:nth-child(66) {animation-delay:26s;}
#portfolio .portfolio_list .item:nth-child(67) {animation-delay:26.4s;}
#portfolio .portfolio_list .item:nth-child(68) {animation-delay:26.8s;}
#portfolio .portfolio_list .item:nth-child(69) {animation-delay:27.2s;}
#portfolio .portfolio_list .item:nth-child(70) {animation-delay:27.6s;}
#portfolio .portfolio_list .item:nth-child(71) {animation-delay:28s;}
#portfolio .portfolio_list .item:nth-child(72) {animation-delay:28.4s;}
#portfolio .portfolio_list .item:nth-child(73) {animation-delay:28.8s;}
#portfolio .portfolio_list .item:nth-child(74) {animation-delay:29.2s;}
#portfolio .portfolio_list .item:nth-child(75) {animation-delay:29.6s;}
#portfolio .portfolio_list .item:nth-child(76) {animation-delay:30s;}
#portfolio .portfolio_list .item:nth-child(77) {animation-delay:30.4s;}
#portfolio .portfolio_list .item:nth-child(78) {animation-delay:30.8s;}
#portfolio .portfolio_list .item:nth-child(79) {animation-delay:31.2s;}
#portfolio .portfolio_list .item:nth-child(80) {animation-delay:31.6s;}
#portfolio .portfolio_list .item:nth-child(81) {animation-delay:32s;}
#portfolio .portfolio_list .item:nth-child(82) {animation-delay:32.4s;}
#portfolio .portfolio_list .item:nth-child(83) {animation-delay:32.8s;}
#portfolio .portfolio_list .item:nth-child(84) {animation-delay:33.2s;}
#portfolio .portfolio_list .item:nth-child(85) {animation-delay:33.6s;}
#portfolio .portfolio_list .item:nth-child(86) {animation-delay:34s;}*/

@keyframes opaanimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/* 포트폴리오 리스트 순차등장 끝 */

/* 리스트 호버 텍스트효과 */
@keyframes opaanimation01 {
    0% {
        opacity: 0;
        top: 20px;
        transform: rotate(0.001deg);
    }
    100% {
        opacity: 1;
        top: 0;
        transform: rotate(0deg);
    }
}
/* 리스트 호버 텍스트효과 끝 */
#portfolio .portfolio_list .item a {
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}
#portfolio .portfolio_list .item:active {
    /* transform:scale(1.3); transition:all .5s; */
}
#portfolio .portfolio_list .item .thumb {
}
#portfolio .portfolio_list .item .thumb img {
    width: 100%;
}
#portfolio .portfolio_list .item .thumb .thumb_txt {
    width: 100%;
    height: auto; /* margin: 0 auto; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    text-align: center;
    z-index: 10;
}
#portfolio .portfolio_list .item .thumb .thumb_txt .thumb_tit {
    font-size: 40px;
    letter-spacing: -2px; /*-3px*/
    transform: scaleX(0.9);
    -webkit-transform: scaleX(0.9);
}
#portfolio .portfolio_list .item .thumb .thumb_txt .thumb_info {
    font-size: 17px;
    padding-left: 34px;
    font-weight: 500;
    margin-top: 7px;
    letter-spacing: -1px;
}
#portfolio .portfolio_list .item .thumb .thumb_txt .thumb_info > span {
    font-weight: 600;
}
#portfolio .portfolio_list .thumb_line {
    background: #fff; /* border:9px solid #000 */
} /*
#portfolio .portfolio_list .thumb_line a {border:9px solid #000; border-radius:50%;}
#portfolio .portfolio_list .thumb_line a img {position:absolute; top:0; left:0; right:0;}*/
/* 수정 - 호버
------------------------------------------------------------------------------- */
#portfolio .portfolio_list .item .thumbImg_back {
    max-width: 100%;
    width: 100%; /* display:none */
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
/*#portfolio .portfolio_list .thumb_line:hover {transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;}
#portfolio .portfolio_list .thumb_line:hover a {border-width:0; }
#portfolio .portfolio_list .thumb_line:hover .thumb_txt {opacity:0; transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;}
#portfolio .portfolio_list .thumb_line:hover .thumbImg_back {opacity:1;}*/
/* 수정 - 호버
------------------------------------------------------------------------------- */
#portfolio .portfolio_list .item .item_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    border-radius: 50%;
}
#portfolio .portfolio_list .item .item_cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: table-cell;
    text-align: center;
    color: #fff;
    letter-spacing: -1px;
    font-family: "noto-sans-scott", sans-serif;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    text-transform: uppercase;
    transform: rotate(0.001deg);
}
#portfolio .portfolio_list .item .item_cont .title {
    padding: 100px 0 16px;
    line-height: 1.2;
    font-size: 29px;
    font-weight: 400;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top center;
    margin-top: 20px;
}
#portfolio .portfolio_list .item .item_cont .title.longtitle {
    margin-top: 0px;
}
#portfolio .portfolio_list .item .item_cont .desc {
    font-size: 13.5px;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.9);
    transform-origin: top center;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 1px;
}
#portfolio .portfolio_list .item .item_cont .desc > span {
    font-weight: 200;
    -webkit-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
}
#portfolio .portfolio_list .item:hover .item_bg {
    opacity: 0.7;
}
#portfolio .portfolio_list .item:hover .item_cont {
    -webkit-animation: opaanimation01 0.8s ease;
    -moz-animation: opaanimation01 0.8s ease;
    -ms-animation: opaanimation01 0.8s ease;
    -o-animation: opaanimation01 0.8s ease;
    animation: opaanimation01 0.8s ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
#portfolio .portfolio_list .item_even {
    /* margin:0 2% 0 2% */
}
#portfolio .portfolio_list .item_odd {
    /* margin:0 0 0 2%  */
}

#portfolio .portfolio_list .item .item_subtext {
    position: absolute;
}
#portfolio .portfolio_list .item .item_subtext.left_bottom {
    left: -35px;
    bottom: 0px;
}
#portfolio .portfolio_list .item .item_subtext.left_top {
    left: -35px;
    top: 0px;
}
#portfolio .portfolio_list .item .item_subtext.right_bottom {
    right: -35px;
    bottom: 0px;
}
#portfolio .portfolio_list .item .item_subtext.right_top {
    right: -35px;
    top: 0px;
}
#portfolio .portfolio_list .item .item_subtext .item_subtext_date {
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
    transform-origin: top left;
    font-weight: 400;
    line-height: 19px;
}
#portfolio .portfolio_list .item .item_subtext .item_subtext_client {
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top left;
    font-weight: 600;
    line-height: 19px;
}

#portfolio .portfolio_view {
}
#portfolio .portfolio_view .position {
    position: absolute;
    top: 8%;
    left: 0;
    width: 1px;
    height: 1px;
}
#portfolio .portfolio_view .view_content {
}
#portfolio .portfolio_view .view_content .view_visual {
    position: relative;
    opacity: 0;
}
#portfolio .portfolio_view .view_content .view_visual .visual_img {
    overflow: hidden;
    height: 1200px;
    position: relative;
}
#portfolio .portfolio_view .view_content .view_visual .visual_img video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}
#portfolio .portfolio_view .view_content .view_visual .visual_cont {
    width: 80%;
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    vertical-align: middle;
    text-align: left;
    padding: 786px 0 0 23.6%;
    text-transform: uppercase;
}
#portfolio .portfolio_view .view_content .view_visual .visual_cont .title {
    margin-bottom: 40px;
    font-size: 80px;
    color: #262626;
    letter-spacing: -7.5px;
    line-height: 1.1;
    word-break: keep-all;
}
#portfolio .portfolio_view .view_content .view_visual .visual_cont .desc {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -1px;
}
#portfolio .portfolio_view .view_content .view_visual .visual_cont .desc .client {
    display: inline-block;
    margin-right: -10px;
    font-weight: 300;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
#portfolio .portfolio_view .view_content .view_visual .visual_cont .desc .type {
    display: inline-block;
    font-weight: 700;
    -webkit-transform: scaleX(0.8);
    -moz-transform: scaleX(0.8);
    transform: scaleX(0.8);
}
#portfolio .portfolio_view .view_content .view_detail {
}
#portfolio .portfolio_view .view_content .view_detail .detail_info {
    display: table;
    margin: 100px auto 80px; /* margin:100px auto 140px */
    position: relative;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table {
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td {
    font-size: 14px;
    color: #848484;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.logo {
    vertical-align: top;
    padding-top: 2px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.client {
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.type {
    text-transform: uppercase;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.share {
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.share a {
    display: inline-block;
    margin: 0 0 0 20px;
}
#portfolio .portfolio_list .item_left {
    /* margin-left:3% */
}

/*버튼효과 추가*/
@keyframes hover {
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(-6px);
    }
}
.hover {
    display: inline-block;
    transition-duration: 0.5s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover {
    transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/*추가
.share_fb:hover {transform:scale(1.2,1.2);transition:all 5s ease;}*/
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.desc {
    font-size: 16px;
    color: #666666;
    letter-spacing: -0.5px;
    font-weight: 300;
    line-height: 24px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.link {
    padding: 30px 0 0;
}
#portfolio .portfolio_view .view_content .view_detail .detail_info table td.link .btn_link {
    position: relative;
    display: inline-block;
    width: 196px;
    height: 50px;
    border: 2px solid #636363;
    font-size: 22px;
    font-size: 18px; /*color:#636363;*/
    line-height: 47px;
    text-align: center;
    z-index: 1;
    transition: 0.3s ease all;
}

#portfolio .portfolio_view .view_content .view_detail .detail_cont {
    padding-bottom: 140px;
    font-family: "noto-sans-scott", sans-serif;
    text-align: center;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_title {
    padding-bottom: 30px;
    font-size: 44px;
    color: #2b2b2b;
    letter-spacing: -0.5px;
    line-height: 1.2;
    word-break: keep-all;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_title .right_bt {
    display: block;
    width: 233px;
    height: 76px;
    float: right;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_subtitle {
    padding-top: 50px;
    padding-bottom: 30px;
    font-size: 30px;
    color: #2b2b2b;
    letter-spacing: -0.5px;
    line-height: 40px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_cont_box {
    padding: 0 50px 95px;
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    letter-spacing: -0.5px;
    font-weight: 300;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_img {
    position: relative;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_img img {
    max-width: 100%;
}

/*추가*/
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_plus {
    width: 100%;
    height: 375px;
    box-sizing: border-box;
    padding-top: 156px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_plus .first_p {
    font-size: 44px;
    color: #2b2b2b;
    letter-spacing: -0.5px;
    line-height: 40px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_plus .sc_p {
    font-size: 16px;
    color: #666666;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-weight: 300;
    margin-top: 50px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_plus .td_p {
    font-size: 16px;
    color: #666666;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-weight: 300;
}

#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_play {
    display: inline-block;
    position: relative;
    z-index: 300;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_play .btn_play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 181px;
    margin: -70px 0 0 -90.5px;
    opacity: 0.7;
    -webkit-animation: playani 3s ease-out;
    -moz-animation: playani 3s ease-out;
    animation: playani 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.btn_play02 {
    position: absolute;
    top: 50%;
    left: 85%;
    width: 90px;
    height: 120px;
    margin: -25px 0 0 -45px;
    opacity: 0.7;
    -webkit-animation: playani 3s ease-out;
    -moz-animation: playani 3s ease-out;
    animation: playani 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .player {
    display: none;
    width: 76.6%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .player:before {
    content: "";
    display: block;
    width: 100%;
    position: relative;
    padding-top: 56.25%;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .player .btn_close {
    position: absolute;
    top: -50px;
    right: 0px;
}
#portfolio .portfolio_view .view_content .view_detail .detail_cont .player.active {
    display: block;
}

/*추가*/
.event_bt .left_bt {
    display: block;
    width: 233px;
    height: 76px;
    float: left;
}
.event_bt .right_bt {
    display: block;
    width: 233px;
    height: 76px;
    float: right;
}

/*top링크 버튼*/
.hv {
    width: 60px;
    height: 60px;
    color: #fff;
    background: #333;
    font-size: 35px;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 999;
    overflow: hidden;
}
.hv > a {
    width: 100%;
    height: 100%;
    display: block;
}
.up_arrow {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 66px;
    transition: all, 0.5s;
    color: #fff;
    font-family: "돋움", sans-serif;
}
.hv:hover .up_arrow {
    transform: translateY(-100%);
}
.sc_arrow {
    position: absolute;
    top: 60px;
    right: 16px;
}

/*스크롤애니메이션 추가*/
.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 0px;
    z-index: 100;
    display: inline-block; /*height:283px;*/
    height: 233px;
    width: 50px;
    min-height: 30px;
    font-weight: bold;
    font-style: normal;
    color: #fff;
    font-size: 16px;
    transform: translateX(-50%);
}
.scroll-indicator .border-grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 3px;
    height: 100%;
    background: #333;
    overflow: hidden;
}
.scroll-indicator .border-grey .border {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
    width: 3px;
    height: 100%;
    background: #ffffff;
    -webkit-animation: scrollani 1.8s linear;
    -moz-animation: scrollani 1.8s linear;
    animation: scrollani 1.8s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform: translateY(-100%);
}
.scroll-indicator em {
    width: 32%;
    font-size: 14px;
    display: inline-block;
    font-style: normal;
    position: absolute;
    left: 0px;
    top: 0;
    color: #fff;
}

/* 스크롤 애니메이션 */
@keyframes scrollani {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}
@-webkit-keyframes scrollani {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}
@-moz-keyframes scrollani {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0%);
    }
}

/*어워드 태그 추가*/
.award_tag_rightbottom {
    position: absolute;
    bottom: 50px;
    right: 140px;
    width: 156px;
    height: 50px;
    z-index: 100;
}
/*각페이지 t스타일에서 배경추가하기 ex) .award_tag_rightbottom {background:url("./images/common/naward_tag2018_wannaone.png") no-repeat center right; background-size:contain;}*/

/*SITE VIEW버튼 효과 추가01 : 컨텍트 동일 */
.button_ef {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
}
.button_ef::before,
.button_ef::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #636363;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
/* .button_ef::after{-webkit-transition-delay: 0.2s;transition-delay: 0.2s} */
.button_ef:hover::before,
.button_ef:hover::after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
/*----------------------------------------------------------------------------------------------------portfolio 페이지 끝-----------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------------------------news 페이지--------------------------------------------------------------------------------------------*/
#news {
    overflow: hidden;
}
#news.content {
    width: 90%;
    margin: 70px auto;
}
#news .news_list {
    max-width: 1200px;
    margin: 0 auto 120px;
    padding-top: 140px;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}
#news .news_list .item {
    overflow: hidden;
    position: relative;
    float: left;
    width: 580px;
    height: 410px;
    margin: 0 10px 20px;
    box-sizing: border-box;
}
#news .news_list .item .thumb {
}
#news .news_list .item .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    z-index: 10;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#news .news_list .item .item_content {
    opacity: 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#news .news_list .item .item_content .date {
    opacity: 0;
    position: absolute;
    top: 100px;
    width: 100%;
    font-size: 18px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: center;
    z-index: 11;
}
#news .news_list .item .item_content .title {
    opacity: 0;
    position: absolute;
    top: 146px;
    margin: 0 54px;
    font-size: 30px;
    color: #fff;
    font-family: "noto-sans-scott", sans-serif;
    line-height: 30px;
    text-align: center;
    z-index: 11;
}
#news .news_list .item .item_content .desc {
    opacity: 0;
    position: absolute;
    top: 218px;
    width: 100%;
    font-size: 14px;
    color: #fff;
    font-weight: 200;
    font-family: "noto-sans-scott", sans-serif;
    line-height: 17px;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 11;
}
#news .news_list .item .item_content .btn {
    opacity: 0;
    position: absolute;
    top: 279px;
    left: 50%;
    margin-left: -69px;
    width: 138px;
    height: 42px;
    border: 1px solid #fff;
    font-size: 16px;
    color: #fff;
    line-height: 42px;
    font-family: "Roboto", sans-serif;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    text-align: center;
    z-index: 11;
}
#news .news_list .item .item_content .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#news .news_list .item .item_content .btn:hover::before {
    opacity: 1;
    width: 100%;
}
#news .news_list .item .back_box {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#news .news_list .item .list_box {
    position: relative;
    z-index: 1;
    top: 413px;
    -webkit-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#news .news_list .item .list_box.active {
    top: 0;
}
#news .news_list .item.active .back_box {
    height: 100%;
}
#news .news_list .item.active .back_box.active {
    height: 0;
    top: 0;
}
#news .news_list .item.active .img_box .thumb_layer {
    opacity: 0.45;
}
#news .news_list .item:hover .bg {
    opacity: 0.9;
}
#news .news_list .item:hover .item_content .date,
#news .news_list .item:hover .item_content .title,
#news .news_list .item:hover .item_content .desc,
#news .news_list .item:hover .item_content .btn {
    opacity: 1;
    z-index: 100;
}

#tabName {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10rem 0;
} /*padding-top:12rem;*/
#tabName h1 {
    width: 110px;
    height: 4rem;
    font-size: 1rem;
    text-align: center;
    display: table;
    z-index: 99;
} /*181004 z-index 추가*/
#tabName h1.on {
    /* background-color:green !important */ /*left:100px !important;*/
} /*181004 left:0%->100px 수정 181023 tab순서정렬 없앰*/
#tabName h1.on a {
    /*color:red;*/
    font-weight: 500;
    color: #000;
}
#tabName h1 a {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    font-size: 15px;
}
#tabName h1:first-of-type {
    position: fixed;
    top: 70px;
    left: 100px; /*  background-color:yellowgreen; */
} /*181004 수정 position:absolute->fixed; top:0->70px; left:0%->100px*/
#tabName h1:nth-of-type(2) {
    position: fixed;
    top: 70px;
    left: 220px; /* background-color:yellowgreen; */
} /*181004 수정 position,top:위와 동일; left:7%->220px*/
#tabName h1:nth-of-type(3) {
    position: fixed;
    top: 70px;
    left: 340px; /* background-color:yellowgreen; */
} /*181004 수정 position,top:위와 동일; left:14%->340px*/
#tabName h1:nth-of-type(4) {
    position: fixed;
    top: 70px;
    left: 460px; /* background-color:yellowgreen; */
} /*181004 수정 position,top:위와 동일; left:21%->460px*/
#tabName h1:last-of-type {
    position: fixed;
    top: 70px;
    left: 580px; /* background-color:yellowgreen; */
} /*181004 수정 position,top:위와 동일; left:28%->580px*/
/*200608 추가*/
@media all and (min-width: 1920px) {
    #tabName h1:first-of-type {
        left: auto;
        right: 50%;
        margin-right: 733px;
    }
    #tabName h1:nth-of-type(2) {
        left: auto;
        right: 50%;
        margin-right: 626px;
    }
    #tabName h1:nth-of-type(3) {
        left: auto;
        right: 50%;
        margin-right: 506px;
    }
    #tabName h1:nth-of-type(4) {
        left: auto;
        right: 50%;
        margin-right: 386px;
    }
    #tabName h1:last-of-type {
        left: auto;
        right: 50%;
        margin-right: 266px;
    }
}
.blind {
    width: 0;
    height: 0;
    overflow: hidden;
} /*tabCont 에 붙여지는 클래스*/
.tabCont ul {
    overflow: hidden;
    margin-top: 30px;
}
.tabCont ul li {
    width: 100%;
    overflow: hidden; /*height:204px; background:#ddd; */
    margin-bottom: 3%;
}
.news_block {
    width: 100%;
    height: 100%;
    display: block;
}
.news_line .news_thumb {
    width: 12%;
    height: auto; /* background:blue */
}
.news_line .news_thumb img {
    width: 100%;
    border-radius: 50%;
}
.news_line .news_arti {
    width: 80%;
    height: auto;
    margin-top: 33px; /* background:green; */
    float: left;
    margin: 32px 0 0 20px;
}
.news_line .news_arti .news_tit {
    font-size: 42px;
    font-weight: 400;
    padding-bottom: 5px;
    letter-spacing: -2px;
}
/*.tabCont ul li:hover .news_under  {border-bottom:2px solid #000}*/
.news_line .news_arti .news_tit .news_under {
    position: relative;
}
.news_arti .news_under_new {
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
}
.news_arti.news_even_fr .news_under_new {
    left: auto;
    right: 0;
}
.news_line .news_arti .news_sub {
    font-size: 23px;
    font-weight: 280;
    margin-top: 5px;
    letter-spacing: -1px;
    color: #444;
}
.news_line .news_arti .news_date {
    margin-top: 50px;
    font-size: 17px;
    color: #999;
}
.news_odd_fl {
    float: left;
    margin-right: 2%;
}
.news_even_fr {
    float: right;
    margin-left: 2%;
    text-align: right; /*margin-right: 81px*/
}
.news_fr {
    float: right;
}

@keyframes fadeInUp2Ani {
    0% {
        opacity: 0;
        transform: translate3d(0, 60px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInUp2 {
    animation-name: fadeInUp2Ani;
}
/*-----------------------------------------------------------------------------------------------------------news 페이지----------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------award 페이지-------------------------------------------------------------------------------------------*/
#award {
}
#award .award_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#award .award_bg video {
    position: absolute; /*  top:46%; */
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh; /* min-height:257vh; */
    transform: translate(-50%, -50%);
}
#award .award_bg .bgimg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#award .award_bg .bgimg.active {
    opacity: 1;
}
#award .award_bg .bgimg img {
    width: 100%;
    height: 100%;
}
#award .award_cont {
    position: relative;
    padding-top: 276px; /*  z-index:10; */
    z-index: 101; /*-webkit-transform:scaleX(0.9);-moz-transform:scaleX(0.9);transform:scaleX(0.9)*/
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}
#award .award_box {
    padding-bottom: 70px; /*60px*/
    text-align: left;
}
#award .award_box .award_title {
    font-size: 34px;
    color: #fff;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    transform-origin: top center;
    letter-spacing: 0; /*-1px*/
}
#award .award_box .award_list {
    margin-left: 39%; /*40%*/
}
#award .award_box .award_list li {
    padding-top: 20px;
    font-size: 22px;
    line-height: 24px;
    color: #fff;
    letter-spacing: 0px; /*-2px*/
}
#award .award_box .award_list li .year {
    display: inline-block;
    width: 60px;
}
#award .award_box .award_list li .year-clear {
    display: inline-block;
    width: 60px;
    color: transparent;
}
#award .award_box .award_list.font-noto li {
    /* letter-spacing:-0.5px; */
    letter-spacing: -1px; /*-2px*/
}
#award .award_box.award_center {
    text-align: center;
}
#award .award_box.award_center .award_list {
    width: 100%;
    margin: 0;
}
.award_mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.84;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100; /*  z-index:100;display:none */
}
.award_cont02 {
    width: 100%;
    height: 200px;
    background: #ddd;
}

/* 20211229 award 2022 추가 */
/* common stlye */
#cursor {
    position: fixed;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.4s cubic-bezier(0.75, -0.27, 0.3, 1.33) background;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    background: #db474d;
    box-shadow: 0 0 5px #db474d, 0 0 10px #db474d, 0 0 20px #db474d;
}
#cursor.active {
    transform: scale(3);
    border: 1px solid #db474d;
    background: none;
    box-shadow: 0 0 5px #db474d;
}
#cursor.dark {
}
.cnt_tit1 {
    text-align: center;
}
.cnt_tit1 p:first-child {
    font-size: 22px;
    font-family: "Roboto";
    font-weight: 300;
}
.cnt_tit1 p:first-child span {
    font-weight: 400;
}
.cnt_tit1 h2 {
    font-size: 50px;
    padding: 15px 0 25px;
}
.cnt_tit1 p:last-child {
    font-size: 20px;
    padding-bottom: 80px;
    opacity: 0.8;
}
.cnt_tit1 strong {
    font-size: 20px;
    opacity: 0.8;
}
.box_num {
    font-family: "Gotham";
    font-weight: 100;
}
.cnt_tit2 {
    position: relative;
    padding-top: 135px;
}
.cnt_tit2 .tit2_wrap {
    max-width: 1217px;
    width: 100%;
    margin: 0 auto;
    display: block;
}
.cnt_tit2 .box_num {
    font-size: 134px;
    float: left;
    padding-right: 80px;
}
.cnt_tit2 h2:nth-of-type(1) {
    font-size: 41px;
    font-weight: 700;
    padding-bottom: 27px;
}
.cnt_tit2 h2:nth-of-type(2) {
    font-size: 41px;
    font-weight: 300;
}
.cnt_tit2::before {
    background: no-repeat center / cover;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 585px;
    display: block;
    z-index: -1;
}
.cnt_tit2::after {
    content: "";
    display: block;
    clear: both;
}
.btn_more {
    display: inline-block;
    color: #fff;
    text-align: center;
    font-size: 22px;
    width: 338px;
    padding: 15px 0;
    border-radius: 100px;
    margin-bottom: 200px;
    transition: all 0.3s;
    border: 2px solid #fff;
}
.btn_more:hover,
.btn_more:focus {
    border: 2px solid #1d1b1b;
    background: #fff;
    color: #1d1b1b;
    border-color: #1d1b1b;
    font-weight: 400;
}
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flex_center {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.align_center {
    -webkit-align-items: center;
    align-items: center;
}
.justify_center {
    -webkit-justify-content: center;
    justify-content: center;
}
.justify_spacebetween {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.delay05 {
    animation-delay: 0.4s;
}
.delay1 {
    animation-delay: 0.9s;
}
.delay15 {
    animation-delay: 1.4s;
}
.hide {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    border: none;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}
.animated {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
}
#award2022 .btn_play {
    position: relative;
}
#award2022 .btn_play::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 181px;
    background: url(../images/portfolio/btn_play.png) no-repeat center / cover;
    -webkit-animation: playani 3s ease-out;
    -moz-animation: playani 3s ease-out;
    animation: playani 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/* award2022 style */
#award2022 {
    z-index: 200;
    width: 100%;
    background: #000;
    color: #fff;
    position: relative;
    font-family: "Noto Sans KR";
    line-height: 1;
    letter-spacing: -0.085rem;
}
#award_cnt1 {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #000;
}
#award_cnt1 .ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    background: url("../images/award/award_cnt1_ribbon.png") no-repeat;
    width: 1920px;
    height: 593px;
    transform: translate(-50%);
    z-index: 1;
}
#award_cnt1 .cnt1_video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
}
#award_cnt1 .cnt1_video video {
    width: 1800px;
}
#award_cnt1 .cnt1_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    z-index: 1;
}
#award_cnt1 .cnt1_wrap > div {
    transition: transform 0.3s;
}
#award_cnt1 .cnt1_wrap .cnt1_logo {
    animation: txt_left 3s;
    -webkit-animation: txt_left 3s;
}
#award_cnt1 .cnt1_x {
    width: 50px;
    height: 50px;
    position: relative;
    animation: x_rotate 3s;
}
#award_cnt1 .cnt1_x::before {
    content: "";
    display: block;
    width: 1px;
    height: 50px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
#award_cnt1 .cnt1_x::after {
    content: "";
    content: "";
    display: block;
    width: 1px;
    height: 50px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
#award_cnt1 .cnt1_award {
    animation: txt_right 3s;
    -webkit-animation: txt_right 3s;
}
#award_cnt1 .cnt1_award p {
    position: relative;
    font-family: "Myriad Pro";
    letter-spacing: 0.035em;
    color: #fff;
    font-size: 25px;
    line-height: 1.3;
    padding-left: 100px;
}
#award_cnt1 .cnt1_award p::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 76px;
    height: 96px;
    background: url("../images/award/award_cnt1_n.png") no-repeat center / cover;
}
#award_cnt2 {
    height: 100vh;
    text-align: center;
    position: relative;
}
#award_cnt2 .cnt2_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
#award_cnt2 .cnt2_boxes {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
#award_cnt2 .cnt2_box {
    display: inline-block;
    max-width: 420px;
    height: 457px;
    background: no-repeat center;
    width: calc(100% / 3 - 6px);
    margin-right: 6px;
    position: relative;
}
#award_cnt2 .cnt2_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    display: block;
}
#award_cnt2 .cnt2_box a {
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
#award_cnt2 .cnt2_box:first-child {
    background-image: url("../images/award/award_cnt2_img1.jpg");
}
#award_cnt2 .cnt2_box:nth-child(2) {
    background-image: url("../images/award/award_cnt2_img2.jpg");
    margin-top: 26px;
}
#award_cnt2 .cnt2_box:nth-child(3) {
    background-image: url("../images/award/award_cnt2_img3.jpg?v=0");
}
#award_cnt2 .cnt2_box .hot_event {
    position: absolute;
    top: 0;
    right: 0;
    width: 115px;
    height: 116px;
    background: url("../images/award/award_hotdeal.png") no-repeat center;
    line-height: 116px;
    text-align: center;
    transform: translate(50%, -50%);
}
#award_cnt2 .cnt2_box .hot_event span {
    position: absolute;
    top: 33%;
    left: 15%;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
#award_cnt2 .cnt2_box .box_num {
    font-size: 134px;
}
#award_cnt2 .cnt2_box h3 {
    font-size: 29px;
    padding: 27px 0 16px;
}
#award_cnt2 .cnt2_box p {
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 26px;
    letter-spacing: 0;
}
#award_cnt2 .cnt2_box p + span {
    font-size: 21px;
}
#award_cnt2 .cnt2_box a:hover,
#award_cnt2 .cnt2_box a:focus {
}
#award_cnt3 {
    padding-bottom: 230px;
    position: relative;
}
#award_cnt3::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    background: url("../images/award/deco_light.png") no-repeat center / cover;
    width: 971px;
    height: 642px;
    mix-blend-mode: lighten;
    animation: light_op 1.5s ease-in-out infinite alternate;
    -webkit-animation: light_op 1.5s ease-in-out infinite alternate;
}
#award_cnt3::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    background: url("../images/award/deco_light2.png") no-repeat center / cover;
    width: 971px;
    height: 642px;
    mix-blend-mode: lighten;
    animation: light_op 1.8s ease infinite alternate;
    -webkit-animation: light_op 1.8s ease infinite alternate;
    z-index: 3;
}
#award_cnt3 .cnt_tit2 {
    color: #fff;
}
#award_cnt3 .cnt_tit2::before {
    background-image: url("../images/award/award_cnt2_bg.jpg");
}
#award_cnt3 .cnt3_boxes {
    max-width: 1217px;
    width: 100%;
    margin: 0 auto;
    padding: 80px 11px 0;
}
#award_cnt3 .cnt3_boxes li {
    display: inline-block;
    text-align: center;
    width: 32%;
    margin-right: 26px;
}
#award_cnt3 .cnt3_boxes li:last-child {
    margin-right: 0;
}
#award_cnt3 .cnt3_boxes li img {
    width: 100%;
}
#award_cnt3 .cnt3_boxes li h3 {
    padding: 49px 0 21px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}
#award_cnt3 .cnt3_boxes li p {
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.035em;
    opacity: 0.8;
}
#award_cnt4 {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 115px;
    position: relative;
}
#award_cnt4 .cnt4_inner video {
    width: 100%;
}
#award_cnt4 .cnt4_btm {
    padding-top: 70px;
    display: inline-block;
}
#award_cnt4 .cnt4_txt {
    display: inline-block;
    padding-left: 60px;
    vertical-align: bottom;
}
#award_cnt4 .cnt4_txt h3 {
    font-size: 30px;
}
#award_cnt4 .cnt4_txt p {
    padding: 10px 0 32px;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.8;
}
#award_cnt5 .cnt_tit2 {
    color: #fff;
    padding-bottom: 74px;
}
#award_cnt5 .cnt_tit2::before {
    background-image: url("../images/award/award_cnt5_bg.jpg");
}
#award_cnt5 .cnt5_boxes {
    width: 835px;
    margin: 40px auto 235px;
}
#award_cnt5 .cnt5_box {
    display: inline-block;
    position: relative;
    width: 48%;
}
#award_cnt5 .cnt5_box:first-child {
    margin-right: 74px;
}
#award_cnt5 .cnt5_box img {
    width: 100%;
}
#award_cnt5 .cnt5_box p {
    padding-top: 31px;
    line-height: 1.5;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
}
#award_cnt5 .winner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 2%;
    right: 5%;
    border-radius: 50%;
    color: #fff;
    background: #f44b00;
    width: 74px;
    height: 74px;
    text-align: center;
    /* line-height: 74px; */
    font-size: 18px;
}
#award_cnt5 .award_work {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
#award_cnt5 .award_work h3 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.35;
}
#award_cnt5 .award_work .video_wrap {
    margin: 64px auto 50px;
    position: relative;
}
#award_cnt5 .award_work .video_wrap video {
    width: 100%;
}
#award_cnt5 .award_work .winner2 {
    position: absolute;
    top: 0;
    right: 0;
    background: url("../images/award/award_winner2.png") no-repeat;
    width: 144px;
    height: 147px;
    text-align: right;
    letter-spacing: 0;
}
#award_cnt5 .award_work .winner2 span {
    color: #fff;
    padding: 30% 10%;
    display: block;
    font-size: 16px;
}
#award_cnt5 .award_work p {
    font-size: 24px;
    line-height: 1.5;
    padding-bottom: 47px;
}
#award_cnt6 .cnt_tit2 {
    color: #fff;
    padding-bottom: 100px;
}
#award_cnt6 .cnt_tit2::before {
    background-image: url("../images/award/award_cnt6_bg.jpg");
}
#award_cnt6 .cnt6_boxes {
    max-width: 1190px;
    width: 100%;
    margin: 0 auto;
    display: flex;
}
#award_cnt6 .cnt6_box {
    margin-right: 15px;
    text-align: center;
    width: 30%;
}
#award_cnt6 .cnt6_box img {
    width: 100%;
}
#award_cnt6 .cnt6_box strong {
    display: block;
    font-size: 30px;
    line-height: 1.25;
    padding: 49px 0 21px;
    font-weight: 700;
}
#award_cnt6 .cnt6_box p {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.035em;
    font-weight: 100;
    opacity: 0.6;
}
#award_cnt6 .cnt6_boxes + div {
    text-align: center;
    margin-top: 70px;
}
#award_cnt7 {
    text-align: center;
}
#award_cnt7 .btn_pop_video {
    margin-top: 62px;
    width: 100%;
}
#award_cnt7 .btn_pop_video img {
    width: 100%;
}
#award_cnt7 .award_youtube {
    position: relative;
}
#award_cnt7 .cnt7_boxes {
    max-width: 1280px;
    width: 100%;
    margin: 58px auto 0;
    padding-bottom: 150px;
}
#award_cnt7 .cnt7_box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    padding-bottom: 127px;
}
#award_cnt7 .cnt7_box:nth-child(2) {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#award_cnt7 .cnt7_box > div {
    width: 50%;
}
#award_cnt7 .cnt7_box > div img {
    width: 100%;
}
#award_cnt7 .cnt7_box:nth-child(2) .box_txt {
    height: 100%;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    letter-spacing: -0.035em;
}
#award_cnt7 .cnt7_box .box_txt {
    text-align: left;
    letter-spacing: -0.035em;
    height: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
#award_cnt7 .cnt7_box .box_txt.fl_end {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
#award_cnt7 .cnt7_box .box_txt h3 {
    font-size: 40px;
    line-height: 1.4;
    font-weight: 700;
    padding-bottom: 30px;
    letter-spacing: -0.035em;
}
#award_cnt7 .cnt7_box .box_txt p {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.5;
}
#award_cnt7 .cnt7_box .box_txt .btn_more {
    margin: 65px 0 0;
}
#award_cnt7 .cnt7_box .box_txt p.delicious {
    font-size: 100px;
    font-weight: 300;
    font-family: "Gotham";
    letter-spacing: -0.035em;
}
#award_cnt7 .cnt7_box:nth-child(3) .box_txt p:last-of-type {
    padding-top: 45px;
}
#award_cnt7 + .cnt_line {
    top: auto;
    bottom: 0;
    background: #2f2f2f;
    height: 150px;
    line-height: 150px;
}
.deco_star {
    z-index: 1;
    display: block;
    position: absolute;
}
.deco_star1 {
    background: url("../images/award/star1.png");
    width: 231px;
    height: 229px;
    top: -7.291666667%;
    left: 5.740740741%;
}
.deco_star2 {
    background: url("../images/award/star2.png");
    width: 98px;
    height: 106px;
    top: 9.537037037%;
    right: 2.291666667%;
}
.deco_star3 {
    background: url("../images/award/star3.png");
    width: 76px;
    height: 75px;
    top: -1.203703704%;
    left: -7.5%;
}
.deco_star4 {
    background: url("../images/award/star4.png");
    width: 231px;
    height: 229px;
    top: -23.7037037%;
    right: -7.03125%;
}
.deco_star5 {
    background: url("../images/award/star2.png");
    width: 98px;
    height: 106px;
    top: 79.62962963%;
    left: -8.125%;
    position: absolute;
    z-index: 1;
    display: block;
}
#dim {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}
#video_pop {
    position: fixed;
    z-index: 2000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}
#video_pop2 {
    position: fixed;
    z-index: 2000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}
.md_close_btn {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    right: -50px;
    background: url("../images/portfolio/btn_close.png") no-repeat;
}

/* keyframe */
@keyframes txt_left {
    0% {
        transform: translateX(10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@-webkit-keyframes txt_left {
    0% {
        -webkit-transform: translateX(10%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}
@-moz-keyframes txt_left {
    0% {
        -moz-transform: translateX(10%);
        opacity: 0;
    }
    100% {
        -moz-transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes txt_right {
    0% {
        transform: translateX(-10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@-webkit-keyframes txt_right {
    0% {
        -webkit-transform: translateX(-10%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}
@-moz-keyframes txt_right {
    0% {
        -moz-transform: translateX(-10%);
        opacity: 0;
    }
    100% {
        -moz-transform: translateX(0%);
        opacity: 1;
    }
}
@keyframes x_rotate {
    0% {
        transform: rotate(360deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}
@-webkit-keyframes x_rotate {
    0% {
        -webkit-transform: rotate(360deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
}
@-moz-keyframes x_rotate {
    0% {
        -moz-transform: rotate(360deg);
        opacity: 0;
    }
    100% {
        -moz-transform: rotate(0deg);
        opacity: 1;
    }
}
@keyframes light_op {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes light_op {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes light_op {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}
/*--------------------------------------------------------------------------------------------------award 페이지 끝------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------------contact 페이지-----------------------------------------------------------------------------------------*/
#contact {
}
#contact .contact_cont {
    position: relative;
    background: url("../images/contact/bg_contact.jpg") no-repeat center center;
    background-size: cover;
}
#contact .contact_cont .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* background:#19b3b5; */
    background: #000;
    opacity: 0.84;
}
#contact .contact_cont .contact_info {
    position: absolute;
    top: 260px;
    width: 100%;
    text-align: center;
}
#contact .contact_cont .contact_info .title {
    padding-bottom: 42px;
    font-size: 54px;
    color: #fff;
    line-height: 39px;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top center;
}
#contact .contact_cont .contact_info .desc {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 76px;
    font-size: 30px;
    color: #fff;
    line-height: 1.2;
    font-family: "Roboto", sans-serif;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top center;
}
#contact .contact_cont .contact_info .btns {
    margin-bottom: 120px;
}
#contact .contact_cont .contact_info .btns .btn {
    position: relative;
    display: inline-block;
    width: 296px;
    height: 50px;
    margin: 0 20px;
    border: 2px solid #fff;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    color: #fff;
    line-height: 45px;
    transition: 0.3s ease all;
}
#contact .contact_cont .contact_info .info_list {
    overflow: hidden;
    width: 1024px;
    height: 485px;
    margin: 0 auto;
}
#contact .contact_cont .contact_info .info_list li {
    float: left;
    width: 307px;
    height: 100%;
    padding-left: 30px;
    border-left: 1px solid #fff;
    text-align: left;
}
#contact .contact_cont .contact_info .info_list li h3 {
    padding-bottom: 32px;
    font-size: 24px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 17px;
}
#contact .contact_cont .contact_info .info_list li p {
    padding-bottom: 14px;
    font-size: 14px;
    color: #fff;
    font-family: "Roboto Condensed", sans-serif;
    line-height: 10px;
}
#contact .contact_cont .contact_info .info_list li p span {
    display: inline-block;
    width: 40px;
}
#contact .contact_cont .contact_info .info_list li p em {
    color: inherit;
}
#contact .contact_cont .contact_info .info_list li:nth-child(1) {
    margin-left: 80px;
}
#contact .contact_cont .contact_info .info_list li:nth-child(3) {
    width: 230px;
}
#contact .contact_map {
    background: #000;
    opacity: 0.84;
}
#contact .contact_map .contact_map_inner {
    width: 100%; /*max-width:1920px;*/
    margin: 0 auto;
    position: relative;
}
#contact .contact_map img {
    display: block;
    width: 100%;
}
#contact .contact_map .map_marker {
    position: absolute; /*top:598px;left:1095px;*/
    left: 56.7%;
    top: 56%;
    transform: translate(-50%, -50%);
    display: inline-block;
    font-size: 0;
}
#contact .contact_map .map_marker .pulse {
    width: 22px;
    height: 22px;
    border: 5px solid #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #fff;
    z-index: 10;
    position: absolute;
}
#contact .contact_map .map_marker .dot {
    position: absolute;
    height: 56px;
    width: 56px;
    top: -17px;
    left: -17px;
    z-index: 2;
    opacity: 0; /* border: 10px solid #000;background:#000; */
    border: 10px solid #fff;
    background: #fff;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    -webkit-animation: mapani 2.5s ease-out;
    -moz-animation: mapani 2.5s ease-out;
    animation: mapani 2.5s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
#contact .contact_map .btn_map {
    position: absolute; /*bottom:40px; right:40px; */
    bottom: 55px;
    right: 75px;
    display: inline-block;
    width: 196px;
    height: 50px;
    background: #2b2b2b;
    border: 2px solid #fff;
    font-size: 18px;
    color: #fff;
    text-align: center;
    line-height: 41px;
    font-family: "Roboto", sans-serif;
    transition: 0.3s ease all;
}
/*--------------------------------------------------------------------------------------------contact 페이지 끝-----------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------프로젝트 의뢰--------------------------------------------------------------------------------------------*/
.layer {
    opacity: 0;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.layer_close {
    opacity: 0;
    position: absolute;
    top: 130px;
    right: 31px;
    z-index: 0;
} /*181228 수정 left->right*/
.layer_inner {
    width: 100%;
    height: 100%;
    opacity: 0;
}
.layer_inner .layer_sec {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s 1s;
    transform: translateZ(0);
}
.layer_inner .layer_sec::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.layer_inner .layer_sec .form {
    margin-bottom: 26%;
    display: inline-block;
    vertical-align: bottom;
    box-sizing: border-box;
    padding-left: 200px;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    /* -webkit-transition: all 0.3s linear; */
    opacity: 0;
} /*margin-bottom:563px;*/
.form02 {
    margin-bottom: 23% !important;
} /*487px*/
.layer_inner .layer_sec .form label {
    display: block;
    margin-bottom: 34px;
    color: #fff;
    font-size: 44px;
    letter-spacing: -1px;
    -webkit-transform: scaleX(0.96);
    -moz-transform: scaleX(0.96);
    transform: scaleX(0.96);
    transform-origin: top left;
}
.layer_inner .layer_sec .form .form_box {
    position: relative;
}
.layer_inner .layer_sec .form .form_box::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    left: 0;
    bottom: 0;
    background: #656565;
    backface-visibility: hidden;
    opacity: 0;
    transform: rotate(-10deg) rotateX(50deg) translateX(-40px) translateY(40px) translateZ(0);
}
.layer_inner .layer_sec .form .form_box .f_input {
    width: 800px;
    height: 62px;
    color: hsla(0, 0%, 100%, 0.3);
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    /* -webkit-appearance: none !important; */
    font-size: 52px;
    color: #fff;
}
.layer_inner .layer_sec .form .form_box .f_textarea {
    height: 164px;
}
.layer_inner .layer_sec .form .form_box .f_desc {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 52px;
    color: #fff;
    opacity: 0.2;
    letter-spacing: -0.5px;
    visibility: hidden;
    font-weight: 300;
}
.layer_inner .layer_sec .form .form_box .f_alert {
    opacity: 0;
    position: absolute;
    bottom: -38px;
    left: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 100;
    line-height: 16px;
    -webkit-transform: scaleX(0.97);
    -moz-transform: scaleX(0.97);
    transform: scaleX(0.97);
    transform-origin: top left;
}
.layer_inner .layer_sec .form .form_box.is-error .f_alert {
    opacity: 1;
}
.layer_inner .layer_sec .form label,
.layer_inner .layer_sec .form .form_box .f_input {
    backface-visibility: hidden;
    opacity: 0;
    transform: rotate(-10deg) rotateX(50deg) translateX(-40px) translateY(40px) translateZ(0);
}

.layer_inner .layer_sec.active {
    opacity: 1;
    visibility: visible;
    transition: 0s 0s;
}
.layer_inner .layer_sec.active .form label,
.layer_inner .layer_sec.active .form .form_box .f_input {
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s, opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
    opacity: 1;
    transform: rotate(0) rotateX(0) translateX(0) translateY(0) translateZ(0);
}
.layer_inner .layer_sec.active .form .form_box::before {
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s, opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
    opacity: 1;
    transform: rotate(0) rotateX(0) translateX(0) translateY(0) translateZ(0);
}
.layer_inner .layer_sec.leaving .form label,
.layer_inner .layer_sec.leaving .form .form_box .f_input {
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s, opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s;
    opacity: 0;
    transform: rotate(10deg) rotateX(-50deg) translateX(40px) translateY(-40px) translateZ(0);
}

.layer_inner .btn_container {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 19%;
    margin-left: 200px;
    opacity: 0;
} /*margin-bottom:353px;*/
.layer_inner .btn_container .btn_next,
.btn_container_close > a {
    position: relative;
    display: inline-block;
    width: 236px;
    height: 50px;
    background: #000;
    border: 2px solid #fff;
    font-size: 22px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.btn_container_close > a {
    position: relative;
    display: inline-block;
    width: 236px;
    height: 50px;
    background: #000;
    border: 2px solid #fff;
    font-size: 22px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.layer_inner .btn_container_close {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 19%;
    margin-left: 200px;
} /*margin-bottom:353px;*/

.layer.open {
    display: block;
    opacity: 1;
    z-index: 9999;
}
.layer.active {
    padding: 130px 90px;
    background: #fff;
}
.layer.active .layer_inner {
    opacity: 1;
    background: #000;
}
.layer.active .layer_close {
    opacity: 1;
    z-index: 100;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.layer.active .layer_close:hover {
    opacity: 0.5;
}

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    z-index: 299;
}
.pf_play .mask {
    height: 100% !important;
}
/*------------------------------------------------------------------------------------------------------프로젝트 의뢰 끝-------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------푸터------------------------------------------------------------------------------------------------*/
/*수정전 footer*/
/* #footer{display:table;width:100%;height:390px;color:#fff;text-align:center;position:relative}
#footer .half{float:left;width:50%;display:table;padding-top:158px;margin-top:158px}
#footer .half.prev{text-align:right;padding-right:171px;opacity:0.5;position:relative}
#footer .half.prev .text::before{content: '';position:absolute;bottom:20px;left:inherit;right:0;width:444px;margin-left:0;height:12px;background: url("../images/common/icon_page_arrow.png");background-position: 0 0;opacity:0.3 ! important;}
#footer .half.prev .page{transform-origin:top right;}
#footer .half.next{text-align:left;padding-left:171px;opacity:0.5;position:relative}
#footer .half.next .text::before{content: '';position:absolute;bottom:20px;left:0;width:444px;margin-left:0;height:12px;background: url("../images/common/icon_page_arrow.png");background-position: 0 -12px;opacity:0.3 ! important;}
#footer .half.next .page{transform-origin:top left}

#footer .all{display:inline-block;text-align:center;padding-top:158px;}
#footer a{display:table-cell;color:#fff}
#footer .text{position:relative;padding-bottom:40px;font-size:28px;line-height:20px;font-family:'Roboto Condensed', sans-serif;font-weight:100;}
#footer .text strong{font-weight:400;}
#footer .text::before{content: '';position:absolute;bottom:20px;left:50%;width:444px;margin-left:-222px;height:1px;background:#fff}
#footer .page{font-size:30px;line-height:28px;font-family:'noto-sans-scott', sans-serif;font-weight:400;letter-spacing:-1px;-webkit-transform:scaleX(0.9);-moz-transform:scaleX(0.9);transform:scaleX(0.9);transform-origin:top center;}

#footer .n1ext{position:relative;padding:158px 0 40px;font-size:28px;line-height:20px;font-family:'Roboto Condensed', sans-serif;font-weight:100;}


#footer .foot_center {width:50%;display:table;padding-top:158px;margin:0 auto}


#footer .half .text, #footer .half .page {opacity:0.5}
#footer .half .prev_line, #footer .half .next_line {position:absolute;top:50%;width:calc(100% - 200px);height:1px;background-color:rgba(255,255,255,0.3);transform:translateY(-50%)}
#footer .half .prev_line {right:171px}
#footer .half .next_line {left:171px}
#footer .half .prev_line .prev_w, #footer .half .prev_line .next_w {position:absolute;top:0;width:0;height:100%;background-color:#fff;transition:all, 0.5s}
#footer .half .prev_line .prev_w {right:0}
#footer .half .prev_line .next_w {left:0}
#footer .half:hover .text, #footer .half:hover .page {opacity:1}
#footer .half:hover .prev_w, #footer .half:hover .next_w {width:100%}
 */
/* footer */
#footer {
    display: table;
    width: 100%; /* height:390px; */ /*height:550px;*/
    color: #fff;
    text-align: center;
    position: relative;
}
#footer .half {
    float: left;
    position: relative;
    width: 50%;
    display: table; /*padding-top:158px;*/
    margin-top: 158px;
}
#footer .half.prev {
    text-align: right;
    padding-right: 171px;
    position: relative;
}
#footer .half .text,
#footer .half .page {
    opacity: 0.5;
}
#footer .half .prev_line,
#footer .half .next_line {
    position: absolute;
    top: 50%; /* width:calc(100% - 200px); */
    width: 467px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transform: translateY(-50%);
}
#footer .half .prev_line .prev_w,
#footer .half .next_line .next_w {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #fff;
    transition: all, 0.5s;
}
#footer .half .prev_line .prev_w {
    right: 0;
}
#footer .half .next_line .next_w {
    left: 0;
}
#footer .half .prev_line {
    right: 171px;
}
#footer .half .next_line {
    left: 171px;
}
#footer .half.prev .page {
    transform-origin: top right;
}
#footer .half.next {
    text-align: left;
    padding-left: 171px;
    position: relative;
}
#footer .half.next .page {
    transform-origin: top left;
}

/*추가*/
#footer .prev > a:hover .text,
#footer .next > a:hover .text,
#footer .prev > a:hover .page,
#footer .next > a:hover .page {
    opacity: 1;
}
#footer .prev > a:hover .prev_w,
#footer .next > a:hover .prev_w,
#footer .prev > a:hover .next_w,
#footer .next > a:hover .next_w {
    width: 100%;
}

#footer .all {
    display: inline-block;
    text-align: center;
    padding-top: 158px;
}
/* #footer a{display:table-cell;color:#fff;width:300px} */
#footer .prev > a {
    display: block;
    width: 466px;
    height: auto;
    float: right;
    color: #fff;
}
#footer .next > a {
    display: block;
    width: 466px;
    height: auto;
    float: left;
    color: #fff;
}
#footer .text {
    position: relative;
    padding-bottom: 40px;
    font-size: 28px;
    line-height: 20px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 100;
}
#footer .text strong {
    font-weight: 400;
}
/* #footer .text::before{content: '';position:absolute;bottom:20px;left:50%;width:444px;margin-left:-222px;height:1px;background:#fff} */
#footer .page {
    font-size: 30px;
    line-height: 28px;
    font-family: "noto-sans-scott", sans-serif;
    font-weight: 400;
    letter-spacing: -1px;
    -webkit-transform: scaleX(0.9);
    -moz-transform: scaleX(0.9);
    transform: scaleX(0.9);
    transform-origin: top center;
}
#footer .n1ext {
    position: relative;
    padding: 158px 0 40px;
    font-size: 28px;
    line-height: 20px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 100;
}
#footer .foot_center {
    width: 50%;
    display: table;
    padding-top: 158px;
    margin: 0 auto;
}

#footer .foot_bg {
    position: absolute;
    top: 0;
    left: 0;
}
#footer .bg_link {
    display: block;
    width: 100%;
    height: 100%;
}
#footer .pt_name {
    /*width:625px;*/
    height: 186px;
    position: absolute;
    top: 29%;
    left: 180px;
    font-size: 50px;
    text-align: left;
} /*top:38%*/
#footer .pt_name .pp_next {
    font-size: 18px;
    padding-left: 5px;
    letter-spacing: -1px;
    font-weight: 200;
}
.pp_desc {
    /*font-size:80px;*/
    font-size: 4.2vw;
    letter-spacing: -5px;
}
.pp_desc02 {
    font-size: 24px;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: 100;
    text-align: left;
    padding-left: 5px;
}
/*-------------------------------------------------------------------------------------------------------------푸터 끝---------------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------------------------------css animation------------------------------------------------------------------------------------------ */
@keyframes mapani {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    25% {
        transform: scale(0);
        opacity: 0.2;
    }
    50% {
        transform: scale(0.1);
        opacity: 0.5;
    }
    75% {
        transform: scale(0.5);
        opacity: 0.9;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
@-webkit-keyframes mapani {
    0% {
        -webkit-transform: scale(0);
        opacity: 0;
    }
    25% {
        -webkit-transform: scale(0);
        opacity: 0.2;
    }
    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.5;
    }
    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}
@-moz-keyframes mapani {
    0% {
        -moz-transform: scale(0);
        opacity: 0;
    }
    25% {
        -moz-transform: scale(0);
        opacity: 0.2;
    }
    50% {
        -moz-transform: scale(0.1);
        opacity: 0.5;
    }
    75% {
        -moz-transform: scale(0.5);
        opacity: 0.9;
    }
    100% {
        -moz-transform: scale(1);
        opacity: 0;
    }
}
@keyframes playani {
    0% {
        opacity: 0.7;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.7;
    }
    75% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.7;
    }
}
@-webkit-keyframes playani {
    0% {
        opacity: 0.7;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.7;
    }
    75% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.7;
    }
}
@-moz-keyframes playani {
    0% {
        opacity: 0.7;
    }
    25% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.7;
    }
    75% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.7;
    }
}
/* -----------------------------------------------------------------------------------------------------css animation 끝---------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------미디어 쿼리--------------------------------------------------------------------------------------- */
@media screen and (min-width: 1921px) {
    #header .gnb,
    #header .family {
        left: 4.5%;
    }
    #header .logo,
    #header .sns,
    #header .project {
        right: 4.5%;
    }
    .pop_190604 {
        right: 9%;
    }
    #header .award_tag_rightbottom {
        right: 5%;
    }
}
.on1500 {
    display: none;
}
@media screen and (max-width: 1500px) {
    .on1500 {
        display: block;
    }
    #nav {
        overflow-y: scroll;
        padding-bottom: 9%;
    }
    .preload .loadin .loadin_cont p {
        font-size: 71px;
        letter-spacing: -0.02em;
        line-height: 0.75;
    }
    #main .mainslider .slider_content .slider_inner {
        width: 80%;
        left: 12.5%; /*padding:0 0 0 16%*/
    }
    #main .mainslider .slider_content .slider_text .slide_title a {
        font-size: 68px;
    }

    #about .profile {
        padding-left: 8%;
    }
    /*#about .profile .profile_play{top:900px;width:900px;}*/
    /*#about .profile .profile_cont.cont2{padding-left:800px}*/
    /*#about .branding .branding_img{left:-10%}*/
    #about .boundary .boundary_list li {
        width: 33%;
    }
    #about .branding .box {
        top: 10%;
    }

    /*#contact .contact_map img{position: relative;left: 50%;transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0)}*/
    /*#contact .contact_map .map_marker{top:54.5%;left:50%;margin-left:10%;}*/

    #portfolio .portfolio_view .view_content .view_visual .visual_img {
        height: 105vh;
    }
    #portfolio .portfolio_view .view_content .view_visual .visual_img .centerd-image {
        width: auto;
        height: 100%;
    }
    .site-borders .border.right,
    .site-borders .border.left {
        height: calc(100% + 1px);
    }
    .scroll-indicator {
        height: 12vh;
        margin-left: -2px;
        transform: none;
    }
    .scroll-indicator img {
        width: 25px;
    }
    #portfolio .portfolio_view .view_content .view_detail .detail_info {
        max-width: 75%;
    }
    #portfolio .portfolio_view .view_content .view_visual .visual_cont {
        width: 82%;
        padding: 63vh 0 0 19.916667%;
    }
    #portfolio .portfolio_view .view_content .view_visual .visual_cont .title {
        margin-bottom: 15px;
        font-size: 64px;
        line-height: 1.05;
    }
    #portfolio .portfolio_view .view_content .view_visual .visual_cont .desc {
        font-size: 22px;
    }
    #portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_cont_box {
        padding: 0 10% 95px;
    }
    #portfolio .portfolio_view .view_content .view_detail .detail_cont .pf_title {
        padding: 0 10% 30px;
    }
    #footer .pt_name {
        top: 20%;
        left: 12%;
    }
    .pp_desc {
        font-size: 4.5vw;
        letter-spacing: -0.05em;
    }
    .pp_desc02 {
        font-size: 22px;
        margin-top: 0.2em;
    }
}

@media screen and (max-width: 1200px) {
    #about .big_title {
        font-size: 44px;
    }
    #about .title {
        font-size: 34px;
    }
    #about .text {
        font-size: 15px;
    }
    #about .profile {
        padding-left: 8%;
    }
    /*#about .profile .profile_play{top:1200px;width:630px;height:400px;}*/
    #about .profile .profile_cont.cont2 {
        padding-left: 52%;
    }
    /* #about .branding { 
        padding-left: 50.6%;
    } */
    /*#about .branding .branding_img{left:-20%}}*/
    /*#about .boundary .boundary_list{width:1000px}*/
    #about .boundary .boundary_list li {
        width: 33%;
    }
    #about .branding .box {
        top: 10%;
    }
    #award_cnt7 .cnt7_box .box_txt h3 {
        font-size: 34px;
    }
    #award .award_box .award_list {
        margin-left: 22%;
    }

    /*#contact .contact_map .map_marker{margin-left:13%}*/
}

/*PORTFOLIO LIST
@media screen and (max-width:1715px) {
	#portfolio .portfolio_list {margin-left:10%}
}
 @media screen and (max-width:1425px) {
	#portfolio .portfolio_list {margin-left:15%}
}
 @media screen and (max-width:939px) {
	#portfolio .portfolio_list {margin-left:30%}
}
 @media screen and (max-width:577px) {
	#portfolio .portfolio_list {margin-left:18%}
}*/
/* -----------------------------------------------------------------------------------------------------미디어 쿼리 끝-------------------------------------------------------------------------------------- */
/*-------------------------------------------------------------------------------------아이패드 가로 모드-----------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px) and (orientation: landscape) {
    #header .logo {
        top: 25px;
    }
    #header .gnb {
        top: 15px;
    }
    #header .header_right {
        height: calc(100% - 12em - 20vh);
        position: fixed;
        bottom: 12em;
        right: 40px;
        z-index: 101;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-end;
    }
    #header .sns,
    #header .award_tag {
        position: relative;
        margin-left: 0;
        top: auto;
        bottom: auto;
        right: auto;
    }
    #header .sns a {
        margin-bottom: 35px;
    }
    #header .award_tag {
        margin: 10px 0 16px;
        transform: translateX(40px);
    }
    #header .project {
        position: relative;
        bottom: auto;
        right: auto;
        transform: rotate(90deg) translateX(100%);
        transform-origin: top right;
        -webkit-transform: rotate(90deg) translateX(100%);
    }
    #header .project a {
        padding: 0;
    }
}
/*-------------------------------------------------------------------------------------아이패드 가로 모드 끝-----------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------아이패드 세로 모드-----------------------------------------------------------------------------------------------*/
/* @media screen and (max-width: 820px) {
  .pop_190604 {right: -1vh; top: 38%;}
  .pop_btn_190604{width: 8%; top: 0; right: 10%;}
  #header .award_tag{bottom: 300px;}
} */
/*-------------------------------------------------------------------------------------아이패드 세로 모드-----------------------------------------------------------------------------------------------*/