@charset "utf-8";
/* CSS Document */
.box0{ padding:0 4vw}
.box1{ width:1400px; margin:0 auto; max-width:94%}

.gnb li.m_hide,
.gnb .mLink{ display:none}
body:not(.pop){ display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100)}

#header{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:#000; color:#fff; transition: transform 1s; border-bottom:1px solid rgba(255,255,255,.1)}
#header .top_wrap{ position:relative}
#header .top_wrap .wrapH,
#header .top_wrap .gnb_wrap .dp1{ height:var(--headerH)}
.headerT{ padding-top:var(--headerH)}
#header .top_wrap .wrapIn{ display:flex; align-items:center; gap:0 4vw}
#header .top_wrap .wrapIn > *{ position:relative; z-index:2}
#header .top_wrap .logo{ height:90%; position: relative;}
#header .top_wrap .logo > a{ display:block; height:5.5em; max-height:100%; overflow:hidden}
#header .top_wrap .logo > a .in{ display:block; height:100%}
#header .top_wrap .logo > a img{ height:100%; display:block}
#header .top_wrap .logo .ment{ display: none; height: 1.5em; padding: 0 1em; border-radius: 1.5em; background: var(--siteC); line-height: 1.5em; position: absolute; left: 100%; bottom: 0;}
#header .top_wrap .logo .ment .xi{ 
    font-size: 1em;
    color: var(--siteC);
    position: absolute;
    left: -8px;
    top: 0px;
    transform: rotate(270deg)
}
#header .top_wrap .logo .ment .t1{font-size: .938em; font-weight: 700;}
#header .top_wrap .gnb_wrap{ flex:1 1 0%; min-width:0; max-width:70em; margin:0 auto}
#header .top_wrap .gnb_wrap .gnb{ justify-content:space-around}
#header .top_wrap .gnb_wrap .gnb > li{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1{ transition:.3s}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .tt{ font-weight:600; font-size:1.25em; padding-top:.25em; position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va{ position:relative}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ content:""; position:absolute; left:50%; bottom:calc(100% + .25em); width:.5em; height:.5em; border-radius:50%; opacity:0; transition:.3s; background:var(--siteC);}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:before{ transform:translateX(-80%)}
#header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after{ transform:translateX(30%)}
#header .top_wrap .gnb_wrap .gnb > li.on .dp1{ color:var(--siteC2)}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:before,
#header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after{ opacity:1}

#header .top_wrap .gnb_wrap .gnb > li .dp2{ display:block; position:absolute; top:100%; left:50%; width:12.5em; padding:0 1em; margin-top:-.875em; background-image:var(--crGrad2); border-radius:1em; color:#fff; transform:translateX(-50%); opacity:0; visibility:hidden; transition:padding .2s;}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a{ padding:.625em 0; transition:.2s;}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .tt{ font-size:1.063em; font-weight:500;}
#header .top_wrap .gnb_wrap .gnb > li:hover .dp2{ padding-top:1em; padding-bottom:1em; opacity:1; visibility:visible;}
#header .top_wrap .gnb_wrap .gnb > li .dp2 > li:hover > a{ background:#fff; border-radius:.5em; color:#333;}


#header .top_wrap .etc_wrap{ display:flex; align-items:center; gap:0 4vw}
#header .top_wrap .etc_wrap .etcBtn{ width:4em; height:4em; display:flex; align-items:center; justify-content:center}
#header .top_wrap .etc_wrap .etcBtn .ico{ font-size:2.25em}
#header .top_wrap .etc_wrap .mem_wrap{ border-radius:3em; overflow:hidden; display:flex; align-items:center; border:1px solid rgba(255,255,255,.3)}
#header .top_wrap .etc_wrap .mem_wrap > li > a{ display:flex; align-items:center; height:2.5em; position:relative; gap:.25em; padding:0 1em}
#header .top_wrap .etc_wrap .mem_wrap > li:first-child > a{ padding-left:1.5em}
#header .top_wrap .etc_wrap .mem_wrap > li:last-child > a{ padding-right:1.5em}
#header .top_wrap .etc_wrap .mem_wrap > li:not(:first-child) > a:after{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:100%; background:#fff; opacity:.3}
#header .top_wrap .etc_wrap .mem_wrap > li > a .tt{ font-weight:700}
#header .top_wrap .etc_wrap .mem_wrap > li > a .ico{ font-size:1.25em }

.scroll:not(.up) #header{ transform:translateY(-100%)}

#header .all_wrap { color:#222; } 
#header .all_wrap .all { width:4.5em; } 
#header .all_wrap .all_btn { position:relative; display:block; width:1.675em; height:1.275em; margin-left:auto; } 
#header:not(.active) .all_wrap .all_btn { /*filter:var(--crWhitefil); */ } 
#header .all_wrap .all_btn .ham,
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { display:block; width:100%; height:2px; background:#fff; transition:.2s, background 0s; } 
#header .all_wrap .all_btn .ham:before,
#header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0; } 
#header .all_wrap .all_btn .ham:before { top:calc(50% - 1px); width:100%; } 
#header .all_wrap .all_btn .ham:after { top:calc(100% - 2px); width:100%; } 
#header .all_wrap .all_btn:hover .ham:before { width:100%; } 
#header .all_wrap .all_btn:hover .ham:after { width:100%; } 

#header .all_wrap .all .ment{ position:absolute; left:50%; top:100%; transform:translateX(-50%); display:inline-flex; height:1.5em; background:var(--siteC); color:#fff; border-radius:1em; white-space:nowrap; line-height:1; align-items:center; padding:0 1em; animation-name: mentAni; animation-duration: 2s; animation-iteration-count: infinite}
#header .all_wrap .all .ment .t1{ font-size:.75em; font-weight:700}
#header .all_wrap .all .ment .arrow{ position:absolute; left:50%; transform:translate(-50%, .25em); font-size:1em; bottom:100%; color:var(--siteC)}
@keyframes mentAni{
0% { top:calc(100% + 1.2em)}
50% {top:calc(100% + .7em)}
100% { top:calc(100% + 1.2em)}
}

#header .all_wrap .all_layer { position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden; } 
#header .all_wrap .all_layer .all_close { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; backdrop-filter:blur(.75em); } 
#header .all_wrap .all_layer .all_inner { position:absolute; top:0; right:0; width:30em; max-width:100%; height:100%; background:#fff; box-shadow:-1em 0 1em rgba(0,0,0,.1); transform:translateX(100%); } 
#header .all_wrap .all_layer .all_inner > .wrap_in { gap:2em; padding:3em 3em; } 

#header .all_wrap .all_layer .wrap_top a { transition:.2s; } 
#header .all_wrap .all_layer .wrap_top .all_logo { } 
#header .all_wrap .all_layer .wrap_top .all_logo .in { gap:0 1em; width:22em; max-width: 90%;} 
#header .all_wrap .all_layer .wrap_top .all_logo .in img { width:10em; } 
#header .all_wrap .all_layer .wrap_top .all_logo .in .logo_tt { font-size: 1.500em; font-weight: 600; } 
/* #header .all_wrap .all_layer .wrap_top .all_mem { gap:.25em; padding:1em 0; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in { height:2.25em; padding:0 1em; border:1px solid #ddd; border-radius:.25em; line-height:normal; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size:.938em; font-weight:500; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { background:var(--siteC); border-color:var(--siteC); color:#fff; }  */
#header .top_wrap .etc_wrap .etcH{ height:2.5em;}

#header .all_wrap .all_layer .wrap_top .all_mem { gap:.25em; padding:2em 0 1em; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li > a{ width: 100%; background: var(--siteC); text-align: center; gap:.25em; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: .5em;}
#header .all_wrap .all_layer .wrap_top .all_mem > li { flex: 1; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .icon { position: absolute; left: .5em; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in { position:relative; height:2.25em; padding:0 1em; border:1px solid var(--siteC2); background:var(--siteC2); color: #fff; border-radius:.25em; line-height:normal; align-items: center; justify-content: center; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size:.938em; font-weight:500; } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { } 
#header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover .icon { color: #fff; } 

#header .all_wrap .all_layer .wrap_middle { } 
#header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap:wrap; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li { flex:1 1 100%; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.m_mypage { display:block; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul.flex { display:block; } 
#header .all_wrap .all_layer .wrap_middle .gnb a { position:relative; justify-content:flex-start; text-align:left !important; font-weight:500; transition:.2s; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more { } 
/* #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link { display:none; }  */
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display:flex !important; padding-right:2.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow { position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before { content:"\e943"; font-size:1.250em; display:block; transition:.2s; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more > ul { display:none; } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on > a .arrow:before { transform:rotate(-180deg); } 
#header .all_wrap .all_layer .wrap_middle .gnb li.more.on > ul { display:block; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul { padding:1em 1em; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul li > a { padding:.875em .5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow { right:.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li { border-bottom: 1px solid #eaeaea;} 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { height:4em; padding:0 1.5em; border:solid var(--crGray); border-width:1px 0; margin-bottom:-1px; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size:1.188em; } 
#header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1,
#header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1 { background-image:var(--crGrad1); color:var(--siteC); } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a { padding-left:1.5em; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before { content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC2); border-radius:50%; transform:translateY(-50%); } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .tt { font-size:1.063em; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a { background:var(--crGray) } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.on > a { color:var(--siteC); font-weight:600; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 { background:var(--crGray2); } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a { color:#444; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a { border-top:1px dashed #ddd; } 
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.act > a .tt,
#header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.on > a .tt { text-decoration:underline; } 

.allGnbOn { overflow-y:hidden } 
.allGnbOn body { overflow-y:scroll } 
.allGnbOn #header .all_wrap .all_btn { z-index:999; position:fixed; top:1em; right:1vw; width:3em; height:3em; filter:var(--crBlackfil) !important; } 
.allGnbOn #header .all_wrap .all_btn .ham { background:transparent !important; transition:0s; } 
.allGnbOn #header .all_wrap .all_btn .ham:before,
.allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important; height:2px; } 
.allGnbOn #header .all_wrap .all_btn .ham:before { transform:rotate(45deg); } 
.allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg); } 
.allGnbOn #header .all_wrap .all_layer { z-index:99; opacity:1; visibility:visible; } 
.allGnbOn #header .all_wrap .all_layer .all_close { opacity:1; transition:.4s; } 
.allGnbOn #header .all_wrap .all_layer .all_inner { transform:translateX(0); transition:.4s; } 





