@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

body{
    font-family: 'Noto Sans KR', sans-serif;
}

.container{
    width:1400px;
    margin:0 auto;
}

.container-bg{
    background:rgb(245, 247, 255);
}

h1.title{
    font-size: 40px;
    font-weight: bold;
    padding:30px 0px 15px 0px;
    letter-spacing:20px;
    text-align:center;
    line-height:1.2;
}

#title-wrap{
    width:100%;
    overflow:visible;
    position: relative;
    /*
    position:sticky;
    top:0;
    */
}

.title-sticky-wrap{
    position:sticky;
    top:0;
}

#title-wrap > div.title-wrap-bg{
    background:linear-gradient(-47.0768321389659deg, #fcebef 0%, rgb(244, 237, 255) 100%);
    height:900px;
    overflow:hidden;
    position:absolute;
    width:100%;
    top:0;
    border-radius:100px;
    z-index:-1;
}

#title-wrap  div.title-wrap-bg-1{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(252, 252, 255) 52%);
    flex: none;
    inset: -9px 0 0;
    overflow: hidden;
    position: absolute;
}

#title-wrap  div.title-wrap-bg-2{
    background: radial-gradient(53% 80.08000000000001% at 50% 69.5%, #fcebef 0%, rgba(252, 252, 255, 0) 100%);
    bottom: 0;
    flex: none;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -9px;
    width: 100%;
}

a, a:visited, a:active, a:hover{
    text-decoration:none;
    color:inherit;
}


#title-wrap ul{
    display:flex;
    justify-content: center;
    padding-top:20px;
    padding-bottom:20px;
    gap:10px;
}

#title-wrap ul li{
    font-size:20px;
    font-weight:400;
}

#title-wrap ul li.active{
    font-weight:800;
}

div.item-wrap{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:60px;
}

div.item-divider{
    width:100%;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 40px;
    height: 50vh;
    min-height: 440px;
    max-width: 1200px;
    /*position: sticky;*/
}

div.item{
    border-radius: 40px;
    /*
    box-shadow: 0 .6021873017743928px 1.8065619053231785px -1.25px #0000002e, 0 2.288533303243457px 6.8655999097303715px -2.5px #00000029, 0 10px 30px -3.75px #00000010;
    */
    justify-content: flex-start;
    overflow: visible;
    padding: 32px 40px;
    width: calc(50% - 30px);
    will-change: transform;
    z-index: 1;
    display:flex;
}

.item-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.item-right img{
    max-width:80%;
    max-height:80%;
    object-fit:cover;
    border-radius:20px;
}

div.item > div:first-child{
    flex: 1 1 0%;
}

div.item > div:last-child{
    flex: 1 1 0%;
}

div.item.itembg1{
    background-color:rgb(252, 235, 239);
}
div.item.itembg2{
    background-color: rgb(244, 237, 255);
}
div.item.itembg3{
    background-color: rgb(221, 245, 255);
}
div.item.itembg4{
    background-color: rgb(230, 255, 235);
}
div.item.itembg5{
    background-color: rgb(255, 253, 230);
}
div.item.itembg6{
    background-color: rgb(255, 229, 204);
}
div.item.itembg7{
    background-color: rgb(204, 255, 229);
}
div.item.itembg8{
    background-color: rgb(255, 218, 185);
}

div.item > div.item-left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

div.item > div.item-left > p{
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
    color:rgb(20, 5, 51);
    letter-spacing:2px;
}

div.item > div.item-left > h3{
    color:rgb(20, 5, 51);
    font-size: 2.5rem;
    margin-bottom:30px;
}

div.item > div.item-left > h2{
    color:rgb(20, 5, 51);
    font-size: 1.8rem;
    margin-bottom:30px;
    font-weight:800;
}

div.item > div.item-left > a{
    background:rgb(20, 5, 51);
    border-radius:50px;
    color:#FFF;
    padding:8px 15px;
    font-size:1.2rem;
}

footer{
    background-color: rgb(244, 237, 255);
    margin-top:50px;
    padding:20px 0px;
    border-radius:20px;
}

footer p{
    text-align:center;
    padding:20px 0px;
    font-size:1.2rem;
    color:rgb(20, 5, 51);
    
}

#content-title-wrap > p{
    font-size:0.9rem;
    font-weight:600;
    padding:20px 0px;
    color:rgb(20, 5, 51);
    letter-spacing:3px;
}

#content-title-wrap > h2{
    font-size:2.5rem;
    font-weight:800;
    padding:20px 0px;
    color:rgb(20, 5, 51);
    letter-spacing:3px;
}

#content-title-wrap ul{
    margin-top:50px;
    display:flex;
    justify-content: space-between;
}

#content-title-wrap ul p{
    font-size:1.2rem;
    font-weight:600;
    padding:20px 0px;
    color:rgb(20, 5, 51);
    letter-spacing:3px;
}

#content-title-wrap ul h3{
    font-size:2rem;
    font-weight:800;
    padding:20px 0px;
    color:rgb(20, 5, 51);
    letter-spacing:3px;
}

#content_content{
    font-size:1.2rem;
    line-height:1.25;
    color:rgb(20, 5, 51);
    padding:80px 0px;
}

.thumb_s{
    width:calc(50% - 10px);
}

.thum_s img{
    max-width:100%;
}

#content_image_wrap{
    display:flex;
    justify-content:center;
    padding:20px 0px;
    gap:10px;
}