/* Updated 2025.9.4 */
#wrap {
    display:flex; flex-direction: column;
    padding:0; margin:0;
    width:100%; min-height: 100vh !important; height:100%;
    box-sizing: border-box;
}
#sub {min-height: calc(100vh - 188px);}
@media (max-width: 991.98px) {
    #sub {min-height: calc(100vh - 244px);}
}
/* @media (max-width: 767.98px) {
    #sub {min-height: calc(100vh - 300px);}
} */
@media (max-width: 575.98px) {
    #sub {min-height: calc(100vh - 300px);}
}
@media (max-width: 383.98px) {
    #sub {min-height: calc(100vh - 380px);}
}

.wrap {position: relative; width: 90%; max-width: 1680px; height: 100%; margin: 0 auto;}
/* .wrap-1200 {max-width:1200px; margin:0 auto; width:100%;} */
.wrap-1200 {width: 1200px; margin: 0 auto;}
@media (max-width: 1399.98px) {
    .wrap-1200 {width: 90%;}
}

/* Navs */
#ddmenu {
    position: fixed; top: 0; left: 50%; z-index: 1000;
    transform: translateX(-50%); width: 100%;
    text-align: center;
}
#ddmenu header {position: relative; display: flex; justify-content: space-between; align-items: center;}
#ddmenu h1.logo {display: flex;}
#ddmenu h1.logo img {width: 110px; height: 32px; cursor: pointer;}

#ddmenu header > ul {
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 1000;
    list-style: none;
}
#ddmenu header > ul > li {position:relative;/*  display: inline-block; */}
#ddmenu header > ul > li.mobile-nav-header {display: none;}
#ddmenu header > ul > li .nav-item {
    display:block;
    position: relative;
    padding:2px 2rem 0;
    line-height:68px;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    white-space: nowrap;
    cursor: pointer;
}
#ddmenu header > ul > li .nav-item b {
    display:block; border-bottom:2px solid transparent;
    font-weight: 500; color:#fff; transition:all .2s ease-out;
}
#ddmenu header > ul > li .nav-item:hover b,
#ddmenu header > ul > li.over .nav-item b,
#ddmenu header > ul > li .nav-item b.active {
    border-bottom-color:#00b34b; color:#00b34b;
}
#ddmenu header > ul > li .dropdown {
    display: none; padding: 0; margin: 0; width: auto; overflow: hidden;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
}
#ddmenu header > ul > li.over .dropdown {display: block;}
#ddmenu header > ul > li .dropdown a:hover,
#ddmenu header > ul > li .dropdown a:focus {color:#00b34b !important;}
#ddmenu .dd-inner {position:relative; padding:1rem 0;}
#ddmenu .column {display:inline-block; width:100%; text-align:center; vertical-align:middle; white-space:normal;}
#ddmenu .column li a {
    position:relative; display:block; margin:0; padding:0 2rem;
    font-size:14px; font-weight: 500; line-height:28px; color:#fff;
    white-space: nowrap; text-decoration: none; transition: color 0.2s;
}
#ddmenu .column li a.active {color: #00b34b;}

#ddmenu .header-utility {position: relative; display:flex; justify-content: flex-end; align-items: center; width:110px;}
#ddmenu .header-utility > a {color:#fff; transition:all 0.2s ease; cursor: pointer;}
#ddmenu .header-utility > a span {display:block; color:#fff; font-size:12px; font-weight: 500; letter-spacing: -0.5px;}
#ddmenu .header-utility > a i {font-size:24px;}
#ddmenu .header-utility .hamburger-menu-wraper {padding: 4px 2px;}
#ddmenu .header-utility .hamburger-icon {
    width: 20px;
    height: 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    /* margin:0 4px; */
}
#ddmenu .header-utility .hamburger-icon span {
    background-color: #fff;
    position: absolute;
    border-radius: 2px;
    width: 100%;
    height: 2px;
    display: block;
    right: 0;
}
#ddmenu .header-utility .hamburger-icon span:nth-child(1) {top: 0; width: 80%;}
#ddmenu .header-utility .hamburger-icon span:nth-child(2) {top: 7px;}
#ddmenu .header-utility .hamburger-icon span:nth-child(3) {bottom: 0; width: 60%;}

#ddmenu header .btn-game-login {
    position: absolute; top: 50%; right: 86px; 
    transform: translateY(-50%);
	padding: 0 0.5rem;
    width: auto !important;
	height: 24px;
	line-height: 23px;
    font-size: 12px; font-weight: 500; letter-spacing: 0; word-spacing: -1px;
    color: #000 !important;
    border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 50rem !important;
    background-color: #fff;
}

#ddmenu.scroll {
    background:#fff;
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 3%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 3%);
}
#ddmenu.scroll::before, #sub.member #ddmenu::before {
    content: ""; display: block; width: 100%; height: 1px;
    position: absolute; bottom: 0; left: 0; background: #ebeced;
}
#ddmenu.scroll .nav-item b {color:#000;}
#ddmenu.scroll .nav-item,
#ddmenu.scroll .header-utility > a i,
#ddmenu.scroll .header-utility > a span,
#ddmenu.scroll .dropdown a,
#sub.member #ddmenu * {color:#000;}
#ddmenu.scroll .header-utility .hamburger-icon span,
#sub.member #ddmenu .header-utility .hamburger-icon span {background-color: #000;}

#ddmenu.scroll .header-utility button {
    /* color: #fff; */
    /* background-color: #000; */
}

#ddmenu.scroll .dropdown a:hover,
#ddmenu.scroll .dropdown a:focus,
#ddmenu.scroll .dropdown a.active {color: #00b34b;}
#ddmenu.scroll .dd-inner, #sub.member #ddmenu .dd-inner {background: #fff; border: 1px solid #ebeced; border-top: none;}

@media (max-width: 1399.98px) {
    #ddmenu header > ul > li .nav-item {padding:2px 1rem 0;}
}
@media (max-width: 1199.98px) {
    #ddmenu header {height: 56px;}
    #ddmenu h1.logo img {width: 100px; height: auto; cursor: pointer;}
    #ddmenu .header-utility {width: 100px;}
    #ddmenu .header-utility > a span {display: none !important;}
    #ddmenu header > ul {
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 100%;
        transform: translateX(100%);
        transition: transform .5s ease-in-out, visibility .5s ease-in-out;
        visibility: hidden;
        width: 85%;
        height: 100vh;
        background:#fff;

    }
    #ddmenu header > ul.open {
        flex-direction: column;
        visibility: visible;
        transform: translateX(-100%);
        transition: transform .5s ease-out, visibility 0s ease-out;
    }
    #ddmenu header > ul > li {display: block; text-align: left; box-sizing: border-box;}
    #ddmenu header > ul > li .nav-item {padding: 1rem 0; line-height:1; text-indent:20px;}
    #ddmenu header > ul > li .nav-item b {border-bottom:0 !important; color:#000;}
    #ddmenu header > ul.open > li b::before {all: unset; content: ""; display:block; position:absolute; right:20px !important; width:12px; height:2px; top:50%; margin-top:-2px; background:#bcbfc2; transition:.2s;}
    #ddmenu header > ul.open > li b::after {content: ""; display:block; position:absolute; right:25px !important; width:2px; height:12px; background:#bcbfc2; top:50%; margin-top:-7px; transition:.2s;}
    #ddmenu header > ul.open > li.over b::after {transform:rotate(90deg); background:#000;}
    #ddmenu header > ul > li .nav-item:hover b,
    #ddmenu header > ul > li.over .nav-item b,
    #ddmenu header > ul.open > li.over .nav-item b {color: #000;}
    #ddmenu header > ul.open > li.over .nav-item b.active {color: #00b34b !important;}
    #ddmenu header > ul.open > li b.active::before,
    #ddmenu header > ul.open > li b.active::after {background: #00b34b;}
    #ddmenu header > ul > li .dropdown {position:relative; top:unset; left:unset; transform:unset;}
    #ddmenu .dd-inner {padding: 0; border: 0 !important; background: none;}
    #ddmenu .column {display:block; width:auto; padding:16px 0; border:none; background:#fafafa;}
    #ddmenu .column li a {padding: 0; line-height: 2rem; text-indent:20px; text-align:left; color: #000;}

    #ddmenu header > ul > li.mobile-nav-header {
        display: flex; flex-direction: column;
        padding: 16px 14px 15px;
        background-color: #f8f9fa; border-bottom: 1px solid #ebeced !important;
    }
    #ddmenu header > ul > li.mobile-nav-header > div {display: flex; align-items: center;}
    #ddmenu header > ul > li.mobile-nav-header > div strong {
        margin: 0 0 0 6px; font-weight: 600; color: #000;
    }
    #ddmenu header > ul > li.mobile-nav-header i {font-size: 24px; color: #000; cursor:pointer;}
    #ddmenu header > ul > li.mobile-nav-header i small.icon-new-alert {
        display: block;
        position: absolute;
        top: 2px;
        left: 18px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        padding: 2.5px;
        background-color:#00b34a;
    }
    #ddmenu header > ul > li.mobile-nav-header + li {margin-top: 1rem;}
    /* Offcanvas Backdrop */
    #ddmenu .menu-icon-active::after {
        position:fixed; top: 0; left:0; width:100vw; height:100vh; content: ""; background:rgba(0, 0, 0, .6);
    }

    #ddmenu header .btn-game-login {right: 114px;}
}

@media (max-width: 991.98px) {
    #ddmenu header .btn-game-login {right: 38px;}
}    

