@charset 'utf-8';

/* CSS Document */
html { overflow-x: hidden; overflow-y: scroll; background-color: #f6f6f6;}
body { min-height: 100vh; background-color: #fff; overflow-x: hidden; }
.WebContainer { position: relative; width: 100%; min-width: 310px; margin: 0 auto; }
.WebContainerMax { max-width: 1200px; }
main .WebContainerMax { max-width: 1200px; }
.ArticleMinHeight { min-height: 600px; }
.AnchorLink { float: left; }
.AnchorLink:target { margin-top: -100px; padding-top: 100px; float: left; }
.LayoutBigAll { width: 100%; min-height: calc(100vh - 70px); background-color: #f6f6f6;}
.LayoutBigAll.set-main { min-height: calc(100vh - 70px); border-bottom: 0; padding: calc(0 + 0); background-color: #f6f6f6;}
.LayoutBigAll.set-login { background-image: url(../_img/bg-login.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.LayoutBigAll.set-forget { background-image: url(../_img/bg-forget.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.LayoutBigAll.set-note { background-image: url(../_img/bg-login.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.LayoutBigAll.set-sing { background-image: url(../_img/bg-sing.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
.LayoutBigAll.set-user { background-image: url(../_img/bg-resume.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
.Search-TopImg { width: 100%; height: 30vh; min-height: 300px; max-height: 600px; background-image: url(../_img/bg-pagebar-1.jpg); background-repeat: no-repeat; background-position: center right; background-size: cover; }
body.set-fullscreen { background-color: #e6eded; }
body.set-fullscreen .FooterGroup { background-color: #e6eded; }
@media (min-width:0) and (max-width:800px) {
	.ArticleMinHeight { min-height: 200px; }
	.LayoutBigAll.set-main { border: initial; }
	.LayoutBigAll { min-height: calc(100vh - 110px); }
	.LayoutBigAll.set-login { background-image: url(../_img/bg-login.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
	.LayoutBigAll.set-forget { background-image: url(../_img/bg-forget.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
	.LayoutBigAll.set-note { background-image: url(../_img/bg-login.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
	.LayoutBigAll.set-sing { background-image: url(../_img/bg-sing.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
	.LayoutBigAll.set-user { background-image: url(../_img/bg-resume-s.jpg); background-repeat: no-repeat; background-position: center top; background-size: contain; }
	.Search-TopImg { width: 100%; height: 20vh; min-height: 150px; max-height: 300px; background-image: url(../_img/bg-pagebar-1.jpg); background-repeat: no-repeat; background-position: center right; background-size: cover; }
}
@media (min-width:0) and (max-width:600px) {
	.LayoutBigAll.set-main { border: initial; padding: 0; }
}
@media  (min-height:0) and (max-height:700px) {
	.LayoutBigAll { width: 100vw; height: 100%; }
	.LayoutBigAll.set-login { background-image: url(../_img/bg-01.jpg); background-repeat: no-repeat; background-position: center top; background-position: fixed; background-size: contain; }
	.LayoutBigAll.set-sing { background-image: url(../_img/bg-02.jpg); background-repeat: no-repeat; background-position: center top; background-position: fixed; background-size: contain; }
	.LayoutBigAll.set-user { background-image: url(../_img/bg-03.jpg); background-repeat: no-repeat; background-position: center top; background-position: fixed; background-size: contain; }
}

/**/
.HeaderGroup { position: relative; }
.But-LoginOut .LoginOn-Hide { display: none; }
@media (min-width:801px) {
	.Header-TopBar { position: absolute; z-index: 100; width: 100%; height: 76px; background-color: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, .1); padding: 16px; }
	body.set-fullscreen .Header-TopBar { background-color: #fff; border-bottom: 0; }
	.Header-TopBar-2 { position: absolute; top: 0; width: 100%; }
	.Header-TopBar-Left { text-align: left; }
	.Header-TopBar-Right { text-align: right; }
	.TopBar-Logo { position: absolute; z-index: 120; top: 20px; left: 16px; }
	.TopBar-Logo img { position: relative; top: -12px; width: auto; height: 52px; margin-bottom: 0; }
	.TopBar-Lang { position: absolute; z-index: 120; top: 22px; right: 16px; }
	.TopBar-User { position: absolute; z-index: 110; top: 20px; right: 95px; color: #555; }
	.TopBar-UserOff { position: relative; right: 10px; }
	.TopBar-User a { font-size: 15px; font-weight: 500; color: #555; }
	.TopBar-User a:hover { color: #72dbd4; opacity: 1 !important; }
	.TopBar-User a i { position: relative; top: -2px; }
	.FooterGroup { color: #555; background-color: #e6eded; border-top: 0 solid #eee; margin-left: 0; margin-right: 0; }
	.FooterGroup a:hover { color: #555; opacity: 1; transition: all .3s ease; }
	footer.set-main .FooterGroup { margin-left: calc(0 + 0); margin-right: calc(0 + 0); }
	.FooterGroup p { font-size: 14px; line-height: 1.3; }
	.Footer-Logo { text-align: right; }
	.Footer-Left { text-align: left; }
	.Footer-Right { text-align: right; }
	.Footer-Right p { font-size: 13px; }
	.Footer-IconlLink { width: 30px; height: 30px; line-height: 1; line-height: 30px; background-color: #72dbd4; border-radius: 100%; margin: 0 1px; text-align: center; display: inline-block; }
	.Footer-IconlLink i { position: relative; top: 0; font-size: 14px; line-height: 1; color: #fff; }
	.Footer-Line { border-bottom: 1px solid #bfbfbf; margin: 12px 0; }
	.TopBar-UserOut { background-color: transparent; border: 1px solid #bfbfbf; border-radius: 100px; margin-right: 8px; padding: 3px 8px 3px 12px; text-align: right; }
	.TopBar-UserOut:hover { color: #444; background-color: transparent; border: 1px solid #bfbfbf; }
	.TopBar-UserOut:hover a { color: #888; opacity: 1; }
	.TopBar-UserLink { border: auto; }
	.TopBar-UserLink-Mob { display: none; }
	.SearchWidth { width: 150px; padding-left: 8px; }
}
@media (min-width:0) and (max-width:800px) {
	.Header-TopBar { position: relative; z-index: 100; width: 100%; height: 76px; box-shadow: 0 3px 3px rgba(0, 0, 0, .1); }
	body.set-fullscreen .Header-TopBar { background-color: #fff; border-bottom: 0; }
	.Header-TopBar-2 { position: absolute; top: -76px; width: 100%; }
	.Header-TopBar-Left { text-align: left; }
	.Header-TopBar-Right { text-align: right; }
	.TopBar-Logo { position: absolute; z-index: 120; top: 16px; left: 16px; }
	.TopBar-Logo img { position: relative; top: -5px; width: auto; height: 50px; margin-bottom: 0; }
	.TopBar-Lang { position: absolute; z-index: 120; top: 12px; right: 16px; }
	.TopBar-User { position: absolute; z-index: 110; top: 36px; left: 16px; width: calc(100% - 16px - 16px); }
	.TopBar-User a { font-size: 15px; color: #555; }
	.TopBar-User a i { position: relative; top: -2px; }
	.TopBar-UserOn { text-align: right; }
	.TopBar-UserOff { text-align: right; }
	.FooterGroup { min-height: 110px; color: #555; background-color: #72dbd4; border-top: 1px solid #72dbd4; margin-left: 0; margin-right: 0; }
	footer.set-main .FooterGroup { margin-left: calc(0px + 0px); margin-right: calc(0px + 0px); }
	.FooterGroup p { font-size: 14px; line-height: 1.3; }
	.Footer-Logo { text-align: left; }
	.Footer-Left { text-align: left; }
	.Footer-Right { padding-top: 4px; text-align: left; }
	.Footer-Line { border-bottom: 1px solid #bfbfbf; margin: 8px 0; }
	.TopBar-UserOn .LoginOn-Hide { display: none; }
	.But-LoginOut .LoginOn-Hide { display: inline-block; }
	.Footer-IconlLink { width: 24px; height: 24px; line-height: 1; line-height: 24px; background-color: #72dbd4; border-radius: 100%; margin: 0 1px; text-align: center; display: inline-block;  color: #fff;}
	.Footer-IconlLink i { position: relative; top: 0; font-size: 13px; line-height: 1; color: #72dbd4; }
	.TopBar-UserLink-Mob { display: none; }
	.SearchWidth { padding-left: 8px; }
}
@media (min-width:0) and (max-width:600px) {
	.TopBar-UserMail { display: none; }
	.TopBar-UserLink { display: none; }
	.TopBar-UserLink-Mob { display: inline-block; }
	footer.set-main .FooterGroup { margin-left: 0; margin-right: 0; }
}
@media (min-width:0) and (max-width:450px) {
	.TopBar-Logo img { position: relative; top: -5px; width: auto; height: 50px; margin-bottom: 0; transform: translate(0%, 0%); }
	.SearchWidth { width: 20% !important; padding-left: 8px; }
}

/* 3w-dropdown */
.dropbtn { font-size: 14px; font-weight: 400; color: #555; background-color: transparent; border: none; padding: 0 0 8px 0; cursor: pointer; vertical-align: top; }
.dropbtn:hover, .dropbtn:focus { font-weight: 400; color: #72dbd4; background-color: transparent; }
.dropbtn i { position: relative; top: -3px; font-size: 14px; }
.dropdown { position: relative; z-index: 120; display: inline-block; }
.dropdown-content { position: absolute; z-index: 120; right: 0; min-width: 120px; background-color: #f1f1f1; overflow: auto; text-align: center; display: none; }
.dropdown-content a { font-size: 15px; font-weight: 400; color: #555; padding: 8px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { color: #72dbd4; background-color: #ddd; }

/*.dropdown a:hover { background-color: #ddd; color: #72DBD4;}*/
.show { display: block; }
@media (min-width:0) and (max-width:800px) {
	.dropbtn { color: #808080; }
	.dropbtn:hover, .dropbtn:focus { font-weight: 400; color: #ccc; }
	.dropdown-content { top: 24px; }
}

/* dl > dt + dd */
dt.expanded i { transform: rotate(90deg); }

/* grey */
.accordion-grey { border: 0 solid #bbb; border-top: none; }
.accordion-grey > dt { line-height: 1; color: #222; background-color: #eee; border-left: 6px solid #d8d8d8; margin-top: 0; margin-bottom: 4px; padding: 12px 12px 12px 12px; cursor: pointer; user-select: none; transition: .1s; }
.accordion-grey > dt h4 { line-height: 1; margin-bottom: 0; }
.accordion-grey > dt h5 { line-height: 1; margin-bottom: 0; }
.accordion-grey > dt h6 { line-height: 1; margin-bottom: 0; }
.accordion-grey > dt:hover { background-color: #d8d8d8; }
.accordion-grey > dt.expanded { color: #333; background-color: #eee; }
.accordion-grey > dt i { position: relative; top: 2px; right: 0; color: #808080; float: right; transition: .2s; }
.accordion-grey > dt.expanded > i { color: #808080; }
.accordion-grey > dd { background-color: #fff; margin: 0; padding: 8px 0 8px 0; display: none; }
@media (min-width:0) and (max-width:800px) {
	.accordion-grey > dd { margin: 0; padding: 8px 0; display: none; }
}

/* subnav fixed*/
@media (min-width:801px) and (max-width:1200px) {
	.fixed { position: fixed; z-index: 1; top: 16px; width: calc((100vw - 80px) / 4); }
	.sp-subnav { display: none; }
	.fixed .sp-subnav { display: block; }
}
@media (min-width:1201px) {
	.fixed { position: fixed; z-index: 1; top: 16px; width: calc((1200px - 80px) / 4); }
	.sp-subnav { display: none; }
	.fixed .sp-subnav { display: block; }
}

/* COMM */
.Button-InInput { position: absolute; top: 0; right: 0; }
.Button-InInput i { position: absolute; z-index: 1; height: 48px; color: #808080; background-color: transparent; border-left: 1px solid #d9d9d9; border-radius: 0 4px 4px 0; margin-top: 0; padding: 16px 18px 0 12px; overflow: hidden; transform: translate(-100%, 00%); vertical-align: middle; pointer-events: none; }
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
	.Button-InInput { top: 16px; }
}
@-moz-document url-prefix() {
	.Button-InInput { top: 16px; }
}
.Button-InInput a:hover i { color: #333; }
.Button-InInput a { pointer-events: auto; }
.Button-InInput a i { pointer-events: auto; }
.Button-InInput.lg i { font-size: 1.3rem; line-height: 1; }
.Icon-InInput { overflow: hidden; display: block; }
.Icon-InInput i { position: absolute; z-index: 1; height: 40px; color: #777; background-color: transparent; background-color: #e5e9ec; border: 1px solid #cbcbcb; border-radius: 4px 0 0 4px; margin-top: 1px; padding: 12px 16px 0 16px; overflow: hidden; vertical-align: middle; pointer-events: none; }
.Icon-InInput > i + input { padding-left: 60px !important; }

/* Login / Register */

/* CARD */
.CardBox { min-height: 250px; background-color: #fff; box-shadow: 0 -7px 10px 0 rgba(50, 50, 50, .2), 0 3px 5px 0 rgba(50, 50, 50, .05); }
.CardBox a { color: #666; }
.CardBox-LineBar { width: 100%; font-size: 12px; text-align: center; }
.CardBox-LineBar span { width: 100%; border-top: 1px solid #ccc; transform: translateY(-3px); display: inline-block; }
.CardBox-RegImg { background-image: url(../_img/img-reg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; border: 16px solid #fff; }
.CardBox-PassImg { background-image: url(../_img/img-password.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; border: 16px solid #fff; }
.CardBox-Title { font-size: calc(24px + .7vw); font-weight: 700; color: #35c3bb; }
.CardBox-TitleEn { font-size: calc(13px + .5vw); font-weight: 500; color: #72dbd4; margin-bottom: 8px; }
@media (min-width:801px) {
	.Comm-CardIn { padding: 0 64px; }
	.Comm-CardIn.sp { border-top: 16px solid #fff; border-bottom: 16px solid #fff; }
	.CardBox-Logo { margin-bottom: -97%; float: left; transform: translate(0, -95%); display: none; }
	.CardBox-Logo img { max-width: 240px; }
	.CardBox-MediumAll { min-width: 540px; max-width: 540px; max-width: 540px; min-height: 250px; border: 1px solid #bae0dd; border-top: 6px solid #72dbd4; margin: 0 auto; }
	.CardBox-BigAll { min-width: 540px; max-width: 540px; border: 1px solid #bae0dd; border-top: 6px solid #72dbd4; margin: 0 auto; }
	.CardBox-UserAll { border-top: 0 solid #333; }
	.Page-Pole { height: 240px; }
}
@media (min-width:801px) and (min-height:0) and (max-height:700px) {
	.Comm-Card-Center { position: relative; margin: 0 auto; padding-top: 120px; padding-bottom: 48px; }
	.CardBox-Logo { display: none; }
}
@media (min-width:801px) and (min-height:701px) {
	.Comm-Card-Center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
@media (min-width:0) and (max-width:800px) {
	.Comm-Card-Center { position: relative; left: 50%; padding-top: 15vh; padding-bottom: 5vh; transform: translate(-50%, 0); }
	.Comm-CardIn { padding: 0 24px; }
	.CardBox-Logo { margin-top: 10vh; display: none; }
	.CardBox-MediumAll { width: 100%; max-width: 570px; background-color: #fff; border-top: 8px solid #72dbd4; box-shadow: 0 -7px 10px 0 rgba(50, 50, 50, .2); margin: 0 auto; }
	.CardBox-BigAll { width: 96%; max-width: 570px; background-color: #fff; border-top: 8px solid #72dbd4; box-shadow: 0 -7px 10px 0 rgba(50, 50, 50, .2); margin: 0 auto; }
	.CardBox-UserAll { top: 0; }
	.Page-Pole { height: 90px; }
}
.CardBox-NoteDiv { min-height: 250px; background-color: #e8e8e8; border: 16px solid #fff; padding: 0 10% 0 10%; }
.CardBox-NoteDiv span > i { font-size: calc(64px + .1vw); color: #72dbd4 !important; }
.CardBox-NoteDiv p a { font-weight: 500; color: #72dbd4 !important; opacity: 1; }
.CardBox-NoteDiv p a:hover { opacity: .4; }

/* Index-Main */
.IndexMainGroup { border: initial; }
.IndexMain-Right { border: initial; }
.IndexMain-Left { border: initial; }
.Index-LeftIn { text-align: left; }
.Index-LeftIn img.Index-LeftLogo { max-width: 100%; opacity: 1; }
.Index-LeftIn h1 { font-size: calc(20px + .3vw); line-height: 2.2; color: #72dbd4; padding-right: 4px; text-align: right; }
.Index-LeftIn p { line-height: 1.5; text-align: justify; }
@media (min-width:801px) {
	.Index-Intro { border: initial; }
	.Index-Intro img { width: 100%; margin-top: 70px; }
	.Index-Intro-Text { position: absolute; z-index: 2; top: 0; width: 100%; }
	.Index-Intro-Text h1 { position: relative; top: 60%; left: 10%; font-size: calc(32px + 3vw); line-height: 1; color: #fff; text-shadow: 0 0 7px rgba(0, 0, 0, .5); transform: translateY(-50%); }
	.Index-LeftIn { text-align: left; }
	.IndexMain-UpPole { height: 34px; }
	.IndexMain-UdPole { height: 64px; }
	.Index-LeftIn { padding: 0 32px 0 0; }
	.Index-LeftIn ul { border: auto; }
	.Index-LeftIn ul li { border-bottom: 1px solid #ffcb05; padding: 4px 0; }
	.Index-LeftIn ul li a { font-size: calc(20px + .3vw); color: #72dbd4; }
	.Index-LeftIn ul li a:hover { color: #ffcb05; }
	.Index-Intro-Link { width: 100%; margin: auto; margin-bottom: -28px; transform: translateY(-100%); text-align: center; display: block; }
	.Index-Intro-Link ul li { width: 20%; display: inline-block; }
	.Index-Intro-Link ul li a { font-size: calc(16px + .1vw); font-weight: 400; color: #666; border-bottom: 6px solid transparent; display: block; }
	.Index-Intro-Link ul li a:hover { color: #333; border-bottom: 6px solid #fff; }
	.Index-SelectGroup { max-width: 720px; }
}
@media (min-width:0) and (max-width:800px) {
	.Index-Intro { border: initial; }
	.Index-Intro img { width: 100%; margin-top: 0; }
	.Index-Intro-Text { position: absolute; top: 70px; width: 100%; }
	.Index-Intro-Text h1 { position: relative; z-index: 2; top: 60%; left: 8px; font-size: calc(32px + 2vw); line-height: 1; color: #fff; text-shadow: 0 0 7px rgba(0, 0, 0, .5); transform: translateY(-50%); }
	.Index-LeftIn { text-align: center; }
	.IndexMain-UpPole { height: 32px; }
	.IndexMain-UdPole { height: 32px; }
	.Index-LeftIn { padding: 0 0 0 0; }
	.Index-LeftIn img.Index-LeftLogo { width: 80%; height: auto; max-width: 220px; opacity: .4; margin-right: 0; }
	.Index-LeftIn h1 { text-align: left; }
	.Index-LeftIn ul { border: auto; }
	.Index-LeftIn ul li { border-right: 1px solid #ffcb05; padding: 0 16px; display: inline-block; }
	.Index-LeftIn ul li:last-child { border-right: 0; }
	.Index-LeftIn ul li a { font-size: calc(20px + .3vw); line-height: 1; color: #72dbd4; }
	.Index-LeftIn ul li a:hover { color: #ffcb05; }
	.Index-Intro-Link { width: 100%; background-color: #eee; margin: auto; margin-top: 16px; padding-top: 12px; padding-bottom: 12px; text-align: center; display: block; }
	.Index-Intro-Link ul li { width: 48%; display: inline-block; }
	.Index-Intro-Link ul li a { color: #666; border-bottom: 0 solid transparent; display: block; }
	.Index-Intro-Link ul li a:hover { color: #333; background-color: #fff; border-radius: 4px; }
	.Index-SelectGroup { max-width: 720px; }
}
@media (min-width:0) and (max-width:600px) {
	.Index-Intro-Link ul li { width: 48%; display: inline-block; }
	.Index-Intro-Link ul li a { font-size: 14px; padding: 2px; }
}

/* Page */
@media (min-width:801px) {
	.Page-Intro { position: relative; top: 76px; width: 100%; height: 24vh; background-color: #72dbd4; border: initial; margin-bottom: 76px; }
	.Page-Intro-Text { position: relative; z-index: 2; top: 10vh; width: 100%; }
	.Page-Intro-Text h1 { position: relative; z-index: 2; top: 60%; left: 8px; width: calc(100% - 32px); font-size: calc(16px + 1.5vw); line-height: 1; font-weight: 700; color: #35c3bb; border-left: 8px solid #72dbd4; text-shadow: 0 0 7px rgba(176,197,216, .5); padding-left: 12px; }
	.Page-Intro-Text h1 b { font-size: calc(16px + .8vw); line-height: 1; color: #35c3bb; margin-top: 2px; margin-left: 4px; display: block; }
	.PageMain-UpPole { height: 64px; }
	.PageMain-UdPole { height: 32px; }
	.Page-Intro { background-image: url('../_img/page-bar.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
}
@media (min-width:1201px) {
	.Page-Intro-Text h1 { position: relative; top: 60%; left: calc((100vw - 1200px) / 2 + 16px); width: calc(1200px - 32px); }
}
@media (min-width:0) and (max-width:800px) {
	.Page-Intro { width: 100%; min-height: 20vh; background-color: #72dbd4; border: initial; }
	.Page-Intro-Text { position: absolute; top: 70px; width: 100%; }
	.Page-Intro-Text h1 { position: relative; z-index: 2; top: 10vh; left: 24px; width: 90%; font-size: calc(16px + 2.5vw); line-height: 1; color: #72dbd4; border-left: 6px solid #72dbd4; text-shadow: 0 0 7px rgba(176,197,216, .8); padding-left: 8px;  font-weight: 700}
	.Page-Intro-Text h1 b { font-size: calc(16px + .2vw); line-height: 1; margin-top: 2px; margin-left: 4px; display: block; font-weight: 700 }
	.PageMain-UpPole { height: 48px; }
	.PageMain-UdPole { height: 32px; }
	.Page-Intro { background-image: url('../_img/page-bar.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; }
}

/* Search / Filter */
.Search-Nothing { padding: 8px 16px; }
.Search-Nothing p { font-size: calc(18px + .2vw); color: #72dbd4; }
.Search-Filter { background-color: #e2e2e2; padding: 16px; }
@media (min-width:801px) {
	table.Rwd-Table { width: 100%; border: initial; margin: 0; padding: 0; table-layout: fixed; border-collapse: collapse; }
	table.Rwd-Table thead { background-color: #f6f6f6; border-bottom: 1px solid #bbb; }
	table.Rwd-Table thead th { font-size: 16px; font-weight: 400; color: #808080; padding: 4px 12px; text-align: left; text-transform: uppercase; }
	table.Rwd-Table thead th i { position: relative; top: -2px; color: #808080; }
	table.Rwd-Table tbody { padding-top: 8px; }
	table.Rwd-Table tbody tr:nth-child(even) { background-color: #ececec; }
	table.Rwd-Table tbody tr:nth-child(odd) { background-color: #f6f6f6; }
	table.Rwd-Table td { line-height: 1.4; padding: 16px 8px; text-align: left; }
	table.Rwd-Table td.set-button { max-width: 50px !important; border: initial; }
	table.Rwd-Table td.set-icon { padding-left: 16px; }
	table.Rwd-Table td.set-icon i { color: #808080; text-align: right; }
	.CardBox-UserAll table.Rwd-Table thead { background-color: #fff; border-bottom: 1px solid #ddd; }
	.CardBox-UserAll table.Rwd-Table thead th { color: #808080; padding: 8px 12px 0 12px; }
	.CardBox-UserAll table.Rwd-Table tbody tr:nth-child(even) { background-color: #f1f1f1; }
	.CardBox-UserAll table.Rwd-Table tbody tr:nth-child(odd) { background-color: #fff; }
}
@media (min-width:0) and (max-width:800px) {
	table.Rwd-Table { width: 100%; border: initial; margin: 0; padding: 0; table-layout: fixed; border-collapse: collapse; }
	table.Rwd-Table thead { position: absolute; width: 1px; height: 1px; border: none; border-bottom: 1px solid #ddd; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
	table.Rwd-Table tbody { padding-top: 0; }
	table.Rwd-Table tbody tr:nth-child(even) { background-color: #ececec; }
	table.Rwd-Table tbody tr:nth-child(odd) { background-color: #f7f7f7; }
	table.Rwd-Table tr { border: 1px solid #ddd; margin-top: 16px; display: block; }
	table.Rwd-Table td { line-height: 1.4; border-bottom: 1px solid #ddd; padding: 8px 12px 6px 12px; text-align: left; display: block; }
	table.Rwd-Table td::before { width: 100%; content: attr(data-label); font-weight: 500; float: left; text-transform: uppercase; }
	table.Rwd-Table td:last-child { border-bottom: 0; }
	table.Rwd-Table td.set-button { padding: 16px 12px; text-align: right; }
	table.Rwd-Table td.set-icon { padding-left: 16px; text-align: right; }
	.CardBox-UserAll table.Rwd-Table tbody tr:nth-child(even) { background-color: #f1f1f1; }
	.CardBox-UserAll table.Rwd-Table tbody tr:nth-child(odd) { background-color: #fff; }
}

/**/
.Detail-Title h1 { font-size: calc(20px + 1vw); line-height: 1.3; color: #31b7b0; vertical-align: middle;  font-weight: 700; }
@media (min-width:801px) {
	.Detail-InfoBar { color: #fff; font-size: calc(16px + .1vw);  font-weight: 500; background-color: #35c3bb; padding: 16px 32px 16px 32px; }
	.Detail-InfoText { background-color: #eee; padding: 48px 32px 48px 32px; }
	.Detail-Title { padding: 0; }
	.Detail-TitleOut { padding: 0; }
	.Detail-Title-Back { width: 100px; text-align: right; }
	table.Rwd-Table-Info { width: 100%; border: initial; margin: 0; padding: 0; table-layout: fixed; border-collapse: collapse; }
	table.Rwd-Table-Info thead th { font-size: 14px; color: #fff;  font-weight: 300; }
	table.Rwd-Table-Info th { font-weight: 400; text-align: left; text-transform: uppercase; }
	table.Rwd-Table-Info td { line-height: 1.4; text-align: left; }
}
@media (min-width:0) and (max-width:800px) {
	.Detail-InfoBar { color: #fff; background-color: #72dbd4; padding: 16px calc(12px + 2vw) 12px calc(12px + 2vw); }
	.Detail-InfoText { background-color: #eee; padding: 16px calc(12px + 2vw); }
	.Detail-Title { padding: 0; }
	.Detail-TitleOut { padding: 0; }
	.Detail-Title-Back { width: 80px; text-align: right; }
	table.Rwd-Table-Info { width: 100%; border: initial; margin: 0; padding: 0; table-layout: fixed; border-collapse: collapse; }
	table.Rwd-Table-Info thead { position: absolute; width: 1px; height: 1px; border: none; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
	table.Rwd-Table-Info tbody { padding-top: 0; }
	table.Rwd-Table-Info tr { display: block; }
	table.Rwd-Table-Info td { line-height: 1.4; padding-bottom: 4px; text-align: left; display: block; }
	table.Rwd-Table-Info td::before { width: 100%; content: attr(data-label); font-size: 13px; font-weight: 400; color: #e6eaea; float: left; text-transform: uppercase; }
	table.Rwd-Table-Info td:last-child { border-bottom: 0; }
}

/**/
@media (min-width:801px) {
	.User-NavPc { background-color: #51c9c3; border-radius: 0; padding: 16px 16px; }
	.But-UserNav { font-size: calc(16px + .1vw); font-weight: 400; color: #fff !important; margin: 0 2px; padding: 6px 10px; display: inline-block; }
	.But-UserNav:hover { color: #2caea5 !important; background-color: #fff; border-radius: 4px; }
	.But-UserNav.active { color: #2caea5 !important; background-color: #fff; border-radius: 4px; }
	.User-NavPc-Left { background-color: #eee; border-radius: 0; padding: 12px 16px; }
	.User-Title { padding: 0 16px; }
	.User-SubMenu { border: initial; display: block; }
	.User-SubMenu ul { margin-right: 16px; display: block; }
	.User-SubMenu ul { border-bottom: 1px solid #ddd; }
	.User-SubMenu ul li { border-top: 4px solid #fff; border-bottom: 4px solid #fff; padding: 4px 4px 4px 4px; }
	.User-SubMenu ul li::before { position: relative; top: -8px; left: -4px; width: calc(100% + 4px + 4px); height: 1px; content: ''; border-top: 1px solid #ddd; display: block; }
	.User-SubMenu ul li:hover { color: #fff; background-color: #2caea5; }
	.User-SubMenu ul li a { font-size: calc(16px + .1vw); line-height: 1; font-weight: 400; color: #808080; padding: 4px; display: block; }
	.User-SubMenu ul li:hover a { color: #fff; }
	.User-SubMenu ul li.active { font-weight: 500; color: #fff; background-color: #2caea5; }
	.User-SubMenu ul li.active a { color: #fff; }
	.User-SubMenu ul li.active::after { position: relative; top: -26px; right: 8px; content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #fff; float: right; display: inline-block; }
	.User-SubMenu ul li.active:hover::after { color: #fff; }
	.CartonFromGroup { min-height: 480px; border: 6px solid #eee; }
	.CartonFromGroup > div.CartonFrom-Title { border-bottom: 1px solid #ddd; }
	.CartonFrom-Note { padding: calc(24px + 2vw) calc(24px + 5vw); }
}
@media (min-width:0) and (max-width:800px) {
	.User-NavMob { position: relative; z-index: 50; background-color: #72dbd4; }
	.But-UserSearch { position: absolute; z-index: 20; top: 6px; right: 8px; font-weight: 400; color: #72dbd4 !important; background-color: #fff; border-radius: 4px; padding: 4px 12px; }
	.But-UserSearch:hover { color: #fff !important; background-color: #2caea5; }
	.But-UserSearch i { position: relative; top: -1px; }
	.User-Title { padding: 0; }
	.CartonFromGroup { min-height: 100px; border: 0 solid #eee; }
	.CartonFromGroup > div.CartonFrom-Title { display: none; }
	.CartonFrom-Note { padding: calc(24px + 2vw) calc(0px + .5vw); }
}
.User-Title h3 { font-size: calc(20px + .1vw); color: #bfbfbf; }
.User-Title h3 i { position: relative; top: -4px; font-size: calc(20px + .2vw); color: #bfbfbf; }
.User-Avatar { position: relative; max-width: 300px; max-height: 336px; border: 1px solid #ddd; border-radius: 8px; padding: 8px; text-align: center; }
.User-Avatar img { background-color: #eee; }
.User-Avatar p { color: #777; white-space: nowrap; }
.User-Avatar a.But-AvatarEdit { position: absolute; z-index: 5; top: 16px; right: 16px; }
.User-Avatar a.But-AvatarEdit i { font-size: 20px; color: #777; background-color: #fff; border-radius: 4px; padding: 8px; }
.User-Avatar a.But-AvatarEdit:hover i { color: #72dbd4; background-color: #fff; }
.User-Avatar-Butbar { max-width: 300px; }
.CartonFrom-Title h2 { font-size: calc(18px + .4vw); color: #2caea5; display: block; }
.CartonFrom-Title h2 i { position: relative; top: -2px; width: 36px!important; height: 36px!important; font-size: 16px; line-height: 36px; color: #fff; background-color: #2caea5; border-radius: 100px; text-align: center; display: inline-block;}
.CartonFrom-Alert { font-size: calc(17px + .2vw); line-height: 1; background-color: #eee; border-left: 4px solid #ccc; padding: 12px 8px; }

/* ---- Form (COPY) ---- */
.ResumeCard { background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .2); padding: 8px 8px; }
.ResumeCard-Title { position: relative; top: 16px; left: 8px; font-size: calc(20px + .2vw); line-height: 1; font-weight: 500; color: #f8180e; margin-bottom: 16px; padding-left: 8px; vertical-align: middle; }
.ResumeModal-Title { color: #fff; background-color: #2caea5; border-bottom: 0 solid #ececec; border-radius: 2px 2px 0 0; padding-bottom: 16px; vertical-align: middle; }
.ResumeModal-Title h3 { font-size: calc(24px + .2vw); line-height: 1 !important; font-weight: 500; }
.ResumeModal-Title h3 i { position: relative; top: -2px; }
.ResumeCard-Icon { width: 42px; height: 42px; font-size: calc(18px + .1vw); line-height: 42px; font-weight: 500; color: #fff; background-color: #72dbd4; border-radius: 100px; text-align: center; display: inline-block; }
.ResumeCard-Icon i { position: relative; top: -4px; font-size: 18px; }
@media (min-width:0) and (max-width:800px) {
	.ResumeCard-Title { top: 8px; left: 0; }
}
.ResumeList-Box { background-color: #eee; margin: 8px 0 16px 0; padding: 12px 16px 12px 16px; }
.ResumeList-Box p { line-height: 1.5; }
.ResumeList-Box h5 { padding-bottom: 4px; }
.ResumeList-Box.white-bg { background-color: #fff; }
.ResumeList-CssTable { width: 100%; }
.ResumeList-CssTable .w3-css-td-mobile-up { text-align: right; }
@media (min-width:0) and (max-width:600px) {
	.ResumeList-CssTable .w3-css-td-mobile-up { text-align: left; }
}
.ResumeList-Icon { width: 46px; height: 46px; line-height: 46px; color: #fff; border-radius: 4px; margin: 2px 1px 2px 1px; text-align: center; display: inline-block; }
.ResumeList-Icon i { position: relative; top: -2px; font-size: 18px; }
.ResumeList-Icon.Icon-lg { width: 52px; height: 52px; line-height: 52px; }
.ResumeList-Icon.Icon-lg i { font-size: 22px; }
@media (min-width:0) and (max-width:600px) {
	.ResumeList-Icon { width: 36px; height: 36px; line-height: 36px; }
	.ResumeList-Icon i { font-size: 16px; }
	.ResumeList-Icon.Icon-lg { width: 42px; height: 42px; line-height: 42px; }
	.ResumeList-Icon.Icon-lg i { font-size: 18px; }
}

/* Resume*/
.Resume-Photo { width: 150px; background-color: #eee; border: 8px solid #ddd; }
.Resume-Table { width: 100%; border: 2px solid #fff; border-bottom: 1px solid #d8d8d8; border-spacing: 0; border-collapse: collapse; display: table; }
.Resume-Table tr { background-color: #fff; border-bottom: 1px solid #d8d8d8; }
.Resume-Table th { width: 40%; line-height: 1.6; font-weight: 400; color: #333; padding: 8px 8px; text-align: left; vertical-align: middle; display: table-cell; }
.Resume-Table th p { font-size: 1rem; line-height: 1.6; }
.Resume-Table td { line-height: 1.6; color: #555; padding: 8px 8px; text-align: left; vertical-align: middle; display: table-cell; }
.Resume-Table th p { font-size: 1rem; line-height: 1.6; }
.Resume-Table td[align='center'] { text-align: center; }
.Resume-Table td[valign='middle'] { vertical-align: middle !important; }
.Resume-Tag li { background-color: #ececec; border-radius: 4px; margin: 4px; padding: 8px 32px 8px 16px; white-space: nowrap; display: inline-block; }
.Resume-Tag li span { float: right; transform: translateX(100%); display: inline-block; }
.Resume-Tag li span a { color: #808080; padding: 0 8px 0 8px; display: inline-block; }
.Resume-Tag li.Resume-Tag-Add { border-radius: 100px; padding: 0; }
.Resume-Tag li.Resume-Tag-Add a { width: 44px; height: 44px; line-height: 44px; color: #fff; background-color: #444; border-radius: 100px; text-align: center; display: inline-block; }
.Resume-Tag li.Resume-Tag-Add a:hover { color: #fff; background-color: #444; opacity: .6; }
@media (min-width:801px) {
	.Resume-Line { border-bottom: 3px solid #eee; }
}
@media (min-width:0) and (max-width:800px) {
	.Resume-Line { border-bottom: 1px solid #eee; margin: 0 -16px; }
	.Resume-Table th { width: 40%; }
}
@media (min-width:0) and (max-width:600px) {
	.Resume-Table th { width: 50%; }
}

/**/
.CampusGroup img.Campus-Logo { max-width: 220px; opacity: .4; }
.CampusGroup h1 { font-size: calc(32px + .3vw); line-height: 1.4; color: #c2c2c2; text-align: left; }
fieldset.Campus-Fieldset { background: #eee; margin-bottom: 16px; }
.Campus-Fieldset legend { font-size: calc(16px + .1vw); font-weight: 500; color: #565656; background-color: #eee; border-radius: 100px; padding: 4px 24px 4px 24px; }
.Campus-Fieldset legend span { position: relative; top: -2px; padding-left: 16px; float: right; }
.Campus-Fieldset legend span a { font-size: 14px; line-height: 14px; font-weight: 500; display: inline; }
.Campus-Fieldset legend span a i { font-size: 14px; line-height: 14px; padding-right: 2px; }
@media (min-width:801px) {
	.WelcomeText { text-align: left !important; }
	.WelcomeText br { display: block; }
	.WelcomeText span { display: none; }
}
@media (min-width:0) and (max-width:800px) {
	.WelcomeText { text-align: left !important; }
	.WelcomeText br { display: none; }
	.WelcomeText span { display: inline-block; }
}

/* HR */
.HrSection-Bg-1 { width: 100%; background-image: url(../_img-hr/hr-bg-1.jpg); background-repeat: no-repeat; background-position: center right; background-size: cover; }
.HrSection-Bg-2 { background-color: #f5f5f5; }
.HrSection-Bg-3 { width: 100%; background-image: url(../_img-hr/hr-bg-3.jpg); background-repeat: no-repeat; background-position: center right; background-size: cover; }
.HrSection-Bg-4 { background-color: #efefef; }
.HrSection-Bg-5 { background-color: #fff; }
.HrSection-Bg-6 { background-color: #efefef; }
.HrSectionStyle { border: auto; }
.HrSection-Title { font-size: calc(20px + .8vw); line-height: 1.3; font-weight: 600; color: #555; }
.Hr-IconGroup-Title { margin-left: 5vw; }
.Hr-IconGroup-Title .cell-1 { vertical-align: middle; }
.Hr-IconGroup-Title .cell-2 { vertical-align: middle; }
.Hr-IconGroup-Title img { max-width: 60px; }
.Hr-IconGroup-Title h5 { font-size: calc(24px + .3vw); line-height: 1.3; font-weight: 600; color: #555; }
.Hr-IconGroup-Title p { font-size: 16px; line-height: 1.2; color: #555; }
.Hr-IconGroup-Button { font-size: calc(24px + .2vw); line-height: 1 !important; font-weight: 500; color: #fff; background-color: #f00; margin: 0 8px; padding: 16px; text-align: center; vertical-align: middle; }
.Hr-IconGroup-Button img { width: 60px; vertical-align: middle; }
@media (min-width:801px) {
	.Hr-TopImg { width: 100%; height: 30vh; min-height: 400px; max-height: 600px; background-image: url(../_img-hr/bg-pagebar-1.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
	.HrSection-FQ { background-image: url(../_img-hr/hr-img-faqbg.png); background-repeat: no-repeat; background-position: bottom right; margin-right: 5vw; padding: 40px 20px 80px 40px; }
	.HrSection-FQ-In { margin: 0 5vw 0 5vw; }
	.owl-sp1 { margin-bottom: 48px; }
	.owl-sp2 { margin-top: 48px; }
}
@media (min-width:992px) {
	.HrSection-FQ { margin-right: 10vw; }
	.HrSection-FQ-In { margin: 0 5vw 0 10vw; }
}
@media (min-width:1201px) {
	.HrSection-FQ { margin-right: 15vw; }
	.HrSection-FQ-In { margin: 0 5vw 0 15vw; }
}
@media (min-width:1601px) {
	.HrSection-FQ { margin-right: 20vw; }
	.HrSection-FQ-In { margin: 0 3vw 0 20vw; }
}
@media (min-width:0) and (max-width:800px) {
	.Hr-TopImg { width: 100%; height: 20vh; min-height: 200px; max-height: 300px; background-image: url(../_img-hr/bg-pagebar-1.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
	.Hr-IconGroup-Title { margin: 0 auto; }
	.Hr-IconGroup-Title img { width: 80px; }
	.Hr-IconGroup-Title .cell-1 { vertical-align: middle; }
	.Hr-IconGroup-Title .cell-2 { vertical-align: middle; }
	.Hr-IconGroup-Title h5 { font-size: calc(24px + .3vw); line-height: 1.3; font-weight: 600; color: #555; }
	.Hr-IconGroup-Title img { display: none; }
}
@media (min-width:601px) {
	.HrSection-VedioBg { width: 100%; background-image: url(../_img-hr/hr-img-vediobg.png); background-repeat: no-repeat; background-position: center center; background-size: contain; padding: 14% 7% 15% 23%; }
}
@media (min-width:0) and (max-width:600px) {
	.HrSection-VedioBg { border: 5px solid #d9d9d9; margin-top: 24px; }
	.Hr-IconGroup-Title { margin: 0vw auto; }
	.Hr-IconGroup-Title h5 { font-size: calc(24px + .3vw); line-height: 1.3; font-weight: 600; color: #555; }
}

/* white-in */
.accordion-white-in { font-size: calc(16px + .1vw); line-height: 1.4; border: 0 solid #ddd; border-top: none; }
.accordion-white-in > dt { line-height: 1; font-weight: 500; color: #222; background: transparent; border-bottom: 1px solid #d8d8d8; margin-top: 0; padding: 24px 8px 24px 8px; cursor: pointer; user-select: none; transition: .1s; }
.accordion-white-in > dt h4 { line-height: 1; color: #222; margin-bottom: 0; }
.accordion-white-in > dt h5 { line-height: 1; color: #222; margin-bottom: 0; }
.accordion-white-in > dt:hover { background: transparent; }
.accordion-white-in > dt.expanded { color: #222; background-color: transparent; border-bottom: 0 solid #d8d8d8; }
.accordion-white-in > dt i { position: relative; top: 0; right: 4px; color: #808080; opacity: 1; float: right; transition: .2s; }
.accordion-white-in > dt.expanded > i { color: #808080; }
.accordion-white-in > dd { background: transparent; border-bottom: 1px solid #d8d8d8; margin: 0; padding: 0 8px 24px 8px; display: none; }
@media (min-width:0) and (max-width:600px) {
	.accordion-white-in > dd { background: transparent; margin: 0; padding: 0 8px 24px 8px; display: none; }
}