/* BASIC css start */
body{overflow:hidden;}
.top_banner{position:fixed; top:0; left:0; transition:top 0.3s; width:100%;}
#header{position:fixed; top:32px; left:0; transition:top 0.3s; z-index:9;}
.gnb{display:none;}
#content{padding:0;}


#about{height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory;}
#about{-ms-overflow-style: none;}
#about::-webkit-scrollbar{ display:none;}

#about .panel{scroll-snap-align: start; height: 100vh; position:relative; overflow:hidden; padding-top:67px;}

#about .panel.con0{height:auto;}

#about .panel.con1{padding-top:99px; background-image:url(http://justmysize.img15.kr/echo2025/echo_brand%20about/pc/bgimg_bk_pc.png); background-repeat:no-repeat; background-size:cover; background-position:center; }
#about .panel.con1 .video_box{top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;}
#about .panel.con1 .video_box iframe{position: absolute; top: 50%; left: 50%; width:177.78vh; height: 100vh; aspect-ratio: 16 / 9; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none;}
#about .panel.con1 .txt{position:absolute; top:calc(50% + 99px); left:50%; transform:translate(-50%, -50%); text-align:center; width:100%;}
#about .panel.con1 .txt img{filter: invert(95%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(104%) contrast(105%); width:264px;}
#about .panel.con1 .txt p{margin-top:24px; font-size:22px; font-weight:400; line-height:38px; color:#fff;}

@media (min-aspect-ratio: 16/9) {
  #about .panel.con1 .video_box iframe {
    width: 100vw;
    height: 56.25vw; /* = 100vw * (9/16) */
  }
}


#about .panel.con2{background-image:url(http://justmysize.img15.kr/echo2025/echo_brand%20about/pc/2_bg.jpg); background-repeat:no-repeat; background-size:cover; background-position:center center;}
#about .panel.con2 img:first-child{position:absolute; left:80px; bottom:0; transform:translate(0px, 100%); width:calc(30% - 80px);}
#about .panel.con2 img:nth-child(2){position: absolute; right: 0; top: 0; transform:translate(0px, -100%); width:30%;}
#about .panel.con2 .txt{position:absolute; left:50%; top:calc(50% + 67px); transform:translate(-50%, -50%); opacity:0; width:30%; color:#fff;}
#about .panel.con2 .txt p{font-size:22px; font-weight:400; line-height:38px; text-align:center; color:#fff;}


#about .panel.con3{padding:180px 80px 50px 80px;}
#about .panel.con3 .top{display:flex; margin-bottom:48px;}
#about .panel.con3 .top ul{opacity:0; width:101px; padding-right:50px; box-sizing: content-box;}
#about .panel.con3 .top ul li{font-size:14px; font-weight:700; line-height:18px; color:#000;}
#about .panel.con3 .top ul li:not(:last-child){padding-bottom:60px; position:relative;}
#about .panel.con3 .top ul li:not(:last-child)::after{content:''; display:block; position:absolute; width:1px; height:20px; background:#000; bottom:20px; left:50%; transform:translateX(-50%);}
#about .panel.con3 .top .txt{opacity:0;}
#about .panel.con3 .top .txt p:nth-child(1){font-size:18px; font-weight:600; line-height:26px; color:#000;}
#about .panel.con3 .top .txt p:nth-child(2){font-size:26px; font-weight:600; line-height:36px; color:#000; margin-top:4px;}
#about .panel.con3 .top .txt p:nth-child(3){font-size:16px; font-weight:400; line-height:26px; color:#333; margin-top:20px;}
#about .panel.con3 .img_box{margin-left:151px; display:flex;}
#about .panel.con3 .img_box img{max-height:calc(100vh - 416px); margin-right:20px; opacity:0; max-width:calc((100% - 40px) / 3); width:auto;}
#about .panel.con3 .img_box img:last-child{margin-right:0}