/* Main */
#main {overflow-x: hidden;}
#main .bg-wrap {padding-bottom: 100px; background:url("/images/main_sec3bg.png") no-repeat center top; background-size: cover;}
#main .main_visual {position: relative;}
#main .main_visual .slide-wrap {
    position:relative; display: flex; justify-content: center; align-items: center;
    width: 100%; height: 600px; overflow: hidden;
    background-position: center; background-size: cover; background-repeat: no-repeat;
}
#main .main_visual .slide-wrap.bg1 {background-image:url("/images/visual1.jpg");}
#main .main_visual .slide-wrap.bg2 {background-image:url("/images/visual2.jpg");}
#main .main_visual .slide-wrap.bg3 {background-image:url("/images/visual3.jpg");}
#main .main_visual .slide-wrap .slide-content {
    position: absolute; top: 50%; left: 0;
    width:620px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    word-break: break-word;
    color: #fff;
}
#main .main_visual .slide-wrap strong {display:block; font-size:4rem; font-weight:700; font-family:'Montserrat', sans-serif;}
#main .main_visual .slide-wrap p {margin-top:24px; color:#fff; font-size:18px; line-height:1.5;}
#main .main_visual .pagination-wrap {width:100%; position:absolute; bottom:56px; z-index:2;}
#main .main_visual .pagination-wrap .play {background:none; border:0; padding:0; position:absolute; left:630px; bottom:-11px;}
#main .main_visual .pagination-wrap .play i {color:#fff; font-size:24px;}
#main .main_visual .swiper-pagination {position:relative; text-align:left;}
#main .main_visual .swiper-pagination-bullet {height:unset; border-radius:0; width:200px; background:none; margin:0; margin-right:10px; opacity:.5; text-align:left; font-size:15px; color:#fff; padding-bottom:15px; border-bottom:2px solid #fff;}
#main .main_visual .swiper-pagination-bullet:last-of-type {margin-right:0;}
#main .main_visual .swiper-pagination-bullet-active {opacity:1;}

#main .section-title {
    display: inline-block; margin-bottom:20px;
    letter-spacing: -1px; cursor:pointer;
}
#main .section-title i {font-size: 30px; font-weight: 700; color:#000; vertical-align: middle;}
#main .section-describe {display:block; margin-bottom:40px; line-height: 1.5;}
#main h5, #main h6 {font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#main .inbox {flex: 1 0 0%; transition: all .2s ease-out;}
#main .inbox:hover {box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%);}
#main .inbox a {display: block; background-color: #fff;}
#main .inbox p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

#main .championship, #main .shop-tournament {margin-top: 100px; background: transparent;}
#main .shop-tournament .inbox a {position: relative; padding-bottom: 90px; color: inherit;}
#main .shop-tournament .inbox a img {
    display: block;
    width: 100%;
    height: 240px;
    max-height: 240px;
    min-height: 240px;
    overflow: hidden;
    object-fit: cover;
    object-position: 50% 40%;
    background-color: #f5f6f7;
}
#main .shop-tournament .inbox a img[src*="no-img"] {
    object-fit: scale-down;
}
#main .shop-tournament .inbox a > div {
    width: 90%;
    padding: 24px 20px 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    background:#fff;
}
#main .shop-tournament .inbox a i {vertical-align: -2px;}
@media (max-width: 1199.98px) {
    #main .championship, #main .shop-tournament {margin-top:70px;}
}

#main .main_lesson {margin-top: 100px;}
#main .main_lesson a {color: inherit;}
#main .main_lesson a .video-box {position: relative;}
#main .main_lesson a .video-box .mov_icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 40px;}
#main .main_lesson a .info-box {padding: 20px;}
#main .main_lesson a .info-box p.fs-14 {color: #9b9fa3;}
#main .main_lesson a .info-box i {margin-right: 4px; font-size: 14px;}

#main .main_cc {margin-top: 160px;}
#main .main_cc .section-describe {width: 76%;}
#main .main_cc .slide-btn {position:relative; left:0; top:0px; width:100%; max-width:128px;}
#main .main_cc .slide-btn a {position:absolute; width:56px; height:56px; line-height:56px; box-sizing:border-box; border:1px solid #000; transition:all .2s ease-out; color:#000; text-align:center; outline: none;}
#main .main_cc .slide-btn a:hover {background:#000; color:#fff; border-color: #000;}
#main .main_cc .slide-btn a i {padding:0; text-align:center; font-size:18px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#main .main_cc .slide-btn .prev {left:0; top:0;}
#main .main_cc .slide-btn .next {right:0; top:0;}
#main .main_cc .swiper ul {display: table; list-style-type: none;}
#main .main_cc .swiper ul li {display: table-row;}
#main .main_cc .swiper ul li span {display: table-cell; line-height: 1.5;}
#main .main_cc .swiper ul li span:first-of-type {padding-right:8px; font-size:14px; color:#35383B;}
#main .main_cc a div {padding: 20px 0;}

#main .main_social {margin-top:120px;}
#main .main_social .insta_img {background-size:cover; background-position:center;}
#main .main_social .slide {position:relative;}
#main .main_social .slide .slide-wrapper a {position: relative; background:#f8f9fa; cursor: pointer; color: #fff !important;}
#main .main_social .slide .slide-wrapper a::before {
    position: absolute; content: ""; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0); transition:all .4s ease-out;
}
#main .main_social .slide .slide-wrapper a:hover::before {
    position: absolute; content: ""; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
#main .main_social .slide .slide-wrapper a > img {transition: all .2s ease-out;}
#main .main_social .slide .slide-wrapper a > i {position: absolute; top: 20px; left: 20px; z-index: 1;}
#main .main_social .slide .slide-wrapper a p {
    position: absolute; left: 20px; bottom: 20px; transition: all .2s ease-out;
    font-size: 20px; font-weight: 500;
}
#main .main_social .slide .slide-wrapper a:hover p {bottom: 48px;}
#main .main_social .slide .slide-wrapper a div {position:absolute; bottom:20px; left:20px; transition:all .2s ease-out; opacity: 0;}
#main .main_social .slide .slide-wrapper a:hover div {opacity: 1;}
#main .main_social .slide .slide-wrapper a div span {color: #fff !important;}
#main .main_social .slide .slide-wrapper a div span i {margin: 0 4px 0 -2px; font-size: 14px;}
#main .main_social .slide .slide-btn {display:flex; margin:60px auto 160px; justify-content:center;}
#main .main_social .slide .slide-btn a {position:relative; width:56px; height:56px; line-height:56px; box-sizing:border-box; border:1px solid #000; transition:all .2s ease-out; color:#000; text-align:center; outline: none;}
#main .main_social .slide .slide-btn a:hover {background:#000; color:#fff;}
#main .main_social .slide .slide-btn a i {display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:18px; text-align:center;}
#main .main_social .slide .slide-btn .more_btn {margin:0 1rem; background:#000;}
#main .main_social .slide .slide-btn .more_btn i {font-size:24px; color:#fff;}

@media (max-width: 991.98px) {
    #main .bg-wrap {padding-bottom:40px;}
    #main .bg-wrap {background-position:left top;}
    #main .main_visual .slide-wrap.bg1 {background-image:url("/images/mo_visual1.jpg");}
    #main .main_visual .slide-wrap.bg2 {background-image:url("/images/mo_visual2.jpg");}
    #main .main_visual .slide-wrap.bg3 {background-image:url("/images/mo_visual3.jpg");}
    #main .main_visual .slide-wrap strong {font-size:48px; background-size:230px;}
    #main .main_visual .slide-wrap p {margin-top:16px; padding-right:13vw; font-size:14px;}
    #main .main_visual .pagination-wrap {bottom:40px;}
    #main .main_visual .pagination-wrap .play {left:210px; bottom:-11px;}
    #main .main_visual .swiper-pagination-bullet {text-indent:-999px; width:60px;}

    #main .section-title {margin-bottom: 16px; font-size: 28px;}
    #main .section-title i {font-size: 28px;}
    #main .section-describe {margin-bottom: 24px; font-size: 14px;}
    #main h5 {font-size: 16px;}
    #main .inbox, #main .inbox:hover {box-shadow: 0 4px 8px 0 rgb(0 0 0 / 5%);}

    #main .shop-tournament, #main .main_lesson, #main .main_cc, #main .main_social {margin-top: 60px;}

    #main .main_cc .section-describe {width: 100%;}
    #main .main_cc .slide-btn {position: absolute; left: 0; top: calc(50% - 30px); max-width: unset;}
    #main .main_cc .slide-btn .prev {z-index:2; left:0; background-color: rgba(255, 255, 255, 0.85); border: 0;}
    #main .main_cc .slide-btn .next {z-index:2; right:0; background-color: rgba(255, 255, 255, 0.85); border: 0;}
    #main .main_cc .slide-btn a:hover {background-color: rgba(0, 0, 0, 0.7);}
    #main .main_cc .slide-btn a:hover i {color:#fff;}
    #main .main_cc .slide-btn i {color:#000;}
    #main .main_cc h6 {font-size: 16px;}

    #main .main_social .slide {overflow: hidden;}
    #main .main_social .slide .slide-wrapper a p,
    #main .main_social .slide .slide-wrapper a:hover p {bottom: 44px; font-size: 16px;}
    #main .main_social .slide .slide-wrapper a div,
    #main .main_social .slide .slide-wrapper a:hover div {opacity:1;}
    #main .main_social .slide .slide-btn {margin:40px auto 100px;}
}

