:root {
         /*    font size    */
         --font-tit: 64px;
         --font-mtit: 28px;

         /*    font famaily    */
         --font-mont: 'Montserrat';

         /*    color    */
         --color-main: #FEC00D;
         /*    cmm style    */
         --cmm-pd80: 0 80px;
     }

     .mclr {
         color: var(--color-main);
     }



     .sub_sec {
         padding: 200px 0;
     }

     .sub_sec .inner {
         max-width: 1440px;
         margin: 0 auto;
     }

     .sub_sec .sub_sec_tit h2 {
         font-size: 80px;
         line-height: 1;
         font-weight: 700;
         position: relative;
         display: inline-block;
         padding-right: 30px;
         color: #fff;
     }

     .sub_sec .sub_sec_tit h2 span {
         position: absolute;
         top: 0;
         right: -10px;
         font-weight: 400;
         font-size: 28px;
         color: var(--color-main);
     }

     .sub_sec .sub_sec_tit {
         margin-bottom: 40px;
     }

     .sub_sec .sub_sec_tit h2 {
         font-size: 80px;
         line-height: 1;
         font-weight: 700;
         position: relative;
         display: inline-block;
         padding-right: 30px;
         color: #fff;
     }

     .sub_sec .sub_sec_tit p {
         margin-top: 16px;
         font-weight: 500;
         font-size: 24px;
         line-height: 1.4;
         color: #fff;
     }

     @media (max-width:1280px) {
         .sub_sec .inner {
             padding: 0 40px;
         }

         .sub_sec .sub_sec_tit p {
             font-size: 20px;
         }
     }

     @media (max-width:1024px) {
         .sub_sec .sub_sec_tit h2 {
             font-size: 56px;
         }
     }

     @media (max-width:768px) {
         .sub_sec .inner {
             padding: 0 16px;
         }

         .sub_sec .sub_sec_tit h2 {
             font-size: 48px;
         }

         .sub_sec .sub_sec_tit p {
             font-size: 20px;
             word-break: keep-all;
             max-width: 360px;
         }

         .sub_sec .sub_sec_tit p br {
             display: none;
         }
     }


     .section4 {
         padding: 250px 0 0;
     }

     .section4 .cmtit {
         text-align: center;
     }

     .section4 .video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: block;
         z-index: 1;
     }

     .section4 .video-background {
         background: #000;
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         z-index: -99;
     }

     .section4 .video-foreground,
     .section4 .video-background iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
     }

     @media (min-aspect-ratio: 16/9) {
         .section4 .video-foreground {
             height: 300%;
             top: -100%;
         }
     }

     @media (max-aspect-ratio: 16/9) {
         .section4 .video-foreground {
             width: 300%;
             left: -100%;
         }
     }

     .section4 .port_wrap .load_wrap {
         margin-top: 60px;
         display: flex;
         text-align: center;
         justify-content: center;
     }

     .section4 .port_wrap .load_wrap .btn_more {
         text-align: center;
         background: inherit;
         border: none;
         box-shadow: none;
         border-radius: 0;
         padding: 0;
         overflow: visible;
         cursor: pointer;
         text-transform: uppercase;
         transform: translateY(2px);
         transition: all .4s;
     }

     .section4 .port_wrap .load_wrap .btn_more:hover {
         transform: translateY(0);
     }

     .section4 .port_wrap .load_wrap .btn_more .arr {
         display: inline-block;
     }

     .section4 .port_wrap .load_wrap .btn_more .arr i {
         font-size: 22px;
         color: #fff;
         opacity: .7;
     }

     .section4 .port_wrap .load_wrap .btn_more p {
         margin: 8px auto 12px;
         font-weight: 600;
         color: #fff;
     }

     .section4 .port_wrap .load_wrap .btn_more .num {
         display: inline-block;
         color: #fff;
         font-weight: 600;
     }

     .section4 .port_wrap .load_wrap .btn_more:hover .arr i,
     .section4 .port_wrap .load_wrap .btn_more:hover p {
         color: var(--color-main);
     }

     .section4 .port_wrap .list {
         max-width: 1440px;
         margin: 0 auto;
     }

     .section4 .port_wrap .list ul {
         display: flex;
         flex-wrap: wrap;
     }

     .section4 .port_wrap .list ul li {
         width: 50%;
     }

     .section4 .port_wrap .list ul li a {
         display: block;
         width: 100%;
         height: 405px;
         position: relative;
         overflow: hidden;
         cursor: default;
     }

     .section4 .port_wrap .list ul li a .bg {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: url(<?php echo G5_THEME_URL ?>/images/main/port01.png) center center no-repeat;
         background-size: cover !important;
         z-index: 1;
     }

     .section4 .port_wrap .list ul li a .dim {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.5);
         background-size: cover !important;
         z-index: 2;
         opacity: 0;
         visibility: hidden;
         transition: all .3s;
     }

     .section4 .port_wrap .list ul li a:hover .dim {
         opacity: 1;
         visibility: visible;
     }

     .section4 .port_wrap .list ul li a .con {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         width: 100%;
         height: 100%;
         padding: 36px;
         position: relative;
         z-index: 3;
     }

     .section4 .port_wrap .list ul li a .con h2 {
         font-size: 32px;
         line-height: 1;
         margin-bottom: 16px;
         font-family: var(--font-mont);
         font-weight: 700;
         color: #fff;
         opacity: 0;
         visibility: hidden;
         transition: all .2s ease .2s;
         transform: translateY(4px);
     }

     .section4 .port_wrap .list ul li a .con p {
         font-size: 15px;
         line-height: 1.2;
         color: #fff;
         font-family: var(--font-mont);

         opacity: 0;
         visibility: hidden;
         transition: all .2s ease .3s;
         transform: translateY(4px);
     }

     .section4 .port_wrap .list ul li a:hover .con h2 {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .section4 .port_wrap .list ul li a:hover .con p {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     .section4 .port_wrap .list ul li a .con span {
         font-size: 14px;
         color: #fff;
         font-weight: 600;
     }

     @media (max-width:1460px) {
         .section4 .inner {
             padding: 0 80px;
         }
     }

     @media (max-width:1200px) {
         .section4 .inner {
             padding: 0 40px;
         }
     }

     @media (max-width:1024px) {

         .section4 .section4 .inner {
             padding: 0 16px;
         }
     }

     @media (max-width:768px) {
         .section4 .port_wrap .list ul li a {
             height: 260px;
         }
     }

     @media (max-width:550px) {
         .section4 .port_wrap .list ul li {
             width: 100%;
         }
     }

     @media (max-width:350px) {
         .section4 .port_wrap .list ul li a {
             height: 220px;
         }
     }

     /*  뷰센  */
     .bg1 {
         background: url(../images/main/work1.jpg) center center no-repeat !important;
     }

     /*  캐논  */
     .bg2 {
         background: url(../images/main/work2.jpg) center center no-repeat !important;
     }

     /*  듀라셀  */
     /*
    .bg3 {
        background: url(<?php echo G5_THEME_URL ?>/images/main/work3.jpg) center center no-repeat !important;
    }
*/

     /*  던롭  */
     .bg4 {
         background: url(../images/main/work4.jpg) center center no-repeat !important;
     }

     /*  골프존  */
     .bg5 {
         background: url(../images/main/work5.jpg) center center no-repeat !important;
     }

     /*  피타스  */
     .bg6 {
         background: url(../images/main/work6.jpg) center center no-repeat !important;
     }

     /*  젝시오  */
     .bg7 {
         background: url(../images/main/work7.jpg) center center no-repeat !important;
     }

     /*  예스골프  */

     .bg8 {
         background: url(../images/main/work8.jpg) center center no-repeat !important;
     }


     /*  엄브로  */
     .bg9 {
         background: url(../images/main/work9.jpg) center center no-repeat !important;
     }

     /*  클리브랜드  */

     .bg10 {
         background: url(../images/main/work10.jpg) center center no-repeat !important;
     }


     /*  지헤지호그  */
     .bg11 {
         background: url(../images/main/work11.jpg) center center no-repeat !important;
     }

     /*  미러미디어  */

     .bg12 {
         background: url(../images/main/work12.jpg) center center no-repeat !important;
     }

     .bg13 {
         background: url(../images/main/work13.png) center center no-repeat !important;
     }

     .bg14 {
         background: url(../images/main/work14.png) center center no-repeat !important;
     }

     .bg15 {
         background: url(../images/main/work15.png) center center no-repeat !important;
     }

     .bg16 {
         background: url(../images/main/work16.jpg) center center no-repeat !important;
     }

     .bg17 {
         background: url(../images/main/work17.jpg) center center no-repeat !important;
     }

     .bg18 {
         background: url(../images/main/work18.png) center center no-repeat !important;
     }

     .bg20 {
         background: url(../images/main/bg20.png) center center no-repeat !important;
     }

     .bg21 {
         background: url(../images/main/bg21.png) center center no-repeat !important;
     }

     .bg22 {
         background: url(../images/main/bg22.png) center center no-repeat !important;
     }

     .bg23 {
         background: url(../images/main/bg23.png) center center no-repeat !important;
     }

     .bg24 {
         background: url(../images/main/bg24.png) center center no-repeat !important;
     }