#header>.mid>.f.selfauth{background:var(--semiBar_fg);}
.main-ctnr{width:400px !important;padding:16px !important;margin:calc(var(--headerH) + 20px) auto var(--headerH) auto !important;}
.main-ctnr>*:not(:first-child){margin-top:16px;}

.main-ctnr>.ttl{font-size:calc(var(--fontSize)*1.2);font-weight:bold;text-align:center;}
.main-ctnr>.ctnr>*{width:100%;text-align:center;}
.main-ctnr>.ctnr>*:is(select, input, .xinxi){text-align:left;}
.main-ctnr>.ctnr>*:not(:first-child){margin-top:16px;}
.main-ctnr>.ctnr>*.hide{display:none !important;}

.btndo{cursor:pointer;;background:var(--green);color:var(--white1);display:flex;justify-content:center;align-items:center;padding:4px 0px;border-radius:2px;}
.btndo:hover{background:var(--green1);}

.main-ctnr>.PROD>.flow{background:var(--semiFG_LL);padding:16px 8px;border-radius:8px;}
.main-ctnr>.PROD>.flow *{user-select:none;}
.main-ctnr>.PROD>.flow>.ttl{text-align:center;border-bottom:1px solid var(--semiFG);margin-bottom:8px;padding-bottom:8px;}
.main-ctnr>.PROD>.flow>.ctnt{display:flex;align-items:center;justify-content:space-around;}
.main-ctnr>.PROD>.flow>.ctnt>.box{display:flex;flex-direction:column;align-items:center;gap:4px;}
.main-ctnr>.PROD>.flow>.ctnt>.box>img{width:36px;border-radius:50%;border:2px solid var(--semiFG);margin:2px;}
.main-ctnr>.PROD>.flow>.ctnt>.box>.t{font-size:calc(var(--fontSize)*0.9);}

.main-ctnr>.PROD>.detail{display: flex;flex-direction: column;align-items: center;gap: 4px;}
.main-ctnr>.PROD>.detail>img{width:80px;border-radius:15%;border: 2px solid var(--semiFG_L);}
.main-ctnr>.PROD>.detail>.info>*:is(.n, .pt, .c){color:var(--actFG);user-select:none;cursor:pointer;}
.main-ctnr>.PROD>.detail>.info>*:is(.pt, .c){margin:0px 4px;}

.main-ctnr>.PROD>.rbtns{background:none;margin:auto;}
.main-ctnr>.PROD>.rbtns input{width:20px;height:15px;vertical-align:middle;margin:0px;}

.main-ctnr>.PROD>.inviteCode{display:flex;align-items:center;justify-content: center;gap: 8px;}
.main-ctnr>.PROD>.inviteCode>input{width:100px;}

.main-ctnr>.PROD>.flow>.ctnt>.box:hover>img{width:40px;margin:0px;}
.main-ctnr>.PROD>.flow>.ctnt>.box:hover>.t{color:var(--actFG);}
/* .main-ctnr>.PROD>.flow>.ctnt>.arrow{width:30px;height:30px;background-image:url("../upload/steps/arrow.png");background-size:cover;} */
.main-ctnr>.PROD>.flow>.ctnt>.arrow::after{content:'\e933';font-family:mosfont;}

.main-ctnr>.COUR>.detail{display:flex;flex-direction:column;gap:8px;}
.main-ctnr>.COUR>.detail>.xinxi{display:flex;align-items:center;gap:4px;}
.main-ctnr>.COUR>.detail>.xinxi>.btn{padding:2px 8px;}

.nav{display:flex;width:100%;margin:16px 0px;}
.nav>*{flex:1;display:flex;justify-content:center;align-items:center;background:var(--semiFG_LL);padding:8px 0px;user-select:none;cursor:pointer;}
.nav>*:hover{color:var(--actHovFG);}
.nav>*:first-child{border-radius:99px 0px 0px 99px;}
.nav>*:last-child{border-radius:0px 99px 99px 0px;}
#PROD, #COUR{display:none;}
#PROD:checked ~ .lbls>label[for="PROD"], #COUR:checked ~ .lbls>label[for="COUR"]{color:var(--actFG);background:var(--semiFG_L);}
.PROD, .COUR{display:none;}
#PROD:checked ~ .PROD, #COUR:checked ~ .COUR{display:block;}


@media screen and (max-width:1150px){
    .main-ctnr{width:100% !important;padding:0px 16px !important;background:var(--bg_page) !important;border:none !important;box-shadow:none !important;}
}