@charset "utf-8";

/* font */
@font-face {
    font-family:'GmarketSans';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight:100;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSans';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family:'GmarketSans';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight:600;
    font-style:normal;
}


.gm {font-family:'GmarketSans';}
.gmB {font-family:'GmarketSans'; font-weight:600 !important;}
.mont {font-family:'Montserrat', sans-serif;} 
.mont strong {font-family:'Montserrat', sans-serif;} 


/* Reset */
* {box-sizing:border-box;word-break:keep-all;}
html,body{width:100%;height:100%;padding:0px; margin:0px;font-size:16px;}
body {font-size:16px;font-family: Pretendard,Helvetica,sans-serif;line-height:100%; font-weight:300;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none;}
img,fieldset{border:0}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
hr {display:none;}
a, a:link {color:inherit;text-decoration:none;}
a:visited {color:inherit;}
a:hover, a:active {color:inherit;text-decoration:none;}
a,img,input{selector-dummy:expression(this.hideFocus=true);} 
a img, fieldset {border:0px none;}
address {font-style:normal; font-weight:normal;}
legend,caption {display:none; clear:both;}
input,textarea,select,button,table { font-size:inherit;font-family:inherit;line-height:inherit; }/**font-size:100%;*/
input,select {vertical-align:middle}
textarea, input {outline-color:-moz-use-text-color;outline-style:none;outline-width:medium;}
textarea {resize:none;}
table {border-collapse:collapse}
img {max-width:100%;}
button {border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:0 none;background-color:transparent;border-radius:0;}

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block;margin:0;}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr { display:inline; }


