@charset "utf-8"; @font-face { font-family: "IRANYekanX"; src: url('../../../includes/fonts/IRANYekanX/IRANYekanXFaNum-Regular.woff') format('woff'),  url('../../../includes/fonts/IRANYekanX/IRANYekanXFaNum-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: "IRANYekanX"; src: url('../../../includes/fonts/IRANYekanX/IRANYekanXFaNum-Bold.woff') format('woff'),  url('../../../includes/fonts/IRANYekanX/IRANYekanXFaNum-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: "IRANYekanX_EN"; src: url('../../../includes/fonts/IRANYekanX/en/IRANYekanX-Regular.woff') format('woff'),  url('../../../includes/fonts/IRANYekanX/en/IRANYekanX-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: "IRANYekanX_EN"; src: url('../../../includes/fonts/IRANYekanX/en/IRANYekanX-Bold.woff') format('woff'),  url('../../../includes/fonts/IRANYekanX/en/IRANYekanX-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: 'fontello'; src: url('../../../includes/fonts/fontello_12/fontello.eot'); src: url('../../../includes/fonts/fontello_12/fontello.eot#iefix') format('embedded-opentype'),  url('../../../includes/fonts/fontello_12/fontello.woff2') format('woff2'),  url('../../../includes/fonts/fontello_12/fontello.woff') format('woff'),  url('../../../includes/fonts/fontello_12/fontello.ttf') format('truetype'),  url('../../../includes/fonts/fontello_12/fontello.svg#fontello') format('svg'); font-weight: normal; font-style: normal; } .DIR_1 { direction: rtl; } .DIR_2 { direction: ltr; } .DIR_1 * { font-family: IRANYekanX; } .DIR_2 * { font-family: IRANYekanX_EN; } html { font-size: 16px; line-height: 1.5; tab-size: 4; } body { background: #fff; } *, :before, :after { margin:0; box-sizing: border-box; border-width: 0; border-style: solid; } noscript { position: fixed; width: 100%; height: 100%; color: #FFF; background: #993333; text-align: center; padding: 1rem; z-index: 999; } strong, b { font-weight: bold; } hr { border:0; border-top: 1px solid #ccc; } a { text-decoration: none; color: #315FE1; } a:hover { color: #E6A200; } input, select, textarea { width: 100%; height: 2.2rem; border: 1px solid #cacaca; border-radius: 0.25rem; color: #404040; padding: 0 0.3rem; } select option:disabled { color:#999; } textarea { height: 6rem; } input:focus, select:focus, textarea:focus { } .htmlbody * { box-sizing: border-box; } .htmlbody { min-height:100vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .Outer-Section { width:100%; } .Inner-Section { margin:0 auto; } .Outer-Body { flex: 1;  background: #fff; } .Inner-Body { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; overflow: hidden; padding-top: 1rem; padding-bottom: 1.5rem; } .BodyCenter { flex: 3 0 60%; } .BodyRight { flex: 1 0 20%; background: #ddd; } .BodyLeft { flex: 1 0 20%; background: #ddd; } .DIR_2 .BodyCenter, .DIR_2 .BodyRight, .DIR_2 .BodyLeft { } .Inner-Body .DivContent { padding:2rem 0.5rem; background:#fff; } .Inner-Body .BodyCenter img { max-width: 100%; padding: 0; background: #fff; border: 1px solid #C2D7D5; border-radius: 0.8rem; } .ScrollUP { width: 3rem; height: 1.5rem; opacity: 0.7; position: fixed; bottom: 0px; display: none; text-indent: 50rem; background: #49d4cb url(../../_tmp_common/images/up.png) no-repeat center center; cursor: pointer; transition:all 0.5s; } .DIR_1 .ScrollUP { left: 0; border-top-right-radius: 0.65rem; } .DIR_2 .ScrollUP { right: 0; border-top-left-radius: 0.65rem; } .ScrollUP:hover { opacity: 1; } .CaptchaImage { width: 100px; height: 33px; vertical-align: bottom; padding: 0px !important; border: 0 !important; border-radius: 4px; } .clear { clear: both; } .Text_Red, a.Text_Red { color: #F00; } .Text_Alert, a.Text_Alert { color: #F00; font-weight: bold; } .LinkBox { width: fit-content; font-size: 0.9rem; border-radius: 0.6rem; border: 1px solid #c2d7d5; padding:0.1rem 0.5rem; color: #E6A200; } .LinkBox a { color: #E6A200; } .BankLogo { width: 3rem; height: 3rem; padding: 0; border: 0; } .FieldGroup .Field_Payment { float: right; width: calc(100% - 60px); direction: ltr; } .FieldGroup .Payment { float: right; width: 54px; height: 33px; cursor: pointer; color: #fff; background: #1097d2; border: 1px solid #0d78b6; border-radius: 5px; margin-right: 4px; text-align: center; transition: all 0.5s; } .FieldGroup .Payment:hover { background: #1097be; } .video_1 { width:500px; max-width:100%; border:1px solid #207abc; border-radius:10px; overflow:hidden; } .Height1 { height:15px; }  .Home-Wrapper { width: 100%; } .Home-Wrapper .Outer-Section { position:relative; z-index:0; padding-top:3.5rem; padding-bottom: 3rem; } .Home-Wrapper .Inner-Section { background: inherit; } .Home-Wrapper .Inner-Section .DivContent { padding:0; background:none; box-shadow:none; } .Home-Wrapper .Inner-Section>.Title { display: flex; margin-bottom: 2rem; justify-content: center; } .Home-Wrapper .Inner-Section>.Title, .Home-Wrapper .Inner-Section>.Title a { font-size: 1.3rem; line-height: 2.1rem; font-weight:bold; color:#9E5F24; } .Home-Wrapper .Inner-Section .ViewAll { width:100%; height:2.5rem; margin-top: 0.6rem; position: relative; text-align: center; } .Home-Wrapper .Inner-Section .ViewAll:before { content: ''; width:80%; position: absolute; right: 10%; top: 1.25rem; border-top: 1px dashed #FFD12F; } .Home-Wrapper .Inner-Section .ViewAll a { line-height: 2.5rem; font-size:0.8rem; font-weight:normal; padding:0.3rem 0.8rem; border-radius:2rem; color:#000; background:#FFD12F; transition:all 0.5s; position: relative; } .Home-Wrapper .Inner-Section .ViewAll a:hover { box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); } .Home-Wrapper .Inner-Section .ClassList2 .Item { background: #FFF; } .Outer-Banner1 { background: #F2FEFF; padding:0 !important; } .Inner-Banner1 { padding-top: 2rem; padding-bottom:2rem; } .Outer-Bannerlink { height: 100%; } .Outer-Bannerlink .Inner-Bannerlink { height: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; gap:1rem; } .Inner-Bannerlink .Item { display: flex; text-align:center; } .Inner-Bannerlink .Item a { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-grow: 1; color:#fff; } .Inner-Bannerlink .Item img { width:10rem; } .Inner-Bannerlink .Item span { color:#fff; background:#30D5C8; border-radius:0.7rem; padding:0 0.5rem; } .Outer-Banner3 { background: #F5F4F2; padding-top:0 !important; padding-bottom: 2rem !important; } .Inner-Banner3 { } .Outer-Banner5 { background: #fff; } .Outer-Banner5:before {  } .Inner-Banner5 { } .Outer-Banner7 { background: #F2FEFF; padding-top: 2rem !important; padding-bottom:1rem !important; } .Outer-Banner9 { background: #fff; position: relative; } .Inner-Banner9 { } .FeedbackList { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; margin:0 auto; } .FeedbackList .Item { width:49%; border-right:4px solid #FFD12F; padding-right:1rem; margin-bottom:1.8rem; } .FeedbackList .Item .Text { color:#000; text-align:justify; } .FeedbackList .Item .Name { color:#49D4CB; font-weight: bold; } .Banner_1 { position: relative; margin: 0 5%; margin-bottom:1rem; display: flex; flex-direction: row; flex-wrap: nowrap; } .Banner_1 img { width: 100%; height: 100%;  } .Outer-Foot { background: #1D5F87; position: relative; overflow:hidden; } .Inner-Foot { width: 95%; margin: 0 auto; padding: 25px 0; color: #FFF; line-height: 24px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: start; } .Inner-Foot>div { padding: 10px 0; } .Inner-Foot a { color: #FFD12F; } .Inner-Foot a:hover { color: #E2B827; } .Inner-Foot hr { border:0; border-top: 1px solid #8b969d; } .Outer-Foot2 { text-align: center; background: #1C577B; position: relative; } .Inner-Foot2 { } .Inner-Foot2 a { color: #d7d2be; font-size: 0.7rem; } .Inner-FAQ .Question { line-height: 2rem; color:#CEC64B; cursor: pointer; margin:0.5rem 0.5rem 0 0.5rem; font-size: 0.93rem; } .Inner-FAQ .Question svg { width:1rem; vertical-align: middle; margin-left: 0.3rem; fill:#FFB609; } .Inner-FAQ .Answer { display: none; line-height: 1.5rem; color:#ccc; padding: 0.3rem 2.1rem 1.5rem 0; font-size: 0.93rem; } .DivTags { line-height: 2rem; margin-top: 0.7rem; overflow: hidden; } .DivTags a { font-size:0.9rem; } .DivShare { line-height: 2rem; margin-top: 1.5rem; padding:0.7rem; background: #F5F5F5; border-right: 5px solid #FFD12F; text-align:left; overflow: hidden; } .DivShare .IcnShare { width: 1.7rem; height: 1.7rem; display: inline-block; margin: 0 2px; vertical-align: middle; background-color: #fff; background-size: cover; } .DivShare .IcnShare.facebook { background-image: url(../../_tmp_common/images/Share/facebook.png); } .DivShare .IcnShare.gmail { background-image: url(../../_tmp_common/images/Share/gmail.png); } .DivShare .IcnShare.googleplus { background-image: url(../../_tmp_common/images/Share/googleplus.png); } .DivShare .IcnShare.telegram { background-image: url(../../_tmp_common/images/Share/telegram.png); } .DivShare .IcnShare.twitter { background-image: url(../../_tmp_common/images/Share/twitter.png); } .DivShare .IcnShare.yahoo { background-image: url(../../_tmp_common/images/Share/yahoo.png); } .DivShare .IcnShare.bale { background-image: url(../../_tmp_common/images/Share/bale.png); } .DivShare .IcnShare.eitaa { background-image: url(../../_tmp_common/images/Share/eitaa.png); } .DivShare .IcnShare.igap { background-image: url(../../_tmp_common/images/Share/igap.png); } .DivShare .IcnShare.soroush { background-image: url(../../_tmp_common/images/Share/soroush.png); } .DivComments { margin-top:30px; } .DivComment { padding:20px; color:#666; } .DivCommentTitle { border-bottom: 1px solid #468AC7; text-align:left; font-size:16px; } .DivCommentDesc { background:#fdfdfd; padding:20px; box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.15); } .AnswerBox { color:#468AC7; border-right: 4px solid #468AC7; margin-top: 20px; margin-right: 20px; padding:0 10px; line-height: 20px; }  .Outer-NewsSlider { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; } .Outer-NewsSlider .Inner-NewsSlider { width:calc(100% - 6rem); overflow: hidden; } .Outer-NewsSlider .NewsSliderArrow { width:3rem; z-index:9; display: flex; justify-content: center; align-items: center; } .Outer-NewsSlider .NewsSliderArrow svg { fill:#ffd12f; cursor:pointer; } .Outer-NewsSlider .NewsSliderList { position: relative; display: flex; transition: 0.5s; } .Outer-NewsSlider .NewsSliderItem { max-height: 15rem; flex: 1 0 48%; margin:0 1%; background:#eef3ff; border-radius: 0.7rem; overflow: hidden; } .Outer-NewsSlider .NewsSliderItem .Lnk { display: flex; flex-direction: row; align-items: stretch; } .Outer-NewsSlider .NewsSliderItem .PicSmall { flex: 1 0 40%; height: 15rem; border-radius:0.6rem; padding:0; } .Outer-NewsSlider .NewsSliderItem .PicSmall img { width: 100%; height: 100%; } .Outer-NewsSlider .NewsSliderItem .box { flex: 1 0 60%; padding:0.8rem; color:#000; font-size: 0.9rem; line-height: 1.6rem; } .NewsList { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: stretch; } .NewsList .NewsItem { flex: 1; max-height:25rem; margin: 0 0.5rem 1.5rem 0.5rem; border: 1px solid #f8faff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.05); border-radius:0.6rem; background:#F5FCFC; overflow:hidden; } .NewsList .NewsItem .Lnk { display: flex; flex-direction: column; } .NewsList .NewsItem .PicSmall { width: 100%; height: 14rem; border-radius:0.6rem; padding:0; } .NewsList .NewsItem .PicSmall img { width: 100%; height: 100%; object-fit: cover; } .NewsList .NewsItem .box { width: auto; min-height: 5rem; margin:0; padding:0.6rem; } .NewsList .NewsItem .Title { color: #306167; font-size:1.1rem; line-height: 1.7rem; padding:0.6rem 0; } .NewsList .NewsItem .Abstract, .NewsList .NewsItem .Abstract p, .NewsList .NewsItem .Abstract span { color: #7E7E7E; font-size:1.0rem; line-height: 1.7rem; } .NewsList .NewsItem .rutitr { color: #9E5F24; font-size:0.8rem; background:inherit; } .NewsList2 .NewsItem { border:0; border-bottom: 1px solid #D8D8D8; padding-bottom: 0.6rem; } .NewsList2 .NewsItem .box { width: 100%; }  .Outer-Head { background:#79c6f4; border-bottom:0.15rem solid #974d09; } .Outer-Head.Fix, .Outer-Head.bgFix { } .Inner-Head { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .Inner-Head .Logo { width:14rem; height: 7rem; margin-top:0.3rem; margin-bottom:0.3rem; } .Inner-Head .Logo a { color:#167388; } .Inner-Head .Logo img { float:right; height:100%;  } .Inner-Head .Logo .title { float:right; font-size: 1.5rem; line-height: 2.1rem; font-weight: bold; padding-top: 0.2rem; } .HeadPanel { width:21rem; height: 6rem; line-height: 1.7rem; display: flex; flex-direction: column; justify-content: space-between; align-items: end; margin-top: 0.8rem; } .Inner-HeadPanel { width: 100%; display: flex; justify-content: end; }  .Outer-TopMenu { height:2rem; align-self: flex-end; } .Inner-TopMenu { } .Inner-TopMenu>ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: start; gap: 1.5rem; list-style: none; padding: 0; margin: 0; } .Inner-TopMenu>ul>li { position: relative; } .Inner-TopMenu>ul>li:after {  content: '/';  position: absolute;  left: -0.8rem;  bottom: 0; color:#F5A356; line-height: 2rem; } .Inner-TopMenu>ul>li:last-child:after {  content: ''; } .Inner-TopMenu>ul a { display:block; color:#11687F; font-size: 1.1rem; line-height:2rem; white-space: nowrap; transition: 0.5s; } .Inner-TopMenu>ul>li { position: relative; } .Inner-TopMenu>ul>li>ul { width: 15rem; max-height: calc(100vh - 1rem); visibility: hidden; opacity: 0; overflow: auto; padding: 1.1rem 0.8rem; background: #167388; background: linear-gradient(180deg, #167388 0%, #111111 100%); border-top: 1px solid #F5A356; border-radius: 0 0 0.7rem 0.7rem; list-style: none; position: absolute; top: 2rem; z-index: 9; transition: 0.5s; } .DIR_1 .Inner-TopMenu>ul>li>ul { right: 0; } .DIR_2 .Inner-TopMenu>ul>li>ul { left: 0; } .Inner-TopMenu>ul li:hover>ul { visibility: visible; opacity: 1; } .Inner-TopMenu>ul li:hover ul a { line-height:2rem; } .Inner-TopMenu>ul>li>ul a { } .Inner-TopMenu>ul>li li a { color:#fff; padding: 0 0.5rem; line-height:2.3rem; } .Inner-TopMenu>ul>li>ul>li:first-child:after { content: ''; position: absolute; top: 0; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.65rem solid #F5A356; } .DIR_1 .Inner-TopMenu>ul>li>ul>li:first-child:after { right: 1rem; } .DIR_2 .Inner-TopMenu>ul>li>ul>li:first-child:after { left: 1rem; } .Inner-TopMenu>ul>li>a {  position: relative; overflow: hidden; padding:0; } .DIR_1 .Inner-TopMenu>ul>li>a { } .Inner-TopMenu>ul>li>a:after {  content: '';  width: 100%;  height: 1px;  position: absolute;  left: -100%;  bottom: 0;  transition: all 0.3s;  border-top: 1px solid #11687F; } .Inner-TopMenu>ul>li:hover>a:after {  left: 0; } .TopMenuToggle-Icon { display: none; color:#fff; text-align: center; cursor:pointer; padding-top:0.2rem; z-index:9; } .DIR_1 .TopMenuToggle-Icon { } .TopMenuToggle-Icon:hover { } .TopMenuToggle-Icon .icn { } .TopMenuToggle-Icon .icn:before { content: '\f008'; font-size: 1.1rem; font-weight: bold; color: #fff; vertical-align: middle; } .TopMenuToggle-Icon .txt { font-size: 0.7rem; } .TopMenuToggle { width: 100%; height: 100vh; padding: 0; background: #4a5759; position: fixed; top: 0; left: -100%; z-index: 1000; overflow: auto; } .TopMenuToggle .Close { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; font-weight: bold; position: absolute; top: 0.5rem; left: 0.5rem; text-align: center; border-radius: 0.2rem; color: #fff; background: #d24848; border: 1px solid #aa3939; cursor: pointer; transition: 0.5s; } .TopMenuToggle .Close:hover { background: #aa3939; } .TopMenuToggle a { display: block; color: #FFF; white-space: nowrap; line-height: 1.5rem; transition: all 0.4s ease; } .TopMenuToggle a:hover { color: #ffb609 !important; } .TopMenuToggle .Usr { text-align:center; border-bottom: 1px solid #ffb609; margin: 10px 5px; color:#ffb609; } .TopMenuToggle .Usr>div { display:inline-block; margin:0 0.3rem; } .TopMenuToggle .Usr>div a { line-height: 2rem; } .TopMenuToggle>ul { list-style: none; padding: 0 2rem; margin:0; } .TopMenuToggle>ul.mnu { height: calc(100vh - 9rem); overflow: scroll; } .TopMenuToggle>ul>li a { position: relative; } .TopMenuToggle>ul>li>a:after { content: ''; position: absolute; top: 1.2rem; right: -1.1rem; width: 0.5rem; height: 0.5rem; background: none; border: 1px solid #ffb609; transition: all 0.4s ease; } .TopMenuToggle>ul>li>a:hover:after { background: #ffb609; } .TopMenuToggle>ul>li>a { font-size: 0.9rem; padding-top: 0.7rem; }  #UserBox { max-width: 12rem; flex: 3; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: start; background:#9E5F24; border: 1px solid #8B531F; border-radius:0.7rem; } #UserBox #Login { flex: 1; text-align: center; color: #DC9D62; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; } #UserBox>div a { color:#fff; font-size: 0.9rem; } #UserBox #Panel { flex: 1; height: 100%; position: relative; transition:all 0.5s; color: #333; font-size: 0.9rem; cursor:pointer; border-bottom-left-radius: 0.8rem; border-bottom-right-radius: 0.8rem; padding:0 0.3rem; } #UserBox #Panel:hover { background: #eec32c; } #UserBox #Panel .UserName { height: 100%; overflow:hidden; text-align:center; } #UserBox #Panel .UserImg { display:none; width: 1.7rem; height:1.7rem; position: absolute; top: 0; left: 0; border-radius:50%; background: url(../../../images/personnel.gif); background-size:100% 100%; overflow:hidden; } #UserBox #Panel2 { width: 96%; min-width:10rem; height:0; visibility:hidden; opacity:0; transition:all 0.5s; border:1px solid #dbb328; border-radius:5px; background: #eec32c; position:absolute; top:2.1rem; left:2%; overflow:hidden; z-index:9; } #UserBox #Panel2:before { } #UserBox #Panel:hover #Panel2 { height:8.3rem; visibility:visible; opacity:1; } #UserBox #Panel2 ul { list-style: none; padding: 0; } #UserBox #Panel2 li { border:0; border-bottom:1px solid #ffb55e; transition:all 0.5s; padding:0 10px; text-align:right; } #UserBox #Panel2 li:hover { background: #ffb55e; } #UserBox #Panel2 li a { font-size:0.8rem; line-height:2rem; }  #AlertBox { flex: 1; margin:0 0.2rem; vertical-align: top; position:relative; cursor:pointer; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background:#d24848; padding:0 0.3rem; } #AlertBox:hover { background:#aa3939; } #AlertBox:before { content: '\e81a'; font-size: 1rem; color: #fff; position: absolute; top: 0; } #AlertBox>span { display:block; text-align:left; color:#fff; font-size: 0.8rem; } #AlertBox2 { width:12.5rem; height: 0; visibility:hidden; opacity:0; transition:all 0.5s; position:absolute; top:2.1rem; left:-5.05rem; border:1px solid #9f3131; border-radius: 5px; background:#aa3939; cursor:default; overflow:auto; z-index:9; } #AlertBox:hover #AlertBox2 { height:250px; visibility:visible; opacity:1; } #AlertBox2:before {  } #AlertBox2 div { text-align:right; border-bottom:1px solid #9f3131; transition:all 0.5s; } #AlertBox2 div:hover { background: #9f3131; } #AlertBox2 div a { display:block; color:#e3e3e3; padding:5px; position:relative; font-size: 0.7rem; } #AlertBox2 span { line-height: 1.1rem; font-size:0.8rem; position:absolute; top:0.3rem; left:0; text-align:center; color:#e3e3e3; background:#8a3636; }  .Slider-Toggle { display: none; padding: 20px 10px 0 10px; color:#fff; } .Outer-Slider {  overflow: hidden; } .Inner-Slider, .Inner-Slider .Slider { width: 1100px; height: 300px; } .Inner-Slider { overflow:hidden; position: relative; top: 0; left: 0; } .Inner-Slider .Slider { position: relative; left: 0; top: 0; overflow: hidden; } .Inner-Slider .filterLayer {  } .Inner-Slider img { width: 45%; height: 100%; float:right; margin-right:3%; border:1px solid #D4E6E8; border-radius:0.7rem; object-fit: cover; } .Inner-Slider .TitleSlider { width: 49%; float:left; margin-left:3%; overflow:hidden; padding-right:1rem; } .Inner-Slider .TitleSlider>div { line-height: 30px; color:#9E5F24; font-weight: 700; font-size: 1.1rem; } .Inner-Slider .LabelSlider { width: 49%; text-align:justify; float:left; margin-left:3%; color: #666; } .Inner-Slider .LabelSlider a { color: #666; } .Inner-Slider .LabelSlider>div, .Inner-Slider .LabelSlider>span { padding-right:1rem; } .Inner-Slider .LabelSlider>div { display: inline; color:#fff; background:#167388; padding:0.4rem 1rem; font-size: 1.3rem; border-radius: 0.4rem; box-shadow: -3px 3px 6px 0px rgba(0, 0, 0, 0.5); } .Inner-Slider .LabelSlider>span { display:block; color:#666; margin-top: 1rem; } .Inner-Slider .LabelSlider>span p { } .Inner-Slider ._Arrow { display:block; width:20px; height:40px; position:absolute; top:0; left:0; cursor:pointer; } .Inner-Slider ._Arrow:hover { opacity:0.8; } .Inner-Slider .Prev_Arrow {  left:0; } .Inner-Slider .Next_Arrow {  right:0; } .Inner-Slider ._Arrow path { fill:#F5A356; } .Inner-Slider .Navigator { position:absolute; bottom:10px; } .DIR_1 .Inner-Slider .Navigator { } .DIR_2 .Inner-Slider .Navigator { } .DIR_2 .Inner-Slider .Navigator svg { width:100%; height:100%; position:absolute; top:0; left:0; } .Inner-Slider .Navigator .i {width:16px; height:16px;position:absolute; cursor:pointer;} .Inner-Slider .Navigator .i .b {fill:#fff; fill-opacity:0.5; stroke:#000; stroke-width:400; stroke-miterlimit:10; stroke-opacity:0.5;} .Inner-Slider .Navigator .i:hover .b {fill-opacity:.7;} .Inner-Slider .Navigator .iav .b {fill-opacity:1;} .Inner-Slider .Navigator .i.idn {opacity:.3;} .SliderReadMore { color: #FFF; font-size: 16px; position: absolute; bottom: 0px; } .DIR_1 .SliderReadMore { right: 29px; } .DIR_2 .SliderReadMore { left: 29px; } @media (max-width: 700px) { .Inner-Slider, .Inner-Slider .Slider { width: 700px; height: 230px; } .Inner-Slider .TitleSlider { width: 93%; } .Inner-Slider img { display:none; } .Inner-Slider .LabelSlider { width: 93%; } } @media (max-width: 600px) { .Inner-Slider, .Inner-Slider .Slider {  } .Inner-Slider .LabelSlider>div { font-size: 1.7rem; } } @media (max-width: 500px) {  }  .DivBoxMain { } .DivBreadcrumbs { width: max-content; font-size: 0.8rem; line-height:1.5rem; font-weight:normal; color: #C2D7D5; margin-bottom:0.4rem; } .DivBreadcrumbs a { display: inline-block; vertical-align: middle; font-size: 0.9rem; color: #717171; text-shadow: -2px 3px 3px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; margin: 0 0.5rem; } .DivBreadcrumbs a:after {  content: '';  width: 100%;  height: 1px;  position: absolute;  left: -100%;  bottom: 0;  transition: all 0.3s;  border-top: 1px solid #C2D7D5; } .DivBreadcrumbs a:hover:after {  left: 0; } .DivBoxMainTitle { position:relative; } .DivBoxMainTitle h1 { font-size: 1.5rem; font-weight: normal; line-height:2.5rem; color:#000; margin-bottom:0.8rem; text-shadow: -2px 3px 3px rgba(0, 0, 0, 0.1); } .DivBoxMainTitle .Back { width: 3.1rem; height: 2rem; background: #fff url(../../_tmp_common/images/restore.png) no-repeat center; border: 1px solid #167388; border-radius: 0.3rem; overflow: hidden; position:absolute; left:0; bottom:0.3rem; transition:all 0.5s; } .DivBoxMainTitle .Back:hover { background-color: #5ba0d0; } .DivBoxMainTitle .Back a { display: block; height:100%; } .DivBoxMainCont { color: #002248; line-height: 2rem; text-align: justify; } .DivBoxMainCont .txtPublish { font-size: 0.9rem; color: #717171; } .DivBoxMainCont ul { list-style: disc; padding-right: 2rem; }  .DivBoxBlock { padding:0.7rem; padding-top: 1.5rem; padding-right: 2rem; background: #F5F5F5; border-right: 5px solid #FFD12F; overflow: hidden; } .DivBoxBlock form { background: #F5F5F5; } .DivBoxBlockTitle { font-size: 1.3rem; font-weight: normal; line-height: 2.5rem; color: #000; margin-bottom: 0.8rem; text-shadow: -2px 3px 3px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #C2D7D5; } .DivBoxBlockCont { } .DivBodyRight .DivBoxBlockTitle { background: #468AC7; color: #fff; font-size: 18px; line-height:40px; font-weight:blod; padding:0 10px; } .DivBodyRight .DivBoxBlockCont { background: #5ba0d0; color: #e6f5ff; padding:10px; }  .Outer-ContArchive { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .ItemContArchive { width:49%; height:15rem; margin-bottom: 2rem; position: relative; background:#fff; border:1px solid #C2D7D5; border-radius:0.6rem; overflow:hidden; } .ItemContArchive>a { display: block; height:100%; padding: 1rem; } .ItemContArchive .Image { float: left; width: 13rem; height: 75%; overflow: hidden; border-radius: 0.5rem; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2); } .ItemContArchive .Image img { object-fit: cover; width: inherit; height: 100%; border: 0; padding: 0; } .ItemContArchive .Rutitr, .ItemContArchive .Title, .ItemContArchive .Abstract { width: calc(100% - 13.5rem); display: inline-block; font-size: 1rem; line-height:1.5rem; font-weight:normal; vertical-align: top; text-align:right; } .ItemContArchive .Rutitr { font-size: 0.8rem; color: #E6A200; } .ItemContArchive .Title { color: #315FE1; font-weight: normal; } .ItemContArchive .Icon { width:1.5rem; border-radius:0.6rem; margin-left:0.2rem; border: 0; padding: 0; background: inherit; vertical-align: middle; } .ItemContArchive .Abstract { color: #717171; } .ItemContArchive .Abstract * { font-size: 0.9rem; line-height: inherit; } .ItemContArchive .Bar { height: 2rem; font-size: 0.7rem; color: #999; background: #FFF; position: absolute; bottom: 0; left: 1rem; right: 1rem; } .ItemContArchive .ReadMore { float:left; color: #000; background: #FFD12F; border-radius: 0.5rem; font-size: 0.8rem; line-height: 1.5rem; padding: 0 1rem; }  .DivPaging { height: 35px; line-height: 35px; margin-top: 40px; text-align: center; color: #167388; background: #E7F1F3; border: 1px solid #DAE5E8; border-radius: 4px; position: relative; } .DivPaging .paging1 { padding: 0 10px; } .DivPaging .arrow { font-size: 14px; padding: 0 5px; margin: 0 2px; color: #036; border: 1px solid #CCC; } .DivPaging .arrow:hover { background: #B3DCEA; } .DivPaging span.arrow { color: #666; } .DivPaging span.arrow:hover { color: #666; background: inherit; } .DivPaging .current, .DivPaging .current:hover { background: #FFF !important; } .DivPaging .paging2 { font-size: 0.9rem; position: absolute; top: 0; right: 0.3rem; } .DivPaging .paging2 select { font-size: 12px; width: 40px; height: 20px; line-height: 20px; background: inherit } .DivPaging .RowCount { font-size: 0.9rem; position: absolute; top: 0; left: 0.3rem; } .TechPage .Prsn { width:11rem; border:solid 1px #999; padding:3px; } .DIR_1 .TechPage .Prsn { float:left; } .DIR_2 .TechPage .Prsn { float:right; } .SlctDepartment { width:max-content; min-width:300px; background:#00a9ab; padding:10px 30px; margin-bottom:30px; border-radius:5px; } .SlctDepartment label { color:#fff; } .TechList { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; } .TechItem { width: 13rem; text-align:center; padding:0; transition: all 0.5s; } .TechItem2 { margin-bottom:5rem; } .Home-Wrapper .Inner-Section .TechItem2 { margin-bottom:0; } .TechItem .Lnk { display: flex; flex-direction: column; align-items: center; } .TechItem .Img { width:90%; max-width:10rem; max-height:10rem; border:1px solid #eef3ff !important; border-radius:50% !important; transition: all 0.5s; } .TechItem:hover .Img { filter: grayscale(1); box-shadow: -1px 4px 10px 0px rgba(0, 0, 0, 0.2); } .TechItem .Name { height: 3.5rem; display: flex; align-items: center; color:#000; font-size: 1rem; line-height:1.5rem; margin-top:0.3rem; margin-bottom:0.2rem; } .TechItem .Desc { color:#000; background: #FFD12F; border-radius: 0.5rem; font-size: 0.8rem; line-height:1.5rem; padding: 0 1rem; } .tech_cls { margin:2px; padding:0 4px; background:#b3a7a7; border-radius:5px; color:#fff; font-size:12px; } .tech_cls_2 { background:#918484; } .tech_cls_3 { background:#8ab5b4; } .tech_cls_4 { background:#819594; } .tech_cls_5 { background:#919581; } .tech_cls_6 { background:#8f8776; } .tech_cls_7 { background:#819ea0; } .tech_cls_8 { background:#9e93ae; } .tech_cls_9 { background:#838ea6; } .tech_cls_10 { background:#6d8d99; } .tech_cls_11 { background:#8e98aa; } .tech_cls_12 { background:#606e6f; } .tech_cls_13 { background:#849995; } .tech_cls_14 { background:#ae8787; } .tech_cls_15 { background:#b19984; } .tech_cls_16 { background:#99aaa0; } .tech_cls_17 { background:#9b778c; } .tech_cls_18 { background:#8f8eaa; }  .Outer-IcnLMS { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; } .IcnLMS-Item { margin:0.5rem; } .IcnLMS-Item a { } .IcnLMS-Item .img { width:3.5rem; height:3.5rem; margin: 0 auto; background-size: cover; border-radius: 50%; border: 1px solid #E6A200; } .IcnLMS-Item .txt { font-size:0.6rem; line-height:1.5rem; color:#175664; text-align:center; } .Outer-NewsLms { font-size:0.9rem; } .NewsLms-Item { } .NewsLms-Item a { color: #315FE1; } .NewsLms-Item a:hover { color: #E6A200; } .Archive-NewsLms { width: fit-content; border-radius: 0.6rem; border: 1px solid #c2d7d5; padding:0.1rem 0.5rem; margin-top:1rem; } .Archive-NewsLms a { color: #E6A200; }  .ClassCategory { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; } .ClassCategory .Item { width: 24%; height:9rem; margin:0.5rem 0; padding:0.3rem; text-align:right; position:relative; background: #fff; border:1px solid #dddfe6; border-radius: 0.3rem; transition: all 0.7s; } .ClassCategory .Item a { display:block; height:100%; border-radius: 0.3rem; background: linear-gradient(90deg, #9F7171 0%, #462828 100%); transition: all 0.5s; overflow:hidden; position: relative; } .ClassCategory .Item a:hover {  } .ClassCategory .Item .Title { font-size:1.1rem; line-height:1.7rem; padding:0.9rem; position:absolute; right:0; bottom:0; color:#fff; border-radius: 0.3rem 0 0 0; transition: all 0.7s; text-shadow: -2px 2px 1px #081239; } .ClassCategory .Item a:hover .Title { transform: scale(1.1); padding: 0.9rem 2.7rem; background:#167388; } .ClassCategory .Item img { object-fit: cover; width: 100%; height: 100%; opacity: 0.4; position: absolute; left: 0; top: 0; } @media (max-width: 900px) { .ClassCategory .Item { width: 49% !important; } } @media (max-width: 500px) { .ClassCategory .Item { width: 95% !important; } }  .Outer-LinkSlider { } .Inner-LinkSlider { height:10rem; position:relative; } .Inner-LinkSlider .LinkSlider { width:100%; height:100%; } .Inner-LinkSlider ._Arrow {display:block;position:absolute;cursor:pointer; width:3rem;height:3rem;top:0px;} .Inner-LinkSlider .Prev_Arrow {left:0px;} .Inner-LinkSlider .Next_Arrow {right:0px;} .Inner-LinkSlider ._Arrow svg {position:absolute;top:0;left:0;width:100%;height:100%; fill:#FFD12F; }  .select2-selection__rendered { line-height: 35px !important; white-space: normal !important; font-size: 13px; } .select2-selection__arrow { width: 16px !important; height: 33px !important; background: #ddd !important; } .select2-selection { border: 1px solid #cacaca !important; border-radius: 5px !important; transition: all 0.2s; } .select2-selection--single { height: 35px !important; overflow: hidden !important; } .select2-selection--multiple { height: 100px !important; } .select2-container--focus .select2-selection, .select2-container--open .select2-selection { border-color: #66afe9 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); background: #f9f9f9 !important; } .select2-selection.invalid { border-color: #f55252 !important; } .select2-dropdown { background: #f9f9f9 !important; } .select2-search { text-align:center; } .select2-search__field { width:95% !important; border-radius: 5px; } .select2-results { font-size:13px; }  .Body3 .FieldGroup { width: 100% !important; margin:0 !important; } .TwoFieldsFifty, .ThreeFieldsFifty { display: flex; justify-content: space-between; } .TwoFieldsFifty .FieldGroup { width: 48% !important; margin: 0 !important; } .ThreeFieldsFifty .FieldGroup { width: 32% !important; margin: 0 !important; } .FieldGroup label { display: block;  font-weight: normal; font-size: 13px; line-height: 30px; margin-top: 10px; color: #444; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .FieldGroup label span.invalid { position: absolute; left:0; color: #f55252; font: inherit; font-weight: normal; padding-right:5px; } .FieldGroup input, .FieldGroup select, .FieldGroup textarea, .Field_Size1, .Field_Label { display: block; border: 1px solid #cacaca; border-radius: 5px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; background:#fff; color: #444; width: 100%; height: 35px; padding: 0 10px; box-sizing : border-box; transition: all 0.2s;  font-weight: normal; font-size: 13px; line-height: 35px; vertical-align: middle; } .Field_Size1 { min-width:50px; max-width: 100px; display: inline-block !important; } .FieldGroup input:focus, .FieldGroup select:focus, .FieldGroup textarea:focus, .Field_Size1:focus { border-color: #66afe9; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); outline: 0 none; background: #f9f9f9; } .FieldGroup .invalid, .FieldGroup input:focus:invalid, .FieldGroup select:focus:invalid, .FieldGroup textarea:focus:invalid, .Field_Size1:focus:invalid { border-color: #f55252 !important; } .FieldGroup input:disabled, .FieldGroup select:disabled, .FieldGroup textarea:disabled, .Field_Label, .FieldGroup input[type=text]:read-only, .FieldGroup input[type=email]:read-only, .FieldGroup input[type=tel]:read-only, .FieldGroup textarea:read-only { background: #f3f3f3; } .Field_Label { overflow: hidden; white-space: nowrap; cursor: text; } .FieldGroup textarea { height: 80px; line-height: 24px; } .FieldGroup .btn_OK { height: 40px;  font-weight: bold; font-size: 14px; line-height: 40px; cursor: pointer; color: #FFF; padding: 0; margin-top: 35px; background: #1097d2; background-image: linear-gradient(to bottom, #25a5dc, #1097d2 66%, #0f8abf); border-color: #0d78b6 #0d78b6 #0b689e; text-shadow: 0 1px rgba(0, 0, 0, 0.5); position:relative; } .FieldGroup_Report .btn_OK { height: 35px;  font-weight: bold; font-size: 13px; line-height: 35px; margin-top: 30px; } .FieldGroup .btn_OK:focus, .FieldGroup .btn_OK:hover { background: #1097be; background-image: linear-gradient(to bottom, #25a5c8, #1097be 66%, #0f8aab); border-color: #0d78a2 #0d78a2 #0b688a; text-shadow: 0 1px rgba(0, 0, 0, 1); } .FieldGroup .btn_OK:disabled { background: #8ea8b3; border-color: #bbb; } .BoxMsgError .FieldGroup { float: none; display: inline-block; width: 100px; } .BoxMsgError .FieldGroup .btn_OK { margin: 0px; margin-right: 5px; } .FieldGroup .Field_Time { direction: ltr; } .FieldGroup .Field_Calendar, .FieldGroup .Field_Browse, .FieldGroup .Field_Search, .FieldGroup .Field_Download { float: right; width: calc(100% - 45px); } .FieldGroup .Field_BrowseDownload { width: calc(100% - 90px); } .FieldGroup .Field_Calendar, .FieldGroup .Field_Browse, .FieldGroup .Field_Download { direction: ltr; } .FieldGroup .NoButtons { float: none; width: 100%; } .FieldGroup .Calendar, .FieldGroup .Browse, .FieldGroup .Search, .FieldGroup .Download { float: right; width: 39px; height: 33px; cursor: pointer; background: #EEE; border: 1px solid #CCC; border-radius: 5px; margin-right: 4px; text-align: center; transition: all 0.5s; } .FieldGroup .Calendar:hover, .FieldGroup .Browse:hover, .FieldGroup .Search:hover, .FieldGroup .Download:hover { background: #CCC; } .FieldGroup .Calendar:before { content: '\e801'; font-size: 150%; color: #0894d7; line-height: 32px; } .FieldGroup .Browse:before { content: '\e802'; font-size: 150%; color: #0894d7; line-height: 35px; } .FieldGroup .Search:before { content: '\f50d'; font-size: 150%; color: #0894d7; line-height: 35px; } .FieldGroup .Download:before { content: '\E81C'; font-size: 150%; color: #0894d7; line-height: 35px; } .FieldGroup .Field_Captcha { float: right; width: calc(100% - 110px); direction: ltr; } .FieldGroup .CaptchaImage { float: left; width: 100px; height: 33px; border-radius: 5px; border: 1px solid #999 !important; } .FieldGroup .Field_CheckBox, .Field_CheckBox { width: 15px; height: 15px; display: inline-block; border: none; } .FieldGroup .MaskNumber, .FieldGroup .MaskMoney { direction: ltr; } .tbGrid .FieldGroup { min-width:90px; vertical-align:middle; margin:0; } @media (min-width: 500px) { .FieldGroup { width: 70%; } .FieldGroup_Report { float: right; width: 32%; margin-left: 1%; } .tbGrid .FieldGroup_Report { float: none; display:inline-block; } } @media (min-width: 900px) { .FieldGroup { float: right; width: 47%; margin-left: 3%; } .tbGrid .FieldGroup { float: none; display:inline-block; } .FieldGroup_Report { width: 24%; margin-left: 1%; } } @media (min-width: 1400px) { .FieldGroup { width: 35%; margin-left: 15%; } .FieldGroup_Report { width: 19%; margin-left: 1%; } #DivBody .BoxMsgOK, #DivBody .BoxMsgError { width: 85%; } }  .FieldGroup_CheckBox { height: 75px; } .FieldGroup_CheckBox input { opacity: 0; height: 30px; position: absolute; width: auto; } .FieldGroup_CheckBox label { display: inline-block; cursor: pointer; } .FieldGroup_CheckBox input[type=checkbox] + label:before, .FieldGroup_CheckBox input[type=radio] + label:before { color: #0894d7; } .FieldGroup_CheckBox input[type=checkbox]:disabled + label:before, .FieldGroup_CheckBox input[type=radio]:disabled + label:before { color: #ccc; } .tbGrid .tbl-header .FieldGroup_CheckBox { min-width:auto; } .tbGrid .tbl-header .FieldGroup_CheckBox input[type=checkbox] + label:before, .tbGrid .tbl-header .FieldGroup_CheckBox input[type=radio] + label:before { color: #fff; } .tbGrid .tbl-header .FieldGroup_CheckBox input[type=checkbox]:disabled + label:before, .tbGrid .tbl-header .FieldGroup_CheckBox input[type=radio]:disabled + label:before { color: #ccc; } .FieldGroup_CheckBox input[type=checkbox] + label:before { content: '\f096'; margin-right: 3px; margin-left: 7px; font-size: 140%; vertical-align: middle; } .FieldGroup_CheckBox input[type=checkbox]:checked + label:before {  content: '\e800'; margin-right: 0; } .FieldGroup_CheckBox input[type=radio] + label:before { content: '\f10c'; margin-left: 7px; font-size: 140%; vertical-align: middle; } .FieldGroup_CheckBox input[type=radio]:checked + label:before {  content: '\f192'; } .FieldGroup_CheckBox label span.invalid { position: unset; } .FieldGroup_CheckBox input[type=checkbox].invalid + label:before, .FieldGroup_CheckBox input[type=radio].invalid + label:before { color: #f55252 !important; }  .FieldGroup_Report { height: auto; } .FieldGroup_Report label { margin-top: 0; font-weight: normal; }  .Field_Separator { width: 90%; height:27px; margin-top:25px; border-bottom: 2px solid #FFAF38; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .Field_Separator>span { height:28px; display:inline-block; background: #FFAF38; padding-right: 12px; border-radius: 5px; position: relative; } .Field_Separator>span:before { content: ''; width: 27px; height: 100%; background: #FFAF38; position: absolute; top: 0; left: -13px; transform: skew(-40deg); border-top-left-radius: 5px; } .Field_Separator>span>span { display:block; color:#FFF; position: relative; } @media (min-width: 500px) { .Field_Separator { width: 70%; } }  .myIcon:before { font-family: "fontello"; font-style: normal; font-weight: normal; } .myIcon.icoInfo { width: 16px; height: 16px; display: inline-block; vertical-align: middle; position: relative; margin: 0 5px; cursor: pointer; } .myIcon.icoInfo:before { content: '\e804'; font-size: 18px; line-height: 16px; position: absolute; top: 0; right: 0px; color: #0894d7; transition: all 0.5s; } .myIcon.icoInfo:hover:before { color: #ccc; } .myIcon.icoAccept { width: 16px; height: 16px; padding: 4px; display: inline-block; vertical-align: middle; position: relative; margin: 0 5px; } .myIcon.icoAccept:before { content: '\e816'; font-size: 130%; line-height: 26px; position: absolute; top: 0; right: 4px; color: #43d487; } .myIcon.icoDecline { width: 16px; height: 16px; padding: 4px; display: inline-block; vertical-align: middle; position: relative; margin: 0 5px; cursor:pointer; } .myIcon.icoDecline:before { content: '\e817'; font-size: 150%; line-height: 26px; position: absolute; top: 0; right: 7px; color: #ff6868; } .myIcon.icoAdd { width: 13px; height: 13px; padding: 2px; display: inline-block; vertical-align: middle; position: relative; margin: 0 5px; cursor:pointer; background:#43d487; border: 1px solid #6fb658; border-radius: 50px; transition:all 0.5s; } .myIcon.icoAdd:before { content: '\e809'; font-size: 80%; line-height: 17px; position: absolute; top: 0; right: 4px; color: #fff; } .myIcon.icoAdd:hover { background:#6fb658; } .myIcon.icoDel { width: 13px; height: 13px; padding: 2px; display: inline-block; vertical-align: middle; position: relative; margin: 0 5px; cursor:pointer; background:#ff6868; border: 1px solid #ce4e4e; border-radius: 50px; transition:all 0.5s; } .myIcon.icoDel:before { content: '\e80a'; font-size: 80%; line-height: 17px; position: absolute; top: 0; right: 4px; color: #fff; } .myIcon.icoDel:hover { background:#ce4e4e; } .icoHome:before { content: '\e803'; font-size: 130%; color: #666; margin-left: 5px; display: inline-block; vertical-align: middle; } .icoArrowLeft:before { content: '\e80c'; font-size: 100%; color: #666; margin-left: 5px; display: inline-block; vertical-align: middle; }  .FieldGroup_CheckBoxRounded>label { display: inline-table; } .RoundedCheckbox { width: 50px; height: 25px; margin: 5px; position: relative; } .RoundedCheckbox div { width: 100%; height:100%; background: #cacaca !important; border-radius: 50px; } .RoundedCheckbox label { display: block; width: 19px; height: 19px; border-radius: 50px; cursor: pointer; position: absolute; left: 5px; top: 3px; margin:0; z-index: 1; background: #FFF !important; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } .RoundedCheckbox label:before {  content: none !important; } .RoundedCheckbox input[type=checkbox] { width: 100%; height: 100%; border-radius: 50px; opacity: 0; position: absolute; top: -3px; left: -3px; z-index: 5; cursor: pointer; } .RoundedCheckbox input[type=checkbox]:checked ~ div { background: #6FC590 !important; } .RoundedCheckbox input[type=checkbox]:checked ~ label { left: 26px; } .RoundedCheckbox input[type=checkbox]:disabled ~ div { background: #eaeaea !important; } .RoundedCheckbox input[type=checkbox]:checked:disabled ~ div { background: #ABD9BC !important; } .invalidRoundedCheckbox label span.invalid { left:auto; } .invalidRoundedCheckbox .RoundedCheckbox div { background: #f55252 !important; }  .BoxMsgOK, .BoxMsgError { padding: 0.6rem;  font-weight: normal; font-size: 0.8rem; line-height: 1.7rem; } .BoxMsgOK { color: #255584; background: #D5E6FC; border: 1px solid #BBC4E8; } .BoxMsgError { color: #B03939; background: #F9D9D9; border: 1px solid #EAACAC; } .BoxMsgOK .Close, .BoxMsgError .Close { float:left; width: 20px; height: 20px; line-height: 20px; text-align:center; border-radius:50px; cursor: pointer; transition: all 0.3s; } .BoxMsgOK .Close { color: #8E9EDE; border:1px solid #8E9EDE; } .BoxMsgError .Close { color: #E99191; border:1px solid #E99191; } .BoxMsgOK .Close:hover { color:#fff; background: #91ADD0; } .BoxMsgError .Close:hover { color:#fff; background: #E99191; } .BoxMsgOK .Close:before, .BoxMsgError .Close:before { content: '\E817'; font-family: "fontello"; font-style: normal; font-weight: normal; font-size: 16px; } #DivPopup { display: none; position: absolute; z-index: 999; } .BoxPopup { line-height: 25px; padding: 5px 10px; background-color: #FF9; border: 1px solid #999; border-radius: 5px; font-size:12px; } #DivPopup tr:first-child { background: #E3CB2B; text-align: center; } #DivPopup table tr td { border: 1px solid #999; padding: 2px 4px; }  .Table_1 { border-spacing: 0; border-collapse: collapse; border: 1px solid #6494c4; border-bottom: 3px solid #6494c4; color: #002248; margin-top:0.7rem; } .Table_1 td { border: 0; padding: 10px 15px; border-bottom: 1px solid #6494c4; } .Table_1 tbody tr:nth-child(even) td { background: #e4f3fd; } .Table_1 tbody tr:nth-child(odd) td { background: #b1d8f2; } .Table_1 thead td { background: #6494c4; padding: 10px 15px; text-align: center; font-weight: bold; } .Table_1 tfoot td { background: #fff; } .Table_1 .header { padding: 4px 8px; }  .DivGallery { display: flex; flex-flow: wrap; justify-content: center; align-items: center; } .DivGallery .Item { width: 23%; height: 10rem; margin:1%; padding: 0.3rem; background: #e7f1f3; border: 1px solid #c2d7d5; border-radius: 0.6rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px 0px; position: relative; } .DivGallery .Item a { display: block; height: 100%; } .DivGallery .Item .txtCover { opacity:0; display: flex; justify-content: center; align-items: center; width: calc(100% - 0.6rem); height: calc(100% - 0.6rem); position: absolute; top: 0.3rem; right: 0.3rem; font-size: 0.9rem; color: #fff; border-radius: 0.6rem; background: linear-gradient(90deg, #9F7171 0%, #462828 100%); transition: all 0.7s; } .DivGallery .Item:hover .txtCover { opacity:0.9; } .DivGallery .Item img { object-fit: cover; width: 100%; height: 100%; border: 0; padding: 0; } .box-Gallery2 { max-width:1000px; margin:0 auto;  border-radius:0.6rem; } .Outer-Gallery2 { position: relative; overflow: hidden; } .Inner-Gallery2, .Inner-Gallery2 .Gallery2 { width: 800px; } .Inner-Gallery2 { height: 500px; overflow:hidden; position:relative; top:0; left:0; } .Inner-Gallery2 .Gallery2 { height: 410px; position:relative; top:0; left:0; overflow:hidden; } .Inner-Gallery2 .Gallery2 img { border:0;  } .Inner-Gallery2 .NavArrow { display:block; width:20px; height:40px; position:absolute; top:185px; left:0; cursor:pointer; } .Inner-Gallery2 .NavArrow:hover { opacity:0.8; } .Inner-Gallery2 .NavArrowLeft { left:0.5rem; } .Inner-Gallery2 .NavArrowRight { right:0.4rem; } .Inner-Gallery2 .NavArrow path { fill:#c2d7d5; } .Inner-Gallery2 .NavBullet { width:100%; height:80px; position:absolute; left:0; bottom:0; } .Inner-Gallery2 .NavBullet .p { width:9.6rem; height:5rem; position: absolute; top:0; left:0; box-sizing:border-box; border:0; cursor:pointer; } .Inner-Gallery2 .NavBullet .p img {  border-radius:0.4rem; } .Inner-Gallery2 .NavBullet .p:hover{padding:2px;} .Inner-Gallery2 .NavBullet .p:hover.pdn{padding:0;} .Inner-Gallery2 .NavBullet .t { position:absolute; top:0; left:0; width:100%; height:100%; border:0; opacity:0.9; } .Inner-Gallery2 .NavBullet .pav .t, .NavBullet .p:hover .t { opacity:1; border:1px solid #c2d7d5; } @media (max-width: 500px) { .Inner-Gallery2 { height:600px; } .Inner-Gallery2 .Gallery2 { height:500px; } .Inner-Gallery2 .NavArrow { top:235px; } } .Inner-Gallery2 video { width: 100%; height: 100%; }  div.ClassList { min-width: 300px; display: inline-block; padding: 10px; margin: 5px; border-radius: 10px; } .ClassList { border-spacing: 0; border-collapse: collapse; background: #00bcd4; } .ClassList th, .ClassList td { border: 0; padding: 10px; border-bottom: 1px solid #5ba0d0; border-right: 1px solid #e4f3fd; font-size: 0.8rem; line-height:1.4rem; } .ClassList th span { font-size: 0.6rem; } .ClassList tr:nth-child(even) { background: #e6f5ff; } .ClassList tr:nth-child(odd) { background: #f9f9f9; } .ClassList tr:first-child th, .ClassList tr:first-child td { color: #444; background: #5ba0d0; text-align: center; font-size: 0.9rem; font-weight: normal; line-height:1.2rem; border: 0; border-right: 1px solid #e4f3fd; vertical-align: middle; } .ClassList .rowSelected { color: #666; background: repeating-linear-gradient( -55deg, #ddd, #ddd 3px, #eee 3px, #eee 10px ) !important; } .ClassList .rowSelected .tick:before { content: '\e816'; padding: 0 4px; background: #08af8d; color: #fff; border: 1px solid #079578; border-radius: 50px; } .ClassList .Select { width: 56px; height: 26px; padding: 4px; padding-right: 20px; font-size: 10px; line-height: 18px; display: block; margin: 0 auto; cursor: pointer; border-radius: 5px; color:#fff; transition: 0.3s; overflow: hidden; } .ClassList .Hide { display: none; } .ClassList .Select:before { width: 15px; text-align: center; color: #fff; top: 0px; right: 0px; line-height: 25px; } .ClassList .Select.Add { border: 1px solid #079578; background: #079578; } .ClassList .Select.Add:hover, .ClassList .Select.Add:before { background: #08af8d; } .ClassList .Select.Del { border: 1px solid #aa3939; background: #aa3939; } .ClassList .Select.Del:hover, .ClassList .Select.Del:before { background: #d24848; } .ClsMtg { margin-bottom:30px; padding: 15px; position: relative; background: #fdfdfd; box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.05); } .ClsMtgBar { margin-top:30px; color:#666; border-bottom: 1px solid #C2D7D5; text-align: left; font-size: 0.8rem; } .ClassImg { float:left; width: 250px; height: 125px; border: 1px solid #cacaca; border-radius: 5px; }  .ClassList2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .ClassList2 * {  transition: all 0.3s; } .ClassList2 .Item { width: 23%; height: 20rem; text-align: center; margin: 1%; margin-bottom: 2rem; border: 1px solid #f8faff; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1); border-radius:0.6rem; background:#fff; vertical-align: top; overflow: hidden; position: relative; } .ClassList2 .Item .Image { height: 12rem; position: relative; overflow:hidden; } .ClassList2 .Item .Image img { height: 12rem; } .ClassList2 .Item:hover .Image { height: 11rem; } .ClassList2 .Item img { object-fit: cover; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } .ClassList2 .filterLayer {  } .ClassList2 .Text { padding: 0.4rem; color: #315FE1; } .ClassList2 .Item .Title { font-size: 1rem; line-height: 1.5rem; margin-top: 0.4rem; } .ClassList2 .Item:hover .Title { color: #FBA71B; } .ClassList2 .Item .Teacher { position: absolute; right: 0.6rem; bottom: 2.5rem; color:#167388; font-size: 0.9rem; } .ClassList2 .Item .MeetNum { position: absolute; right:0.6rem; bottom: 0.6rem; color:#7E7E7E; font-size: 0.9rem; } .ClassList2 .Item:hover .MeetNum { opacity:0; } .ClassList2 .Item .LabelPrice, .ClassList2 .Item .btnRegisterClass { position: absolute; bottom: 0.6rem; } .ClassList2 .Item .LabelPrice { color:#E6A200; left:0.6rem; font-size: 1rem; font-weight: bold; line-height: 1.9rem; } .ClassList2 .Item .Discount { position: absolute; top: 0.6rem; left: 0.6rem; color: #fff; background: #24B828; height: 1.6rem; line-height: 1.6rem; padding: 0 0.6rem; } .OldPrice { text-decoration: line-through; text-decoration-color: red; color:#7E7E7E; font-weight: normal; } .ClassList2 .Item .LabelPrice .unitPrice { display: inline-block; color:#A22929; border-bottom:1px solid #808080; line-height: 1.45rem; font-size: 0.6rem; font-weight: normal; transform: rotate(270deg); } .ClassList2 .Item .btnRegisterClass { color: #fff; background: #24B828; height:1.6rem; line-height:1.6rem; padding:0 0.6rem; border-radius:0.45rem; right: 0.6rem; opacity:0; bottom:-3rem;  transition: all 0.7s; } .ClassList2 .Item:hover .btnRegisterClass { opacity:1; bottom: 0.6rem; } .btnRegisterClass, .btnCancelClass { display: inline-block; color: #fff; background: #24B828; height:27px; line-height:27px; padding:0 15px; border-radius:7px; } .btnCancelClass { background: #AE9292; margin-right: 10px; } .Inner-Class2 { display:flex; } .Inner-Class2 .Class2_imge { max-width: 35%; min-height: 10rem; } .Inner-Class2 .ClassImg { width: 100%; height: auto; border: 0; border-radius: 0.8rem !important; } .Inner-Class2 .Class2_title { flex: 1; min-height: 10rem; padding-right:2rem; }  #InsertFile { color: #A74A4C; cursor: pointer; margin: 5px 0; } #InsertFile span { color: #FFF; background: #33bd61 url(../../_tmp_common/images/plus.png) right no-repeat; cursor: pointer; border: 1px solid #2c8c4c; border-radius: 5px; padding: 0 20px 0 10px; } .DivFile { margin: 1px 0; } .DivFile input { width: 300px; } .DivFile .FileDownload { display: inline-block; width: 288px; color: #FFF; background: #248692; border: 1px solid #2a80b9; border-radius: 5px; padding: 2px 5px; } .DivFile .FileDel { color: #FFF; background: #c44142 url(../../_tmp_common/images/delete.png) right no-repeat; border: 1px solid #a13a3b; border-radius: 5px; padding: 0 20px 0 5px; } .TicketView { border: 1px solid #09F; } .TicketView .Title { height: 20px; line-height: 20px; padding: 0 10px; color: #FFF; background: #09F; } .TicketView .Title span { line-height: 20px; } .TicketView .Text { padding: 10px 20px; background: #EEE; } .DivTicketForm { display: none; margin: 20px; padding: 10px; background: #DDD; border: 1px solid #09F; border-radius: 5px; } .TicketBtn { padding: 0 5px; color: #FFF; background: #09F; border-radius: 5px; font-size: 0.8rem; } .TicketBtn:hover { color: #FFF; background: #2a80b9; } .TicketBtnInsert { color: #FFF; background: #33bd61 url(../../_tmp_common/images/plus.png) right no-repeat; cursor: pointer; border: 1px solid #2c8c4c; border-radius: 5px; padding: 0 20px 0 10px; font-size: 0.9rem; }   @media (max-width: 1300px) { .Inner-Section { width: 95%; } } @media (max-width: 1000px) { } @media (max-width: 900px) { .HeadPanel { width: 15rem; height: 1.6rem; line-height: 1.6rem; } #UserBox #Panel2, #AlertBox2 { top:1.7rem; } .Inner-Head .Logo { height: 4.2rem; margin-top: 0.1rem; } .Inner-Head .Logo img { } .Inner-Head .Logo .title { font-size: 1.1rem; line-height: 1.5rem; } .Inner-TopMenu { display: none; } .TopMenuToggle-Icon { display: block; } .Inner-Banner1 { } .Outer-Bannerlink { height: 10rem; margin: 0; } .Inner-Bannerlink .Item a { flex-direction: row; justify-content: start; } .Inner-Bannerlink .Item a span { order:2; } .Inner-Bannerlink .Item img { margin:0 1rem; } .DivBreadcrumbs a { font-size: 0.75rem; margin: 0 0.25rem; } .DivBoxMainTitle h1 { font-size: 1.15rem; } .Home-Wrapper .Inner-Section > .Title, .Home-Wrapper .Inner-Section > .Title a { font-size: 1.1rem; }  .ClassList2 .Item { width: 48%; min-width: 12rem; } .Outer-NewsSlider .NewsSliderItem { flex: 1 0 98%; } .ItemContArchive { width:100%; } } @media (max-width: 800px) { } @media (max-width: 700px) { .Inner-Body { flex-direction: column; } .FeedbackList { width:95%; } .FeedbackList .Item { width:98%; } .NewsList { flex-wrap:wrap; } .NewsList .NewsItem { width: 95%;  flex: auto; } .Banner_1 { margin:0; } .Inner-Class2 { flex-direction: column; } .Inner-Class2 .Class2_imge { max-width: 100%; } .Inner-Class2 .Class2_title { padding: 0; padding-top: 2rem; }  } @media (max-width: 600px) { .ItemContArchive { height: 13rem; } .ItemContArchive>a { padding: 0; } .ItemContArchive .Image { width: 100%; height: 80%; border-radius:0; position: absolute; top: 0; right: 0; } .ItemContArchive .Image img { border-radius:0; } .ItemContArchive .Title { width: 100%; position: absolute; bottom: 0; right: 0; color: #fff; background: #167388; padding: 0.5rem 1rem; } .ItemContArchive .Rutitr, .ItemContArchive .Abstract, .ItemContArchive .Bar { display:none; } } @media (max-width: 500px) { .HeadPanel { width: 15rem; } .TopMenuToggle-Icon .txt {  } #UserBox { flex:2; } .Home-Wrapper .Outer-Section { padding-top:2rem; } .Home-Wrapper .Inner-Section>.Title i:before { top:2rem; } .Outer-Bannerlink { height: 6rem; } .Inner-Bannerlink { gap: 0.7rem !important; } .Inner-Bannerlink .Item a { font-size: 0.9rem; } .Inner-Bannerlink .Item img { width: 2rem; margin: 0 0.6rem; } .TechItem { min-width: 8rem; } .TechItem .Img { max-height: 8rem; } .ClassList2 .Item { width: 95%; } } @media (max-width: 450px) { .HeadPanel { width: 13rem; } } @media (max-width: 400px) { .HeadPanel { width: 10rem; } } @media (min-width: 1000px) { } @media (min-width: 1300px) { .Inner-Section { width: 1280px; } } @media (min-width: 1500px) { }