@font-face {
    font-family: Ogg-Roman;
    src: url(../fonts/Ogg-Roman.otf)format("opentype");
}


@font-face {
    font-family: Ogg-Italic;
    src: url(../fonts/Ogg-Italic.otf)format("opentype");
}

@font-face {
    font-family: NewYorkExtraLargeBold;
    src: url(../fonts/NewYorkExtraLargeBold.otf)
}

@font-face {
    font-family: qingke;
    src: url(../fonts/方正清刻本悦宋简体.TTF)
}

@font-face {
    font-family: chinesemain;
    src: url(../fonts/ntailu.ttf)
}

@font-face {
    font-family: chinesemainbold;
    src: url(../fonts/ntailub.ttf)
}



body{font-family:"chinesemain";}
a {color: #242424;text-decoration:none}
a:hover{color:#242424;text-decoration:none}
canvas { width: 100%; position:absolute;z-index:1;top:0;left: 0; }
html{ scroll-behavior:smooth }

h5{line-height: 1.5 !important;}

.title h5{font-weight: 400;font-size: 1.125rem;}

.btn-link {
    text-decoration: none;
}


#cubeimg {display: block;}

.logo-text{font-family:"Ogg-Roman";font-weight: 200 !important;}
#line{
    border-bottom: 1px solid #000000;
}
.navbar-portfolio {padding:0 24px;}
.navbar-portfolio h6{margin: 0px;color: rgba(0, 0, 0, 0.4);}
.now h6{color: #000000;}
.navbar-portfolio:hover h6{color:rgba(0, 0, 0, 0.9);}
@media (max-width: 1024px){.navbar-portfolio{display: none;}}

.nav-link-portfolio{display:none; padding:0 10px !important;line-height: 1.2;}
.nav-link-portfolio a span{font-size: 14px;color:rgba(255,255,255,0.6);font-weight: 400;}
@media (max-width: 1024px){.nav-link-portfolio{display:block}}

.mob-header .navbar-brand a{color:#C23120;font-weight:700}
.mob-header.dark .navbar-brand a{color:#353535}

.home-banner-01 .ht-text h1 {
    margin-bottom: 6px;
}



.px-btn.black{color:#242424;background:#ffffff00}
.px-btn.black:before{border-color: #242424;border-right:transparent;}
.px-btn.black:hover{color:#ffffff}
.px-btn.black:hover:before{background:#749395;width:100%;border-color:#749395;color:#ffffff}


.cubeposition{position:absolute;top:16.97vh;right:9.72vw}
@media (max-width: 991px){.cubeposition{top:14vh;right:-2vw}}
@media (max-width: 767px){.cubeposition{top:9vh;right:1vw}}


.contactme{padding-top: 0px !important;padding-left: 2.22vw;font-family:'Ogg-Roman';}
/*@media (max-width: 991px){.contactme{top:380px;left: 7vw;}}
@media (max-width: 767px){.contactme{top:70vh;left: 11vw;}}*/

.home-banner-01 .ht-text {
    color: #242424;
    max-width: 600px;
}


.media {
    display: flex;
    align-items: flex-start;
}

.about-text p {
    font-size: 14px;
    max-width: 1000px;
}


.about-text h6 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
}

.about-text h3 {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 15px;
    font-family:"NewYorkExtraLargeBold";
}

.about-list label {
    color: #242424;
    font-family: chinesemainbold;
    font-weight: 600;
    width: 95px;
}


.aboutmecontainer{margin-left: 5.56vw;margin-right: 9.03vw;}


@media (min-width: 1200px){.aboutmecontainer{max-width: 84vw;}}
@media (max-width: 1025px){.aboutmecontainer{margin-left: 1vw;}}


.skill-section .dark-color {font-size: 14px;font-weight: 400;letter-spacing:2px; color: #000000; }
.skill-section .dark-color span{font-size: 12px;font-weight: 400;color: #71797A;padding-left: 1.25vw;letter-spacing: 0px;}

.titlewoo{
    font-size: 44px;
    letter-spacing:4px;
    font-weight: 700;
    margin: 0 0 15px;
    font-family:"NewYorkExtraLargeBold";
    color: #242424;
}
.titlewoosmall{
    font-size: 14px;
    letter-spacing:2px;
    font-weight: 200;
    line-height: 18px;
    font-family:"chinesemain";
    color: #242424;
}
.portfoliotitleinto{background-image: url(../img/titlearrow.png); background-repeat:no-repeat;padding-top: 30px;margin-left: 250px;-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.portfoliotitle:hover .portfoliotitleinto{
    background-image: url(../img/titlearrowred.png);margin-left: 255px;}

#portfoliotitlesmall{display: block;} #portfoliotitlearrow{display:none;}

.titlewoosmallbox{padding-top:26px;}
@media (max-width: 1024px){.titlewoosmall{font-size: 12px;}}
@media (max-width: 768px){.titlewoosmallbox{padding-top:0px;margin-top: -40px;padding-left: 12vw;}}
@media (max-width: 426px){.titlewoosmallbox{padding-top:0px;margin-top: -40px;padding-left: 6vw;}
                            #portfoliotitlesmall{display: none;} #portfoliotitlearrow{display: block;}}


.titlewooright {
    margin-right:-36px ;text-align:right;margin-bottom: -120px;margin-left:-100px
}
.titlewooleft {
    margin-left:-36px;
}

.titlewoocenter{text-align:right}
@media (max-width: 426px){.titlewoocenter{padding-left:4vw;text-align:left;}}


.aboutbox{padding-left: 7vw;padding-right: 0px;}
@media (max-width: 991px){.aboutbox{padding-left: 6vw;padding-right: 12vw;padding-top: 20px;}}

.skillbox{
    padding-left: 6vw;
    padding-right: 4vw;
    padding-bottom:80px;
}
@media (max-width: 991px){.skillbox{padding-left: 8vw;padding-right: 10vw;padding-bottom:0px;}}
@media (max-width: 767px){.skillbox{padding-left: 13vw;padding-right: 8vw;}}

.hobbybox{
    padding-right: 6vw;
    padding-left: 4vw;
    padding-top:40px;
}
@media (max-width: 991px){.hobbybox{padding-left: 10vw;padding-right: 10vw;padding-top:0px;}}
@media (max-width: 767px){.hobbybox{padding-left: 30vw;padding-right: 15vw;}}


.progress span {
    top: -25px;
}
.skill-section{padding-bottom: 100px;padding-top: 100px;}

.hobbies{padding:0px;display: block;}
.hobbies h6{padding-top:12px;padding-bottom:7px; font-size: 18px;color: #000000;margin-bottom: 0px;}
.hobbies .textboder{padding-bottom:10px; font-size: 30px;color:#FCFCFC;margin-bottom: 0px;font-weight: 800;font-family: "chinesemainbold";
    -webkit-text-stroke: 0.8px #71797A;}


.about-section{background-size:cover;background-position:50% center;position:relative}
.skill-section{background-size:cover;background-position:80% center;position:relative}
.portfolio-section{background-size:cover;background-position:30% center;position:relative}

.portfoliotitle{max-width: 100%;}
.portfolio-section{padding-bottom: 60px;}
.portfolio-section h4{color:#C23120;font-size: 18px;font-weight: 800;letter-spacing:1px;}
.portfolio-section h6{color:#242424;font-size: 14px;font-weight: 200;line-height: 24px;}
.portfolio-section p{color:#71797A;font-size: 10px;font-weight: 200;margin-bottom: 0px;line-height: 10px;}
.legoimg{height: 200px;padding-bottom: 30px;display: table-cell;vertical-align: bottom;}

.portfolio-section .container{padding-right: 132px;padding-left: 132px;}
@media (max-width: 426px){.portfolio-section .container{width:60%}}
.por-item{padding:0 2.77vw;border-right: 1px solid #74939530;}
.por-works{height:234px;-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.por-image{margin-bottom: 11px;width:100%;overflow: hidden;}
.por-image img{-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.portfolioarrow{background-image: url(../img/portfolioarrow.png);padding-left: 55px;margin-left:9vw;background-size:cover;margin-top: -20px;-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}


.por-works:hover .portfolioarrow{
    background-image: url(../img/portfolioarrowred.png);padding-left: 60px;
}
.por-works:hover .por-image img{
    -webkit-transform: scale(1.08);
			transform: scale(1.08);}

            
.px-btn-arrow{padding:0 50px 0 0;line-height:20px;position:relative;display:inline-block;color:#191b13;-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.px-btn-arrow:hover{color:#C23120}

.content-box-title {color:rgba(255, 255, 255, 0.6);font-size: 14px;font-weight: 200;}

.content-box .content-box-icon span{color:rgba(255, 255, 255, 0.6);}



.content-box:hover .link{color:#ffffff}
.link{-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.content-box:hover .link-icon{filter: drop-shadow(#fff 0 0);}
.link-icon{-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}


.btn-small {
    font-size: 0.75rem;
    padding-top: 7px;
    color: #fff;
    background-color: #F7CD58;
    border-color: #F7CD58;
}

.btn-big {
    font-size: 1.5rem;
    font-weight: 600;
    padding:4px 16px 3px 16px;
    line-height: 1.5;
    color: #fff;
    background-color: #7152E1;
    border-color: #7152E1;
}

.btn-middle {
    font-size: 1.75rem;
    font-weight: 800;
    padding:14px 20px 10px 20px;
    line-height: 1;
    color: #fff;
    background-color: #7152E1;
    border-color: #7152E1;
}



.disabled {
    pointer-events: none;
    opacity: 1 !important;
  }

.section-title h2:after{display:none !important;}


.list-style-disc li:before{
    content: url("../img/disc.svg");
}

.list-style-disc2 li:before{
    content: url("../img/disc2.svg");
}

.centered-and-cropped {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    overflow: hidden;
    width: auto;
    max-width: 780px;
    height: auto;
    max-height: 720px;
}

.centered-and-cropped span {
    display: block;
    background-image: url(../img/point.png);
    background-repeat: no-repeat;
    position:absolute;
    top:270px;
    left:180px;    
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}




.carousel-indicators{
    position:relative;
    clear: both;
    justify-content:center;
    padding:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:0;
    list-style:none;
    display: block;}

.carousel-indicators [data-bs-target]{
    box-sizing:inherit;
    clear: both;
    height: auto;
    width: auto;
    flex:auto;
    padding:4px 28px;
    margin:0 1.25rem;
    text-indent:0;
    cursor:pointer;
    background-color:#ffffff00;
    background-clip:padding-box;
    border:none;
    opacity:1;
}

@media (prefers-reduced-motion:reduce){
    .carousel-indicators [data-bs-target]{
        transition:none
    }}


.re-btn-all{
    background-color: #F0F0F3;
    border-radius: 50rem !important;
    padding:0.5rem 0rem;
}

.btn-re{
    color:#9D96AB;
    border-radius: 50rem !important;
    font-size: 1.25rem;
    padding: 4px 28px;
    background-color: #7152e100;
    border-color: #7152e100;
    -webkit-transition:ease all 0.3s;transition:ease all 0.3s;
    margin:0 1.25rem
}

.btn-re:hover{
    color:#7152E1;
}

.carousel-indicators .active,
.btn-re:active{
    color:#ffffff;
    font-weight: 600;
    background-color: #7152e1;
    border-color: #7152e1;
    box-shadow: none;
}

.carousel-play-title h2{
    color:#818181;
    font-size: 1.125rem;
    line-height: 1.5;
    padding: 0;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}
.carousel-play-title h2 span{
    border-bottom:none;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}

.carousel-play-title p{
    color:#818181;
    display:none;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}



.carousel-indicators .carousel-play .active {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

.carousel-indicators .carousel-play .active h2,
.carousel-play-title:active h2{
    font-weight:600;
    color:#000000;
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 0;
}
.carousel-play-title:hover h2 span{
    border-bottom:4px solid #7152e138;
}

.carousel-indicators .carousel-play .active h2 span,
.carousel-play-title:active h2 span{
    border-bottom:6px solid #7152E1;
}

.carousel-indicators .carousel-play .active p,
.carousel-play-title:active p{
    font-weight:400;
    color:#818181;
    font-size: 0.875rem;
    line-height: 1.5;
    padding-top: 1.5rem;
    display:block;
}



.carousel-indicators2{
    position:relative;
    clear: both;
    justify-content:center;
    padding:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:0;
    list-style:none;
    display: block;}

.carousel-indicators2 [data-bs-target]{
    box-sizing:inherit;
    clear: both;
    height: auto;
    width: auto;
    flex:auto;
    padding:4px 28px;
    margin:0 1.25rem;
    text-indent:0;
    cursor:pointer;
    background-color:#ffffff00;
    background-clip:padding-box;
    border:none;
    opacity:1;
}

@media (prefers-reduced-motion:reduce){
    .carousel-indicators2 [data-bs-target]{
        transition:none
    }}
.carousel-indicators .carousel-comment-dot{
    margin:0 ;
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
}

.carousel-comment-dot .comment-dot{
    width:10px;
    height:10px;
    background-color: #ffffff52;
    margin:0 6px !important;
    border-radius: 10px;
    padding: 0 !important;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}

.carousel-comment-dot:hover .comment-dot{
    background-color: #ffffff91;
}

.carousel-indicators .carousel-comment .active .comment-dot,
.carousel-comment-dot:active .comment-dot{
    width:36px;
    height:12px;
    background-color: #ffffff;
    border-radius: 10px;
    margin:0 6px !important;
    padding: 0 !important;
}

.carousel-trick-title{
    margin:0 1rem !important;
    padding:0 !important;
}

.carousel-trick-title .play-trick-img{
    width:64px;
    height:64px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity:40%;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}


.carousel-trick-title p{
    color:#000000;
    font-size: 0.875rem;
    font-weight: 400;
    display:none;
    -moz-transition:ease all 0.1s;
    -o-transition:ease all 0.1s;
    -webkit-transition:ease all 0.1s;
    transition:ease all 0.1s
}

.carousel-indicators .carousel-trick .active {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
    box-shadow: none;
}

.carousel-indicators .carousel-trick .active .play-trick-img,
.carousel-trick-title:active .play-trick-img{
    width:84px;
    height:84px;
    padding: 0;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity:100%;
}
.carousel-trick-title:hover .play-trick-img{
    opacity:70%;
}


.carousel-indicators .carousel-trick .active p,
.carousel-trick-title:active p{
    line-height: 1.5;
    padding-top: 0.75rem;
    color:#000000;
    font-size: 0.875rem;
    font-weight: 400;
    display:block;
}


.comment-title-sm{
    padding:0 2rem;
}
.comment-title-sm h4{
    font-size:1.125rem;
    font-weight:800;
    line-height:1.5;
    padding-bottom: 0.75rem;
}
.comment-title-sm p{
    font-size:0.75rem;
    font-weight:400;
    line-height:1.5;
}



.arrow-re{
    background-color: rgba(244, 244, 248, 0);
    border:none;
    text-align: center;
}


.card {
    border-radius: 0.5rem !important;
}
.card-nopad{
    padding:0;
    border-radius: 0.5rem !important;
    border: 1px solid #7152E1;
}

.card-nopad-title{
    color: #ffffff !important;
    background-color: #7152E1;
    font-weight: 600;
    padding:0.75rem 0rem;
    border-top-left-radius:0.5rem ;
    border-top-right-radius:0.5rem ;
}

.structure p{font-size: 0.75rem;color: #9D96AB;padding-bottom: 0px;margin-bottom:0;line-height: 1.34;}

.col-sm-2 {
    flex: 0 0 auto;
    width: 20% !important; 
}



.nextpage{padding:2rem 4.5rem;margin: 0 !important;}

.nextpage a{
    font-size: 1.125rem;
    font-weight: 600;
    color:rgba(255, 255, 255, 1)
}


.next{text-align: end;}
.next a{color:rgba(255, 255, 255, 1);-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.next a:hover{margin-right:-0.3rem;}

.previous{text-align: start;}
.previous a{-moz-transition:ease all 0.3s;-o-transition:ease all 0.3s;-webkit-transition:ease all 0.3s;transition:ease all 0.3s}
.previous a:hover{color:rgba(255, 255, 255, 1);margin-left:-0.3rem;}



.color-white{color: #ffffff !important;}
.color-black{color: #000000 !important;}
.color-dark{color: #818181 !important;}
.color-bearpa-purple1{color: #7152E1;}
.color-bearpa-purple2{color: #9D96AB;}
.color-bearpa-yellow{color: #F7CD58;}
.font12{font-size: 0.75rem;}
.font14{font-size: 0.875rem;}
.font18{font-size: 1.125rem;}
.font24{font-size: 1.5rem;}
.font32{font-size: 2rem;}
.fontbold{font-weight: 800;}
.fontregular{font-weight: 400;}
.bg-purple{background-color: #7152E1;}
.bg-purple2{background-color: #7152e128 !important;}
.bg-black{background-color: #000000}
.underline-pur{border-bottom:2px solid #7152E1;}
.underline{text-decoration: underline;}