.arts-main-section{
    background: url('/images/background/arts-background.png') no-repeat;
    background-size: cover;
    width:calc(100% - 80px);
    height: 100vh;
    margin-left:80px;
    padding:60px 240px 60px 160px;

    .arts-categorys{
        padding-top:70px;
        display: flex;
        justify-content: space-between;

        .arts-category-item{
            max-width: 400px;
            
            .category-text{
                background:white;
                padding:20px;
                padding-right:0px;
                .category-title{
                    font-size:30px;
                    font-weight: 300;
                    line-height:39px;
                    letter-spacing: -0.005em;
                    padding-bottom:20px;
                }
                .category-desc{
                    padding-top:20px;
                    font-weight: 200;
                    font-size:18px;
                    line-height:23.4px;
                    letter-spacing: -0.005em;
                }
                .category-link{
                    margin-top:30px;
                    a{
                        padding:0px 6px;
                        border-bottom:1px solid #c0c0c0;
                        font-size:16px;
                        line-height: 24px;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
.ceramics-section{
    background: url('/images/arts/bg-ceramics.png');
    background-size:cover;
}
.jewelry-section{
    background: url('/images/arts/bg-jewel.png');
    background-size:cover;
}
.paint-section{
    background: url('/images/arts/bg-pic.png');
    background-size:cover;
}

.arts-intro{
    max-width: 340px;
    width: 340px;

    .arts-intro-links{
        padding:20px 0px;
        border-bottom:1px solid rgba(0, 0, 0, 0.05);

        img{
            margin-right:12px;
            width: 40px;
        }
        a{
            span{
                font-size: 16px;
                line-height: 24px;
            }
        }
    }
}

.arts-list-warper{
    padding-left:140px;
    display: flex;
    .arts-item{
        min-width: 324px;

        .arts-item-title{
            font-size: 20px;
            line-height: 26px;
            letter-spacing: -0.005em;
            padding-top:20px;
            padding-bottom:30px;
        }
        .arts-desc-title{
            width: 70px;
        }
    }
}
    
.arts-view{
    .view-container{
        margin-top:75px;
        display: flex;
        .view-image{
            max-width: 500px;
            width:100%;
        }
        .view-content{
            flex:1;
            padding-left:120px;

            .content-title{
                display:flex;
                padding-bottom: 40px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                .content-name{
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 130%;
                    letter-spacing: -0.5px;
                    flex:1;
                }
            }
            .content-infos{
                display: flex;
                padding:40px 0px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                font-weight: 400;
                font-size: 16px;
                line-height: 140%;
                letter-spacing: -0.5px;
                .info-box{
                    flex:1;
                    .info-content{
                        padding:7px 0px;
                        display: flex;
                        .art-category{
                            width:90px;
                        }
                        .art-info{
                            flex:1;
                            padding-left: 10px;;
                        }
                    }
                }
            }
            .content-desc{
                padding:40px 0px;
                font-weight: 400;
                font-size: 16px;
                line-height: 140%;
                letter-spacing: -0.5px;
            }
            .content-inquiry{
                padding-top:40px;
                padding-bottom: 120px;
            }
            .content-controll{
            }
        }
    }
}

@media (max-width: 1700px){
    .arts-main-section{
        padding:40px 20px;
    }
}
/************ BreakPoints ************/
// Small devices (landscape phones, 576px and up)
@media (max-width: 576px) { 
}

// Medium devices (tablets, 768px and up)
@media (max-width: 768px) { 
   
}

// Large devices (desktops, 992px and up)
@media (max-width: 992px) { 
   
}

// X-Large devices (large desktops, 1200px and up)
@media (max-width: 1200px) { 
    .arts-main-section{
        width:100%;

        .arts-categorys{
            padding-top:30px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .arts-category-item{
                max-width: none;
                margin-bottom: 40px;

                .category-text{
                    .category-title{
                        font-size:28px;
                        line-height:36.4px;
                        letter-spacing: -0.005em;
                        padding-bottom:10px;
                    }
                    .category-desc{
                        padding-top:10px;
                        padding-top:18px;
                        font-size:18px;
                        line-height:23.4px;
                        letter-spacing: -0.005em;
                    }
                    .category-link{
                        margin-top:20px;
                    }
                }
            }
        }
    }

    
    .arts-intro{
        padding:60px 20px;
        color:white !important;
        width:100%;
        max-width: 100%;

        .arts-intro-links{
            padding:20px;
            background:rgba(7, 7, 7, 0.5);
            margin-bottom: 10px;
        }
    }

    .ceramics-section, .jewelry-section, .paint-section{
        &::after{
            content:'';
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            z-index: -1;
            position: absolute;
            top:0;
        }
    }

    .arts-view{
        .view-container{
            flex-direction: column;

            .view-image{
                margin:auto;
            }

            .view-content{
                padding:20px 0px;;

                .content-title{
                    padding: 0px 20px 20px;
                }

                .content-infos{
                    flex-direction: column;
                    padding:20px 0px;
                    .info-box{
                        padding:0px 20px;
                    }
                }
                .content-desc{
                    padding:20px;
                }

                .content-inquiry{
                    padding:20px;
                }
            }
        }
    }
}

// XX-Large devices (larger desktops, 1400px and up)
@media (max-width: 1400px) { 

    .arts-main-section{
        width:100%;
        margin:0;
        height:auto;
    }
    
    .arts-view{
        .view-container{
            padding:0;
            margin:0;
        }
    }
}