@charset "utf-8";


/* animation */
@keyframes top {
    from {transform: translateY(100px); opacity: 0;}
}

@keyframes right {
    from {transform: translateX(-100px); opacity: 0;}
}

@keyframes left {
    from {transform: translateX(100px); opacity: 0;}
}

/* header */
body.on {overflow: hidden;}
#wrap {}
header {position: fixed; left: 0; top: 0; width: 100%; height: 72px; padding-top: 28px; background-color: #000; z-index: 100; transition: top .2s;}
header.up {top: -72px;}
.header_inner {position: relative; width: 88.889%; margin: 0 auto;}
.header_inner .logo {}
.header_inner .logo a {display: block; width: 120px; height: 16px; background:url(../img/logo.png) no-repeat center/contain;}
.header_inner .btn_nav {position: absolute; top: 0; right: 0; width: 20px;}
.header_inner .btn_nav span {display: block; height: 2px; background-color: #fff;}
.header_inner .btn_nav span:nth-child(2) {margin: 6px 0;}

.nav_wrap {/* display: none; */ position: fixed; left: 100%; top: 0; width: 100%; height: 100%; padding-top: 40px; background-color: #000;}
.nav_inner {width: 88.889%; margin: 0 auto;}
.nav_inner .nav_top {margin-bottom: 137px;}
.nav_inner .nav_top a {float: left; width: 135px; height: 18px; background: url(../img/logo.png) no-repeat center/contain;}
.nav_inner .nav_top .nav_close {float: right; width: 20px; height: 20px; background: url(../img/btn_close.png) no-repeat center/contain;}
.nav_inner .gnb {margin-bottom: 102px;}
.nav_inner .gnb li {margin-bottom: 24px;}
.nav_inner .gnb li a {display: block; font-size: 30px; font-weight: 700; color: #fff;}
.nav_inner > a {font-size: 16px; font-weight: 500; color: #fff; position: absolute; bottom: 40px; left: 4.444%;}
.nav_inner > a:after {content: ""; display: inline-block; width: 5px; height: 10px; margin-left: 10px; background: url(../img/ico_arrow2.png) no-repeat center/contain;}

/* visual */
#visual {position :relative; height: 620px;}
.visual_slider {}
.visual_slider .swiper-slide {position: relative;}
.visual_slider .v_box {padding-top: 228px; height:620px;}
.visual_slider .v_box.v_01 {background:url(../img/visual.jpg) no-repeat center/cover;}
.visual_slider .v_box .video_wrap {position: absolute; left:0; top:0; width:100%; height:620px;}
.visual_slider .v_box .video_visual {position: absolute; object-fit: cover; width: 100%; height: 100%;}
.visual_slider .v_box .text_box {width: 88.889%; margin: 0 auto; color: #fff; text-align: center; position: relative;}
.visual_slider .v_box h2 {margin-bottom: 12px; font-size: 52px; font-weight: 800; line-height: 1.115;}
.visual_slider .v_box p {font-size: 16px; line-height: 1.5;}

.visual_slider .visual_pagination {position: absolute; bottom: 156px; z-index: 10; width: 100%; text-align: center;}
.visual_slider .visual_pagination .swiper-pagination-bullet {width: 6px; height: 6px; background-color: #fff; opacity: .5; margin: 0 6px;}
.visual_slider .visual_pagination .swiper-pagination-bullet-active {opacity: 1;}

.visual_slider .v_box .text_box h2,
.visual_slider .v_box .text_box p {opacity: 0;}
.visual_slider .v_box.swiper-slide-active .text_box h2,
.visual_slider .v_box.swiper-slide-active .text_box p {animation: top .5s backwards; opacity: 1;}
.visual_slider .v_box.swiper-slide-active .text_box p {animation-delay: .2s;}

/* main */ 
main {}

section > div {width: 88.889%; margin: 0 auto;}
section .title h2 {margin-bottom: 16px; font-size: 36px; font-weight: 800; line-height: 1.167; text-transform: capitalize;}
section .title h2:after {content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 2px; background-color: #722fda;}
section .title p {font-size: 18px; font-weight: 500; line-height: 1.444;} /* 18 / 26 */

/* agency */

#agency {padding: 80px 0 90px;}
.agency_inner {}
.agency_inner h2 {margin-bottom: 30px; font-size: 38px; font-weight:800; text-align: right; line-height: 1.105; text-transform: capitalize;}
/*
.agency_inner .agency_img {display: block; padding-bottom: 62.812%; border-radius: 12px; margin-bottom: 30px; background: url(../img/img_agency.png) no-repeat center/cover;}
*/
.agency_inner .agency_img {display: block; position: relative; height:0; padding-bottom: 62.812%; border-radius: 12px; margin-bottom: 30px; overflow: hidden;}
.agency_inner .agency_img video {position:absolute; object-fit: cover; width: 100%; height: 100%;}

.agency_inner p {font-size: 24px; line-height: 1.5;}

.agency_inner h2,
.agency_inner .agency_img,
.agency_inner p {opacity: 0;}
.agency_inner.on h2,
.agency_inner.on .agency_img,
.agency_inner.on p {opacity: 1; animation: right .5s backwards;}
.agency_inner.on .agency_img {animation-name: left; animation-delay: .3s;}
.agency_inner.on p {animation-name: top; animation-delay: .6s;}

/* wedo */
#wedo {padding: 80px 0; background-color: #000; color: #fff;}
.wedo_inner {}
.wedo_inner .title {margin-bottom: 40px;}
.wedo_inner .title h2 {}
.wedo_inner .title h2:after {}
.wedo_inner .title p {}

.wedo_list {}
.wedo_list .wedo_box {/* height: 363px; */ margin-bottom: 16px; padding: 40px 10.938%; border-radius: 16px; border: 1px solid rgba(255,255,255,.5);}
.wedo_list .wedo_box:last-child {margin-bottom: 0;}
.wedo_list .wedo_box h3 {margin-bottom: 16px; font-size: 26px; font-weight: 600; line-height: 1.192;}
.wedo_list .wedo_box p {margin-bottom: 35px; font-size: 16px; font-weight: 500; line-height: 1.5;}
.wedo_list .wedo_box span {display: block; /* width: 225px; height:  100px; */ padding-bottom: 44.444%; margin: 0 auto 35px; background: url(../img/img_wedo1.png) no-repeat center/contain; max-width: 450px;} /* 90% , 44.444% */
.wedo_list .wedo_box:nth-child(2) span {background-image: url(../img/img_wedo2.png);}
.wedo_list .wedo_box:nth-child(3) span {background-image: url(../img/img_wedo3.png);}
.wedo_list .wedo_box:nth-child(4) span {background-image: url(../img/img_wedo4.png);}
.wedo_list .wedo_box a {font-size: 15px; color: #fff;}
.wedo_list .wedo_box a:after {content: ""; display: inline-block; width: 5px; height: 10px; margin-left: 8px; background: url(../img/ico_arrow.png) no-repeat center/contain;}

.wedo_inner .title h2,
.wedo_inner .title p {opacity: 0;}
.wedo_inner .title.on h2,
.wedo_inner .title.on p {opacity: 1; animation: left .5s backwards;}
.wedo_inner .title.on p {animation-delay: .1s;}
.wedo_list .wedo_box {opacity: 0;}
.wedo_list .wedo_box.on {opacity: 1; animation:top .5s}

/* portfolio */
#portfolio {padding:80px 0;}
.portfolio_inner {}
.portfolio_inner .title {margin-bottom: 40px;}
.portfolio_inner .title h2 {}
.portfolio_inner .title p {}

.portfolio_list {}
.portfolio_list .portfolio_box {margin-bottom: 40px;}
.portfolio_list .portfolio_box:nth-child(3) ~ div {display: none ;}
.portfolio_list .portfolio_box .port_img {display: block; /* height: 300px; */ border-radius: 16px; margin-bottom: 24px; position: relative; overflow: hidden;}
.portfolio_list .portfolio_box .port_img > div {width:100%; padding-bottom: 93.75%; height:100%; background: url(../img/img_port1.png) no-repeat center/cover; transition:all .3s;}
.portfolio_list .portfolio_box .port_img > div:hover {transform: scale(1.05);}
.portfolio_list .portfolio_box .port_img video {position:absolute; object-fit: cover; width: 100%; height: 100%;}

.portfolio_list .portfolio_box:nth-child(1) .port_img div {background:none;}
.portfolio_list .portfolio_box:nth-child(2) .port_img div {background-image: url(../img/img_port2.png);}
.portfolio_list .portfolio_box:nth-child(3) .port_img div {background-image: url(../img/img_port3.png);}
.portfolio_list .portfolio_box:nth-child(4) .port_img div {background-image: url(../img/img_port4.png);}
.portfolio_list .portfolio_box:nth-child(5) .port_img div {background-image: url(../img/img_port5.png);}
.portfolio_list .portfolio_box:nth-child(6) .port_img div {background:none;}
.portfolio_list .portfolio_box span {display: inline-block; height: 32px; line-height: 32px; padding: 0 12px; margin-bottom: 14px; border-radius: 6px; background-color: #000; color: #fff; font-size: 13px; font-weight: 500; text-transform: capitalize;}
.portfolio_list .portfolio_box h3 {margin-bottom: 14px; font-size: 26px; font-weight: 700; line-height: 1.192;}
.portfolio_list .portfolio_box p {font-size: 16px; font-weight: 500; color: #666; line-height: 1.562;}

.portfolio_inner a {display: block; width:150px; height: 50px; line-height: 48px; border: 1px solid #000; margin:0 auto; border-radius: 50px; font-size: 16px; font-weight: 500; color: #000; text-align: center;}
.portfolio_inner a:after {content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; background: url(../img/ico_more.png) no-repeat center/contain;}

.portfolio_inner .title h2,
.portfolio_inner .title p,
.portfolio_list .portfolio_box {opacity: 0;}
.portfolio_inner .title.on h2,
.portfolio_inner .title.on p,
.portfolio_list .portfolio_box.on {opacity: 1; animation: left .5s backwards;}
.portfolio_inner .title.on p {animation-delay: .1s;}
.portfolio_list .portfolio_box.on {opacity: 1; animation:top .5s}

/* partners */
#partners {padding: 80px 0; background-color: #f9f9f9;}
.partners_inner {}
.partners_inner .title {}
.partners_inner .title h2 {margin-bottom:40px;}
.partners_inner .partners_list {}
.partners_inner .partners_list > div {display: block}
.partners_inner .partners_list span {float: left; width: 50%; height: 35px; margin-bottom: 30px; text-align: center;}
.partners_inner .partners_list a {display: inline-block;}
.partners_inner .partners_list a.pn_01 {width: 136px;}
.partners_inner .partners_list a.pn_02 {width: 101px;}
.partners_inner .partners_list a.pn_03 {width: 97px;}
.partners_inner .partners_list a.pn_04 {width: 130px;}
.partners_inner .partners_list a img {width: 100%;}

.partners_inner .title h2,
.partners_inner .partners_list span {opacity: 0;}
.partners_inner.on .title h2,
.partners_inner.on .partners_list span {opacity: 1; animation: left .5s backwards;}
.partners_inner.on .partners_list span {animation-name: top; animation-delay: .2s;}

/* contect */
#contect {height: 400px; padding-top: 110px; text-align: center; position: relative;}
.contect_inner {}
.contect_inner .contect_img {position: absolute; left:0; top:0; width:100%; height: 100%; overflow: hidden;}
.contect_inner .video_contect {position: absolute; left:0; top:0; object-fit: cover; width: 100%; height: 100%;}
.contect_inner h2 {margin-bottom: 32px; font-size: 52px; font-weight: 700; line-height: 1.190; color: #fff; position: relative;}
.contect_inner a {display: block; width:160px; height: 50px; line-height: 48px; border: 1px solid #fff; margin:0 auto; border-radius: 50px; font-size: 16px; font-weight: 500; color: #fff; text-align: center; position: relative;}
.contect_inner a:after {content: ""; display: inline-block; width: 6px; height: 10px; margin-left: 10px; background: url(../img/ico_arrow2.png) no-repeat center/contain;}

/* footer */
footer {padding: 40px 0; background-color: #000;}
.footer_inner {width: 88.889%; margin: 0 auto;}
.footer_inner .f_logo {display: block; width: 108px; height: 15px; margin-bottom: 24px; background: url(../img/logo_f.png) no-repeat center/contain;}
.footer_inner p {font-size: 14px; color: #9e9e9e; line-height: 1.571; margin-bottom: 2px;}
.footer_inner p a {color: #9e9e9e;}
.footer_inner p:nth-of-type(1) span:first-child:after {content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 3px 0 6px; background-color: #5e5e5e;}
.footer_inner p:nth-of-type(2) {margin-bottom:16px;}
.footer_inner p:nth-of-type(2) span:last-child {display: block;}
.footer_inner p:last-of-typed {font-size: 13px; color: #696969;}

/* 768 */
@media all and (min-width:768px) {
    header {height: 75px; padding-top: 30px; transition: top .2s;}
    header.up {top: -75px;}
    .header_inner .logo a {width: 130px; height: 18px;}
    .header_inner .btn_nav {width: 24px;}
    .header_inner .btn_nav span {display: block; height: 2px; background-color: #fff;}
    .header_inner .btn_nav span:nth-child(2) {margin: 7px 0;}

    .nav_inner .nav_top {margin-bottom: 200px;}
    .nav_inner .nav_top a {width: 140px; height: 20px;}
    .nav_inner .nav_top .nav_close {width: 22px; height: 22px;}
    .nav_inner .gnb li {margin-bottom: 40px;}
    
    /* visual */
    #visual {position :relative; height: 750px;}
    .visual_slider .v_box {padding-top: 280px; height:750px;}
    .visual_slider .v_box.v_01 {}
    .visual_slider .v_box .video_wrap {height:750px;}
    .visual_slider .v_box h2 {margin-bottom: 20px; font-size: 70px;}
    .visual_slider .v_box p {width: 80%; margin: 0 auto; font-size: 18px; line-height: 1.5;}

    .visual_slider .visual_pagination .swiper-pagination-bullet {width: 8px; height: 8px;}

    /* main */ 
    section .title h2 {margin-bottom: 20px; font-size: 42px;}
    section .title h2:after {width: 10px; height: 10px;}
    section .title p {font-size: 20px;}

    /* agency */
    #agency {padding: 120px 0;}
    .agency_inner h2 {margin-bottom: 50px; font-size: 44px;}
    .agency_inner h2 br {display: none;}
    .agency_inner .agency_img {display: block; /* height: 201px; */ padding-bottom: 50%; border-radius: 16px; margin-bottom: 40px;}
    .agency_inner p {font-size: 30px;}

    /* wedo */
    #wedo {padding: 120px 0;}
    .wedo_inner .title {margin-bottom: 80px;}
    
    .wedo_list {display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom:50px;}
    .wedo_list .wedo_box {width:49%; margin-bottom: 16px; padding: 45px 5%; border-radius: 16px;}
    .wedo_list .wedo_box:nth-child(3) {margin-bottom:0;}
    .wedo_list .wedo_box:nth-child(2n) {position: relative; top:50px;}
    .wedo_list .wedo_box h3 {margin-bottom: 16px; font-size: 28px;}
    .wedo_list .wedo_box p {margin-bottom: 42px; font-size: 18px;}
    .wedo_list .wedo_box span {padding-bottom: 32%; margin-bottom: 42px;  max-width:none;} /* 90% , 44.444% */
    .wedo_list .wedo_box a {font-size: 18px;}
    .wedo_list .wedo_box a:after {width: 6px; height: 10px; margin-left: 8px;}

    .wedo_list .wedo_box {opacity: 0;}
    .wedo_list .wedo_box.on {opacity: 1; animation:top 1s}

    @keyframes top {
        from {transform: translateY(100px); opacity: 0;}
    }

    /* portfolio */
    #portfolio {padding:120px 0;}
    .portfolio_inner .title {margin-bottom: 80px;}

    .portfolio_list {display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 50px;}
    .portfolio_list .portfolio_box {margin-bottom: 50px; width:48%;}
    .portfolio_list .portfolio_box:nth-child(3) + div {display: block;}
    .portfolio_list .portfolio_box:nth-child(2n) {position: relative; top:50px;}
    .portfolio_list .portfolio_box .port_img {border-radius: 18px; margin-bottom: 30px;}
    .portfolio_list .portfolio_box span {margin-bottom: 16px;}
    .portfolio_list .portfolio_box h3 {margin-bottom: 16px;}
    .portfolio_list .portfolio_box p {font-size: 16px;}

    .portfolio_inner a {width:170px; height: 54px; line-height: 52px; border-radius: 54px; font-size: 20px;}
    .portfolio_inner a:after {width: 12px; height: 12px;}

    /* partners */
    #partners {padding: 120px 0;}
    .partners_inner .title h2 {margin-bottom:80px;}
    .partners_inner .partners_list span {height: 50px; margin-bottom: 40px;}
    .partners_inner .partners_list a.pn_01 {width: 176px;}
    .partners_inner .partners_list a.pn_02 {width: 151px;}
    .partners_inner .partners_list a.pn_03 {width: 157px;}
    .partners_inner .partners_list a.pn_04 {width: 150px;}
    .partners_inner .partners_list a img {width: 100%;}

    /* contect */
    #contect {height: 550px; padding-top: 150px;}
    .contect_inner h2 {margin-bottom: 40px; font-size: 64px;}
    .contect_inner a {width:180px; height: 54px; line-height: 52px; border-radius: 54px; font-size: 20px;}
    .contect_inner a:after {width: 8px; height: 12px;}


    /* footer */
    footer {padding: 55px 0;}
    .footer_inner .f_logo {width: 120px; height: 17px; margin-bottom: 26px;}

}

/* pc */
@media all and (min-width:1520px) {
    /* header */
    /* #wrap {width: 1480px; margin: 0 auto;} */
    header {height: 80px; padding-top: 30px;}
    header.up {top:-80px;}
    .header_inner {width: 1420px;}
    .header_inner .logo a {width: 148px; height: 20px;}
    .header_inner .btn_nav {display: none;}

    .nav_wrap {display: block; position: absolute; top: 5px; left: 50% !important; transform: translateX(-50%); width: auto; height: auto; background-color: transparent; padding-top:0;}
    .nav_inner {width: auto; margin: 0;}
    .nav_inner .nav_top {display: none;}
    .nav_inner .gnb {display: flex; justify-content: space-between; width: 651px;}
    .nav_inner .gnb li {margin-bottom: 0;}
    .nav_inner .gnb li a {font-size: 16px; font-weight: bold; color: #fff;}
    .nav_inner > a {display: none;}

    /* visual */
    #visual {height: 960px;}
    .visual_slider .v_box {padding-top: 350px; height:960px;}
    .visual_slider .v_box .video_wrap {height:960px;}
    .visual_slider .v_box .text_box {width: 88.889%;}
    .visual_slider .v_box h2 {margin-bottom: 28px; font-size: 96px; line-height: 1.063;}
    .visual_slider .v_box p {width: 500px; margin: 0 auto; font-size: 22px; line-height: 1.455;}
    .visual_slider .v_box p br {display: none;}

    .visual_slider .visual_pagination {bottom: 252px;}
    .visual_slider .visual_pagination .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 8px;}

    /* main */ 
    section > div {width: 1420px; margin: 0 auto;}
    section .title h2 {margin-bottom: 24px; font-size: 60px; line-height: 1.183; }
    section .title h2:after {width: 12px; height: 12px;}
    section .title p {font-size: 24px; line-height: 1.167;}

    /* agency */
    #agency {padding: 180px 0;}
    .agency_inner h2 {float: right; width: 750px; height: 220px; margin-top: 80px; margin-bottom: 0; font-size: 66px;}
    .agency_inner h2 br {display: none;}
    .agency_inner .agency_img {float: left; width: 560px; height: 340px; padding-bottom:0; border-radius: 20px; margin: 0 40px 10px 0; }
    .agency_inner p {font-size: 44px; line-height: 1.455;}

    /* wedo */
    #wedo {padding: 180px 0;}
    .wedo_inner .title {margin-bottom: 120px;}

    .wedo_list {display: flex; justify-content: space-between; padding-bottom: 0;}
    .wedo_list .wedo_box {width: 340px; height:452px; margin-bottom: 0px; padding: 50px 40px;}
    .wedo_list .wedo_box:nth-child(2n) {margin-top: 120px; top:0;}
    .wedo_list .wedo_box h3 {margin-bottom: 18px; font-size: 30px; line-height: 1.167;}
    .wedo_list .wedo_box p {margin-bottom: 50px; font-size: 20px;}
    .wedo_list .wedo_box span {display: block; width: 100%; height: 110px; margin-bottom: 50px; padding-bottom:0;}
    .wedo_list .wedo_box a {font-size: 20px;}
    .wedo_list .wedo_box a:after {content: ""; display: inline-block; width: 7px; height: 12px;}

    /* portfolio */
    #portfolio {padding:180px 0 160px;}
    .portfolio_inner .title {margin-bottom: 120px;}
    
    .portfolio_list {display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 0;}
    .portfolio_list .portfolio_box {width: 440px; margin-bottom: 0;}
    .portfolio_list .portfolio_box:nth-child(3) ~ div {display: block;}
    .portfolio_list .portfolio_box:nth-child(3n-1) {margin-top: 100px;}
    .portfolio_list .portfolio_box:nth-child(2n) {position: relative; top: 0;}
    .portfolio_list .portfolio_box .port_img {border-radius: 20px; margin-bottom: 40px;}
    .portfolio_list .portfolio_box .port_img > div {width:100%; padding-bottom: 0; height: 440px; transition:all .5s;}
    .portfolio_list .portfolio_box span {height: 36px; line-height: 36px; margin-bottom: 20px; font-size: 15px;}
    .portfolio_list .portfolio_box h3 {margin-bottom: 20px; font-size: 30px; line-height: 1.167;}
    .portfolio_list .portfolio_box p {font-size: 18px; line-height: 1.556;}

    .portfolio_inner a {width: 214px; height: 72px; margin-top: 120px; line-height: 69px; border: 1.5px solid #000; border-radius: 72px; font-size: 24px;}
    .portfolio_inner a:after {width: 16px; height: 16px; margin-left: 10px;}

    /* partners */
    #partners {padding: 98px 0; overflow: hidden; position: relative;}
    .partners_inner {position: static;}
    /* .partners_inner .title {position: absolute; width: 1420px; top:50%; left: 50%; transform: translate(-50%, -50%);} */
    .partners_inner .title {width: 1420px; margin:0 auto;}
    .partners_inner .title h2 {margin-bottom:0;}
    .partners_inner .partners_list {position: absolute; top:98px; right:0; width: calc(100% - ((100% - 1420px) / 2 + 328px));}
    .partners_inner .partners_list > div {display: flex;}
    .partners_inner .partners_list .swiper-wrapper {transition-timing-function: linear;}
    .partners_inner .partners_list span {float: left; width: 340px; height: 84px; line-height: 84px; margin-bottom: 0;}
    .partners_inner .partners_list a {display: inline-block;}
    .partners_inner .partners_list a.pn_01 {width: 265px;}
    .partners_inner .partners_list a.pn_02 {width: 223px;}
    .partners_inner .partners_list a.pn_03 {width: 214px;}
    .partners_inner .partners_list a.pn_04 {width: 271px;}
    .partners_inner .partners_list a img {width: 100%;}

    .partners_inner .title h2,
    .partners_inner .partners_list span {opacity: 1;}
    .partners_inner.on .title h2,
    .partners_inner.on .partners_list span {opacity: 1; animation:none;}

    /* contect */
    #contect {height: 762px; padding-top: 230px;}
    .contect_inner {}
    .contect_inner h2 {margin-bottom: 46px; font-size: 80px; line-height: 1.175;}
    .contect_inner a {width:220px; height: 72px; line-height: 70px; border-radius: 72px; font-size: 24px;}
    .contect_inner a:after {content: ""; display: inline-block; width: 8px; height: 14px; margin-left: 16px; }

    /* footer */
    footer {padding: 70px 0;}
    .footer_inner {width: 1420px;}
    .footer_inner .f_logo {width: 148px; height: 20px; margin-bottom: 30px;}
    .footer_inner p {font-size: 16px; line-height: 1.375; margin-bottom: 11px;}
    .footer_inner p:nth-of-type(1) span:first-child:after,
    .footer_inner p:nth-of-type(2) span:first-child:after {content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 5px 0 8px; background-color: #5e5e5e;}
    .footer_inner p:nth-of-type(2) span:last-child {display: inline-block;}
    .footer_inner p:last-of-type {font-size: 15px;}
}





/* sub */
#sub_visual {height:480px; padding-top:200px; background: url(../img/bg_sub_visual.jpg) no-repeat center/cover; text-align: center; color: #fff; position: relative;}
.sub_video_wrap {position: absolute; left:0; top:0; width:100%; height:100%;}
.sub_video_wrap:after {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.4);}
.sub_video_wrap .sub_video_visual {position: absolute; object-fit: cover; width: 100%; height: 100%; left:0;}
.sub_visual_inner {position: relative;}
.sub_visual_inner h2 {margin-bottom: 16px; font-size: 40px; font-weight: 800;}
.sub_visual_inner p {width: 88.889%; margin: 0 auto; line-height: 1.467; font-size: 15px;}
.sub_visual_inner p br {display: none;}
.sub_visual_inner p br:nth-of-type(1),
.sub_visual_inner p br:nth-of-type(2),
.sub_visual_inner p br:nth-of-type(4) {display: block;}

#sub_contents {padding: 80px 0 100px;}
.sub_contents_inner {width: 88.889%; margin: 0 auto;}
.sub_contents_inner > h2 {margin-bottom: 40px; font-size: 36px; font-weight: 800; line-height: 1.278;}

.contact_form .item {position: relative; margin-bottom: 12px;}
.contact_form .item label {position: absolute; top:18px; left: 5%; font-size: 16px; font-weight: 800; color: #bababa;}
.contact_form .item label.blind {left: -9999px;}
.contact_form .item label:after,
.contact_form .item2 label:after {content: "*"; font-size: 16px; font-weight: 800; color: #fc1843; margin-left: 2px;}
.contact_form .item input,
.contact_form .item select,
.contact_form .item textarea, 
.contact_form .item .upload_name {width: 100%; height: 54px; border-radius: 6px; background-color: #f3f3f3; padding: 0 5%; border: none; font-size: 16px; font-weight: 800; color: #111; line-height: 1.625;}

/*
.contact_form .item select {appearance: none;}
.contact_form .item select + span {position: absolute; width: 20px; height: 10px; top: 50%; right: 5%; transform: translateY(-50%); background: url(../img/btn_select.png) no-repeat center/contain;}
.contact_form .item select + span {transform: translateY(-50%) rotate(180deg);}
.contact_form .item select option {height: 48px; line-height: 48px; background-color: #111; font-size: 15px; font-weight: 800;}
*/
.contact_form .btn_select {width: 100%; height: 54px; border-radius: 6px; background-color: #f3f3f3; padding: 0 5%; border: none; font-size: 16px; font-weight: 800; line-height: 1.625; color: #bababa; text-align: left;}
.contact_form .btn_select.click {color: #111;}
.contact_form .btn_select:after {content: "*"; font-size: 16px; font-weight: 800; color: #fc1843; margin-left: 2px;}
.contact_form .btn_select.click:after {display: none;}
.contact_form .list_select {position: absolute; left: 0; top: 54px; z-index: 10; width: 100%; overflow: hidden; border-radius: 0 0 6px 6px; display: none; box-shadow: 0 2px 4px 0 rgba(0,0,0,.12);}
.contact_form .list_select.on {display: block;}
.contact_form .btn_select:active + .list_select {display: block;}
.contact_form .btn_select + ul + span {position: absolute; width: 20px; height: 10px; top: 50%; right: 5%; transform: translateY(-50%); background: url(../img/btn_select.png) no-repeat center/contain; cursor: pointer;}
.contact_form .btn_select.click + ul + span {transform: translateY(-50%) rotate(180deg);}
.contact_form .list_select li {}
.contact_form .list_select li button {display: block; width: 100%; height: 48px; line-height: 48px; background-color: #f3f3f3; padding: 0 5%; color: #111; text-align: left; font-size: 15px; font-weight: 800;}
.contact_form .list_select li button:hover {background-color: #111; color: #fff;}

.contact_form .item textarea {height: 214px; padding: 18px 5%;}
.contact_form .item input[type="file"] {position: absolute; left: -9999px;}
.contact_form .item .upload_name {line-height: 54px;}
.contact_form .item .btn_upload {position: absolute; top: 11px; right: 5%; width: 69px; height: 33px; line-height: 33px; border-radius: 6px; background-color: #000; color: #fff; font-size: 14px; font-weight: 700;}

.contact_form .item p:last-child {margin: 12px 0 60px; font-size: 14px; font-weight: 500; color: #999;}
.contact_form .item2 {margin-bottom: 24px;}
.contact_form .item2 label {font-size: 15px; font-weight: 600; color: #333; vertical-align: 2px;}
.contact_form .item2 label a {text-decoration: underline; color: #333; margin-left: 8px;}
.contact_form .item2 input {width:14px; height:14px;}
.contact_form .item2 input:after {content: ""; display: block; width: 14px; height: 14px; background: url(../img/ico_checkbox_off.png) no-repeat #fff center/contain;}
.contact_form .item2 input:checked:after {background-image: url(../img/ico_checkbox_on.png);}
.contact_form .item2 input{}
.contact_form .btn_send {width: 100%; height: 60px; line-height: 60px; border-radius: 6px; background-color: #000;text-align: center; font-size: 20px; font-weight: 800; color: #fff;}

.dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; background-color: #000; opacity: .5; display: none;}
.popup {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88.889%; padding: 60px 9.375% 40px; background-color: #fff; z-index: 110;}
.agree_popup {display: none;}
.popup .btn_popup_close {position: absolute; top: 23px; right: 7.5%; width: 20px; height: 20px; background: url(../img/btn_popup_close.png) no-repeat center/contain;}
.popup div {margin-bottom: 40px;}
.popup div:last-of-type {margin-bottom: 24px;}
.popup div h3 {margin-bottom: 16px; font-size: 18px; font-weight: 800;}
.popup div p {font-size: 14px; font-weight: 500; color: #333; line-height: 1.714;}
.popup .btn_ok {display: block; width: 125px; height: 41px; line-height: 41px; border-radius: 5px; margin: 0 auto; background-color: #000; font-size: 14px; font-weight: 600; color: #fff;}

.finish_popup {display: none; text-align: center;}
.finish_popup div {}
.finish_popup div h3 {font-size: 24px;}
.finish_popup div p {}

/* sub - 768 */
@media all and (min-width: 768px) {
    #sub_visual {height:550px; padding-top:220px;}
    .sub_visual_inner h2 {margin-bottom: 24px; font-size: 55px;}
    .sub_visual_inner p {font-size: 18px;}

    #sub_contents {padding: 120px 0 140px;}
    .sub_contents_inner > h2 {margin-bottom: 80px; font-size: 50px;}

    .contact_form .item {margin-bottom: 16px;}
    .contact_form .item label {top:24px; left:4%; font-size: 24px;}
    .contact_form .item label:after,
    .contact_form .item2 label:after {font-size: 20px;}
    .contact_form .item input,
    .contact_form .item select,
    .contact_form .item textarea, 
    .contact_form .item .upload_name {height: 70px; font-size: 20px; padding: 0 4%; font-size: 20px;}
    
    .contact_form .btn_select {height: 70px; padding: 0 4%; font-size: 24px;}
    .contact_form .btn_select.click {font-size:20px;}
    .contact_form .btn_select:after {font-size: 20px;}
    .contact_form .list_select {top: 70px;}
    .contact_form .list_select li button {height: 60px; line-height: 48px; padding: 0 4%; font-size: 18px;}

    .contact_form .item textarea {height: 400px; padding: 24px 4%;}
    .contact_form .item .upload_name {line-height: 70px;}
    .contact_form .item .btn_upload {right: 4%; width: 100px; height: 48px; line-height: 48px; font-size: 18px;}

    .contact_form .item p:last-child {margin: 16px 0 60px; font-size: 16px;}
    .contact_form .item2 {margin-bottom: 28px;}
    .contact_form .item2 label {font-size: 18px;}
    .contact_form .item2 input {width:18px; height:18px;}
    .contact_form .item2 input:after {width: 18px; height: 18px;}
    .contact_form .btn_send {height: 80px; line-height: 70px; font-size: 24px;}

    .popup {padding: 60px 9.375% 50px;}
    .popup .btn_popup_close {top: 40px; right: 7.5%; width: 24px; height: 24px;}
    .popup div:last-of-type {margin-bottom: 40px;}
    .popup div h3 {margin-bottom: 24px; font-size: 24px;}
    .popup div p {font-size: 16px;}
    .popup .btn_ok {width: 140px; height: 44px; line-height: 44px; font-size: 16px;}

    .finish_popup div h3 {font-size: 28px;}
}

/* sub - pc */
@media all and (min-width: 1520px) {
    #sub_visual {height: 780px; padding-top: 320px;}
    .sub_visual_inner h2 {margin-bottom: 32px; font-size: 72px;}
    .sub_visual_inner p {width: 900px; margin: 0 auto; line-height: 1.545; font-size: 22px;}
    .sub_visual_inner p br:nth-of-type(2),
    .sub_visual_inner p br:nth-of-type(4) {display: none;}
    .sub_visual_inner p br:nth-of-type(3) {display: block;}

    #sub_contents {padding: 160px 0 250px;}
    .sub_contents_inner {width: 1280px;}
    .sub_contents_inner > h2 {margin-bottom: 100px; font-size: 64px; line-height: 1.188;}

    .contact_form .item {margin-bottom: 24px; width: 630px; margin-right: 20px; float: left;}
    .contact_form .item:nth-of-type(3),
    .contact_form .item:nth-of-type(5),
    .contact_form .item:nth-of-type(8) {margin-right: 0;}
    .contact_form .item:nth-of-type(1),
    .contact_form .item:nth-of-type(6),
    .contact_form .item:nth-of-type(9) {width :100%;}
    .contact_form .item label {top:32px; left: 40px; font-size: 24px;}
    .contact_form .item label:after,
    .contact_form .item2 label:after {font-size: 24px;}
    .contact_form .item input,
    .contact_form .item select,
    .contact_form .item textarea, 
    .contact_form .item .upload_name {height: 92px; padding: 0 40px; font-size: 24px; line-height: 1.667;}

    .contact_form .btn_select {height: 92px; padding: 0 40px; font-size: 24px;}
    .contact_form .btn_select.click {font-size:24px;}
    .contact_form .btn_select:after {font-size: 24px;}
    .contact_form .list_select {top: 92px;}
    .contact_form .btn_select + ul + span {right: 40px;}
    .contact_form .list_select li button {height: 80px; line-height: 80px; padding: 0 40px; font-size: 20px;}

    .contact_form .item textarea {height: 400px; padding: 32px 40px;}
    .contact_form .item .upload_name {line-height: 92px;}
    .contact_form .item .btn_upload {top:21px; right: 40px; width: 101px; height: 50px; line-height: 50px; font-size: 20px;}

    .contact_form .item p:last-child {margin: 16px 0 84px; font-size: 20px;}
    .contact_form .item2 {margin-bottom: 34px; clear:both;}
    .contact_form .item2 label {font-size: 22px;}
    .contact_form .item2 label a {margin-left: 10px;}
    .contact_form .item2 input {width:24px; height:24px;}
    .contact_form .item2 input:after {width: 24px; height: 24px;}
    .contact_form .btn_send {height: 92px; line-height: 92px; font-size: 28px;}

    .popup {width:1280px; padding: 100px 80px 70px;}
    .popup .btn_popup_close {top: 60px; right: 60px; width: 30px; height: 30px;}
    .popup div {margin-bottom: 42px;}
    .popup div:last-of-type {margin-bottom: 60px;}
    .popup div h3 {margin-bottom: 30px; font-size: 30px;}
    .popup div p {font-size: 18px; list-style: 1.667;}
    .popup .btn_ok {width: 167px; height: 55px; line-height: 55px; font-size: 18px;}

    .finish_popup div h3 {font-size: 28px;}

    .finish_popup {width: 820px; padding: 120px 0 80px;}
    .finish_popup div:last-of-type {margin-bottom: 50px;}
    .finish_popup div h3 {font-size: 38px;}
    .finish_popup div p {font-size: 20px; line-height: 1.7;}
}

/* 이미지 최적화 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 이미지 로딩 중 스켈레톤 UI */
.logo img, .f_logo img {
    background: #f0f0f0;
    transition: opacity 0.3s ease;
}

.logo img[loading], .f_logo img[loading] {
    opacity: 0;
}

/* 비디오 최적화 */
.sub_video_visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: url('../img/video-poster.jpg') no-repeat center/cover;
}

/* 반응형 이미지 */
@media (max-width: 768px) {
    .logo img {
        width: 120px;
        height: 32px;
    }
    
    .f_logo img {
        width: 100px;
        height: 27px;
    }
}

/* 이미지 최적화를 위한 컨테이너 설정 */
.logo, .f_logo {
    display: block;
    position: relative;
    overflow: hidden;
}

/* 파일 업로드 버튼 최적화 */
.btn_upload {
    background-image: url('../img/icon-search.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}