main {
    width: var(--min-width);
    margin: 120px auto;

    display: flex;
    gap: var(--gutter);
}
main > .leftWrapper> .topWrapper{
    display: flex;
    gap: var(--gutter);
}

.left {
    width: calc(var(--col-width) * 3 + var(--gutter) * 2);
    height: 868px;

    border: 1px solid var(--color-gray);
}

.left>.tab {
    width: calc(var(--col-width) * 3 + var(--gutter) *2);
    height: 900px;
}

input[name="l-tab"] {
    display: none;
}

input[name="l-tab"]:checked~.contentsWrapper {
    grid-template-rows: 1fr;
}


.tab>li .contentsWrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: all 0.3s;
}

.tab>li .contents {
    overflow: hidden;
}

.tab>li>label {
    display: inline-block;
    width: 100%;
    margin: 15px 15px;
    position: relative !important;
    font: var(--text-contents-B);

    transition: all 0.3s;
}

.tab>li>label::before {
    content: "";
    position: absolute;
    background-color: var(--color-gray);

    bottom: -10px;
    left: 0;
    width: 90%;
    height: 2px;
}

.tab>li>label::after {
    content: "+";
    position: absolute;

    color: var(--color-gray);
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font: 200 30px/1.4 'Pretendard', sans-serif;
}

input[name="l-tab"]:checked+label::after {
    transform: translateY(-50%) rotate(45deg);
}


.contentsWrapper>.contents {
    width: 250px;
    margin: 0 auto;
}

.contentsWrapper>.contents>li,
.contentsWrapper>.contents >p {
    margin: 10px 0;
    font: var(--text-contents);
}

.center {
    width: calc(var(--col-width) * 6 + var(--gutter) * 5);
}

.center>.img {
    width: 100%;
    height: calc(var(--col-width) * 6 + var(--gutter) * 5);

    border: 1px solid var(--color-gray);
    background-color: var(--color-lightGray);

    position: relative;
}

.center > .img > button{
    font: 200 50px/1.4 'Pretendard', sans-serif;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
}
.slide-btn.prev { left: 10px; }
.slide-btn.next { right: 10px; }

.slide-window {
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.slide-train {
    display: flex;
    width: 100%;
    height: 100%;
    
    transition: transform 0.3s ease-in-out; 
}

.slide-train > li {
    width: 100%; 
    height: 100%;
    flex-shrink: 0; 
}

.slide-train > li > img{
    width: 640px;
}

.slide-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    
    display: flex;
    align-items: flex-end; 
    gap: 8px;
    z-index: 10;
}

.slide-indicator .bar {
    width: 2px; 
    height: 10px;
    background-color: var(--color-gray); 
    transition: all 0.3s ease; 
}

.slide-indicator .bar.active {
    height: 15px; 
    background-color: var(--color-main);
}

.center>.otherProduct {
    width: 100%;
    height: 240px;

    margin-top: 17px;
    border: 1px solid var(--color-gray);
}

.otherProduct > h3{
    margin: 10px 20px;
}

.otherProduct > .itemContainer{
    display: flex;
    gap: var(--gutter);
    justify-content: center;
}

.itemContainer > .item{
    width: 170px;
    height: 155px;
}
.itemContainer > .item img{
    background-color: var(--color-lightGray);
    padding: 20px;
}



.right {
    position: sticky;
    top: 0;
    width: calc(var(--col-width) * 3 + var(--gutter) * 2);
    height: 868px;
    border: 1px solid var(--color-gray);
}

.right .textbox{
    margin: 0 20px;
}
.right > .textbox small{color: var(--color-gray);}
.right > .textbox p {margin: 15px 0;}
.right > .link {margin: 100px 20px 220px 20px;}
.right > h3 {text-align: right;
margin-right: 15px;}
.right > .btn {
    position: absolute;
    right: 15px;
    bottom: 20px;
}

main > .leftWrapper > .detail{
    width: calc(var(--col-width) * 9 + var(--gutter) * 8);
    margin-top: var(--gutter);
}

.detail h1{
    position: relative;
    display: block;
    margin: 30px 50px;
}
.detail h1::before{
    content: "";
    position: absolute;

    width: 15px;
    height: 120%;

    top: 50%;
    left:-30px;

    transform: translateY(-50%);

    background-color: var(--color-main);
}

.detail img{
    margin-top: 20px;
    margin-bottom: 50px;
}

.detail .rtz{
    display: flex;
    gap: var(--gutter);
}
.detail .rtz img{
    margin: 0;
}
.detail .rtz .textbox{
    margin: auto;
    text-align: justify;
}