@charset "utf-8"; 
/* CSS Document */
@import "base.css";
@import "font.css";
@import "jquery-ui.css";

.SkipNav { left:0; top:0; width:100%; position: relative;    z-index: 100;}
.SkipNav a { height:0; font-size:14px; font-weight:bold; color:#fff; overflow:hidden; display:block; transition-duration: 0.2s;}
.SkipNav a:focus { height:30px; width:100%; line-height:30px; background:#333; text-align:center; }

html * {font-family: 'SCDream'; font-weight: normal;}
.Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 20px bottom 20px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 20px bottom 20px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
    background-size:340px; position:relative;}
.Wraper::before {display: block; content: ""; width:100%; height:425px; background:url(../../images/socialStat/intro/bg_star.png) no-repeat center; position:absolute; top:0; background-size:cover;
    animation-name: fadeOut; animation-duration: 2.5s; animation-iteration-count: infinite;}
@keyframes fadeOut {
    from {
        opacity: 100%;
    }
    25% {
        opacity: 65%;
    }
    50% {
        opacity: 30%;
    }
    75% {
        opacity: 65%;
    }
    to {
        opacity: 100%;
    }
}
   
header {display: flex; justify-content: center; padding-top:170px;  width:100%; max-width: 740px; margin:0 auto;}
header::before {display: block; content: ""; width:100%; max-width:740px; height:264px; background:url(../../images/socialStat/intro/title_bg.png) no-repeat center; background-size: cover;
    position:absolute; left:50%; top:15px; transform: translateX(-50%); z-index: 0;}
header h1 {z-index: 1;}
header h1 a {display: block;}
header h1 a img {height:auto;}
header a.origin {display: block; width: 88px; height:24px; position:absolute; left:30px; top:30px;}

.contents {display: flex; justify-content: center; width:100%; max-width: 1280px; margin:0 auto; margin-top:25px; z-index: 2; position:relative;}
.contents ul {display: flex;/* flex-wrap: wrap; */justify-content:center;width: 100%;}
.contents li {margin:20px;}
.contents li a {display: flex;flex-direction: column;align-items: center;width:100%;max-width: 380px;height:500px;border-radius: 23px;background:#fff;padding:30px 20px 50px 20px;font-size:16px;color:#53544f;text-align: center;position: relative;transition: all 0.2s;}
.contents li:nth-child(1) a {background:#e6f5ff url(../../images/socialStat/intro/item01_bg.png) no-repeat center;}
.contents li:nth-child(1) a span:last-of-type {text-shadow: -1px 0px #e6f5ff, 0px 1px #e6f5ff, 1px 0px #e6f5ff, 0px -1px #e6f5ff;}
.contents li:nth-child(2) a {background:#f3f5e8 url(../../images/socialStat/intro/item02_bg.png) no-repeat center;}
.contents li:nth-child(2) a span:last-of-type {text-shadow: -1px 0px #f3f5e8, 0px 1px #f3f5e8, 1px 0px #f3f5e8, 0px -1px #f3f5e8;}
.contents li:nth-child(3) a {background:#fce5c8 url(../../images/socialStat/intro/item03_bg.png) no-repeat center;}
.contents li:nth-child(3) a span:last-of-type {text-shadow: -1px 0px #fce5c8, 0px 1px #fce5c8, 1px 0px #fce5c8, 0px -1px #fce5c8;}
.contents li a span.title { display: flex; justify-content: center; align-items: center; background:linear-gradient(to right, #5d44d9, #4450d9); width:100%; max-width:280px; height:auto; min-height:55px; border-radius: 100px; font-size:20px; font-weight: bold; color:#fff; margin-bottom: 290px; }
.contents li a::before {display: block;content: "";width:100%;height: 100%;background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0 ) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);transition:all 0.2s;position:absolute;left: 0;top: 0;border-radius: 23px;}
.contents li a:hover::before,
.contents li a:focus::before {display: block; background:linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 90%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.3) 90%); }
.contents li a::after {display: flex; justify-content: center; align-items: center; content: "자세히보기"; width:0; height: 0; background:linear-gradient(to right, #5d44d9, #4450d9); 
    position:absolute; left: 50%; top: 50%; border-radius: 130px; font-size:0; color:#fff; transform: translate(-50%, -50%);  transition:all 0.2s;}
.contents li a:hover::after,
.contents li a:focus::after { font-size:18px;width:130px; height: 130px;}

/***** footer *****/ 
/***** footer *****/    
footer {display: flex; flex-direction: column; align-items: center; width:100%; padding:0 50px 30px 50px; font-size:15px; color:#fff; font-weight: 300; text-align: center;}
footer img {margin-top:50px; margin-bottom:10px; height:42px;}


.Language {position:absolute;right:30px;top:30px;color:#fff;height:24px;line-height: 22px;border:#fff solid 1px;border-radius:24px;font-size:0;opacity: 0.8;transition: all 0.2s;}
.Language::before { content:'EN'; display:flex; align-items: center; font-size:15px; margin:0 13px; font-weight:bold;}
.Language:hover { opacity:1;}

@media (max-width:1260px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 20px bottom 55px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 20px bottom 55px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:290px; padding-top:0px;}
    footer img {margin-top:60px;}
    .contents li { margin:20px 10px}
}

@media (max-width:1080px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 25px bottom 70px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 25px bottom 70px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:260px; padding-top:0px;}
    .Wraper::before {height: 410px;}
    header {padding-top: 165px;}
    header::before {height: 200px; background-size: contain; top: 30px;}
    header h1 a img {height: 55px;}
    header a.origin {width: auto; height: auto; left: 25px; top: 25px;}
    header a.origin img {height:25px;}

    .Language {right:25px;top:25px;height:25px;line-height: 22px;border-radius:25px;}

    .contents {margin-top:20px;}

    .contents li { height:auto;}
    .contents li a { height:100%; background-size:auto 40% !important; background-position:center 110px !important}
    .contents li a span.title { margin-bottom:245px}
    
   
    /***** footer *****/ 
    /***** footer *****/    
    footer {padding:0 20px 25px 20px; font-size:13px;}
    footer img {margin-top:60px; margin-bottom:7px; height:38px;}
}
@media (max-width:900px) {
    .contents ul {display:flex;flex-direction: column;}
    .contents li {margin: 20px; margin-bottom:0px;}
    .contents li a {max-width: 100%;/* height:430px; */border-radius: 21px;padding:25px 20px;font-size:16px;background-size: auto 170px !important;background-position: center 90px !important;}
    .contents li a span.title {width:100%; max-width:100%; height:auto; min-height:48px; font-size:18px; margin-bottom:200px;}
    .contents li a:focus::after {width:120px !important; height: 120px !important; border-radius: 120px !important; font-size:16px !important;}
    .contents {margin-top:5px;}
    .contents li a:focus::after {width:110px !important; height: 110px !important; border-radius: 110px !important; font-size:15px !important;}

    .contents li a::before {content:none;}
    .contents li a::after {display: flex !important;width: 100% !important;height: 45px !important;position:relative;z-index:10;font-size: 16px !important;transform: none;left: 0;top: 0;margin-top: 15px;color: #212121;background: #fff;border: #555 solid 1px;border-width: 1px 1px 2px 1px;}
}

@media (max-width:700px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 15px bottom 65px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 15px bottom 65px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:210px; padding-top:0px;}
    footer img {margin-top:60px;}
}

@media (max-width:610px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 15px bottom 65px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 15px bottom 65px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:170px; padding-top:0px;}
    .Wraper::before {height: 330px;}
    header {padding-top: 145px;}
    header::before {height: 135px; background-size: contain; top: 40px;}
    header h1 a img {height: 42px;}
    header a.origin {width: auto; height: auto; left: 20px; top: 20px;}
    header a.origin img {height:24px;}

    .Language {right:20px; top:20px; height:24px; border-radius:24px;}

    footer img {margin-top:70px;}
}

@media (max-width:500px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 15px bottom 95px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 15px bottom 95px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:135px; padding-top:0px;}
    footer img {margin-top:80px;}
}

@media (max-width:400px) {
    .Wraper {background: url(../../images/socialStat/intro/bg_person1.png) no-repeat left 15px bottom 110px, url(../../images/socialStat/intro/bg_person2.png) no-repeat right 15px bottom 110px, linear-gradient(rgba(16, 12, 73, 1), rgba(87, 56, 115, 1));
        background-size:135px; padding-top:0px;}
    .Wraper::before {height: 300px;}
    header {padding-top: 100px;}
    header::before {height: 105px; background-size: contain; top: 25px;}
    header h1 a img {height: 32px;}
    header a.origin {width: auto; height: auto; left: 15px; top: 15px;}
    header a.origin img {height:20px;}

    .Language {right:15px; top:13px; height:24px; border-radius:24px;}    

    /***** footer *****/ 
    /***** footer *****/    
    footer {padding:0 15px 20px 15px;}
}