/* Sub */
#sub .sub_top {padding:220px 0 20px; background:url("/images/sub_top.jpg") no-repeat center; background-size: cover; overflow: hidden;}
#sub .sub_top.img1 {background:url("/images/sub_top1.jpg") no-repeat center; background-size:cover;}
#sub .sub_top.img2 {background:url("/images/sub_top2.jpg") no-repeat center; background-size:cover;}
#sub .sub_top.img3 {background:url("/images/sub_top3.jpg") no-repeat center; background-size:cover;}
#sub .sub_top.img4 {background:url("/images/sub_top4.jpg") no-repeat center; background-size:cover;}
#sub .sub_top.img5 {background:url("/images/sub_top5.jpg") no-repeat center; background-size:cover;}
#sub .sub_top.img6 {background:url("/images/sub_top6.jpg") no-repeat center; background-size:cover;}
#sub .sub_top h1 {padding-bottom: 70px; color: #fff;}
#sub .sub_top .nav-wrapper {max-width:1200px; margin:0 auto;}
#sub .sub_top nav {float:right;}
#sub .page {margin: 80px auto 160px;}
@media (max-width: 991.98px) {
    #sub .sub_top {padding:0; height:240px; position:relative;}
    #sub .sub_top nav {display:none;}
    #sub .nav {display:none;}
    #sub .sub_top h1 {display:none;}
    #sub .page {margin: 40px auto 80px;}
}

