/*---CSS RESET---*/
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: local('Pretendard Variable'), url('/font/PretendardVariable.woff2') format('font-woff2-variations');
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('href=https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@400;700&display=swap');


*{margin: 0;padding: 0;font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;color: inherit;text-decoration: inherit;box-sizing: border-box;}

html, body{text-size-adjust: none;
    -webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none; 
    -ms-text-size-adjust: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{font-family: 'Pretendard Variable', Pretendard, sans-serif;font-size:16px;font-weight:300;font-style: normal;text-decoration: none;color: #222;}
li{list-style: none;}
table{border-spacing: 0;border-collapse: collapse;}
input, select, textarea, button{box-sizing: border-box;}
button{background: none;border: none;cursor: pointer;outline: none;}

/*영문 폰트 변경*/
.j_eng{font-family: 'Inter', sans-serif;}

.intro_wrap{
	position: fixed;
    z-index: 99;
    width: 100%;
	left:0; 
	top:0;
	height:100vh;
}



/*header*/

#ys_header .ys_h{
    position: fixed;
    left: 0;
    right: 0;
    width: 96%;
    max-width: 1680px;
    margin: 0 auto;
    height: 90px;
    line-height: 90px;
    z-index: 10;
}

/*content*/
#ys_main .ys_inner{
    width: 100%;
    display: flex;
}

#ys_main .ys_inner .content_left{
    background: url(/img/intro/b_img_left.png) no-repeat 50% center / cover;
    height: 100vh;
    width: 50%;
}

#ys_main .ys_inner .content_right{
    background: url(/img/intro/b_img_right.png) no-repeat 50% center / cover;
    height: 100vh;
    width: 50%;
}

#ys_main .ys_inner .c_txt{
    width: 75%;
    height: 100%;
    margin: 0 auto;
    padding-top: 290px;
    position: relative;
}

#ys_main .ys_inner .c_txt .content_title span{
    color: #12b3ea;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing:10px
}

#ys_main .ys_inner .content_right .c_txt span{
    color: #ffb700;
}

#ys_main .ys_inner .c_txt .content_title p{
    margin-top: 20px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.3em;
}

#ys_main .ys_inner .c_arrow_left{
    position: absolute;
    bottom: 200px;
    right: 0;
}

#ys_main .ys_inner .c_arrow_left a{
	display: block;
}

#ys_main .ys_inner .c_arrow_left span{
    margin-right: 40px;
    color: #12b3ea;
    font-size: 2.188rem;
    font-weight: 600;
}

#ys_main .ys_inner .c_arrow_left i{
    position: relative;
}

#ys_main .ys_inner .c_arrow_left i:after{
    content: '';
    position: absolute;
    right: -20px;
    bottom: -15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 10;
    background:rgba(255, 255, 255, .2);;
}




@media screen and (max-width:1480px){
    #ys_header .ys_h{width: 87%;}
}

@media screen and (max-width:1395px){
	#ys_main .ys_inner .c_txt .content_title p{word-break: keep-all;}
}

@media screen and (max-width:1090px){
	#ys_main .ys_inner .c_txt .content_title p{font-size: 1.75rem;}
}

@media screen and (max-width:1080px){
    #ys_main .ys_inner .c_txt .content_title p{font-size: 1.75rem;}
    #ys_main .ys_inner .c_arrow_left span{font-size: 1.75rem; margin-right: 20px;}
}

@media screen and (max-width:977px){
	#ys_main .ys_inner .c_txt .content_title p{word-break: keep-all;}
}

@media screen and (max-width:760px){
	#ys_main .ys_inner .c_txt .content_title p{font-size: 26px;}
}

@media screen and (max-width:763px){
	#ys_main .ys_inner .c_txt .content_title p br{display: none;}
}

@media screen and (max-width:720px){
    html, body{font-size: 16px;}

    #ys_header .ys_h img{width: 120px;}

    #ys_main .ys_inner{flex-wrap: wrap; height: 100vh;}
    #ys_main .ys_inner .content_left {width: 100%; height: 50%;}
    #ys_main .ys_inner .content_right{width: 100%; height: 50%;}
    #ys_main .ys_inner .c_txt{text-align: center; padding-top: 120px;}
    #ys_main .ys_inner .c_arrow_left{bottom: 60px; right: 50%; transform: translateX(50%); width: 100%;}

    #ys_main .ys_inner .c_arrow_left i img{width: 55px;}
    #ys_main .ys_inner .c_arrow_left i:after{bottom:-12px; width: 50px; height: 50px;}

	#ys_main .ys_inner .c_txt .content_title p br{display: block;}
}

@media screen and (max-width:460px){
    #ys_main .ys_inner .c_txt .content_title span{font-size: 16px;}
    #ys_main .ys_inner .c_arrow_left i img{width: 35px;}
    #ys_main .ys_inner .c_arrow_left i:after{bottom: -10px;right: -15px; width: 40px; height: 40px;}
}

@media screen and (max-width:380px){
    #ys_main .ys_inner .c_txt .content_title p{font-size: 1.5rem;}
    #ys_main .ys_inner .c_arrow_left span{font-size: 1.5rem;}
}

@media screen and (max-width:327px){
	#ys_main .ys_inner .c_txt .content_title p{font-size: 18px;}
}