@charset "UTF-8";

.brand_video {
    position:relative;
}
.section_about_brand .content_area .brand_video {
    margin-top:80px;
}
.brand_video .video {
    width:100%;
}
.brand_video video {
    width:100%;
    height:100%;
    vertical-align:top;
    overflow:hidden;
}
.brand_video video[poster] {
    width:100%;
    height:100%;
}
.brand_video .btn_control {
    position:absolute;
    background:url("/img/common/icon/icon_video_play-fa047d8af479035c268f7c70657e72be.svg") no-repeat center top/100%;
    right:80px;
    bottom:80px;
    width:80px;
    height:80px;
}

.brand_resorces .resorces_area {
    margin-top:80px;
}
.brand_resorces .resorces_area h4 {
    font-size:3.2rem;
    line-height:1.4;
    margin-bottom:24px;
}
.brand_resorces .text_desc {
    color:#333;
}
.brand_resorces .resorces_logo .logo_box {
    display:flex;
    align-items:center;
    justify-content:center;
    height:480px;
    background:url("/img/about/img_brand_logo_bg-63fdd892626c07c00fdab4287d03a3f3.png") no-repeat 0 0 / 100% auto;
    position:relative;
    background-color:#F9FAFC;
    margin-top:60px;
}
.brand_resorces .resorces_logo .logo_box > img {
    width:714px;
}
.brand_resorces .resorces_logo .logo_box .btn_down {
    display:flex;
    gap:4px;
    align-items:center;
    position:absolute;
    bottom:40px;
    right:40px;
    font-size:1.8rem;
    line-height:1.5;
    font-weight:500;
    color:#000;
}
.brand_resorces .resorces_logo .logo_box .btn_down::before {
    content:'';
    display:block;
    width:32px;
    height:32px;
    background:url("/img/common/icon/icon_download-444bcf30831d8567fa7fa08c657fe430.svg") no-repeat 0 0 / 100% auto;
}
.brand_resorces .resorces_color {
    margin-top:120px;
}
.brand_resorces .resorces_color .resorces_color_list {
    margin-top:60px;
    display:flex;
    gap:32px;
}
.brand_resorces .resorces_color .resorces_color_list .color_box {
    flex:1;
    height:320px;
    padding:40px;
    position:relative;
    box-sizing:border-box;
}
.brand_resorces .resorces_color .resorces_color_list .color_box.color_box_green {
    background-color:#50DF00;
}
.brand_resorces .resorces_color .resorces_color_list .color_box.color_box_coral {
    background-color:#FF7878;
}
.brand_resorces .resorces_color .resorces_color_list .color_box .hex {
    display:block;
    font-size:2.4rem;
    line-height:1.4;
    font-weight:600;
}
.brand_resorces .resorces_color .resorces_color_list .color_box p {
    font-size:1.8rem;
    line-height:1.5;
    margin-top:16px;
}
.brand_resorces .resorces_color .resorces_color_list .color_box .btn_copy {
    display:flex;
    gap:4px;
    align-items:center;
    position:absolute;
    bottom:40px;
    right:40px;
    font-size:1.8rem;
    line-height:1.5;
    font-weight:500;
}
.brand_resorces .resorces_color .resorces_color_list .color_box .btn_copy::before {
    content:'';
    display:block;
    width:32px;
    height:32px;
    background:url("/img/common/icon/icon_copy-9a2395ac8fdee1c8543f4f31c2c0c5c9.svg") no-repeat 0 0 / 100% auto;
}




/* Mobile (1169.98px 이하) */
@media only screen and (max-width: 1169.98px) {
    .section_about_brand .content_area .brand_video {
        margin-top:40px;
    }
    .brand_video .btn_control {
        position:absolute;
        background:url("/img/common/icon/icon_video_play-fa047d8af479035c268f7c70657e72be.svg") no-repeat center top/100%;
        right:16px;
        bottom:16px;
        width:40px;
        height:40px;
    }

    .brand_resorces .resorces_area {
        margin-top:40px;
    }
    .brand_resorces .resorces_area h4 {
        font-size:2rem;
        line-height:1.4;
        margin-bottom:16px;
    }
    .brand_resorces .resorces_area .text_desc {
        color:#666;
    }
    .brand_resorces .resorces_logo .logo_box {
        height:320px;
        background:url("/img/about/img_brand_logo_bg_mo-cc054818f9eb92013619d03248534cbd.png") no-repeat 0 0 / 100% auto;
        margin-top:30px;
    }
    .brand_resorces .resorces_logo .logo_box > img {
        width:240px;
    }
    .brand_resorces .resorces_logo .logo_box .btn_down {
        bottom:16px;
        right:16px;
        font-size:1.4rem;
    }
    .brand_resorces .resorces_logo .logo_box .btn_down::before {
        width:24px;
        height:24px;
    }
    .brand_resorces .resorces_color {
        margin-top:60px;
    }
    .brand_resorces .resorces_color .resorces_color_list {
        margin-top:30px;
        flex-direction:column;
        gap:20px;
    }
    .brand_resorces .resorces_color .resorces_color_list .color_box {
        height:200px;
        padding:16px;
        flex:auto;
    }
    .brand_resorces .resorces_color .resorces_color_list .color_box .hex {
        font-size:1.6rem;
        line-height:1.5;
    }
    .brand_resorces .resorces_color .resorces_color_list .color_box p {
        font-size:1.6rem;
        line-height:1.5;
        margin-top:8px;
    }
    .brand_resorces .resorces_color .resorces_color_list .color_box .btn_copy {
        bottom:16px;
        right:16px;
        font-size:1.4rem;
    }
    .brand_resorces .resorces_color .resorces_color_list .color_box .btn_copy::before {
        width:24px;
        height:24px;
    }
}