/**************** public *******************/

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

    * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: 'Noto Sans KR', -apple-system,Arial, sans-serif; 
        -webkit-tap-highlight-color: transparent; letter-spacing: -0.05rem; font-size: 2.8rem;
    }
    html, body, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
    abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, 
    strike, strong, sub, sup, tt, var, b, u, i, ul, ol, li, dl, dt, dd, table, caption,
    tbody, tfoot, thead, tr, th, td, fieldset, fo7m, label, legend, input, button, textarea, select 
    {margin:0; padding: 0; }
    html, body { margin: 0; padding: 0; height: 100%;}

body {
    background-color: #fff;
    margin: 0;
    height: auto;
    font-size: 14px;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%; /* 모바일에서 텍스트 크기 자동 조절 방지 */
    text-size-adjust: 100%;
}
    input, select, textarea {  outline: none; font-size: 1em; }
    textarea { resize: none; }
    input:focus, select:focus, textarea:focus { border-color: #333; }
    select {
        padding: 3rem;
        height: 10rem;
        border: 0;
        background: #F1F1F5;
        border-radius: 2rem;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url(../img/icon/arrow_down_g.png);
        background-position: right 2rem center;
        background-repeat: no-repeat;
        background-size: 2.5rem;
        padding-right: 5rem;
        
   }
    select::-ms-expand {
        display: none;
    }
    input[type="text"] {width:100%;}
    input[name="title"] {font-size: 21px; font-weight: 800; text-align: center;}
    input[type="password" i] { font-family:"Droid Sans"; }
    input[type="password" i]::placeholder {
        font-family: 'Noto Sans KR', -apple-system,Arial, sans-serif;
    }

    em { font-style: inherit; }
    ul { list-style: none; }
    a { text-decoration: none; color: #000; }
    i { font-style: inherit; }
    button { font-weight: 700; font-size: 1.1em; }
    button:focus { outline: none; box-shadow: 0px 0px 10px #eee; }
    h3 { font-size: 24px; font-weight: 700; }

    table {
        width: 100%;
        border-collapse: collapse;
        border-left: 0px;
        border-right: 0px;
        font-size: 1em;
    }
    th, td {
        border: 0px solid #ccc;
        text-align: center;
        border-left: 0px;
        height: 7.5rem;
    }
    th { color: #32353B; background-color: #eee; font-weight: 500; }
    th:focus { outline: none; }
    th:last-child, td:last-child { border-right: 0; }
    th.tx-left, td.tx-left { text-align: left; padding-left: 20px; }
    td > a:hover { text-decoration: underline; }

    table .btn { display: inline-block; }
    table select,
    table input { width: 100%; }
    table em { margin: 0px 5px; }
    img { vertical-align: top; }
    /* color */
    h2,h3,h4,h5 { font-weight: 500; line-height: 1em; padding-bottom: 15px; }
    h3 { font-size: 2.2em; }
    h4 { font-size: 1.6em; }
    h5 { font-size: 1.3em; }
    a { color: currentColor; }

    .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
    .ellipsis2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2em;
        height: 2.4em;
    }

    .container { min-height: 100vh; }
    .wrap { position: relative; }
    .inner { margin: 0 auto; position: relative; padding: 0 4.5rem; }

    html {  font-size: 1.32891vmin; }
    input { 
        border: none;
        border-radius: 2rem;
        height: 10rem;
        width: 100%;
        background: #F1F1F5;
        padding: 1rem 3rem;
        font-size: 3rem;
    }
    input::placeholder {
        color: #999999;
    }

    .logo-title { font-size: 5.6rem; font-weight: 700; }

    .page-title { 
        padding: 8rem 4.5rem; 
        padding-bottom: 5rem;
    }
    .page-title.main-title { text-align: center; }
    .page-title h1 { 
        position: relative;
        font-size: 4rem; 
        font-weight: 400; 
        line-height: 1em;
        padding: 2rem 0; 
    }
    .page-titl-red { 
        background: #E03321;
        color: #fff;
        border-radius: 0 0 0 8rem;
        font-size: 4.9rem;
        padding-bottom: 8rem;
    }

    .form-wrap {  }
    .form-wrap form { display: flex; flex-direction: column; gap: 16px; }
    .form-wrap form .field { position: relative; }
    .form-wrap form .field + .field { }
    .form-wrap form .field-inp { }
    .form-wrap form .field-inp .tit { 
        margin: 2rem 0;
        margin-bottom: 1.5rem;
    }
    .form-wrap form .field-inp .btn_clear {
        position: absolute;
        right: 0;
        top: 0;
        margin: 2.5rem 3rem;

        width: 5rem;
        height: 5rem;
        border-radius: 2.5rem;
        background-image: url(../img/icon/clear.png);
        background-size: cover;
        z-index: 10;
    }

    .form-wrap form .field-inp .checker {
        position: absolute;
        right: 0;
        top: 0;
        margin: 2.5rem 3rem;

        width: 4.5rem;
        height: 4.5rem;
        border-radius: 2.5rem;
        background-image: url(../img/icon/check.png);
        background-size: cover;
        z-index: 10;
    }

    .form-wrap form .alert-msg { 
        padding: 2rem 0;
        color: #FF3120;
        border-top: 1px solid #FF3120;
        opacity: 0;
    }
    .form-wrap form button.submit {
        line-height: 10rem;
        width: 100%;
        color: #fff;
        background: #E03321;
        border: none;
        border-radius: 2rem;
        box-shadow: 0 2rem 3rem rgb(224 51 33 / 30%)
    }


    .check-box { 
        display: inline-block;
        position: relative;
    }

    .check-box + .check-box {
        margin-left: 3rem;
    }

    .check-box input { 
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .check-box input + label {
        display: inline-block;
        line-height: 4rem;
    }
    .check-box input + label:before {
        content: "";
        display: inline-block;
        vertical-align: top;
        width: 4rem;
        height: 4rem;
        border-radius: 2.5rem;
        border: 1px solid #d9d9d9;
        margin-right: 1rem;
    }
    .check-box input:checked + label:before {
        border: 1px solid #E03321;
        background-image: url(../img/icon/checked.png);
        background-size: cover;
    }

    .hisback { 
        display: inline-block;
        vertical-align: top;
        width: 5.6rem;
        height: 4.6rem;
        background-image: url(../img/icon/back.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 6rem;
    }


    .field-group .tit { font-weight: 500; margin: 2rem 0; margin-bottom: 1.5rem; }
    .field-vertify { }
    .field + .field-vertify,
    .field-vertify + .field, 
    .field-vertify + .field-vertify,
    .field + .field { margin-top: 2rem; }
    .field-vertify .field-inp {
        width: 79%;
    }
    .field-vertify > .btn {
        float: right;
        width: 18%;
        height: 10rem;
        line-height: 10rem;
        text-align: center;
        font-size: 2.8rem;
        font-weight: 500;
        color: #fff;
        background-color: #E03321;
        border-radius: 2rem;
    }
    .field-vertify.complet .field-inp .btn_clear {
        position: absolute;
        right: 0;
        top: 0;
        margin: 3rem 3rem;

        width: 4rem;
        height: 4rem;
        border-radius: 2.5rem;
        background-image: url(../img/icon/checked.png);
        background-size: cover;
        z-index: 10;
    }
/******** public // *******/


/* 인트로 */
    .intro {
        position: relative;
        display: table;
        padding: 4.5rem;
        letter-spacing: -0.2rem;
        width: 100%;
        min-height: 100vh;
        background-image: url(../img/intro.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        font-size: 3.9rem;
    }
    .intro .title { 
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 30vw;
        padding: 0 4.5rem;
        color: #fff;
    }
    .intro .title h1 { 
        font-size: 8.3rem;
        margin-bottom: 1rem; 
    }
    .intro .title .btn_circle {
        position: absolute;
        right: 4.5rem;
        bottom: -2rem;
    }
    .btn_circle {
        display: inline-block;
        width: 10rem;
        height: 10rem;
        border-radius: 5rem;
        background: #E03321;
        border: none;
        box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 50%);
        background-image: url(../img/icon/arrow_right.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5rem;
    }


/* 로그인 */
    .login_area { padding: 6rem 0; }
    .login_area .logo-title {
        padding-bottom: 15rem;

    }
    .login_area .submit {
        margin-top: 12rem;
    }
    .login_area input { border-radius: 2rem; }

    .account-link {
        text-align: center;
        padding: 9rem 0;
        padding-bottom: 4rem;
    }
    .account-link a {
        color: #5C5F67;
        display: inline-block;
        margin-bottom: 2rem;
    }
    .account-link .find-pwd { color: #E03321; }


/* 아이디 비밀번호 찾기  */
    .page-tab { display: flex; margin-bottom: 4rem; border-radius: 2rem; border: 1px solid #ddd; overflow: hidden;}
    .page-tab:after { content: ""; display: block; clear: both; }
    .page-tab li { 
        flex: 1;
        display: inline-block; 
        text-align: center; 
        border-right: 1px solid #ddd;
    }
    .page-tab li:last-child {
        border: 0;
    }
    .page-tab li a { display: block; font-size: 3.5rem; line-height: 9.625rem; }

    .page-tab li.active { 
        color: #fff; 
        background: #E03321; 
        border: 0;
        font-weight: 700;  
    }

    .form-wrap .comment { 
        margin: 6rem 0;
        text-align: center;
        font-size: 3rem;
        color: #5C5F67;
    }

    .form-wrap .vertify {
        text-align: center; 
        color: #E03321;
        padding: 2.8rem 0;
        background: rgba(217, 45, 32, .1);
        border-radius: 2rem;
    }
    .form-wrap .vertify * { font-size: 3.2rem; }

    .form-find-id .submit, .form-find-pw .submit { margin-top: 15rem; }

    .form-find-id .field,
    .form-find-pw .field{
        margin: 0;
    }


/* 회원가입 */
    .btn_search {
        background-image: url(../img/icon/search.png);
        background-position: center;
        background-size: 8rem;
        background-repeat: no-repeat;
    }

    .sign-form button.submit { margin: 4rem 0; }
    .sign-form .field-inp .alert { 
        display: none;
        padding: 2rem 0;
        color: #FF3120;
        border-top: 1px solid #FF3120;
    }


/* 회원검색 */
    .tb_item { display: table; width: 100%; }
    .tb_item dd { display: table-cell; }

    .sub-page-wrap {
        position: fixed;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9000;        
        transition: all 0.3s cubic-bezier(0, 0.74, 1, 0.99);
        -webkit-transition: all 0.3s cubic-bezier(0, 0.74, 1, 0.99);
        overflow: auto;
    }
    .sub-page-wrap .head {
        position: relative;
        padding: 8rem 4.5rem;
        padding-bottom: 5rem;
        line-height: 9rem;
        text-align: center;
    }
    .sub-page-wrap .head h1 {
        font-size: 4rem;
        font-weight: 400;
    }
    .sub-page-wrap .head .closer {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 5rem;
        height: 5rem;
        z-index: 1;
        margin: 7rem 4.5rem;
    }

    .sub-page-wrap.on {
        top: 0%;
    }



    .search-list { 
        padding: 0 4.5rem; 
        height: calc( 100% - 22rem);
        overflow-y: scroll;
    }
    .search-list li {
        color: #5C5F67;
        background: #ededed;
        padding: 3rem;
        margin-bottom: 2rem;
    }
    .search-list .tb_item dd {
        vertical-align: bottom;
    }

    .search-list .recom_id { color: #FF3120; }
    .search-list .date { text-align: center; }
    .search-list .btn {
        float: right;
        width: 12rem;
        height: 9rem;
        line-height: 9rem;
        text-align: center;
        font-size: 2.8rem;
        font-weight: 500;
        color: #fff;
        background-color: #E03321;
        border-radius: 2rem;
    }



    .modify-form button.submit {
        margin: 4rem 0;
    }
   .modify-form .field-group input { border-radius: 2rem; }


/* 공지사항 */
    .page-title .gnb_trigger {
        position: absolute;
        right: 0;
        top: 0;
        height: 8.5rem;
        width: 8.5rem;
        background-image: url(../img/icon/bugger.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 4.5rem;
    }

    .search-area {  }
    .search-area select {
        width: 30%;
    }
    .search-area .search-inp {
        float: right;
        width: 67%;
    }
    .search-area .search-inp input {
        border-radius: 2rem;
        background-image: url(../img/icon/search_g.png);
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 6rem;
        padding-right: 7rem;
    }

    .notice-list {  }
    .notice-list li { 
        font-size: 2.1rem;
        padding: 2.5rem 0;
        margin-top: 2rem; 
        border-bottom: 1px solid #ddd;
    }
    .notice-list li a {
        display: block;
        background-image: url(../img/icon/arrow_right_g.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 4rem;
        padding-right: 8rem;
    }
    .notice-list li a .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.4rem;
    }
    .notice-list li a .tit b{
        font-size: 3rem;
    }
    .notice-list li a .tit span{
        font-size: 2rem;
        font-weight: 500;
        background: rgba(217, 45, 32, .06);
        padding: .4rem 1rem;
        border-radius: 1rem;
        color: rgba(217, 45, 32, .8);
    }
    .notice-list .info { 
        margin-top: 1rem;
        color: #b0b0b0; 
    }
    .notice-list .info span{
        font-size: 2.4rem;  
    }
    .notice-list .info em { 
        font-size: 2rem;      
        display: inline-block; 
        vertical-align: top;
        padding: 0 1rem; 
        line-height: 4rem; 
    }


/* 글로벌 네비 */
    .aside_gnb { 
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        z-index: 9000;

        transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
    }
    .aside_gnb .dim {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 50%);
        z-index: 10;
        opacity: 0;
        transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
    }
    .aside_gnb .contain {
        position: absolute;
        right: 0;
        top: 0;
        width: 80vw;
        height: 100%;
        background: #fff;
        padding: 13rem;
        z-index: 100;
        transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
    }
    .fixed .aside_gnb { right: 0; }
    .fixed .aside_gnb .dim { opacity: 1; }


    .aside_gnb .contain .user_id {
        font-size: 4rem;
        font-weight: 500;
        margin-top: 5rem;
        margin-bottom: 12rem;
        padding-left: 2rem;
    }
    .aside_gnb .contain .gnb_list {  }
    .aside_gnb .contain .gnb_list li { 
        margin-bottom: 5rem; 
        padding-left: 2rem;
    }
    .aside_gnb .contain .gnb_list li a { 
        font-size: 4.5rem;
        color: #5C5F67;
    }

    .aside_gnb .contain .login {
        position: absolute;
        left: 13rem;
        right: 13rem;
        bottom: 15rem;
        color: #fff;
        line-height: 9.5rem;
        border-radius: 1rem;
        background: #E03321;
        text-align: center;
        font-weight: 500;
    }
    .aside_gnb .contain .login a {
        font-size: 3.5rem;
    }

/* 공지사항 세부 */
    .notice-detail { 
        padding: 0 4.5rem;
        height: calc( 100% - 23rem);
    }
    .notice-detail .title {
        background: #F1F1F5;
        border-top: 2px solid #707070;
        padding: 4rem 2rem;
        margin-bottom: 2rem;
    }
    .notice-detail .title .info {
        margin-top: 2rem;
        color: #848484;
    }
    .notice-detail .title .info em {
        display: inline-block;
        vertical-align: top;
        padding: 0 1rem;
        font-size: 2.2rem;
        line-height: 4rem;
    }

    .notice-detail .contents {
        padding: 3rem 2rem;
        color: #5C5F67;
        background: #F1F1F5;
        font-weight: 500;
        white-space: pre-line;
        border-radius: 1rem;
        height: 75%;
        overflow-y: scroll;
    }


/* 예상 적중률 */
    .hl-box { 
        background: #F3F3F3; 
        padding: 2rem 3rem; 
        border-radius: 2rem;
        font-weight: 500;
        line-height: 1.7em;
        margin-bottom: 2rem;
    }
    .hl-box .tit { font-weight: 700; }

    .history-wrap { 
        padding-bottom: 5rem;
        height: calc( 100% - 22rem);
    }

    .tab-group {  
        position: relative;
        box-shadow: 0px 0.2rem 0.3em rgb(0 0 0 / 50%);
        z-index: 10;
    }
    .tab-group:after {
        content: "";
        display: block;
        clear: both;
    }
    .tab-group li {
        display: inline-block;
        float: left;
        font-size: 3rem;
        border: 1px solid transparent;
        width: 33.3333%;
        text-align: center;
        line-height: 8rem;
        color: #fff;
    }

    .tab-group li:nth-child(1) { background: #d72631; }
    .tab-group li:nth-child(2) { background: #C1222C; }
    .tab-group li:nth-child(3) { background: #b61d26; }

    .tab-group li.active {
        background: #E03321;
        border-bottom: 1px solid #fff;
    }

    .his-detail {   }
    .his-detail td {
        font-size: 2.6rem; 
        font-weight: 500;
        border-bottom: 1px solid #c8c8c8;
    }
    .his-detail .total td {  
        background: #e7e7e7;
        border-bottom: 0;
    }
    .his-detail .btn {
        display: inline-block;
        width: 10rem;
        line-height: 5.5rem;
        border-radius: 1rem;

        color: #fff;
        background: #E03321;
        font-weight: 500;
        font-size: 2.3rem;
    }


/* 상세 */
    .select-his-detail { 
        padding: 0 4.5rem;
        height: calc( 100% - 23rem);
    }

    .select-his-detail .contents {
        height: 95%;
        overflow-y: scroll;
    }

    .select-his-detail th { background: #e7e7e7; }

    .select-his-detail td {
        font-size: 2.5rem; 
        border-bottom: 1px solid #c8c8c8;
    }
    .select-his-detail .total td { background: #e7e7e7; border-bottom: 0; }


/* 경기 일정 */
    .race-list {  }
    .race-list td { 
        padding: 2rem 0;
        text-align: left;
    }
    .race-list td:nth-child(1) { padding-left: 2rem; }
    .race-list td:nth-child(2) { padding: 2rem 1rem; vertical-align: bottom }
    .race-list td:nth-child(3) { padding-right: 2rem; vertical-align: bottom }

    .race-list td:nth-child(1) .link,
    .race-list td:nth-child(3) .link  { background: #000000; }
    .race-list td:nth-child(2) .link { background: #5C5F67; }

    .race-list .date { font-size: 3.5rem; font-weight: 500; line-height: 1em; }
    .race-list .area { font-size: 2rem; color: #999999; margin-bottom: 0.5rem; }
    .race-list .sub { 
        font-size: 2.4rem;
        color: #5C5F67;
    }
    .race-list .link {
        display: inline-block;
        width: 100%;
        margin-top: 1rem;
        line-height: 6rem;
        font-size: 2.5rem;
        border-radius: 1rem;
        text-align: center;
        color: #fff;
    }
    .race-list .num {
        text-align: center;
        font-size: 4rem;
        margin-bottom: 3rem;
    }



/* 주문신청 */
    .order-from { padding-bottom: 5rem; }
    .order-from .btn_group:after { content: ""; display: block; clear: both; }
    .order-from .btn_group .btn {
        display: inline-block; 
        float: left;
        width: 48%;
        margin-bottom: 2%;
        margin-right: 4%;
        text-align: center;
        line-height: 8rem;
        color: #fff;
        background: #E03321;
        border-radius: 1rem;
    }
    .order-from .btn_group .btn:nth-child(2n) { margin-right: 0; }
    .order-from .btn_group .btn.active { background: #000; }
    .order-from table { margin: 2rem 0; margin-bottom: 4rem; border-top: 0.5rem solid #000; border-bottom: 0.2rem solid #ccc; }
    .order-from table th { background: #ddd }
    .order-from table td { height: 9rem; }
    .order-from td .btn {
        display: inline-block;
        width: 10rem;
        line-height: 5.5rem;
        border-radius: 1rem;
        color: #fff;
        background: #E03321;
        font-weight: 500;
        font-size: 2.3rem;
    }

    .order-area {  }
    .order-area .hl-box .tit {
        display: inline-block;
        font-size: 2.6rem;
        color: #fff;
        text-align: center;
        width: 23rem;
        line-height: 6rem;
        background: #E03321;
        border-radius: 1rem;
        margin-bottom: 1rem;
    }
    .order-area .hl-box .desc {
        font-size: 2.6rem;
        font-weight: 400;
    }

    .order-area .hl-box .copy { float: right; color: #E03321; }
        .order-area .hl-box .danger {
            margin-top: 2rem;
            color: #f51502;
            font-weight: 400;
        }




/* 주문내역 */
    .order-history-wrap .tab-group li { width: 25%; background: #b61d26 !important; }
    .order-history-wrap .tab-group li.active { background: #E03321 !important; }

    .search-datepick { margin-top: 4rem; }
    .search-datepick .field {
        position: relative;
        display: inline-block;
        float: left;
        width: 46%;
        padding-right: 15%;
    }
    .search-datepick input { height: 8rem; text-align: center; }
    .search-datepick em { 
        display: inline-block;
        line-height: 8rem;
        width: 8%;
        text-align: center;
        float: left;
        font-weight: 500; 
    }
    .search-datepick .btn_calendar {
        position: absolute;
        right: 0;
        top: 0;
        width: 28%;
        height: 8rem;
        background-color: #fff;
        background-image: url(../img/icon/calendar.png);
        background-size: 90%;
        background-repeat: no-repeat;
    }
    .search-datepick .btn_search {
        margin-top: 2rem;
        width: 100%;
        line-height: 7rem;
        font-size: 3.2rem;
        text-align: center;
        background: #5C5F67;
    }

    .sc-tit { margin-top: 3rem; margin-bottom: 0.5rem; }
    .order-history-wrap table {  margin-bottom: 4rem; border-top: 0.5rem solid #000; border-bottom: 0.2rem solid #ccc; }
    .order-history-wrap table th { background: #ddd }
    .order-history-wrap table td { height: 9rem; }
    .order-history-wrap td .btn {
        display: inline-block;
        width: 10rem;
        line-height: 5.5rem;
        border-radius: 1rem;
        color: #fff;
        background: #E03321;
        font-weight: 500;
        font-size: 2.3rem;
    }
    .order-history-wrap table .total td:first-child { height: 8rem; text-align: left; padding-left: 2rem; }

    .order-his-detail { 
        padding: 0 4.5rem;
    }
    .order-his-detail table {
        border-top: 0.5rem solid #000;
    }
    .order-his-detail table th { background: #ddd; }
    .order-his-detail table td { border-bottom: 1px solid #ccc; }
    .order-his-detail table .total td {
        background: #ddd;
        border-bottom: 0;
    }



/* index */
    .main-title {
        padding-bottom: 3rem;
    }
    .main-title .logo {
        position: absolute;
        left: 0;
        top: 0;
        height: 8.5rem;
        width: 16rem;
        background-image: url(../img/logo/logo.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16rem;
    }

    .main-title .bell {
        position: absolute;
        right: 9rem;
        top: 0;
        height: 8.5rem;
        width: 8.5rem;
        background-image: url(../img/icon/bell.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 5.5rem;
    }

    .main-cotain { 
        padding-bottom: 20rem;
        background-image: url(../img/logo/ft_logo.png);
        background-repeat: no-repeat;
        background-position: bottom 4rem right 6rem;
        background-size: 100%;
        background-size: 17rem;
    }
    .main-visual { 
        display: table;
        width: 100%;
        height: 36rem;

        background-image: url(../img/visual.png);
        background-position: top center;
        background-size: 100%;
    }
    .main-visual .contents {
        display: table-cell;
        vertical-align: bottom;
        background: rgb(0 0 0 / 20%);
    }
    .main-visual .contents .title {
        float: right;
        padding: 4.5rem;
        font-size: 4rem;
        color: #fff;
        font-weight: 500;
        line-height: 1.2em;
    }

    .main-nav { 
        padding: 0rem 6rem;
        padding-bottom: 5rem;
    }
    .main-nav li {
        padding-left: 9rem;
        font-size: 4.5rem;
        font-weight: 500;
        margin-top: 6rem;
        line-height: 9rem;
        color: #5C5F67;

        background-position: left 1rem center;
        background-repeat: no-repeat;
        background-size: 5rem;
    }
    .main-nav li .btn_circle { float: right; width: 9rem; height: 9rem; }

    .main-nav li:nth-child(1) { background-image: url(../img/icon/horse_shoe.png); }
    .main-nav li:nth-child(2) { 
        background-image: url(../img/icon/horse.png); 
        background-size: 7rem; 
        background-position: left center;
    }
    .main-nav li:nth-child(3) { background-image: url(../img/icon/ticket.png); }
    .main-nav li:nth-child(4) { background-image: url(../img/icon/ic-list.png); }
    .main-nav li:nth-child(5) { background-image: url(../img/icon/helmet.png); background-size: 6rem;  }