#about .panel.con4{display:flex; background:#F6F6F6;}
#about .panel.con4 .video{width:50%; height:100%; position:relative; overflow:hidden;}
#about .panel.con4 .video iframe{ position: absolute; top: 50%; left: 50%; width:177.78vh; height: 100vh; aspect-ratio: 16 / 9; object-fit: cover;  min-height: 100%; min-width: 100%; transform: translate(-50%, -50%); pointer-events:none;}
#about .panel.con4 .video .txt{position:absolute; top:calc(50% + 67px); left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; opacity:0;}
#about .panel.con4 .video .txt span{font-size:18px; font-weight:700; line-height:26px; color:#fff;}
#about .panel.con4 .video .txt p:nth-child(2){font-size:26px; font-weight:600; line-height:26px; color:#fff; margin-top:12px;}
#about .panel.con4 .video .txt p:nth-child(3){margin-top:62px; font-size:18px; font-weight:400; line-height:30px; color:#fff;}
#about .panel.con4 > .txt{padding:36px 1rem;}
#about .panel.con4 > .txt p{font-size:16px; font-weight:400; line-height:24px; color:#333;}
#about .panel.con4 > .txt p:first-child{padding-bottom:12px;}

#about .panel.con5{display:flex; height:fit-content; justify-content: flex-end;}
#about .panel.con5 > div:first-child{width:50%; height:100vh; position:absolute; left:0; top:0; background-image:url(http://justmysize.img15.kr/echo2025/echo_brand%20about/pc/5_bg%20photo.jpg); background-position:center center; background-size:cover; background-repeat:no-repeat;}
#about .panel.con5 > div:first-child .txt{position:absolute; top:calc(50% + 67px); left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; opacity:0;}
#about .panel.con5 > div:first-child .txt span{font-size:18px; font-weight:700; line-height:26px; color:#fff;}
#about .panel.con5 > div:first-child .txt p:nth-child(2){padding-top:10px; font-size:26px; font-weight:700; line-height:38px; color:#fff;}
#about .panel.con5 > div:first-child .txt p:nth-child(3){padding-top:52px; font-size:18px; font-weight:400; line-height:30px; color:#fff;}
#about .panel.con5 > div:last-child{width:50%; height:100%; position:relative;}
#about .panel.con5 > div:last-child ul{width:fit-content; margin:0 auto; padding-top:183px; max-width:80%;}
#about .panel.con5 > div:last-child ul li{padding-bottom:100px;}
#about .panel.con5 > div:last-child ul li p:first-child{font-size:28px; font-weight:700; line-height:38px; color:#000; padding-bottom:12px}
#about .panel.con5 > div:last-child ul li p:nth-child(2){font-size:22px; font-weight:400; line-height:32px; color:#000; padding-bottom:32px;}
#about .panel.con5 > div:last-child ul li img{width:720px; max-width:100%; display:block;}

#about .panel.con6{background-image:url(http://justmysize.img15.kr/echo2025/echo_brand%20about/pc/6_bg%20photo_pc.jpg); background-position:center center; background-size:cover; background-repeat:no-repeat;}
#about .panel.con6 > div{position:absolute; top:calc(50% + 67px); left:50%; transform:translate(-50%, -50%); display:flex; justify-content: center; width:100%;}
#about .panel.con6 > div .txt{width:fit-content; max-width:50%;}
#about .panel.con6 > div .txt:first-child{padding-right:91px; position:relative;}
#about .panel.con6 > div .txt:first-child::after{content:''; display:block; position:absolute; right:0; top:0; height:100%; width:1px; background:#fff;}
#about .panel.con6 > div .txt:first-child img{width:264px; margin-bottom:71px; filter: invert(95%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(104%) contrast(105%); }
#about .panel.con6 > div .txt:first-child p{font-size:16px; font-weight:600; line-height:25px; color:#fff; position: absolute; bottom: 0; left: 0;}
#about .panel.con6 > div .txt:last-child{padding-left:90px;}
#about .panel.con6 > div .txt:last-child p{font-size:22px; font-weight:400; line-height:38px; color:#fff;}
#about .panel.con6 .txt p:nth-child(2){margin-top:56px; font-size:18px; font-weight:400; line-height:28px; color:#fff;}
#about .panel.con6 .txt p:nth-child(3){margin-top:12px; font-size:18px; font-weight:400; line-height:28px; color:#fff;}
#about .panel.con6 .txt p:nth-child(4){margin-top:56px; font-size:16px; font-weight:600; line-height:25px; color:#fff;}

#about .panel.footer{height:auto; padding-top:0;}
/* BASIC css end */