@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

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

* {outline:1px solid #f00--;}

header {width:100%;background:#fff;}
header .top-menu {border-top:1px solid #aeaeae;border-bottom:1px solid #aeaeae;color:#aeaeae;}
header .top-menu .top-left {float:left;text-align:center;}
header .top-menu .top-left li {float:left;font-size:12px;font-weight:500;padding:0 30px;line-height:40px;border-right:1px solid #aeaeae;cursor:pointer;}
header .top-menu .top-left li figure {height:40px;}
header .top-menu .top-left li figure img {height:100%;}

header .top-menu .top-right {float:right;}
header .top-menu .top-right li {float:left;font-size:12px;font-weight:400;padding:0 15px;line-height:40px;cursor:pointer;}
header .top-menu .top-right li:last-child {padding-right:30px;}


header .menu {position:relative;width:100%;color:#333;background:#fff;border-bottom:1px solid #aeaeae;display:flex;justify-content:space-between;}
header .menu.on {position:fixed;top:0;left:0;z-index:9999;}

header .menu h1 {width:15%;padding:22px 30px;float:left;}
header .menu h1 img {height:26px;cursor:pointer;}

header .menu nav {text-align:center;}
header .menu nav>ul {font-size:0;}
header .menu nav>ul>li {display:inline-block;padding:0 30px;}
header .menu nav>ul>li>a {font-family:'Roboto Condensed', sans-serif;font-size:16px;line-height:71px;}
header .menu nav>ul>li:after {content:"";display:block;width:0;height:2px;background:#333;}
header .menu nav>ul>li:hover:after {width:100%;}

header .menu .submenu {position:absolute;top:74px;left:0;width:100%;height:0;background:#fff;overflow:hidden;z-index:999;}
header .menu nav>ul>li:hover .submenu {height:350px;border-bottom:1px solid #aeaeae;}
header .menu .submenu-box {width:1000px;margin:0 auto;}
header .menu .submenu ul {float:left;width:25%;border-left:1px solid #aeaeae;margin:30px 0;}
header .menu .submenu ul:last-child {border-right:1px solid #aeaeae;}
header .menu .submenu ul li {text-align:left;}
header .menu .submenu ul li>a {font-size:14px;font-weight:400;line-height:28px;letter-spacing:-0.025em;padding-left:20px;}
header .menu .submenu .submenu-01 li>a {font-weight:600;}
header .menu .submenu .submenu-first {padding-bottom:10px;}
header .menu .submenu .submenu-first>a {font-weight:600;}

header .search {width:15%;position:relative;padding:20px 30px;}
header .search input {padding-left:40px;width:100%;height:100%;border:1px solid #aeaeae;font-size:14px;}
header .search span {position:absolute;top:50%;left:50px;transform:translateY(-50%);z-index:1;}
header .search span i {font-size:14px;line-height:30px;}

header .mopen {font-size:30px;position:absolute;top:22px;right:22px;}
header .mopen i:first-child {display:none;}
header .mopen i:last-child {display:none;}

/*메인슬라이더*/
#main {padding-top:30px;}
#main .main-slider {width:95%;margin:0 auto;}
#main .main-slider figure {width:100%;}
#main .main-slider figure img {width:100%;display:block;}
#main .main-slider figure img:nth-of-type(2) {display:none;}
#main .main-slider figure video:nth-of-type(2) {display:none;}

#main .main-slider .m-item {}
#main .main-slider .m-item div {width:100%;padding:20px 0;}
#main .main-slider .m-item div:after {content:"";display:block;clear:both;}
#main .main-slider .m-item h2 {float:left;width:50%;font-size:45px;font-weight:700;line-height:60px;text-align:left;}
#main .main-slider .m-item p {float:right;width:50%;font-size:20px;font-weight:400;line-height:30px;text-align:right;}
#main .main-slider .m-item span {float:right;display:inline-block;text-align:center;font-size:25px;font-weight:700;color:#fff;line-height:65px;padding:0 50px;background:#333;border-radius:50px;cursor:pointer;}
#main .main-slider span:hover {background:#000;}

/*featured*/
#featured {width:95%;height:100vh;margin:0 auto;padding:130px 0;color:#333;}
#featured h3 {font-family: 'Roboto Condensed', sans-serif;font-size:35px;line-height:40px;}
#featured .featured {width:80%;margin:0 auto;padding:40px 0;}
#featured .featured-tab {float:left;width:10%;}
#featured .featured-tab li {font-family: 'Roboto Condensed', sans-serif;font-size:40px;line-height:60px;color:#c2c2c2;padding:20px 0;cursor:pointer;}
#featured .featured-tab li:first-child {padding-top:0;}
#featured .featured-tab li:after {content:"";display:block;width:30%;height:2px;background:#c2c2c2;}

#featured .featured-tab li.active {color:#333;}
#featured .featured-tab li.active:after {background:#333;}

#featured .featured-con {position:relative;float:left;width:90%}
#featured .featured-con-item {}
#featured .featured-con-item h5 {font-family: 'Roboto Condensed', sans-serif;font-size:200px;line-height:180px;color:#f5f5f5;}
#featured .featured-con-item div {position:absolute;top:0;left:0;padding-top:12px;width:100%;}
#featured .featured-con-item div .t01 {font-size:18px;font-weight:400;}
#featured .featured-con-item div .t02 {font-size:30px;font-weight:700;line-height:38px;padding:10px 0;}
#featured .featured-con-item div .t03 {font-size:25px;font-weight:700;line-height:30px;padding:15px 0;}
#featured .featured-con-item div .t04 {font-size:16px;font-weight:400;line-height:26px;color:#888;}
#featured .featured-con-item figure {position:absolute;top:150px;right:-1500px;width:80%;}
#featured .featured-con-item figure img {width:100%;}

/*new releases*/
#new {width:95%;margin:0 auto;padding:130px 0;color:#333;}
#new h3 {font-family: 'Roboto Condensed', sans-serif;font-size:35px;line-height:40px;}
#new .new {width:100%;padding:40px 0 60px 0;text-align:center;}
#new .new:nth-of-type(1) {padding-top:20px;} 
#new .new figure {width:100%;}
#new .new figure img {width:100%;}
#new .new figure img:nth-child(2) {display:none;}
#new .new figure:nth-of-type(1) {}
#new .new figure:nth-of-type(2) {padding:30px 0;width:40%;margin:0 auto;}
#new .new h4 {padding:30px 0 20px 0;font-size:50px;font-weight:700;}
#new .new p {font-size:18px;font-weight:400;line-height:26px;padding-bottom:25px;}
#new .new span {display:inline-block;font-size:18px;font-weight:500;line-height:50px;color:#fff;background:#333;border-radius:50px;padding:0 30px;margin:0 5px;cursor:pointer;}
#new .new span:hover {background:#000;}

/*Trending Now*/
#trending {width:95%;margin:0 auto;color:#333;overflow:hidden;}
#trending h3 {font-family: 'Roboto Condensed', sans-serif;font-size:35px;line-height:40px;padding-left:10px}
#trending .trending {position:relative;padding-top:20px;width:100%;}
#trending .trending-box {float:left;width:50%;background:#fff;padding-left:10px}
#trending .trending-box:nth-of-type(1) {z-index:1;}
#trending .trending-box:nth-of-type(2) {position:absolute;left:50%;z-index:2;transition:0.3s;}
#trending .trending-box:nth-of-type(3) {position:absolute;left:66.6666667%;z-index:3;transition:0.3s;}
#trending .trending-box:nth-of-type(4) {position:absolute;left:83.3333333%;z-index:4;transition:0.3s;}

#trending .trending-box:nth-of-type(2).on {left:16.6666667%;}
#trending .trending-box:nth-of-type(3).on {left:33.333333%;}
#trending .trending-box:nth-of-type(4).on {left:50%;}

#trending .trending-box .t-box01 {}
#trending .trending-box .t-box01 figure {padding-bottom:20px;}
#trending .trending-box .t-box01 figure img {width:100%;display:block;}
#trending .trending-box .t-box01 h4 {float:left;font-size:25px;font-weight:700;line-height:40px;}
#trending .trending-box .t-box01 span {float:right;display:block;text-align:center;font-size:16px;color:#fff;line-height:40px;width:120px;background:#333;border-radius:30px;cursor:pointer;}
#trending .trending-box .t-box01 span:hover {background:#000;}

#trending .trending-box .t-box02 {width:100%;padding-top:20px;display:flex;justify-content:space-between;}
#trending .trending-box .t-box02 div {flex-grow:1;}
#trending .trending-box .t-box02 div:nth-child(2) {padding:0 10px;}
#trending .trending-box .t-box02 div figure {width:100%;}
#trending .trending-box .t-box02 div figure img {width:100%;display:block;cursor:pointer;}
#trending .trending-box .t-box02 div p {font-size:14px;font-weight:400;line-height:25px;}

/*footer*/
footer {width:100%;background:#333;margin-top:240px;}
footer .footer {width:95%;margin:0 auto;padding:150px 0 100px 0;;color:#888;}
footer .footer .footer-top {padding:20px 0;}
footer .footer li {cursor:pointer;}
footer .footer .footer-top .left {float:left;}
footer .footer .footer-top .left li {position:relative;display:inline-block;padding:0 15px;font-size:14px;line-height:20px;font-weight:300;}
footer .footer .footer-top .left li:after {position:absolute;top:50%;left:0;transform:translateY(-50%);content:"";display:block;width:1px;height:12px;background:#888;}
footer .footer .footer-top .left li:first-child {padding-left:0;}
footer .footer .footer-top .left li:first-child:after {display:none;}
footer .footer .footer-top .right {float:right;}
footer .footer .footer-top .right li {display:inline-block;padding:0 5px;font-size:22px;line-height:20px;}
footer .footer .footer-top .right li:last-child {padding-right:0;}
footer .footer .footer-top li:hover {color:#fff;}

footer .footer .footer-bottom {border-top:1px solid #888;border-bottom:1px solid #888;padding:20px 0;}
footer .footer .footer-bottom li {display:inline-block;font-size:14px;font-weight:300;line-height:20px;padding:0 5px;}
footer .footer .footer-bottom li:first-child {padding-left:0;}
footer .footer .footer-bottom li:last-child {padding-right:0;}
footer .footer .footer-bottom .left {float:left;}
footer .footer .footer-bottom .right {float:right;}

footer .footer p {padding:20px 0;font-size:14px;line-height:24px;font-weight:300;}





@media (max-width:768px) {
    
    div br {display:none;}
    
    header {width:100%;background:#fff;}
    header .top-menu {border-top:1px solid #aeaeae;border-bottom:1px solid #aeaeae;color:#aeaeae;display:none;}
    header .top-menu .top-left {float:left;text-align:center;}
    header .top-menu .top-left li {float:left;font-size:12px;font-weight:500;padding:0 30px;line-height:40px;border-right:1px solid #aeaeae;cursor:pointer;}
    header .top-menu .top-left li figure {height:40px;}
    header .top-menu .top-left li figure img {height:100%;}

    header .top-menu .top-right {float:right;}
    header .top-menu .top-right li {float:left;font-size:12px;font-weight:400;padding:0 15px;line-height:40px;cursor:pointer;}
    header .top-menu .top-right li:last-child {padding-right:30px;}


    header .menu {position:relative;width:100%;color:#333;background:#fff;border-bottom:1px solid #aeaeae;display:flex;justify-content:space-between;}
    header .menu.on {position:fixed;top:0;left:0;z-index:9999;}

    header .menu h1 {width:50%;padding:20px;float:left;}
    header .menu h1 img {height:25px;cursor:pointer;}

    header .menu nav {text-align:center;position:fixed;top:0;left:-100%;height:100vh;width:80%;background:#f3f3f3;text-align:left;transition:0.3s;z-index:999;}
    header .menu nav>ul {font-size:0;padding:60px 30px}
    header .menu nav>ul>li {display:block;padding:0;}
    header .menu nav>ul>li>a {font-family:'Roboto Condensed', sans-serif;font-size:18px;line-height:40px;}
    header .menu nav>ul>li:after {content:"";display:none;width:0;height:2px;background:#333;}
    header .menu nav>ul>li:hover:after {width:100%;}
    
    header .menu nav.on {left:0;}

    header .menu .submenu {position:static;top:74px;left:0;width:100%;height:inherit;background:#f3f3f3;overflow:hidden;z-index:999;display:none;}
    header .menu nav>ul>li.on .submenu {display:block;}
    header .menu nav>ul>li:hover .submenu {height:inherit;border-bottom:none;}

    header .menu .submenu-box {width:100%;margin:0 auto;}
    header .menu .submenu ul {float:none;width:100%;border-left:1px solid #aeaeae;margin:10px 0;}
    header .menu .submenu ul:last-child {border-right:none;}
    header .menu .submenu ul li {text-align:left;display:none;}
    header .menu .submenu ul.on li {;display:block;}
    header .menu .submenu ul li>a {font-size:14px;font-weight:400;line-height:30px;letter-spacing:-0.025em;padding-left:10px;}
    header .menu .submenu .submenu-01 li>a {font-weight:500;}
    header .menu .submenu .submenu-first {padding-bottom:0;display:block;}
    header .menu .submenu .submenu-first>a {font-weight:600;}

    header .search {width:15%;position:relative;padding:20px 30px;display:none;}
    header .search input {padding-left:40px;width:100%;height:100%;border:1px solid #aeaeae;font-size:14px;}
    header .search span {position:absolute;top:50%;left:50px;transform:translateY(-50%);z-index:1;}
    header .search span i {font-size:14px;line-height:30px;}

    header .mopen {font-size:24px;position:absolute;bottom:0;right:20px;}
    header .mopen i:first-child {display:block;}
    header .mopen i:last-child {display:none;}
    header .mopen.on i:first-child {display:none;}
    header .mopen.on i:last-child {display:block;}

    /*메인슬라이더*/
    #main {padding-top:10px;}
    #main .main-slider {width:95%;margin:0 auto;}
    #main .main-slider figure {width:100%;}
    #main .main-slider figure img {width:100%;display:none;}
    #main .main-slider figure video {width:100%;display:none;}
    #main .main-slider figure img:nth-of-type(2) {display:block;}
    #main .main-slider figure video:nth-of-type(2) {display:block;}

    #main .main-slider .m-item {}
    #main .main-slider .m-item div {width:100%;padding:20px 0;padding-bottom:0;}
    #main .main-slider .m-item div:after {content:"";display:block;clear:both;}
    #main .main-slider .m-item h2 {float:none;width:100%;font-size:24px;font-weight:700;line-height:30px;text-align:left;}
    #main .main-slider .m-item p {float:none;width:100%;font-size:16px;font-weight:400;line-height:26px;padding:15px 0;text-align:left;}
    #main .main-slider .m-item span {float:left;display:inline-block;text-align:center;font-size:18px;font-weight:500;color:#fff;line-height:50px;padding:0 35px;background:#333;border-radius:50px;cursor:pointer;}
    #main .main-slider span:hover {background:none;}

    /*featured*/
    #featured {width:95%;height:100vh;margin:0 auto;padding:60px 0;color:#333;}
    #featured h3 {font-family: 'Roboto Condensed', sans-serif;font-size:30px;line-height:40px;}
    #featured .featured {width:100%;margin:0 auto;padding:30px 0;}
    #featured .featured-tab {float:none;width:100%;display:flex;justify-content: space-between;}
    #featured .featured-tab li {font-family: 'Roboto Condensed', sans-serif;font-size:26px;line-height:50px;color:#c2c2c2;padding:0;cursor:pointer;text-align:center;width:25%;}
    #featured .featured-tab li:first-child {padding-top:0;}
    #featured .featured-tab li:after {content:"";display:block;width:100%;height:2px;background:#c2c2c2;}

    #featured .featured-tab li.active {color:#333;}
    #featured .featured-tab li.active:after {background:#333;}

    #featured .featured-con {position:relative;float:none;width:100%}
    #featured .featured-con-item {}
    #featured .featured-con-item h5 {font-family: 'Roboto Condensed', sans-serif;font-size:200px;line-height:180px;color:#f5f5f5;display:none;}
    #featured .featured-con-item div {position:static;top:0;left:0;padding-top:30px;width:100%;}
    #featured .featured-con-item div .t01 {font-size:14px;font-weight:400;}
    #featured .featured-con-item div .t02 {font-size:22px;font-weight:700;line-height:38px;padding:5px 0;}
    #featured .featured-con-item div .t03 {font-size:16px;font-weight:700;line-height:30px;padding:15px 0 5px 0;;}
    #featured .featured-con-item div .t04 {font-size:14px;font-weight:400;line-height:24px;color:#888;}
    #featured .featured-con-item figure {position:static;top:150px;right:-1500px;width:100%;padding-top:30px;}
    #featured .featured-con-item figure img {width:100%;}

    /*new releases*/
    #new {width:95%;margin:0 auto;padding:50px 0;color:#333;}
    #new h3 {font-family: 'Roboto Condensed', sans-serif;font-size:30px;line-height:40px;}
    #new .new {width:100%;padding:20px 0;text-align:center;}
    #new .new:nth-of-type(1) {padding-top:20px;} 
    #new .new figure {width:100%;}
    #new .new figure img {width:100%;}
    #new .new figure img:nth-child(1) {display:none;}
    #new .new figure img:nth-child(2) {display:block;width:100%;margin:0 auto;}
    #new .new figure:nth-of-type(1) {}
    #new .new figure:nth-of-type(2) {padding:20px 0;;}
    #new .new h4 {padding:20px 0 10px 0;font-size:30px;font-weight:700;}
    #new .new p {font-size:16px;font-weight:400;line-height:24px;padding-bottom:15px;}
    #new .new span {display:inline-block;font-size:16px;font-weight:500;line-height:40px;color:#fff;background:#333;border-radius:50px;padding:0 20px;margin:0 5px;cursor:pointer;}
    #new .new span:hover {background:#000;}

    /*Trending Now*/
    #trending {width:95%;margin:0 auto;color:#333;overflow:hidden;}
    #trending h3 {font-family: 'Roboto Condensed', sans-serif;font-size:30px;line-height:40px;padding-left:0}
    #trending .trending {position:static;padding-top:0;width:100%;}
    #trending .trending-box {float:none;width:100%;background:#fff;padding-left:0;padding:20px 0;}
    #trending .trending-box:nth-of-type(1) {z-index:1;}
    #trending .trending-box:nth-of-type(2) {position:static;left:50%;z-index:2;transition:0.3s;}
    #trending .trending-box:nth-of-type(3) {position:static;left:66.6666667%;z-index:3;transition:0.3s;}
    #trending .trending-box:nth-of-type(4) {position:static;left:83.3333333%;z-index:4;transition:0.3s;}

    #trending .trending-box:nth-of-type(2).on {left:16.6666667%;}
    #trending .trending-box:nth-of-type(3).on {left:33.333333%;}
    #trending .trending-box:nth-of-type(4).on {left:50%;}

    #trending .trending-box .t-box01 {width:100%;}
    #trending .trending-box .t-box01 figure {padding-bottom:10px;}
    #trending .trending-box .t-box01 figure img {width:100%;display:block;}
    #trending .trending-box .t-box01 h4 {float:left;font-size:20px;font-weight:700;line-height:30px;}
    #trending .trending-box .t-box01 span {float:right;display:block;text-align:center;font-size:14px;color:#fff;line-height:30px;width:100px;background:#333;border-radius:30px;cursor:pointer;}
    #trending .trending-box .t-box01 span:hover {background:#000;}

    #trending .trending-box .t-box02 {width:100%;padding-top:10px;display:flex;justify-content:space-between;}
    #trending .trending-box .t-box02 div {flex-grow:1;flex-basis:100%;padding:0 5px}
    #trending .trending-box .t-box02 div:nth-child(2) {padding:0 5px}
    #trending .trending-box .t-box02 div figure {width:100%;}
    #trending .trending-box .t-box02 div figure img {display:block;cursor:pointer;}
    #trending .trending-box .t-box02 div p {font-size:14px;font-weight:400;line-height:25px;}

    /*footer*/
    footer {width:100%;background:#333;margin-top:60px;}
    footer .footer {width:95%;margin:0 auto;padding:50px 0;;color:#888;}
    footer .footer .footer-top {padding:10px 0;}
    footer .footer li {cursor:pointer;}
    footer .footer .footer-top .left {float:none;width:100%;display:flex;border-bottom:1px solid #ddd;text-align:center;}
    footer .footer .footer-top .left li {position:relative;display:inline-block;padding:0;font-size:14px;line-height:50px;font-weight:300;width:25%;color:#ddd;}
    footer .footer .footer-top .left li:after {position:absolute;top:50%;left:0;transform:translateY(-50%);content:"";display:none;width:1px;height:12px;background:#888;}
    footer .footer .footer-top .left li:nth-child(1) {display:none;}
    footer .footer .footer-top .left li:nth-child(2) {display:none;}
    footer .footer .footer-top .left li:nth-child(4) {display:none;}
    footer .footer .footer-top .left li:nth-child(1) {display:none;}
    footer .footer .footer-top .right {float:none;padding-top:0;}
    footer .footer .footer-top .right li {display:none;padding:0 5px;font-size:22px;line-height:20px;}
    footer .footer .footer-top .right li:last-child {padding-right:0;}
    footer .footer .footer-top li:hover {color:#fff;}

    footer .footer .footer-bottom {border-top:none;border-bottom:none;padding:5px 0;}
    footer .footer .footer-bottom li {display:inline-block;font-size:12px;font-weight:300;line-height:20px;padding:0 5px;}
    footer .footer .footer-bottom li:first-child {padding-left:0;}
    footer .footer .footer-bottom li:last-child {padding-right:5px;}
    footer .footer .footer-bottom .left {float:none;}
    footer .footer .footer-bottom .right {float:none;display:none;}

    footer .footer p {padding:10px 0;font-size:12px;line-height:20px;font-weight:300;text-align:left;}
    }