:root{
    --color:white;
}
*{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    font-family:"Kanit";
    padding: 0;
    margin: 0;
    text-decoration: none;
}
*:focus{
    outline: none;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
clear-b{
    display: block;
    content: '';
    clear: both;
}
.menu-t{
    width: 100%;
    margin: auto;
    height: 50px;

}
.container-t>.container-t.a1{
    overflow: hidden;
    background-color: white !important;
}
.menu-t::after,
.menu-b::after{
    display: block;
    content: '';
    clear: both;
}
.menu-t>a:nth-child(1){
    color:rgb(27,92,122);
    background-color: rgb(185,227,240);
}
.menu-t>a:nth-child(2){
    color:rgb(27,92,122);
    background-color:rgb(171,214,98);
}
.menu-t>a:nth-child(3){
    color:rgb(87,68,35);
    background-color:rgb(219,199,78);
}
.menu-t>a:nth-child(4){
    color:white;
    background-color:rgb(215,84,38);
}
.menu-t>a:nth-child(5){
    color:white;
    margin-right: 0;
}
/*.menu-t.a1>a:nth-child(4){*/
/*    margin-right: 0;*/
/*}*/
.menu-t>a{
    display: block;
    float: left;
    width: calc((100% - 24px) / 4);
    height: 45px;
    border-radius: 8px;
    background-color: blue;
    margin-right:6px;
    font-size: 10px;
    line-height: 45px;
    font-weight: bold;
    text-align: center;
    font-family: 'Cordia New';
    text-shadow: 0;

}
.menu-t.a1>a{
    width: calc((100% - 24px) / 5);
}
.menu-t>a:hover{
    transition: 0.25s ease;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.25);
}

.menu-t .active{
    height: 50px;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.25);
    border-radius: 8px 8px 0 0;
}
.container-t {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 15px;
}
.logo-t{
    padding: 12.5px;
}
.logo-t img{
    display: block;
    margin: auto;
    height: 230px;
    animation: logot 0.45s ease;
}
.menu-t+.container-t{
    padding-top: 27px;
    background-color:#dcc64d;
    margin-bottom: 20px;
}

.menu-t+.container-t>.container-t{
    background-color:#a58925;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.menu-b>.a,
.menu-b>.b{
    width: 45%;
    padding-top: 25px;
    margin-left: 5%;
}
.menu-b>.a.fr,
.menu-b>.b.fr{
    margin-right: 5%;
    margin-left: 0;
}
.menu-b>.b.fr{
    margin-right: 2.25%;
}
.menu-b .a a{
    display: block;
    /*margin: auto;*/
    height: 58px;
    line-height: 58px;
    border-radius: 29px;
    border:2px solid white;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Cordia New';
    /*width: 76%;*/
    width: 95%;
}
.menu-b .a.fr a{
    margin-left: auto;
}
.menu-b .b .icon{
    margin-left: auto!important;
    margin-right: calc( 50% - 62px);
}
.btn-hd{
    padding: 20px 0 0 0;
}
.btn-hd a{
    display: block;
    margin: auto;
    height: 58px;
    line-height: 58px;
    border-radius: 29px;
    border:2px solid white;
    text-align: center;
    font-size: 31px;
    font-weight: bold;
    font-family: 'Cordia New';
    width: 300px;
}

.btn-hd.c-ck a{
    background-color: #7526a6;
    color: white;
}
.btn-hd .mint{
    border:1px solid black;
}

.icon{
    margin: auto;
    display: block;
    width: 126px;
    height: 40px;
    border-radius: 20px;
    background-color: #a6a6ac;
    color: #676767;
    font-size: 12px;
    text-align: center;
    position: relative;
    line-height: 40px;
    padding-left: 46px;
    font-family: 'Cordia New';
}
.icon>div{
    position: absolute;
    width: 46px;
    border-radius: 23px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    top: -3px;
    left: -3px;
    color: white;
    background-color: #a6a6ac;
}
.menu-b .a a:hover{
    transition: 0.25s ease;
    transform: scale(1.02);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.25);
}