#footer{ z-index:1; color:#fff; background:#000; padding:4em 0 5em 0; border-top:1px solid rgba(255,255,255,.1)}
#footer .goTop{ position:fixed; right:1em; bottom:1em; border-radius:50%; width:3.5em; line-height:3.5em; text-align:center; background:var(--siteC2); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s}
#footer .goTop .xi{ font-size:1.5em; transition:.3s}
#footer .goTop:hover .xi{ transform:translateY(-.25em)}
.scroll #footer .goTop{ opacity:1; transform:translateY(0)}
#footer .wrapIn{ display:flex; gap:4em;}
#footer .logo_wrap{}
#footer .logo img{ height:4.5em}
#footer .info_wrap{ flex:1 1 0%; min-width:0; display:flex; justify-content:space-between; align-items:flex-start}
#footer .info{ overflow:hidden; flex:1 1 0%; min-width:0}
#footer .info > li{ float:left; margin-right:3em; margin-bottom:.75em; opacity:.8; position:relative}
#footer .info > li.point{ font-weight:700}
#footer .info > li.br{ clear:left}
#footer .info > li.copyright{ font-size:.813em; text-transform:uppercase; opacity:.5; margin-top:1em}
#footer .etc_wrap{ display:flex; flex-direction:column; gap:1.5em; align-items:flex-end}
#footer .menu_wrap{ display:flex; gap:3em}
#footer .menu_wrap > li > a{ position:relative}
#footer .menu_wrap > li:not(:first-child) > a:before{ content:"·"; position:absolute; left:-1.5em; top:0; transform:translateX(-50%); opacity:.5; color:#fff}
#footer .menu_wrap > li.point > a{ font-weight:700; color:var(--siteC)}
.sns_st{ display:flex; gap:1em}
.sns_st > li > a{ display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color:#fff; border-radius:50%; transition:.3s}
.sns_st > li > a:hover{ background:#fff; color:#111}

#contents{ flex:1; min-height:0; box-sizing:border-box; padding-bottom:5em; position:relative}
.sub #contents{ display:flex; flex-direction:column}
#contents .sub_top_wrap{ margin-bottom:3em}
#contents .sub_top_wrap .tit_wrap{ background:#666; color:#fff} 
#contents .sub_top_wrap .tit_wrap .wrapIn{ display:flex; align-items:center; justify-content:space-between; height:5em}
#contents .sub_top_wrap .tit_wrap .tit{ font-weight:700; font-size:1.875em}
#contents .sub_top_wrap .nav{ display:inline-flex; align-items:center; gap:0 1em}
#contents .sub_top_wrap .nav > li:not(.home):before{ content:"\e940"; font-family:xeicon; margin-right:.5em}
#contents .sub_top_wrap .nav > li.home > a{ width:2em; height:2em; border-radius:50%; background:#fff; color:#111; display:flex; align-items:center; justify-content:center}
#contents .sub_top_wrap .nav > li.home > a .xi{ font-size:1em}
#contents .sub_cont_wrap{ flex:1 1 0%; min-height:0; background:#fff; border-radius:1em; box-sizing:border-box}
#contents .sub_menu_wrap{ margin-top:-1em}
#contents .sub_menu_wrap .gnb{ padding:0 2em}
#contents .sub_menu_wrap .gnb > li.on .dp2{ border-radius:1em 1em 0 0; overflow:hidden}
#contents .sub_menu_wrap .gnb > li.on .dp2 > li > a{ background:rgba(255,255,255,.2); color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; height:3.5em; padding:0 1.5em; box-sizing:border-box; min-width:10em; position:relative}
#contents .sub_menu_wrap .gnb > li.on .dp2 > li:not(.on) > a:before{ content:""; position:absolute; left:-1px; width:1px; height:30%; top:50%; transform:translateY(-50%); background:#fff; opacity:.3}
#contents .sub_menu_wrap .gnb > li.on .dp2 > li > a .tt{ font-weight:700; font-size:1.125em}
#contents .sub_menu_wrap .gnb > li.on .dp2 > li.on > a{ background:#fff;  color:#111}

.pageBgSlideW{ position:fixed; left:0; top:0; width:100%; height:100%}
.pageBgSlideW .el{ height:100vh}
.pageBgSlideW .el .bg{ height:100%; transform:scale(1.2)}
.pageBgSlideW .el.swiper-slide-active .bg,
.pageBgSlideW .el.swiper-slide-duplicate-active .bg{ transform:scale(1); transition:3s}
.pageBgSlide-pagination{ position:fixed; width:3.5em; right:1em; bottom:6em; display:flex; flex-direction:column; align-items:center; z-index:10; gap:.5em}
.pageBgSlide-pagination > span{ width:.75em; height:.75em; background:#fff}

.dp1on .gnb .dp2{ display:none!important}
.dp2on .gnb > li,
.dp2on .gnb > li .dp1,
.dp2on .gnb > li .dp3{ display:none!important}
.dp2on .gnb > li.on{ display:block!important}
.dp3on .gnb > li,
.dp3on .gnb > li .dp1,
.dp3on .gnb > li .dp2 > li,
.dp3on .gnb > li .dp2 > li > a{ display:none!important}
.dp3on .gnb > li.on,
.dp3on .gnb > li .dp2 > li.on{ display:block!important}

#contents .doc > .box1{ width:auto; padding:2.5em; padding-bottom:5em }

/**/
.layer_inp{ display:block; position:relative}
.layer_inp .inp:focus{ z-index:1}
.layer_inp .inp{ border:1px solid #ddd; margin-bottom:-1px; padding:1em; padding-left:4em; height:4em; box-sizing:border-box; width:100%; position:relative; font-weight:500; font-size:1.188em}
.layer_inp select.inp{ padding-left:3.75em}
.layer_inp select.inp optgroup,
.layer_inp select.inp option{ font-weight:400; font-size:.938em}
.layer_inp:first-child .inp{ border-top-left-radius:.5em; border-top-right-radius:.5em}
.layer_inp:last-child .inp{ border-bottom-left-radius:.5em; border-bottom-right-radius:.5em}
.layer_inp .tt{ position:absolute; left:4.25em; top:0; width:calc(100% - 4.25em); height:100%; display:flex; align-items:center; box-sizing:border-box; padding:0 .5em; z-index:2; color:#777; font-weight:700; cursor:text}
.layer_inp .tt > i{ font-size:1.125em}
.layer_inp .ico{ font-size:1em; position:absolute; left:0; top:0; width:4.5em; height:100%; display:flex; align-items:center; justify-content:center; z-index:2}
.layer_inp .ico:before{ font-size:1.5em}
.layer_inp .inp:focus{ border-color:var(--siteC); outline:none}
.layer_inp .inp:valid ~ .tt,
.layer_inp .inp:focus ~ .tt{ width:auto; height:1em; transform:translateY(-50%); background:#fff; color:var(--siteC)}
.layer_inp .inp:valid ~ .tt > i,
.layer_inp .inp:focus ~ .tt > i{ font-size:.875em}
.login_wrap{ width:40em; max-width:100%; margin:0 auto}
.login_wrap.w1{ width:56em}
.login_wrap .login_tit{ display:flex; justify-content:center; align-items:center; gap:1em; padding:5em 0 2em 0; color:#fff; text-transform:uppercase}
.login_wrap .login_tit.p1{ padding-top:3em}
.login_wrap .login_tit .t1{ font-weight:700; font-size:2em}
.login_wrap .login_tit .t2{ font-weight:700; font-size:3em}
.login_wrap .login{ padding:3em; border-radius:1em; box-shadow:0 0 2em rgba(0,0,0,.1); background:#fff; display:flex; flex-direction:column; gap:1em 0}
.login_wrap .login.g0{ gap:0}
.login_wrap .login.g1{ gap:.5em 0}
.login_wrap .login > *{ width:100%; box-sizing:border-box}
.login_wrap .btn{ height:3.5em; border-radius:.5em; border:1px solid transparent; font-weight:700; font-size:1.313em}
.login_wrap .btn .xi{ font-size:1em; margin-right:.25em; transform:translateY(-.063em)}
.login_wrap .btn.c1{ background:#000; color:var(--siteC2)}
.login_wrap .btn.c2{ background:#111; color:#fff}
.login_wrap .btn.s1{ font-size:1.125em}
.login_wrap .sns_tit{ position:relative; margin-top:2em; text-align:center}
.login_wrap .sns_tit:before{ content:""; position:absolute; left:0; top:50%; width:100%; height:1px; background:#ddd}
.login_wrap .sns_tit .tt{ display:inline-block; background:#fff; position:relative; padding:0 1em}
.login_wrap .btn.sns{ position:relative; height:3.5em; font-size:1.125em; padding:0 3em}
.login_wrap .btn.sns .ico{ position:absolute; left:0; top:0; width:3em; height:100%; border-right:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; box-sizing:border-box; margin:0}
.login_wrap .btn.sns .ico:before{ font-size:1.5em}
.login_wrap .btn.sns.st1{ width:3.5em; height:3.5em; border-radius:50%; flex:0 0 auto; padding:0; display:flex; align-items:center; justify-content:center}
.login_wrap .btn.sns.st1 .ico{ position:relative; border:none}
.login_wrap .btn.kakao{ background:#ffe500; color:#111}
.login_wrap .btn.kakao .ico:before{ content:"\ebee"}
.login_wrap .check_wrap{ padding:0 .5em}
.login_wrap .btn_wrap{}
.login_wrap .link_wrap{ padding:0 .5em; padding-top:.5em; gap:0 1.5em}
.login_wrap .link_wrap a{ font-weight:500; font-size:.938em; color:#666; position:relative}
.login_wrap .link_wrap a:after{ content:"\e93f"; font-family:xeicon; margin-left:.25em}
.login_wrap .link_wrap a.point{ font-size:1.063em; font-weight:700; color:#111}
.login_wrap .link_wrap a:hover:before{ content:""; position:absolute; left:0; top:100%; width:calc(100% - 1em); height:1px; background:#aaa}
.login_wrap .link_wrap a.point:hover:before{ background:#111}

.agree_box{ border-radius:.5em; border:1px solid #ddd; padding:1.5em; color:#666; font-size:.938em; line-height:1.4}
.agree_box.st1{ border-radius:1em; padding:3em; font-size:1em; line-height:1.5; font-weight:300}
.agree_box.h1{ height:8em; overflow-y: auto; }
.agree_box strong{ color:#111; font-weight:700}

.fin_box{ border-radius:.5em; border:1px solid transparent; padding:3em; background:#f5f5f5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.5em}
.fin_box .tit{ font-size:1.5em; font-weight:700; color:#111; text-align:center}
.fin_box .tit.s1{ font-size:1.375em}
.fin_box .tt1{ line-height:1.5; font-size:1.063em; color:#666}
.fin_box .tt1.s1{ font-size:.938em}
.fin_box .fs:not(:last-child):after{ content:","}
.fin_box .fin_ico{ font-size:4em; opacity:.1; margin-bottom:.25em}
.fin_box .tit,
.fin_box .tit > i,
.fin_box .tt{ word-break:keep-all}

.join_family .list{ display:flex; flex-wrap:wrap; margin:-.25em}
.join_family .list > li{ width:33.33%}
.join_family .list > li.on{ display:none}
.join_family .list > li > a{ border:1px solid #ddd; padding:1em; border-radius:.5em; margin:.25em}
.join_family .list > li > a:focus,
.join_family .list > li > a:hover{ box-shadow:0 0 1em rgba(0,0,0,.1); font-weight:500; color:var(--siteC)}

.join_family.st1 .list > li{ position:relative}
.join_family.st1 .list > li:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%}
.join_family.st1 .list > li.on{ display:block}
.join_family.st1 .list > li > a{ padding:.75em; background:#f5f5f5}
.join_family.st1 .list > li > a .t1{ font-size:.938em; font-weight:500; color:#666}

.btn_vf{ padding:2em; border:1px solid #ddd; border-radius:.5em; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:8em; transition:.3s}
.btn_vf .ico{ width:8em; height:8em; background:#f5f5f5; border-radius:50%; display:flex; flex-direction:column; justify-content:center; margin-bottom:1em}
.btn_vf .ico img{ height:50%}
.btn_vf .t1{ font-weight:700; font-size:1.25em}
.btn_vf .t2{ color:#666; margin-top:.5em}
.btn_vf .st{ background:#333; color:#fff; padding:.75em; border-radius:2em; width:100%; max-width:12em; box-sizing:border-box; font-size:1.063em; font-weight:500; margin-top:1.5em}
.btn_vf:hover,
.btn_vf:focus{ border-color:var(--siteC); box-shadow:0 0 1em rgba(0,0,0,.1)}

.step_st{ display:flex; justify-content:center; gap:0 5em; margin-bottom:2.5em; color:#fff}
.step_st > li{ opacity:.5}
.step_st > li .ico{ position:relative}
.step_st > li:not(:last-child) .ico:before{ content:""; position:absolute; left:100%; top:50%; width:5em; height:1px; background:#fff}
.step_st > li .ico .xi{ font-size:1em; width:1.5em; height:1.5em; margin:0 auto; display:flex; align-items:center; justify-content:center; color:#fff; background:#fff; border-radius:50%}
.step_st > li .tt{ margin-top:.5em; text-align:center; color:#fff; font-size:1.125em}
.step_st > li.on{ opacity:1}
.step_st > li.on .tt{ color:var(--siteC2)}
.step_st > li.on .ico .xi,
.step_st > li.on .ico:before{ background:var(--siteC2)}
.step_st > li.on .ico .xi:before{content:"\e928"}
.step_st > li:not(.on) .ico .xi{ transform:scale(.5)}

/**/
.img_yt{ overflow:hidden; border-radius:1em}
.img_yt > a{ display:block; position:relative}
.img_yt > a img{ width:100%; display:block}
.img_yt > a .more{ position:absolute; right:2em; bottom:2em; padding:0 1.5em; border-radius:.5em; height:3.5em; display:flex; align-items:center; background:#ff0000; color:#fff; gap:.5em}
.img_yt > a .more .ico{ font-size:2em}
.img_yt > a .more .arrow{ font-size:1em; margin-left:.5em}
.img_yt > a .more .t1{ font-weight:700; font-size:1.125em; transform:translateY(.125em)}

.bdWL{ border-left:1px solid var(--siteBd1)}
.bdWR{ border-right:1px solid var(--siteBd1)}
.bdWT{ border-top:1px solid var(--siteBd1)}
.bdWB{ border-bottom:1px solid var(--siteBd1)}

.sub_buy_tit{ padding:3em 1em; text-align:center; display:flex; flex-direction:column; gap:1em; border-radius:1em; color:#fff}
.sub_buy_tit .t1{ font-size:2.5em; font-weight:700; word-break: keep-all;}
.sub_buy_tit .t2{ font-size:1.375em; color:var(--siteC2); word-break: keep-all;}
.sub_buy_list{ display:flex; flex-direction:column; gap:3em; margin-top:3em}
.sub_buy_list > li .wrap_in{ display:flex; border-radius:1em; background: #336; padding:1px}
.sub_buy_list > li .wrap_in .wrap_tit{ width:12em; box-sizing:border-box; color:#fff; display:flex; align-items:center; text-align:center; position:relative; border-radius:1em 0 0 1em}
.sub_buy_list > li.c0 .wrap_in{ background: #093}
.sub_buy_list > li.c1 .wrap_in{ background: #36C}
.sub_buy_list > li.c2 .wrap_in{ background: #C33}
.sub_buy_list > li .wrap_in .wrap_tit .in{ width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:.5em}
.sub_buy_list > li .wrap_in .wrap_tit .in .t1{ font-weight:700; font-size:1.5em}
.sub_buy_list > li .wrap_in .wrap_tit .in .t2{ font-size:1.25em}
.sub_buy_list > li .wrap_in .wrap_tit .sale{ position:absolute; left:1.5em; top:-.5em}
.sub_buy_list > li .wrap_in .wrap_tit .sale:before{ content:""; position:absolute; top:0; width:100%; height:.5em; background:#000; opacity:.8; padding:0 .25em; left:-.25em; transform:perspective(1em) rotateX(15deg)}
.sub_buy_list > li .wrap_in .wrap_tit .sale .inW{ background:#FC0; color:#111; display:flex; align-items:center; justify-content:center; height:2.25em; padding:0 1em; position:relative; border-radius:0 0 .5em .5em}
.sub_buy_list > li .wrap_in .wrap_tit .sale .inW .t1{ font-weight:700; font-size:.938em}
.sub_buy_list > li .wrap_in .wrap_list{ flex:1 1 0%; min-width:0; display:flex; gap:1em; background:#fff; padding:1em; border-radius:0 1em 1em 0}
.sub_buy_list > li .wrap_in .wrap_list > li{ width:calc(50% - .5em)}
.sub_buy_list > li .wrap_in .wrap_list > li .in{ border:1px solid #ddd; display:flex; box-sizing:border-box; height:100%; border-radius:.5em}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con{ flex:1 1 0%; min-width:0; padding:1.5em; display:flex; flex-direction:column; gap:1em; justify-content: space-between;}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .tit{ display:flex; flex-wrap:wrap; align-items:center; gap:1em}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .t1{ font-size:1.375em; font-weight:700; color:var(--siteBuyC1); word-break: keep-all;}
.sub_buy_list > li .wrap_in .wrap_list > li.c1 .in .con .t1{ color:var(--siteBuyC2)}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .ico{ /* margin-left:1em; */ height:2em; border-radius:2em; display:flex; align-items:center; justify-content:center; background:var(--siteC2); gap:.25em; padding:0 1em; color:#fff; overflow:hidden; transform:translateY(-.125em)}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .ico .tt{ font-weight:700; transform:translateY(.125em)}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .ico .tt:after{ content:"Package"}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .ico .xi:before{content:"\ea3a"}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .t2{ color:#777; font-size:1.063em}
.sub_buy_list > li .wrap_in .wrap_list > li .in .con .tt_price{ margin:.5em 0 0 auto}
.sub_buy_list > li .wrap_in .wrap_list > li .in .btn{ width:8em; overflow:hidden; border-radius:0 .5em .5em 0}
.sub_buy_list > li .wrap_in .wrap_list > li .in .btn .st{ border-left:1px dashed #ccc; background:#555; display:flex; flex-direction:column; gap:.5em; color:#fff; align-items:center; justify-content:center; box-sizing:border-box; height:100%}
.sub_buy_list > li .wrap_in .wrap_list > li .in .btn .st .t1{ font-size:1.125em; font-weight:700}
.sub_buy_list > li .wrap_in .wrap_list > li .in .btn .st .arrow{ font-size:0}
.sub_buy_list > li .wrap_in .wrap_list > li .in .btn .st .arrow:before{ content:"\ea40"}
.sub_buy_list > li .wrap_in .wrap_list > li .in:hover{  box-shadow:0 0 1em rgba(0,0,0,.2); transition:.3s}
/* .sub_buy_list > li .wrap_in .wrap_list > li .in:hover{ border-color:var(--siteC3); box-shadow:0 0 1em rgba(0,0,0,.2); transition:.3s} */ /* 배경 노랑일떄 */
.sub_buy_list > li .wrap_in .wrap_list > li .in:hover .btn .st{ background:#333; transition:.3s}
/* .sub_buy_list > li .wrap_in .wrap_list > li .in:hover .btn .st{ background:var(--siteC3); transition:.3s} */ /* 배경 노랑일떄 */
.sub_buy_list > li .wrap_in .wrap_list > li .in:hover .btn .st .arrow{ font-size:2em}

.sub_buy_list.st1{ margin-top:1em}
.sub_buy_list.st1 > li .wrap_in,
.sub_buy_list.st1 > li .wrap_in .wrap_list{ gap:0}
.sub_buy_list.st1 > li .wrap_in .wrap_list > li{ width:100%}
.sub_buy_list.st1 > li:hover .wrap_in{ pointer-events: none;}

.sub_buy_banner{
	display: block;
	padding: 3em 3em;
    text-align: center;
    border-radius: 1em;
    color: #fff;
	position: relative;
}	
.sub_buy_banner::after{
	content: '';
	width: calc(100% - 1em);
	height: calc(100% - 1em);
	border: 2px solid var(--siteC2);
	border-radius: .8em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.sub_buy_banner .t1 {
	margin-bottom: .5em;
    font-size: 2em;
    font-weight: 700;
    word-break: keep-all;
}
.sub_buy_banner .ico {
    display:inline-flex;
    height: 2.5em;
    border-radius: 2.5em;
    align-items: center;
    justify-content: center;
    background: var(--siteC);
    gap: .25em;
    padding: 0 1.5em 0 2em;
    color: #fff;
    overflow: hidden;
}
.sub_buy_banner .ico .tt{ font-weight: 700;}
.sub_buy_banner .ico .xi{ transition: all .3s;}
.sub_buy_banner:hover .ico .xi{ transform: translateX(10px);}

.sub_book_info{ display:flex; align-items:flex-start; gap:2em}
.sub_book_info .book_info{ background:#f5f5f5; overflow:hidden; border-radius:1em; display:flex; flex:1 1 0%; min-width:0; border:1px solid #666}
.sub_book_info .book_info .bookImgW{ width:40.5%; position:relative}
.sub_book_info .book_info .bookImgW.st2{ 
    display: flex;
    background: none;
}
.sub_book_info .book_info .bookImgW .poster{
    width: 100%;
    height: 0;
    margin: 2em 0 0 1.5em;
    padding-bottom: calc(150% - 3.5em);
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 2px 3px 15px rgba(0,0,0,.2);
}
.sub_book_info .book_info .bookImgW .poster .poster_img{}
.bookImgW .poster .poster_img{ position: relative;}
.bookImgW .poster .poster_img > .tt{
    display: block;
    width: 22%;
    height: 9%;
    font-weight: 700;
    font-size: 1.1em;
    color: #fff;
    text-align: center;
    position: absolute;
    right: 8%;
    bottom: 34%;
}


.sub_book_info .book_info .con_wrap{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:2em; display:flex; flex-direction:column; /* gap:1em */}
.sub_book_info .book_info .con_wrap .tit{ font-weight:700; font-size:1.5em}
.sub_book_info .book_info .con_wrap .tt1{ margin-top: 0.5em;font-weight: 600; font-size: 1.125em;}
.sub_book_info .book_info .con_wrap .tt{ margin-top: 1em; font-size:1em; color:#666; line-height:1.5; /* white-space:pre-wrap; */ word-break: keep-all;}
.sub_book_info .book_info .con_wrap .tt strong{ color:#111; font-weight:700}
.sub_book_info .book_info .con_wrap .tt + .tit{ margin-top:1.5em}
.sub_book_info .date_select{ width:34%; background:#111; display:flex; flex-direction:column; border-radius:1em}
.sub_book_info .date_select .titW{ color:#fff; background:var(--siteBuyC2); padding:1em; border-radius:1em 1em 0 0}
.sub_book_info .date_select .titW .t1{ font-weight:700; font-size:1.313em}
.sub_book_info .date_select .list{ flex:1 1 0%; min-height:0; display:flex; flex-direction:column; gap:.5em; padding:1em}
.sub_book_info .date_select .list > li{ flex:1; box-sizing:border-box}
.sub_book_info .date_select .list > li > .in{ position:relative; display:flex; align-items:center; height:100%; border-radius:1em; box-sizing:border-box; background:#fff; border:2px solid #fff; overflow:hidden; box-sizing:border-box; height:4em}
.sub_book_info .date_select .list > li > .in .twrap{ flex:1 1 0%; min-width:0; padding:0 1em}
.sub_book_info .date_select .list > li > .in .twrap .t1{ font-weight:700; font-size:1.063em}
.sub_book_info .date_select .list > li > .in .btn{ display:flex; height:100%; border-radius:1em; overflow:hidden}
.sub_book_info .date_select .list > li > .in .btn .st{ width:6em; height:100%; background:var(--siteC); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; box-sizing:border-box; padding:.5em; text-align:center}
.sub_book_info .date_select .list > li > .in .btn .st:not(:first-child){border-left:1px solid #fff}
.sub_book_info .date_select .list > li > .in .btn .st.c1{ background:#333}
.sub_book_info .date_select .list > li > .in .btn .st .t1{font-weight:700; font-size:1.063em}
.sub_book_info .date_select .list > li > .in .btn .st .t2{font-weight:700; font-size:.938em}
.sub_book_info .date_select .list > li > .in:hover{ border-color:#111}
.sub_book_info .date_select .list > li > .in .st:hover{ filter:hue-rotate(240deg) invert(1)}

.bookImgW{ box-sizing:border-box; background:#000; position:relative}
.bookImgW .resize{ height:0; padding-bottom:150%; width:100%; background-position:center top}
.bookLabel{ position:absolute; left:50%; top:0; transform:translate(-100%, 0%) rotate(-45deg); transform-origin:50% 0%; -webkit-font-smoothing: subpixel-antialiased;  height:3.5em; background: #F60; color:#fff; box-sizing:border-box; padding-top:1em; padding-right:.25em; width:100%; display:flex; align-items:center; justify-content:center; box-shadow:0 0 .5em rgba(0,0,0,.2); gap:.125em}
.bookLabel .tt{ font-weight:700; font-size: 1.25em;}
.bookLabel .tt:before{ content:"무료"}
.bookLabel .ico{ font-size:1em; transform:translateY(-.125em)}
.bookLabel .ico:before{content:"\e9da"}

.sub_book_view .wrap_date{ background:#111; color:#fff; display:flex; align-items:center; padding:1em 2em; border-radius:1em 1em 0 0}
.sub_book_view .wrap_date .t1{ font-weight:700; font-size:1.5em}
.sub_book_view .wrap_info{ background:#222; border:1px solid #111; padding:2em}

.wrapRace{ display:flex; flex-direction:column; gap:.5em}
.wrapRace .area{ display:flex; border-radius:1em; position:relative}
.wrapRace .area:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:2px solid #666; border-radius:1em}
.wrapRace .area.on.a1:before{ border-color:var(--siteAreaC1)}
.wrapRace .area.on.a2:before{ border-color:var(--siteAreaC2)}
.wrapRace .area.on.a3:before{ border-color:var(--siteAreaC3)}
.wrapRace .area .titW{ position:relative; width:7em; border-radius:1em; display:flex; align-items:center; justify-content:center; color:#fff}
.wrapRace .area.a1 .titW{ background:var(--siteAreaC1)}
.wrapRace .area.a2 .titW{ background:var(--siteAreaC2)}
.wrapRace .area.a3 .titW{ background:var(--siteAreaC3)}
.wrapRace .area .titW .t1{ font-weight:700; font-size:1.313em}
.wrapRace .area .listW{ position:relative; flex:1 1 0%; min-width:0; display:flex; gap:.5em; padding:.5em 1em; flex-wrap:wrap}
.wrapRace .area .listW > li{ width: calc((100% - 5.5em) / 12);}
.wrapRace .area .listW > li .in{ width:100%; height:2.5em; border-radius:2em; display:flex; align-items:center; justify-content:center; border:1px solid #666; color:#ccc}
.wrapRace .area .listW > li.on .in{ background:#ffea00; color:#111; border-color:transparent}
.wrapRace .area .listW > li .in .t1{ font-weight:700; transform:translateY(.063em); white-space: nowrap;}

.raceAni .aniBg{ animation-name: blinkAni; animation-duration: 1.5s; animation-iteration-count: infinite}
@keyframes blinkAni{
50% {background:none; color:#fff}
}

.wrapRaceInfo{ display:flex; border-radius:1em; position:relative; padding:2px}
.wrapRaceInfo > *{ position:relative}
.wrapRaceInfo:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:2px solid #fff; border-radius:1em}
.wrapRaceInfo .infoW{ background:radial-gradient(black 15%, transparent 16%) 0 0,radial-gradient(black 15%, transparent 16%) 8px 8px,radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828;background-size:16px 16px; padding:2em; box-sizing:border-box; flex:1 1 0%; min-width:0; display:flex; align-items:center; gap:1em 3em; border-radius:1em 0 0 1em}
.wrapRaceInfo .infoW .con1{ color:#fff; display:flex; align-items:center; gap:1em}
.wrapRaceInfo .infoW .con1 .no{ font-size:4em; font-weight:700; letter-spacing:-1px}
.wrapRaceInfo .infoW .con1 .tt{ display:flex; flex-direction:column}
.wrapRaceInfo .infoW .con1 .tt .t1{ font-size:1.75em; font-weight:700}
.wrapRaceInfo .infoW .con1 .tt .t2{ font-size:1.5em; font-weight:500; color:#999}
.wrapRaceInfo .infoW .con2{ display:flex; gap:.5em}
.wrapRaceInfo .infoW .con2 .st{ width:12em; height:3.125em; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:.5em}
.wrapRaceInfo .infoW .con2 .st .t1{ font-size:1.063em}
.wrapRaceInfo .infoW .con3 .area{ height:2em; display:flex; align-items:center; padding:0 1.25em; border-radius:2em; color:#fff}
.wrapRaceInfo .infoW .con3 .area .t1{}
.wrapRaceInfo .infoW .con3 .area.a1{ background:var(--siteAreaC1)}
.wrapRaceInfo .infoW .con3 .area.a2{ background:var(--siteAreaC2)}
.wrapRaceInfo .infoW .con3 .area.a3{ background:var(--siteAreaC3)}
.wrapRaceInfo .btnW{ padding:1em; display:flex; gap:.5em}
.wrapRaceInfo .btnW .btn{ width:8em; box-sizing:border-box; border-radius:1em; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em; color:#fff; background:#111; border:1px solid var(--siteBd1)}
.wrapRaceInfo .btnW .btn.c1{ background:var(--siteC)}
.wrapRaceInfo .infoW.col{ flex:0 0 auto; flex-direction:column; align-items:flex-start; justify-content:center}
.wrapRaceInfo .infoW.col .con2{ flex-direction:column}
.wrapRaceInfo .infoW.col .con1,
.wrapRaceInfo .infoW.col .con2,
.wrapRaceInfo .infoW.col .con2 .st{ width:100%}
.wrapRaceInfo .pickW{ display:flex; flex-direction:column; color:#fff}
.wrapRaceInfo .pickW > div{ width:100%; box-sizing:border-box}
.wrapRaceInfo .pickW > div:not(:first-child){ border-top:1px solid rgba(255,255,255,.1)}
.wrapRaceInfo .pickW .pick_tt{ height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; box-sizing:border-box; padding:2em}
.wrapRaceInfo .pickW .pick_tt .t1{ font-size:1.25em}
.wrapRaceInfo .pickW .pick_notice{ padding:.75em; display:flex; gap:.5em; align-items:center}
.wrapRaceInfo .pickW .pick_notice .tt{ flex:1; min-width:0; font-size:1.063em}
.wrapRaceInfo .pickW .pick_info{ display:flex}
/* .wrapRaceInfo .pickW .pick_info.h1{ height:7em}
.wrapRaceInfo .pickW .pick_info.h2{ height:12em} */
.wrapRaceInfo .pickW .pick_info.h1{ height:8em}
.wrapRaceInfo .pickW .pick_info.h2{ height:16em}
.wrapRaceInfo .pickW .pick_info .pick_tit{ width:9em; text-align:center; border:1px solid  rgba(255,255,255,.1); border-top:none; border-bottom:none; display:flex; flex-direction:column; gap:.5em; align-items:center; justify-content:center; padding:1em; box-sizing:border-box}
.wrapRaceInfo .pickW .pick_info .pick_tit .ico{ width:2em; height:2em; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center}
.wrapRaceInfo .pickW .pick_info .pick_tit.r1{ border-bottom-right-radius:1em}
.wrapRaceInfo .pickW .pick_info .pick_tit .t1{ font-weight:700; font-size:1.375em}
.wrapRaceInfo .pickW .pick_info .pick_tit.c1{ background:var(--siteBuyC1)}
.wrapRaceInfo .pickW .pick_info .pick_tit.c2{ background:var(--siteBuyC2)}
.wrapRaceInfo .pickW .pick_info .pick_tit.c3{ background:var(--siteBuyC3)}
.wrapRaceInfo .pickW .pick_info .pick_tit.c3 .ico{ background:#8669b9}
.wrapRaceInfo .pickW .pick_info .pick_con{ flex:1; min-width:0}
.wrapRaceInfo .pickW .pick_info .noBuy{ box-sizing:border-box; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1em;}
.wrapRaceInfo .pickW .pick_info .noBuy .t1{ font-weight:300; font-size:1.125em}
.wrapRaceInfo .pickW .pick_info .noBuy > a{ height:2em; border-radius:2em; display:flex; align-items:center; gap:1em; padding:0 1em; background:var(--siteC); font-weight:500; font-size:1.125em}
.wrapRaceInfo .pickW .pick_info .noBuy > a .xi{ font-size:1em}
.wrapRaceInfo .pickW .pick_info .noBuy > a .xi:before{content:"\e907"}
.wrapRaceInfo .pickW .pick_info .pickNo,
.wrapRaceInfo .pickW .pick_info .pickMsg{ padding:1em 1em; box-sizing:border-box; height:100%}
.wrapRaceInfo .pickW .pick_info .pickNo{ height: 7em;}
.wrapRaceInfo .pickW .pick_info .pickTxt{ height: calc(100% - 7em);}
.wrapRaceInfo .pickW .pick_info .pickTxt .pickMsg{ height: 100%;}
.pickNo{ display:flex; gap:2px;}
.pickNo.c1{ color:var(--siteBuyC1)}
.pickNo .noW{ flex:1em; border-radius:1em; background:#eee; height:100%;box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; border:.25em solid #C00}
.pickNo .noW .mark{ display:flex; align-items:center; height:1.75em}
.pickNo .noW .mark .t1{ font-size:1.313em}
.pickNo .noW .mark .t2{ font-size:1.063em; font-weight:700}
.pickNo .noW .no .t1{ font-weight:700; font-size:2.25em}
.pickNo .noW.st1{ margin-left:1em; border:.25em solid #C00}
.pickMsg{ background:#000; white-space:pre-wrap; font-size:1.375em; line-height:1.375em; overflow-y:auto; scrollbar-width:initial;}

.gra{ position:relative}
.gra > *{ position:relative}
.gra:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(90deg, rgba(0,0,0,.3) 0%, rgba(255,255,255,.01) 5%, rgba(0,0,0,.1) 10%, rgba(0,0,0,0) 50%, rgba(0,0,0,.1) 90%, rgba(255,255,255,.01) 95%, rgba(0,0,0,.3) 100%);}

.pageFlexW{ display:flex; flex-wrap:wrap; gap:1em}
.pageFlexW > div{ width:100%; box-sizing:border-box}

.sub_tvW{ display:flex; flex-direction:column}
.sub_tvW .sub_tv:not(:first-child){ margin-top:2em; padding-top:3em; border-top:2px dotted #ccc}

.sub_tv{ overflow:hidden; display:flex; flex:1 1 0%; min-width:0; align-items:flex-start; gap:3em}
.sub_tv .img_wrap{ width:35%; border-radius:1em; overflow:hidden}
.sub_tv .con_wrap{ flex:1 1 0%; min-width:0; box-sizing:border-box; padding:1em 0; display:flex; flex-direction:column; gap:2em}
.sub_tv .con_wrap .t1{ font-weight:700; font-size:1.5em}
.sub_tv .con_wrap .twrap{ display:flex; align-items:flex-start; gap:1em}
.sub_tv .con_wrap .twrap .tit{ font-weight:700; color:var(--siteC2); transform:translateY(.125em); font-size:1.125em; position:relative; padding-right:1.5em}
.sub_tv .con_wrap .twrap .tit:after{ content:""; width:1em; height:1px; background:var(--siteC2); position:absolute; right:0; top:50%; transform:translateY(-.25em)}
.sub_tv .con_wrap .twrap .tt{ flex:1 1 0%; min-width:0; white-space:pre-wrap; font-size:1em; color:#666; line-height:1.5; word-break: keep-all;}
.sub_tv .con_wrap .best{ display:flex; flex-direction:column; gap:.5em}
.sub_tv .con_wrap .best .tit{ color:red; font-weight:700; font-size:1.125em}
.sub_tv .con_wrap .best .sub_yt_list{ width:100%}

.ytList{ display:flex; gap:.5em}
.ytList > li{ width:calc((100% - 2em) / 5)}
.ytList > li .imgW{ position:relative}
.ytList > li .imgW .more{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; opacity:0}
.ytList > li .imgW .more .xi:before{content:"\ec32"; color:red; font-size:2em}
.ytList > li .wrap_in:hover .imgW .more{ opacity:1}
.ytList.d1{ gap:1em}
.ytList.d1 > li{ width:calc((100% - 1.5em) / 4)}

.viewerWrap{ padding:2em 0 4em 0; overflow:hidden}
.viewerWrap .controlW{ padding-bottom:2em}
.viewerWrap .controlW .topW{ display:flex; align-items:flex-end; padding-bottom:1em}
.viewerWrap .controlW .topW .logo{ height:5em}
.viewerWrap .controlW .topW .btnW{ margin-left:auto; display:flex; gap:.25em}
.viewerWrap .controlW .topW .btnW .linkBtn .xi:before{content:"\e951"}
.viewerWrap .controlW .topW .btnW .linkBtn .tt:before{content:"링크보이기"}
.viewerWrap .controlW .topW .btnW .linkBtn.re .xi:before{content:"\e953"}
.viewerWrap .controlW .topW .btnW .linkBtn.re .tt:before{content:"링크숨기기"}
.viewerWrap .mentW{ padding-bottom:.5em; color:#fff}
.viewerWrap .mentW .tt{ position:relative; padding-left:1em; line-height:1; margin:.25em 0}
.viewerWrap .mentW .tt:before{ content:"*"; position:absolute; left:0; top:.25em}
.viewerWrap .mentW .t1{ font-weight:300; line-height:1.5; word-break: keep-all;}
.viewerWrap .mentW .t1 > i{ display:inline-block}
.viewerWrap .mentW .point{ padding:.125em .5em; font-weight:700; background:#ffd200; color:#000; border-radius:.5em; font-size:1.063em}
.viewerWrap .imgW{ text-align:center}
.viewerWrap .imgW .list{ display:inline-flex; flex-direction:column; max-width:100%}
.viewerWrap .imgW .el{ border:5px solid #000; border-left-width:10px; border-right-width:10px; overflow-x:hidden; box-sizing:border-box; max-width:100%; scrollbar-color: transparent transparent}
.viewerWrap .imgW .el .in{ position:relative}
.viewerWrap .imgW .el .in .vImg{ max-width:none; display:block; width:1400px}
.viewerWrap .imgW .el .in .link{ position:absolute; box-sizing:border-box; display:flex; align-items:center; justify-content:center}
.viewerWrap .imgW.linkShow .el .in .link{ background:rgba(255,0,0,.5); border:4px solid var(--siteC)}
.viewerWrap .imgW .el.mobile{ overflow-x:scroll}
.viewerWrap .moBtnW{ position:fixed; left:0; transform:translateY(-100%); top:0; width:100%; background:rgba(0,0,0,.7); padding:1em; display:flex; align-items:center; justify-content:center; gap:.5em; transition:.3s; z-index:1000; box-sizing:border-box}
.scroll .viewerWrap.mobile .moBtnW{ transform:translateY(0)}
.viewerWrap .moBtnW button{ flex:1; font-size:.938em; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.25em; height:4em}
.viewerWrap .moBtnW button .xi{ margin:0}
.viewerWrap .mo,
.viewerWrap.mobile .pc{ display:none}
.viewerWrap.mobile .mo{ display:block}

.sub_greetings{ background-image:url(../images/sub/about_bg.jpg); background-repeat:no-repeat; background-size:100% auto; background-position:right bottom; background-color:#1c1917; border-radius:1em; box-sizing:border-box; padding:5em; padding-bottom:8em; padding-left:35%; color:#fff}
.sub_greetings .t1{ font-size:3.25em; font-weight:700; margin-bottom:.75em}
.sub_greetings .t2{ font-size:1.25em; line-height:1.5; margin-bottom:.75em; opacity:.7}

.sub_ceo{ padding-right:3em; margin-top:-12em; display:flex; justify-content:flex-end; align-items:flex-end}
.sub_ceo .img{ width:24em}
.sub_ceo .name{ display:flex; gap:2em; align-items:flex-end; font-family:serif; padding-bottom:4em; transform:translateX(3em)}
.sub_ceo .name .t1{ font-size:1.5em; font-weight:bold}
.sub_ceo .name .t1 > i{ margin-left:1em}
.sub_ceo .name .t2{ font-size:3.5em; font-weight:bold; font-family: "Diphylleia", serif; font-style:italic; letter-spacing:.25em; transform:translateY(.125em)}

.sub_history_text{ font-size:7em; color:#eee; font-family:serif; font-weight:bold}
.sub_history_profile{ padding:2em; padding-bottom:5em; font-family:serif; display:flex; flex-direction:column; gap:2em}
.sub_history_profile .tit{ font-weight:bold; color:var(--siteC2); font-size:1.5em}
.sub_history_profile .list{ display:flex; flex-direction:column; gap:1em}
.sub_history_profile .list .t1{ font-size:1.25em; display:flex; align-items:flex-start}
.sub_history_profile .list .t1:before{ content:"-"}
.sub_history{ display:flex; flex-direction:column; gap:6em}
.sub_history .yearW{ display:flex; align-items:flex-start; gap:3em}
.sub_history .yearW .imgW{ width:40%; overflow:hidden;border-radius:1em}
.sub_history .yearW .conW{ flex:1; min-width:0; padding:1em; display:flex; flex-direction:column; gap:2em}
.sub_history .yearW .conW .tit{ font-weight:700; font-size:2.5em}
.sub_history .yearW .conW .list{ display:flex; flex-direction:column; gap:1em}
.sub_history .yearW .conW .list .t1{ color:#888; font-size:1.063em; word-break:keep-all; display:flex; align-items:flex-start; gap:.25em}
.sub_history .yearW .conW .list .t1:before{ content:"●"; transform:scale(.5); color:#ddd}
.sub_history .yearW:nth-child(even) .imgW{order:1}
.sub_history .yearW:nth-child(even) .conW{ align-items:flex-end; text-align:right}
.sub_history .yearW:nth-child(even) .conW .list .t1{ justify-content:flex-end}
.sub_history .yearW:nth-child(even) .conW .list .t1:before{ order:1}

.tab_st{ display:flex; flex-wrap:wrap; gap:.5em}
.tab_st > li > a{ display:flex; box-sizing:border-box; align-items:center; justify-content:center; border:3px solid #ddd; height:5em; padding:1em 2em; border-radius:.5em; color:#999; position:relative}
.tab_st > li > a .t1{ font-weight:700; font-size:1.313em}
.tab_st > li > a:after{ content:"\e935"; font-family:xeicon; position:absolute; left:50%; top:100%; transform:translate(-50%,-3px); font-size:1.5em; opacity:0}
.tab_st > li.on > a{ background:#333; border-color:var(--siteC2); color:var(--siteC2)}
.tab_st > li.on > a:after{ opacity:1}

.sub_info_con{}

.vod_wrap .resize{position:relative; padding-bottom:56.25%}
.vod_wrap .resize iframe,
.vod_wrap .resize video{ position:absolute; left:0; top:0; width:100% !important; height:100% !important; object-fit:cover}

/**/
.visualSlide_wrap{ position:relative}
.visualSlide{ height:28.125em; background:#000}
.visualSlide .swiper-wrapper{transition-timing-function : cubic-bezier(0.1, 0.5, .8, 0.1)}
.visualSlide .el{ position: relative; overflow:hidden}
.visualSlide .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.visualSlide .el .bg img{ max-width:none}
.visualSlide_control{ position:absolute; left:0; width:100%; bottom:-1px; z-index:10; display:flex; align-items:center; justify-content:center}
.visualSlide_control .wrapIn{ display:inline-flex; align-items:center; justify-content:center; padding:.5em 1.5em; border-radius:2em 2em 0 0; background:rgba(0,0,0,.6); gap:.5em; border:1px solid rgba(255,255,255,.2); border-bottom:none}
.visualSlide_control .wrapIn .paging span{ background:#fff}
.visualSlide_control .wrapIn .paging span.swiper-pagination-bullet-active{ background:#ff3357; opacity:1}

.mainFlexW{ padding:2em 0}
.mainFlexW .flexW{ display:flex; flex-wrap:wrap; gap:1.25em; align-content:flex-start}
.mainFlexW .flexW .w100{ width:100%}
.mainFlexW .flexW .wL{ flex:1 1 0%; min-width:70%}
.mainFlexW .flexW .wL1{width:18em}
.mainFlexW .flexW .wL2{width:14em}
.mainFlexW .flexW .wGrow{ flex:1 1 0%; min-width:0}
.mainFlexW .flexW .wR{ width:20.625em}

.mainFlexW .wrapLogin{ background:#be9a56}
.mainFlexW .wrapLogin .wrapIn{ padding:1em; display:flex; flex-direction:column; gap:.75em; box-sizing:border-box; width: 100%; height:100%; justify-content: space-evenly;}
.mainFlexW .wrapLogin .wrapIn .inp_wrap{ display:flex; width:100%; background:rgba(0,0,0,.4); border-radius:.5em; position:relative; display:flex; align-items:center; color:#fff; font-size:1.125em}
.mainFlexW .wrapLogin .wrapIn .inp_wrap .ico{ width:3em; text-align:center; font-size:1em}
.mainFlexW .wrapLogin .wrapIn .inp_wrap .ico:before{ font-size:1.25em}
.mainFlexW .wrapLogin .wrapIn .inp_wrap .inp{ background:none; border:none; box-sizing:border-box; flex:1; min-width:0; height:3em}
.mainFlexW .wrapLogin .wrapIn .inp_wrap .inp::placeholder{ color:#fff}
.mainFlexW .wrapLogin .wrapIn .inp_wrap.btn{ padding:.5em 0; background:none}
.mainFlexW .wrapLogin .wrapIn .inp_wrap.btn .inp{ flex:1; font-size:1.125em; font-weight:700; background:#111; color:#fff; border-radius:.5em}
.mainFlexW .wrapLogin .wrapIn .check_wrap{ display:flex; align-items:center; color:#fff}
.mainFlexW .wrapLogin .wrapIn .check_wrap label input:checked ~ .xi{ background:var(--siteC3); color:#fff}
.mainFlexW .wrapLogin .wrapIn .check_wrap label input:checked ~ *{ color:var(--siteC3)}
.mainFlexW .wrapLogin .wrapIn .check_wrap .link{ display:flex; align-items:center; justify-content:center; width:100%; gap:1em}
.mainFlexW .wrapLogin .wrapIn .check_wrap .link > a{ font-size:.938em; color:#000; opacity:.7; position: relative;}
.mainFlexW .wrapLogin .wrapIn .check_wrap .link > a + a::after{ content:''; width: 1px; height:.8em; background:rgba(0, 0, 0, .3); position:absolute; left:-.5em; top:0; }
.mainFlexW .wrapLogin .wrapIn .check_wrap .link > a:hover{ text-decoration:underline}
.mainFlexW .wrapLogin .wrapIn .check_wrap .mgL{ margin-left:auto}
.mainFlexW .wrapLogin .wrapIn .etc{ display:flex; align-items:center; justify-content:center; /* padding-top:.5em; */ margin-top:auto; }
.mainFlexW .wrapLogin .wrapIn .etc > a{ display:flex; align-items:center; justify-content:center; gap:.5em; width: 100%; padding: .6em 1em .5em; background: #ffea00; border-radius: .5em; color:#442e05; font-weight:700; font-size:1.25em;}
.mainFlexW .wrapLogin .wrapIn .etc > a .xi{ font-size:1em}

.mainFlexW .wrapLogin .wrapIn .myBuying{
    flex:1;
    max-height: 9em;
    padding: 0 1em 1.5em;
    background:#8b713f;
    border:1px solid #ddd;
    border-radius:.5em;
    color:#fff;
    overflow-y:scroll;
    scrollbar-color:rgba(255, 255, 255, .5) transparent;
}
.mainFlexW .wrapLogin .wrapIn .myBuying .tit{
    padding: 1.5em .5em .5em;
    border-bottom:1px dotted #fff;
    font-size:1.1em;
    position: sticky;
    top: 0;
    z-index:1;
    background: #8b713f;
}
.mainFlexW .wrapLogin .wrapIn .myBuying .buyingList{
    margin-top:1em;
    padding: 0 .5em
}
.mainFlexW .wrapLogin .wrapIn .myBuying .buyingList > li{ padding-left:1em; position:relative;}
.mainFlexW .wrapLogin .wrapIn .myBuying .buyingList > li + li{ margin-top:.5em}
.mainFlexW .wrapLogin .wrapIn .myBuying .buyingList > li .tt{ font-size:.95em; line-height: 1.4;}
.mainFlexW .wrapLogin .wrapIn .myBuying .buyingList > li::after{
    content:'';
    width:5px;
    height:5px;
    border-radius:50%;
    background:rgba(255, 255, 255, .5);
    position:absolute;
    left:0;
    top:6px;
}

.mainFlexW .wrapSt{ border-radius:1em; border:1px solid var(--siteBd1); overflow:hidden; padding:1px}
.mainFlexW .wrapSt.b1{ border-color:#666}

.mainFlexW .wrapBook{ border-color:#666}
.mainFlexW .wrapBook .wrapIn{ display:flex; flex-direction:column}
.mainFlexW .wrapBook .wrapIn .bookImgW{height:21em}
.mainFlexW .wrapBook .wrapIn .bookImgW .poster .poster_img > .tt{
    display: inline-block;
    width: 30%;
    padding: .5em;
    background: rgba(0, 0, 0, .2);
    font-size: 1em;
    text-shadow: 2px 3px rgba(0,0,0,.3);
    right: 2%;
    bottom: 30%;
}
.mainFlexW .wrapBook .wrapIn .btnW{ height:3.5em; background:#a40000; color:#fff; display:flex; align-items:center; justify-content:center; gap:.5em}
.mainFlexW .wrapBook .wrapIn .btnW .t1{ font-size:1.063em}

.mainFlexW .wrapNotice,
.mainFlexW .noticeSlideW .swiper-wrapper{ height:3.75em}
.mainFlexW .wrapNotice .wrapIn{ height:100%; box-sizing:border-box; display:flex; color:#fff}
.mainFlexW .wrapNotice .wrapIn .titW{ background:#000; padding:0 1.5em; display:flex; align-items:center; justify-content:center}
.mainFlexW .wrapNotice .wrapIn .titW .t1{ font-size:1.125em; color:var(--siteC3); word-break: keep-all;}
.mainFlexW .wrapNotice .wrapIn .btnW{ display:flex; width:2.5em; flex-direction:column; background:#000}
.mainFlexW .wrapNotice .wrapIn .btnW > a{ flex:1; border:1px solid rgba(255,255,255,.1); border-top:none; display:flex; align-items:center; justify-content:center; cursor:pointer}
.mainFlexW .wrapNotice .wrapIn .btnW > a .xi{ font-size:1em; opacity:.5}
.mainFlexW .wrapNotice .wrapIn .btnW > a:hover .xi{ opacity:1; color:var(--siteC3)}
.mainFlexW .noticeSlideW{ background:var(--siteC3); color:#111}
.mainFlexW .noticeSlideW .el .con{ height:100%; display:flex; align-items:center; box-sizing:border-box; padding:1em; gap:2em}
.mainFlexW .noticeSlideW .el .con .t1{ font-size:1.063em}
.mainFlexW .noticeSlideW .el .con .date{ font-size:.875em; opacity:.7}
.mainFlexW .noticeSlideW .el .con:hover .t1{ text-decoration:underline}

.mainFlexW .wrapLink{ display:flex; gap:1em; height:9em}
.mainFlexW .wrapLink .linkSt{ flex:1; min-width:0; height:100%; box-sizing:border-box; padding:1.5em; position:relative; color:#fff; display:flex ;flex-direction:column;gap:1em}
.mainFlexW .wrapLink .linkSt > *{ position:relative}
.mainFlexW .wrapLink .linkSt:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%}
/*
.mainFlexW .wrapLink .linkSt:before{ opacity:.7}
.mainFlexW .wrapLink .linkSt.c1:before{ background:#0e1324}
.mainFlexW .wrapLink .linkSt.c2:before{ background:#0f2411}
.mainFlexW .wrapLink .linkSt.c3:before{ background:#510e11}
*/
.mainFlexW .wrapLink .linkSt:before{ opacity:1}
.mainFlexW .wrapLink .linkSt.c1:before{ background:#13468c}
.mainFlexW .wrapLink .linkSt.c2:before{ background:#425837}
.mainFlexW .wrapLink .linkSt.c3:before{ background:#833e38}

.mainFlexW .wrapLink .linkSt .t1{ font-size:1.25em}
.mainFlexW .wrapLink .linkSt .more{ opacity:.7; font-weight:300; display:flex; align-items:center; gap:.5em}
.mainFlexW .wrapLink .linkSt .more .xi{ font-size:1em; transform:translateY(-.125em)}
.mainFlexW .wrapLink .linkSt .more .xi:before{content:"\e940"}
.mainFlexW .wrapLink .linkSt .ico{ position:absolute; right:1em; bottom:1em; width:4em; height:4em; background:rgbA(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center}
.mainFlexW .wrapLink .linkSt .ico img{ height:60%}

.mainFlexW .wrapBuy{ height:9em; border:2px solid #a3a381; border-radius:1em; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:3em; gap:3em; background-color:#000; background-repeat:no-repeat; background-image:url(../images/main/buy_bg.png), url(../images/main/buy_bg.png); background-position:-30% 90%, 110% -200%; background-size:auto 150%, auto 90% }
.mainFlexW .wrapBuy .t1{ font-weight:700; color:#ffedae; font-size:3em}
.mainFlexW .wrapBuy .btn{ height:2.5em ;display:flex; align-items:center; justify-content:center; padding:0 1.5em; font-size:1.25em; gap:.5em; background: linear-gradient(90deg, #63513c 0%, #eee9cb 50%, #63513c 100%); border-radius:.25em}
.mainFlexW .wrapBuy .btn .xi{ font-size:1em}

.mainFlexW .wrapCs{ height:9em; box-sizing:border-box; padding:2em; display:flex; flex-direction:column; justify-content:center; gap:1em; background-color:#151419; background-repeat:no-repeat; background-image:url(../images/main/cs_bg.png); background-position:105% 50%; background-size:auto 60%; color:#fff;}
.mainFlexW .wrapCs .t1{ font-size:1.125em}
.mainFlexW .wrapCs .no{ display:flex; align-items:center; gap:.5em}
.mainFlexW .wrapCs .no .ico{ width:2em; height:2em; font-size:1em; background:#423cff; display:flex; align-items:center; justify-content:center; border-radius:50%}
.mainFlexW .wrapCs .no .ico:before{content:"\e9d3"}
.mainFlexW .wrapCs .no .tt{ font-weight:700; font-size:2em; color:#599eff; letter-spacing:-.05em}

.mainFlexW .wrapCharge{ height:14em; box-sizing:border-box; padding:2em; display:flex; flex-direction:column; justify-content:center; gap:1em; position:relative}
.mainFlexW .wrapCharge .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:100% auto; background-position:right center; z-index:0}
.mainFlexW .wrapCharge .bg.mo{ display:none}
.mainFlexW .wrapCharge .tit{ color:#ce3c17; font-weight:700; font-size:1.75em}
.mainFlexW .wrapCharge .tit > span{ display:block}
.mainFlexW .wrapCharge .bank .t1{ font-size:1.25em}
.mainFlexW .wrapCharge .bank .t2{ font-size:1.5em; font-weight:700}
.mainFlexW .wrapCharge .bank .t3{ margin-top:1em;}
.mainFlexW .wrapCharge.st1{ padding:2vmin; color:#5f3a59}
.mainFlexW .wrapCharge.st1 .tit{ font-size:1.875em}
.mainFlexW .wrapCharge.st1 .tit .ttGra{background: linear-gradient(45deg, #5f3a5a, #351d4d, #5f3a5a); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.mainFlexW .wrapCharge.st1 .bank .t1{ font-weight:700; font-size:1.25em}
.mainFlexW .wrapCharge.st1 .bank .t2{ font-weight:700; font-size:1.5em}
.mainFlexW .wrapCharge.st1 .bank .t3{ font-weight:500; font-size:1.25em; margin-top:0}
.outline{z-index: 0; position: relative;}
.outline::before {  z-index: -1;  content: attr(data-tt);  position: absolute;  left: 0;  -webkit-text-stroke: .125em #fff;}

.mainFlexW .wrapYT .wrapIn{ display:flex}
.mainFlexW .wrapYT .titW{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5em 1em; box-sizing:border-box; width:14em; gap:.5em}
.mainFlexW .wrapYT .titW .logo{ height:1.5em; margin-bottom:1em}
.mainFlexW .wrapYT .titW .link{ display:flex; align-items:center; height:2.5em; border-radius:.5em; background:#666; box-sizing:border-box; width:100%; padding:0 .75em; color:#fff}
.mainFlexW .wrapYT .titW .link .xi{ margin-left:auto; font-size:1em}
.mainFlexW .wrapYT .titW .link.c1{ background:#C00}
.mainFlexW .wrapYT .listW{ padding:1em}

.wrapMyBuying{ display: none;}
.wrapMyBuying,
.buyingSlideW .swiper-wrapper{ height:3.75em}
.wrapMyBuying .wrapIn{ height:100%; box-sizing:border-box; display:flex; color:#fff}
.wrapMyBuying .wrapIn .titW{ background:#000; padding:0 1.5em; display:flex; align-items:center; justify-content:center}
.wrapMyBuying .wrapIn .titW .t1{ font-size:1.125em; color:var(--siteC2); word-break: keep-all;}
.wrapMyBuying .wrapIn .btnW{ display:flex; width:2.5em; flex-direction:column; background:#000}
.wrapMyBuying .wrapIn .btnW > a{ flex:1; border:1px solid rgba(255,255,255,.1); border-top:none; display:flex; align-items:center; justify-content:center; cursor:pointer}
.wrapMyBuying .wrapIn .btnW > a .xi{ font-size:1em; opacity:.5}
.wrapMyBuying .wrapIn .btnW > a:hover .xi{ opacity:1; color:var(--siteC2)}
.buyingSlideW{ background:var(--siteC2); color:#111}
.buyingSlideW .el .con{ height:100%; display:flex; align-items:center; box-sizing:border-box; padding:1em; gap:2em}
.buyingSlideW .el .con .t1{ font-size:1.063em}
.buyingSlideW .el .con .date{ font-size:.875em; opacity:.7}
.buyingSlideW .el .con:hover .t1{ text-decoration:underline}

/**/
.liveWrap{ position:fixed; right:0; bottom:0; z-index:1001; width:360px; max-width:80%; filter:drop-shadow(-1em -1em 1em rgba(0,0,0,.2)); transform:translateX(100%); opacity:0; transition:transform .5s}
.load .liveWrap{ transform:translateX(0); opacity:1}
.liveWrap .vod_wrap{ border:1px solid red; border-right-color:transparent}
.liveWrap .wrapTit{ background:red; height:3.5em; display:flex; align-items:center; color:#fff; box-sizing:border-box; padding:0 1em; border-radius:1em 0 0 0}
.liveWrap .wrapTit .tit{ display:flex; align-items:center; gap:.5em}
.liveWrap .wrapTit .tit .t1{ font-weight:700; font-size:1.25em}
.liveWrap .wrapTit .tit .tt_on{ font-weight:700; font-size:1.25em; color:yellow; position:relative}
.liveWrap .wrapTit .tit .tt_on:after{ content:""; position:absolute; left:100%; top:50%; transform:translate(50%, -50%); width:.5em; height:.5em; border-radius:50%; background:yellow}
.liveWrap .wrapTit .tit .ico{ font-size:2em}
.liveWrap .wrapTit .btn{ margin-left:auto; display:flex; align-items:center; gap:.25em}
.liveWrap .wrapTit .btn .st{ width:2.5em; height:2.5em; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.5)}
.liveWrap .wrapTit .btn .st:hover{ background:#fff; color:red}
.liveWrap .wrapTit .btn .st.min .ico:before{content:"\e921"}
.liveWrap .wrapTit .btn .st.max .ico:before{content:"\ea78"}
.liveWrap.off{ width:300px; max-width:50%}
.live-min .liveWrap .wrapTit .btn .st.min .ico:before{content:"\e944"}
.live-min .liveWrap{ right:5em; bottom:1em; width:20em}
.live-min .liveWrap .wrapTit{ border-radius:1em}
.live-min .liveWrap .vod_wrap{ display:none}
.live-max .liveWrap:not(.off){ width:100%; max-width:none; right:0}
.live-max .liveWrap:not(.off) .wrapTit{ position:fixed; right:0; bottom:0; width:16em; z-index:1; height:2.5em; transform:translateY(.25em)}
.live-max .liveWrap:not(.off) .wrapTit .tit,
.live-max .liveWrap:not(.off) .wrapTit .btn{ font-size:.75em}
.live-max .liveWrap:not(.off) .wrapTit .btn .st.max .ico:before{content:"\eb0b"}
.live-max .liveWrap:not(.off) .vod_wrap{ border:none}



/* new - W */
.ttHL{ display: inline-flex; justify-content: center; align-items: center; padding: .5em 1em; background: #ffe500;}

/* 상품설명 */
.buyInfo_wrap{ margin-top: 3em;}
.buyInfo_list{}
.buyInfo_list > li{
    display: flex;
    gap:2em
}
.buyInfo_list > li + li{ margin-top: 5em;}
.buyInfo_list > li .img_wrap{ width: 50%;}
.buyInfo_list > li .img_wrap .img{ padding-bottom: 55.5%; border-radius: 1em;}
.buyInfo_list > li .txt_wrap{ flex:1; padding-top: 1em;}
.buyInfo_list > li:nth-child(even) .txt_wrap{ order:-1;}
.buyInfo_list > li .tit{
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    border-radius: 1em;
    border: 1px solid #555;
}
.buyInfo_list > li .tit.c1{ border-color:#009933}
.buyInfo_list > li .tit.c2{ border-color:#36c}
.buyInfo_list > li .tit.c3{ border-color:#c33}
.buyInfo_list > li .tit .num{
    padding: .8em 1em;
    border-radius: .5em 0 0 .5em;
    font-size: 1.25em;
    color:#fff;
    background: #333;
}
.buyInfo_list > li .tit.c1 .num{ background:#009933;}
.buyInfo_list > li .tit.c2 .num{ background:#36c;}
.buyInfo_list > li .tit.c3 .num{ background:#c33;}
.buyInfo_list > li .tit .tt{
    flex:1;
    padding-left: .5em;
    font-weight: 700;
    font-size: 2em;
    color:#333;
}
.buyInfo_list > li .desc{ 
    margin-top: 2em;
    padding: 0 2em;
}
.buyInfo_list > li .desc .tt{ 
    font-size: 1.125em;
    color:#333;
    line-height: 1.5;
    word-break: keep-all;
}
.buyInfo_list > li .desc .tt + .tt{ margin-top: 0.8em;} 
.buyInfo_list > li .desc .tt strong{ font-weight: 700;}

.pcHide{ display: none;}

.main_bannerWrap{ gap:1.125em}
.main_bannerWrap .wrapBook,
.main_bannerWrap .buyBanner{ 
    flex:1;
    width: calc((100% - 1.125em) / 2);
    box-sizing: border-box;
}
.main_bannerWrap .wrapBook .wrapIn .bookImgW .poster{ width: 100%!important;}
.main_bannerWrap .wrapBook .wrapIn .bookImgW{ padding:0!important;}
.main_bannerWrap .buyBanner .wrapIn{ height: 100%;}
.main_bannerWrap .buyBanner .wrapBuy{ 
    flex-direction: column; 
    gap:2em; 
    height: 100%; 
    box-sizing: border-box; 
    background-position: 30% 100%, 100% -129%;
    background-size: auto 90%, auto 80%;
}
.main_bannerWrap .buyBanner .wrapBuy .t1{ font-size: 2.75em;}



/* audioPlayWrap */
.audioPlayOn .audioPlayWrap{ display: block;}
.audioPlayWrap{ display: none; position:fixed; right: 0em;bottom: 15em; z-index:1001; width: 300px; max-width:50%; filter:drop-shadow(-1em -1em 1em rgba(0,0,0,.2)); transform:translateY(100%); opacity:0; transition:transform .5s}
.audioPlayOn .audioPlayWrap{ transform:translateY(0); opacity:1}
.audioPlayWrap .play_wrap{ display:flex; justify-content:center; padding:1em; border:1px solid var(--siteBuyC3); background:#fff; border-radius:0 0 1em 1em}
.audioPlayWrap .play_wrap > p{ max-width: 98%;}
.audioPlayWrap .play_wrap > p audio{ max-width: 100%;}
.audioPlayWrap .wrapTit{ background:var(--siteBuyC3); height:3.5em; display:flex; align-items:center; color:#fff; box-sizing:border-box; padding:0 1em; border-radius:1em 1em 0 0}
.audioPlayWrap .wrapTit .tit{ display:flex; align-items:center; gap:.5em}
.audioPlayWrap .wrapTit .tit .t1{ font-weight:700; font-size:1.25em}
.audioPlayWrap .wrapTit .tit .tt_on{ font-weight:700; font-size:1.25em; color:yellow; position:relative}
.audioPlayWrap .wrapTit .tit .tt_on:after{ content:""; position:absolute; left:100%; top:50%; transform:translate(50%, -50%); width:.5em; height:.5em; border-radius:50%; background:yellow}
.audioPlayWrap .wrapTit .tit .ico{ font-size:2em}
.audioPlayWrap .wrapTit .btn{ margin-left:auto; display:flex; align-items:center; gap:.25em}
.audioPlayWrap .wrapTit .btn .st{ width:2.5em; height:2.5em; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgba(255,255,255,.5)}
.audioPlayWrap .wrapTit .btn .st:hover{ background:#fff; color:var(--siteBuyC3)}
.audioPlayWrap .wrapTit .btn .st .ico:before{content:"\e921"}
.live-min .audioPlayWrap{ width:20em; right:5em; bottom:5em}