/* BASIC css start */
body{width: auto; height: 100vh;}
.header{z-index:4;}

#content{padding-bottom:0;}


#collection .page-title{position:relative; margin-bottom:32px; padding:0 80px;}
#collection .page-title .tit-page{font-size:28px; line-height:34px; font-weight:500;}


#collection section {width: 100%; height: 100%; position: relative; min-width:1280px;}

#collection section.video{width:100%; height:calc(100vh - 245px); overflow:hidden; position:relative; background-image:url(http://justmysize.img15.kr/echo2025/echo_collection/all/bgimg_wh_pc.png); background-size:cover; background-repeat:no-repeat; background-position:center;}
#collection section.video .video_box{top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden;}
#collection section.video iframe{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 140%; min-height: 120%; transform: translate(-50%, -50%); pointer-events: none;}


#collection section.horizontal{overflow: hidden; padding-top:20vh; pointer-events: none;}

#collection section.horizontal .left_con{padding-left:clamp(80px, calc((100% - 1760px) / 2), calc((100% - 1122px) / 2)); width:35rem; z-index:2; top:0; left:0; background:#fff; height:100vh; box-sizing:content-box; position:absolute;}
#collection section.horizontal .left_con .tit{font-size:clamp(1.6rem, 28px, 1.5vw); font-weight:700; line-height:34px; color:#000; margin-bottom:24px;}
#collection section.horizontal .left_con .con{font-size:clamp(1rem, 17px, 0.938vw); font-weight:500; line-height:28px; color:#333; margin-bottom:24px;}

#collection section.horizontal .pin-wrap{display: flex; position: relative; z-index: 1; height:80vh; max-height:unset;}
#collection section.horizontal .animation-wrap {display: flex; position: relative; z-index: 1; height:80vh;}

#collection section.horizontal .item { position: relative; padding-right: 24px; /*flex: 0 0 30%;*/ box-sizing:content-box; z-index:3; pointer-events: auto;}
#collection section.horizontal .item:first-child{/*padding-left:clamp(80px, calc((100vw - 1760px) / 2), calc((100vw - 1122px) / 2));*/}
#collection section.horizontal .item:last-child{padding-right:clamp(80px, calc((100vw - 1760px) / 2), calc((100vw - 1122px) / 2));}
#collection section.horizontal .item img{height:45vh}
#collection section.horizontal .item p{padding-top:24px; font-size:clamp(1.6rem, 28px, 1.5vw); font-weight:600; line-height:34px; color:#000;}
#collection section.horizontal .item p a{display:inline-block; padding-left:16px; font-size:14px; font-weight:400; line-height:17px; color:#666}
#collection section.horizontal .item p a img{display:inline-block; padding-left:4px; width:16px; height:16px; vertical-align:middle;}

#collection section.horizontal .rollingBanner{position:absolute; top:65vh; left:50%; z-index:4; background:#fff; transform:translateX(-50%);}


#collection section.vertical{background:#F7F7F7; overflow:unset; display:flex;}
#collection section.vertical .fixed_box{width:max(calc(100% - 823px), 55%); height:calc(100vh - 67px); background-image:url(http://justmysize.img15.kr/echo2025/echo_collection/all/6_appraoch_photo.jpg); background-position:center; background-repeat:no-repeat; background-size:cover; position:sticky; top:67px; left:0;}
#collection section.vertical .fixed_box > div{position:absolute; bottom:80px; left:clamp(80px, calc((100% - 1760px) / 2), calc((100% - 1122px) / 2));}
#collection section.vertical .fixed_box > div > p{font-size:28px; font-weight:700; line-height:34px; color:#fff; margin-bottom:24px;}
#collection section.vertical .fixed_box > div > span{font-size:18px; font-weight:500; line-height:28px; color:#fff;}
#collection section.vertical .fixed_box + div{width:min(823px, 45%);}
#collection section.vertical .fixed_box + div > div{margin:0 auto; padding:168px 80px 64px 80px; width: fit-content;}
#collection section.vertical .fixed_box + div > div > .tit{font-size:28px; font-weight:700; line-height:34px; color:#000; margin-bottom:24px;}
#collection section.vertical .fixed_box + div > div > ul{padding-bottom:80px;}
#collection section.vertical .fixed_box + div > div > ul li{padding-bottom:60px;}
#collection section.vertical .fixed_box + div > div > ul li:last-child{padding-bottom:0;}
#collection section.vertical .fixed_box + div > div > ul li img{width:100%; display:block; margin-bottom:24px;}
#collection section.vertical .fixed_box + div > div > ul li p{font-size:20px; font-weight:600; line-height:20px; color:#000; padding-bottom:16px;}
#collection section.vertical .fixed_box + div > div > ul li span{font-size:18px; font-weight:500; line-height:28px; color:#666;}
#collection section.vertical .fixed_box + div > div > a{display:block; background:#000; color:#fff; font-size:16px; font-weight:500; line-height:20px; padding:16px 0; text-align:center;}
#collection section.vertical .fixed_box + div > div > a img{width:16px; height:16px; display:inline-block; margin-left:6px; transform:rotate(180deg); vertical-align: middle;}
/* BASIC css end */