/* footer */
footer {
    position: relative;
    padding: 30px 0;
    background-color: #000;
    color: #7c7e80;
}
footer .footer-menu a {
    display:inline-block; margin-right:20px;
    font-size: 14px; line-height: 40px; font-weight: 500; color:#9b9fa3;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
footer .footer-menu a:hover {color:#fff;}
footer .footer-menu a:last-of-type {margin-right: 0;}
@media (max-width: 383.98px) {
    footer .footer-menu a {display: block; margin-right: 0;}
}

footer img.logo {display:block; margin-top:30px; margin-bottom:12px; max-width: 110px; cursor: pointer;}
footer ul.sns {list-style: none;}
footer ul.sns li {margin-right: 8px;}
footer ul.sns li a {
    display: inline-block; width: 40px; height: 40px; padding: 11px 10px 10px;
    border: 1px solid #35383b; border-radius: 50%;
}
footer ul.sns a img {
    opacity: 0.6; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s; -ms-transition:opacity 0.2s; -o-transition:opacity 0.2s; transition:opacity 0.2s;
}
footer ul.sns a:hover img {opacity:1;}

footer .family-site {position: relative; width: 100%; font-size: 14px;}
footer .family-site p {
    position: relative;
    padding:1px 16px 0; line-height:37px;
    border: 1px solid #fff; color:#fff;
    opacity: 0.6;
    cursor: pointer;
}
footer .family-site p::after {
    position: absolute;
    right: 16px;
    width: 12px;
    height: 36px;
    content: "";
    background:#000 url("/img/ico_select_w.png") no-repeat center;
    transition: transform 0.2s ease-in-out;
}
footer .family-site.active p {opacity: 1;}
footer .family-site.active p::after {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
footer .family-site div {
    display: none;
    opacity: 0;
    position: absolute; left: 0; top: 0;
    width: 100%; height: 170px;
    overflow: hidden;
    background: #000;
    border: 1px solid #fff; border-bottom: 0;
    transition: all .2s; z-index: 1000;
}
footer .family-site.active div {
    display: block;
    opacity: 1;
    top: -170px;
    overflow-y: auto;
}
footer .family-site.active div::-webkit-scrollbar {width:5px;}
footer .family-site.active div::-webkit-scrollbar-track {background:#000;}
footer .family-site.active div::-webkit-scrollbar-thumb {background:#666;}
footer .family-site div a {display:block; padding:2px 16px 0; line-height:40px;}
footer .family-site.active div a {color:#9b9fa3;}
footer .family-site.active div a:hover {color:#fff; background:#292929;}

footer .copyright, footer .time-zone {
    font-size: 12px !important; line-height: 20px;
}
/* Time zone */
.time-zone-mark.badge {
	padding: 3px 0 2px !important;
    width: 22px;
    vertical-align: text-top;
    font-family: 'Montserrat', sans-serif !important;
	font-size: 10px !important;
    font-style: normal !important;
}
.time-zone-mark.badge.bg-orange {padding-right: 1px !important;}

/* SCROLL TOP */
.gotop {
    width: 56px; height: 56px; position: fixed;
    background:#fff; border-radius: 50%; right: 5%;
    z-index: 1000; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
    opacity: 0; visibility: hidden; transition: all .2s;
}
.gotop i {color:#000; font-size:32px; width: 56px; line-height: 56px; text-align: center;}
.gotop.on {opacity: 1; visibility: visible;}
.gotop.on.bottom {bottom: 32px;}

@media (max-width: 991.98px) {
    .gotop {width: 40px; height: 40px;}
    .gotop i {font-size: 20px; width: 40px; line-height: 40px;}
    /* .gotop.on.bottom {bottom: 180px;} */
}
/* @media (max-width: 767.98px) {
    .gotop.on.bottom {bottom: 24px;}
} */
@media (max-width: 575.98px) {
    .gotop.on.bottom {bottom: 24px;}
}
@media (max-width: 383.98px) {
    .gotop.on.bottom {bottom: 16px;}
}

.pop_btn {background:unset; border:0; color:#676d73;}

#sub .table .btn.btn-xs {display:inline-block;/*  max-height:initial; margin-top:-2px; line-height:12px; */}
#sub .mobile_title {display:none;}
@media (max-width: 991.98px) {
    #sub .mobile_title {
        display: block; position: absolute; left: 50%; top: 56%; transform: translate(-50%, -56%); width: 100%;
        font-size: 24px; font-weight: 700;
        text-align: center; line-height: 1em; color:#fff;
    }
}
#sub a[href^="mailto"] {color:#000; text-decoration:underline;}
#sub a[href^="mailto"]:hover {color:#00B34A !important;}

#sub .pc-none {display:none;}

/* #pills-tab {max-width:1200px; margin:0 auto;} */

/* Top Box */
.date-search {
    position: relative;
}
.date-search input[type="date"] {
    max-width: calc((100% - 8px) / 2);
}
.date-search input[type="date"]:first-of-type {
    margin-right: 8px;
}
.date-search::after {
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    top: 50%;
    height: 1px;
    width: 4px;
    background: #9b9fa3;
}

#sub .status-search {position:relative; margin-bottom:32px; margin-top:32px; max-width:50%; margin-left:auto; padding:0;max-width:420px;}
#sub .status-search::after {content: ""; display:block; visibility:hidden; clear:both;}
#sub .status-search select,
#sub .status-search input[type="text"] {float:left; max-width:calc(50% - 24px); box-sizing:border-box; border-right:0;}
#sub .status-search ul {margin-bottom:25px; display:table; margin-left:auto;}
#sub .status-search ul li {display:inline; position:relative;}
#sub .status-search ul li:first-of-type {margin-right:10px; padding-right:10px;}
#sub .status-search ul li:first-of-type::after {content: ""; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background:#e3e6f0;}
#sub .status-search ul li a {line-height:1; color:#e3e6f0; transition:.2s ease-out;}
#sub .status-search ul li a:hover,
#sub .status-search ul li a.on {color:#000;}

.gender-search {position:relative;}
.gender-search::after {content: ""; display:block; visibility:hidden; clear:both;}
.gender-search > div {float:left; width:300px; position:relative;}
.gender-search > div input[type="text"],
.gender-search > div select {width: calc(100% - 40px);}
.gender-search ul {margin-bottom:25px; display:table; margin-left:auto; width:600px; overflow:hidden;}
.gender-search ul li {float:left; width:25%; list-style:none; border:1px solid #000; box-sizing:border-box;}
.gender-search ul li a {display:block; line-height:40px; color:#000; background:#fff;  transition:.2s ease-out; text-align:center;}
.gender-search ul li a:hover,
.gender-search ul li a.on {background:#000; color:#fff; cursor:pointer;}
.gender-search .btn.search {background:#000 url("/img/ico_search_white.png") no-repeat center;}

/* Membership > My Records > My Tournaments > Leaderboard 외 */
ul.tab-sub {display: flex; list-style: none; width: 100%;}
ul.tab-sub li {flex: 1 1 0%; margin-left: -1px; box-sizing: border-box; border: 1px solid #000;}
ul.tab-sub li a {
    display: block; padding-top:2px; line-height: 36px; white-space: nowrap; text-align: center;
    color:#000; background:#fff;  transition:.2s ease-out;
}
ul.tab-sub li a:hover, ul.tab-sub li a.on {cursor:pointer;}
ul.tab-sub li a.on {background:#000; color:#fff;}
@media (max-width: 479.98px) {
    ul.tab-sub {flex-wrap: wrap;}
    ul.tab-sub li {
        flex: 0 0 auto;
        width: 50%;
        margin-bottom: -1px;
        overflow: hidden;
    }

}

#sub .city-search {margin-bottom:40px; margin-top:40px; --bs-gutter-x: 0; position:relative; max-width:590px; margin-left:auto;}
#sub .city-search::after {content: ""; display:block; visibility:hidden; clear:both;}
#sub .city-search p {line-height:48px; text-align:right;}
#sub .city-search select,
#sub .city-search input[type="text"] {float:left; width:calc(33.333% - 22px);}
#sub .city-search select {margin-right:10px; border:1px solid #cdcfd1;}

#sub .select-search {position:relative; margin-bottom:40px; margin-top:40px; max-width:420px; margin-left:auto; padding:0; width:100%;}
#sub .select-search::after {content: ""; display:block; visibility:hidden; clear:both;}
#sub .select-search select,
#sub .select-search input[type="text"] {float:left; width:calc(50% - 29px); border:1px solid #cdcfd1;}
#sub .select-search input[type="text"] {margin-left:10px;}
#sub .select-search.list input[type="text"] {margin-right:0; margin-left:10px;}

#sub .page h3.subtitle {margin: 80px 0 24px;}
#sub .page h3.subtitle .material-icons-outlined {font-size: 28px;}
#sub .page p.info {margin-bottom: 24px; line-height: 1.25;}
#sub label.d-table-cell, #sub p.d-table-cell {padding:1.375em 0.75em 1.25em; line-height:1.25em; word-wrap: break-word !important; word-break: break-word !important;}
#sub label.d-table-cell {font-weight:700; text-align:center; color:#000;}
#sub p.d-table-cell {color:#52575c;}
#sub .layer1 .row div[class|=col]:first-of-type {font-weight:700; color:#000;}

/* Btn */
#sub .center-btn {margin-top:70px; --bs-gutter-x:0;}
#sub .right-btn {justify-content:right; margin-top:70px;--bs-gutter-x:0;}

/* Member - DefaultLayout.vue */
/* #sub.member .white {display:none !important;}
#sub.member .black {display:block !important;} */
#sub.member .sub_top {background: none; padding:150px 0 20px;}
#sub.member .sub_top h1 {padding-bottom: 48px; color:#000;}
@media (max-width: 991.98px) {
    #sub.member .sub_top {padding: 0; height: 200px;}
    #sub.member .sub_top .mobile_title {margin-top: 22px; letter-spacing: -1px; color:#000 !important;}
}

/* Login */
#sub .login .wrap {max-width: 400px;}
#sub .login .text-end a {display: inline-block; padding-top: 2px; line-height: 1em;}
#sub .login a:hover {color:#000; text-decoration:underline;}
@media (min-width: 992px) {#sub .login .text-end a {padding-top: 3px;}}
#sub .login button.btn-outline-secondary {border: 1px solid #CDCFD1;}
#sub .login button.btn-outline-secondary:hover,
#sub .login button.btn-outline-secondary:focus,
#sub .login button.btn-outline-secondary:active {background: #fff; color: #000; border-color:#9B9FA3;}
#sub .login hr {margin:24px 0;}
#sub button span.icon-sprite-social {position:absolute; top:11px; left:12px;}
#sub button span.icon-sprite-social.icon-facebook {left:11px;}
#sub button span.icon-sprite-social.icon-apple {left:10px;}
@media (max-width: 383.98px) {
    #sub .login .mb-4 > div {width: 100%;}
    #sub .login .mb-4 > div.text-end {margin-top: 8px; text-align:left !important;}
}

/* Game login */
#modal-game-login.modal {width: 100%; left: 0;}
#modal-game-login .modal-header h3 {
	max-width:100%; font-size: calc(1.5rem + 0.3vw);
}
#modal-game-login .modal-header .btn-close {
    position: absolute; top: 12px; right: 12px;
    padding: 8px;
}
#modal-game-login .avatar-xxxl {width: 120px; height: 120px;}
#modal-game-login .verify-number-wrapper {margin: 36px 0}
#modal-game-login .verify-number-wrapper input {
    height: 80px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;    
    border-radius: 8px !important;
    border-color: #F4F5F6;
    background: #F4F5F6;    
}
#modal-game-login .verify-number-wrapper input::-webkit-input-placeholder {
    font-size: 24px; color: rgba(0, 0, 0, 0.20) !important;
}
#modal-game-login .verify-number-wrapper input::-moz-placeholder {
    font-size: 24px; color: rgba(0, 0, 0, 0.20) !important;
}
#modal-game-login .verify-number-wrapper input:-moz-placeholder {
    font-size: 24px; color: rgba(0, 0, 0, 0.20) !important;
}
#modal-game-login .verify-number-wrapper input:-ms-input-placeholder {
    font-size: 24px; color: rgba(0, 0, 0, 0.20) !important;
}
#modal-game-login .verify-number-wrapper input:focus::placeholder {
    opacity: 0; 
    transition: opacity 0.3s ease-in-out;
}
@media (min-width: 576px) {
    /* #modal-game-login .modal-content {
        border-radius: 8px !important;
    }  */   
    #modal-game-login .game-login-step1 {padding: 0 30px;}
}
@media (max-width: 479.98px) {
    #modal-game-login .verify-number-wrapper input {
        height: 60px;
        text-align: center;
        font-size: 32px;
        font-weight: 700;    
        border-radius: 8px !important;
        border-color: #F4F5F6;
        background: #F4F5F6;    
    }
}
@media (max-width: 575.98px) {
    #modal-game-login.modal.fade .modal-dialog {transition: none; transform: none;}
    #modal-game-login .modal-content {height: 100vh;}
    #modal-game-login .modal-body {max-height: 100%} 
}

#modal-game-login .game-login-step2 .border {
    border: 1px solid #ced4da !important;
    border-radius: 8px;
}
#modal-game-login .game-login-step2 .border:first-child {
    border-right: 0 !important;
}
#modal-game-login .game-login-step2 .vstack {gap: 12px;}
#modal-game-login .game-login-step2 .vstack .icon.badge {padding: 6px 8px 5px !important;}
#modal-game-login .game-login-step2 .vstack small.vr {
    height: 11px !important; margin: 0 6px; opacity: 0.5; vertical-align: -1px;
}
#modal-game-login .game-login-step2 .card-footer {
    padding: 24px 0;
    width: 48px;
    min-width: 40px;
    border-left-style: dashed !important;
}

@media (max-width: 439.98px) {
    #modal-sign-up div.mx-3 {margin-right: 12px !important;}
    #modal-sign-up p.fs-14 {font-size: 13px !important; letter-spacing: -0.5px;}
}


/* Find_Id_Pwd */
#sub .find_idpwd .h-100 {padding: 3rem;}
#sub .find_idpwd .border {border-top: 2px solid #35383B !important;}
#sub .find_idpwd h4 + p {margin: 1.25em 0; line-height: 1.25; color: #676D73;}
@media (max-width: 991.98px) {
    #sub .find_idpwd h4 {font-size:18px;}
}
@media (max-width: 575.98px) {
    #sub .find_idpwd .h-100 {padding: 1.5rem;}
}

#sub .swiper {display: none;}
@media (max-width: 991.98px) {
    #sub .swiper {display:block; margin:-20px auto 20px; position:relative;}
    #sub .swiper::before {content: ""; display:block; height:1px; width:100%; background:#cdcfd1; position:absolute; left:0; bottom:0;}
    #sub .swiper .swiper-slide {width: unset; text-align: center; font-size: 16px; font-weight: 500; color: #000;}
    #sub .swiper .swiper-slide.active {border-bottom:4px solid #000;}
    #sub .swiper .swiper-slide:hover {cursor:pointer;}
    #sub .swiper .swiper-slide div{padding:20px 15px;}
}

/* Sign Up */
/* .g-recaptcha {transform:scale(0.77); -webkit-transform:scal(0.77); transform-origin:0 0; -webkit-transform-origin:0 0;} */
.agree-box {display:block; margin-top: 24px; font-size: 14px;}
.agree-box > div {display: flex;}
.agree-box div + div {margin-top: 16px;}
.agree-box div input {flex-shrink: 0 !important;}
.agree-box div label {margin-top: 1px;}
@media (min-width: 992px) {
    .agree-box {font-size: 16px;}
}

#sub .p12 .select-search p {display:none;}
#sub .p12 h5 {margin:40px 0 0; line-height:48px;}
#sub .p12_view > p {margin-bottom:15px !important;}
#sub .p12_view .row {--bs-gutter-x: 0;}

.confirmp {position:relative; min-height:100vh; padding-bottom:440px;}
.confirmp .bg-black {position:absolute; width:100%; left:0; bottom:0;}

#sub .p14 p {font-size:18px; margin-bottom:40px; line-height:1.4em;}
#sub .p14 span {display:block; color:#676d73; margin-bottom:40px; _line-height:1.4em;}
#sub .p14 em {text-decoration:underline; font-style:normal;}

#sub .p41 p {font-size:18px; margin-bottom:40px; line-height:1.4em;}

#sub .p15 .wrap-1200 {position:relative;}
#sub .p15 .row {--bs-gutter-x: 0;}


/* Scorecard */
#scorecard .round-summary .d-flex {align-items: center;}
#scorecard .round-summary .text-date {margin:0.5rem 0; font-size:14px;}
#scorecard .round-summary .type-play {
    padding: 5px 6px 4px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    vertical-align: baseline;
    border-radius: 2px;
}
#scorecard .round-summary .type-play.stroke {background-color:#0033A1;}
#scorecard .round-summary .type-play.newperio {background-color:#FF9800;}
#scorecard .round-summary .total-score {font-size:64px; font-weight:700; letter-spacing:-1px; color: #000;}
#scorecard .round-summary .total-score small {display:inline-block; margin-left: 4px; vertical-align:3px; letter-spacing:0; font-size:0.375em;}
#scorecard .round-summary .total-score small span {display:inline-block; vertical-align:-1px;}

#scorecard .round-record {margin-top:40px;}
#scorecard .round-record + .round-record {margin-top:70px;}
#scorecard .round-record .table-responsive {margin-bottom: 0;}
#scorecard .round-record h6 {
    padding: 20px 12px; font-size:18px; text-align:center;
    border-top: 2px solid #35383b !important;
}
#scorecard .round-record .table {border-top: 1px solid #676D73;}
#scorecard .round-record th {border-right: 1px solid #e5e7e8;}
#scorecard .round-record .col-1 {font-weight: 500; color: #000; background: #fcfcfc !important;}
#scorecard .round-record td {position: relative;}
#scorecard .round-record td span {
    display:inline-block; position:absolute; top:50%; left:50%;
    margin-top:-1.25em; margin-left:-1.25em; width:2.5em; height:2.5em; line-height:2.5em;
    box-sizing:border-box; border-radius:50%; font-weight:400;
}
#scorecard .round-record td span.eagle {border:1px solid #00B34A;}
#scorecard .round-record td span.eagle::after {
    content: ""; display:block;
    width:2em; height:2em; border-radius:50%; border:1px solid #00B34A;
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:0;
}
#scorecard .round-record td span.birdie {border:1px solid #00B34A;}
#scorecard .round-record td span.par {background-color: #f5f6f7;}
#scorecard .round-record td span.bogey {border-radius:2px; border:1px solid #000;}
#scorecard .round-record td span.d-bogey {border-radius:2px; border:1px solid #000;}
#scorecard .round-record td span.d-bogey::after {
    content: ""; display:block;
    width:2em; height:2em; border-radius:2px; border:1px solid #000;
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:0;
}
#scorecard .round-record td span.t-bogey-over {border-radius:2px; border:2px solid #EF2B49;}

