@font-face {
    font-family: 'scdream';
    font-weight: 100;
    font-style: normal;
    src: url(/font/SCDream1.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 200;
    font-style: normal;
    src: url(/font/SCDream2.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 300;
    font-style: normal;
    src: url(/font/SCDream3.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 400;
    font-style: normal;
    src: url(/font/SCDream4.woff) format('woff');
}

@font-face {
    font-family: 'scdream';
    font-weight: 500;
    font-style: normal;
    src: url(/font/SCDream5.woff) format('woff');
}@font-face {
    font-family: 'scdream';
    font-weight: 600;
    font-style: normal;
    src: url(/font/SCDream6.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 700;
    font-style: normal;
    src: url(/font/SCDream7.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 800;
    font-style: normal;
    src: url(/font/SCDream8.woff) format('woff');
}
@font-face {
    font-family: 'scdream';
    font-weight: 900;
    font-style: normal;
    src: url(/font/SCDream9.woff) format('woff');
}


html {
    font-size: 14px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'scdream' !important;
    letter-spacing: 0px;
}

body {
    font-family: 'scdream' !important;
    font-weight:400;
    font-size: 14px;
    letter-spacing: 0px;
}

.container-full{width:100%;}
.container {
    width:1440px;
    margin-right: auto;
    margin-left: auto;
}



#intro{width:100%; height:100vh; display: flex; justify-content: center; align-items: center;}
#intro .intro-area{width:35%; display: flex; flex-direction: column;}
@media (max-width: 1400px) {
    #intro .intro-area{width:45%;}
}
@media (max-width: 1000px) {
    #intro .intro-area{width:55%;}
}
#intro .intro-area h4{font-size: 1.8rem; text-align: center; letter-spacing: 0px; font-weight: 400; margin-bottom:40px;}
#intro .intro-area h4 bold{font-weight: 700;}
#intro .intro-area .intro-box{display: flex; flex-direction: row; justify-content: space-between; width:100%;}

#intro .intro-area .intro-box a{width:48%;  display: inline-block; text-decoration: none; color:#fff;}
#intro .intro-area .intro-box a .box{min-height:360px; display: flex; flex-direction: column; justify-content: space-between;}
#intro .intro-area .intro-box .box-hostc{background-color:#009FD7 ;}
#intro .intro-area .intro-box .box-sanup{background-color:#2BC9A5 ;}
#intro .intro-area .intro-box .box-sanup h2{font-size: 2.4rem;  font-weight: 500;padding: 30px 20px;}
/* #intro .intro-area .intro-box .box-hostc h2{font-size: 2.7rem;  font-weight: 100;}
#intro .intro-area .intro-box .box-hostc h5{font-size: 1.2rem;  font-weight: 500;} */

#intro .intro-area .intro-box .box-hostc .box-hostc-top{padding: 30px 20px; min-height:185px;}
#intro .intro-area .intro-box .box-hostc .box-hostc-area{display: flex; flex-direction: row; }
#intro .intro-area .intro-box .box-hostc .box-hostc-area p{margin: 0 0 10px 0; color: #fff;}
#intro .intro-area .intro-box .box-hostc .box-hostc-area .hostc-area-left{width:50%; overflow: hidden; position: relative;}
#intro .intro-area .intro-box .box-hostc .box-hostc-area .hostc-area-left img{width:100%; position: relative; left:-30px; bottom:-30%;}
#intro .intro-area .intro-box .box-hostc .box-hostc-area .hostc-area-right{width:50%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
#intro .intro-area .intro-box .box-hostc .box-hostc-area .hostc-area-right img{width:60%;}

#intro .intro-area .intro-box .box-sanup h2{font-size: 2.7rem;  font-weight: 100;}
#intro .intro-area .intro-box .box-sanup h5{font-size: 1.2rem;  font-weight: 500;padding-left: 20px;}

/* #intro .intro-area .intro-box .box-sanup h2{font-size: 2.4rem;  font-weight: 500;padding: 30px 20px;} */
#intro .intro-area .intro-box .box-sanup .box-sanup-area{display: flex; flex-direction: row; }
#intro .intro-area .intro-box .box-sanup .box-sanup-area p{margin: 0 0 10px 0;  color: #fff;}
#intro .intro-area .intro-box .box-sanup .box-sanup-area .sanup-area-left{width:50%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
#intro .intro-area .intro-box .box-sanup .box-sanup-area .sanup-area-left img{width:60%;}
#intro .intro-area .intro-box .box-sanup .box-sanup-area .sanup-area-right{width:50%; position: relative; overflow: hidden;}
#intro .intro-area .intro-box .box-sanup .box-sanup-area .sanup-area-right img{width:100%; position: relative; right:-30px; bottom:-30px;}


/* #intro .intro-area .intro-box .box-sanup{background-image: url('/img/intro_ship_icon.png'); background-repeat: no-repeat; overflow: hidden; background-position: right -20px bottom 0px;} */


#intro .intro-area .bottom-area{display: block; text-align: center; margin-top: 50px;}
#intro .intro-area .bottom-area img{width:60px; height:auto;}



/*==========================================================*/
#intro-new{width: 100%; height: 100vh; background-image:url('/img/intro_bg3.png'); background-position: right bottom; background-repeat: no-repeat;}
#intro-new .intro-top-logo{display: flex;  justify-content: flex-end;  padding: 50px;}
#intro-new .intro-top-logo img{height: 28px;  width: auto;}
#intro-new .intro-area{display: flex;  justify-content: center;  flex-direction: column;  align-items: center;  margin-top: 100px;}
#intro-new .intro-area .intro-area-top img{height: 50px;}
#intro-new .intro-area .intro-box{display: flex;  margin-top: 50px; justify-content: center;}


#intro-new .intro-area .intro-box a .box-sanup h2{color: #0C205C; font-weight: 600; font-size: 1.8rem;  display: inline-block;}
#intro-new .intro-area .intro-box a .box-hostc h2{color:#0C205C; font-weight:600;  font-size: 1.8rem;  display: inline-block; width:280px; text-align: left;}
#intro-new .intro-area .intro-area-bottom{width:100%; text-align: center; margin-top:40px; font-size: 1.2rem; color:#363636;}
#intro-new .intro-area .intro-area-bottom img{width:24px; margin-right:10px;padding: 0 0 4px 0;}


.text-outline {   
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000; /* 테두리 색상 */
    -webkit-text-stroke: 1px black; /* 글자 테두리 */
   
}




@media screen and (min-width: 541px){
    
    #intro-new .intro-area .intro-box{flex-direction: row;}
    #intro-new .intro-area .intro-box a{width:500px; height:305px; display: inline-block; margin:0 10px; text-decoration: none; color: black;  transition: all 0.8s ease; backdrop-filter: blur(0px); border-radius: 20px;}
    /* #intro-new .intro-area .intro-box a:hover{ backdrop-filter: blur(10px);  transform: translateY(-10px);   box-shadow: 0 10px 30px rgba(247, 0, 0, 0.2); } */

    #intro-new .intro-area .intro-box a .box-sanup{height:305px; background-image: url('/img/intro_sanup_bg.png'); padding: 60px 40px;  text-align: center;  }
    #intro-new .intro-area .intro-box a .box-sanup:hover{ backdrop-filter: blur(10px);  transform: translateY(-10px);   box-shadow: 0 10px 30px rgba(247, 0, 0, 0.2); border-radius: 20px;}

    #intro-new .intro-area .intro-box a .box-hostc{height:305px; background-image: url('/img/intro_hostc_bg.png'); padding: 60px 40px;  text-align: center;}
    #intro-new .intro-area .intro-box a .box-hostc:hover{ backdrop-filter: blur(10px);  transform: translateY(-10px);   box-shadow: 0 10px 30px rgba(4, 0, 247, 0.2); border-radius: 20px;}
}


@media screen and (max-width: 540px){

    #intro-new .intro-area .intro-box a .box-sanup h2{color: #0C205C; font-weight: 600; font-size: 1.5rem;  display: inline-block;}
    #intro-new .intro-area .intro-box a .box-hostc h2{color:#0C205C; font-weight:600;  font-size: 1.5rem;  display: inline-block; width:280px; text-align: left;}
}