.set_container{
    font-family: "Noto Sans KR","Sans-serif";
    color: #252525;
    min-width: 1780px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.set_container button{
    font-family: "Noto Sans KR","Sans-serif";
}

.top_banner{
    background-image: url("../../images/2026/0318/top_bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 1583px;
    position: relative;
    overflow: hidden;
}
.top_banner .image_box .line1{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: calc(50% - 600px);
    background-color: red;
    z-index: 99;
}
.top_banner .image_box .line2{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: calc(50% + 600px);
    background-color: red;
    z-index: 99;
}
.top_banner .image_box .line3{
    position: fixed;
    width: 1px;
    height: 100vh;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: red;
    z-index: 99;
}
.top_banner .image_box{}
.top_banner .image_box img{
    position: absolute;
    top: 0;
    left: 0;    
}

.top_banner .image_box .text01{
    top: 80px;
    left: calc(50% - 77px);
    opacity: 0;
    animation-name: text;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.top_banner .image_box .text02{
    top: 90px;
    left: calc(50% - 319px);
    opacity: 0;
    animation-name: text;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: .2s;
}
.top_banner .image_box .text03{
    top: 368px;
    left: calc(50% - 449px);
    opacity: 0;
    animation-name: text;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: .4s;
}
.top_banner .image_box .panton_banner{
    top: 532px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation-name: banner;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: .6s;
}
.top_banner .image_box .colorOfTheYear{
    top: 1050px;
    left: calc(50% - 40px);
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.top_banner .image_box .colvd{
    top: 1043px; 
    left: calc(50% - 586px);
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.top_banner .image_box .text04{
    top: 1055px; 
    left: calc(50% - 493px);
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
.top_banner .image_box .text05{
    top: 1183px;
    left: calc(50% - 491px);
    opacity: 0;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.top_banner .image_box.on .colorOfTheYear{
    animation-name: cloudImg;
    animation-delay: .6s;
}
.top_banner .image_box.on .colvd{
    animation-name: cloud;
}
.top_banner .image_box.on .text04{
    animation-name: banner;
    animation-delay: .4s;
}
.top_banner .image_box.on .text05{
    animation-name: cloud;
    animation-delay: .6s;
}

@keyframes text {
    0%{
        margin-top: 20px;
        opacity: 0;
    }
    100%{
        margin-top: 0px;
        opacity: 1;
    }
}
@keyframes banner {
    0%{
        margin-left: -20px;
        opacity: 0;
    }
    100%{
        margin-left: 0px;
        opacity: 1;
    }
}
@keyframes cloud {
    0%{
        margin-top: -20px;
        opacity: 0;
    }
    100%{
        margin-top: 0;
        opacity: 1;
    }
}
@keyframes cloudImg {
    0%{
        margin-top: 30px;
        opacity: 0;
    }
    100%{
        margin-top: 0;
        opacity: 1;
    }
}

.hotclick_container{
    padding-top: 70px;
    position: relative;
}
.hotclick_container .scroll_nav{
    position: absolute;
    top: 0;
    width: 100%;
    background-image: url("../../images/2026/0318/scroll_bg.png");
    background-repeat: no-repeat;
    background-position: center;
}
.hotclick_container .scroll_nav.on{
    position: fixed;
    top: 49px;
    left: 0;
    width: 100%;
    box-shadow: 3px 0px 7px rgb(0, 0, 0, 0.35);
    z-index: 111;
}
.hotclick_container .scroll_nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1200px;
}
.hotclick_container .scroll_nav ul li{
    flex: 1;
    border-right: 1px solid #dbdbdb;
}
.hotclick_container .scroll_nav ul li:nth-child(1){
    border-left: 1px solid #dbdbdb;
}
.hotclick_container .scroll_nav ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    
}
.hotclick_container .scroll_nav ul li a img{
    padding-top: 2px;
}
.hotclick_container .scroll_nav ul li a img:nth-child(2){
    display: none;
}
.hotclick_container .scroll_nav ul li.on a img:nth-child(1){
    display: none;
}
.hotclick_container .scroll_nav ul li.on a img:nth-child(2){
    display: block;
}
.hotclick_container .scroll_nav ul li.on a img{
    filter: unset;
}


.hotclick_container section{
    background-image: url("../../images/2026/0318/bg_01.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: 3202px;
    position: relative;
    box-sizing: border-box;
} 
.hotclick_container .section02{
    background-image: url("../../images/2026/0318/bg_02.jpg");
    width: 100%;
    height: 1868px;
}
.hotclick_container .section03{
    background-image: url("../../images/2026/0318/bg_03.jpg");
    width: 100%;
    height: 1953px;
}
.hotclick_container .section04{
    background-image: url("../../images/2026/0318/bg_04.jpg");
    width: 100%;
    height: 1430px;
}


.hotclick_container section .section_title01{
    padding-top: 120px;
}
.hotclick_container section .section_title01{
    padding-top: 120px;
}
.hotclick_container section .list{
    display: flex;
    justify-content: center;
    grid-column-gap: 60px;
    grid-row-gap: 50px;
    width: 1140px;
    flex-wrap: wrap;
    margin: 60px auto 0;
}    
.hotclick_container section .list li{
    position: relative;
}    
.hotclick_container section .list li:after {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}
.hotclick_container section .list li a {    
    position: absolute; 
    display: inline-block;
    top: 178px;
    left: 405px;
    z-index: 1;
    animation-name: button;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
.hotclick_container section .list li:nth-child(1) a {}
.hotclick_container section .list li:nth-child(2) a {
    animation-delay: 0.25s;
}
.hotclick_container section .list li:nth-child(3) a {
    animation-delay: 0.5s;
}
.hotclick_container section .list li:nth-child(4) a {
    animation-delay: 0.75s;
}

@keyframes button {
    0%{
        margin-top: 0;
    }
    50%{
        margin-top: -10px
    }
    100%{
        margin-top: 0;
    }
}

.hotclick_container section .section_title02{    
    margin-top: 120px;
}
.hotclick_container section .colors{
    display: flex;
    justify-content: center;
    grid-column-gap: 20px;
    flex-wrap: wrap;
    margin: 150px auto 0;
}    
.hotclick_container section .colors li{
    position: relative;
    height: 228px;
}    
.hotclick_container section .colors li div{
    position: relative;
}    
.hotclick_container section .colors li .color_title{
    margin-top: -318px;
}    
.hotclick_container section .colors li .color_content{}    
.hotclick_container section .colors li .color_title:after {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}
.hotclick_container section .colors li .color_content:after {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}

.hotclick_container section .font_down {
    position: relative;
    display: inline-block;
    margin-top: 30px;
}    
.hotclick_container section .font_down:after {    
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}
.hotclick_container section .font_down .font_down_title {    
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.hotclick_container section .font_down .font_down_box { 
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}   
.hotclick_container section .font_down .font_down_link {    
    width: 495px;
    height: 70px;
    border: 1px solid #746c63;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.hotclick_container section .font_down .font_down_link p{
    font-size: 17px;
    color: #746c63;
    font-weight: 500;
    margin-top: -4px;
}    
.hotclick_container section .font_down .font_down_link a{    
    width: 205px;
    height: 42px;
    border-radius: 5px;
    background-color: #b6b1aa;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    border: 1px solid #b6b1aa;
}
.hotclick_container section .font_down .font_down_link a span{    
    background-image: url("../../images/2026/0318/arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
    font-size: 16px;
    font-weight: 400;
    padding-right: 20px;
    padding-bottom: 3px;
    color: #fff;
    transition: all .3s;
}
.hotclick_container section .font_down .font_down_link a:hover{
    background-color: #fff;
}
.hotclick_container section .font_down .font_down_link a:hover span{
    filter: invert(64%) sepia(97%) saturate(21%) hue-rotate(356deg) brightness(92%) contrast(93%);
}
.hotclick_container section .font_down > p{    
    position: absolute;
    bottom: 44px;;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    letter-spacing: -0.06em;
    color: #746c63;
    font-weight: 400;
}
.hotclick_container section .before_after{
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
    margin-top: 102px;
    position: relative;
}
.hotclick_container section .before_after::after{
    content: "";
    background-image: url("../../images/2026/0318/before_after_arrow.png");
    width: 155px;
    height: 84px;
    position: absolute;
    top: 151px;
    left: calc(50% - 69px)
}
.hotclick_container section .before_after li{
    position: relative;
    width: 540px;
    height: 495px;
}
.hotclick_container section .before_after li:nth-child(1) img{
    margin-left: -9px;
    margin-top: -24px;
}
.hotclick_container section .before_after li:nth-child(2) img{
    margin-left: -9px;
    margin-top: -28px;
}
.hotclick_container section .package{
    width: 1200px;
    margin: 60px auto 0;
}
.hotclick_container section .package img{
    margin-left: 111px;
}


.hotclick_container section .list2 {
    width: 1140px;
    margin: 45px auto 0;
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 60px;
    grid-row-gap: 50px;
}
.hotclick_container .section03 .list2,
.hotclick_container .section04 .list2{
    margin-top: 60px;
}
.hotclick_container section .list2 li{
    position: relative;
    top: 0;
    transition: all .3s;
}
.hotclick_container section .list2 li::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}
.hotclick_container section .list2 li a{    
    display: inline-block;
    position: relative;
    z-index: 1;
}
.hotclick_container section .list2 li:hover{
    top: -10px;
}
.hotclick_container section .section_button{
    position: relative;
    display: inline-block;
    margin-top: 60px;
    transition: all .3s;
}
.hotclick_container section .section_button::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.65);
    mix-blend-mode: overlay;
    border-radius: 10px;
}
.hotclick_container section .section_button:hover{
    margin-left: 20px;
}

.hotclick_container section .step{
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 75px;
}
.hotclick_container section .step li{
    width: 380px;
    height: 208px;
    opacity: 0;
}




.conts_btn_top{position:fixed; left:50%; margin-left:680px; bottom:95px; z-index:9888; animation:topm 0.8s ease-in-out infinite; animation-play-state:paused;}
.conts_btn_top button{cursor:pointer; border:none; outline:none; display:block; background:url(	https://www.bizforms.co.kr/magazine/content/hotclick/images/2020/201208/ico_top.png) 50% 50% no-repeat; text-indent:-9999px; opacity:0; width:0px; height:0px; -webkit-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -moz-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -ms-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; -o-transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s; transition:opacity 0.4s, width 0s 0.4s, height 0s 0.4s;}
.conts_btn_top:hover{animation-play-state:running; animation-fill-mode:forwards;}
.conts_btn_top.on button{opacity:0.5; width:50px; height:50px; -webkit-transition:opacity 1.0s; -moz-transition:opacity 1.0s; -ms-transition:opacity 1.0s; -o-transition:opacity 1.0s; transition:opacity 1.0s;}
.conts_btn_top.on:hover button{opacity:1;}