#scorecard .box {margin-bottom:40px; padding:1.5rem 0;}
#scorecard .box p {position:relative; display:inline-block; padding:0 1rem; font-size:14px; line-height:1em; color:#86888a;}
#scorecard .box p span {margin-right:5px; width:14px; height:14px; display:inline-block; position:relative; top:2px;}
#scorecard .box p.eagle span {border-radius:50%; border:1px solid #00B34A;}
#scorecard .box p.eagle span::after {content: ""; display:block; position:absolute; top:50%; left:50%; width:8px; height:8px; transform:translate(-50%, -50%); border-radius:50%; border:1px solid #00B34A;}
#scorecard .box p.birdie span {border-radius:50%; border:1px solid #00B34A;}
#scorecard .box p.par span::after {content:'0'; display:block; width:14px; height:14px; background:#ebeced; top:50%; left:50%; transform:translate(-50%, -50%); position:absolute; color:#52575c; line-height:14px; border-radius:50%; text-align:center;}
#scorecard .box p.bogey span {border-radius:2px; border:1px solid #000;}
#scorecard .box p.d-bogey span {border-radius:2px; border:1px solid #000;}
#scorecard .box p.d-bogey span::after {content: ""; display:block; position:absolute; top:50%; left:50%; width:8px; height:8px; transform:translate(-50%, -50%); border-radius:2px; border:1px solid #000;}
#scorecard .box p.t-bogey-over span {border-radius:2px; border:2px solid #EF2B49;}

@media (max-width: 991.98px) {
    #scorecard .round-record h6 {padding: 1em 12px; font-size: 16px !important;}
    #scorecard .round-record td span {
        margin-top:-1em; margin-left:-1em; width:2em; height:2em; line-height:2em;
    }
    #scorecard .round-record td span.eagle::after,
    #scorecard .round-record td span.d-bogey::after {width:1.5em; height:1.5em;}

    #scorecard {margin-top:40px;}
    #scorecard .round-summary h5 {font-size:18px;}
    #scorecard .round-summary .total-score {font-size:40px;}
    #scorecard .round-record {margin-top:30px;}
    #scorecard .round-record + .round-record {margin-top:40px;}
    #scorecard .round-record h6 {font-size:16px;}
    #scorecard .round-record .row > div[class|=col] > div span {
        margin-top:-1em; margin-left:-1em; width:2em; height:2em; line-height:2em;
    }
    #scorecard .round-record .row > div[class|=col] > div span.eagle::after,
    #scorecard .round-record .row > div[class|=col] > div span.d-bogey::after {width:1.5em; height:1.5em;}
    #scorecard .box {margin-bottom: 30px; padding:1rem 0 0;}
    #scorecard .box p {padding:1.25rem 0.25rem 0.5rem; text-align:center; font-size:11px;}
    #scorecard .box p span {position:absolute; top:0; left:50%; transform:translateX(-50%);}
}

@media (min-width:576px) {
    #scorecard .round-summary .player .center-cropped {width:64px; height:64px;}

}

@media (max-width:479.98px){
    #scorecard .round-summary .d-flex {align-items:flex-end;}
    #scorecard .round-record h6 {font-size:14px;}
    #scorecard .round-record .row * {font-size:12px;}

}

@media (max-width:319.98px){
    #scorecard .round-summary .d-flex {flex-direction: column !important; align-items:flex-start;}
    #scorecard .round-summary .total-score {margin-top: 12px;}

}

#sub .p18 .font-montserrat {display:block; font-size:26px !important; margin-bottom:25px !important; margin-top:70px !important;}
#sub .p18 .info {font-size:16px !important; margin-bottom:20px !important;}
#sub .p18 .text-date {display:inline-block; font-size:15px; margin-bottom:40px;}
#sub .p18 .row p {color:#676d73; padding:20px 0.75rem; box-sizing:border-box; line-height:1.4em; text-align:left;}

/* Membership > My Records > My Tournaments > Leaderboard */
.myrank {
    margin: 0 auto 32px;
    text-align: center;
    border-left: 1px solid #E5E7E8;
    border-top:1px solid #E5E7E8;
}
.myrank ul.box {
    display:flex;
    flex-direction: column;
    min-height:100%;
    list-style-type:none;
    align-self: stretch !important;
    border-right:1px solid #E5E7E8;
    border-bottom:1px solid #E5E7E8;
}
.myrank ul.box li {flex: 1 1 auto;}
.myrank ul.box li:nth-child(1) {
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
    padding: 16px 8px 0;
}
.myrank ul.box li:nth-child(2) {padding: 0 8px 16px;}
.myrank ul.box li .rounded-circle {display: block; margin: 0 auto; width: 48px; height: 48px; text-align: center;}
.myrank ul.box li .rounded-circle i {overflow: hidden; line-height: 48px; font-size: 26px; color:#fff;}
.myrank ul.box li h2 {margin: 8px auto; font-size: 20px;}
.myrank ul.box li h2 small {font-size: 14px;}
.myrank ul.box li h2 + p {font-size: 12px; text-transform: uppercase; color:#676D73;}
@media (min-width: 992px) {
    .myrank ul.box li .rounded-circle {width: 64px; height: 64px;}
    .myrank ul.box li .rounded-circle i {line-height:64px; font-size:36px;}
    .myrank ul.box li h2 {font-size: 28px;}
    .myrank ul.box li h2 small {font-size: 20px;}
    .myrank ul.box li h2 + p {font-size: 13px;}
}
@media (min-width: 1200px) {
    .myrank ul.box {flex-direction: row;}
    .myrank ul.box li {align-self: center;}
    .myrank ul.box li:nth-child(1) {flex: 0 1 25%;  padding: 16px; padding-right:0;}
    .myrank ul.box li:nth-child(2) {padding: 16px;}
    .myrank ul.box li h2 {margin-top: 0;}
}

/* SubCourse */
#sub .subcourse {padding: 0.75rem;}
#sub .subcourse h6 {margin-bottom: 0.5rem; line-height: 1.2; font-size: 16px !important; font-weight: 500;}
#sub .subcourse:nth-child(2) {border-top: 1px solid #E5E7E8;}

#sub .p31 td button {background:none; color:#676d73;}
#sub .p31_view > p {margin-bottom:15px !important;}
#sub .p31_view .border-top-dgray:first-of-type {margin-bottom:40px;}
#sub .p31_view span {display:block; text-align:right; font-size:14px; margin-top:10px;}
.modal .p31_view span {display:block; text-align:right; font-size:14px; margin-top:10px;}

#sub .p36 video {margin-bottom:0;}
#sub .p36 .wrap {margin:0 auto;}
#sub .p36 h6 {font-size:26px; margin-bottom:20px;}
#sub .p36 .col-lg-4 {position:relative; padding:0; float:left; width:32%; margin-right:2%; margin-bottom:45px;}
#sub .p36 .col-lg-4:nth-of-type(3n) {margin-right:0;}
#sub .p36 .col-lg-4:nth-of-type(3n) ~ .col-lg-4 {margin-bottom:0;}
#sub .p36 .col-lg-4 a {transition:all .2s ease-out;}
#sub .p36 .col-lg-4 a:hover {box-shadow: 0 8px 16px 0 rgb(0 0 0 / 5%);}
#sub .p36 .col-lg-4 a .video-box {position:relative; display:block; overflow:hidden;}
#sub .p36 .col-lg-4 a .video-box video{
    display:block; max-width:100%; height:auto;
    -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-out;
}
#sub .p36 .col-lg-4 a:hover .video-box video {
    -webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);
}
#sub .p36 .col-lg-4 a .bg-white {padding:24px; line-height:1.5; border:1px solid #E5E7E8; border-top:none;}
#sub .p36 .bg-white h5 {margin-bottom:0.5em; font-weight: 500;}
#sub .p36 .bg-white p {color:#9b9fa3;}
#sub .p36 .bg-white p:last-of-type {margin-top:8px;}
#sub .p36 .col-lg-4 a .video-box span[class^="icon"] {
    position:absolute; z-index: 1; display:inline-block; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px;
    background:url("/img/ico_play_circle_white_32px.png") no-repeat center center; background-size:32px 32px; -webkit-background-size:32px 32px;
}
#sub .p36 .bg-white i {margin-right:4px;}
#sub .p36 .page-link {background:transparent;}

