/* HOME */
#brandHome {
    clear: both;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
	&.pcMain .ibuilderModules {
        .V_harf .verticalWrap .section { 
            padding-right: 0; margin-left: 0; 
            &.title:not(:first-of-type) { margin-top: 5px; }
        }
    }
    .homeBody {
        float: left;
        overflow: hidden;
        width: 704px;
		padding-right:10px;
		box-sizing:border-box;
    }
	&.consoleMain {
		.homeBody {
			width: 100%;
		}
	}
    .productWrap {
        float: left;
        overflow: hidden;
        width: 211px;
		.titleWrap {
			display: flex;
			width: 100%;
			justify-content: space-between;
            margin-bottom: 3px;

			h3.title {
				display: flex;
				align-items: center;
				justify-content: center;
				a { 
					font-family: esamanru;
					font-size: 17px;
					font-style: normal;
					font-weight: 500;
					line-height: 24px; /* 141.176% */
					letter-spacing: -0.102px;
					color: #242424;
					&:hover { text-decoration: none;}
				}
				&.img a { text-indent: 0; }
			}
		}
		.btnWrap {
			display: flex;
            border: 1px solid #E6E6E6;
            border-radius: 6px;
			.prevBtn {
				background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5.04443%206.00195L8.56348%209.51709L7.50391%2010.5786L2.92236%206.00293L7.50342%201.42188L8.56396%202.48242L5.04443%206.00195Z%22%20fill%3D%22%23575757%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
				border-right:1px solid #E6E6E6;
			}
			.nextBtn {
				background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7.14551%206.00171L3.62646%209.51685L4.68604%2010.5784L9.26758%206.00269L4.68652%201.42163L3.62598%202.48218L7.14551%206.00171Z%22%20fill%3D%22%23575757%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
			}
			a {
				width: 24px;
				height: 24px;
				justify-content: center;
				align-items: center;
				display: flex;
			}
		}

		.animateWrap {
            overflow: hidden;
            height: 744px;
            background-color: #F8F8F8;
            border-radius: 6px;
        }
        ul {
            float: none; overflow: hidden; display: flex; flex-direction: column; gap:26px;padding:20px 0;
            li {
                float: none; 
				display: list-item; 
				text-align: center;
				
                a { 
					float: none; 
					display: flex;
					flex-direction: column; 
					font-family: Pretendard;
					font-size: 14px;
					font-style: normal;
					font-weight: 600;
					line-height: 20px; /* 142.857% */
					letter-spacing: -0.6px;
					&:hover {
						text-decoration: none;
					}
				}
                img { float: none; display: block; width: 116px; height: 84px; margin: 0 auto; }
                .title {  
					overflow: hidden;
					color: #242424;
					text-align: center;
					text-overflow: ellipsis;

					font-size: 14px;
					font-weight: 400;
					line-height: 20px; /* 142.857% */
					letter-spacing: -0.6px;
				}
                .avg, .min { float: none; display: inline; font-size: 12px; line-height: 16px; strong { font-weight: bold; font-size:14px; line-height: 20px; letter-spacing: -0.6px; } }
                .avg { color: #010101; }
                .min { 
					overflow: hidden;
					color: #E53434;
					text-align: center;
					text-overflow: ellipsis;
					margin-top:2px;
				}
            }
        }
		
    }
    
 



    .colGroup1 {
        float: none; margin-bottom: 25px;
        div.colCont { float: none; display: block; }
    }
    .colGroup2 {
        overflow: hidden; margin-bottom: 25px;
        div.colCont {
            float: left; width: 50%;
            .colContWrap { margin-right: 15px; }
        }
    }

    /* CONTENT TYPE 1 */
    .contType1 {
        padding: 0;
        dl { position: relative; float: none; display: block; overflow: hidden; margin-top: 4px; }
        dt {
            display: inline-block; width: 223px; height: 30px; padding: 2px 0 0 4px; line-height: 15px;
            a { color: #333333; font-size: 12px; font-weight: bold; }
        }
        dd {
            &.desc, &.join, &.winner, &.min { position: absolute; left: 115px; bottom: 5px; }
            &.desc a { color: #676767; font-size: 11px; }
            &.join a {
                display: block; width: 61px; height: 23px; text-indent: -10000em;
                background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=10') no-repeat -3px -35px;
                &:hover { background-position: -66px -35px; }
            }
            &.winner a {
                display: block; width: 74px; height: 23px; text-indent: -10000em;
                background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=10') no-repeat -3px -64px;
                &:hover { background-position: -82px -64px; }
            }
            &.content { display: block; height: 39px; overflow: hidden; padding: 0 4px; font-size: 11px; }
            &.min {
                font-size: 12px; color: #676767;
                strong { font-weight: bold; color: #e50f0f; letter-spacing: normal; }
            }
        }
        .image {
            float: left;
            a { 
                float: left;
                img { float: left; width: 104px; height: 76px; border: 1px solid #cbcbcb; }
            }
        }
    }


    /* CONTENT TYPE 2 */
    .contType2 .listWrap ul {
        float: none; display: block; padding: 10px 0 10px 10px; list-style: none;
        li {
            float: none; display: list-item; padding: 3px 0 3px 10px;
            background: url('//static.inven.co.kr/image_2011/closers/common/dot_2x2_black1.png') no-repeat left center;
            span.cate { color: #ec0000; font-weight: bold; }
            span.cmt { color: #0078ff; font-size: 11px; line-height: 14px; }
        }
    }

    /* CONTENT TYPE 3 */
    .contType3 .listWrap {
        text-align: center;
        
        .prevBtn, .nextBtn {
            display: inline-block; width: 19px; height: 10px; margin: 15px 0; text-indent: -10000em; cursor: default;
            &.enable { cursor: pointer; }
        }
        .prevBtn {
            background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=2') no-repeat -3px -3px;
            &.enable { background-position: -3px -20px; }
        }
        .nextBtn {
            background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=2') no-repeat -29px -3px;
            &.enable { background-position: -29px -20px; }
        }
        &.type_thtd {
            .animateWrap { min-height: 676px; height: auto; margin: 0; }
            ul li a { text-align: left; }
            img { width: 82px; height: auto; float: left; }
            .title { height: 28px; margin-bottom: 10px; text-align: left; overflow: hidden; white-space: normal; word-wrap: break-word; line-height: 1.2; }
            .desc { display: block; height: 48px; font-size: 11px; line-height: 11px; }
        }
    }

    /* CONTENT TYPE 4 */
    .contType4 {
        .listWrap {
            text-align: center;
            ul {
                float: none; overflow: hidden; display: block; padding: 0 5px; margin-right: 15px; background-color: #f5f5f7;
                li {
                    float: left; width: 161px; margin: 10px 4px; text-align: center;
                    img { float: none; display: inline-block; padding-bottom: 8px; }
                    .title { float: none; display: inline; font-size: 12px; color: #010101; }
                }
            }
        }
        /* ROLLING */
        &.rolling .listWrap {
            position: relative; margin-right: 15px; background-color: #f5f5f7;
            ul {
                width: 972px; padding: 0; margin: 0;
                li { width: 154px; }
            }
            .prevBtn, .nextBtn {
                position: absolute; top: 50%; display: inline-block; width: 10px; height: 20px; margin-top: -15px; text-indent: -10000em; cursor: default;
                &.enable { cursor: pointer; }
            }
            .prevBtn {
                left: 10px; background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=6') no-repeat -66px -3px;
                &.enable { background-position: -83px -3px; }
            }
            .nextBtn {
                right: 10px; background: url('//static.inven.co.kr/image_2011/common/brand/gui.png?v=6') no-repeat -104px -3px;
                &.enable { background-position: -121px -3px; }
            }
            .rollingWrap { overflow: hidden; width: 649px; height: 153px; margin: 0 20px; }
        }
    }

    /* IMART */
    .imartWrap {
        h3.title { margin-bottom: 5px; }
        .contentWrap { border: 1px solid #d6d6d6; overflow: hidden; }
        .imageLink {
            float: none; display: block; overflow: hidden;
            img { float: left; }
        }
        .topimage img { width: 211px; }
        .imartguide { margin-top: 10px; }
        .articleBody {
            overflow: hidden; padding: 6px; border-top: 1px solid #d6d6d6;
            span {
                &.comment { float: none; display: block; padding-top: 5px; font-size: 11px; color: #8c8c8c; white-space: nowrap; }
                &.subject {
                    float: none; overflow: hidden; display: block; padding: 3px 0 10px 0; border-bottom: 1px solid #d6d6d6; white-space: nowrap;
                    a { font-size: 14px; font-weight: bold; color: #333333; }
                }
            }
        }
    }

    #modRightSpcats .cosplay-w211 {
        .title { width: 199px; }
        .articleBody {
            width: 209px;
            img.topimage { width: 209px; height: 206px; }
            .frontimage img { width: 199px; }
            .banner { display: none; }
        }
    }
}

#brandRight .imartWrap {
    margin-left: 15px; margin-top: 10px;
    .title {
        float: none; display: block; height: 28px;
        a { display: block; height: 28px; text-indent: -99999px; background: url('//static.inven.co.kr/image_2011/mobilegame/common/wrap_202_blue1_head_imart.png'); }
    }
    .contentWrap { border: 1px solid #d6d6d6; }
    .topimage img { width: 165px; transform: translateZ(0); }
    .imartguide {
        display: block; margin-top: 10px;
        img { width: 153px; transform: translateZ(0); }
    }
    .articleBody {
        overflow: hidden; padding: 6px; border-top: 1px solid #d6d6d6;
        span {
            text-overflow: ellipsis; overflow: hidden;
            &.comment { float: none; display: block; padding-top: 5px; font-size: 11px; color: #8c8c8c; white-space: nowrap; }
            &.subject {
                float: none; overflow: hidden; display: block; padding: 3px 0 10px 0; border-bottom: 1px solid #d6d6d6; white-space: nowrap;
                a { font-size: 14px; font-weight: bold; color: #333333; }
            }
        }
    }
}

/* HOT ISSUE */
#hotissue {
    overflow: hidden;
    width: 915px;
    margin: 0 auto 42px;
    .colCont { float: left; }
    .item1 { width: 100%; }

    &.backskin2 {
        position: relative; overflow: visible;
        a img { max-width: 100%; min-height: 514px; }
        &.hotissue2 {
            width: 100%; position: relative; overflow: hidden; display: flex !important; height: 514px; justify-content: center;
            .item2 { display: flex; width: 915px; float: none; }
            .backskin2left { position: absolute; top: 0; left: 50%; z-index: 2; margin-left: -952px; }
            .backskin2right { position: absolute; top: 0; left: 50%; z-index: 2; margin-left: 457px; }
        }
        video { object-fit: fill; width: 915px; }
    }
}

.hot-issue-slide {
    position: relative;
    overflow: hidden;
    margin: 0 0 40px;
    width: 100%;
    height: 514px;

    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;

        a {
            display: flex;
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        video {
            position: relative;
            z-index: 10;
            max-width: 916px;
        }

        .link-type {
            position: absolute;
            top: 0;
            z-index: 5;
            width: calc(50% - 458px);
            height: 100%;

            &.left {
                left: 0;
            }

            &.right {
                right: 0;
            }
        }

        .img-type {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;

            img {
                aspect-ratio: 1 / 1;
                width: 100%;
            }
        }
    }
    
    .swiper-button-next {
        right: 250px;
    }

    .swiper-button-prev {
        left: 250px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: rgba(255, 255, 255, 0.70);
        background: rgba(0,0,0,0.3);
        width: 64px;
        height: 64px;
        border-radius: 50%;
        backdrop-filter: blur(4px);
        transition: background 0.3s ease;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 18px;
        font-weight: bold;
    }
}

/* 배너2 */
.banners-section {
    iframe { width: calc(100% - 8px); height: 100%; }
    
    &.grid-4x2 {
        height: 248px; overflow: hidden;
        .grid-col { float: left; }
        .grid-col1 { width: 25%; .grid-item { width: 100%; } }
        .grid-col2 { width: 50%; .grid-item { &.grid-w-1 { width: 50%; } &.grid-w-2 { width: 100%; } } }
        .grid-col3 { width: 75%; .grid-item { &.grid-w-1 { width: 33.3%; } &.grid-w-2 { width: 66.6%; } &.grid-w-3 { width: 100%; } } }
        .grid-col4 { width: 100%; .grid-item { &.grid-w-1 { width: 25%; } &.grid-w-2 { width: 50%; } &.grid-w-3 { width: 75%; } &.grid-w-4 { width: 100%; } } }
        .grid-item { 
            float: left; text-align: center; overflow: hidden; 
            a { display: inline-block; }
            img { height: 100%; }
            &.grid-h-1 { height: 122px; margin-bottom: 4px; }
            &.grid-h-2 { height: 248px; }
        }
    }

    &.grid-6x2 {
        height: 306px; overflow: hidden;
        .grid-col { float: left; }
        .grid-col1 { width: 16.6%; .grid-item { width: 100%; } }
        .grid-col2 { 
            width: 33.3%; 
            .grid-item { 
                &.grid-w-1 { width: calc(50% - 2px); &:first-child { margin-right: 4px; } }
                &.grid-w-2 { width: 100%; }
            }
        }
        .grid-col3 { width: 50%; .grid-item { &.grid-w-1 { width: 33.3%; } &.grid-w-2 { width: 66.6%; } &.grid-w-3 { width: 100%; } } }
        .grid-col4 { width: calc(66.6% - 4px); margin-right: 4px; .grid-item { &.grid-w-1 { width: 25%; } &.grid-w-2 { width: 50%; } &.grid-w-3 { width: 75%; } &.grid-w-4 { width: 100%; } } }
        .grid-col5 { width: 83.3%; .grid-item { &.grid-w-1 { width: 25%; } &.grid-w-2 { width: 50%; } &.grid-w-3 { width: 75%; } &.grid-w-4 { width: 100%; } &.grid-w-5 { width: 100%; } } }
        .grid-col6 { width: 100%; .grid-item { &.grid-w-1 { width: 25%; } &.grid-w-2 { width: 50%; } &.grid-w-3 { width: 75%; } &.grid-w-4 { width: 100%; } &.grid-w-5 { width: 100%; } &.grid-w-6 { width: 100%; } } }
        .grid-item { 
            float: left; text-align: center; overflow: hidden; 
            a { display: inline-block; }
            img { height: 100%; }
            &.grid-h-1 { height: 151px; margin-bottom: 4px; }
            &.grid-h-2 { height: 306px; }
        }
    }
}

/* video */
.brand-video {
    overflow: hidden;
    .brand-video-player {
        float: left; width: 677px; height: 380px; margin-right: 10px; border: 1px solid #cbcbcb; box-sizing: border-box;
        .player { width: 100%; height: 100%; }
    }
    .brand-video-list {
        float: left;
        .brand-video-list-item {
            overflow: hidden; width: 214px; height: 120px; margin-bottom: 10px; border: 1px solid #cbcbcb; box-sizing: border-box; cursor: pointer;
            &:last-child { margin-bottom: 0; }
            .img { width: 100%; height: 100%; }
        }
    }
}