@charset "utf-8";

body { font-family:"SCDream"; word-break:keep-all; letter-spacing:-1px; background: url('../../images/intro/intro_bg_B_02.png') no-repeat; background-size: cover;}
.intro_wrap {width: 100%; max-width: 1400px; height: 1130px; margin: 0 auto;}

/*logo*/
.intro_wrap .logo{padding: 4rem 0;}
.intro_wrap .logo2{padding: 4rem 0 1rem;}

/*title*/
.intro_wrap .title{position: relative; text-align: center; color: #fff; transition: .3s;}
.intro_wrap .title::before{content: ''; display: block;  position: absolute;bottom: -1rem; left: 50%; transform: translateX(-50%); width: 26.5rem; height: 9rem; background: url('../../images/intro/title_bg.png') no-repeat; background-size: cover;}
.intro_wrap .title span {display: block; text-shadow: 0 0 10px rgba(0, 0, 0, 0.300);}
.intro_wrap .title span.tit01 {font-size: 2.25rem; font-weight: 400;}
.intro_wrap .title span.tit02 {font-size: 2.5rem; font-weight: 700;}

/*contents*/
.intro_wrap .content {position: relative; margin: 0 auto; padding: 3rem; text-align: center; overflow: hidden;}
.intro_wrap .content.mini {padding: 2rem;}
.intro_wrap .content .con{width: 100%; max-width: 55rem; margin: 0 auto; }
.intro_wrap .content .txt_wrap , .intro_wrap .content .txt_wrap2{width: 100%; padding: 1.5rem 1.5rem 1.25rem;background: rgba(255, 255, 255, 0.8);}
.intro_wrap .content .txt_wrap ul.list { position: relative; width: 100%; max-width: 42rem; text-align: left;}
.intro_wrap .content .txt_wrap ul.list::before {content: ""; position: absolute; width: 10rem; height: 10rem; top: 50%; right: -11rem; transform: translateY(-50%); background:url(../../images/intro/img_saerok.png) no-repeat center; /*animation: updown 3s ease-in-out infinite; -webkit-animation: updown 3s ease-in-out infinite;*/ }
.intro_wrap .content .txt_wrap ul.list li{width: 100%; padding: 0.75rem 1.5rem; margin-bottom: 0.75rem; color: #333; background: #fff;  font-size: 1rem; font-weight: 500;  border-radius: 10px;}
.intro_wrap .content .txt_wrap ul.list li strong {font-weight: 700; color: #0070d9;}
.intro_wrap .content .txt_wrap ul.list li em{font-size: 1.2rem; font-weight: 700;}

.intro_wrap .content .txt_wrap2 {margin-top: 0.5rem; padding: 0.75rem; background: #333333d0;}
.intro_wrap .content .txt_wrap2 > p {color: #fff;}
.intro_wrap .content .txt_wrap2 a {color: #fff;}
.intro_wrap .content .txt_wrap2 a[class*="bu_"]:after {background-color: #f1f1f1;}


.intro_wrap .content .btn_wrap{width: 100%;}
.intro_wrap .content .btn_wrap ul{width: 100%; position: relative;}
.intro_wrap .content .btn_wrap ul li{display: inline-block;width: calc((100% - 13.5px) / 4);}
.intro_wrap .content .btn_wrap ul li a{position: relative;display: flex;justify-content: space-between;align-items: center;padding: 0.75rem 1.1rem;color: #fff;background: rgb(0, 152, 217);font-size: 0.9rem;font-weight: 500;text-align: left;box-shadow: 0 0 10px #00000030;}
.intro_wrap .content .btn_wrap ul li a i{position: relative;}
.intro_wrap .content .btn_wrap ul li a i::after{content: ""; position: absolute; width: 1.5rem; height: 1.5rem; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0);  transition: .3s;}
.intro_wrap .content .btn_wrap ul li a p.img {width: 1.5rem; height: 1.5rem;}
.intro_wrap .content .btn_wrap ul li a span{width: 100%; padding-left: 0.75rem;}
.intro_wrap .content .btn_wrap ul li:nth-child(2) a {background-color: rgb(0, 112, 217);}
.intro_wrap .content .btn_wrap ul li:nth-child(3) a {background-color: rgb(4, 61, 189);}
.intro_wrap .content .btn_wrap ul li:nth-child(4) a {background-color: rgb(3, 45, 143);}

.intro_wrap .content .btn_wrap ul.w25 {display: flex; align-items: center; justify-content: space-between;}
.intro_wrap .content .btn_wrap ul.w25 li {width: calc((100% - 10px) / 4);}

.intro_wrap .content .link_02 {margin-top: 3rem;}
.intro_wrap .content .link_02 li {position: relative; width: 19.9rem; padding: 0.75rem 1.5rem; display: inline-block; text-align: center; color: #fff;font-size: 1rem; border: 2px solid #fff; text-align: left;}
.intro_wrap .content .link_02 li:first-child{margin-right: 1.5rem;}
.intro_wrap .content .link_02 li a {display: block;}
.intro_wrap .content .link_02 li a i {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); transition: .3s;}

/*hover*/
.intro_wrap .content .btn_wrap ul li a:hover{/* font-weight: 200; */}
.intro_wrap .content .btn_wrap ul li a:hover p.img{animation: updown 1s;}
.intro_wrap .content .btn_wrap ul li a:hover i::after{background: rgba(255, 255, 255, 0.3);}
.intro_wrap .content .link_02 li a:hover i{right: 1.3rem;}

/*copy*/
.intro_wrap .copy { font-size: 0.8rem; text-align: center; color: #fff;}
.intro_wrap .copy p {margin-bottom: 0.6rem;}

/* 25.09.10 추가 */
.intro_wrap .content .link_wrap {display: flex;}
.intro_wrap .content .link_wrap .txt_wrap2 {width:calc(100% - 13.5rem);}
.intro_wrap .content .txt_wrap2 + .ytb_link {color: #414141;display: flex;font-weight: 600; width:13.5rem; height:4rem; padding:0.8rem 1rem;background:#fff; font-size: .85rem; margin-top: .5rem; align-items: center; text-align: left; position: relative;}
.intro_wrap .content .ytb_link i {font-size:.9rem;}
.intro_wrap .content .ytb_link .ico {background:#e93052;border-radius:50%;width: 1.5rem;height: 1.5rem;color: #fff;margin-right: 0.6rem;display: flex;align-items: center;justify-content: center;}
.intro_wrap .content .ytb_link > i {position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); transition: .3s; }
.intro_wrap .content .ytb_link > i::after{content: ""; position: absolute; width: 1.5rem; height: 1.5rem; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0);  transition: .3s;}
.intro_wrap .content .ytb_link:hover > i::after{background: rgb(135 135 135 / 0.3);}



/*animation*/
@keyframes updown {
	0% { transform:translateY(0%); -webkit-transform:translateY(0%); }
	50% { transform:translateY(-15%); -webkit-transform:translateY(-15%); }
	100% { transform:translateY(0%); -webkit-transform:translateY(0%); }
}
@-webkit-keyframes updown {
    0% { transform:translateY(0%); -webkit-transform:translateY(0%); }
	50% { transform:translateY(-15%); -webkit-transform:translateY(-15%); }
	100% { transform:translateY(0%); -webkit-transform:translateY(0%); }
}

@media(max-width: 1440px){
    .intro_wrap{width: 90%; height: auto;}
    .intro_wrap .content {padding:2rem 0}
    .intro_wrap .copy{margin-bottom: 2rem;}
}


@media (max-width:1280px){ 
    .intro_wrap .content .link_02 li {width: calc((100% - 2rem) / 2);}
    
}

@media (max-width:1200px){ 
    .intro_wrap .content .txt_wrap ul.list{max-width: none;}
    .intro_wrap .content .txt_wrap ul.list::before{right: 0;}
    .intro_wrap .content .btn_wrap ul.w25 {flex-flow: wrap;}
    .intro_wrap .content .btn_wrap ul.w25 li {width: 50%;}

    /* 25.09.10 추가 */
    .intro_wrap .content .link_wrap .txt_wrap2 {width:calc(100% - 11.5rem);}
    .intro_wrap .content .txt_wrap2 + .ytb_link {height: auto; width:11.5rem;}
}


@media (max-width:1024px){
    .intro_wrap .content {padding:1.5rem 0}
    .intro_wrap .content .link_02{margin-top: 1.5rem;}
    .intro_wrap .content .link_02 li{display: block; width: 100%; margin-bottom: 1.5rem; margin-top: 0;}
    .intro_wrap .content .link_02 li:last-child{margin-bottom: 0;}

 }
   
 @media (min-width:841px) and (max-width:840px){ 
    .intro_wrap .content .btn_wrap ul li{width: calc((100% - 8px) / 3);}
 }

 @media (max-width:840px){ 
    .intro_wrap .content .btn_wrap ul li{display: block; width: 100%;}
    .intro_wrap .content .txt_wrap ul.list::before{width: 6rem;height: 6rem; top:auto; bottom: -5rem; transform: translateY(0); background-size: cover;}
    .intro_wrap .content .link_02 li a i {right: 1rem;}
    .intro_wrap .content .link_02 li a:hover i{right: 0.75rem;}
 }
   
@media (max-width:768px){ 
    .intro_wrap .title span.tit01 {font-size: 2rem;}
    .intro_wrap .title span.tit02 {font-size: 2.25rem;}
    /* 25.09.10 추가 */
    .intro_wrap .content .link_wrap {flex-direction: column;}
    .intro_wrap .content .link_wrap .txt_wrap2 {width:100%;}
    .intro_wrap .content .txt_wrap2 + .ytb_link {width:100%; margin-top: 0;}

}
@media (max-width:580px){ 
    .intro_wrap .logo{padding: 2rem 0 1rem 0; text-align: center;}
    .intro_wrap .title span.tit01 {font-size: 1.5rem;}
    .intro_wrap .title span.tit02 {font-size: 1.75rem;}
    .intro_wrap .title::before{width: 15rem; height: 5rem; bottom: 50%; transform: translate(-50%, 50%);}
    .intro_wrap .content .btn_wrap ul.w25 li {width: 100%;}
    .intro_wrap .content .txt_wrap2 a[class*="bu_"] {word-break: break-all;}
    .intro_wrap .content .txt_wrap2 a[class*="bu_"]:after {display: none;}
} 

@media (max-width:480px){ 

    .intro_wrap .title span.tit01 {font-size: 1.25rem;}
    .intro_wrap .title span.tit02 {font-size: 1.5rem;}

    .intro_wrap .content .txt_wrap{padding: 1rem 1rem 0.75rem;}
    .intro_wrap .content .txt_wrap ul.list li{padding: 0.75rem 0.75rem; font-size: 0.9rem;}
    .intro_wrap .content .txt_wrap ul.list li em{font-size: 1rem;}

    .intro_wrap .content .link_02 li{padding: 0.75rem 2.75rem 0.75rem 1rem; font-size: 0.8rem;}

} 

@media (max-width:320px){ 

    .intro_wrap .title span.tit01 {font-size: 1rem;}
    .intro_wrap .title span.tit02 {font-size: 1.25rem;}

    /* 25.09.10 추가 */
    .intro_wrap .content .ytb_link .ico {margin-right: .25rem;}
}