#sub .p38 .wrap-1200 * {padding-left:0; padding-right:0; margin:0 auto;}
#sub .p38 .accordion {margin:40px auto;}
#sub .p38 .accordion .row {--bs-gutter-x: 0;}
#sub .p38 .accordion-body {margin-bottom:40px; overflow:hidden;}
#sub .p38 .accordion-button::after {position:absolute; top:50%; transform:translateY(-50%); height:9px; width:15px; right:5%;background-image:url("/img/arrow_none_collapsed.png"); background-size:contain;}
#sub .p38 .accordion-button:not(.collapsed)::after {background-image:url("/img/arrow_collapsed.png");}
#sub .p38 .accordion-header {display:table; width:100%;}

#sub .p40 {margin-top: 95px; margin-bottom:140px;}

/* Golf Course */
.course-list .filter-group .col-12.me-auto .badge {
    width: 20px; border-radius: 0 !important; font-size: 12px !important;
}
.course-list .filter-group .col-12.me-auto .exp {margin-top: 2px; font-size: 14px;}
.course-list .filter-group .col-12.me-auto .exp::first-letter {font-weight: 500; color: #000;}
@media (max-width: 479.98px) {
    .course-list .filter-group .col-12.me-auto > div {
        flex-direction: column;
    }
    .course-list .filter-group .col-12.me-auto > div > div:first-child {
        margin-bottom: 4px;
    }
}
@media (min-width: 480px) {
    .course-list .filter-group .col-12.me-auto > div > div:first-child {
        margin-right: 16px;
    }
}
.course-list .course-name, .course-info .course-name {
    display: block;
    padding: 16px 8px;
    text-align: center;
    font-weight: 500;
    text-decoration: none !important;
    font-size: 16px;
    color: #000;
}
.course-state {
    position: absolute; top: 0; left: 0; display: flex;
}
.course-state div[class^="prog"] {
    width: 40px; height: 40px;
    font-size: 14px;
    font-weight: 700;
    line-height: 42px;
    text-align: center;
    color: #fff;
}

.course-info .col-md-6.d-flex > img {
    object-fit: cover; object-position: center;
    width: 100%; max-height: 280px; border: 0; padding: 0; margin: 0;
}
.course-info table {border-width: 1px;}
.course-details .info {margin-top: 48px; margin-bottom: 16px !important; font-weight: 700; color: #000;}
.course-details .table thead th,
.course-details .table tbody td {height:62px; padding:0 12px; border-right: 1px solid #e5e7e8;}
.course-info .courselist .table td:last-child {border-right: 0;}
.course-info .courselist .table tr td {cursor: pointer;}
.course-info .courselist .table tr:last-child td {cursor: auto;}
.course-info .courselist .table .rounded-circle {
    display: inline-block;
    min-width: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    line-height:24px;
    vertical-align: baseline;
    text-align: center;
    border-radius: 50% !important;
}
.course-info .courselist .table td .rounded-circle.info-hole {
    color:#000;
    background:#fff;
    border:1px solid #00B34A;
}
.course-info .courselist .table td:hover .rounded-circle.info-hole {
    color:#fff;
    background:#00B34A;
    border:1px solid #00B34A;
    cursor:pointer;
}
.course-info .courselist .table td .rounded-circle.info-par {
    color:#000;
    background:#fff;
    border:1px solid #FFC107;
}
.course-info .courselist .table td:hover .rounded-circle.info-par {
    color:#fff;
    background:#FFC107;
    border:1px solid #FFC107;
    cursor:pointer;
}
.scorecard_title {width: 200px; position: absolute; top: 0; z-index: 10;}
.course-details .fix-table {width: calc(100% - 200px); margin-left: 200px;}
.course-details .fix-table .table {width: 100%;}
.course-details .fix-table .table .badge {
    width: 18px;
    min-height: 18px; max-height: 18px; height: 18px;
    padding: 3px !important;
    border-radius: 0 !important;
    text-align: center;
    color: #fff;
    z-index: 1;
}
@media (max-width: 991.98px) {
    .course-details .table * :not(span.rounded-circle) {
        min-height: 56px; max-height: 56px; height: 56px;
        padding:0 20px; vertical-align: middle; font-size: 14px;
    }
    .scorecard_title {
        width: 80px;
    }
    .course-details .fix-table {
        width: calc(100% - 80px);
        margin-left: 80px;
    }
    .course-details .fix-table .table {
        width: 100%;
    }
}

/* modal-hole-info */
#modal-hole-info .card {border-radius: 0;}
#modal-hole-info h6 {text-align: center; background: #fcfcfc !important;}
#modal-hole-info .minimap img {
    object-fit: contain;    /* contain;    cover; */
    object-position: center;
    width: 100%;
    max-height: 360px;
}
@media (max-width: 991.98px) {
    #modal-hole-info .minimap > * {
        flex: 0 0 auto;
        width: 100%;
    }
}
.hole-details {
    display: flex; flex-wrap: wrap;
    font-size: 15px; text-transform: uppercase;
    letter-spacing: 0;
}

  .hole-details span:not(:first-child)::before {
    content: "\00b7";
    padding: 0 4px;
}

/* Swing Video */
#sub .swing-view .accordion-body {margin-bottom:0px;}
#sub .swing-view .accordion-body > .row {border-top:2px solid #35383b; --bs-gutter-x: 0;}
#sub .swing-view .accordion-body .start-m {margin-top:0 !important;}
#sub .swing-view .accordion-button::after {position: absolute; top:50%; right: 16px; width:16px; height:9px; background-image:url("/img/arrow_none_collapsed_w.png"); background-size:contain; transform:translateY(-50%);}
#sub .swing-view .accordion-button:not(.collapsed)::after {background-image:url("/img/arrow_collapsed.png");}
#sub .swing-view .accordion-button,
#sub .swing-view .accordion-button:focus,
#sub .swing-view .accordion-button:active {
	display: block;
	text-align: center;
	padding: 0;
	background: #000 !important;
	border: 1px solid #000 !important;
	color: #fff !important;
	line-height: 48px;
	border-radius: 0;
}
#sub .swing-view .accordion-button:not(.collapsed),
#sub .swing-view .accordion-button:not(.collapsed):focus {
	background: #f9fafb !important;
	color: #000 !important;
	border: 1px solid #E5E7E8 !important;
	border-top: none !important;
}
#sub .swing-view .accordion-header {display:table; width:100%;}
#sub .swing-view .rebox {background:#f8f9fa; border-top:1px solid #35383b;}
#sub .swing-view .rebox .comment {padding: 24px;}
#sub .swing-view .rebox .comment p {margin-bottom: 12px; font-size:14px; font-weight: 500; color: #000;}
#sub .swing-view .rebox .comment input.btn-addon {width:calc(100% - 40px);}
#sub .swing-view .rebox .comment input.btn-addon + .btn-primary {width:40px; height:40px; line-height:18px !important;}
#sub .swing-view .rebox .comment input.btn-addon + .btn-primary span {font-size:16px;}

#sub .swing-view .rebox .reply {display:flex; flex-direction:column; padding: 24px;}
#sub .swing-view .rebox .reply .flex-row {margin-bottom:12px;}
#sub .swing-view .rebox .reply img {margin:0 12px 0 0; border: 1px solid rgba(0, 0, 0, .1);}
#sub .swing-view .rebox .reply h6 {font-size: 15px !important; font-weight: 500; margin-bottom:8px; /* text-indent: 2px; */}
#sub .swing-view .rebox .reply h6 + p {font-size:14px;}
#sub .swing-view .rebox .reply h6 + p i {font-size:14px; vertical-align:top;}
#sub .swing-view .rebox .reply .balloon {position:relative; display:inline-block; padding:16px; line-height:1.5em; font-size:14px; color:#35383B; border-radius:5px; background:#fff;}
#sub .swing-view .rebox .reply .del {display:inline-block; width:30px; height:30px; cursor:pointer; overflow:hidden;}
#sub .swing-view .rebox .reply .del i {font-size:24px; color:#9B9FA3; padding:3px;}
#sub .swing-view .content {padding: 40px 0 60px; line-height: 1.25;}
@media (max-width: 991.98px) {
    #sub .swing-view .content {padding: 40px 0; font-size:14px;}
}

/* Sign Up, Inquiry, MyProfile */
#sub .bp-w440-lt .row {--bs-gutter-x: 24px; margin:0 auto;}
#sub .bp-w440-lt > .row:first-of-type {border-top:2px solid #35383d;}
#sub .bp-w440-lt > .row {border-bottom:1px solid #e5e7e8;}
#sub .bp-w440-lt > .row .col-lg-3 {--bs-gutter-x: 0;}
#sub .bp-w440-lt > .row .col-lg-9 {margin: 12px 0; align-self: center !important;}
#sub .bp-w440-lt .col-lg-9.form-check-group .form-check {margin: 0 8px 0 0; letter-spacing: -0.5px;}
@media (max-width: 767.98px) {
    #sub .bp-w440-lt .col-lg-9.form-check-group .form-check {margin: 4px 8px 4px 0;}
}
#sub .bp-w440-lt > .row .d-table .btn-xs {margin-left:0.5em; padding:0 8px; height:20px; font-size:14px; line-height:1em;}
#sub .bp-w440-lt .input-group input[type="file"] {display:none !important;}
#sub .bp-w440-lt .col-lg-4.set {width:32%; padding:0; margin-right:2%;}
#sub .bp-w440-lt .col-lg-4.set:last-of-type {margin-right:0;}
#sub .bp-w440-lt label {text-align:left;}
#sub .bp-w440-lt small {display:block; margin-top:0.5rem; line-height:1.25em; color:#676D73;}
#sub .bp-w440-lt .exp{display:none;}
#sub .bp-w440-lt .agree-box {display:block; margin:24px 0; color: #676d73;}

