:root {
    --tostada : 'Tostada';
    --pretendard: 'Pretendard';
    --color01 : #fff;
    --color02 : #000;
    --notosans : 'Noto Sans KR', sans-serif;
    --poppins : 'Poppins', sans-serif;
}

html,body {}

/* 세팅 */
.__white .wrap {margin: 0 auto;}
.__white .wrap[max="1920"] {max-width: 1920px;}
.__white .wrap[max="1500"] {max-width: 1500px;}
.__white .wrap[max="1215"] {max-width: 1215px;}
.__white .wrap[max="1610"] {max-width: 1610px;}

/* 기본설정 */
.__white {background: var(--color01); overflow: hidden;}

/* 스타일 */
.__white .s01 {height: 100vh; background: var(--color02); position: relative;}
.__white .s01 .wrap { display: flex; align-items: center; height: 100%; width: 100%; position: relative; flex-direction: column; z-index: 2; justify-content: center;}

.__white .s01 .logo {position: absolute; top: 50px;}

.__white .s01 h2 {font-size: 10.9375vw; font-family: var(--tostada); color: var(--color01);}
.__white .s01 h2 span {display: block;}
.__white .s01 h2 span:first-child {padding-right: 25.2604vw;}
.__white .s01 h2 span:last-child {text-align: right;}

.__white .s01 .back {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80%; max-width: 599px; z-index: -1;}
.__white .s01 .back .img {background-repeat: no-repeat; background-size: cover; background-position: center; will-change: filter;}
.__white .s01 .back .img::after {content: ''; display: block; padding-bottom: calc(483/599 * 100%);}
.__white .s01 .back p {font-size: 30px; color: var(--color01); font-weight: var(--pretendard); font-weight: bold; margin-top: 30px; text-align: center;}

.__white .s01 .lbt {font-family: var(--pretendard); position: absolute; left: 5.7292vw; bottom: 80px; color: var(--color01);}
.__white .s01 .lbt dt {font-size: 30px; font-weight: bold; line-height: normal;}
.__white .s01 .lbt dd {margin-top: 20px; font-size: 14px;}
.__white .s01 .lbt dd br {display: none;}

.__white .s01 .arrow {width: 139px; position: absolute; left: 50%; transform: translate(-50%,50%) rotate(90deg); bottom: 0; background: url(../img/Arrow.png) no-repeat center/cover;}
.__white .s01 .arrow::after {content: ''; display: block; padding-bottom: 100%;}

@media screen and (min-width:1920px) {
    .__white .s01 h2 {font-size: 210px;}
    .__white .s01 h2 span:first-child {padding-right: 485px;}
    .__white .s01 .lbt {left: 110px;}
}

@media screen and (max-width:1550px) {
    .__white .s01 h2 {font-size: 12.9375vw;}
    .__white .s01 h2 span:first-child {padding-right: 27.2604vw;}
    .__white .s01 .lbt {left: 3.7292vw;}
}

@media screen and (max-width:1280px) {
    .__white .s01 .back {width: 70%;}
}

@media screen and (max-width:768px) {

    .__white .s01 {height: calc(var(--var, 1vh) * 100);}

    .__white .s01 .logo {width: 12.5000vw;}

    .__white .s01 .back p {font-size: 3.9063vw; margin-top: 1em;}

    .__white .s01 .lbt {bottom: 10%; width: 90%; word-break: keep-all;}
    .__white .s01 .lbt dt {font-size: 4.9063vw;}
    .__white .s01 .lbt dd {line-height: normal; font-size: 12px; margin-top: 1.428571em;}
    .__white .s01 .lbt dd br {display: block;}

    .__white .s01 .arrow {width: 18.0990vw;}

}

@media screen and (max-width:480px) {
    
    .__white .s01 .logo {width: 14.5vw;}

    .__white .s01 h2 {font-size: 14.9375vw;}
    .__white .s01 h2 span:first-child {padding-right: 28.2604vw;}

    .__white .s01 .back p {font-size: 5.0063vw;}

    .__white .s01 .lbt dt {font-size: 5.9063vw;}

}


.__white .s02 {padding: 195px 0 215px; position: relative;}

.__white .s02 .wrap {position: relative; width: 90%;}

