@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.set_container{
    font-family: "Noto Sans KR","Sans-serif";
    color: #252525;
    min-width: 1780px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-image: url("../../images/2026/0611/bg.jpg");
    background-repeat: no-repeat;
    height: 9060px;
    background-position: center top;
}
.set_container button{
    font-family: "Noto Sans KR","Sans-serif";
}

.top_banner{
    width: 100%;
    position: relative;
    height: 1549px;
}
.top_banner .images{
    width: 100%;
}
.top_banner .images img{
    position: absolute;
}
.top_banner .images .top_text01{
    top: 66px;
    left: calc(50% - 287px);
}
.top_banner .images .top_text02{
    top: 371px;
    left: calc(50% - 440px);
}
.top_banner .images .top_img01{
    top: 307px;
    left: calc(50% + 520px);
}
.top_banner .images .top_img02{
    top: 574px;
    left: calc(50% + 305px);
}
.top_banner .images .top_img03{
    top: 536px;
    left: calc(50% - 572px);
}
.top_banner .images .top_img04{
    top: 423px;
    left: calc(50% - 908px);
    z-index: 1;
}
.top_banner .images .top_left{
    top: 498px;
    left: -40px;
}
.top_banner .images .top_right{
    right: -40px;
    top: 196px;
}
.top_banner .images .top_text03{
    top: 765px;
    left: 50%;
    transform: translateX(-50%);
}

.top_banner .images .top_img05{
    top: 946px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .images .top_img06{
    top: 1291px;
    left: 50%;
    transform: translateX(-50%);
}
.top_banner .images .top_img07{
    top: 1004px;
    left: calc(50% + 168px);
}
.top_banner .images .top_img08{
    top: 1157px;
    left: calc(50% - 600px);
}
.top_banner .images .top_img09{
    top: 1306px;
    left: calc(50% + 247px);
}


.problem{
    margin-top: 42px;
}
.problem strong{
    display: block;
}
.problem ul{
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 28px;
    margin-top: 88px;
}
.problem ul li{
    width: 382px;
    height: 420px;
    display: flex;
    align-items: end;
}
.problem ul li img{
    margin-left: -3px;
}

.design{
    margin-top: 224px;
}
.design strong{ 
    display: block;
    margin-left: 71px;
    margin-bottom: 60px;
}
.content_box{
    background-image: url("../../images/2026/0611/design_content.png");
    background-repeat: no-repeat;
    background-position: center top;
    width: 1200px;
    height: 966px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.new_sns .content_box{
    background-image: url("../../images/2026/0611/sns_content.png");
    background-repeat: no-repeat;
    background-position: center top;
    width: 1200px;
    height: 971px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
.content_box .content_title{
    margin: 77px 0 60px;
}
.content_box ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.content_box ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 480px;
}
.new_sns .content_box ul li > img{
    margin: -41px 0 0 -38px;
}
.content_box ul li > img{
    margin: -33px 0 0 -38px;
}
.content_box ul li a{
    display: inline-block;
    margin-top: 25px;
    width: 479px;
    height: 70px;
}
.content_box ul li a img{
    margin: -4px 0 0 -6px;
}

.design_content{
    background-image: url("../../images/2026/0611/design_content2.png");
    background-repeat: no-repeat;
    background-position: center top;
    width: 1200px;
    height: 1425px;
    position: relative;
    overflow: hidden;
    margin: 60px auto 0;
}
.design_content ul{
    width: 920px;
    margin: 100px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 78px 40px;
}
.design_content ul li{
    position: relative;
}
.design_content ul li.free::after{
    content: "";
    position: absolute;
    top: -28px;
    left: -51px;
    width: 167px;
    height: 66px;
    background-image: url("../../images/2026/0611/free.png");
    background-repeat: no-repeat;
}
.design_content ul li a{}
.design_content ul li a img{}

.new_sns{}
.new_sns .sns_title{
    margin: 121px 0 17px -88px;
}
.new_sns > img{
    margin-bottom: 60px;
}
.new_sns_content{
    background-image: url("../../images/2026/0611/sns_content2.png");
    background-repeat: no-repeat;
    background-position: center top;
    width: 1200px;
    height: 1746px;
    position: relative;
    overflow: hidden;
    margin: 60px auto 0;
}
.new_sns_content ul{
    width: 860px;
    margin: 100px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 80px;
}
.new_sns_content ul li{
    position: relative;
}
.new_sns_content ul li.free::after{
    content: "";
    position: absolute;
    top: -28px;
    left: -51px;
    width: 167px;
    height: 66px;
    background-image: url("../../images/2026/0611/free.png");
    background-repeat: no-repeat;
}

.go_button{
    display: inline-block;
    width: 530px;
    height: 80px;
    margin: 120px auto 0;
}
.go_button img{
    margin: -4px 0 0 -6px;
}

@keyframes pick {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(-3deg);
    }
    75%{
        transform: rotate(3deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

@keyframes floatCenter {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-12px); }
}

@keyframes phoneFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-14px); }
}

@keyframes messageSlideUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top_banner .images .top_text01{
    animation: fadeInDown 0.9s ease both;
}

.top_banner .images .top_text02{
    animation: fadeInUp 0.9s ease 0.35s both;
}

.top_banner .images .top_left{
    animation: slideInLeft 1s ease 0.1s both;
}

.top_banner .images .top_right{
    animation: slideInRight 1s ease 0.2s both;
}

.top_banner .images .top_img01{
    animation: fadeIn 0.6s ease 0.3s both, float 3.6s ease-in-out 1s infinite;
}

.top_banner .images .top_img02{
    animation: fadeIn 0.6s ease 0.5s both, float 4.2s ease-in-out 1.4s infinite;
}

.top_banner .images .top_img03{
    animation: fadeIn 0.6s ease 0.7s both, float 3.9s ease-in-out 0.8s infinite;
}

.top_banner .images .top_img04{
    animation: fadeIn 0.6s ease 0.6s both
}

.top_banner .images .top_text03,
.top_banner .images .top_img05,
.top_banner .images .top_img06,
.top_banner .images .top_img07,
.top_banner .images .top_img08,
.top_banner .images .top_img09{
    opacity: 0;
}

.top_banner .images .top_text03.is-visible{
    animation: fadeIn 0.8s ease both;
}

.top_banner .images .top_img05.is-visible{
    animation: fadeIn 0.6s ease both;
}

.top_banner .images .top_img06.is-visible{
    animation: fadeIn 0.7s ease both;
}

.top_banner .images .top_img07.is-visible{
    animation: messageSlideUp 0.5s ease forwards;
}

.top_banner .images .top_img08.is-visible{
    animation: messageSlideUp 0.5s ease forwards;
}

.top_banner .images .top_img09.is-visible{
    animation: messageSlideUp 0.5s ease forwards;
}

.design_content ul li a img,
.new_sns_content ul li a img{
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.design_content ul li a:hover img,
.new_sns_content ul li a:hover img{
    transform: translateY(-8px);
    opacity: 0.9;
}

.content_box ul li a,
.new_sns .content_box ul li a{
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.content_box ul li a:hover,
.new_sns .content_box ul li a:hover{
    opacity: 0.85;
    transform: translateY(-3px) scale(1.02);
}

.go_button{
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.go_button:hover{
    opacity: 0.85;
    transform: translateY(-4px);
}
.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;}