.mint{
    background-color: #fec004;
    color: #59480c;
}
.bobo{
    background-color: #7ad532;
    color: #17270b;
}
.nun{
    background-color: #fbe3d7;
    color: #4f4442;
}
.ple{
    background-color: #d25100;
    color: white;
}
.jan{
    background-color: #7526a6;
    color: white;
}
.tal{
    background-color: #00b3f6;
    color: #ffffff;
}
.fter{
    padding: 30px;
}
.fter>div{
    font-family: 'Cordia New';
    text-align: center;
    font-size: 20px;
    color: white;
    padding: 1px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
.container-t>.menu-c.container-t{
    background-color: #000;
}
.bg-cog{
    min-height: 406px;
}
.bg-cog>div{
    min-height: 406px;
    position: relative;
}

.bg-cog a{
    font-family: "Angsana New" !important;
    display: block;
    float: left;
    margin: 15px;
    text-align: center;
    border-radius: 85px;
    color: white;
    width: calc(50% - 30px);
    height: 140px;
    border:2px solid white;
    transition:all 0.25s ease, opacity 0s!important;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.25);
    z-index: 99;
    background-size: 0;
}
.bg-cog a:hover{
    transform: scale(1.1)!important;
    /*z-index: 999;*/
    filter: brightness(1.35);
}

.bg-cog a+div{
    display: none;
    background-size: 0;
    z-index: 50;
    transition:all 0.25s ease, opacity 0s!important;
}
.bg-cog a span{
    padding: 10px;
    display: block;
}
.btn-cg-b,
.btn-cg-c{
    top: 157px;
    background-color: #71ab45;
    animation: logot 0.25s ease .25s;
    animation-fill-mode: forwards;
    transform: scale(0);
    opacity: 0;
}
.btn-cg-c{
    top: 47px;
    animation-delay: .5s;
}
.bg-cog a:hover+div{
    filter: brightness(0.75);
}
a.btn-cg-b span,
a.btn-cg-c span{
    padding-top: 50px;
    line-height: 20px;
    font-size: 18px;
}
.btn-cg-b span br,
.btn-cg-c span br{
    display: none;
}
.btn-cg-b+div,
.btn-cg-c+div{
    height: 105px;
    width: 83px;
    top: 132px;
    transform-origin: right bottom;
    animation: cgb 0.5s ease .75s;
    animation-fill-mode: forwards;
    transform: scale(0);
    opacity: 0;
}
.btn-cg-c+div{
    top: 18px;
    animation: cga 0.5s ease .95s;
    animation-fill-mode: forwards;
}
.btn-cg-a{
    top: 219px;
    background-color: #5a99d2;
    animation: logot 0.25s ease;
    animation-fill-mode: forwards;
    transform: scale(0);
}
.btn-cg-a span{
    line-height: 28px;
    font-size: 12.5px;
}
.btn-cg-a+div{
    height: 253px;
    width: 180px;
    top: 193px;
    transform-origin: left 200px;
    animation: cga 0.5s ease .45s;
    animation-fill-mode: forwards;
    transform: scale(0);
    opacity: 0;
}