/* form */
input[type=text], input[type="password"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], select, textarea {line-height:34px; min-height:34px; vertical-align:middle; transition:border-color 0.2s; border:1px solid #ccc; border-radius:0px; color:#565a5c; box-sizing:border-box; -moz-box-size:border-box; background-color:#fff; font-size:1em; font-weight:300;}
input {vertical-align:middle; -webkit-appearance:none;  -webkit-border-radius:0;}
input[type="radio"] {-webkit-appearance:radio; box-sizing:border-box;}
input[type="radio"], input[type="checkbox"] {margin:3px 0.5ex; *margin:0px 0.5px; padding:initial; background-color:initial; border:initial;}
ime_mode {ime-mode:disabled; }


input::-webkit-input-placeholder { color:#999999; font-weight:300; }
input::-moz-placeholder { color:#999999; font-weight:300; }
input:-ms-input-placeholder { color:#999999; font-weight:300; } 
textarea::-webkit-input-placeholder { color:#999999; font-weight:300; }
textarea::-moz-placeholder { color:#999999; font-weight:300; }
textarea:-ms-input-placeholder { color:#999999; font-weight:300; } 

input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px white inset; box-shadow:0 0 0 1000px white inset;}

input[type="checkbox"]{display:none;}
input[type="checkbox"] + label {position:relative; display:inline-flex; flex-wrap:wrap; align-items:center; vertical-align:middle;}
input[type="checkbox"] + label:before{display:block; content:""; width:30px; height:30px; border:1px solid #cccccc; background:#fff; border-radius:0px; box-sizing:border-box;  margin-right:5px; }

input[type="checkbox"]:checked + label::after{display:block; content:""; width:30px; height:30px; border:10px solid #0b2464; background:#fff; border-radius:0px; box-sizing:border-box; position:absolute; left:0px; top:50%; transform:translateY(-50%)}

.check input[type="checkbox"] + label:before{width:28px; height:28px; border:1px solid #cccccc; background:#fff; border-radius:100%;}
.check input[type="checkbox"]:checked + label::after{display:block; content:""; width:28px; height:28px; border:1px solid #0b2464; background:url(../img/common/check_on.png) no-repeat center center #0b2464; border-radius:100%; color:#fff; text-align:center;}



input[type="radio"]{display:none;}
input[type="radio"] + label {position:relative; display:inline-flex; flex-wrap:wrap; align-items:center; vertical-align:middle;}
input[type="radio"] + label:before{display:block; content:""; width:28px; height:28px; border:1px solid #cccccc; background:#fff; border-radius:100%; box-sizing:border-box;  margin-right:5px; }

input[type="radio"]:checked + label::after{display:block; content:""; width:28px; height:28px; border:9px solid #0b2464; background:#fff; border-radius:100%; box-sizing:border-box; position:absolute; left:0px;  top:50%; transform:translateY(-50%)}


.input {color:#737070; background-color:#ffffff; border:solid 1px #cccccc; height:18px; padding:0px 5px 0 10px;}


.textarea {border:solid 1px #cccccc; background-color:#ffffff; padding:10px 10px; line-height:140%; color:#737070; width:100%;}
select {border:none; font-weight:300; color:#565a5c; border:1px solid #cccccc; border-radius:0px; box-sizing:border-box;}
.select {height:40px;}


/* 페이징 */
.paging {overflow:hidden; text-align:center; margin:36px 0px 25px 0px; width:100%; font-weight:300; font-size:0px;}
.paging img {vertical-align:top;}
.paging a {color:#000; vertical-align:middle; display:inline-flex; width:48px; height:48px; overflow:hidden; border-radius:100%; font-size:17px; margin:0px 2px; padding:9px; font-weight:300; justify-content:center; align-items:center;}
.paging a.first, .paging a.last, .paging a.next, .paging a.prev {width:48px; height:48px; background:#fff; border:1px solid rgba(0, 0, 0, 20%); text-indent:-99999px; position:relative;}
.paging a.first:after, .paging a.prev:after {content:''; width:7px; height:7px; border-top:2px solid #333; border-left:2px solid #333; display:inline-block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg); opacity:0.7;}
.paging a.last:after, .paging a.next:after {content:''; width:7px; height:7px; border-top:2px solid #333; border-right:2px solid #333; display:inline-block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg); opacity:0.7;}
.paging a.prev:before {content:''; width:7px; height:7px; border-top:2px solid #333; border-left:2px solid #333; display:inline-block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(-45deg); opacity:0.7; margin-left:5px}
.paging a.next:before {content:''; width:7px; height:7px; border-top:2px solid #333; border-right:2px solid #333; display:inline-block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) rotate(45deg); opacity:0.7; margin-left:-5px;}
.paging a.next {margin-left:10px;}
.paging a.prev {margin-right:10px;}
.paging a.on {color:#fff; background:#333333; border:1px solid #333333;}



/* blind */
.hidden{visibility:hidden;position:absolute;overflow:hidden;height:0;width:0;font-size:0}
#accessibility, .skip, hr, legend {position:absolute;width:0; height:0; font-size:0; line-height:0;overflow:hidden; visibility:hidden ;}
/* align */
.tl{text-align:left!important; justify-content:flex-start !important}
.tr{text-align:right!important; justify-content:flex-end !important}
.tc{text-align:center !important; justify-content:center !important}
.center,.center td,.center th {text-align:center}
.vm{vertical-align:middle!important}
.vt{vertical-align:top!important}

/* color */
.point_color {background: linear-gradient(to right, #704af8, #e00432); color: transparent; -webkit-background-clip: text; !important}

/* popup */
.layerPop {-webkit-overflow-scrolling:touch; overflow-y:auto; width:100%; position:fixed; left:0; right:0; top:0; bottom:0; z-index:99999; background:rgba(0, 0, 0, 50%); zoom:1;}
.layerPop_inner {width:100%; min-height:100%; padding:15px; display:flex; justify-content:center; align-items:center;}
.layerPop_inner .popContent {width:100%; margin:0 auto; background:#fff; position:relative;}
.layerPop .x_btn {margin-left:auto; position:relative; display:block; cursor:pointer; background:none; width:30px; height:30px; font-size:0px; z-index:2}
.layerPop .x_btn:after {display:block; content:""; width:20px; height:3px; background:#111; transform-origin:center; transform:translate(-50%, -50%) rotate(45deg); position:absolute; top:50%; left:50%;}
.layerPop .x_btn:before {display:block; content:""; width:20px; height:3px; background:#111; transform-origin:center; transform:translate(-50%, -50%) rotate(135deg); position:absolute; top:50%; left:50%;}
.layerPop .x_btn.black:after {background:#000;}
.layerPop .x_btn.black:before {background:#000}
.layerPop .pop_head {position:relative;}
.layerPop .pop_head .x_btn {position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.layerPop .pop_head .title {font-size:24px; line-height:150%; margin-bottom:10px; color:#000; padding:10px; text-align:center; font-weight:600;}

/* button */
a.btnNormal, bntNormal {display:inline-flex; height:40px; width:100%; justify-content:center; align-items:center; color:#fff; font-size:16px; line-height:1.3em; border:1px solid #909090; background:#222222}
a.bt_st1, .bt_st1 {color:#000; background:#fff}
a.bt_st2, .bt_st2 {color:#fff; background:#111}
a.bt_st3, .bt_st3 {color:#fff; background:#DA0F47;}

a.btnStrong{display:inline-flex; width:100%; max-width:250px; height:65px; justify-content:center; align-items:center; color:#222; box-sizing:border-box; background-color:#fff; letter-spacing:-1px; text-align:center; font-size:23px; font-weight:800; border-radius:13px;}
a.btnStrong > span{padding-right:50px; background:url(../img/ico_link.png) no-repeat right center;}

/*layout*/
body {overflow-x:hidden; font-weight:400;}
body.fixe {overflow:hidden;}
#wrap {position:relative; margin:0 auto; font-size:18px; line-height:1.4em;} 
.innerWrap {position:relative; width:100%; max-width:1400px;margin:0 auto;}
.mVer {display:none}
.pcVer {display:block;}
.video_wrap {padding-bottom:56.2%; position:relative;}
.video_wrap iframe {position:absolute; left:0px; top:0px; width:100% !important; height:100% !important;}
.video_wrap > img {width:100%; height:100%; position:absolute; left:0px; top:0px;}


header {position:absolute;top:0;left:0;width:100%; z-index:1000; transition:all 0.2s 0s ease-in-out;}
header .inner {width:100%; max-width:1760px; padding:0px 10px; align-items:center; margin:0 auto; position:relative; height:90px; display:flex; flex-wrap:wrap; justify-content:space-between}
header .inner ul {display:flex}
header .inner ul li {position:relative;}
header .inner ul li:not(:first-child) {margin-left:20px; padding-left:20px;}
header .inner ul li:not(:first-child):after {display:block; content:""; width:1px; height:14px; background:#fff; position:absolute; left:0px; top:50%; transform:translateY(-50%); opacity:0.7;}
header .inner ul li a {font-weight:400; font-size:16px;  color:#fff; display:block; line-height:33px; }
header .inner ul li a.i_share {padding-left:30px; background:url(../img/nav_share.png) no-repeat left 3px;}
header .inner ul li a.i_link {padding-right:25px; background:url(../img/nav_link.png) no-repeat right 7px;}
header .inner ul li a.i_n {padding-left:40px; background:url(../img/nav_n.png) no-repeat left top;}
header .inner ul li a.i_k {padding-left:40px; background:url(../img/nav_k.png) no-repeat left top;}


header.fixed {height:80px;background-color:#000;}

section {position:relative;margin:0 auto; padding:100px 0;}
section article {padding:80px 0px 90px 0px;}

footer {position:relative;height:130px;background-color:#000;}
footer .innerWrap {display:flex;flex-wrap:wrap;padding:47px 0 0 0;align-items:center;justify-content:space-between;}
footer .copyright {font-size:11px;font-weight:300;color:#fff;}
footer > div .link {display:flex;margin-bottom:10px;}
footer > div .link li {position:relative;padding:0 16px;font-size:15px;line-height:16px;color:#aaa;font-weight:700;}
footer > div .link li:first-child {padding-left:0;}
footer > div .link li+li:before {content:"";position:absolute;top:0;left:0;width:1px;height:16px;background-color:#aaa;}
footer > div .link .oled {display:block;width:109px;height:16px;background:url("../img/footer_link_oled.png") 0 center no-repeat;}

.title {line-height:1.4em; margin-bottom:30px; text-align:center; font-size:43px; font-weight:800;color:#000;}
.title+.title_dec {margin-top:-20px;}
.title_dec {font-size:18px; line-height:1.4em; padding-bottom:3.5em; text-align:center; font-weight:400;color:#333;}
.title_dec:before {display:block; content:""; width:40px; height:1px; background:#000; margin:15px auto;}
.sub_title {line-height:1.4em; text-align:center; font-size:32px;font-weight:700;color:#fff; opacity:0.9; padding-bottom:45px;}


.visualWrap {padding-top:160px; padding-bottom: 50px; background: url(../img/visualWrap_bg.jpg) no-repeat center top/cover;}

.visualWrap .innerWrap {max-width:1760px; position:relative;}
.visualWrap .keyVisual {display:flex; position:relative; flex-direction: column; font-family:Pretendard; color:#fff; text-align: center}
.visualWrap .logo {position:absolute; right:0px; top:-128px;}
.visualWrap .keyVisual > h2 {font-size:41px; line-height:1.2em; padding:0.5em 0px 2.8em 0px; font-weight:700;}
.visualWrap .keyVisual .dec {padding:40px 0px;}
.visualWrap .keyVisual .date {font-size:32px; font-weight:600; line-height:1.3em;}
.visualWrap .keyVisual .bottom {justify-content: center; margin-top:auto; display:flex; flex-wrap:wrap;  padding-top:60px;}
.visualWrap .keyVisual .host_wrap {display:flex; flex-wrap:wrap; margin:0px -15px;}
.visualWrap .keyVisual .host_wrap > dl {display:flex; align-items:center; padding:5px 15px;}
.visualWrap .keyVisual .host_wrap > dl dt {padding-right:10px; font-size:13px; font-weight:500; color:rgba(255, 255, 255, 0.70);}
.visualWrap .keyVisual .host_wrap > dl dd {line-height:1px; display: flex; gap:min(30px, 2vw)}
.visualWrap .keyVisual .host_wrap > dl dd img {height:32px;}

.introduceWrap {color:#fff;  background: url(../img/introduceWrap_bg.jpg) no-repeat center top/cover; text-align:center}
.introduceWrap .innerWrap{}
.introduceWrap h3 {font-size:64px; line-height:1.4em; font-weight:800; position:relative; padding-bottom:30px;}
.introduceWrap h3 > span{color: transparent; -webkit-text-stroke: 1px #fff; }
.introduceWrap h3:before {display:block; content:""; width:100%; height:3px; background:#fff; position:absolute; left:0px; bottom:0px;}
.introduceWrap .box_vote {font-size: 1.27em; line-height: 1.5em; font-weight: 500;}
.introduceWrap .box_vote > strong {display: flex; justify-content: center; align-items: center; width:5.76em; height:1.9em; border-radius:60px; font-weight: 800; background: #fff; margin: 0 auto;  font-size: 1.13em; color: #000; line-height: 1.3em; margin-bottom:0.5em; }
.introduceWrap .box { font-size:1.11em; line-height: 1.5em; max-width:1000px; position: relative; margin:60px auto 90px auto; padding: 1.5em;}
.introduceWrap .box:after {content: "";border-radius:30px; border:5px solid transparent; background: linear-gradient(105deg,#ee2e7c 20%,#825cef 70%) border-box; mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.introduceWrap .box .txt_a {font-weight: 600; font-size: 1.3em; line-height: 1.4em; padding-bottom: 1em}
.introduceWrap .box > ul {display: flex; flex-wrap: wrap; justify-content: center; gap:10px 40px;}
.introduceWrap .box > ul > li{position: relative;}
.introduceWrap .box > ul > li:not(:first-child):before {display: block; content: ""; width: 3px; height:70%; background: #fff; position: absolute; left:-20px; top: 15%;}
.introduceWrap .box > ul > li > dl {display: flex;}
.introduceWrap .box > ul > li > dl dt {font-weight: 600; margin-right:1em}
.introduceWrap .dec {font-size:1.27em; font-weight:400; line-height:1.4em; padding:30px 0px 0px 0px; max-width:675px; margin:0 auto;}
.introduceWrap .info {padding:20px 0px 30px 0px; max-width:460px; margin:0 auto; text-align:left;}
.introduceWrap .info > li {padding-top:10px;}
.introduceWrap .info > li > dl {display:inline-flex; align-items:center;}
.introduceWrap .info dl dt {display:flex; width:115px; height:40px; background:#fff; border-radius:60px; justify-content:center; align-items:center; color:#333333; align-self:flex-start; font-weight:800;}
.introduceWrap .info dl dd {flex:1; padding-left:10px;}
.introduceWrap a.btnStrong {max-width:386px; height: 90px; color: #fff; font-size: 1.77em; font-weight:600; background: #e72b89; border-radius:40px; }
.introduceWrap a.btnStrong > span {padding-right:60px; background: url(../img/ico_link2.png) no-repeat right center; line-height: 1.5em;}

.comingsoonWrap {text-align:center; padding-bottom:0px;}
.comingsoonWrap .cs {font-family:'GmarketSans'; font-weight:100; line-height:1.3em; font-size:65px; text-transform:uppercase}
.comingsoonWrap .cs > span {box-shadow:inset 0 -20px 0 #204ff3; line-height:60px; display:inline-block}
.comingsoonWrap .dec {text-align:center; padding:20px 0px 0px 0px;}
.comingsoonWrap .dec:after {display:block; content:""; width:40px; height:1px; background:#000; margin:20px auto;}
.comingsoonWrap .bt > a {display:inline-flex; height:52px; padding:0px 30px; justify-content:center; align-items:center; color:#fff; background:#0b2464}
.comingsoonWrap .bt > a:after {display:block; content:""; width:8px; height:8px; border:3px solid #fff; border-right:none; border-bottom:none; transform:rotate(-225deg); margin:2px 0px 0px 5px;}

.listWarp > ul {display:flex; flex-wrap:wrap; margin:-35px -12px;}
.listWarp > ul > li {width:25%; padding:35px 12px;}
.listWarp .box {position:relative; transition:all 0.3s 0s ease-in-out; border-radius:10px;}
.listWarp .box:hover {box-shadow:5px 4px 20px rgba(0, 0, 0, 30%); }

.listWarp .box .rank {width:75px; height:110px; display:flex; justify-content:center; align-items:center; flex-direction:column; background:rgba(255, 255, 255, 50%); position:absolute; left:0px; top:-20px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 40%); z-index:2; }
/*.listWarp .box .rank:before {display:block; content:""; width:0px; height:0px;  border-bottom: 10px solid rgba(44,59,80,0.3); border-top: 10px solid transparent; border-left: 7px solid rgba(44,59,80,0.3); border-right: 7px solid transparent;position:absolute; right:-14px; top:0px;}*/
.listWarp .box .rank .no {padding-bottom: 5px; margin-bottom: 10px; font-size:38px; line-height:1.2em; position: relative; font-family:'GmarketSans'; font-weight:700; color: #fff;}
.listWarp .box .rank .no:before {z-index: -1; content: attr(data-content); position: absolute; left: 0; -webkit-text-stroke: 4px #000;}
.listWarp .box .rank .no:after {content: ""; width:40%; height: 2px; position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); background: #000;}
.listWarp .box .like {width:32px; height:30px; background:url(../img/like.png) no-repeat center top/cover; position:absolute; right:10px; top:10px; z-index:2}
.listWarp .box .like:hover {/*background:url(../img/like_on.png) no-repeat center top/cover;*/}
.listWarp .box .like.active {background:url(../img/like_on.png) no-repeat center top/cover;}
.listWarp .box.on .photoArea:before{display:none;}
.listWarp .box .photoArea:before {display:block; content:""; width:100%; height:30%; background-image: linear-gradient(to top, rgba(1,1,1,0.5), rgba(1,1,1,0) ); position:absolute; left:0px; bottom:0px; z-index:1;}
.listWarp .box .photoArea {position:relative; padding-bottom:111.5384615384615%; border-radius:10px 10px 0px 0px; overflow:hidden; }
.listWarp .box .photoArea .photoArea-bg {width:100%; height:100%;border-radius:10px 10px 0px 0px;  position:absolute; left:0px; top:0px; background-position:center top; background-repeat:no-repeat; background-size:cover; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:1s -webkit-transform; transition:1s -webkit-transform; -o-transition:1s transform; transition:1s transform; transition:1s transform, 1s -webkit-transform; }

.photoArea .count {font-size:16px; font-weight:300; line-height:1.3em; letter-spacing:-1px; text-align: right; color:#fff; position: absolute; right:1em; top: 1em; font-family:'GmarketSans'; z-index: 9;}
.photoArea:hover .photoArea-bg {-webkit-transform:rotateY(0.5turn); transform:rotateY(0.5turn);}
.photoArea:hover .photoArea-flip {opacity:1;}
.photoArea-flip {display:flex; align-items:center; position:absolute; width:100%; height:100%; bottom:0; -webkit-transform:rotateY(0.5turn) translateZ(1px); transform:rotateY(0.5turn) translateZ(1px); text-align:center; opacity:0; -webkit-transition:1s 0.5s opacity; -o-transition:1s 0.5s opacity; transition:1s 0.5s opacity;  z-index:-1; background:linear-gradient(to right, rgba(122,74,247,0.6),  rgba(223,4,50,0.6) );}
.on .photoArea .photoArea-flip .action {display:flex; }
.photoArea-flip .action {display:flex; flex-wrap:wrap; width:100%; display:none;}
.photoArea-flip .action > li {flex:1;}
.photoArea-flip .action > li > button {display:inline-block; color:#fff; font-weight:800; font-size:21px; }
.photoArea-flip .action > li > button > span {display:block; margin:0 auto; width:50px; height:50px;  margin-bottom:10px;}
.photoArea-flip .action > li > button .play {background:url(../img/ico_play.png) no-repeat center center;}
.photoArea-flip .action > li > button .pic {background:url(../img/ico_pic.png) no-repeat center center;}
.photoArea-flip .action > li > button .profile {background:url(../img/ico_user.png) no-repeat center center;}

.listWarp .box .infoArea {background:#f5f5f5; padding:15px 20px; border-radius:0px 0px 10px 10px; font-size:16px; line-height:1.3em;}
.listWarp .box .infoArea .brand {border-bottom:1px solid #000; padding-bottom:15px; font-weight:500; color:#666666; text-align:left; word-break:break-all }
.listWarp .box .infoArea .brand .mont {color:#222222; font-weight:700; font-size:1.375em; line-height:1.3em; word-break:break-all}
.listWarp .box .infoArea .brandInfo {display: flex; flex-direction: column; align-items: center; padding-top:15px;}
.listWarp .box .infoArea .brandInfo dt {font-weight:600; text-align:center; line-height: 1.3em;}
.listWarp .box .infoArea .brandInfo dd {display:flex; padding-top: 5px; flex-wrap:wrap; justify-content:center; gap:3px 9px;}
.listWarp .box .infoArea .brandInfo a {width: calc(25% - 7px); transition:all 0.2s 0s ease-in-out; display:block}
.listWarp .box .infoArea .brandInfo a img {width:100%;}
.listWarp .box .infoArea .brandInfo a:hover {transform:scale(1.2)}

.listWarp .box .like_bt{}
.listWarp .box .like_bt:hover, .listWarp .box .like_bt:active{}
.listWarp .box .like_bt > a{display:flex; flex-wrap: wrap; align-items: center; justify-content: center; color:#fff;}

.profileContent {max-width:1060px !important;}
.profileContent .x_btn {position:absolute; right:10px; top:10px;}
.profileContent .pop_body {display:flex; max-width:1060px; flex-wrap:wrap; font-size:16px; line-height:1.4em;}
.profileContent .pop_body > div {width:50%;}
.profileContent .info {position:relative; line-height:0px; background-image: linear-gradient(to bottom, #11162f, #2c3e5c );}
.profileContent .info .introduce {position:absolute; left:0px; top:0px; padding:40px 30px 0px 30px; line-height:1.6em; color:#fff;}
.profileContent .info .introduce .name {font-size:32px; line-height:1.3em; font-weight:500; padding-bottom:10px;}
.profileContent .info .introduce .name:after {display: block; content: ""; width: 40px; height: 2px; background: #fff; margin:5px 0px;}
.profileContent .info .introduce .name .sub_sname{font-size:0.5em;}
/**.profileContent .info .introduce .name .gmB {font-size:1.23em; font-weight:700; line-height:1.4em;}*/

.profileContent .history {background-color:#fff; background-position:cover; padding:30px;  display:flex; flex-direction:column; flex-wrap:wrap;}
.profileContent .history > dl {width:100%; color:#222;}
.profileContent .history > dl > dt {text-transform:uppercase; font-size:1.43em; font-weight:700; padding:10px 0px;}
.profileContent .history > dl > dd > ul > li {margin-top:5px; display:flex;}
.profileContent .history > dl > dd > ul > li .year {min-width:max-content; padding-left:0.8em; position: relative; padding-right:10px;}
.profileContent .history > dl > dd > ul > li .year:before {display: block; content: ""; width: 3px; height: 3px; border-radius:100%; background: #000; position: absolute; left: 0px; top:0.5em}

.profileContent .history .photo {display:flex; flex-wrap:wrap; width:100%; margin:-9px; margin-top:auto; padding-top:10px;}
.profileContent .history .photo > li {padding:9px; width:50%;}
.profileContent .history .photo > li:nth-child(4) {margin-top:-7.6%;}
.profileContent .history .photo > li .frame {overflow:hidden; position:relative; border-radius:13px;}
.profileContent .history .photo > li .frame > img {position:absolute; left:0px; top:0px; width:100%;}
.profileContent .history .photo > li .frame > img.horizontal {width:auto; height:100%; left:50%; max-width: inherit; transform:translateX(-50%)}
.profileContent .history .photo > li:nth-child(1) .frame {padding-bottom:calc(243 / 224 * 100%)}
.profileContent .history .photo > li:nth-child(2) .frame {padding-bottom:calc(204 / 223 * 100%)}
.profileContent .history .photo > li:nth-child(3) .frame {padding-bottom:calc(222 / 222 * 100%)}
.profileContent .history .photo > li:nth-child(4) .frame {padding-bottom:calc(261 / 226 * 100%)}

.zoomPop {position:fixed; z-index:999999; left:50%; top:50%; transform:translate(-50%, -50%); display:none; -webkit-overflow-scrolling:touch; max-width:580px; max-height:95vh; overflow-y:auto;}
.zoomPop::-webkit-scrollbar {width:10px;}
.zoomPop::-webkit-scrollbar-thumb {	background:rgba(0, 0, 0, 60%); border-radius:10px;}
.zoomPop::-webkit-scrollbar-track {background:rgba(0, 0, 0, 10%); }

.beginnerWrap {background:url(../img/beginnerWrap_bg.jpg) no-repeat left top/cover}
.beginnerWrap .listWarp > ul{}
.beginnerWrap .listWarp > ul > li {width:25%; padding:35px 12px;}
.beginnerWrap .listWarp .box .infoArea {display:flex; justify-content:space-between}
.beginnerWrap .listWarp .box .infoArea .brand {border-bottom:none;padding-bottom:0px;}
.beginnerWrap .listWarp .box .infoArea .brandInfo {padding:0px; width:100%; max-width:49px;}
.beginnerWrap .listWarp .box .infoArea .brandInfo a {width:100%; padding:0px;}
.beginnerWrap .title {color:#fff}
.beginnerWrap .title_dec {color:#fff}
.beginnerWrap .title_dec:before {background:#fff;}

.eventBanner {position:relative; padding:0px 200px;}
.eventBanner .box {position:relative; max-width:1000px; border-radius:10px; padding:40px 30px; text-align:center; margin:0 auto; background:#0f1329; color:#fff;}
.eventBanner .box .subject {font-size:51px; line-height:1.4em; color:#fff; font-weight:800; padding-bottom: 0.8em; }
.eventBanner .box .subject .left_txt{display:block; position:relative; padding-right: 160px;}
.eventBanner .box .subject .left_txt:after {display:block; content:""; width:140px; height:3px;  background-color:#fff; position:absolute; left:65%; top:49%;}
.eventBanner .box .subject .area {display:inline-block; border-bottom:4px solid #fff; width:2.8em;}
.eventBanner .gift {max-width:1000px; margin: 0 auto; margin-top: min(40px, 5vw); display: flex; justify-content: space-between; gap:10px;}
.eventBanner .gift > li {text-align: center}
.eventBanner .gift > li > p {}

.commentWrap {display:flex; justify-content:space-between; padding:60px 0px 20px 0px;}
.commentWrap .enter {width:130px; height:60px; display:flex; justify-content:center; align-items:center; background:#303033; font-size:15px; color:#fff; margin-left:10px;}
.commentWrap .input {flex:1; height:60px; line-height:60px; background:#fff; border:1px solid #ddd; color:#222; font-size:14px;}
.commentWrap .input::-webkit-input-placeholder { color:#666; font-weight:300; }
.commentWrap .input::-moz-placeholder { color:#666; font-weight:300; }
.commentWrap .input:-ms-input-placeholder { color:#666; font-weight:300; } 

.commentCoutn {height:41px; padding-left:45px; display:flex; background:url(../img/ico_list.png) no-repeat left top; align-items:center; color:#000; margin-bottom:20px;}
.commentCoutn > strong {padding:0px 5px; color:#ff0118}

.commentList {border-top:1px solid #000; font-size:16px;}
.commentList > li {display:flex; padding:20px 0px; justify-content:flex-end; border-bottom:1px solid #ccc;}
.commentList > li .comment {flex:1; word-break:break-all;}
.commentList > li .date {padding-left:20px; width:130px; text-align:right;}
.commentList > li .mail {padding-left:20px; width:220px; text-align:right;}

.noticeWrap {border-radius:16px; background:#383b4f; border:2px solid #383b4f; color: #fff; padding:30px; margin-top:70px; position:relative;}
.noticeWrap h3 {display:inline-block; font-size:23px; line-height:1.3em; font-weight:700; color:#070b24; background-color:#fff; padding:17px 40px; border-radius:13px; border:3px solid #070b24; position:absolute; left:-2px; top:-40px;}
.noticeWrap .bul01 {color:#fff; padding-top:30px;}
.noticeWrap .bul01 > li { font-weight:300; margin-top: 0.4em;}
.noticeWrap .bul01 > li.flex { display:flex;}
.noticeWrap .bul01 > li.flex .subj {min-width:max-content; margin-right:0.4em;}
.noticeWrap .bul01 > li:Before {background: #fff;}
.noticeWrap .bul02 > li {color:#fff; font-weight:300;}
.noticeWrap .bul01 strong {font-weight:600;}
.alertPop {border-radius:10px; padding:20px; }
.alert_txt {text-align:center; padding-bottom:30px;}

.shareContent {border-radius:10px; padding:20px; } 
.shareContent .share {display:flex; flex-wrap:wrap; justify-content:center;}
.shareContent .share > li {padding:10px;}
.shareContent .share > li > a {display:block; text-align:center; color:#333; font-size:13px; font-family:'GmarketSans';}
.shareContent .share > li .ico {padding-bottom:10px; display:block; line-height:0em;}

.agreeWrap {display:flex; align-items:center; justify-content:flex-end; padding-bottom:40px;}
.agreeWrap > div {padding-right:20px;}
.agreeWrap > div label {margin-left:10px;}
.agreeWrap a {text-decoration:underline}

.agreeContent {border-radius:10px; padding:20px; } 
.agreeContent .privacy {font-size:16px; line-height:1.5em; padding:10px; border:1px solid #ccc; height:465px; overflow:auto;}
.agreeContent .privacy::-webkit-scrollbar {width:10px;}
.privacy::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 60%); border-radius:10px;}
.privacy::-webkit-scrollbar-track {background:rgba(0, 0, 0, 10%); }

.bul01 > li {position:relative; padding-left:14px; font-size:16px; font-weight:400; line-height:1.4em; margin-top:5px;}
.bul01 > li:first-child {margin-top:0px;}
.bul01 > li:Before {display:block; content:""; width:3px; height:3px; background:#070b24; border-radius:100%; position:absolute; left:0px; top:9px;}
.bul02 > li {padding-left:11px; text-indent:-11px; margin-top:6px; color:#666666; font-size:16px; font-weight:400; line-height:1.3em;}

.bulNum > li {padding-left:15px; text-indent:-15px; }
.bulNum > li:before {display:none;}

.bounce1 {
  animation-name:bounce1;
  animation-duration:4s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
}
.bounce2 {
  animation:bounce2 3s 0.4s ease-in-out; animation-iteration-count:infinite; animation-fill-mode:both;
}
.bounce3 {
  animation:bounce3 2.5s 1s ease-in-out; animation-iteration-count:infinite; animation-fill-mode:both;
}

@media (max-width:1180px) {
	#wrap {min-width:inherit}
	header .inner {height:80px;}
	.innerWrap {width:100%;padding:0 20px;}
	.visualWrap .keyVisual {min-height:660px;}
	.visualWrap .keyVisual > h2 {font-size:5vw;}
	.visualWrap .keyVisual .dec {font-size:2.5vw;}
	.visualWrap .keyVisual .date {font-size:4.5vw;}
	.visualWrap .keyVisual .host_wrap {padding-top:30px;}

	.listWarp > ul > li {width:33.3333% !important}
	.beginnerWrap .listWarp > ul {margin-left:-12px; margin-right:-12px;}
	.beginnerWrap .listWarp > ul > li {padding-left:12px; padding-right:12px;}
	
	.eventBanner {padding:0px;}
	.eventBanner .box .subject {font-size:4vw;}
	.eventBanner .box .dec {font-size:1.7vw; line-height:1.5em;}
}
@media (max-width:768px) {
	body {font-size:22px;}
	.mVer {display:block;}
	.pcVer {display:none !important;}
	#wrap {font-size:22px;}
	.paging a {width:58px; height:58px; font-size:24px;}
	.paging a.first, .paging a.last, .paging a.next, .paging a.prev {font-size:0px; width:58px; height:58px;}
/*
	header .inner {height:70px;}
	header .logo, header .brandLogo {width:146px; height:28px; background-position:left top; background-size:cover}
	header nav ul li:not(:first-child) {margin-left:40px;}
	header .inner ul li a {font-size:14px; line-height:26px;}
	header .inner ul li a.i_share {padding-left:22px; background-size:17px auto;}
	header .inner ul li:not(:first-child) {margin-left:10px; padding-left:10px;}
	header .inner ul li a.i_link {padding-right:17px; background-position:right 6px; background-size:12px auto;}
	header .inner ul li a.i_k {padding-left:25px; background-size:20px auto; background-position:left 2px}
	header .inner ul li a.i_n {padding-left:25px; background-size:20px auto; background-position:left 2px}
*/
	header .inner ul li a {font-size:18px;}

	.innerWrap {padding:0px 25px;}
	.visualWrap .keyVisual {min-height:550px;}
	.visualWrap:before {background-size:cover;width: 430px; height: 200px; margin-left:-46px; bottom:70px;}
	.visualWrap .keyVisual .host_wrap > dl dt {font-size:20px;}
	.visualWrap .keyVisual .host_wrap > dl dd img {height:40px;}

	.introduceWrap{padding-left:20px; padding-right:20px;}
	.introduceWrap h3 {font-size:43px;}
	.introduceWrap .info {font-size:19px;}
	.introduceWrap .box > ul > li:not(:first-child):before {display:none;}

	.title_dec {font-size:22px;}
	
	.listWarp > ul > li {width:50% !important}
	.listWarp .box .infoArea {font-size:22px;}
	.listWarp .box .rank .count {font-size:18px;}
	
	.eventBanner .gift {flex-wrap:wrap}
	.eventBanner .gift > li {width:calc(50% - 5px);}

	.photoArea-flip .action > li > button {font-size:20px;}
	
	.beginnerWrap .listWarp .box .infoArea {padding:20px}
	.beginnerWrap .listWarp .box .infoArea .brandInfo {max-width:62px;}
	
	.commentCoutn {font-size:1.2em;}
	.commentWrap .enter {font-size:20px;}
	.commentList {font-size:22px; line-height:1.5em;}
	.commentList > li {flex-wrap:wrap; justify-content:flex-start;}
	.commentWrap .input {font-size:18px;}
	.commentList > li .comment {flex:auto; width:100%; order:3; padding-top:10px;}
	.commentList > li .mail {order:1; padding-left:0px; width:auto; opacity:0.7;}
	.commentList > li .date {order:2; width:auto; opacity:0.7;}
	
	
	.profileContent .pop_body > div {width:100%;}
	.profileContent {max-width:450px !important;} 
	.eventBanner .box .subject {font-size:4.5vw; line-height:1.4em}

	.eventBanner .box .dec {font-size:2.2vw}
	.noticeWrap h3 {font-size:26px;}
	.bul01 > li {font-size:20px;}
	.shareContent .share > li {width:33.3333%; padding:20px 5px}
	.shareContent .share > li > a {font-size:20px; }
	
	.layerPop .pop_head .title {font-size:28px;}
	.agreeContent .privacy {font-size:20px;}
}

@media (max-width:480px) {
/*
	body {font-size:14px;}
	header .inner {height:60px;}
	.innerWrap {padding:0px 16px;} 
	.paging {margin:26px 0px 10px 0px; width:100%;}
    .paging a {font-size:13px; margin:0px 2px; padding:0px;}
	.paging a.first:after, .paging a.prev:after, .paging a.last:after, .paging a.next:after {width:6px; height:6px;}
	.paging a.next:before, .paging a.prev:before {width:6px; height:6px;}
    .paging a.first, .paging a.last {width:28px; height:28px;}
    .paging a.next {width:28px; height:28px; margin-left:0px;}
    .paging a.prev {width:28px; height:28px; margin-right:0px;}
	
	.profileContent .info .introduce .name {font-size:20px;}
	.profileContent .pop_body {font-size:13px;}
*/
}



.upscroll:not(.play-on) {transform:translateY(70px);opacity:0;}
.play-on.upscroll ,.play-on .upscroll {animation:upscroll 0.7s 0s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay10 ,.play-on .upscroll.delay10 {animation:upscroll 0.8s 0.1s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay20 ,.play-on .upscroll.delay20 {animation:upscroll 0.8s 0.2s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay30 ,.play-on .upscroll.delay30 {animation:upscroll 0.8s 0.3s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay40 ,.play-on .upscroll.delay40 {animation:upscroll 0.8s 0.4s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay50 ,.play-on .upscroll.delay50 {animation:upscroll 0.8s 0.5s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay60 ,.play-on .upscroll.delay60 {animation:upscroll 0.8s 0.6s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay70 ,.play-on .upscroll.delay70 {animation:upscroll 0.8s 0.7s ease-in-out;animation-fill-mode:both;}
.play-on.upscroll.delay80 ,.play-on .upscroll.delay80 {animation:upscroll 0.8s 0.8s ease-in-out;animation-fill-mode:both;}
@keyframes upscroll {
	0%		{transform:translateY(70px);opacity:0;}
	100%	{transform:translateY(0px);opacity:1;}
}

.downscroll:not(.play-on) {transform:translateY(-70px) ;opacity:0;}
.play-on.downscroll ,.play-on .downscroll {animation:downscroll 0.7s 0.0s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay10 ,.play-on .downscroll.delay10 {animation:downscroll 0.7s 0.1s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay20 ,.play-on .downscroll.delay20 {animation:downscroll 0.7s 0.2s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay30 ,.play-on .downscroll.delay30 {animation:downscroll 0.7s 0.3s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay40 ,.play-on .downscroll.delay40 {animation:downscroll 0.7s 0.4s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay50 ,.play-on .downscroll.delay50 {animation:downscroll 0.7s 0.5s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay60 ,.play-on .downscroll.delay60 {animation:downscroll 0.7s 0.6s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay70 ,.play-on .downscroll.delay70 {animation:downscroll 0.7s 0.7s ease-in-out;animation-fill-mode:both;}
.play-on.downscroll.delay80 ,.play-on .downscroll.delay80 {animation:downscroll 0.7s 0.8s ease-in-out;animation-fill-mode:both;}

@keyframes downscroll {
	0%		{transform:translateY(-70px) ;opacity:0;}
	100%	{transform:translateY(0px);opacity:1;}
}