/* Tournament > Tournament schedule */
.championship .sub_top {display: none;}
.championship .latest-tourn-wrapper {
    position: relative;
    background-color: #000;
    overflow: hidden;
}
.championship .latest-tourn-wrapper::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,transparent,#000);
    z-index: 1;
}
.championship .latest-tourn-info {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    z-index: 2;
}
.championship .badge {
    margin-left: -1px;
    padding: 7px 10px 6px !important;
    text-transform: capitalize;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.championship .latest-tourn-info > div * {line-height: 1.2; color: #fff;}
.championship .latest-tourn-info .badge {
    position: absolute;
    top: -18px;
    padding: 10px 28px 8px !important;
    font-size: 14px;
    font-weight: 500;
    z-index: 3;
}
.championship .latest-tourn-info h3 {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    color: #fff;
}
.championship .latest-tourn-info h6 {
    letter-spacing: 0.5px; font-weight: 400;
}
@media (min-width: 1400px) {
    .championship .latest-tourn-info {
        width: 50%;
        padding: 48px 48px 48px calc(50vw - 608px);
    }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    .championship .latest-tourn-info {
        width: 50%;
        padding: 48px 48px 48px calc(50vw - 45% - 8px);
    }
}
@media (max-width: 991.98px) {
    .championship .latest-tourn-info > div {width: 90%; margin: 48px auto;}
    .championship .latest-tourn-info > div p {font-size: 14px;}
}
@media (max-width: 575.98px) {
    .championship .latest-tourn-info > div {width: 90%; margin: 32px auto;}
    .championship .latest-tourn-info h3 {font-size: 24px;}
    .championship .latest-tourn-info h6 {font-size: 16px;}
}
.championship .latest-tourn-wrapper img {
    width: 100%;
    height: calc(100vh - 35vh);
    min-height: 560px;
    overflow: hidden;
    object-fit: cover;
    /* object-position: 10% 35%; */
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-out;
}
.championship .latest-tourn-info:hover h3 {
    color: #00b34a;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-out;
}
.championship .latest-tourn-info:hover + img {
    transform: scale(1.1);
}

.championship .tourn-card .card {
    position: relative;
    overflow: hidden;
    /* height: 380px;
    max-height: 380px;
    min-height: 380px; */
    background-color: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
}
@media (min-width: 768px) {
    .championship .tourn-card .card {min-height: 380px;}
}
.championship .tourn-card .card::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.125);
    z-index: 2;
}
.championship .tourn-card .card:hover {cursor: pointer;}
.championship .tourn-card .card:hover img {transform: scale(1.1);}
.championship .tourn-card .card:hover .card-title {
    color: #00b34a;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-out;
}
.championship .tourn-card .card .card-img-wrapper {
    position: relative;
    overflow: hidden;
}
.championship .tourn-card .card .card-img-wrapper::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg,transparent,#000);
    z-index: 1;
}
.championship .tourn-card .card img {
    width: 100%;
    height: 240px;
    max-height: 240px;
    min-height: 240px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-out;
}
.championship .tourn-card .card .card-body {
    position: relative;
    padding: 24px;
}
.championship .tourn-card .card .badge {
    position: absolute;
    top: -12px;
    z-index: 3;
}
.championship .tourn-card .card h5.card-title {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: normal !important;
    font-weight: 700 !important;
    line-height: 1.25;
    letter-spacing: 0;
    color: #fff;
}
.championship .tourn-card .card .card-footer {
    margin: 0 24px;
    padding: 8px 0 12px;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Sign Up, Inquiry, MyProfile */
#modal-handicap-reg span.rounded-circle {
  display: inline-block;
  min-width: 28px !important;
  max-height: 28px !important;
  height: 28px !important;
  line-height: 28px;
  text-align: center;
  color:#000;
  background:#fff;
  border: 1px solid #ff7519;
}

