@charset "utf-8";

*{margin: 0; padding: 0;}
body {width: 100%; color:#222; font-size:16px; font-weight: 400; line-height:1.2; font-family: 'NotoSansKR', sans-serif; -webkit-text-size-adjust:none; text-size-adjust:none; background:#fff; -webkit-tap-highlight-color: transparent; overflow-x: hidden;}


.inner{position:relative; width:100%; height:100%; margin:0 auto; padding: 0 40px; box-sizing: border-box; overflow:hidden;}
.clear::after{content: ""; width: 0; height: 0; display: block; clear: both;}
.txt-hidden{position:relative; display:inline-block; width:1px; height:1px; word-break:initial; word-wrap:initial; border:0; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); z-index:-1;}

.header{height:100px;}
.logo{position:absolute; top:50%; left:40px; transform:translateY(-50%); width:100%; max-width:145px;}
.header-sns{position:absolute; top:50%; right:40px; transform:translateY(-50%);}
.header-sns li{float:left; margin-right:20px;}
.header-sns li:last-child{margin-right:0;}
.header-sns li.icon-sns{width:30px; height:30px; background-repeat:no-repeat; background-size:contain; background-position:center center;}
.header-sns li.icon-sns.kakao{background-image:url(../images/icon_kakao.png);}
.header-sns li.icon-sns.youtube{background-image:url(../images/icon_youtube.png);}
.header-sns li.icon-sns.insta{background-image:url(../images/icon_instagram.png);}
.header-sns li.icon-sns.blog{background-image:url(../images/icon_blog.png);}

.contents{position:relative; width:100%; height:calc(100vh - 100px); padding:50px; background-color:#ddd; box-sizing:border-box; overflow-y:auto;}
.jooyon-box-wrap{display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.jooyon-box{position:relative; float:left; width:calc(50% - 25px); height:100%; margin-right:50px; text-align:center; background-repeat:no-repeat; background-size:cover; background-position:center center; box-shadow:0 0 10px rgba(0,0,0,.3); border-radius:30px; transition:.3s; overflow:hidden;}
.jooyon-box:last-child{margin-right:0;}
.jooyon-box::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); transition:.3s;}
.jooyon-box:hover::before{background-color:rgba(0,0,0,.5); transition:.3s;}
.jooyon-box.company{background-image:url(../images/jooyon_bg.jpg);}
.jooyon-box.shop{background-image:url(../images/shop_bg.jpg);}

.jy-box-cont{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:60px 40px; color:#fff; background-repeat:no-repeat; background-size:cover; background-position:center center; box-sizing:border-box;}
.jy-box-cont .box-tit{font-size:50px; font-weight:700;}
.jy-box-cont .box-logo img{width:80%; max-width:400px; margin:40px auto;}
.jy-box-cont.company .box-logo img{max-width:350px;}
.jy-box-cont .box-dsc{width:95%; max-width:696px; height:144px; margin:0 auto; font-size:36px; font-weight:300; letter-spacing:-0.025em; word-break:keep-all;}
.jy-box-cont .btn-goto{width:80%; max-width:350px; height:70px; margin:40px auto 0; line-height:70px; text-align:center; font-size:28px; border:1px solid #fff; border-radius:999px; transition:.3s;}

.bottom-sns{display:none; margin-top:30px;}
.bottom-sns ul{display:flex; justify-content:center;}
.bottom-sns li{float:left; margin-right:20px;}
.bottom-sns li:last-child{margin-right:0;}
.bottom-sns li.icon-sns{width:30px; height:30px; background-repeat:no-repeat; background-size:contain; background-position:center center;}
.bottom-sns li.icon-sns.kakao{background-image:url(../images/icon_kakao.png);}
.bottom-sns li.icon-sns.youtube{background-image:url(../images/icon_youtube.png);}
.bottom-sns li.icon-sns.insta{background-image:url(../images/icon_instagram.png);}
.bottom-sns li.icon-sns.blog{background-image:url(../images/icon_blog.png);}



@media(max-width:1440px){
    .jy-box-cont .box-tit{font-size:36px;}
    .jy-box-cont .box-logo img{width:80%; max-width:350px; margin:20px auto;}
    .jy-box-cont.company .box-logo img{max-width:300px;}
    .jy-box-cont .box-dsc{font-size:28px;}
    .jy-box-cont .btn-goto{height:60px; line-height:60px;}
}


@media(max-width:1024px){
    .header{height:65px;}
    .logo{left:50%; transform:translate(-50%, -50%);}
    .logo img{max-height:50px;}
    .header-sns{display:none;}

    .contents{height:calc(100vh - 65px); padding:20px;}
    .jooyon-box-wrap{display:block; height:unset;} 
    .jooyon-box{float:none; width:100%; max-width:100%; height:320px; margin-right:0; margin-top:30px; border-radius:20px;}
    .jooyon-box:first-child{margin-top:10px;}
    .jy-box-cont{position:relative; width:100%; height:100%; padding:20px;}
    .jy-box-cont .box-tit{position:absolute; top:20%; left:240px; font-size:28px;}  
    .jy-box-cont .box-logo{position:absolute; top:25%; left:20px; width:35%; max-width:200px;}
    .jy-box-cont .box-logo img{width:100%; max-width:100%; margin:0;}
    .jy-box-cont .box-dsc{position:absolute; top:35%; left:240px; width:unset; max-width:590px; height:86px; padding-right:20px; text-align:left; font-size:24px; box-sizing:border-box;}
    .jy-box-cont .btn-goto{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:unset; font-size:20px; border-radius:20px;}
    .bottom-sns{display:block;}
}


@media(max-width:690px){
    .jooyon-box{height:280px; margin-top:20px;}
    .jooyon-box:first-child{margin-top:0;}
    .jy-box-cont .box-tit{top:22%; left:200px; font-size:22px;}
    .jy-box-cont .box-logo{width:155px;}
    .jy-box-cont .box-dsc{top:37%; left:200px; max-width:400px; height:60px; font-size:16px;}
    .jy-box-cont .btn-goto{height:45px; line-height:45px; font-size:16px; border-radius:10px;}
}


@media(max-width:500px){
    .jooyon-box{height:230px;}
    .jy-box-cont .box-tit{top:17%; left:140px; font-size:16px;}
    .jy-box-cont .box-logo{top:22%; width:100px;}
    .jy-box-cont .box-dsc{top:32%; left:140px; height:70px; font-size:14px;}
}


@media(max-width:375px){
    .jooyon-box{height:210px;}
    .mobile{display:none;}
    .jy-box-cont .box-tit{left:120px;}
    .jy-box-cont .box-logo{width:80px;}
    .jy-box-cont .box-dsc{left:120px; height:45px; font-size:12px;}
    .jy-box-cont .btn-goto{height:40px; line-height:40px;}
}