.bg-crcl{
    min-height: 406px;
    animation: logot .5s ease;
}
.bg-crcl>div{
    min-height: 406px;
    position: relative;
    animation: rtt 0.5s ease;
}
.bg-crcl a{
    font-family: "Angsana New" !important;
    display: block;
    float: left;
    margin: 15px;
    text-align: center;
    border-radius: 85px;
    color: white;
    width: calc(50% - 30px);
    height: 110px;
    border:2px solid white;
    /*font-weight: bold;*/
    opacity: 0;
    transition: 0.25s ease;
    animation: opac 0.15s ease;
    animation-fill-mode: forwards;
    box-shadow: 0px 0px 0px rgba(0,0,0,0.25);
    z-index: 99;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.bg-crcl a+div{
    display: none;
    opacity: 0;
    transition: 0.25s ease;
    animation: opac 0.15s ease;
    animation-fill-mode: forwards;
    filter:drop-shadow(0px 0px 2px white);
    position: absolute;
    width: 0;
    height: 0;
    border-top: 23px solid red;
    border-right: 28px solid transparent;
    border-left: 28px solid transparent;
}
.bg-crcl a+div>span{
    position: relative;
}
.bg-crcl a+div>span::before{
    content: '';
    display: block;
    width: 36px;
    height: 28px;
    position: absolute;
    left: -18px;
    top: -48px;
}
.bg-crcl a>span{
    display: block;
    border-radius: 50%;
    height: 110px;
    position: relative;
    padding-top: 22px;
    transition: 0.25s ease;
    animation: rtt 0.15s ease;
    animation-fill-mode: forwards;
}
.bg-crcl a>span::before{
    filter:blur(2px);
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    transform: rotate(-90deg);
    top: 6px;
    left: 3px;
}

.bg-crcl a>span::after{
    filter:blur(2px);
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    transform: rotate(90deg);
    bottom: 9px;
    right: 3px;
}
.bg-crcl a:hover{
    transform: scale(1.15)!important;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
}

a.btn-cc-a,
.bg-crcl a.btn-cc-a+div>span::before
{ background: #6e2ea0!important; }
.bg-crcl a.btn-cc-a+div{ border-top-color: #6e2ea0!important; }

a.btn-cc-b,
.bg-crcl a.btn-cc-b+div>span::before
{ background: #a4a4a4!important; }
.bg-crcl a.btn-cc-b+div{ border-top-color: #a4a4a4!important; }

a.btn-cc-c,
.bg-crcl a.btn-cc-c+div>span::before
{ background: #fdbe00!important; }
.bg-crcl a.btn-cc-c+div{ border-top-color: #fdbe00!important; }

a.btn-cc-d,
.bg-crcl a.btn-cc-d+div>span::before
{ background: #599ad4!important; }
.bg-crcl a.btn-cc-d+div{ border-top-color: #599ad4!important; }

a.btn-cc-e,
.bg-crcl a.btn-cc-e+div>span::before
{ background: #72ac48!important; }
.bg-crcl a.btn-cc-e+div{ border-top-color: #72ac48!important; }

a.btn-cc-f,
.bg-crcl a.btn-cc-f+div>span::before
{ background: #eb7d2e!important; }
.bg-crcl a.btn-cc-f+div{ border-top-color: #eb7d2e!important; }

/*------- ple --------*/
.p-ple a.btn-cc-a,
.bg-crcl.p-ple a.btn-cc-a+div>span::before
{ background: #91cf50!important; }
.bg-crcl.p-ple a.btn-cc-a+div{ border-top-color: #91cf50!important; }

.p-ple a.btn-cc-c,
.bg-crcl.p-ple a.btn-cc-c+div>span::before
{ background: #ff97ff!important; }
.bg-crcl.p-ple a.btn-cc-c+div{ border-top-color: #ff97ff!important; }

.p-ple a.btn-cc-d,
.bg-crcl.p-ple a.btn-cc-d+div>span::before
{ background: #ff0000!important; }
.bg-crcl.p-ple a.btn-cc-d+div{ border-top-color: #ff0000!important; }

.p-ple a.btn-cc-f,
.bg-crcl.p-ple a.btn-cc-f+div>span::before
{ background: #5a99d3!important; }
.bg-crcl.p-ple a.btn-cc-f+div{ border-top-color: #5a99d3!important; }



/*---------------*/
a.btn-cc-a,a.btn-cc-a>span,
a.btn-cc-c,a.btn-cc-c>span,
a.btn-cc-d,a.btn-cc-d>span{
    font-size: 16px;
    line-height: 22px;
}

a.btn-cc-b,a.btn-cc-b>span,
a.btn-cc-e,a.btn-cc-e>span,
a.btn-cc-f,a.btn-cc-f>span{
    font-size: 18px;
    line-height: 65px;
}

.p-ple a.btn-cc-c,.p-ple a.btn-cc-c>span,
.p-ple a.btn-cc-d,.p-ple a.btn-cc-d>span,
.p-ple a.btn-cc-f,.p-ple a.btn-cc-f>span{
    font-size: 17px;
    line-height: 32px;
}

a.btn-cc-a,a.btn-cc-a>span{
    animation-delay: 0.15s;
}

a.btn-cc-a+div{
    transform: rotate(-59deg);
    animation-delay: 0.7s;
}

a.btn-cc-b,a.btn-cc-b>span,
.p-ple a.btn-cc-c,.p-ple a.btn-cc-c>span{
    animation-delay: 0.85s;
}

a.btn-cc-b+div,
.p-ple a.btn-cc-c+div{
    animation-delay: 1s;
}

a.btn-cc-c,a.btn-cc-c>span,
.p-ple a.btn-cc-d,.p-ple a.btn-cc-d>span{
    animation-delay: 1.15s;
}

.p-ple a.btn-cc-d+div{ animation-delay: 1.3s;}

a.btn-cc-c+div{
    transform: rotate(59deg);
    animation-delay: 1.3s;
}

a.btn-cc-d,a.btn-cc-d>span,
.p-ple a.btn-cc-f,.p-ple a.btn-cc-f>span{
    animation-delay: 1.45s;
}

.p-ple a.btn-cc-f+div{ animation-delay: 1.6s; }
a.btn-cc-d+div{
    transform: rotate(121deg);
    animation-delay: 1.6s;
}

a.btn-cc-e,a.btn-cc-e>span{
    animation-delay: 1.75s;
}

a.btn-cc-e+div{
    transform: rotate(180deg);
    animation-delay: 1.9s;
}

a.btn-cc-f,a.btn-cc-f>span{
    animation-delay: 2.05s;
}

a.btn-cc-f+div{
    transform: rotate(-121deg);
    animation-delay: 2.2s;
}

/*--------- nun ---------*/
.container-t>.menu-c.container-t.mints{
    background-color: #feff99;
}

.container-t>.menu-c.container-t.mints .fter>div{
    color: black;
    border-color: black;
}

.container-t>.menu-c.container-t .p-nun>.box{
    animation: none;
}

.container-t>.menu-c.container-t .p-nun>.box>a,
div.p-nun a+span{
    opacity: 0;
    animation: opac 0.5s forwards;
    animation-delay: var(--delay);
}

div.p-nun a{
    display: none;
    background-color: var(--bg-color);
}

div.p-nun a[href]{
    display: block;
}

div.p-nun a+span{
    transition: 0.25s;
    display: none;
    position: absolute;
    border-top:25px solid transparent;
    border-bottom:25px solid transparent;
    border-left:40px solid #f8d4ce;
    z-index: 0!important;
}

.btn-cn-a{
    --bg-color:#e67f2b;
    --top: 72px;
    --left: -120px;
    --delay:0.25s;
    z-index: 3!important;
    line-height:30px;
}

.btn-cn-b{
    --bg-color:#fe0000;
    --top: 182px;
    --left: -120px;
    --delay: 0.5s;
    --nun-size:30px;
    z-index: 2!important;
    line-height:30px;
}

.btn-cn-c{
    --bg-color: #05b04e;
    --top: 29px;
    --left: -20px;
    --delay:0.75s;
    --nun-size:34px;
    z-index: 7!important;
}
.btn-cn-c>span{
    font-size: 18px;
    line-height: 65px;

}

.btn-cn-d{
    --bg-color: black;
    --scale: .5;
    --top: 132px;
    --left: -28px;
    --delay:0.25s;
    --nun-size:30px;
    z-index: 5!important;
}

.btn-cn-e{
    --bg-color: #5899d3;
    --top: 253px;
    --left: -20px;
    --delay:1s;
    z-index: 4!important;
}

.btn-cn-f{
    --bg-color: #fd95fd;
    --top: 99px;
    --left: 79px;
    --delay:1.5s;
    --nun-size:30px;
    z-index: 8!important;
    line-height:30px;
}

.btn-cn-g{
    --bg-color: #89cf4c;
    --top: 210px;
    --left: 79px;
    --delay:1.75s;
    z-index: 6!important;
    line-height:30px;
}

.btn-cn-a+span{
    --delay:1.85s;
    transform: rotate(-27deg);
    top: 69px;
    left: calc( var(--half) + -40px); 
}
.btn-cn-b+span{
    --delay:1.6s;
    transform: rotate(-90deg);
    top: 143px;
    left: calc( var(--half) + -99px);
}
.btn-cn-c+span{
    --delay:0.6s;
    transform: rotate(33deg);
    top: 92px;
    left: calc( var(--half) + 56px);
}
.btn-cn-e+span{
    --delay:1.35s;
    transform: rotate(219deg);
    top: 244px;
    left: calc( var(--half) + -56px);
}
.btn-cn-f+span{
    --delay:0.85s;
    transform: rotate(90deg);
    top: 181px;
    left: calc( var(--half) + 101px);
}
.btn-cn-g+span{
    --delay:1.1s;
    transform: rotate(145deg);
    top: 254px;
    left: calc( var(--half) + 55px);
}
/*--------- tal ---------*/
.p-tal,.p-tal .box{
    animation: none;
}
.btn-hd .tal{
    color: white;
}

.p-tal a{
    color: white;
    border:3px solid white;
    background-color: var(--bg-color);
}

.btn-ctl-a img{
    width: 70%;
    display: none;
}

a.btn-ctl-a{
    --top: 211px;
    --left: -53px;
    --size:126px; /*126px*/
    --bg-color:#1f4e79;
    z-index: 999!important;
    line-height:65px;
    display: none;
}

a.btn-ctl-a[href]{
    display: block;
}

.btn-ctl-b{
    --top: 57px;
    --left: 24px;
    --bg-color:#f70501;
    --rotate:rotate(-151deg);/*-144*/
    --hrotate:rotate(-150.5deg);/*-143.5*/
    --move:-8px;
    --delay:0.25s;
    --f-size:3px;
    line-height:65px;
}

.btn-ctl-c{
    --top: 115px; /*113*/
    --left: 75px; /*63*/
    --bg-color:#ffbd05;
    --rotate:rotate(-123deg);
    --hrotate:rotate(-122.5deg);
    --move:-4px;
    --delay:0.5s;
    --f-size:3px;
    line-height:30px;
}

.btn-ctl-d{
    --top: 184px; /*177*/
    --left: 96px; /*84*/
    --bg-color:#5a9bd5;
    --rotate:rotate(-100deg);
    --hrotate:rotate(-99deg); /*-98*/
    --move:0px;
    --delay:0.75s;
    --f-size:3px;
    line-height:30px;
}

.btn-ctl-e{
    --top: 257px; /*246*/
    --left: 95px; /*85*/
    --bg-color:#72ac47;
    --rotate:rotate(-73deg); /*-76*/
    --hrotate:rotate(-73.5deg); /*-77*/
    --move:0px;
    --delay:1s;
    --f-size:2px;
    line-height:65px;
}

.btn-ctl-f{
    --top: 328px; /*311*/
    --left: 62px;
    --size:68px;
    --bg-color:#f27b32;
    --rotate:rotate(-44deg);/*-53*/
    --hrotate:rotate(-44.5deg);/*-53.5*/
    --move:4px;
    --f-size:1px;
    --delay:1.25s;
}

.btn-ctl-g{
    --top: 377px;/*367*/
    --left: 0px;/*22*/
    --bg-color:#ff95ff;
    --rotate:rotate(-20deg);/*-31*/
    --hrotate:rotate(-20.5deg);/*-31*/
    --move:11px;
    --delay:1.5s;
    --f-size:2px;
    line-height:30px;
}

.btn-ctl-h{
    --top: 380px;/*378*/
    --left: -77px;/*-47*/
    --bg-color:#a97840;
    --rotate:rotate(6deg);/*-8*/
    --hrotate:rotate(3deg);/*-10*/
    --move:15px;
    --delay:1.75s;
    --f-size:2px;
    line-height:30px;
}












@media (min-width: 576px) {
    :root{ 
        --half:270px; 
    }
    .container-t,.menu-t {
        max-width: 540px;
    }
    .menu-b .a a{ width: 80%; }
    .menu-b .b .icon{
        margin-right: calc( 40% - 62px);
        font-size: 15px;
    }
    .menu-b>.a,
    .menu-b>.b{
        width: 40%;
        margin-left: 10%;
    }
    .menu-b>.a.fr,
    .menu-b>.b.fr{
        margin-right: 10%;
    }
    .menu-t>a{ font-size: 15px; }
    .c-ck+.bg-cog>div{ min-height:436px; }
    .btn-cg-b{ 
        --l:147px;
        left: calc( var(--half) - var(--l)); }
    .btn-cg-b+div{ 
        --l:185px;
        left: calc( var(--half) - var(--l)); }
    .btn-cg-c{ 
        --l:96px;
        left: calc( var(--half) - var(--l)); }
    .btn-cg-c+div{ 
        --l:132px;
        left: calc( var(--half) - var(--l)); }
    .btn-cg-a{ 
        --l:53px;
        left: calc( var(--half) - var(--l));
    }
    .btn-cg-a+div{ 
        --l:-40px;
        left: calc( var(--half) - var(--l)); }
    .bg-cog a+div,.bg-cog a{
        position: absolute;
        display: block;
        background-size: cover;
        background-color: transparent;
    }
    .bg-cog a span{
        padding: 57px 13px 0 0;
        transform: skew(0deg, 8deg);
        line-height: 28px;
        font-size: 12.5px;
    }
    .bg-cog a{
        margin: 0;
        border-radius: 50%;
        width: auto;
        height: auto;
        border:none;
        box-shadow:none;
    }
    a.btn-cg-b,
    a.btn-cg-c{
        width: 139px;
        height: 153px;
    }
    a.btn-cg-b span br,
    a.btn-cg-c span br{
        display: block;
    }
    a.btn-cg-a{
        width: 225px;
        height: 225px;
    }
}









@media (min-width: 768px) {
    :root{ 
        --half:360px;    
        --scale:.4;
        --move:35px;
        --size:62px;
        --f-size-b:10px;
        --f-size:1px;
        --nun-size:27px;
    }
    .btn-cn-a{--delay:1.75s;}
    .btn-cn-b{--delay:1.5s;}
    .btn-cn-c{--delay:0.5s;}
    .btn-cn-d{--delay:0.25s;}
    .btn-cn-e{--delay:1.25s;}
    .btn-cn-f{--delay:0.75s;}
    .btn-cn-g{--delay:1s;}
    .container-t,.menu-t {
        max-width: 720px;
    }
    .container-t.menu-c{
        overflow: hidden;
    }
    .menu-b .a a{
        width: 60%;
        font-size: 17px;
    }
    .menu-b .b .icon{
        margin-right: calc( 35% - 62px);
        font-size: 18px;
    }
    .menu-t>a{ font-size: 18px; }
    .menu-b>.fl a{
        margin-left: 5%;
    }
    .menu-b>.fr a{
        margin-right: 5%;
    }
    .bg-crcl a{
        position: absolute;
        width: 110px;
        margin: 0;
    }
    .bg-crcl a+div{ display: block; }
    .bg-crcl a>span::after,
    .bg-crcl a>span::before{
        width: 100px;
        height: 100px;
    }
    .bg-crcl a>span::before{
        transform: rotate(-45deg);
    }

    .bg-crcl a>span::after{
        transform: rotate(135deg);
    }

    a.btn-cc-a{
        left: 303px;
        top: 15px;
    }

    a.btn-cc-a+div{
        left: 451px;
        top: 92px;
    }

    a.btn-cc-b{
        left: 529px;
        top: 68px;
    }

    a.btn-cc-b+div{
        top: 218px;
        left: 555px;
    }

    a.btn-cc-c{
        left: 529px;
        top: 253px;
    }

    a.btn-cc-c+div{
        top: 352px;
        left: 434px;
    }

    a.btn-cc-d{
        left: 303px;
        top: 308px;
    }

    a.btn-cc-d+div{
        top: 341px;
        left: 209px;
    }

    a.btn-cc-e{
        left: 77px;
        top: 253px;
    }

    a.btn-cc-e+div{
        top: 192px;
        left: 105px;
    }

    a.btn-cc-f{
        left: 77px;
        top: 68px;
    }

    a.btn-cc-f+div{
        top: 80px;
        left: 221px;
    }

    .p-ple a.btn-cc-a{ top: 40px; }
    .p-ple a.btn-cc-a+div{ top: 148px; }
    .p-ple a.btn-cc-c,
    .p-ple a.btn-cc-f{ top: 160px; }
    .p-ple a.btn-cc-c+div{ top: 285px; }
    .p-ple a.btn-cc-d{ top: 280px; }
    .p-ple a.btn-cc-d+div{ top: 270px; }
    .p-ple a.btn-cc-f+div{ top: 128px; }

    /*------- nun --------*/
    div.p-nun a+span{ display: block; }
    .container-t>.menu-c.container-t .p-nun>.box{
        transform: scale(1.35);
        transform-origin: center 25px;
        min-height: 476px;
    }

    div.p-nun a.b-nun{
        width: 10px;
        height: 10px;
        top: var(--top);
        left: calc(var(--left) + var(--half));
        border: none;
        transform: skew(-2deg,9deg) scale(var(--scale));
        box-shadow: none;
    }
    div.p-nun a.b-nun>span>span:nth-child(3){
        position: absolute;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 4;
        width: 150%;
    }
    div.p-nun a{
        display: block;
    }
    div.p-nun a.b-nun *,
    div.p-nun a.b-nun *::after,
    div.p-nun a.b-nun *::before{
        border-radius: 0;
        box-sizing: border-box;
        transition: 0.25s ease;
        font-size: var(--nun-size);
        line-height: normal;
    }

    div.p-nun a.b-nun>span{
        animation:none;
        position: relative;
        height: 230px; 
        width: 130px;
        background-color: var(--bg-color);
        border-top: 5px solid var(--color);
        border-bottom: 5px solid var(--color);
    }
    div.p-nun a.b-nun>span::after,
    div.p-nun a.b-nun>span::before{
        filter: unset;
        content: "";
        position: absolute;
        z-index: 1;
        width: 162px;
        height: 162px;
        transform: scaleX(0.5774) rotate(45deg);
        background-color: var(--bg-color);
        top: 29px;
    }
    div.p-nun a.b-nun>span::after{
        right: -81px;
        border-top: 7px solid var(--color);
        border-right: 7px solid var(--color);
    }
    div.p-nun a.b-nun>span::before{
        left: -81px;
        border-top:none;
        border-bottom: 7px solid var(--color);
        border-left: 7px solid var(--color);
    }
    div.p-nun a.b-nun>span>span:nth-child(2)::before,
    div.p-nun a.b-nun>span>span:nth-child(2)::after,
    div.p-nun a.b-nun>span>span:nth-child(1)::after{
        display: block;
        content: '';
        position: absolute;
        z-index: -50;
        border-color: var(--color);
        border-style: solid;
        background-color: var(--bg-color);
    }
    div.p-nun a.b-nun>span>span:nth-child(2)::before{
        transform-origin: bottom left;
        transform: skewX(-60deg);
        bottom: calc(100% + 4px);
        width: 100%;
        height: 20px;
        border-width: 8px;
        border-top-width: 5px;
        border-bottom: none;
    }
    div.p-nun a.b-nun>span>span:nth-child(2)::after{
        transform-origin: bottom left;
        transform: skew(-30deg,-29deg);
        left: calc(100% - 2px);
        bottom: -5px;
        height: calc(50% + 7px);
        width: 34px;
        border-width: 8px;
        border-left: none;
    }
    div.p-nun a.b-nun>span>span:nth-child(1)::after{
        transform-origin: top left;
        transform: rotate(-30deg) translateY(-50%);
        left: calc(100% + 32px);
        top: 53px;
        height: calc(50% + 23px);
        width: 40px;
        border-width: 0;
        border-right-width: 6px;
    }

    .bg-crcl a.b-nun:hover{
        transform: skew(-2deg,9deg) scale(var(--scale))!important;
    }

    .bg-crcl a[href].b-nun:hover{
        box-shadow: none;
        left: calc((var(--left) + var(--half)) - (var(--move) * .68));
        top: calc(var(--top) + (var(--move) * .275));
    }

    .bg-crcl a[href].b-nun:hover>span>span:nth-child(1)::after{
        width: calc(40px + (var(--move) * 1.9));
    }

    .bg-crcl a[href].b-nun:hover>span>span:nth-child(2)::after{
        width: calc(34px + (var(--move) * 1.65));
    }

    .bg-crcl a[href].b-nun:hover>span>span:nth-child(2)::before{
        height: calc(20px + (var(--move) * .95));
    }

    /*-----------------tal----------------*/
    .p-tal,.p-tal>.box{ animation: none; }
    .p-tal>.box{
        transform: scale(1.2);
        transform-origin: center top;
    }
    .p-tal.bg-crcl{
        min-height: 490px;
    }
    .p-tal a span::before,
    .p-tal a span::after{
        display: none;
        filter: unset;
        border: none;
    }
    a.btn-ctl-a{
        display: block;
    }
    .bg-crcl.p-tal a{
        opacity: 0;
        animation: logot 0.25s forwards;
        animation-delay: var(--delay);
        top:calc(var(--top) - (var(--size) * 0.5));
        left:calc(var(--half) + (var(--left) - var(--size) * 0.5));
        width: var(--size);
        height: var(--size);
        font-size: calc(var(--f-size-b) + var(--f-size));
        line-height: normal;
    }
    div.p-tal a:hover:not(.btn-ctl-a){
        top:calc(var(--top) - (var(--size) * 0.5) + var(--move));
        left:calc(var(--half) + (var(--left) - var(--size) * 0.4));
        transform: scale(1.2);
        opacity: 0;
    }
    div.p-tal a:hover:not(.btn-ctl-a)>span::after{
        transform: var(--hrotate);
    }
    .p-tal a:not(.btn-ctl-a)>span::after{
        width: 1px;
        height: 1px;
        display: block;
        border-radius: 0;
        z-index: -1;
        transition: 0.25s;
        background-color: white;
        bottom: calc( 50% - 4px);
        left: calc( 50% - 4px);
        transform: var(--rotate);
        transform-origin: center bottom;
        animation: hgt 0.25s forwards;
        animation-delay: calc(var(--delay) + 0.15s);
    }
    .p-tal a:not(.btn-ctl-a)>span::before{
        display: block;
        width: calc(100% - 6px);
        height: calc(100% - 4px);
        z-index: 0;
        top: 2px;
        left: -1px;
        transform: unset;
        background-color: var(--bg-color);
    }
    .p-tal a>span{
        width: var(--size);
        height: var(--size);
        padding-top: 0;
        margin-top: -3px;
        animation: none;
    }
    .p-tal span>span{
        position: absolute;
        width: 100%;
        top: 50%;
        left: -3px;
        transform: translateY(-50%);
    }

    .p-tal a:not([href]):hover{
        transform: scale(1)!important;
    }

    .btn-ctl-a img{ 
        display: inline-block;
        margin-top: 7px;
    }
    .btn-ctl-a img+span{ 
        height: auto;
        font-style: italic;
    }
    
}














@media (min-width: 992px) {
    :root{ --half:480px; }
    .container-t,.menu-t {
        max-width: 960px;
    }
    .menu-b .a a{
        width: 50%;
        font-size: 18px;
    }
    .menu-b .b .icon{
        margin-right: calc( 30% - 62px);
        font-size: 21px;}
    .menu-t>a{ font-size: 24px; }
    a.btn-cc-a{ left: 423px; }
    a.btn-cc-a+div{ left: 571px; }
    a.btn-cc-b{ left: 649px; }
    a.btn-cc-b+div{ left: 675px; }
    a.btn-cc-c{ left: 649px; }
    a.btn-cc-c+div{  left: 554px; }
    a.btn-cc-d{ left: 423px; }
    a.btn-cc-d+div{ left: 329px; }
    a.btn-cc-e{ left: 197px; }
    a.btn-cc-e+div{ left: 225px; }
    a.btn-cc-f{ left: 197px; }
    a.btn-cc-f+div{ left: 341px; }
}











@media (min-width: 1200px) {
    :root{ 
        --half:570px; 
        --move:40px;
    }
    .container-t,.menu-t {
        max-width: 1140px;
    }
    .menu-t>a{
        font-size: 28px;
    }
    a.btn-cc-a{ left: 513px; }
    a.btn-cc-a+div{ left: 646px; }
    a.btn-cc-b{ left: 694px; }
    a.btn-cc-b+div{ left: 722px; }
    a.btn-cc-c{ left: 694px; }
    a.btn-cc-c+div{  left: 624px; }
    a.btn-cc-d{ left: 513px; }
    a.btn-cc-d+div{ left: 429px; }
    a.btn-cc-e{ left: 332px; }
    a.btn-cc-e+div{ left: 358px; }
    a.btn-cc-f{ left: 332px; }
    a.btn-cc-f+div{ left: 461px; }

}











@media (min-width: 1550px) {
    :root{ 
        --half:750px;  
        --move:50px;
    }
    .container-t,.menu-t {
        max-width: 1500px;
    }
    .menu-t>a{
        font-size: 28px;
    }
    a.btn-cc-a{ left: 693px; }
    a.btn-cc-a+div{ left: 825px; }  /* -15 */
    a.btn-cc-b{ left: 874px; }      /* -45 */
    a.btn-cc-b+div{ left: 903px; }  /* -33 */
    a.btn-cc-c{ left: 874px; }      /* -45 */
    a.btn-cc-c+div{  left: 804px; } /* -20 */
    a.btn-cc-d{ left: 693px; }
    a.btn-cc-d+div{ left: 609px; }  /* +10 */
    a.btn-cc-e{ left: 517px; }      /* +45 */
    a.btn-cc-e+div{ left: 538px; }  /* +43 */
    a.btn-cc-f{ left: 517px; }      /* +45 */
    a.btn-cc-f+div{ left: 641px; }  /* +30 */
}















@keyframes logot{
    0%{ transform: scale(0); }
    80%{ transform: scale(1.05); }
    96%{ transform: scale(0.98); }
    100%{ transform: scale(1);
        opacity: 1;}
}

@keyframes opac{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
}

@keyframes rtt{
    0%{ transform: rotate(-90deg); }
    100%{ transform: rotate(0deg); }
}

@keyframes cga{
    0%{ transform: rotate(-25deg); }
    100%{ transform: rotate(0deg);
        opacity: 1; }
}

@keyframes cgb{
    0%{ transform: rotate(25deg); }
    100%{ transform: rotate(0deg);
        opacity: 1; }
}

@keyframes hgt{
    0%{ height: 0px; }
    100%{ height: 140px; }
}