/* tournamentscheduleview > TournamentCondition.vue */
.condition .tourn-card .card {
    height: initial;
    max-height: initial;
    min-height: initial;
    background: rgb(0,0,0);
    background: linear-gradient(10deg, rgba(0,128,53,1) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 80%);
}
.condition .tourn-card .card:hover {cursor: auto;}
.condition .tourn-card .card:hover img {transform: none;}
@media (min-width: 768px) {
    .condition .tourn-card .card {
        background: linear-gradient(170deg, rgba(0,128,53,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 80%);
    }
    .condition .tourn-card .card .card-img-wrapper::before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 30%;
        height: 100%;
        background: linear-gradient(90deg,#000,transparent);
        z-index: 1;
    }
    .condition .tourn-card .card img {
        height: 200px;
        max-height: 200px;
        min-height: 200px;
    }
    .condition .tourn-card .card .badge {
        position: relative;
        z-index: initial;
    }
}

/* Tournament > Join Tournamen */
#sub.guide .wrap-1200 p {line-height: 1.5em;}
#sub.guide .wrap-1200 h5 {margin: 2em 0 1em;}

.join_tourn_step .card {padding: 28px; border-radius: 0;}
.join_tourn_step .card, .join_tourn_step .card > .row {height: 100% !important;}
.join_tourn_step .card-body p {font-size: 15px;}
.join_tourn_step .badge {
    margin-bottom: 16px; padding: 6px 10px !important;
    font-size: 11px !important; color:#fff;
    background-color: #000;
}
.join_tourn_step h6 {margin-bottom: 12px;}
@media (max-width: 991.98px) {
    #sub.guide .wrap-1200 p {font-size: 14px !important;}
    #sub.guide .wrap-1200 h5 {font-size: 18px !important;}
    .join_tourn_step h6 {font-size: 16px !important;}
}

/* How to join mini game : Updated : 24.02.13 */
#sub.minigame p {line-height: 1.5em; margin-bottom: 16px;}
#sub.minigame #term-dfn dfn {margin: 0 auto 0 0 !important;}
/*
#sub.minigame .w-60 {line-height:1.5em; color:#676D73;}
#sub.minigame .w-60 > p {margin-bottom:20px;}
#sub.minigame .w-60 .box::after {content: ""; display:block; visibility:hidden; clear:both;}
#sub.minigame .w-60 .box span {float:left; width:1rem; display:inline-block;}
#sub.minigame .w-60 .box p {float:left; width:calc(100% - 24px); margin-bottom:20px;}
@media (max-width: 991.98px) {
    #sub.minigame .w-60, #sub.minigame .w-40 {width:100% !important;}
    #sub.minigame .w-60.pe-5 {padding-right:0 !important;}
    #sub.minigame .mt-4 {margin-top: 0 !important;}
    #sub.minigame h4 {font-size:20px; line-height:26px;}
    #sub.minigame .w-60 p, #sub.minigame .w-60 .box span {font-size:14px;}
}
 */
/* Support */
article {display:flex;}
.article-header {border-top:2px solid #35383b; border-bottom:1px solid #E5E7E8;}
.article-header {padding:24px 2px;}
.article-header h5 {margin:0 0 20px; font-weight: 500; line-height: 1.25em; font-size: 20px !important;}
.article-header .d-flex {font-size: 14px; color:#9B9FA3;}
.article-header .icon.badge {margin-top: -2px; margin-right:8px;}
.article-header .ms-sm-auto {display: flex;}
.article-header .ms-sm-auto > span {display: flex; align-items: center;}
.article-header i {margin-top: -2px; margin-right:2px; font-size:16px !important; color:#afb1b3;}

.article-attach {padding:1em 2px; font-size: 14px; color:#000; border-bottom:1px solid #E5E7E8;}
.article-attach a i {margin-top: -1px; margin-right:4px; font-size:16px !important; color:#000;}
.article-attach a:hover {text-decoration:underline; color:#000 !important; cursor:pointer;}
.article-body {padding:30px 2px 60px; line-height:1.5em; color:#52575c;}
.article-footer {flex-direction:column; border-top:1px solid #35383b; border-bottom:1px solid #35383b;}
.article-footer div {padding:15px 8px 14px;}
.article-footer div.prev {border-bottom:1px solid #E5E7E8;}
.article-footer div a {display:flex; align-items:center;}
.article-footer i {margin-top: -1px; margin-right:8px; font-size:20px; color:#000;}
.article-footer span {
  display:inline-block; max-width:calc(100% - 30px); padding-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9B9FA3;
}
.article-footer a span {color:#52575c;}
.article-footer a span:hover {color:#000 !important;}
.article-footer .no-data a i {color:#9B9FA3;}
.article-footer .no-data a span {color:#9B9FA3 !important;}
@media (max-width: 575.98px) {
    .article-body {padding:20px 2px 40px; font-size:14px;}
}
@media (max-width: 991.98px) {
    .article-footer span {font-size:14px;}
}

/* Terms of Use & Privacy Policy */
#sub.terms .page, #sub.privacy .page {margin-top:0px;}
.rule {line-height:1.5em; color:#52575c;}
.rule ul {list-style-type:none;}
.rule-overview {padding: 40px 0; border-top:1px solid #35383b; border-bottom:1px solid #E5E7E8;}
.rule-list h5 {margin: 50px 0 24px; font-size: 18px; font-weight: 700;}
.rule-list li+li {margin-top:0.5em;}
.rule-list ul.sub-item {margin-top:0.5em;}
.rule-list ul.sub-item li+li {margin-top:0;}
.rule-list ul.sub-item span {font-size:18px !important; color:#676D73;}
.rule-list p.add {padding-left:1.25em;}
.rule-list h6 {margin:1em 0 0.25em; font-weight: 700; color:#52575c;}
.rule-list ul.type-circle {list-style-type:circle; padding-left: 1.25rem;}
.rule-list ul.type-circle li+li {margin-top:0;}

/* Term Definition */
#term-dfn {
    display: flex;
    margin: 12px 0 0 auto;
}
#term-dfn dfn {
    display: inline-flex;
    align-items: center;
    font-size: 14px !important;
    color: #ff7519;
    cursor: pointer;
}
#term-dfn dfn span[class^="material"] {
    margin-right: 2px;
    font-size: 16px !important;
}
#modal-term-dfn .tab-sub.position-sticky {
    top: 0px;
    padding: 24px 0;
    z-index: 1;
    background-color: #fff;
}
@media (max-width: 991.98px) {
    #modal-term-dfn .tab-sub.position-sticky {
        padding: 16px 0;
    }
}
#modal-term-dfn .card {font-size: 14px;}
#modal-term-dfn .not-collapsed {
    font-weight: 500;
    color: #000;
    background-color: #f8f9fa;
}
#modal-term-dfn [role="tabpanel"] > div {
    padding: 20px 16px;
    line-height: 1.25rem;
}

/* video */
a.position-relative.video-box {
    display:block; overflow:hidden; margin:0 auto;
}
a.position-relative.video-box .mask {
    position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; background:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter:alpha(opacity=10); opacity:0.1;
    -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-out;
}
a.position-relative.video-box video{
    display:block; max-width:100%; height:auto;
    -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-out;
}
a.position-relative.video-box:hover .mask {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:0.3; transition:all .2s ease-out;
}
a.position-relative.video-box:hover video {
    -webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);
}
a.position-relative.video-box span[class^="icon"] {
    display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:28px; height:28px;
    background:url("/img/ico_play_circle_white_32px.png") no-repeat center center; background-size:28px 28px; -webkit-background-size:28px 28px;
}
@media (max-width:479.98px) {
    a.position-relative.video-box {width: 96px;}
    a.position-relative.video-box span[class^="icon"]{background-size:20px 20px; -webkit-background-size:20px 20px;}
}
@media (min-width:480px) {
    a.position-relative.video-box {width: 160px;}
}
@media (min-width: 768px) {
    a.position-relative.video-box {width: 200px;}
}
@media (max-width: 1399.98px) {
    #sub .p36 .bg-white span:last-of-type {display:block; margin-top:0.25rem;}
}
@media (max-width: 1199.98px) {
    #scorecard .wrap-1200:nth-of-type(3) {margin-left:5%; width:95%;}
    #scorecard .tab-content #pills-1 .list > .table:first-of-type {width:100px;}
    #scorecard .tab-content #pills-1 .list .table * {font-size:14px;}
    #scorecard .list {-ms-overflow-style: none; scrollbar-width: none;}
    #scorecard .list .fix-table {margin-left:100px;}
    #scorecard .list::-webkit-scrollbar {display:none;}
    #scorecard .list .scorecard_title {border-bottom:0;}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #scorecard .list .fix-table {width:calc(100% - 158px); margin-left:100px;}
}
@media (max-width: 991.98px) {
    td {font-size:14px !important;}

    #sub label.d-table-cell, #sub p.d-table-cell {padding:0.75em; line-height:1.5em;}

    #sub .status-search,
    #sub .gender-search {max-width:unset;}
    #sub .status-search ul,
    #sub .gender-search ul {margin-left:0;}
    #sub .select-search {max-width:100%;}

    .gender-search ul,
    .gender-search > div {width:100%;}
    .gender-search > div {margin-bottom:10px;}

    #sub .city-search {max-width:100%;}
    #sub .city-search p {line-height:1; margin-bottom:25px; text-align:left;}
    #sub .city-search select {width:50%;}
    #sub .city-search select:last-of-type {border-right:1px solid #cdcfd1;}
    #sub .city-search input[type="text"] {width:100%; margin-top:10px;}

    #sub .page h3.subtitle {margin: 40px 0 20px; font-size: 20px !important;}
    #sub .page h3.subtitle .material-icons-outlined {font-size: 20px;}
    #sub .page p.info {margin-bottom: 20px;}

    #sub .m-none {display:none !important;}
    #sub .pc-none {display:block !important;}

    #sub .center-btn,
    #sub .right-btn {margin:25px auto 0; max-width:100px;}

    #sub .p12 .select-search {margin-top:0;}
    #sub .p12 h5 {margin:0; line-height:48px; font-size:16px;}

    #sub .p14 p {font-size:16px; margin-bottom:25px;}
    #sub .p14 span {font-size:14px;}
    #sub .p14 a {font-size:14px;}

    #sub .p15 td, #sub .p15 th {width:unset;}

    #sub .p18 .font-montserrat {margin-top:40px;}
    #sub .p18 .row p {font-size:14px; padding:0.75rem;}

/*     #sub .p29 .search {max-width:100%;}
    #sub .p29 .search select,
    #sub .p29 .search input[type="text"] {font-size:14px;} */

    #sub .p36 .status-search {margin:0 auto 30px; max-width:unset;}
    #sub .p36 .status-search select {max-width:105px; margin-left:0;}
    #sub .p36 .status-search input[type="text"] {max-width:calc(100% - 153px);}
    #sub .p36 h6 {font-size:16px; margin-bottom:15px;}
    #sub .p36 span {font-size:13px;}
    #sub .p36 span i {font-size:16px; margin-left:0;}
    #sub .p36 .col-lg-4 {width:49%; margin-bottom:30px; padding:0;}
    #sub .p36 .col-lg-4:nth-of-type(3n) {margin-right:2%;}
    #sub .p36 .col-lg-4:nth-of-type(2n) {margin-right:0;}
    #sub .p36 .col-lg-4 a {box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.11);}
    #sub .p36 .col-lg-4 a .bg-white {padding:20px 16px 14px;}
    #sub .p36 .bg-white h5 {font-size:16px;}
    #sub .p36 .bg-white span i {margin-left:0;}

    #sub .p38 .accordion {margin-top:25px;}
    #sub .p38 .accordion-body {margin-bottom:25px;}
    #sub .p38 .accordion-button {line-height:48px;}

    #sub .p41 p {font-size:16px; margin-bottom:25px;}

    #sub .bp-w440-lt textarea {font-size:14px; margin:0;}
    #sub .bp-w440-lt > .row > div {width:60%;}
    #sub .bp-w440-lt > .row > div:first-of-type {width:40%;}
    #sub .bp-w440-lt > .row:last-of-type > div {width:100%;} /* button */
    /* #sub .bp-w440-lt > .row .col-lg-9 {margin: 12px 0;} */
    #sub .bp-w440-lt .col-lg-9 > .row > .col-lg-4 {width:100%; margin-bottom:10px;}
    #sub .bp-w440-lt .col-lg-9 > .row > .col-lg-4:last-of-type {margin-bottom:0;}
    #sub .bp-w440-lt .agree-box label, #sub .bp-w440-lt .agree-box label a{font-size:12px; line-height:1.4;}
    #sub .bp-w440-lt .agree-box .form-check-input[type="checkbox"] {width:1em; height:1em;}

    /* Terms of Use & Privacy Policy */
    .rule {font-size:14px;}
    .rule-overview {padding:20px 0 18px;}
    .rule-list h5 {margin:30px 0 10px; font-size:16px;}
    .rule-list ul.sub-item span {font-size:16px !important;}
    .rule-list h6 {font-size:14px;}

    .confirmp {padding-top:40px;}
}

@media (max-width:767.98px) {
    #main .main_visual .slide-wrap .slide-content {width:100%;}
    #sub .bp-w440-lt div.me-2{flex: 1 1 100% !important; margin-bottom: 0.5rem;}
    #sub .bp-w440-lt div.me-2 img{margin:0 5px 5px 0;}
    #sub .bp-w440-lt .exp{display:inline-block; font-size:12px; color:#676D73;}
}

@media (max-width:639.98px){
    #main .main_social .slide .slide-wrapper {margin-right:0;}
}

@media (max-width:439.98px) {
    #sub .p36 .col-lg-4 a .video-box span[class^="icon"]{background-size:24px 24px; -webkit-background-size:24px 24px;}
    #sub .p36 .bg-white span:first-of-type::after{display:none;}
    #sub .p36 .bg-white span.lh-lg {display:block !important; margin-right:0;}

    #sub .bp-w440-lt > .row > div {width:100% !important;}
    #sub .bp-w440-lt .row>* {padding:0;}
    #sub .bp-w440-lt .col-lg-3 {border-bottom:1px solid #E5E7E8;}
    #sub .bp-w440-lt .d-flex.pt-4 {justify-content: center !important;} /* recaptcha */
}

@media (max-width: 383.98px) {
    #sub .p12_view .row .col-lg-6.border-bottom .row > div {width:100%;}
    #sub .p12_view .row .col-lg-6.border-bottom .row > div label {text-align:left;}

    #sub .p15 .col-lg-6.border-bottom .row > div {width:100%;}
}