@charset "utf-8";

:root{
	--mainColor1:#e62b5f; /*PINK*/
	--mainColor2:#f69735; /*ORANGE*/
	--basicGra:linear-gradient(45deg,rgba(235, 143, 49, 1) 0%, rgba(220, 49, 41, 1) 50%, rgba(212, 39, 87, 1) 100%); /*GRADIENT*/
	--bgPattern:url(/_res/bcm/img/common/bg_pattern.jpg) repeat; /*PATTERN BACKGROUND*/
    --mainFilter1:invert(26%) sepia(90%) saturate(2488%) hue-rotate(327deg) brightness(92%) contrast(96%); /*PINK*/
    --mainFilter2:invert(77%) sepia(8%) saturate(7311%) hue-rotate(332deg) brightness(97%) contrast(99%); /*ORANGE*/
	--titleType:'PretendardEB' !important;
}


/* COMMON */
.flexbox{display:flex; flex-wrap:wrap;}
.gridbox{display:grid;}

.container{width:100%; max-width:1680px; padding:0 30px; margin:0 auto; position:relative;}
.s-container{width:100%; max-width:1680px; padding:0 30px; margin:0 auto; position:relative;}

.chk_design{display:inline-flex; align-items:center;}
.chk_hidden{display:none;}
.chk_label{display:inline-block; width:22px; height:22px; background-color:#fff; border-radius:5px; border:1px solid #c5c5c5; position:relative; cursor:pointer;}
.chk_visible{
    display:inline-block; min-height:22px; padding-left:28px; line-height:1.3em; cursor:pointer; position:relative;
    &:before{display:block; content:''; width:20px; height:20px; background-color:#fff; border-radius:5px; border:1px solid #c5c5c5; position:absolute; top:1px; left:0;}
}
.chk_hidden:checked + .chk_label{
    &:after{display:block; content:''; width:14px; height:14px;  background:url(/_res/bcm/img/common/ic_checkbox.svg) no-repeat center; background-size:100%; position:absolute; top:3px; left:3px; filter:var(--mainFilter1);}
}
.chk_hidden:checked + .chk_visible{
    font-weight:600; color:#000 !important;
    &:after{display:block; content:''; width:14px; height:14px;  background:url(/_res/bcm/img/common/ic_checkbox.svg) no-repeat center; background-size:100%; position:absolute; top:5px; left:4px; filter:var(--mainFilter1);}
}

.rdo_design{display:inline-flex; flex-wrap:wrap; align-items:center;}
.rdo_hidden{display:none;}
.rdo_visible{
    display:block; padding-left:28px; line-height:1.3em; cursor:pointer; position:relative;
    &:before{display:block; content:''; width:20px; height:20px; background-color:#fff; border-radius:22px; border:1px solid #c5c5c5; position:absolute; top:1px; left:0;}
}
.rdo_hidden:checked + .rdo_visible{
    font-weight:600; color:#000 !important;
    &:after{display:block; content:''; width:14px; height:14px; background-color:var(--mainColor1); border-radius:14px; position:absolute; top:5px; left:4px;}
}

.file_design{display:flex; flex-wrap:wrap; position:relative;}
.file_hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.file_visible{width:120px; border-radius:10px; margin-left:4px; font-size:0.88em; font-weight:600; line-height:46px; cursor:pointer;}
.file_name{width:calc(100% - 124px);}

.tbl_caution{
    margin-top:15px;
    > li{
        font-size:0.89em; margin-bottom:5px; padding-left:20px; position:relative;
        &:last-child{margin-bottom:0;}
        &:after{content:'※'; position:absolute; top:0; left:0;}
    }
}


/* HEADER */
.header{background:var(--bgPattern); position:relative; border-bottom:1px solid rgba(255,255,255,0.1); z-index:100;}
.header .container{align-items:center; justify-content:space-between;}
.header .logo a{
    display:block; line-height:0;
    > img{height:60px;}
}
.header .gnb ul li{
    margin:0 20px;
    > .depth01{
        display:block; font-size:1.11em; font-weight:700; line-height:1em; color:#fff; padding:40px 18px;
        &:hover{color:var(--mainColor2);}
        &.on{color:var(--mainColor2);}
    }
}
.header .top_r{
    align-items:center; justify-content:flex-end;
    > ul{
        margin-right:30px;
        > li{
            padding-right:25px; position:relative;
            &:last-child{padding-right:0;}
            &:after{display:block; content:''; width:1px; height:12px; background-color:rgba(255,255,255,0.3); position:absolute; top:6px; right:12px;}
            &:last-child::after{display:none;}
            > a{display:block; font-size:0.89em; font-weight:600; color:rgba(255,255,255,0.3);}
            &.active a{color:#fff;}
        }
    }
    > .top_btn .btn{
        margin-right:5px; font-weight:500;
	    &:last-child{margin-right:0;}
        > img{width:14px; filter:invert(100%);}
    }
}


/* MENU(PC) */
.snb{width:100%; padding:30px 0; background:var(--bgPattern); border:1px solid rgba(255,255,255,0.1); border-width:1px 0; position:absolute; top:100px; left:0; z-index:800;}
.snb ul{
    align-items:center; justify-content:center;
    > li{
        margin-right:50px;
        &:last-child{margin-right:0;}
        > a{
            display:block; color:rgba(255,255,255,0.3);
            &:hover{color:#fff;}
        }
    }
}


/* MENU(MOBILE) */
.m_menu_open{
    width:60px; height:60px; border-radius:3px; cursor:pointer; position:absolute; top:15px; right:30px; z-index:999; display:none;
    &:before{content:''; width:42px; height:4px; background-color:#fff; border-radius:3px; position:absolute; bottom:17px; right:9px; transition:width 0.3s 0.4s;}
    &:after{content:''; width:42px; height:4px; background-color:#fff; border-radius:3px; position:absolute; top:17px; left:9px; transition:width 0.3s 0.4s;}
}
.m_menu_open .bar{
	display:block; width:0; height:4px; border-radius:3px; background-color:#fff; margin-top:28px; margin-left:9px; position:relative;	
	&:before{content:''; width:42px; height:4px; border-radius:3px; background-color:#fff; position:absolute; bottom:0; left:0; transition:transform 0.3s;}
	&:after{content:''; width:42px; height:4px; border-radius:3px; background-color:#fff; position:absolute; bottom:0; left:0; transition:transform 0.3s;}
}
.m_menu_open.active span{
	&:before{transform:rotate(45deg); transition:transform 0.3s 0.8s;}
	&:after{transform:rotate(-45deg); transition:transform 0.3s 0.8s;}
}
.m_menu_open.active{
    position:fixed;
	&:before{width:0; bottom:17px; right:9px;}
	&:after{width:0; top:17px; left:9px;}
}

.m_menu{
    width:100%; max-width:640px; height:100%; position:fixed; top:0; right:0; background:url(/_res/bcm/img/common/bg_pattern.jpg) repeat; box-shadow:0 0 50px rgba(255,255,255,0.3); z-index:998; display:none;
    > .top{
        border-bottom:1px solid rgba(255,255,255,0.2); position:relative;
        > .logo{
            line-height:0; padding:20px 30px 15px;
            > img{height:50px;}
        }
        > ul{
            grid-template-columns:repeat(auto-fit, minmax(calc(33.33% - 10px), auto)); gap:15px; padding:0 30px 30px; 
            > li{
                background-color:rgba(255,255,255,0.2);
                > a{
                    padding:15px; align-items:center; justify-content:center;
                    > .icon{
                        width:16px; line-height:0; margin-right:5px;
                        > img{width:100%; filter:invert(100%);}
                    }
                    > p{font-size:0.89em; line-height:20px; color:#fff;}
                }
            }
        }
        > .m_menu_close{
            width:60px; line-height:0; position:absolute; top:15px; right:30px;
            > img{width:100%; filter:invert(100%);}
        }
    }
    > .m_nav{
        height:calc(100% - 166px);
        > .m_depth01{
            width:35%; height:100%; background-color:rgba(0,0,0,0.5);
            > ul{
                > li{
                    border-bottom:1px solid rgba(255,255,255,0.1);
                    > a{display:block; font-size:1.11em; line-height:1.3em; text-align:center; padding:25px 10px; color:rgba(255,255,255,0.5);}
                    &.active{
                        background:url(/_res/bcm/img/common/bg_pattern.jpg) repeat; border-bottom:0;
                        > a{color:var(--mainColor2); font-weight:600;}
                    }
                    &:last-child{border-bottom:0;}
                }
            }
        }
        > .m_menu_con{
            width:65%; padding:30px;
            > ul{
                > li{
                    margin-bottom:15px; padding-left:12px; position:relative;
                    > a{
                        display:inline-block; color:rgba(255,255,255,0.8);
                        &:hover{color:#fff;}
                    }
                    &:after{content:''; width:4px; height:4px; border-radius:4px; background-color:var(--mainColor1); position:absolute; top:10px; left:0;}
                    &:last-child{margin-bottom:0;}
                }
            }
        }
    }
}


/* FOOTER */
.footer{
    background:var(--bgPattern); border-top:1px solid rgba(255,255,255,0.1); position:relative; overflow:hidden;
    > .deco{
        flex:0 0 auto; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; transition:0.3s; position:absolute; bottom:-30px;
        > .text_wrap{padding-right:1.4881vw; font-family:var(--titleType); font-size:200px; font-weight:900; color:rgba(255,255,255,0.05); line-height:1em; animation:textLoop 30s linear infinite;}
    }
    > .sponsor .box{
        border:1px solid rgba(255,255,255,0.1); border-width:0 1px 1px 0;
        > a{
            display:block; line-height:0;
            > img{width:100%; filter:grayscale(1) contrast(0.5);}
        }
    }
}
@keyframes textLoop {
	0%{-webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);}
    100%{-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
 }
.footer .inner{
    padding:80px 130px 160px 0;
    > .info{
        > .logo{
            line-height:0; margin-bottom:30px;
            > img{width:260px;}
        }
        > ul li{
            color:rgba(255,255,255,0.6); margin:5px 50px 5px 0;
	        &:last-child{margin:5px 0;}
            > b{color:rgba(255,255,255,0.8); font-weight:600; margin-right:15px;}
        }
        > p{color:rgba(255,255,255,0.4); margin-top:30px;}
    }
    > .go_top{
        width:100px; height:100px; border-radius:100px; flex-direction:column; align-items:center; justify-content:center; background:var(--basicGra); cursor:pointer; transition:all 0.3s; position:absolute; bottom:160px; right:30px;
        &:hover{opacity:0.6;}
        > img{width:14px; filter:invert(100%);}
        > p{font-family:var(--titleType); font-weight:bold; color:#fff; margin-top:5px;}
    }
}


/* QUICK */
.quick_bar {width:80px; position:fixed; right: 30px;bottom:30px;z-index: 100;}
.quick_bar ul {width:100%;position: absolute; bottom:40px; left:0; padding: 15px 7px 40px; border-radius: 100px 100px 0 0; background:rgb(255 255 255 / 60%);box-shadow: 0 2px 25px rgba(0,0,0,0.2);transform: translateY(20px);  opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.quick_bar.active ul { transform: translateY(0);  opacity: 1; visibility: visible;}
.quick_bar ul li { text-align: center; padding:20px 0; border-top:1px dashed #676767;}
.quick_bar ul li:first-child { border-top:0;}
.quick_bar .txt {display: block;margin-top:5px;font-size: 15px;line-height: 1.3;font-weight: 500;color: #222;}
.quick_bar .q_txt {position:relative; z-index:2; width: 80px; height: 80px; border-radius: 50%;background: var(--basicGra);display: flex; align-items: center; justify-content: center; flex-direction: column;cursor: pointer;}
.quick_bar .q_txt > i{width: 0;height: 0;border-style: solid;border-width: 0px 7px 8px 7px;border-color: transparent transparent #fff transparent;transition:transform 0.4s ease-in-out;}
.quick_bar .q_txt > p {font-family: 'Pretendard';font-weight:600;color: #fff;font-size: 16px; letter-spacing: 0; padding-top:5px;}
.quick_bar.active .q_txt > i{transform: rotate(180deg);}


/* ONLINE BANNER */
.online_banner{
    width:200px; height:450px; border-radius:10px; overflow:hidden; position:fixed; bottom:30px; right:30px; z-index:9000;
    > .box{width:100%; height:100%; line-height:0; position:absolute; top:0; left:0;}
    > .bann_close{
        width:20px; height:20px; padding:3px; background-color:rgba(0,0,0,0.5); border-radius:5px; line-height:0; position:absolute; top:5px; right:5px; cursor:pointer;
        > img{width:100%; filteR:invert(100%);}
    }
}



/* RESPONSIVE */
@media screen and (max-width:1600px){
	.quick_bar {right: 10px;bottom:10px;}
}


@media screen and (max-width:1280px){
    /* HEADER */
    .header{padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.1);}
    .header .gnb, .header .top_r{display:none;}
    

    /* MENU(MOBILE) */
    .m_menu_open{display:block;}

    .m_menu{
        > .top{
            > .m_menu_close{
                display:none !important;
            }
        }
    }
	
	.quick_bar{display:none;}


    /* ONLINE BANNER */
    .online_banner{display:none !important;}
}


@media screen and (max-width:960px){
    /* FOOTER */
    .footer{
        > .deco{
            > .text_wrap{font-size:160px;}
        }
    } 
    .footer .inner{
        padding:60px 0 120px;
        > .info{
            > ul li{
                margin:5px 30px 5px 0;
                &:last-child{margin:5px 0;}
                > b{margin-right:15px;}
            }
        }
        > .go_top{width:90px; height:90px; bottom:auto; top:50px;}
    }
}


@media screen and (max-width:640px){
    /* COMMON */
    .container{padding:0 4.5%;}
    .s-container{padding:0 4.5%;}

    .chk_label{width:20px; height:20px;}
    .chk_visible{
        padding-left:25px;
        &:before{width:18px; height:18px;}
    }
    .chk_hidden:checked + .chk_label{
        &:after{width:12px; height:12px;}
    }
    .chk_hidden:checked + .chk_visible{
        &:after{width:12px; height:12px;}
    }

    .file_visible{width:100px;}
    .file_name{width:calc(100% - 104px);}


    /* HEADER */
    .header .logo a img{height:50px;}


    /* MENU(MOBILE) */
    .m_menu_open{
        width:50px; height:50px; margin-right:-10px; right:4.5%;
        &:before{width:32px; bottom:12px; right:9px;}
        &:after{width:32px; top:12px; left:9px;}
    }
    .m_menu_open .bar{
        margin-top:23px; margin-left:9px;
        &:before{width:32px;}
        &:after{width:32px;}
    }
    .m_menu_open.active span{
        &:before{transform:rotate(45deg); transition:transform 0.3s 0.8s;}
        &:after{transform:rotate(-45deg); transition:transform 0.3s 0.8s;}
    }
    .m_menu_open.active{
        &:before{width:0; bottom:12px; right:9px;}
        &:after{width:0; top:12px; left:9px;}
    }

    .m_menu{
        > .top{
            > .logo{line-height:0; padding:15px 4.5%;}
            > ul{
                grid-template-columns:repeat(auto-fit, minmax(calc(33.33% - 8px), auto)); gap:8px; padding:0 4.5% 15px;
                > li{
                    > a{
                        padding:13px;
                        > .icon{width:14px;}
                    }
                }
            }
        }
        > .m_nav{
            height:calc(100% - 142px);
            > .m_depth01{width:37%;}
            > .m_menu_con{width:63%; padding:25px;}
        }
    }


    /* FOOTER */
    .footer{
        > .deco{
            > .text_wrap{font-size:120px;}
        }
    }
    .footer .inner{
        padding:50px 0 80px;
        > .info{
            > .logo{
                margin-bottom:20px;
                > img{width:auto; height:50px;}
            }
            > ul li{
                margin:3px 30px 3px 0;
                &:last-child{margin:3px 0;}
            }
            > p{margin-top:20px;}
        }
        > .go_top{
            width:70px; height:70px; top:40px; right:4.5%;
            > img{width:12px; margin-top:5px;}
            > p{margin-top:0;}
        }
    }
}