/* BASIC css start */
.sl_title{padding-top: 30px;}

/* reset css */
body #contentWrapper{padding: 0;}
#contentWrap{width: 100%;}

.styleLogWrap{background-color: #dcd8cd;}

    .normal_prod_box.clear_wrap {
        max-width: 1330px;
        width: 100%;
        margin: 0 auto;
    }

    .normal_prod_wrap h2 {
        max-width: 1330px;
        width: 100%;
        margin: 75px auto 30px;
        font-size: 18px;
        font-weight: 300;
        padding: 15px 12px;
        line-height: 1em;
        border-top: 1px solid #737373;
        border-bottom: 1px solid #737373;
        text-transform: uppercase;
        text-align: left;
    }

    .prod_info_wrap .dc_info,
    .prod_info_wrap .dc_perc {
        color: #512772;
        font-weight: bold;
        display: inline-block;
        margin-left: 5px;
        font-size: 15px;
        position: relative;
    }

    .normal_item .prod_price {
        display: flex;
    }

    body .normal_prod_wrap .disc_in {
        width: auto;
    }

    .normal_item .prod_thumb .prod_icon {
        position: static;
    }


/* fin. reset css */


        .styleLogWrap img{
            display: block;
            width: 100%;
        }
        .styleLogWrap a{
            display: block;
        }

        .styleLogWrap > div,
        .styleLogWrap > div .linkBox{
            position: relative;
        }

        .styleLogWrap a[class*="link"]{
            position: absolute;
        }

        .styleLogWrap .sec002 .linkBox a.listBtn01,
        .styleLogWrap .sec003 .linkBox a.listBtn01{
            display: block;
            position: absolute;
            width: 10.4166%;
            height: 5%;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }

        .styleLogWrap .sec002 div.listBtn01,
        .styleLogWrap .sec003 div.listBtn01{
            overflow: hidden;
            height: 0;
            transition-duration: .4s;
        }

        .styleLogWrap .coupon01{
            width: 24.375%;
            top: 31.93504%;
            left: 25%;
        }

        .styleLogWrap .coupon02{
            width: 24.375%;
            top: 31.93504%;
            right: 25%;
        }

        /* 상품 플러스 버튼 공통 */
        .styleLogWrap [class^='product']{
            position: absolute;
            width: 16.71875%;
        }

        .styleLogWrap [class^='product'].lCenterBox,
        .styleLogWrap [class^='product'].lBottomBox,
        .styleLogWrap [class^='product'].rCenterBox,
        .styleLogWrap [class^='product'].rBottomBox{
            width: 19.42708%;
        }

        .styleLogWrap [class^='product'] > img{
            cursor: pointer;
            position: absolute;
            width: 11.838%;
        }

        .styleLogWrap [class^='product'].lCenterBox > img,
        .styleLogWrap [class^='product'].lBottomBox > img,
        .styleLogWrap [class^='product'].rCenterBox > img,
        .styleLogWrap [class^='product'].rBottomBox > img{
            width: 10.18766%;
        }

        .styleLogWrap [class^='product'] > a{
            width: auto;
            width: 100%;
            opacity: 0;
            pointer-events: none;
            transition-duration: .4s;
            transform: translateY(-10px);
        }

        .styleLogWrap [class^='product'] > a.act{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* 아이템 나오기 */

        
        .styleLogWrap [class^='product'].bLeftBox > a,
        .styleLogWrap [class^='product'].bRightBox > a{
            transform: translateY(-10px);
        }

        .styleLogWrap [class^='product'].tLeftBox > a,
        .styleLogWrap [class^='product'].tRightBox > a{
            top: 0;
            transform: translateY(10px);
        }

        .styleLogWrap [class^='product'].lCenterBox > a,
        .styleLogWrap [class^='product'].rCenterBox > a{
            width: auto;
            height: 100%;
            top: 50%;
            width: 85.79088%;
        }

        .styleLogWrap [class^='product'].lTopBox > a,
        .styleLogWrap [class^='product'].lBottomBox > a{
            width: auto;
            height: 100%;
            top: 0;
            width: 85.79088%;
        }

        .styleLogWrap [class^='product'].rTopBox > a,
        .styleLogWrap [class^='product'].rBottomBox > a{
            width: auto;
            height: 100%;
            top: 0%;
            right: 0%;
            width: 85.79088%;
            margin-left: auto;
        }

        .styleLogWrap [class^='product'].lCenterBox > a{
            transform: translate(10px, -50%);
        }

        .styleLogWrap [class^='product'].rCenterBox > a{
            position: absolute;
            right: 0;
            margin-left: auto;
            transform: translate(-10px, -50%);
        }

        .styleLogWrap [class^='product'].tLeftBox > a.act,
        .styleLogWrap [class^='product'].tRightBox > a.act{
            transform: translateY(0);
            height: 63.5135%;
        }

        .styleLogWrap [class^='product'].bLeftBox > a.act,
        .styleLogWrap [class^='product'].bRightBox > a.act{
            transform: translateY(0);
        }

        .styleLogWrap [class^='product'].lCenterBox > a.act,
        .styleLogWrap [class^='product'].rCenterBox > a.act{
            transform: translate(0, -50%);
        }

        .styleLogWrap [class^='product'].bLeftBox > img{
            top: 0;
            right: 0.62305%;
        }

        .styleLogWrap [class^='product'].bRightBox > img{
            top: 0;
            left: 0.62305%;
        }

        .styleLogWrap [class^='product'].bCenterBox > img{
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .styleLogWrap [class^='product'].tLeftBox > img{
            bottom: 0;
            left: 0.62305%;
        }
        
        .styleLogWrap [class^='product'].tRightBox > img{
            bottom: 0;
            right: 0.62305%;
        }

        .styleLogWrap [class^='product'].lCenterBox > img{
            top: 50%;
            transform: translateY(-50%);
            right: 0%;
        }

        .styleLogWrap [class^='product'].rCenterBox > img{
            top: 50%;
            transform: translateY(-50%);
            left: 0%;
        }

        .styleLogWrap [class^='product'].lBottomBox > img{
            top: 0%;
            right: 0%;
        }
        .styleLogWrap [class^='product'].rBottomBox > img{
            top: 0%;
            left: 0%;
        }

        .styleLogWrap [class^='product'].lTopBox > img{
            bottom: 0%;
            right: 0%;
        }
        .styleLogWrap [class^='product'].rTopBox > img{
            bottom: 0%;
            left: 0%;
        }

        .styleLogWrap [class^='product'].lCenterBox > img{
            right: 0%;
        }

        .styleLogWrap [class^='product'].rCenterBox > img{
            left: 0%;
        }

        /* 상품 플러스 버튼 공통 끝 */

        /* 상품 플러스 버튼 영역 */
        .styleLogWrap .sec004 .product01{
            top: 19.00497%;
            right: 6.66666%;
        }

        .styleLogWrap .sec004 .product02{
            top: 39.60199%;
            right: 39.6875%;
        }

        .styleLogWrap .sec004 .product03{
            top: 63.18407%;
            left: 21.0416%;
        }

        .styleLogWrap .sec006_1 .product01{
            top: 25.87064%;
            left: 28.5937%;
        }

        .styleLogWrap .sec006 .product01{
            top: 36.9154%;
            left: 27.65625%;
        }

        .styleLogWrap .sec007 .product01{
            top: 61.19402%;
            right: 2.8645833%;
        }

        .styleLogWrap .sec008 .product01{
            top: 50.04336%;
            left: 20%;
        }

        .styleLogWrap .sec008 .product02{
            top: 59.7571%;
            left: 46.09375%;
        }

        .styleLogWrap .sec008 .product03{
            top: 74.06764%;
            left: 15.3125%;
        }

        .styleLogWrap .sec008 .product04{
            top: 79.53165%;
            left: 50.9375%;
        }

        .styleLogWrap .sec009 .product01{
            top: 24.9751%;
            right: 56.45833%;
        }

        .styleLogWrap .sec010_1 .product01{
            top: 74.1293%;
            left: 71.25%;
        }

        .styleLogWrap .sec010_2 .product01{
            top: 46.4676%;
            right: 45.41666%;
        }

        .styleLogWrap .sec010_2 .product02{
            top: 72.3383%;
            right: 42.34375%;
        }

        .styleLogWrap .sec010 .product01{
            top: 11.79531%;
            right: 12.55208%;
        }

        .styleLogWrap .sec010 .product02{
            top: 33.90633%;
            right: 47.8645%;
        }

        .styleLogWrap .sec010 .product03{
            top: 46.1405%;
            left: 5.46875%;
        }

        .styleLogWrap .sec010 .product04{
            top: 72.74626%;
            left: 29.53125%;
        }

        .styleLogWrap .sec011 .product01{
            top: 31.7412%;
            right: 28.64583%;
        }

        .styleLogWrap .sec013 .product01{
            top: 48.0597%;
            left: 34.16666%;
        }

        /* 상품 플러스 버튼 영역 끝 */

        /* 스크롤 이벤트 영역 */
        .styleLogWrap [data-act="act"]{
            transform: translateY(30px);
            opacity: 0;
        }

        .styleLogWrap [data-act="act"].act{
            opacity: 1;
        }

        .styleLogWrap [data-scroll^="scroll"]{
            transition-duration: .6s;
            transform: translateY(30px);
            opacity: 0;
        }

        .styleLogWrap [data-scroll^="scroll"].scroll{
            transform: translateY(0);
            opacity: 1;
        }

        .styleLogWrap [data-scroll="scroll03"]{
            transform: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
        }

        .styleLogWrap [data-scroll="scroll03"].color{
            opacity: 1;
        }
        /* 스크롤 이벤트 영역 끝 */

        /* 효과 영역 시작 */
        .styleLogWrap .sec001::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        .styleLogWrap .sec005 > img:nth-child(2),
        .styleLogWrap .sec006 > img:nth-child(2),
        .styleLogWrap .sec006_1 > img:nth-child(2),
        .styleLogWrap .sec005_1 > img:nth-child(2),
        .styleLogWrap .sec009 > img:nth-child(2),
        .styleLogWrap .sec011 > img:nth-child(2),
        .styleLogWrap .sec005_2 > img:nth-child(2){
            animation: opacity01 6s infinite;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .styleLogWrap .sec005 > img:nth-child(3){
            position: absolute;
            top: 41.99%;
            left: 21.6145%;
            width: 56.8229%;
        }
        .styleLogWrap .sec005_1 > img:nth-child(3){
            position: absolute;
            top: 44.9262%;
            left: 22.08333%;
            width: 56.8229%;
        }
        .styleLogWrap .sec005_2 > img:nth-child(3){
            position: absolute;
            top: 45.3731%;
            left: 24.47916%;
            width: 56.8229%;
        }

        .styleLogWrap .sec008 > img:nth-child(2){
            position: absolute;
            top: 43.10494%;
            left: 30.9375%;
            width: 23.2291%;
        }

        .styleLogWrap .sec010_1 > img:nth-child(2){
            position: absolute;
            top: 41.2935%;
            left: 27.03125%;
            width: 53.958333%;
        }

        .styleLogWrap .sec012 > img:nth-child(2){
            position: absolute;
            top: 39.08457%;
            right: 12.29166%;
            width: 21.5625%;
        }

        .styleLogWrap .sec013 > img:nth-child(2){
            animation: opacity01 8s infinite;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        @keyframes opacity01{
            0%{opacity: 0;}
            20%{opacity: 1;}
            50%{opacity: 1;}
            70%{opacity: 0;}
            100%{opacity: 0;}
        }

        .styleLogWrap .sec014 > img:nth-child(2){
            position: absolute;
            top: 6.76616%;
            left: 31.9791%;
            width: 15.5729%;
        }

        .styleLogWrap .sec014 > img:nth-child(3){
            position: absolute;
            top: 16.6169%;
            left: 3.802%;
            width: 21.5625%;
        }

        .styleLogWrap .sec014 > img:nth-child(4){
            position: absolute;
            top: 45.47263%;
            left: 24.322916%;
            width: 17.916666%;
        }

        /* 효과 영역 끝 */
/* BASIC css end */