.__white .s02 dl.tit dt {position: relative;}
.__white .s02 dl.tit dt svg {width: 54.1667vw; margin-left: -18vw; margin-top: -11vw;}
/* .__white .s02 dl.tit dt .circle {width: 1.4063vw; height:1.4063vw; background: #E60012; border-radius: 1000px; position: absolute;} */
.__white .s02 dl.tit dd {margin-top: 65px; font-size: 18px; font-weight: 300; color: #3f3f3f; line-height: calc(32/18);}

.__white .s02 .p-d {position: absolute; right: -80px; top: 100px;}
.__white .s02 .p-d li {border-radius: 68px; border: 3px solid #000; display: flex; align-items: center; font-size: 1.5625vw; box-sizing: border-box; padding: 0 2.8333em;}
.__white .s02 .p-d li:first-child {width: 19.4666em; height: 4.5333em; background:var(--color02); color: var(--color01);}
.__white .s02 .p-d li:last-child {width: 13.8333em; height: 4.5333em;}

.__white .s02 .p-d li dt {font-family: var(--pretendard); letter-spacing: 0.05em; font-weight: 800; text-transform: uppercase;}
.__white .s02 .p-d li dd {font-size: 1.1458vw; font-family: var(--pretendard); letter-spacing: 0.05em; margin-top: 15px; white-space: nowrap;}

.__white .s02 .site-view {font-size: 30px; font-family: var(--pretendard); font-weight: 800; color: var(--color01); letter-spacing: 0.05em; width: 14.3em; height: 3.3333em; display: flex; align-items: center; background: var(--color02); border-radius: 100px; padding: 0 1.6666em; position: absolute; left: calc(160/1920 * 100%); bottom: 0; transform: translateY(50%); text-decoration: none;}
.__white .s02 .site-view::after {content: ''; position: absolute; right: 1.6666em; top: 50%; transform: translateY(-50%); background: var(--color01); width: 1.4em; height: 1.4em; border-radius: 1000px;}


@media screen and (min-width:1920px) {
    .__white .s02 dl.tit dt svg {width: 1040px;}
    .__white .s02 .p-d li {font-size: 30px;}
    .__white .s02 .p-d li dd {font-size: 22px;}
    .__white .s02 .site-view {font-size: 30px;}
}

@media screen and (max-width:1550px) {
    
    .__white .s02 dl.tit dt svg {width: 56.1667vw; margin-left: -19vw; margin-top: -11vw;}
    .__white .s02 dl.tit dd {font-size: 16px;}
    .__white .s02 .site-view {font-size: 25px;}

}

@media screen and (max-width:1280px) {
    
    .__white .s02 dl.tit dd {word-break: keep-all;}

    .__white .s02 .p-d li {font-size: 1.9625vw;}
    .__white .s02 .p-d li dd {font-size: 1.4458vw;}

    .__white .s02 .site-view {font-size: 20px;}

}

@media screen and (max-width:768px) {
    
    .__white .s02 {padding: 33.3906vw 0 20.9948vw;}

    .__white .s02 dl.tit dt svg {width: 85.0625vw; margin-left: -28vw; margin-top: -15vw;}

    .__white .s02 .p-d {top: 8vw; right: -10.4167vw;}
    .__white .s02 .p-d li {font-size: 2.2625vw;}
    .__white .s02 .p-d li dd {margin-top: 0.7em; font-size: 2.0458vw;}

    .__white .s02 dl.tit dd {font-size: 14px; margin-top: 3.61111em;}
    .__white .s02 dl.tit dd br {display: none;}

    .__white .s02 .site-view {font-size: 3vw;}

}

@media screen and (max-width:480px) {
    
    .__white .s02 {padding: 50.3906vw 0 20.9948vw;}

    .__white .s02 .p-d {top: 13vw;}
    .__white .s02 .p-d li {font-size: 3.2625vw;}
    .__white .s02 .p-d li dd {font-size: 3.2458vw;}

    .__white .s02 dl.tit dd {font-size: 12px; margin-top: 2.61111em;}

    .__white .s02 .site-view {font-size: 4vw;}

}


.__white .s03 {background: #e60012; padding: 195px 0 240px;}
.__white .s03 h2 {font-size: 40px; font-family: var(--pretendard); font-weight: bold; letter-spacing: 0.1em; max-width: 1350px; margin: 0 auto; text-align: right; color: var(--color01); width: 75%; }
.__white .s03 .ipad {margin-top: 10px; width: 90%;}


@media screen and (max-width:1550px) {
    .__white .s03 h2 {font-size: 35px;}
}

@media screen and (max-width:1280px) {
    .__white .s03 h2 {font-size: 30px;}
}

@media screen and (max-width:768px) {
    .__white .s03 {padding: 25.3906vw 0 31.2500vw;}
    .__white .s03 h2 {font-size: 5vw;}
}

.__white .s04 {margin-top: -3.5%;}


.__white .s05 {box-sizing: border-box; padding-top: 100px; background: url(../img/s05_bg.png) no-repeat top center/cover; }

.__white .s05 ul {display: flex; justify-content: center; padding-left: 13.2813vw; padding-right: 14.0625vw; position: relative; z-index: 2; align-items: flex-start;}
.__white .s05 ul li {flex: 0 1 auto; position: relative;}

.__white .s05 ul li:nth-of-type(1) {transform: translateY(4.1667vw);}
.__white .s05 ul li:nth-of-type(2) {margin: 0 5.2083vw;}
.__white .s05 ul li:nth-of-type(3) {transform: translateY(20.3125vw);}

@media screen and (min-width:1920px) {
    
    .__white .s05 ul {padding-left: 255px; padding-right: 270px;}
    .__white .s05 ul li:nth-of-type(1) {transform: translateY(80px);}
    .__white .s05 ul li:nth-of-type(2) {margin: 0 100px;}
    .__white .s05 ul li:nth-of-type(3) {transform: translateY(390px);}

}

@media screen and (max-width:1550px) {
    
    .__white .s05 ul {padding-left: 11.2813vw; padding-right: 12.0625vw;}

}

@media screen and (max-width:768px) {
    
    .__white .s05 {padding-top: 13.0208vw;}

    .__white .s05 ul {padding: 0 5%;}

}

.__white .s06 {position: relative; margin-top: 120px; text-align: center; padding-bottom: 17.1875vw;}
.__white .s06 .tit {text-align: left; padding-left: 7.8125vw;}
.__white .s06 .tit dt {font-size: 6.2500vw; font-weight: 900; font-family: var(--pretendard);}
.__white .s06 .tit dd {font-size: 16px; color: #707070; font-weight: 300; margin-top: 50px; line-height: calc(26/16); word-break: keep-all;}

.__white .s06 .img {width: 95%; margin: 0 auto; margin-top: -15%;}

@media screen and (min-width:1920px) {
    .__white .s06 .tit {padding-left: 150px;}
    .__white .s06 .tit dt {font-size: 120px;}
}

@media screen and (max-width:1550px) {
    .__white .s06 .tit dt {font-size: 7.25vw;}
    .__white .s06 .img {margin-top: -5%;}
}

@media screen and (max-width:1280px) {
    .__white .s06 .tit {padding-left: 3.8125vw;}
    .__white .s06 .tit dt {font-size: 8.25vw;}
    .__white .s06 .img {margin-top: 0;}
}

@media screen and (max-width:768px) {
    .__white .s06 {margin-top: 15.6250vw; padding-bottom: 30.9688vw;}
    .__white .s06 .tit {padding-left: 0; width: 90%; margin: 0 auto;}
    .__white .s06 .tit dd {font-size: 14px; margin-top: 3.125em;}
    .__white .s06 .tit dd br {display: none;}
    .__white .s06 .img {margin-top: 5%;}
}

@media screen and (max-width:480px) {
    .__white .s06 .tit dt {font-size: 9.25vw;}
    .__white .s06 .tit dd {font-size: 12px;}
    .__white .s06 .img {margin-top: 5%;}
}


.__white .s07 {position: relative; z-index: 2;}

.__white .s07::before {position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: #f9f5f5; content: ''; z-index: -1;}

.__white .s07 .logo {position: absolute; right: 6.2500vw; top: -2.0833vw; transform: translateY(-100%);}
.__white .s07 .flex {padding: 7.8125vw 0 10.6771vw; padding-left: calc(605/1920 * 100%); padding-right: 5vw;}

.__white .s07 .flex .lbx {position: absolute; left: calc(130/1920 * 100%); top: -3.6458vw; width: 27.6563vw;}
.__white .s07 .flex .rbx p {text-transform: uppercase;}
.__white .s07 .flex .rbx p:nth-of-type(1) {font-size: 3.1250vw; font-family: var(--pretendard); font-weight: 800;}
.__white .s07 .flex .rbx p:nth-of-type(2) {margin-top: 3.3854vw;}
.__white .s07 .flex .rbx p:nth-of-type(3) {font-size: 10.4167vw; font-family: var(--pretendard); margin-top: 2.8646vw; font-weight: 900;}

@media screen and (min-width:1920px){

    .__white .s07 .logo {right: 120px; top: -40px;}

    .__white .s07 .flex {padding: 150px 0 205px; padding-left: calc(605/1920 * 100%); padding-right: 5vw;}
    .__white .s07 .flex .lbx {width: 531px; top: -70px;}
    .__white .s07 .flex .rbx p:nth-of-type(1) { font-size: 60px;} 
    .__white .s07 .flex .rbx p:nth-of-type(2) {margin-top: 65px;} 
    .__white .s07 .flex .rbx p:nth-of-type(3) {font-size: 200px; margin-top: 55px;}
}

@media screen and (max-width:768px) {
    .__white .s07 .logo {width: 23.8281vw;}
}


.__white .s08 {background: #000; position: relative; padding: 8.0208vw 0 5.9896vw calc(354/1920 * 100%);}
.__white .s08 .tbx {position: relative; display: inline-block; z-index: 2;}
.__white .s08 .tbx h2 {font-size: 10.4167vw; font-weight: bold; font-family: var(--pretendard); -webkit-text-stroke: 1px #fff; text-transform: uppercase; position: relative;}
.__white .s08 .tbx h2 span {color: #fff; position: absolute; left: 0; width: 0; overflow: hidden; transform-origin: right;}
.__white .s08 .tbx h2 span.black {color: #000; -webkit-text-stroke: 1px #fff; z-index: 2;}
.__white .s08 .tbx h2 span.white {color: #fff; z-index: 1;}


.__white .s08 .colors {position: absolute; z-index: 2; border-radius: 1000px; overflow: hidden;}
.__white .s08 .colors::after {content: ''; display: block; padding-bottom: 100%;} 
.__white .s08 .colors .t {color: #fff; position: absolute; left: 1.8229vw; display: flex; align-items: center; bottom: -1.8229vw;}
.__white .s08 .colors .t h2 {font-size: 10.4167vw; font-family: var(--pretendard); font-weight: bold; color: transparent; -webkit-text-stroke: 1px #fff;}
.__white .s08 .colors .t span {margin-left: -10%; font-size: 1.0417vw; font-family: var(--poppins); font-weight: bold; position: relative;}

.__white .s08 .colors._c1 {left: calc(190/1920 * 100%);  top: 0; transform: translateY(-4.0625vw); background: #fdbd00; /*right: calc(1424/1920 * 100%);*/ z-index: 5; width: 15.8333vw;}
.__white .s08 .colors._c2 {background: #d90001; left: calc(1177/1920 * 100%); transform: translateY(-4.1146vw); top: 0; /*right: calc(478/1920 * 100%);*/ width: 13.8021vw;}
.__white .s08 .colors._c3 {background: #000e75; left: calc(1307/1920 * 100%); transform: translateY(2.7604vw); bottom: 0; /*right: calc(353/1920 * 100%);*/ width: 13.8021vw;}
.__white .s08 .colors._c4 {background:#fff; position: absolute; right: 0; bottom: 20%; z-index: -1; transform: translateX(15%); width: 13.8021vw;}




@media screen and (min-width:1920px) {
    
    .__white .s08 {padding: 154px 0 115px calc(354/1920 * 100%);}
    .__white .s08 .tbx h2 {font-size: 200px;}
    .__white .s08 .colors .t {left: 35px; bottom: -35px;}
    .__white .s08 .colors .t h2 {font-size: 200px;}
    .__white .s08 .colors .t span {font-size: 20px;}

    .__white .s08 .colors._c1 {transform: translateY(-78px); width: 304px;}
    .__white .s08 .colors._c2 {transform: translateY(-79px); width: 265px;}
    .__white .s08 .colors._c3 {transform: translateY(53px); width: 265px;}
    .__white .s08 .colors._c4 {width: 265px;}

}

@media screen and (max-width:1550px) {
    .__white .s08 {padding: 9.3750vw 0 7.0313vw calc(354/1920 * 100%);}
    .__white .s08 .tbx h2 {font-size: 10.4167vw;}
}

@media screen and (max-width:1280px) {
    .__white .s08 .tbx h2 {font-size: 12.4167vw;}
}

@media screen and (max-width:768px) {
    .__white .s08 .colors._c1 {left: 5%; right: auto;}
    .__white .s08 .colors._c2 {left: auto; right: 5%;}
}

.__white .s09 {padding: 210px 5% 220px; background: url(../img/s09_bg.png) no-repeat center/cover;}
.__white .s09 ul {display: flex;}
.__white .s09 ul li {flex: 1;}
.__white .s09 ul li .bbx {border-radius: 30px; background: #000; position: relative; width: 100%;}
.__white .s09 ul li .bbx::after {content: ''; display: block; padding-bottom: 100%;}
.__white .s09 ul li .bbx h2 {position: absolute; top: 0; transform: translateY(-50%); font-size: 2.6042vw; font-weight: bold; font-family: var(--pretendard); color: #e60012; left: 15px; text-transform: uppercase;}
.__white .s09 ul li .bbx p {position: absolute; color: var(--color01); bottom: 1.3021vw; font-size: 0.7292vw; line-height: calc(20/14); font-weight: 300; padding-left: 15%; box-sizing: border-box;}

.__white .s09 ul li {display: flex; align-items: center; justify-content: center;}
.__white .s09 ul li .arrow {width: 50%; background: url(../img/Arrow.png) no-repeat center/cover;}
.__white .s09 ul li .arrow::after {content: ''; display: block; padding-bottom: 100%;}

.__white .s09 ul li:last-child .bbx h2 {letter-spacing: -0.1em;}


@media screen and (min-width:1920px) {
    
    .__white .s09 ul li .bbx h2 {font-size: 50px;}
    .__white .s09 ul li .bbx p {bottom: 25px; font-size: 14px;}

}

@media screen and (max-width:1550px) {
    .__white .s09 ul li:nth-of-type(2n) {flex: 0.5;}
    .__white .s09 ul li .bbx p {font-size: 12px; padding-left: 10%;}
}

@media screen and (max-width:1280px) {
    .__white .s09 ul {flex-wrap: wrap; margin-top: -45px;}
    .__white .s09 ul li {flex: 0 1 40%; margin-top: 45px;}
    .__white .s09 ul li:nth-of-type(2n) {flex: 0 1 20%;}
    .__white .s09 ul li:nth-of-type(4) {display: none;}
    .__white .s09 ul li .bbx h2 {font-size: 5.6042vw;}
    .__white .s09 ul li .bbx p {font-size: 12px; padding-left: 10%; bottom: 25px; font-size: 14px;}
}

@media screen and (max-width:768px) {
    
    .__white .s09 {padding: 27.3438vw 5% 28.6458vw;}

    .__white .s09 ul li .bbx p {font-size: 12px; bottom: 10%; padding: 0 5%; word-break: keep-all;}
    .__white .s09 ul li .bbx p br {display: none;}

}

@media screen and (max-width:480px) {
    
    .__white .s09 ul li:nth-of-type(4) {display: flex;}
    .__white .s09 ul li:nth-of-type(2n) {flex: 0 1 20%; width: 50%; margin: 0 auto; transform: rotate(90deg);}
    .__white .s09 ul li {margin-top: 10vw !important;}

    .__white .s09 ul {display: block;}

    .__white .s09 ul li .bbx p {font-size: 14px;}
    .__white .s09 ul li .bbx p br {display: block;}

    .__white .s09 ul li .bbx h2 {font-size: 13.6042vw;}

}



/* 포폴 백 리스트 모음 */
.___link {text-align: center; margin-top: 60px; margin-bottom: 60px;}
.___link .box { position: relative; display: inline-block;}
.___link .arrow {position: absolute; left: -65px; top: 50%; transform: translateY(-50%);}
.___link a {text-decoration: none;}
.___link p{font-size: 28px; color: #000; font-family: 'Recoleta SemiBold';}
.___link p i {font-family: 'GT Walsheim Pro Medium'; transform: skew(-5deg); display: inline-block;}
.___link p::before {width: 50px; height: 3px; background: #000; display: block; margin: 0 auto; content: ''; margin-bottom: 28px;}

@media screen and (max-width:768px){

    .___link { margin-top: 15.63vw;}
    .___link .arrow { left: -8.46vw; top: 50%; transform: translateY(-50%); width: 5.34vw;}
    .___link p{font-size: 3.65vw; }
    .___link p::before {width: 6.51vw; height: 3px; margin-bottom: 3.65vw;}
    

}