@charset "utf-8";
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
/*Reset*/
*, *:after, *:before{margin:0; padding:0; box-sizing: border-box; word-break:keep-all;}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, strong, i, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, figure, figcaption, footer, header,
section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: 'Paperozi', sans-serif;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, main, nav, section, samp, cite {display: block;}
ul, ol {list-style: none;}
table {width:100%; border-collapse: collapse; border-spacing: 0; table-layout:fixed;}
a{color: inherit; text-decoration: none; cursor:pointer;}
em, i{font-style:normal;}
input, select, textarea{-webkit-border-radius: 0; padding:3px 5px; vertical-align:middle; border: 1px solid #c2c2c2; font-family:inherit; outline:0;}
button{border:0; outline:0;}
h1, h2, h3, h4, h5, h6, h7{clear:both; font-weight:normal;}
img {vertical-align:middle; border:0}
html{width:100%; height:100%; font-size:10px;}
body,input,button{font-family: 'pplog', sans-serif; font-weight:400; font-size:1.4rem; color:#272D30; letter-spacing: -0.03em; overflow-x:hidden;}
.hidden{position:absolute; width:0px; height:0px; overflow:hidden;}


body{
    background:#d5d6d7;
    height:100%;
    position:relative;;
}
.content{
    display:flex;
    flex-direction: column;
    max-width:1920px;
    margin:0 auto;
    background:#fff;
}
.mainVisu{
    position:relative;
    width:100%;
    aspect-ratio:1920/925;
    background:url('../image/main_visual_pc.png') no-repeat center center;
    background-size:cover;
}

a.btn{
    position:fixed;
    width:100%;
    bottom:0px;
    font-size:0px;
    aspect-ratio:1920/123;
    background:url('../image/button_pc.svg') no-repeat center center;
    background-size:cover;
    z-index:3;
}
.mainExp{
    display:flex;
    flex-direction: column;
    padding-top:60px;
    align-items: center;
}

.mainExp strong{
    font-size:40px;
    font-weight:400;
    color:#C40051;
    margin-bottom:12px;
}

.mainExp h2{
    font-size:0px;
    display:block;
    width:900px;
    height:140px;
    background:url("../image/big_font.png")center center no-repeat;
    background-size:contain;
    margin-bottom:40px;
}

.mainExp p{
    font-size:26px;
    color:#555;
    font-weight:500;
    margin-bottom:50px;
    padding:12px 20px;
    border-radius:100px;
    border:1px solid #DFDFDF;

}

.mainCont{
    display:flex;
    align-items: center;
    justify-content: space-between;
    max-width:1440px;
    margin:0 auto;
    width:100%;
}
.mainCont ul, .mainCont ol{
    display:flex;
    flex-direction: column;
}
.mainCont ul{
    gap:32px 0px;
}
.mainCont ol{
    gap:20px 0px;
}
.mainCont ul li,.mainCont ol li{
    display:flex;
    align-items: center;

}
.mainCont ul li{
    font-size:24px;
    color:#111;
    font-weight:400;
    align-items: center
}
.mainCont ul > li > span{
    font-size:20px;
    color:#c40051;
    font-weight:500;
    display:block;
    padding: 8px 16px;
    border-radius:100px;
    border:1px solid #c40051;
    margin-right:20px;;
}
.mainCont ul > li p{
font-size:24px;
font-weight:700; 
}
.mainCont ul > li p span{
    font-weight:500; 
}
.mainCont ul > li p span i{
    color:#777676;
    font-size:18px;
    font-weight:400;

}
.mainCont ul > li:nth-last-of-type(1),
.mainCont ul > li:nth-last-of-type(2){
    align-items: start;
}

.mainCont ul > li ol{
    padding-top:8px;
}
.mainCont ul > li ol li span{
    font-weight:700;
    color:#c40051;
    margin-right:8px;
}
.mainCont .imgWrap{
    display:flex; 
    align-items: center;
    gap:0px 40px;
}
.videoArea{
    display:grid;
    width:100%;
    max-width:1440px;
    grid-template-columns: repeat(4, 1fr);
    gap:40px 24px;
    margin:60px auto;
  
}
.videoArea .videoBox{
      position:relative;
    border-radius:20px;
    padding:3px;
    background: linear-gradient(259deg, #E5E9F5 6.87%, #E5E9F5 90.4%);
    box-shadow: 0 8px 16px -4px rgba(196, 0, 81, 0.0);
    transition-duration:0.7s;
    display: grid;

}
.videoArea .videoBox:hover{
    background: linear-gradient(259deg, #0044BD 6.87%, #C40051 90.4%);
    box-shadow: 0 8px 16px -4px rgba(196, 0, 81, 0.20);
}
.videoArea .videoBox iframe{
    max-width:302px;
    aspect-ratio: 300/500;
    width:100%;;
}
.videoArea .videoBox .borderBox{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    padding:20px;
    display:flex;
    flex-direction: column;;
}
.videoArea .videoBox strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:wrap;
    font-size:20px;
    color:#111;
    font-weight:500;
    margin:20px 0px 8px;
    word-break: break-all;
    line-height:24px;
    max-height:48px;
}
.videoArea .videoBox:hover strong{
    color:#C40051;
    font-weight:700;
}
.videoArea .videoBox .borderBox > span{
    display:inline-block;
    padding:4px 12px;
    width:fit-content;
    border-radius:100px;
    font-weight:500;
    font-size:16px;
    margin-bottom:20px;
    background:#c40051;
	color: #fff;
}
.videoArea .videoBox p{
    margin-top:auto;
    display:flex;
    align-items: center;
    border-radius:8px;
    padding:12px;
    justify-content: space-between;
    background:#f9fafb;
    font-size:18px;
    color:#3f3f3f;
    font-weight:500;
}
.videoArea .videoBox p span{
    font-size:16px;
    color:#c40051;
    font-weight:700;
}

.pcHidden{display:none;}

@media screen and (max-width:1024px){
    .pcHidden{display:inline;}
    .mainVisu{
        aspect-ratio: 375/462;
        background:url("../image/main_visual_m.svg")center center no-repeat; background-size:100%;
    }
    a.btn{
        aspect-ratio: 375/99;
        width:100%;
        background:url("../image/button_m.svg")center center no-repeat; background-size:100%;
    }
    .mainExp{padding-top:30px;}
    .mainExp strong{
        font-size:18px;
        text-align:center;
        margin-bottom:10px;
    }
    .mainExp h2{margin-bottom:8px; width:80vw; aspect-ratio: 330/52; height:auto; background:url("../image/big_font_m.svg")center center no-repeat; background-size:contain; ;}
    .mainExp p{
        margin-bottom:36px;
        font-size:16px;
        padding: 8px 12px;
    }
    .mainCont{flex-direction: column; max-width:100%; padding:0px 5vw;}
   .mainCont ul{gap:16px 0px; width:100%;}
    .mainCont ul > li{flex-direction: column; align-items: start; font-size:16px;}
    .mainCont ul > li > span{font-size:14px; padding:4px 10px;}
    .mainCont ul > li p{margin-top:12px; font-size:16px;}
    .mainCont ul li ol li{font-size:16px; align-items: start;}
    .mainCont .imgWrap{gap:0px 3vw; margin-top:20px;}

    .videoArea{max-width:100%; grid-template-columns: repeat(1,1fr); padding:0px 5vw; gap:18px 0px;}
    .videoArea .videoBox iframe{width:100%; aspect-ratio: unset; max-width:none; min-height:173px; aspect-ratio: 311/173;}
    .videoArea .videoBox strong{margin:12px 0px 4px; font-size:16px;}
    .videoArea .videoBox .borderBox > span{font-size:13px; padding:2px 8px; margin-bottom:12px;}
    .videoArea .videoBox p{font-size:14px; padding:8px;}
    .videoArea .videoBox p span{font-size:16px;}
    .mainCont ul > li p span i{font-size:14px;}
} 

/* animation*/
.mainVisu,.mainExp,.videoArea{
    position: relative;
    top:-50px;
    transition-duration:0.4s;
    opacity:0;
}
.mainVisu.on,.mainExp.on,.videoArea.on{
    top:0px;
    opacity:1;
}

.mainCont ul{
    position: relative;
    left:-50px;
    transition-duration:0.4s;
    opacity:0;
}
.mainCont .imgWrap{
    position: relative;
    left:50px;
    transition-duration:0.4s;
    opacity:0;
}
.mainCont .imgWrap img{
    flex:1;
    max-width:40vw;
}
.mainCont.on .imgWrap,
.mainCont.on ul{
    position: relative;
    left:0px;
    opacity:1;
}