/*SmartReading Contest 3th. (2021-2022)*/ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"); body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; list-style: none; } h1 { font-size: 25px; line-height: 1.7; font-weight: bold; } h3 { font-size: 21px; line-height: 1.7; font-weight: bold; } h4 { font-size: 20px; line-height: 1.5; font-weight: bold; } h4 { font-size: 18px; line-height: 1.5; font-weight: bold; } p, select, .form-control { font-size: 14px; line-height: 1.7; color: #2e3233; } span, th, td, button { font-size: 14px; text-decoration: none; line-height: 1.7; } a { font-size: 14px; text-decoration: none; line-height: 1.7; color: #2e3233; } input, label { font-size: 14px !important; line-height: 1.7; } input[type=file]::file-selector-button { display: none; } img { width: 100%; } button { padding: 0; border-width: 0px; border-style: none; background-color: transparent; border-radius: 10px; cursor: pointer; } button:disabled { background-color: grey; opacity: 0.5; cursor: auto; } *, body { font-family: 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', 'Microsoft YaHei', 'PingFang TC', 'PingFang SC', 'Heiti TC', 'Heiti SC', 'LiHei Pro','STXihei', sans-serif; letter-spacing: 1.5px; box-sizing: border-box; } cursor { cursor: pointer; } .color_purple { color: #446ef6; } .color_red { color: red; } .dotted_bottom { border-bottom: 1px dotted #5a5f60; padding-bottom: 20px; } @media screen and (min-width: 768px) { h1 { font-size: 32px; } h3 { font-size: 22px; } h4 { font-size: 21px; } h5 { font-size: 19px; } p, select, .form-control { font-size: 15px; } span, th, td, button { font-size: 15px; } a { font-size: 15px; } input, label { font-size: 15px !important; } } @media screen and (min-width: 992px) { h1 { font-size: 35px; } h3 { font-size: 23px; } h4 { font-size: 23px; } h5 { font-size: 21px; } p, select, .form-control { font-size: 17px; } span, th, td, button { font-size: 17px; } a { font-size: 17px; } input, label { font-size: 17px !important; } } @media screen and (min-width: 1400px) { h1 { font-size: 40px; } h4 { font-size: 27px; } h5 { font-size: 23px; } p, select, .form-control { font-size: 19px; } span, th, td, button { font-size: 19px; } a { font-size: 19px; } input, label { font-size: 19px !important; } } /*body{ font-family:'Noto Sans TC', 'Noto Sans SC', 'Noto Sans HK', 'Noto Sans JP', 'Noto Sans KR', sans-serif; }*/ /*Need to be used with */ :lang(zh-tw) body { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif !important; } :lang(zh-cn) body { font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', 'Heiti SC', 'STXihei', sans-serif !important; } :lang(en-us) body { font-family: 'Noto Sans TC', Arial, Helvetica, sans-serif !important; } /* ******* ******* ******* ******* ******* ******* ******* */ /* ******* ******* ******* ******* ******* ******* ******* */ /* ******* ******* ******* ******* ******* ******* ******* */ /* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 100; font-display: swap; src: local("Noto Sans TC Thin"), local("NotoSansTC-Thin"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Thin.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Thin.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Thin.otf) format("opentype"); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 300; font-display: swap; src: local("Noto Sans TC Light"), local("NotoSansTC-Light"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Light.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Light.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Light.otf) format("opentype"); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 400; font-display: swap; src: local("Noto Sans TC Regular"), local("NotoSansTC-Regular"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Regular.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Regular.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Regular.otf) format("opentype"); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 500; font-display: swap; src: local("Noto Sans TC Medium"), local("NotoSansTC-Medium"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Medium.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Medium.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Medium.otf) format("opentype"); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; font-display: swap; src: local("Noto Sans TC Bold"), local("NotoSansTC-Bold"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Bold.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Bold.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Bold.otf) format("opentype"); } @font-face { font-family: 'Noto Sans TC'; font-style: normal; font-weight: 900; font-display: swap; src: local("Noto Sans TC Black"), local("NotoSansTC-Black"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Black.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Black.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansTC/NotoSansTC-Black.otf) format("opentype"); } /* Noto Sans SC (Chinese_Simplified) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 100; font-display: swap; src: local("Noto Sans SC Thin"), local("NotoSansSC-Thin"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Thin.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Thin.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Thin.otf) format("opentype"); } @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300; font-display: swap; src: local("Noto Sans SC Light"), local("NotoSansSC-Light"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Light.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Light.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Light.otf) format("opentype"); } @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 400; font-display: swap; src: local("Noto Sans SC Regular"), local("NotoSansSC-Regular"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Regular.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Regular.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Regular.otf) format("opentype"); } @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 500; font-display: swap; src: local("Noto Sans SC Medium"), local("NotoSansSC-Medium"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Medium.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Medium.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Medium.otf) format("opentype"); } @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 700; font-display: swap; src: local("Noto Sans SC Bold"), local("NotoSansSC-Bold"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Bold.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Bold.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Bold.otf) format("opentype"); } @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 900; font-display: swap; src: local("Noto Sans SC Black"), local("NotoSansSC-Black"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Black.woff2) format("woff2"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Black.woff) format("woff"), url(../fonts/gstatic_v1_NotoSansSC/NotoSansSC-Black.otf) format("opentype"); } body { font-size: 20px; letter-spacing: 0.02em; color: #2e3233; font-weight: 300; } /**/ *, *:focus, *:hover { outline: 0px transparent !important; } .text-red, .login .login-block .login-block__content .form-horizontal .form-group .goRegister, .register-stepper .register-form .form-group .form-alert, .register-stepper .register-form.form3 a.form-alert { color: #ff0000; } .text-indent-2 { text-indent: 2em; } /**/ .bg-gradient { background-image: url(../images/bg-gradient.png); background-repeat: repeat-x; } .bg-gradient-gray { background-image: url(../images/bg-gradient-gray.png); background-repeat: repeat-x; } .colorBg { background-color: #f4f8fb; } .whiteBg { background-color: white; } /**/ .index_title { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 15px; } .index_title .base-h2 { font-weight: 400; display: flex; flex-wrap: wrap; } .index_title .base-h2 h2 { margin: 8px 5px 8px 0; } .index_title .base-h2 span { margin: 8px 0; color: #446ef6; text-transform: uppercase; } .index_title .base-more { color: #ff0000; font-size: 18px; padding-right: 10px; margin: 8px 0; } .index_title::before { content: ""; position: absolute; height: 2px; width: 100%; background: linear-gradient(to right, #446ef6, transparent); bottom: 0; left: 0; transform: translate(0px, 100%); } .base-more:hover, .base-more:focus, .base-more:focus { color: #ff0000; text-decoration: none; } .base-more:hover::after, .base-more:focus::after, .base-more:focus::after { background-color: #ff0000; } .noRadius { border-radius: 0; } div .dt-button-background { display: none !important; } div .dt-button-collection { box-shadow: none; border: 0px; background-color: transparent; padding: 0; } div .dt-button-collection .dt-button { margin: 0 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: #446ef6 !important; } .slick-slider.slider_activities .slick-list { width: 100%; } .slick-slider.slider_activities .slick-list .slick-slide { padding: 0; position: relative; line-height: 0; } .slick-slider.slider_activities .slick-list .slick-slide .slick_text { position: absolute; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; } .slick-slider.slider_activities .slick-list .slick-slide .slick_text p { display: block; text-align: center; color: white; height: auto; padding: 8px; } .slick-slider.slider_activities .slick-next, .slick-slider.slider_activities .slick-prev { display: none; } .slick-slider.slider_recommendBook button.slick-next, .slick-slider.slider_recommendBook button.slick-prev { top: 0%; height: 210px; transform: translate(0, 0); } .slick-slider.slider_recommendBook .slick_img img { height: 210px; object-fit: cover; object-position: top; } .slick-slider.slider_recommendBook .slick-dots { display: none !important; } .slick-slider .slick-list { width: calc(100% - 60px); margin: 0 auto; } .slick-slider .slick-list .slick-slide { padding: 0 10px; } .slick-slider .slick-list .slick-slide .slick_img img { width: 100%; } .slick-slider .slick-list .slick-slide p { text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; width: 100%; height: 47.6px; } .slick-slider .slick-dots { position: relative; bottom: auto; margin: 5px 0; } .slick-slider .slick-dots li { width: 10px; height: 10px; } .slick-slider .slick-dots li button { width: 10px; height: 10px; } .slick-slider .slick-dots li button:before { background-color: rgba(0, 0, 0, 0.3); opacity: 1; width: 10px; height: 10px; content: ""; border-radius: 50%; } .slick-slider .slick-dots li.slick-active button:before { background-color: rgba(0, 0, 0, 0.6); } .slick-slider button.slick-next { right: 0% !important; transform: translate(0%, 0px); } .slick-slider button.slick-prev { left: 0%; transform: translate(0%, 0px); } .slick-slider button.slick-next, .slick-slider button.slick-prev { padding: 15px; position: absolute; background-color: #E2E2E2; top: 50%; transform: translate(0, calc(-50% - 32px)); border-radius: 0; z-index: 1; } .slick-slider button.slick-next:hover, .slick-slider button.slick-next:focus, .slick-slider button.slick-prev:hover, .slick-slider button.slick-prev:focus { background-color: #414546; } .slick-slider button.slick-next::before, .slick-slider button.slick-prev::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @media screen and (min-width: 992px) { .slick-slider .slick-list .slick-slide p { height: 57.78px; } } header .navi-main { padding: 0; margin-bottom: 0; } header .navi-main .container-fluid { display: flex; align-items: center; flex-direction: column; } header .navi-main .container-fluid .navbar-header { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; } header .navi-main .container-fluid .navbar-header .navbar-toggle { padding: 0; } header .navi-main .container-fluid .navbar-header .navbar-toggle .icon-bar { display: block; width: 30px; height: 2px; border-radius: 1px; background-color: #446ef6; } header .navi-main .container-fluid .navbar-header .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } header .navi-main .container-fluid .navbar-header .navbar-toggle:hover .icon-bar { background-color: #1348f4; } header .navi-main .container-fluid .navbar-header .navbar-brand { width: calc(100% - 90px); max-width: 400px; height: auto; padding: 15px 0px; margin-right: auto; } header .navi-main .container-fluid .navbar-header .navbar-brand .navbar-brand__SR { width: 60%; } header .navi-main .container-fluid .navbar-menu .navbar-menu-btn { display: none; margin: 5px 0; } header .navi-main .container-fluid .navbar-menu .navbar-collapse { margin: 0px auto 15px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav { display: flex; flex-direction: column; align-items: center; margin: 0; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li { margin: 5px 0px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li .dropdown-menu { background: white; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:focus a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:hover a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.active a { color: #446ef6; background-color: transparent; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:active.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:focus.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li:hover.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.active.active a { color: #446ef6; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li a { color: #2e3233; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:focus a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:hover a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:focus a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:hover a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:focus a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:hover a { color: #446ef6; background-color: transparent; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:active.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:focus.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active .dropdown-menu li:hover.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:active.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:focus.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus .dropdown-menu li:hover.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:active.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:focus.active a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover .dropdown-menu li:hover.active a { color: #446ef6; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:active.active .dropdown-menu li a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:focus.active .dropdown-menu li a, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown:hover.active .dropdown-menu li a { color: #2e3233; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li .navi-main__languageMenu li a { padding: 6px 10px 6px calc(10px + 1.25em); text-align: left; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li .navi-main__languageMenu li a .language-icon { display: inline-block; width: 1em; height: 1em; margin-left: -1.25em; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li .navi-main__languageMenu li a .language-icon .glyphicon { display: none; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li .navi-main__languageMenu li a[check="checked"] .language-icon .glyphicon { display: inline-block; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li a { color: #2e3233; padding: 5px 10px; line-height: 1em; position: relative; background-color: transparent; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li a:active, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li a:focus, header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li a:hover { background-color: transparent; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-sr { cursor: pointer; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-sr.open .dropdown-menu.navTab-sr-dropdown-menu { display: flex; flex-direction: column; align-items: center; min-width: auto; position: relative; box-shadow: none; border: 0px; float: none; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-sr.open .dropdown-menu.navTab-sr-dropdown-menu .dropdown-item { color: #2e3233; padding: 10px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-sr.open .dropdown-menu.navTab-sr-dropdown-menu .dropdown-item:hover { color: #446ef6; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-shopping { margin: 20px 0px; padding: 3px 20px; border: 1px solid #fe7273; border-radius: 50px; position: relative; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-shopping i { color: #fe7273; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-shopping .shop_num { right: 0; top: 0; transform: translate(50%, -50%); background-color: #fe7273; color: white; position: absolute; line-height: 1; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 992px) { header .navi-main .container-fluid { justify-content: center; } header .navi-main .container-fluid .navbar-header { width: 35%; margin-right: 0; } header .navi-main .container-fluid .navbar-header .navbar-brand { width: 100%; padding: 25px 0px 0px; } header .navi-main .container-fluid .navbar-header .navbar-toggle { display: none; } header .navi-main .container-fluid .navbar-menu { display: flex; align-items: flex-start; width: 80%; margin: 18px auto 15px; } header .navi-main .container-fluid .navbar-menu .navbar-menu-btn { display: block; } header .navi-main .container-fluid .navbar-menu .navbar-menu-btn:hover { color: #446ef6; } header .navi-main .container-fluid .navbar-menu .navbar-collapse { display: block; flex-basis: auto; padding: 0; margin: 0 auto; padding: 0 0 10px; width: 90%; overflow-x: auto !important; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } header .navi-main .container-fluid .navbar-menu .navbar-collapse::-webkit-scrollbar { background: transparent; height: 8px; width: 12px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse::-webkit-scrollbar-thumb { border: none; box-shadow: none; background: #446ef6; border-radius: 4px; min-height: 40px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse::-webkit-scrollbar-track { margin: 3px 0; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav { flex-direction: row; width: 100%; align-items: flex-start; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li { white-space: nowrap; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown { margin-left: 25px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.dropdown .dropdown-menu { position: absolute; right: 0px; left: auto; top: calc(100% + 10px); background: white; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-signup a { background-color: #446ef6; border-radius: 50px; color: white; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-name { margin: 5px 0 5px 15px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-shopping { margin: 20px 0 20px 10px; } } @media screen and (min-width: 1200px) { header .navi-main .container-fluid .navbar-header .navbar-brand { margin-left: 0; } header .navi-main .container-fluid .navbar-menu .navbar-menu-btn { padding: 5px 0; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li { margin: 5px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li a { padding: 10px; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-signup a { padding: 10px 20px; } } @media screen and (min-width: 1400px) { header .navi-main .container-fluid { flex-direction: row; align-items: flex-start; } header .navi-main .container-fluid .navbar-header { width: 25%; } header .navi-main .container-fluid .navbar-header .navbar-brand { padding: 25px 0px; } header .navi-main .container-fluid .navbar-menu { justify-content: flex-end; } header .navi-main .container-fluid .navbar-menu .navbar-collapse { margin: 0 10px; } } @media screen and (min-width: 1600px) { header .navi-main .container-fluid .navbar-menu { width: auto; } header .navi-main .container-fluid .navbar-menu .navbar-menu-btn { display: none; } header .navi-main .container-fluid .navbar-menu .navbar-collapse { width: 100%; overflow: initial !important; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav { align-items: center; } header .navi-main .container-fluid .navbar-menu .navbar-collapse .navbar-nav li.navTab-sr.open .dropdown-menu.navTab-sr-dropdown-menu { position: absolute; min-width: 100%; left: 50%; transform: translate(-50%, 0); } } footer .footer-info { background-color: #242529; color: white; padding: 40px 0px; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; } footer .footer-info .footer_top { width: 100%; } footer .footer-info .footer_top .footer-info__logo { margin: 0 auto; width: 90%; } footer .footer-info .footer_top .footer-info__logo img { max-width: 280px; } footer .footer-info .footer_top .footer-info__contact { margin: 0 auto; width: 90%; } footer .footer-info .footer_top .footer-info__contact h4 { margin-top: 20px; margin-bottom: 10px; } footer .footer-info .footer_top .footer-info__contact .footer-info__contact-text p { color: white; display: flex; margin: 8px auto; } footer .footer-info .footer_top .footer-info__contact .footer-info__contact-text p i { margin-right: 10px; line-height: 1.7; } footer .footer-info .footer_top .footer-qr { margin: 10px auto; width: 90%; display: flex; justify-content: flex-start; } footer .footer-info .footer_top .footer-qr img { width: 45%; max-width: 160px; margin: 0 20px 0 0; } footer .footer-info .footer_down { width: 100%; } footer .footer-info .footer_down .footer-copyright { margin: 20px auto 0px; width: 100%; border-top: 1px solid #5a5f60; color: white; padding: 25px 5% 0px; } @media screen and (min-width: 576px) { footer .footer-info .footer_down .footer-copyright { padding: 25px 5% 0px; } } @media screen and (min-width: 768px) { footer .footer-info .footer_top { display: flex; flex-wrap: wrap; align-items: flex-start; } footer .footer-info .footer_top .footer-info__contact { width: 55%; margin: 0 0 0 5%; } footer .footer-info .footer_top .footer-qr { width: 25%; margin: 20px 5% 0 0; } } @media screen and (min-width: 1024px) { footer .footer-info .footer_down .footer-copyright { text-align: center; } } @media screen and (min-width: 1200px) { footer .footer-info { padding: 40px 0; } footer .footer-info .footer_top .footer-info__contact { width: 65%; } footer .footer-info .footer_top .footer-info__contact .footer-info__contact-text { display: flex; flex-wrap: wrap; } footer .footer-info .footer_top .footer-info__contact .footer-info__contact-text .contact-tel { margin: 0 30px 0 0; } footer .footer-info .footer_down .footer-copyright { margin: 20px 0px 0px; } } @media screen and (min-width: 1400px) { footer .footer-info .footer_top { width: 95%; } footer .footer-info .footer_top .footer-info__logo { width: auto; max-width: 245px; margin: 0; } footer .footer-info .footer_top .footer-info__contact { width: 45%; margin: 0 0 0 50px; } footer .footer-info .footer_top .footer-qr { margin: 20px 0 0 0; } footer .footer-info .footer_down .footer-copyright { margin: 20px 0px 0px; } } @media screen and (min-width: 1600px) { footer .footer-info .footer_top { width: 100%; max-width: 1400px; } footer .footer-info .footer_top .footer-info__contact { width: calc(75% - 295px); } } /*Fix Bootstrap to comply with SR*/ @media screen and (min-width: 768px) { .container { width: calc(100% - 260px); max-width: 1200px; } } .navbar-center { display: inline-block; float: none; vertical-align: top; } .navbar-collapse-center { text-align: center; } label { font-weight: 300; margin-bottom: 0; display: inline; } .form-horizontal .control-label { display: inline-block; margin-bottom: 5px; } .input-inline { display: inline-block; width: auto; } .form-control:focus { border-color: rgba(68, 110, 246, 0.6); outline: 0; box-shadow: 0 0 8px rgba(68, 110, 246, 0.6); } .caret { /*display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;*/ border-top: 5px dashed; border-top: 5px solid \9; border-right: 5px solid transparent; border-left: 5px solid transparent; margin-top: -5px; } .dropup .caret { /*content: ""; border-top: 0;*/ border-bottom: 5px dashed; border-bottom: 5px solid \9; } /*Fix MDB to comply with SR*/ .btn { box-shadow: none; font-weight: 300; } /*define bootstrap 5 columns and fix MDB 5 columns*/ .col-xs-2_4, .col-sm-2_4, .col-md-2_4, .col-lg-2_4 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-2_4 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-2_4 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-2_4 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-2_4 { width: 20%; float: left; } .order-wrap { width: calc(100% - 260px) !important; } .nav-wrap { width: 260px; } .nav-wrap ul li { width: 100%; text-align: right; padding: 0 30px 0 0; } } .flex-center { display: flex; align-items: center; justify-content: center; } /* for font-size:16px*/ /*bootstrap*/ .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline { padding-top: 0px; } .checkbox label, .checkbox-inline label { font-size: 0.8em; font-weight: 300 !important; } /*icheck-bootstrap-master*/ [class*="icheck-"] { min-height: 16px; margin-top: 0px !important; margin-bottom: 0px !important; padding-left: 0px; } .icheck-inline { display: inline-block; } .icheck-inline + .icheck-inline { margin-left: .75rem; margin-top: 6px; } [class*="icheck-"] > label { padding-left: 25px !important; min-height: 16px; display: inline-block; position: relative; vertical-align: top; margin-bottom: 0; font-weight: normal; cursor: pointer; } [class*="icheck-"] > input:first-child { position: absolute !important; opacity: 0; margin: 0; } [class*="icheck-"] > input:first-child:disabled { cursor: default; } [class*="icheck-"] > input:first-child + label::before, [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before { content: ""; display: inline-block; position: absolute; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 0px; margin-left: -25px; top: 50%; transform: translate(0px, -50%); } [class*="icheck-"] > input:first-child:checked + label::after, [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after { content: ""; display: inline-block; position: absolute; top: 0px; left: -2px; width: 7px; height: 14px; border: solid 2px #FFF; border-left: none; border-top: none; transform: translate(7.75px, 4.5px) rotate(45deg); -ms-transform: translate(7.75px, 4.5px) rotate(45deg); } [class*="icheck-"] > input[type="radio"]:first-child + label::before, [class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before { border-radius: 50%; } [class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before, [class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before { border-width: 2px; } [class*="icheck-"] > input:first-child:disabled + label, [class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label, [class*="icheck-"] > input:first-child:disabled + label::before, [class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before { pointer-events: none; cursor: default; filter: alpha(opacity=65); box-shadow: none; opacity: .65; } .icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before, .icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before { border-color: #446ef6; } .icheck-success > input:first-child:checked + label::before, .icheck-success > input:first-child:checked + input[type="hidden"] + label::before { background-color: #446ef6; border-color: #446ef6; } /*.icheck-success-white*/ .icheck-success-white > input:first-child + label::before, .icheck-success-white > input:first-child + input[type="hidden"] + label::before { border: 1px solid #446ef6; } .icheck-success-white > input:first-child:checked + label::after, .icheck-success-white > input:first-child:checked + input[type="hidden"] + label::after { border: solid 2px #446ef6; border-left: none; border-top: none; transform: translate(7.75px, 4.5px) rotate(45deg); -ms-transform: translate(7.75px, 4.5px) rotate(45deg); box-shadow: 2px 0px #FFF, 0px -2px #FFF; } .icheck-success-white > input:first-child:not(:checked):not(:disabled):hover + label::before, .icheck-success-white > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before { border-color: #446ef6; } .icheck-success-white > input:first-child:checked + label::before, .icheck-success-white > input:first-child:checked + input[type="hidden"] + label::before { background-color: #FFF; border-color: #446ef6; } .btn-main { background-color: #446ef6; color: #FFF; font-size: 1em; border-radius: 4px; text-decoration: none; padding: 6px 12px; } .btn-main:hover, .btn-main:focus, .btn-main:active { color: #FFF; background-color: #2c5bf5; text-decoration: none; padding: 6px 12px; } .hover-effect-light:hover, .hover-effect-light:focus, .hover-effect-light:active { -moz-filter: brightness(1.2); -o-filter: brightness(1.2); -ms-filter: brightness(1.2); filter: brightness(1.2); } .hover-effect-dark:hover, .hover-effect-dark:focus, .hover-effect-dark:active { -moz-filter: brightness(0.8); -o-filter: brightness(0.8); -ms-filter: brightness(0.8); filter: brightness(0.8); } header .navi-main .navbar-header .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1), header .navi-main .navbar-header .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2), header .navi-main .navbar-header .navbar-toggle:not(.collapsed):hover .icon-bar:nth-child(1), header .navi-main .navbar-header .navbar-toggle:not(.collapsed):hover .icon-bar:nth-child(2) { background-color: transparent !important; display: none; } header .navi-main .navbar-header .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3), header .navi-main .navbar-header .navbar-toggle:not(.collapsed):hover .icon-bar:nth-child(3) { margin: 4px; background-color: #1348f4; transform: rotate(45deg); transition: transform 0.1s linear; } header .navi-main .navbar-header .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3):after, header .navi-main .navbar-header .navbar-toggle:not(.collapsed):hover .icon-bar:nth-child(3):after { display: block; content: " "; background-color: #1348f4; width: 100%; height: 2px; transform: rotate(-90deg); } .page-banner { background-color: #446ef6; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-bottom: 20px; } .page-banner > .container { position: relative; } .page-banner > .container .page-banner__text { color: #FFF; min-height: 300px; text-align: center; display: table; width: 100%; } .page-banner > .container .page-banner__text > div { display: table-cell; vertical-align: middle; } .page-banner > .container .page-banner__text p { text-align: left; } .page-banner > .container .page-banner__text p > br { display: none; } @media screen and (min-width: 1200px) { .page-banner > .container .page-banner__text { min-height: 300px; } .page-banner > .container .page-banner__text p { text-align: center; } .page-banner > .container .page-banner__text p > br { display: block; } } .table-align-left { display: table; } .table-align-center { display: table; margin: 0 auto; } .table-align-right { display: table; float: right; } .table-align-top { display: table-cell; vertical-align: top; } .table-align-middle { display: table-cell; vertical-align: middle; } .table-align-bottom { display: table-cell; vertical-align: bottom; } .table-align-middle img, .table-align-bottom img { max-height: 100%; } .stepper { margin: 0 auto; text-align: center; } .stepper .nav { border: none; display: inline-table; } .stepper .nav > li { position: relative; } .stepper .nav > li::after { content: "....."; display: inline-block; position: absolute; bottom: 0; left: calc(100% - 0.6em); z-index: 1; font-size: 2em; letter-spacing: -0.02em; } .stepper .nav > li:last-child::after { display: none; } .stepper .nav > li > a, .stepper .nav > li > a:hover, .stepper .nav > li > a:focus, .stepper .nav > li > a:active { font-size: 0.8em; color: #767c7c; border: none; padding: 0px 34px; background-color: transparent; } .stepper .nav > li > a > .round-tab, .stepper .nav > li > a:hover > .round-tab, .stepper .nav > li > a:focus > .round-tab, .stepper .nav > li > a:active > .round-tab { background-color: #767c7c; color: #FFF; display: inline-block; width: 26px; height: 26px; line-height: 25px; border-radius: 50%; font-size: 1.125em; font-weight: 700; margin-right: 8px; } .stepper .nav > li.active > a, .stepper .nav > li.active > a:hover, .stepper .nav > li.active > a:focus, .stepper .nav > li.active > a:active { color: #446ef6; border: none; background-color: transparent; } .stepper .nav > li.active > a > .round-tab, .stepper .nav > li.active > a:hover > .round-tab, .stepper .nav > li.active > a:focus > .round-tab, .stepper .nav > li.active > a:active > .round-tab { background-color: #446ef6; } .stepper .nav li.completed::after { color: #446ef6; } .stepper .nav li.completed > a, .stepper .nav li.completed > a:hover, .stepper .nav li.completed > a:focus, .stepper .nav li.completed > a:active { color: #446ef6; background-color: transparent; } .stepper .nav li.completed > a > .round-tab, .stepper .nav li.completed > a:hover > .round-tab, .stepper .nav li.completed > a:focus > .round-tab, .stepper .nav li.completed > a:active > .round-tab { background-color: #446ef6; } .stepper .tab-content { /*step 1*/ } [class*="SRCradio-"] { padding-left: 30px; min-height: 22px; position: relative; } [class*="SRCradio-"] > input[type="radio"] { display: none; } [class*="SRCradio-"] > label { cursor: pointer; } [class*="SRCradio-"] > label::before { content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ccc; position: absolute; top: 0; left: 0; } [class*="SRCradio-"] > label::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background-color: #ccc; position: absolute; top: 4px; left: 4px; } [class*="SRCradio-"]:hover > label { cursor: pointer; } [class*="SRCradio-"]:hover > label::before { border: 1px solid #999999; } [class*="SRCradio-"]:hover > label::after { background-color: #999999; } .SRCradio-green > input[type="radio"]:checked + label::after { background-color: #6cc868; } .index-content { position: relative; padding-top: 25px; padding-bottom: 25px; } .index-content .index-content__block { margin: 35px 0 0; } .index-content .index-content__block.index-news ul { margin: 0; padding: 0; } .index-content .index-content__block.index-news ul li { list-style: none; padding-left: 30px; margin-bottom: 1px; background-repeat: no-repeat; background-position: left center; } .index-content .index-content__block.index-news ul li.sort-news { background-image: url(../images/index/news-icon-news.png); } .index-content .index-content__block.index-news ul li.sort-hot { background-image: url(../images/index/news-icon-hot.png); } .index-content .index-content__block.index-news ul li.sort-alert { background-image: url(../images/index/news-icon-alert.png); } .index-content .index-content__block.index-news ul li a { text-decoration: none; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(85.95px + 5%); position: relative; border-bottom: 1px solid transparent; } .index-content .index-content__block.index-news ul li a .index-news__date { color: #5a5f60; position: absolute; right: 0; } .index-content .index-content__block.index-news ul li a:hover, .index-content .index-content__block.index-news ul li a:focus, .index-content .index-content__block.index-news ul li a:active { color: #446ef6; border-bottom: 1px solid #446ef6; } .index-content .index-content__block.index-board.rankingBoard .index-board__title { background-image: url(../images/index/rankingBoard-banner.png); } .index-content .index-content__block.index-board.progressBoard .index-board__title { background-image: url(../images/index/progressBoard-banner.png); } .index-content .index-content__block.index-board.regionalBoard .index-board__title { background-image: url(../images/index/regionalBoard-banner.png); } .index-content .index-content__block.index-recommendBook > .row { margin: 0; position: relative; } .index-content .index-content__block.index-recommendBook > .row > [class*="col-"] { padding-right: 10px; padding-left: 10px; } .index-content .index-content__block.index-recommendBook .bookFront-square { border: 1px solid #c6c6c6; overflow: hidden; margin: 5px 0; width: 100%; height: 210px; } @media screen and (min-width: 992px) and (max-width: 1199px) { .index-content .index-content__block.index-recommendBook .bookFront-square { height: 170px; } } .index-content .index-content__block.index-recommendBook .bookFront-square > img { width: 100%; height: auto; } .index-content .index-content__block.index-recommendBook h3 { font-size: 0.9em; font-weight: 400; text-align: center; margin-top: 15px; margin-bottom: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-board .index-board__title { width: 100%; height: 0; padding-bottom: 24.20%; background-repeat: no-repeat; background-size: cover; position: relative; } .index-board .index-board__title .index-board__title__flex { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: left; } .index-board .index-board__title .index-board__title__flex h2 { font-size: 1.1em; font-weight: 400; color: white; margin: 0 0 0 10.69%; letter-spacing: 0.35em; } .index-board .index-board__title .index-board__title__flex h2 > small { font-size: 90%; color: white; display: block; margin-bottom: 10px; letter-spacing: 0.3em; } .index-board .index-board__content { width: 100%; display: flex; } .index-board .index-board__content .index-board__content__tab { width: 26%; padding: 30px 0px; display: flex; flex-direction: column; background-color: #E2E2E2; } .index-board .index-board__content .index-board__content__tab li { line-height: 1; padding: 8px 0px; } .index-board .index-board__content .index-board__content__tab li a { color: #2e3233; text-align: center; padding: 5px 10px; } .index-board .index-board__content .index-board__content__tab li.active { position: relative; } .index-board .index-board__content .index-board__content__tab li.active a { color: #446ef6; } .index-board .index-board__content .index-board__content__tab li.active::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 6px 8px 6px 0; border-color: transparent white transparent transparent; position: absolute; top: 50%; right: 0; transform: translate(0%, -50%); z-index: 5; } .index-board .index-board__content .index-board__content__tab-content { padding: 30px 0px; width: 74%; background-color: white; box-shadow: 5px 5px 20px rgba(200, 198, 198, 0.6); min-height: 565px; } .index-board .index-board__content .index-board__content__tab-content table { table-layout: fixed; margin: 0 auto; width: 80%; max-width: 500px; } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr > td { padding: 12px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr > td:nth-child(1) { width: 60px; background-repeat: no-repeat; background-position: center center; } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr > td:nth-child(2) { width: 50px; } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr > td:nth-child(4) { width: 80px; } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr:nth-child(1) > td:nth-child(1) { background-image: url(../images/index/board-icon-1.png); } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr:nth-child(2) > td:nth-child(1) { background-image: url(../images/index/board-icon-2.png); } .index-board .index-board__content .index-board__content__tab-content table > tbody > tr:nth-child(3) > td:nth-child(1) { background-image: url(../images/index/board-icon-3.png); } .index-ad { margin-bottom: 20px; } .index-ad .index-ad__link-img { display: block; margin-bottom: 15px; } .index-ad .index-ad__link-img > img { width: 100%; } .slider_banner .slick-list { width: 100%; } .slider_banner .slick-list .slick-track .slick-slide { padding: 0; } .login { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#090b34+0,0e1460+47,362664+100 */ background: #090b34; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #090b34 0%, #0e1460 47%, #362664 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#090b34', endColorstr='#362664',GradientType=0 ); /* IE6-9 */ } @media screen and (min-width: 992px) { .login { background-image: url(../images/login/login-img.png); background-repeat: no-repeat; background-position: center bottom; background-size: cover; } } @media screen and (min-width: 1900px) { .login { background-size: cover; } } @media screen and (min-width: 1600px) { .login { padding-left: 8.33333333%; padding-right: 8.33333333%; } } .login .login-panel { background-color: #FFF; color: #5c6466; position: relative; margin: 10% 0 20% 0; } @media screen and (min-width: 1200px) { .login .login-panel { margin: 4vw 0 10vw 0; } } @media screen and (min-width: 1900px) { .login .login-panel { margin: 8vw 0 10vw 0; } } @media screen and (min-width: 1400px) { .login .login-panel { margin-right: 9%; } } .login .login-panel .login-panel__header { padding-top: 55px; padding-bottom: 35px; /*> img { width:33%; }*/ } .login .login-panel .login-panel__body { padding: 20px 15px 20px 15px; } @media screen and (min-width: 768px) { .login .login-panel .login-panel__body { padding: 20px 48px 20px 35px; } } .login .login-panel .login-panel__footer { position: absolute; width: 100%; height: 60px; line-height: 60px; bottom: -60px; left: 0; right: 0; text-align: center; color: #FFF; } .login .login-block .login-block__nav { margin-bottom: 40px; } .login .login-block .login-block__nav > li { display: table-cell; width: 1%; } .login .login-block .login-block__nav > li > a { border-bottom: 3px solid #e2e2e2; color: #5c6466; font-size: 0.9em; } .login .login-block .login-block__nav > li > a:hover, .login .login-block .login-block__nav > li > a:focus, .login .login-block .login-block__nav > li > a:active { background-color: transparent; color: #446ef6; } .login .login-block .login-block__nav > li.active > a { border-bottom: 3px solid #446ef6; color: #446ef6; } .login .login-block .login-block__nav > li.active > a:hover, .login .login-block .login-block__nav > li.active > a:focus, .login .login-block .login-block__nav > li.active > a:active { background-color: transparent; } .login .login-block .login-block__content .form-horizontal .form-group { margin-bottom: 30px; } .login .login-block .login-block__content .form-horizontal .form-group .control-label { font-size: 0.8em; } @media screen and (min-width: 768px) { .login .login-block .login-block__content .form-horizontal .form-group .control-label { padding-top: 10px; padding-left: 0; } } .login .login-block .login-block__content .form-horizontal .form-group .form-control { border-radius: 0; font-size: 0.8em; } .login .login-block .login-block__content .form-horizontal .form-group .input-group > .form-control { border-right: 0; } .login .login-block .login-block__content .form-horizontal .form-group .input-group > .input-group-addon { border-radius: 0; background-color: transparent; } .login .login-block .login-block__content .form-horizontal .form-group .input-group > .input-group-addon > a { color: #595959; } .login .login-block .login-block__content .form-horizontal .form-group .show_hide_password input[type="password"].hidePD { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } .login .login-block .login-block__content .form-horizontal .form-group .show_hide_password input[type="password"].showPD { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif !important; } .login .login-block .login-block__content .form-horizontal .form-group .checkbox.icheck-success { padding-left: 15px; padding-right: 15px; } .login .login-block .login-block__content .form-horizontal .form-group .checkbox.icheck-success .btn-forgotPD { font-size: 0.8em; text-decoration: none !important; color: #446ef6; padding-bottom: 2px; } .login .login-block .login-block__content .form-horizontal .form-group .checkbox.icheck-success .btn-forgotPD:hover, .login .login-block .login-block__content .form-horizontal .form-group .checkbox.icheck-success .btn-forgotPD:focus, .login .login-block .login-block__content .form-horizontal .form-group .checkbox.icheck-success .btn-forgotPD:active { color: #446ef6; text-decoration: none; box-shadow: 0 1px #446ef6; } .login .login-block .login-block__content .form-horizontal .form-group .login-panel__btn { margin-top: -10px; font-size: 0.9em; } .login .login-block .login-block__content .form-horizontal .form-group .goRegister { font-size: 0.8em; margin-top: -10px; text-decoration: none; box-shadow: none; } .login .login-block .login-block__content .form-horizontal .form-group .goRegister:hover, .login .login-block .login-block__content .form-horizontal .form-group .goRegister:focus, .login .login-block .login-block__content .form-horizontal .form-group .goRegister:active { text-decoration: none; color: #ff0000; box-shadow: 0 1px #ff0000; } #modal-forgotPD { text-align: center; } @media (min-width: 768px) { #modal-forgotPD .modal-dialog { width: 500px; } } #modal-forgotPD .modal-content { border-radius: 0; } @media (min-width: 768px) { #modal-forgotPD .modal-content { padding-left: 35px; padding-right: 55px; } } #modal-forgotPD .modal-content .form-horizontal .form-group { margin-bottom: 30px; } #modal-forgotPD .modal-content .form-horizontal .form-group .control-label { font-size: 0.8em; } @media screen and (min-width: 768px) { #modal-forgotPD .modal-content .form-horizontal .form-group .control-label { padding-top: 10px; padding-left: 0; } } #modal-forgotPD .modal-content .form-horizontal .form-group .form-control { border-radius: 0; font-size: 0.8em; } #modal-forgotPD .modal-content .form-horizontal .form-group .modal-forgotPD__text { font-size: 0.8em; margin-top: 40px; text-align: center; } #modal-forgotPD .modal-content .form-horizontal .form-group .modal-forgotPD__mark { color: #446ef6; font-size: 0.8em; line-height: 1.8em; text-align: center; } #modal-forgotPD .modal-content .form-horizontal .form-group .btn-main { font-size: 0.9em; } #modal-forgotPD-info { font-size: 0.8em; line-height: 1.5em; } @media (min-width: 768px) { #modal-forgotPD-info .modal-dialog { width: 500px; } } #modal-forgotPD-info .modal-content { border-radius: 0; } #modal-forgotPD-info .modal-content .modal-body { border-radius: 0; padding-top: 100px; padding-bottom: 100px; } #modal-forgotPD-info .modal-content .modal-body > img { margin-bottom: 30px; } #modal-forgotPD-info .modal-content .modal-body .form-control { font-size: 0.8em; } .register-h2 { font-size: 1.2em; font-weight: 500; margin-top: 40px; } .register-login, .register-login:visited { color: #446ef6; font-size: 0.66em; font-weight: 300; text-decoration: none; padding: 2px 0; } .register-login:hover, .register-login:focus, .register-login:active, .register-login:visited:hover, .register-login:visited:focus, .register-login:visited:active { text-decoration: none; box-shadow: 0 1px #446ef6; } .register-stepper .stepper .nav { margin: 25px auto; } .register-stepper .register-form { color: #5c6466; text-align: left; } @media screen and (min-width: 1200px) { .register-stepper .register-form { padding-left: 7%; padding-right: 7%; } } .register-stepper .register-form .form-group .control-label { padding-right: 0; padding-top: 10px; margin-bottom: 5px; } .register-stepper .register-form .form-group .form-alert { padding-top: 10px; margin-bottom: 5px; } @media screen and (min-width: 992px) { .register-stepper .register-form .form-group div:last-child .form-alert { margin-left: -15px; } } .register-stepper .register-form .form-group.has-error .control-label { color: #5c6466; } .register-stepper .register-form .form-group.has-error .form-control { border-color: #ff0000; } .register-stepper .register-form .form-group.has-success .control-label { color: #5c6466; } .register-stepper .register-form .form-group.has-success .form-control { border-color: #ccc; } .register-stepper .register-form .form-group.has-success .form-control:focus { border-color: #4cc945; } .register-stepper .register-form .form-group.has-success .form-alert { color: #4cc945; } .register-stepper .register-form .form-group.has-success .form-alert .fa-check-circle { font-size: 1.2em; } .register-stepper .register-form.form1 { font-size: 0.8em; padding-top: 60px; padding-bottom: 100px; } .register-stepper .register-form.form1 .register-form__notice { line-height: 1.875em; margin-top: 35px; margin-bottom: 50px; } @media screen and (min-width: 992px) { .register-stepper .register-form.form1 .register-form__notice { margin-left: calc(-15px - 4.5em); } } .register-stepper .register-form.form2 { font-size: 0.8em; padding-top: 10px; padding-bottom: 100px; } .register-stepper .register-form.form2 .SRCradio-green { margin-top: 15px; margin-bottom: 15px; } .register-stepper .register-form.form2 .register-form__inline { width: auto; } .register-stepper .register-form.form2 .register-form__inline .SRCradio-green { display: inline-block; } .register-stepper .register-form.form2 .register-form__inline .form-inline { display: inline-block; } @media screen and (min-width: 992px) { .register-stepper .register-form.form2 .register-form__inline .form-inline { float: right; } } .register-stepper .register-form.form2 .register-form__inline .form-inline .form-group { margin-top: 3px; margin-left: 30px !important; } @media screen and (min-width: 992px) { .register-stepper .register-form.form2 .register-form__inline .form-inline .form-group { margin-left: 0px !important; margin-right: 0; } } .register-stepper .register-form.form2 .register-form__inline .form-inline .form-group .control-label { display: inline; } .register-stepper .register-form.form2 .register-form__inline .form-inline .form-group .form-control { display: inline-block; width: 150px; } .register-stepper .register-form.form2 .input-group > .form-control { border-right: 0; } .register-stepper .register-form.form2 .input-group > .input-group-addon { border-radius: 0; background-color: transparent; } .register-stepper .register-form.form2 .input-group > .input-group-addon > a { color: #595959; } .register-stepper .register-form.form2 .show_hide_password input[type="password"].hidePD { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } .register-stepper .register-form.form2 .show_hide_password input[type="password"].showPD { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif !important; } .register-stepper .register-form.form2 input[type="password"].confirm_password { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; } .register-stepper .register-form.form2 input[type="password"].confirm_password::placeholder { font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif !important; } .register-stepper .register-form.form2 .register-form__notice { border: 1px solid #c6c6c6; background-color: #f9f9f9; padding: 15px 25px; line-height: 1.875em; margin-bottom: 15px; } .register-stepper .register-form.form2 .register-form__checkbox { padding-left: 25px; } .register-stepper .register-form.form2 .register-form__checkbox > label { font-size: 16px; color: #2e3233; } .register-stepper .register-form.form3 { font-size: 0.9em; padding-top: 100px; padding-bottom: 100px; } .register-stepper .register-form.form3 .text-right > img { margin: 0 0 0 auto; } .register-stepper .register-form.form3 big { font-size: 1.5em; display: inline-block; margin-bottom: 35px; margin-top: -5px; } .register-stepper .register-form.form3 a.form-alert { margin-left: 35px !important; font-size: 0.88em; text-decoration: none; } .register-stepper .register-form.form3 a.form-alert:hover, .register-stepper .register-form.form3 a.form-alert:focus, .register-stepper .register-form.form3 a.form-alert:active { box-shadow: 0 1px #ff0000; } .register-stepper .register-form.form3 p { margin-bottom: 5px; } .register-stepper .register-form.form3 p:last-child { margin-bottom: 60px; } /* .register-form{ font-size:0.8em; line-height:1.875em; padding-top:45px; padding-bottom:45px; .register-form__warningText{ margin-top:40px; margin-bottom:40px; } }*/ .page-banner.userData-banner { background-image: url(../images/userData/banner-bg.png); background-position: right center; margin-bottom: 0; } @media screen and (min-width: 768px) { .page-banner.userData-banner { background-position: center center; } } .page-banner.userData-banner h1 { font-size: 1.5em; font-weight: 400; line-height: 1em; margin-top: 0; margin-bottom: 0; color: #FFF; text-align: left; line-height: 1.8em; } .join-all .order-wrap { padding: 40px 30px; } .join-all .order-wrap.order-wrap-contest { background-color: transparent; padding: 0; } .join-all .order-wrap.order-wrap-contest .order-body { background-color: #f4f8fb; } .join-all .order-wrap .order-body { padding: 0; background-color: white; } .join-all .order-wrap .order-body .grade_option { display: flex; flex-wrap: wrap; } .join-all .order-wrap .order-body .grade_option .grade_option_item { border: 1px solid #446ef6; margin: 5px; padding: 5px 0px; } .join-all .order-wrap .order-body .grade_option .grade_option_item a { padding: 5px 15px; } .join-all .order-wrap .order-body .grade_option .grade_option_item.active, .join-all .order-wrap .order-body .grade_option .grade_option_item:hover, .join-all .order-wrap .order-body .grade_option .grade_option_item:focus { background-color: #446ef6; } .join-all .order-wrap .order-body .grade_option .grade_option_item.active a, .join-all .order-wrap .order-body .grade_option .grade_option_item:hover a, .join-all .order-wrap .order-body .grade_option .grade_option_item:focus a { color: white; } .join-all .order-wrap .order-body .index-content .regional_option { display: flex; } .join-all .order-wrap .order-body .index-content .regional_option .btn { box-shadow: none; border-radius: 0px; width: 25%; border: 0px; padding: 10px 5px; background-color: rgba(230, 146, 245, 0.5); color: white; font-size: 14px; } .join-all .order-wrap .order-body .index-content .regional_option .btn.active, .join-all .order-wrap .order-body .index-content .regional_option .btn:hover, .join-all .order-wrap .order-body .index-content .regional_option .btn:focus { background-color: #e692f5; } .join-all .order-wrap .order-body .index-content table { border: 0; } .join-all .order-wrap .order-body .index-content table td { border: 0; } .join-all .order-wrap .order-body .dacc_introduce .dacc_logo { margin: 0 0 50px 0; } .join-all .order-wrap .order-body .dacc_introduce .dacc_logo img { width: 80%; max-width: 240px; } .join-all .order-wrap .order-body .dacc_introduce h3 { font-size: 17px; font-weight: normal; } .join-all .order-wrap .order-body .dacc_introduce .dacc_link { margin: 30px auto 60px; } .join-all .order-wrap .order-body .dacc_introduce .dacc_link a { background-color: #446ef6; color: white; padding: 10px 25px; border-radius: 50px; } .join-all .order-wrap .order-body .dacc_introduce .dacc_link a:hover, .join-all .order-wrap .order-body .dacc_introduce .dacc_link a:focus { background-color: #1348f4; } .join-all .order-wrap .order-body .dacc_photo_area { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_photo { width: 100%; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_text { width: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_text h4 { color: #446ef6; } .join-all .order-wrap .order-body .previous_web .previous_web_bg { border-bottom-right-radius: 20px; border-top-left-radius: 20px; margin: 30px auto; background-size: cover; padding: 40px 5px; cursor: pointer; } .join-all .order-wrap .order-body .previous_web .previous_web_bg a { color: white; } .join-all .order-wrap .order-body .recommendedBook-search__book { display: flex; flex-direction: column; margin-bottom: 0; background-color: white; } .join-all .order-wrap .order-body .recommendedBook-search__book .control-label { width: 200px; margin-right: 20px; margin-bottom: 20px; } .join-all .order-wrap .order-body .recommendedBook-search__book .control-label p { margin-top: 5px; text-align: right; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input { width: calc(100% - 0px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan { display: flex; flex-direction: column; margin-bottom: 20px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan .recommendedBook-search__slogan_title { border-bottom: 1px solid #5a5f60; white-space: nowrap; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group { display: flex; flex-direction: column; margin-bottom: 15px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn { border: 1px solid #446ef6; width: 100%; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn.input-group-btnSearch { background-color: #446ef6; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-recommend { margin: 0; width: 100%; height: 100%; border: 0px; border-radius: 0px; z-index: 1; color: #446ef6; font-size: 14px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-search { color: white; z-index: auto; width: 100%; border-radius: 0; margin: -1px auto 0px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right { position: relative; display: flex; flex-direction: column; width: 100%; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book { position: relative; width: 100%; margin-top: -1px; border: 1px solid #446ef6; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .input-group-btn { border: 0px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .input-searchBook { width: calc(100% - 127.5px); padding: 10px 16px; font-size: 18px; border: 0; position: relative; z-index: 1; background: transparent; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .form-control { border: 1px solid #5a5f60; border-radius: 0; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .input-group-more-options { position: absolute; width: 100%; height: 100%; top: 0; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .input-group-more-options .recommendedBook-search_more-options { position: relative; display: block; right: 0px; top: 0px; z-index: 2; margin-left: auto; padding: 10px 16px; line-height: 1.3333333; border-radius: 0%; color: #446ef6; height: 100%; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book .input-group-more-options .recommendedBook-search_more-options p { color: #446ef6; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options { position: absolute; top: 100%; width: 100%; padding: 20px 40px; border: 1px solid #446ef6; background-color: white; z-index: 1; display: none; margin: 0; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .input-group { display: flex; margin: 15px auto; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .input-group label { min-width: 70px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .input-group .form-control { border-radius: 0; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn { display: flex; justify-content: flex-end; margin: 5px auto; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .reset, .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .submit { padding: 3px 10px; border-radius: 5px; border: 0px; margin-left: 10px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .reset { color: #446ef6; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .submit { background-color: #446ef6; color: white; } .join-all .order-wrap .order-body .recommendedBook-search__sort { margin: 0px; background-color: white; } .join-all .order-wrap .order-body .recommendedBook-search__sort .icheck_area { margin: 0px auto; } .join-all .order-wrap .order-body .recommendedBook-search__sort .icheck_area .icheck-success-white { margin-left: 0; margin-right: 10px; padding: 5px 0; } .join-all .order-wrap .order-body .difficulty_range { display: flex; width: 100%; align-items: center; flex-wrap: wrap; margin: 15px 0 0; } .join-all .order-wrap .order-body .difficulty_range p { margin: 5px 10px 5px 0px; width: 100%; } .join-all .order-wrap .order-body .difficulty_range .difficulty_range_button_area { margin: 5px 10px 5px 0px; } .join-all .order-wrap .order-body .difficulty_range .difficulty_range_button_area button { border: 1px solid #5a5f60; border-radius: 0; } .join-all .order-wrap .order-body .difficulty_range .difficulty_range_button_area button.active, .join-all .order-wrap .order-body .difficulty_range .difficulty_range_button_area button:hover { background-color: #446ef6; border: 1px solid #446ef6; color: white; } .join-all .order-wrap .order-body .recommendedBook-table { border: 0px; } .join-all .order-wrap .order-body .recommendedBook-table tbody { display: flex; flex-wrap: wrap; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr { overflow: hidden; position: relative; display: inline-block; margin: 15px 0; padding: 10px; vertical-align: middle; width: 100%; display: flex; flex-direction: column; background-color: white; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td { border: 0px; background-color: transparent; display: block; table-layout: fixed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front { text-align: center; width: 100%; margin: 5px 0px; display: flex; align-items: center; max-width: 350px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front .book-front-link { position: relative; width: 100%; height: 100%; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front .book-front-link img { width: 100%; height: 100%; object-fit: cover; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front .book-front-link .book_red_ribbon { display: none; position: absolute; right: -7px; top: -7px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front .book-front-link.have_ribbon .book_red_ribbon { display: block; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item { display: flex; flex-wrap: wrap; align-items: flex-start; width: 65%; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .book-SR, .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .book-sort, .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .book-winning, .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .book-recommender { width: 100%; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn { width: auto; margin: 10px 8px 10px 0; display: inline-block; text-align: left; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button { border: 1px solid #5a5f60; margin: 5px auto; font-size: 14px; padding: 10px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button img { width: 20px; } .join-all .order-wrap .filter_criteria { padding: 10px; } .leveledBooks-table__footer, .notUploadedTable_footer, .readingClub-list__footer { text-align: center; padding-top: 45px; padding-bottom: 70px; font-size: 0.9em; } .leveledBooks-table__footer .dataTables_paginate, .notUploadedTable_footer .dataTables_paginate, .readingClub-list__footer .dataTables_paginate { display: inline-block; float: none; padding-top: 0; } .leveledBooks-table__footer .dataTables_paginate .paginate_button, .notUploadedTable_footer .dataTables_paginate .paginate_button, .readingClub-list__footer .dataTables_paginate .paginate_button { min-width: 1.5em; padding: 0.35em; margin: 4px 2px; border-radius: 0; background-color: white; border: 1px solid #E2E2E2; color: #5a5f60 !important; } .leveledBooks-table__footer .dataTables_paginate .paginate_button.current, .notUploadedTable_footer .dataTables_paginate .paginate_button.current, .readingClub-list__footer .dataTables_paginate .paginate_button.current { background-color: transparent; color: #446ef6 !important; font-weight: 500; border: 1px solid transparent; background: none; box-shadow: none; cursor: default; } .leveledBooks-table__footer .dataTables_paginate .paginate_button.current:active, .leveledBooks-table__footer .dataTables_paginate .paginate_button.current:hover, .notUploadedTable_footer .dataTables_paginate .paginate_button.current:active, .notUploadedTable_footer .dataTables_paginate .paginate_button.current:hover, .readingClub-list__footer .dataTables_paginate .paginate_button.current:active, .readingClub-list__footer .dataTables_paginate .paginate_button.current:hover { background-color: transparent; color: #446ef6 !important; font-weight: 500; border: 1px solid transparent; background: none; box-shadow: none; cursor: default; } .leveledBooks-table__footer .dataTables_info, .notUploadedTable_footer .dataTables_info, .readingClub-list__footer .dataTables_info { display: inline-block; float: none; color: #5c6466; margin-top: 5px; } .leveledBooks-table__footer .add_dataTables_input, .notUploadedTable_footer .add_dataTables_input, .readingClub-list__footer .add_dataTables_input { display: inline-block; color: #5c6466; margin-top: 5px; } .leveledBooks-table__footer .add_dataTables_input .paginate_input, .notUploadedTable_footer .add_dataTables_input .paginate_input, .readingClub-list__footer .add_dataTables_input .paginate_input { border-radius: 0; width: 48px; padding: 10px 10px; } .leveledBooks-table__footer .add_dataTables_input .paginate_button, .notUploadedTable_footer .add_dataTables_input .paginate_button, .readingClub-list__footer .add_dataTables_input .paginate_button { margin-left: 35px; background-color: #f1f1f1; border: 1px solid #c6c6c6; color: #2e3233; padding: 11px 18px; margin-top: -5px; } @media screen and (min-width: 576px) { .join-all .order-wrap .order-body .grade_option { justify-content: center; } } @media screen and (min-width: 768px) { .join-all .order-wrap .order-body .index-content .regional_option .btn { font-size: 15px; } .join-all .order-wrap .order-body .dacc_introduce h3 { font-size: 19px; } .join-all .order-wrap .order-body .difficulty_range p { width: auto; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn { text-align: center; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button { font-size: 15px; } } @media screen and (min-width: 992px) { .join-all .order-wrap .order-body .index-content .regional_option .btn { font-size: 17px; } .join-all .order-wrap .order-body .dacc_introduce h3 { font-size: 30px; } .join-all .order-wrap .order-body .difficulty_range p { width: auto; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan .recommendedBook-search__slogan_title { border-bottom: 0px solid #5a5f60; padding-bottom: 0px; margin-bottom: 0px; border-right: 1px solid #5a5f60; padding-right: 10px; margin-right: 10px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-recommend { font-size: 15px; } .join-all .order-wrap .order-body .recommendedBook-table tbody { justify-content: space-between; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr { width: calc(50% - 15px); } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn { text-align: left; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button { font-size: 17px; } } @media screen and (min-width: 1200px) { .join-all .order-wrap { padding: 80px 60px; } .join-all .order-wrap .order-body { padding: 0; } .join-all .order-wrap .order-body .dacc_introduce h3 { font-size: 34px; } .join-all .order-wrap .order-body .filter_criteria { padding: 25px 15px; } .join-all .order-wrap .order-body .previous_web .previous_web_bg { margin: 0 5px 60px; } .join-all .order-wrap .order-body .recommendedBook-search__book { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-search__book.filter_criteria { padding: 55px 15px 25px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input { width: calc(100% - 200px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan .recommendedBook-search__slogan_title { border-bottom: 0px solid #5a5f60; padding-bottom: 0px; margin-bottom: 0px; border-right: 1px solid #5a5f60; padding-right: 10px; margin-right: 10px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-recommend { font-size: 17px; } .join-all .order-wrap .order-body .recommendedBook-search__sort { padding: 0; background-color: white; } .join-all .order-wrap .order-body .recommendedBook-search__sort .icheck_area { margin: 0; background-color: white; } .join-all .order-wrap .order-body .recommendedBook-search__sort .icheck_area .icheck-success-white { padding: 15px 0; } .join-all .filter_criteria { padding: 20px 10px; } } @media screen and (min-width: 1400px) { .join-all .order-wrap .order-body .index-content .regional_option .btn { font-size: 19px; } .join-all .order-wrap .order-body .dacc_photo_area { flex-direction: row; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_photo { width: 50%; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_photo:nth-child(1) { order: 1; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_photo:nth-child(3) { order: 4; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_text { width: 50%; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_text:nth-child(4) { order: 3; } .join-all .order-wrap .order-body .dacc_photo_area .dacc_text:nth-child(2) { order: 2; } .join-all .order-wrap .order-body .recommendedBook-search__book { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-search__book .control-label { margin-bottom: 0px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn { width: 140px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-recommend { font-size: 19px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-search { margin: 1px 0px 0px 0px; font-size: 19px; } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right { flex-direction: row; width: calc(100% - 140px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .input-group-book { margin-top: 0px; margin-left: -1px; width: calc(100% - 140px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options { transform: translate(-1px, -1px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .input-group .form-control { width: calc(100% - 40px - 140px); } .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .reset, .join-all .order-wrap .order-body .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-right .recommendedBook-search_dropdown-menu_more-options .multiple_input_area .multiple_input_btn .submit { padding: 10px 30px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn { text-align: center; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button { font-size: 19px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item .borrow_btn button img { width: 30px; } } @media screen and (min-width: 1600px) { .join-all .order-wrap .order-body .recommendedBook-table { border: 0px; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr { flex-direction: row; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-front { width: 40%; align-items: flex-start; } .join-all .order-wrap .order-body .recommendedBook-table tbody tr td.book-item { width: 60%; } .join-all .order-wrap .order-body .recommendedBook-search__sort .icheck_area { display: flex; justify-content: center; } } .join-all .order-wrap .order-page { display: flex; flex-wrap: wrap; } .join-all .order-wrap .order-page h3 { width: 100%; } .join-all .order-wrap .order-page .team_logo { width: 49%; margin: 5px 0.5%; } .join-all .order-wrap .order-page .team_logo img { padding: 10px; border: 1px solid #5a5f60; margin: 5px; } @media screen and (min-width: 992px) { .join-all .order-wrap .order-page .team_logo { width: 32%; } } @media screen and (min-width: 1200px) { .join-all .order-wrap .order-page .team_logo { width: 24%; } } @media screen and (min-width: 1400px) { .join-all .order-wrap .order-page .team_logo { width: 19%; } } .join-all .order-wrap.download_container { margin: 0 auto; } .join-all .order-wrap.download_container .order-body .index-content__block ul li { margin: 10px auto; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a { display: flex; align-items: center; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a i { background-color: #446ef6; border-radius: 50%; color: white; text-align: center; width: 25px; height: 25px; position: relative; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a i:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a:hover p, .join-all .order-wrap.download_container .order-body .index-content__block ul li a:focus p { color: #446ef6; } @media screen and (min-width: 768px) { .join-all .order-wrap.download_container { width: 90%; } .join-all .order-wrap.download_container .order-body .index-content__block ul li { margin: 15px auto; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a i { width: 30px; height: 30px; } .join-all .order-wrap.download_container .order-body .index-content__block ul li a i:before { width: 19px; } } @media screen and (min-width: 1200px) { .join-all .order-wrap.download_container .order-body .index-content__block ul li a i { width: 35px; height: 35px; } } .join-all .order-wrap .order-body .timeline_area { margin: 60px 0px 0px 12.5px; } .join-all .order-wrap .order-body .timeline_area .timeline_item { display: flex; align-items: flex-start; position: relative; flex-direction: row-reverse; } .join-all .order-wrap .order-body .timeline_area .timeline_item:nth-last-child(1) .timeline_content .timeline_content_inner { padding: 0px 0px 15px 30px; } .join-all .order-wrap .order-body .timeline_area .timeline_item:nth-last-child(1) .timeline_marker:before { display: none; } .join-all .order-wrap .order-body .timeline_area .timeline_item:nth-last-child(1) .timeline_marker .timeline_marker_inner::after { display: none; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_content { flex-basis: 100%; min-width: 25%; margin-top: -20px; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_content .timeline_content_inner { display: flex; justify-content: flex-start; padding: 0px 0px 60px 30px; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker { display: flex; align-items: center; justify-content: center; margin-top: -20px; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker:before { position: absolute; top: 0; bottom: 0px; width: 10px; content: ''; background: #446ef6; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker .timeline_marker_inner { z-index: 1; line-height: 0; position: relative; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker .timeline_marker_inner::after { content: ""; position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0px); width: 25px; height: 25px; border: 2px solid; background-color: white; border-radius: 50%; z-index: -1; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker .timeline_marker_inner img { position: absolute; left: 50%; top: 0%; transform: translate(-50%, 0px); width: 50px; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_item_meta { flex-basis: 0%; } .join-all .order-wrap .order-body .certificate img { width: 150px; } .join-all .order-wrap .order-body .traffic_information { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .join-all .order-wrap .order-body .traffic_information .test_area { width: 100%; margin: 0px 0px 20px; } .join-all .order-wrap .order-body .traffic_information .test_area .table-responsive .table { min-width: 450px; } .join-all .order-wrap .order-body .icon_task { text-align: center; } .join-all .order-wrap .order-body .icon_task img { width: 80%; max-width: 80px; } .join-all .order-wrap .order-body .icon_task_flex { display: flex; } .join-all .order-wrap .order-body .icon_task_flex.login_system { flex-direction: column; max-width: 400px; margin: 0px auto; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top { display: flex; justify-content: space-between; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top .login_system_title { transform: translate(0%, -50%); } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top .icon_task.top_left { width: 20%; border-top: 2px dotted #5a5f60; border-left: 2px dotted #5a5f60; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top .icon_task.top_right { width: 20%; border-top: 2px dotted #5a5f60; border-right: 2px dotted #5a5f60; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top .icon_task.bottom_left { width: 20%; border-bottom: 2px dotted #5a5f60; border-left: 2px dotted #5a5f60; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_top .icon_task.bottom_right { width: 20%; border-bottom: 2px dotted #5a5f60; border-right: 2px dotted #5a5f60; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_center { margin: 20px 0px; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_center .icon_task_flex { justify-content: space-between; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_center .icon_task_flex .icon_task_left { transform: translate(-50%, 0%); } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_center .icon_task_flex .icon_task_right { transform: translate(50%, 0%); } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_bottom { display: flex; justify-content: space-between; } .join-all .order-wrap .order-body .icon_task_flex.login_system .login_system_bottom .login_system_title { transform: translate(0%, -50%); } .join-all .order-wrap .order-body .leading_dotted { border-left: 2px dotted #5a5f60; height: 50px; width: 2px; margin: 20px auto; } .join-all .order-wrap .order-body .detailing { display: flex; } .join-all .order-wrap .order-body .activity_process { margin: 40px auto; } .join-all .order-wrap .order-body .activity_process .process_step { display: flex; align-items: center; flex-direction: column; margin: 20px auto; } .join-all .order-wrap .order-body .activity_process .process_step .activity_process_img { width: 60%; margin-bottom: 10px; } .join-all .order-wrap .order-body .activity_process .activity_process_line { width: 2px; height: 50px; border-right: 2px dotted #5a5f60; height: 80px; width: calc(50% - 2px); } .join-all .order-wrap .order-body .activity_process .subproject { display: flex; justify-content: space-between; flex-direction: column; } .join-all .order-wrap .order-body .activity_process .subproject .activity_process_line { height: 100px; order: 2; margin-top: 10px; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right { display: flex; align-items: center; justify-content: space-between; order: 1; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right h3 { width: auto; color: #5a5f60; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right .subproject_icon { width: 45%; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right .subproject_icon .activity_process_img { width: 60%; max-width: 100px; margin: 0 auto; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right .subproject_icon .activity_process_text { text-align: center; } .join-all .order-wrap .order-body .fish_tittle { display: flex; align-items: center; } .join-all .order-wrap .order-body .fish_tittle .fish_tittle_img { max-width: 65px; margin: 0 15px 0 0; } .join-all .order-wrap .order-body .qualifications_area { width: 75%; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item { position: relative; width: 220px; margin: 20px 3px; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item .qualifications_item_text { position: absolute; width: 75%; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item .qualifications_item_text p { color: white; font-size: 14px; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item .qualifications_item_fish { position: absolute; bottom: 0; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item .qualifications_item_num { position: absolute; width: 19%; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_one .qualifications_item_text { top: 50%; left: 30%; transform: translate(0, -50%); } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_one .qualifications_item_fish { right: 0; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_one .qualifications_item_num { left: 10%; top: 50%; transform: translate(0, -50%); } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_two .qualifications_item_text { top: 40%; left: 13%; transform: translate(0, -50%); } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_two .qualifications_item_fish { left: 0; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_two .qualifications_item_num { right: 0; bottom: 0; transform: translate(-50%, -50%); } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_three .qualifications_item_text { top: 50%; left: 55%; transform: translate(-50%, -50%); } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_three .qualifications_item_fish { right: 0; } .join-all .order-wrap .order-body .qualifications_area .qualifications_item.qualifications_item_three .qualifications_item_num { left: 0; top: 50%; transform: translate(-20%, -50%); } .join-all .order-wrap .order-body .participating_group_area { display: flex; justify-content: space-between; width: 75%; margin: 0 auto; min-width: 780px; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item { position: relative; width: 100%; min-height: 220px; padding: 20px 0 70px; margin: 20px 0 0 30px; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item.participating_group_item_one { background-color: #56b5cd; margin: 20px 0 0; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item.participating_group_item_two { background-color: #438283; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item.participating_group_item_three { background-color: #8db959; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item .participating_group_item_text { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 75%; margin: 0 auto; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item .participating_group_item_text .participating_group_item_text_img { margin: 0 auto 20px; width: 100%; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item .participating_group_item_text .participating_group_item_text_p { margin: 0 auto; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item .participating_group_item_text p { color: white; } .join-all .order-wrap .order-body .participating_group_area .participating_group_item .participating_group_item_img { position: absolute; left: 0; bottom: 0; width: 100%; } .join-all .order-wrap .order-body .registration_notice { padding: 25px; background-color: #e2f9ff; border-radius: 5px; border: 2px dotted #E2E2E2; position: relative; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area { display: flex; justify-content: center; flex-direction: column; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area .registration_notice_btn_item { background-color: #446ef6; border-radius: 5px; margin: 25px 0 0; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area .registration_notice_btn_item a { display: block; padding: 20px 35px; color: white; text-align: center; } .join-all .order-wrap .order-body .registration_notice .table_squid { display: none; } .join-all .order-wrap .order-body .national_competition { position: relative; } .join-all .order-wrap .order-body .national_competition table { border: 0px; } .join-all .order-wrap .order-body .national_competition table td { border: 1px solid white; } .join-all .order-wrap .order-body .national_competition table thead tr td { background-color: #56b5cd; color: white; } .join-all .order-wrap .order-body .national_competition table tbody tr td { background-color: #fff2ca; } .join-all .order-wrap .order-body .national_competition .table_starfish { position: absolute; bottom: 0; left: 0%; transform: translate(-50%, 50%); width: 50px; } .join-all .order-wrap .order-body .top_menu_area { display: flex; justify-content: center; margin: 0 auto 50px; } .join-all .order-wrap .order-body .top_menu_area .top_menu_item { margin: 0 15px; } .join-all .order-wrap .order-body .top_menu_area .top_menu_item a { color: black; } .join-all .order-wrap .order-body .top_menu_area .top_menu_item.active a { color: #446ef6; padding: 0 0 5px; border-bottom: 2px solid; } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item { border-radius: 5px; margin: 20px auto 0; background-size: cover; background-repeat: no-repeat; } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item.individual { background-image: url(../../Content/images/parti_contest/bg/school_group.png); } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item.general_group { background-image: url(../../Content/images/parti_contest/bg/general_group.png); } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item.school_group { background-image: url(../../Content/images/parti_contest/bg/school_group.png); } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item .sign_up_btn_item_link { width: 100%; padding: 30px 0; display: block; color: white; text-align: center; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area { border-bottom: 1px solid #5a5f60; display: flex; justify-content: center; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item { min-width: 150px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 10px; border-radius: 10px 10px 0 0; background-color: #f9f9f9; border: 1px solid #5a5f60; transform: translate(0, 1px); } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link.active { background-color: transparent; border-bottom: 1px solid white; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link .data_entry_btn_icon { width: 60px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link .data_entry_btn_text { text-align: center; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item.general_group { margin: 0 20px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .multiple_input_area_tittle { display: flex; align-items: center; justify-content: center; margin: 30px auto; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .multiple_input_area_tittle .multiple_input_area_tittle_img { width: 45%; max-width: 140px; margin: 0 20px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group { display: flex; flex-wrap: wrap; margin: 0 auto 20px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .input-group-label { width: 100%; margin: 0 0 5px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .input-group-label span { color: #ff0000; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control { width: 100%; height: auto; padding: 10px 12px; line-height: 1.5; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control.teacher_certification_show { cursor: auto; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control.form-select-two.form-select-school-one { margin: 0 0 10px 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .verify_email { padding: 5px 15px; background-color: #446ef6; border-radius: 5px; margin: 10px 0 0 0; cursor: pointer; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .verify_email p { color: white; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .email_verified { display: flex; align-items: center; margin: 10px 0 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .email_verified .email_verified_icon { width: 20px; margin: 0 10px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .form-control { width: calc(100% - 75px); background-color: transparent; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .btn-file { width: 75px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .btn-file .input-group-text { color: #446ef6; background-color: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 0px; padding: 0.375rem 0rem; margin: 0; height: 100%; padding: 10px 12px; transform: translate(-1px, 0px); } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .btn-file .fileUpload-file { width: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area { margin: 40px auto; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area { display: flex; justify-content: center; flex-wrap: wrap; margin: 40px auto; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item { padding: 10px 15px; width: 100%; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item.generated_code { background-color: #446ef6; margin: 0 0 20px; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item.generated_code p { color: white; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item.inquiry_team { border: 1px solid #446ef6; background-color: transparent; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item.inquiry_team p { color: #446ef6; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item:disabled { opacity: 0.5; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .generated_code_img_area { position: relative; width: 100%; max-width: 315px; margin: 0 auto; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .generated_code_img_area .generated_code_img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-height: 65%; max-width: 65%; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .generated_code_text { display: flex; justify-content: center; margin: 20px auto; color: #ff0000; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_caption { background-color: #f9f9f9; border: 1px solid #5a5f60; padding: 20px; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_caption p span { color: #446ef6; } .join-all .order-wrap .order-body .parti_contest_content .general_group_btn_confirm { display: flex; justify-content: center; margin: 40px auto 0; padding: 10px 15px; width: 100%; max-width: 330px; background-color: #446ef6; } .join-all .order-wrap .order-body .parti_contest_content .general_group_btn_confirm p { color: white; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area { display: flex; align-items: center; flex-direction: column; margin: 0 auto 100px; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area h5 { margin: 20px auto; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area p span { color: #446ef6; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group { display: flex; align-items: center; margin: 20px auto; max-width: 440px; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .input-group-label { width: 40px; margin: 0 10px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .form-control { width: calc(100% - 75px - 60px); height: auto; padding: 10px 12px; line-height: 1.5; background-color: transparent; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .form-control:disabled { cursor: auto; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .btn-file { width: 75px; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .btn-file .input-group-text { color: #446ef6; background-color: transparent; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 0px; padding: 0.375rem 0rem; margin: 0; height: 100%; padding: 10px 12px; transform: translate(-1px, 0px); } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .input-group .btn-file .fileUpload-file { width: 100%; opacity: 0; position: absolute; top: 0; left: 0; cursor: pointer; } .join-all .order-wrap .order-body .parti_contest_content .add_batches_area .general_group_btn_confirm { margin: 20px auto 0; padding: 5px 15px; max-width: 315px; } .join-all .order-wrap .order-body .info_signUp__h3 { display: flex; align-items: center; justify-content: center; margin: 0 auto; } .join-all .order-wrap .order-body .info_signUp__h3 img { margin: 0 15px 0 0; } .join-all .order-wrap .order-body .info_signUp__form .form-group .control-input { margin: 10px 0 20px; } .join-all .order-wrap .order-body .info_signUp__form .form-group .control-input .form-control { padding: 20px 15px; } .join-all .order-wrap .order-body .info_signUp__form .form-group .form-group-btn { margin: 30px auto; padding: 10px; background-color: #446ef6; border-radius: 15px; display: flex; justify-content: center; max-width: 250px; } .join-all .order-wrap .order-body .info_signUp__form .form-group .form-group-btn .form-group-submit { color: white; text-align: center; padding: 5px 15px; } .join-all .order-wrap .table-responsive { overflow-x: scroll; margin: 10px auto; border: 0px; } .join-all .order-wrap .table-responsive.registery_fee thead tr td:nth-child(1) { width: 10%; } .join-all .order-wrap .table-responsive.registery_fee thead tr td:nth-child(2) { width: 30%; } .join-all .order-wrap .table-responsive.registery_fee thead tr td:nth-child(3) { width: 30%; } .join-all .order-wrap .table-responsive.registery_fee thead tr td:nth-child(4) { width: 30%; } .join-all .order-wrap .table-responsive.quiz_location thead tr td:nth-child(1) { width: 15%; } .join-all .order-wrap .table-responsive.quiz_location thead tr td:nth-child(2) { width: 30%; } .join-all .order-wrap .table-responsive.quiz_location thead tr td:nth-child(3) { width: 30%; } .join-all .order-wrap .table-responsive.quiz_location thead tr td:nth-child(4) { width: 25%; } .join-all .order-wrap .table-responsive.diagnosis table { table-layout: initial; } .join-all .order-wrap .table-responsive.diagnosis table tbody tr td:nth-child(1) { width: 30%; } .join-all .order-wrap .table-responsive.diagnosis table tbody tr td:nth-child(2) { width: 70%; } .join-all .order-wrap .table-responsive.traffic_table table { table-layout: initial; } .join-all .order-wrap .table-responsive.traffic_table table tbody tr td:nth-child(1) { width: 30%; } .join-all .order-wrap .table-responsive.traffic_table table tbody tr td:nth-child(2) { width: 70%; } .join-all .order-wrap .table-responsive.traffic_table table tbody tr td img { max-width: 180px; } .join-all .order-wrap .table-responsive.point_description table { border: 0px; } .join-all .order-wrap .table-responsive.point_description table td { border: 1px solid white; } .join-all .order-wrap .table-responsive.point_description table thead tr td { background-color: #56b5cd; color: white; } .join-all .order-wrap .table-responsive.point_description table thead tr td:nth-child(1) { width: 20%; } .join-all .order-wrap .table-responsive.point_description table thead tr td:nth-child(2) { width: 20%; } .join-all .order-wrap .table-responsive.point_description table thead tr td:nth-child(3) { width: 50%; } .join-all .order-wrap .table-responsive.point_description table thead tr td:nth-child(4) { width: 10%; } .join-all .order-wrap .table-responsive.point_description table tbody tr td { background-color: #fff2ca; } .join-all .order-wrap .table-responsive.regional_awards table { border: 0px; } .join-all .order-wrap .table-responsive.regional_awards table td { border: 1px solid white; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td { background-color: #56b5cd; color: white; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td:nth-child(1) { width: 15%; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td:nth-child(2) { width: 15%; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td:nth-child(3) { width: 20%; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td:nth-child(4) { width: 20%; } .join-all .order-wrap .table-responsive.regional_awards table thead tr td:nth-child(5) { width: 20%; } .join-all .order-wrap .table-responsive.regional_awards table tbody tr td { background-color: #fff2ca; } .join-all .order-wrap .table-responsive.national_awards table { border: 0px; } .join-all .order-wrap .table-responsive.national_awards table td { border: 1px solid white; } .join-all .order-wrap .table-responsive.national_awards table thead tr td { background-color: #56b5cd; color: white; } .join-all .order-wrap .table-responsive.national_awards table thead tr td:nth-child(1) { width: 15%; } .join-all .order-wrap .table-responsive.national_awards table thead tr td:nth-child(2) { width: 15%; } .join-all .order-wrap .table-responsive.national_awards table thead tr td:nth-child(3) { width: 20%; } .join-all .order-wrap .table-responsive.national_awards table thead tr td:nth-child(4) { width: 20%; } .join-all .order-wrap .table-responsive.national_awards table thead tr td:nth-child(5) { width: 20%; } .join-all .order-wrap .table-responsive.national_awards table tbody tr td { background-color: #fff2ca; } .join-all .order-wrap .table-responsive.special_awards table { border: 0px; } .join-all .order-wrap .table-responsive.special_awards table td { border: 1px solid white; } .join-all .order-wrap .table-responsive.special_awards table thead tr td { background-color: #56b5cd; color: white; } .join-all .order-wrap .table-responsive.special_awards table thead tr td:nth-child(1) { width: 15%; } .join-all .order-wrap .table-responsive.special_awards table thead tr td:nth-child(2) { width: 28.33333%; } .join-all .order-wrap .table-responsive.special_awards table thead tr td:nth-child(3) { width: 28.33333%; } .join-all .order-wrap .table-responsive.special_awards table thead tr td:nth-child(4) { width: 28.33333%; } .join-all .order-wrap .table-responsive.special_awards table tbody tr td { background-color: #fff2ca; } .join-all .order-wrap .table-responsive.registration_price { border: 0px; overflow: hidden; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content { display: flex; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left { width: 95px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 50px; margin: 0 20px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item { padding: 15px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item .registration_price_head_item_tittle { display: flex; justify-content: center; flex-direction: column; margin: 0 0 10px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item .registration_price_head_item_tittle img { width: 45px; margin: 0 auto 10px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item h5, .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item p { text-align: center; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item.early_bird_area h5, .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item.early_bird_area p { color: #e65551; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item.original_price_area { border-top: 1px dotted #5c6466; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item.original_price_area h5, .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item.original_price_area p { color: #5c6466; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right { display: flex; overflow-x: scroll; width: calc(100% - 95px); } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item { display: flex; flex-direction: column; justify-content: space-between; border: 1px solid; margin: 0 5px 0 0; min-width: 266px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_head { position: relative; z-index: 1; padding: 27px 5px 40px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_head h5 { color: white; text-align: center; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_head .registration_price_content_right_item_icon { position: absolute; z-index: -1; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 20px; border-radius: 50%; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body { padding: 70px 20px 30px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_top { display: flex; justify-content: center; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_top p { text-align: center; font-weight: bold; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_top h4 { font-size: 40px; margin: 50px 0 0; padding: 0 0 25px; color: #e65551; text-align: center; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_bottom { display: flex; flex-wrap: wrap; justify-content: center; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_bottom h4 { margin: 25px auto 50px; color: #5c6466; text-align: center; font-weight: bold; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item .registration_price_content_right_item_body .registration_price_content_right_item_body_bottom a { display: block; width: 100%; padding: 15px; text-align: center; background-color: #446ef6; color: white; border-radius: 5px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_one { border-color: #56b5cd; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_one .registration_price_content_right_item_head { background-color: #56b5cd; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_one .registration_price_content_right_item_head .registration_price_content_right_item_icon { background-color: #56b5cd; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_one .registration_price_content_right_item_body .registration_price_content_right_item_body_top { border-bottom: 1px dotted #56b5cd; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_one .registration_price_content_right_item_body .registration_price_content_right_item_body_top p { color: #56b5cd; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two { border-color: #4382d0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_head { background-color: #4382d0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_head .registration_price_content_right_item_icon { background-color: #4382d0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_top { border-bottom: 1px dotted #4382d0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_top p { color: #4382d0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_top .registration_price_body_top_item:nth-child(1) { margin: 0 12px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_top .registration_price_body_top_item:nth-child(2) { margin: 0 0 0 12px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_bottom .registration_price_body_bottom_item:nth-child(1) { margin: 0 12px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_two .registration_price_content_right_item_body .registration_price_content_right_item_body_bottom .registration_price_body_bottom_item:nth-child(2) { margin: 0 0 0 12px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_three { border-color: #8db959; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_three .registration_price_content_right_item_head { background-color: #8db959; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_three .registration_price_content_right_item_head .registration_price_content_right_item_icon { background-color: #8db959; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_three .registration_price_content_right_item_body .registration_price_content_right_item_body_top { border-bottom: 1px dotted #8db959; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right .registration_price_content_right_item.registration_price_content_right_three .registration_price_content_right_item_body .registration_price_content_right_item_body_top p { color: #8db959; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head { background-color: #56b5cd; color: white; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item { padding: 30px 8px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item p { color: white; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.early_bird_area { width: 100%; border: 1px solid white; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.early_bird_area .early_bird { padding: 10px 20px 10px 60px; background-color: #e65551; border-radius: 50px; position: relative; margin: 0 0 10px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.early_bird_area .early_bird .table_bird { width: 90px; position: absolute; left: 0; top: 50%; transform: translate(-30px, -50%); } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.original_price_area { width: 100%; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.original_price_area .table_price { width: 70px; margin: 0 0 10px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_body .registration_price_body_row { display: flex; flex-wrap: wrap; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_body .registration_price_body_row .registration_price_body_item_content { width: 100%; border: 1px solid white; background-color: #fff2ca; padding: 15px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_body .registration_price_body_row .registration_price_body_item_content .registration_price_body_item { display: flex; justify-content: center; align-items: center; padding: 10px 8px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_body .registration_price_body_row .registration_price_body_item_content .registration_price_body_item p { text-align: center; } .join-all .order-wrap .table-responsive.eligibility table { table-layout: initial; } .join-all .order-wrap .table-responsive.eligibility table tbody tr td:nth-child(1) { width: 20%; } .join-all .order-wrap .table-responsive.eligibility table tbody tr td:nth-child(2) { width: 60%; } .join-all .order-wrap .table-responsive.eligibility table tbody tr td:nth-child(3) { width: 20%; } .join-all .order-wrap .table-responsive .table { font-weight: 300; min-width: 1000px; } .join-all .order-wrap .table-responsive .table thead tr td { background-color: #f9f9f9; padding: 30px 8px; } .join-all .order-wrap .table-responsive .table thead.middle tr td { vertical-align: middle; } .join-all .order-wrap .table-responsive .table tbody tr td { padding: 30px 8px; white-space: initial; } .join-all .order-wrap .table-responsive .table tbody tr td .table_arrow { max-width: 18px; margin: 10px auto; } .join-all .order-wrap .table-responsive .table tbody.middle tr td { vertical-align: middle; } .join-all .order-wrap .registration_process { position: relative; padding: 0 0 13px 0; border: 0; } .join-all .order-wrap .registration_process .registration_process_content { display: flex; overflow-x: scroll; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item { position: relative; border: 1px solid white; min-width: 230px; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item p { font-weight: bold; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_head { color: white; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_head .registration_process_head_item { padding: 15px 8px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_head .registration_process_head_item p { color: white; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_body_row { display: flex; flex-wrap: wrap; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_body_row .registration_process_body_item_content { width: 100%; padding: 15px 0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_body_row .registration_process_body_item_content .registration_process_body_item { display: flex; justify-content: center; align-items: center; padding: 10px 8px; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_body_row .registration_process_body_item_content .registration_process_body_item p { text-align: center; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_body_row .registration_process_body_item_content .registration_process_body_item p .table_arrow { max-width: 18px; margin: 10px auto; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img { width: 100%; position: absolute; bottom: 0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item { position: absolute; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_seaweed_one { width: 45px; left: 0; bottom: 0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_stone_one { width: 70px; right: 0; bottom: 0; transform: translate(calc(-100% - -40px), 0px); } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_seaweed_two { width: 40px; left: 0; bottom: 0; transform: translate(20px, 0); } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_seaweed_three { width: 88px; left: 0; bottom: 0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_stone_two { width: 85px; right: 0; bottom: 0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_one { background-color: #d7f7ff; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_one .registration_process_head { background-color: #56b5cd; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_two { background-color: #deedff; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_two .registration_process_head { background-color: #4382d0; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_three { background-color: #eeffda; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item.registration_process_content_item_three .registration_process_head { background-color: #8db959; } .student_information_area .student_information_area_top { display: flex; justify-content: space-between; } .student_information_area .student_information_area_top a { cursor: pointer; } .student_information_area .student_information_area_top a span { color: #ff0000; } .student_information_area .student_information_area_top a:hover { text-decoration: underline #ff0000; } .student_information_area .student_information_table { min-width: 1200px !important; font-weight: normal !important; border: 0px; border-bottom: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2; } .student_information_area .student_information_table thead { width: 100%; } .student_information_area .student_information_table thead tr th { padding: 15px 10px; color: #2e3233; border-right: 1px solid #E2E2E2; border-left: 0px; border-bottom: 0px; font-weight: normal; text-align: center; } .student_information_area .student_information_table tbody { text-align: center; } .student_information_area .student_information_table tbody tr { width: 100%; } .student_information_area .student_information_table tbody tr.student_area { width: 100%; height: auto; padding: 0; background-color: white; } .student_information_area .student_information_table tbody tr.student_area td { vertical-align: middle; word-wrap: break-word; border-right: 1px solid #E2E2E2; border-left: 0px; border-bottom: 0px; } .student_information_area .student_information_table tbody tr.student_area td.student_delete button img { width: 24px; } .student_information_area .leveledBooks-table__footer .paging_simple_numbers .paginate_button, .student_information_area .notUploadedTable_footer .paging_simple_numbers .paginate_button, .student_information_area .readingClub-list__footer .paging_simple_numbers .paginate_button { background: #f7f7f8; border: 1px solid #e0e0e0; } .student_information_area .leveledBooks-table__footer .paging_simple_numbers .paginate_button:hover, .student_information_area .notUploadedTable_footer .paging_simple_numbers .paginate_button:hover, .student_information_area .readingClub-list__footer .paging_simple_numbers .paginate_button:hover { color: #446ef6 !important; } .student_information_area .leveledBooks-table__footer .paging_simple_numbers .paginate_button.paginate_button.current, .student_information_area .notUploadedTable_footer .paging_simple_numbers .paginate_button.paginate_button.current, .student_information_area .readingClub-list__footer .paging_simple_numbers .paginate_button.paginate_button.current { color: #ff0000 !important; background: transparent; border: 0px solid #e0e0e0; } .student_information_area .leveledBooks-table__footer .paging_simple_numbers .paginate_button.disabled, .student_information_area .notUploadedTable_footer .paging_simple_numbers .paginate_button.disabled, .student_information_area .readingClub-list__footer .paging_simple_numbers .paginate_button.disabled { background: #eff0f1; color: #bdc0c1 !important; } .student_information_area .leveledBooks-table__footer .paging_simple_numbers .paginate_button.disabled i, .student_information_area .notUploadedTable_footer .paging_simple_numbers .paginate_button.disabled i, .student_information_area .readingClub-list__footer .paging_simple_numbers .paginate_button.disabled i { color: #bdc0c1 !important; } .student_information_area .leveledBooks-table__footer .add_dataTables_input, .student_information_area .notUploadedTable_footer .add_dataTables_input, .student_information_area .readingClub-list__footer .add_dataTables_input { margin-top: 5px; padding-top: 0.755em; } .student_information_area .leveledBooks-table__footer .add_dataTables_input .paginate_button, .student_information_area .notUploadedTable_footer .add_dataTables_input .paginate_button, .student_information_area .readingClub-list__footer .add_dataTables_input .paginate_button { padding: 10px; } .student_information_area .notUploadedTable_information_table { min-width: 1200px !important; font-weight: normal !important; border: 0px; border-bottom: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-top: 1px solid #E2E2E2; } .student_information_area .notUploadedTable_information_table table { table-layout: fixed; text-align: center; } .student_information_area .notUploadedTable_information_table table th, .student_information_area .notUploadedTable_information_table table td { border: 1px solid #E2E2E2; } .student_information_area .notUploadedTable_information_table thead { width: 100%; text-align: center; } .student_information_area .notUploadedTable_information_table thead tr th { padding: 15px 10px; color: #2e3233; border-right: 1px solid #E2E2E2; border-left: 0px; border-bottom: 0px; font-weight: normal; text-align: center; } .student_information_area .notUploadedTable_information_table tbody { text-align: center; } .student_information_area .notUploadedTable_information_table tbody tr { width: 100%; } .student_information_area .notUploadedTable_information_table tbody tr.student_area { width: 100%; height: auto; padding: 0; background-color: white; } .student_information_area .notUploadedTable_information_table tbody tr.student_area td { padding: 30px 8px; vertical-align: middle; word-wrap: break-word; word-break: break-word; border-right: 1px solid #E2E2E2; border-left: 0px; border-bottom: 0px; line-height: 1.42857143; border-top: 1px solid #E2E2E2; } .student_information_area .notUploadedTable_information_table tbody tr.student_area td.student_delete button img { width: 24px; } .student_information_area .notUploadedTable_information_table tbody tr.student_area td[contenteditable="true"] { position: relative; cursor: text; } .student_information_area .notUploadedTable_information_table tbody tr.student_area td[contenteditable="true"]::before { content: ""; position: absolute; top: 1px; left: 1px; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #5a5f60; } .student_information_area .notUploadedTable_information_table tbody tr.student_area td[contenteditable="true"].redBorder::before { border: 1px solid #ff0000; } table .dataTable { width: 100%; } .modal.modal_verify .modal-dialog { width: 80%; margin: 40px auto; } .modal.modal_verify .modal-dialog .modal-content { position: relative; } .modal.modal_verify .modal-dialog .modal-content .modal-body { display: flex; flex-direction: column; align-items: center; padding: 40px 60px; } .modal.modal_verify .modal-dialog .modal-content .modal-body p { margin: 0 auto 40px; } .modal.modal_verify .modal-dialog .modal-content .modal-body .modal_verify_btn { width: 100%; margin: 20px auto 0; background-color: #446ef6; color: white; border-radius: 5px; padding: 10px 0px; text-align: center; } .modal.modal_verify .modal-dialog .modal-content .modal-body .btn_close { position: absolute; left: 10px; top: 10px; } .modal.modal_notUploaded .modal-dialog { overflow-y: scroll; max-height: calc(100% - 20px); } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area { width: 95%; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area .student_information_area_top { margin: 60px auto 30px; justify-content: center; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area .student_information_area_top p { text-align: center; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area .student_information_area_top p span { color: #ff0000; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area .general_group_btn_confirm { display: flex; justify-content: center; margin: 0 auto 70px; padding: 10px 15px; width: 100%; max-width: 330px; background-color: #446ef6; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .student_information_area .general_group_btn_confirm p { color: white; } .modal.modal_garbage .modal-dialog { width: 80%; max-width: 550px; margin: 40px auto; } .modal.modal_garbage .modal-dialog .modal-content { position: relative; } .modal.modal_garbage .modal-dialog .modal-content .modal-body { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_img { max-width: 115px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body p { margin: 20px auto 30px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .btn_close { position: absolute; left: 10px; top: 10px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area { display: flex; flex-wrap: wrap; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area .garbage_btn_item { padding: 10px 20px; margin: 10px auto; width: 100%; max-width: 170px; border-radius: 5px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area .garbage_btn_item.garbage_btn_close { border: 1px solid #446ef6; color: #446ef6; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area .garbage_btn_item.garbage_btn_confirm { border: 1px solid #446ef6; background-color: #446ef6; color: white; } .modal.modal_grateful .modal-dialog { width: 80%; max-width: 800px; margin: 40px auto; } .modal.modal_grateful .modal-dialog .modal-content { position: relative; } .modal.modal_grateful .modal-dialog .modal-content .modal-body { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; } .modal.modal_grateful .modal-dialog .modal-content .modal-body .grateful_btn_img { max-width: 115px; margin: 0 auto 25px; } .modal.modal_grateful .modal-dialog .modal-content .modal-body p { margin: 20px auto 30px; text-align: center; } .modal.modal_grateful .modal-dialog .modal-content .modal-body p span { color: #ff0000; } .modal.modal_grateful .modal-dialog .modal-content .modal-body .btn_close { position: absolute; left: 10px; top: 10px; } @media screen and (min-width: 576px) { .join-all .order-wrap .order-body .participating_group_area .participating_group_item { width: 47.5%; } .modal.modal_verify .modal-dialog { max-width: 600px; } .modal.modal_verify .modal-dialog .modal-content .modal-body .modal_verify_btn { padding: 10px 0px; } } @media screen and (min-width: 768px) { .join-all .order-wrap .order-body .qualifications_area .qualifications_item .qualifications_item_text p { font-size: 19px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item { min-width: 180px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .multiple_input_area_tittle { display: flex; align-items: center; justify-content: center; margin: 30px auto; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .multiple_input_area_tittle .multiple_input_area_tittle_img { width: 45%; max-width: 140px; margin: 0 20px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item { flex-direction: row; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.early_bird_area .early_bird { margin: 0 20px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_head .registration_price_head_item.original_price_area .table_price { margin: 0 20px 0 0; } .join-all .order-wrap .registration_process .registration_process_content { flex-direction: row; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item { width: 33.333%; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_head .registration_process_head_item { padding: 15px 8px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_head .registration_process_head_item p { color: white; } .join-all .order-wrap .registration_process .registration_process_content .registration_process_content_item .registration_process_body .registration_process_img .registration_process_img_item.registration_process_img_seaweed_one { width: 90px; } .modal.modal_verify .modal-dialog { width: 80%; margin: 40px auto; } .modal.modal_verify .modal-dialog .modal-content { position: relative; } .modal.modal_verify .modal-dialog .modal-content .modal-body { display: flex; flex-direction: column; align-items: center; padding: 40px 60px; } .modal.modal_verify .modal-dialog .modal-content .modal-body p { margin: 0 auto 40px; } .modal.modal_verify .modal-dialog .modal-content .modal-body .modal_verify_btn { width: 100%; margin: 20px auto 0; background-color: #446ef6; color: white; border-radius: 5px; padding: 10px 0px; text-align: center; } .modal.modal_verify .modal-dialog .modal-content .modal-body .btn_close { position: absolute; left: 10px; top: 10px; } .modal.modal_notUploaded .modal-dialog { width: calc(100% - 260px) !important; max-width: 1200px; max-height: calc(100% - 60px); } .modal.modal_notUploaded .modal-dialog .modal-content { position: relative; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body { padding: 15px 85px; } .modal.modal_notUploaded .modal-dialog .modal-content .modal-body .btn_close { position: absolute; left: 10px; top: 10px; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area { width: 100%; justify-content: center; } .modal.modal_garbage .modal-dialog .modal-content .modal-body .garbage_btn_area .garbage_btn_item { width: 40%; margin: 0 10px; } } @media screen and (min-width: 992px) { .join-all .order-wrap .order-body .activity_process .process_step { flex-direction: row; } .join-all .order-wrap .order-body .activity_process .process_step .activity_process_img { max-width: 200px; margin-right: 20px; margin-bottom: 0; } .join-all .order-wrap .order-body .activity_process .activity_process_line { width: calc(20% - 2px); max-width: calc(100px - 2px); } .join-all .order-wrap .order-body .activity_process .subproject { flex-direction: row; align-items: center; justify-content: flex-start; } .join-all .order-wrap .order-body .activity_process .subproject .activity_process_line { order: 1; margin-top: 0; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right { order: 2; margin-left: 20px; width: calc(80% - 2px); justify-content: flex-start; } .join-all .order-wrap .order-body .activity_process .subproject .subproject_right .subproject_icon { width: 45%; max-width: 340px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area { max-width: 850px; margin: 0 auto; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link { flex-direction: row; max-width: 300px; padding: 10px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link .data_entry_btn_icon { margin: 0 10px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item { width: 40%; max-width: 185px; } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_btn_area .general_group_btn_item.generated_code { margin: 0 20px 0 0; } } @media screen and (min-width: 1024px) { .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area { display: flex; justify-content: space-between; } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item { max-width: 220px; width: 47.5%; display: flex; align-items: center; justify-content: center; margin: 0 5px; } .join-all .order-wrap .order-body .info_signUp__form .form-group { display: flex; align-items: center; justify-content: center; } .join-all .order-wrap .order-body .info_signUp__form .form-group .control-label { width: 20%; } .join-all .order-wrap .order-body .info_signUp__form .form-group .control-input { margin: 20px 0 20px 10px; width: 80%; } .join-all .order-wrap .order-body .info_signUp__form .form-group .control-input .form-control { padding: 20px 15px; } } @media screen and (min-width: 1200px) { .join-all .order-wrap .order-body .top_menu_area { width: 75%; } .join-all .order-wrap .order-body .parti_contest_content { margin: 0 auto; } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area { width: 75%; margin: 0 auto; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group { align-items: center; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .input-group-label { width: 35%; margin: 0 15px 0 0; text-align: right; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control { flex: initial; width: calc(65% - 15px - 143px); max-width: 310px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control.form-select-two { width: calc((65% - 15px - 143px) / 2); max-width: calc(310px / 2); } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .form-control.form-select-two.form-select-school-one { margin: 0 10px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .verify_email { padding: 10px 15px; margin: 0 0 0 20px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group .email_verified { margin: 0 0 0 20px; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .form-control { width: calc(65% - 15px - 143px - 75px); max-width: calc(310px - 75px); } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .input-group.input-group-myfile .btn-file .input-group-text { transform: translate(0px, 0px); } .join-all .order-wrap .order-body .parti_contest_content .general_group_area .general_group_caption { padding: 20px 75px; } .join-all .order-wrap .order-body .timeline_area .timeline_item { flex-direction: row; } .join-all .order-wrap .order-body .timeline_area .timeline_item:nth-child(2n) { flex-direction: row-reverse; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_content { flex-basis: 50%; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_content .timeline_content_inner { display: flex; justify-content: flex-end; padding: 0px 70px 60px 0px; } .join-all .order-wrap .order-body .timeline_area .timeline_item:nth-child(2n) .timeline_content .timeline_content_inner { display: flex; justify-content: flex-start; padding: 0px 0px 60px 70px; } .join-all .order-wrap .order-body .timeline_area .timeline_item .timeline_marker .timeline_marker_inner img { width: 100px; } .join-all .order-wrap .order-body .certificate { text-align: center; } .join-all .order-wrap .order-body .certificate img { width: 250px; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area { justify-content: flex-start; flex-direction: row; flex-wrap: wrap; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area .registration_notice_btn_item { margin: 25px 25px 0; } .join-all .order-wrap .order-body .registration_notice .table_squid { position: absolute; right: 20px; top: 20px; width: 90px; display: block; } .join-all .order-wrap .order-body .national_competition table { width: 75%; } .join-all .order-wrap .order-body .national_competition .table_starfish { left: 12.5%; width: 70px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left { width: 175px; padding: 0 0 95px; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item { padding: 15px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item .registration_price_head_item_tittle { flex-direction: row; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_left .registration_price_head_item .registration_price_head_item_tittle img { margin: 0 10px 0 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_right { width: calc(100% - 175px); } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item.early_bird_item { width: calc(100% / 7 * 4); } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item.original_price_item { width: calc(100% / 7 * 3); } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item .registration_price_head .registration_price_head_item.original_price_area { border: 1px solid white; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item .registration_price_head .registration_price_head_item.original_price_area p { padding: 10px 0; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item .registration_price_body .registration_price_body_row { flex-wrap: nowrap; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item .registration_price_body .registration_price_body_row .registration_price_body_item_content .registration_price_body_item { min-height: 90px; border-bottom: 1px solid white; } .join-all .order-wrap .table-responsive.registration_price .registration_price_content .registration_price_content_item .registration_price_body .registration_price_body_row .registration_price_body_item_content .registration_price_body_item:nth-child(2) { border-bottom: 0px; } } @media screen and (min-width: 1400px) { .join-all .order-wrap .order-body .participating_group_area .participating_group_item { width: 30%; } .join-all .order-wrap .order-body .top_menu_area { width: 55%; } .join-all .order-wrap .order-body .parti_contest_content .sign_up_btn_area .sign_up_btn_item .sign_up_btn_item_link { padding: 50px 0; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item .data_entry_btn_item_link { padding: 10px 40px; } .join-all .order-wrap .order-body .parti_contest_content .data_entry_area .data_entry_btn_item.general_group { margin: 0 70px 0 0; } .join-all .order-wrap .order-body .parti_contest_content .multiple_input_area .multiple_input_area_tittle { margin: 55px auto 30px; } } @media screen and (min-width: 1600px) { .join-all .order-wrap .order-body .traffic_information { width: 100%; } .join-all .order-wrap .order-body .traffic_information .test_area { width: 47.5%; display: inline-block; } .join-all .order-wrap .order-body .traffic_information .test_area .table-responsive .table { min-width: 450px; } .join-all .order-wrap .order-body .registration_notice .registration_notice_btn_area { justify-content: center; } .join-all .order-wrap .order-body .registration_notice .table_squid { width: 150px; } } .join-all .order-wrap .input_btn { background-color: #446ef6; color: white; } .entry header .navi-main .container-fluid { justify-content: flex-start; } .entry header .navi-main .container-fluid .navbar-header { width: 100%; } .entry header .navi-main .container-fluid .navbar-header .navbar-brand { width: calc(100% - 90px); padding: 15px 0px; } .entry header .navi-main .container-fluid .navbar-header .navbar-toggle { display: none; } .entry header .navi-main .container-fluid .navbar-collapse { display: none !important; } .entry main .language_selection { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20px auto; } .entry main .language_selection h4 { text-align: left; margin: 0px 5px 10px; width: 80%; } .entry main .language_selection .remark_text { text-align: left; width: 80%; display: flex; } .entry main .language_selection .remark_text span { display: inline-block; } .entry main .language_selection .select_box { cursor: pointer; width: 300px; margin: 20px auto; position: relative; } .entry main .language_selection .select_box .select { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; border: 1px solid #446ef6; border-radius: 10px; } .entry main .language_selection .select_box .select p, .entry main .language_selection .select_box .select i { color: #446ef6; } .entry main .language_selection .select_box .options { display: none; border: 1px solid #446ef6; border-radius: 10px; overflow: hidden; position: absolute; bottom: 0px; width: 100%; background-color: white; } .entry main .language_selection .select_box .options .option_item { border-bottom: 1px solid #446ef6; } .entry main .language_selection .select_box .options .option_item input[type="radio"] { opacity: 0; display: none; position: absolute; } .entry main .language_selection .select_box .options .option_item input[type="radio"]:checked ~ label { background-color: #446ef6; color: white; } .entry main .language_selection .select_box .options .option_item label { display: block; padding: 6px 10px; cursor: pointer; color: #446ef6; } .entry main .language_selection .select_box .options .option_item:hover label { color: white; background-color: #446ef6; } .entry main .language_selection .select_box .options .option_item:nth-last-child(1) { border-bottom: 0px; } .entry main .enter_button { display: flex; justify-content: center; margin: 0px auto 80px; max-width: 80%; } .entry main .enter_button .enter_button_link { display: none; color: #446ef6; border: 1px solid #446ef6; padding: 5px 15px; border-radius: 10px; } .entry main .enter_button .enter_button_link p { color: #446ef6; } .entry main .enter_button .enter_button_link:hover { background-color: #446ef6; } .entry main .enter_button .enter_button_link:hover p { color: white; } @media screen and (min-width: 992px) { .entry main .language_selection p { margin: 0px 5px; } .entry main .language_selection .select_box { margin: 30px auto 20px; } .entry main .language_selection .select_box .options .option_item label { padding: 10px 20px; } } main.recommendedArticle .join-all { width: 100%; } main.recommendedArticle .join-all .order-wrap { margin: 0 auto; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search { padding: 0 5%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan { margin: 20px 0px; max-width: 400px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-book .form-control { height: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn .recommendedBook-search__btn-search { color: #446ef6; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn:hover { background-color: #446ef6; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .input-group .input-group-btn:hover .recommendedBook-search__btn-search { color: white; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__sort .icheck_area .icheck-success-white { width: calc(100% / 2 - 14px); } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange { max-width: 900px; margin: 0 auto; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .rA-banner__SRrange-titleC { font-weight: 400; color: #446ef6; text-align: center; margin-top: 15px; margin-bottom: 50px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .rA-banner__SRrange-titleR { font-weight: 400; color: #5a5f60; text-align: center; margin-bottom: 50px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar { margin: 20px auto; position: relative; width: 100%; max-width: 800px; height: 28px; background: #e2e2e2; border-radius: 28px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider { width: 100%; height: 28px; border-radius: 28px; position: absolute; top: 0; left: 0; background-color: transparent !important; border-color: transparent !important; border: none !important; opacity: 1 !important; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header { border-radius: 28px; background-color: #22357299; z-index: 11; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-min, main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-max { color: #2e3233 !important; font-size: 14px; font-weight: normal; line-height: 28px; white-space: nowrap; width: 60px; text-align: center; position: absolute; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-min::after, main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-max::after { content: ""; display: block; position: absolute; top: 0px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-min { left: 0; transform: translate(-100%, 0); } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-min::after { left: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-widget-header .slider-max { right: 0; transform: translate(100%, 0); } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-range .ui-slider-handle { display: none; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.ui-slider-disabled .ui-slider-handle { display: none; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-control .ui-widget-header { top: 0; height: 100%; background-color: #446ef680; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-control .ui-slider-handle { position: absolute; z-index: 11; width: 32px; height: 32px; top: -2px; margin-left: -16px; border: none; border-radius: 50%; background-color: transparent; background-image: url(../images/recommendedArticle/SRrange-bar-point.png); background-position: center center; background-repeat: no-repeat; cursor: move; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-control .ui-slider-handle .slider-tooltip { background-color: #446ef6; color: #fff; font-size: 16px; white-space: nowrap; text-align: center; border-radius: 2px; position: absolute; top: -50px; left: 50%; width: 76px; height: 30px; line-height: 30px; margin: 10px 0 10px -38px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider.s-control .ui-slider-handle .slider-tooltip::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 7px 0 7px; border-color: #446ef6 transparent transparent transparent; position: absolute; bottom: -7px; left: 50%; margin-left: -7px; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } main.recommendedArticle .join-all .order-wrap .order-body .rA-banner__SRrange .SRrangeBar .SRrangeBar-slider .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper { padding: 10px 5%; background-color: #f4f8fb; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header { display: flex; flex-direction: column; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .dt-buttons { margin: 5px 0px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .dt-buttons .dt-button { background: #f7f7f8; border: 1px solid #e0e0e0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .dt-buttons .dt-button.active { background: #446ef6; box-shadow: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .dt-buttons .dt-button.active span { color: white; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .dt-buttons .dt-button:focus { border: 0; text-shadow: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .pull-right { display: flex; justify-content: center; align-items: center; margin: 5px 0px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .pull-right .dataTables_info { padding-top: 0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .pull-right .paging_simple_numbers { margin-top: 0; padding-top: 0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .pull-right .paging_simple_numbers a { background: #f7f7f8; border: 1px solid #e0e0e0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header .pull-right .paging_simple_numbers span { display: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table { display: table-row-group; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table thead { display: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr { width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area { width: 100%; padding: 0; flex-direction: row; flex-wrap: wrap; background-color: white; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area td { text-align: left; line-height: 1.7; padding: 10px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-id { display: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-front { margin: 0px auto; padding: 0; line-height: 0; max-width: none !important; width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-front a { margin: 0 auto; height: 185px; width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-front a img { height: 100%; object-fit: cover; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-SR, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-word, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-author, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-sort { width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-SR { color: #446ef6; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-SR span { color: #2e3233; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-read, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-comment, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { background-color: #2e3233; color: white; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later button { background-color: #446ef6; border-radius: 50px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later button:focus { color: white !important; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later.active button { background-color: transparent; border-radius: 0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later.active:hover button { background-color: #446ef6; border-radius: 50px; color: white; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-logo { width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-logo img { max-width: 120px; margin: 0 auto; display: block; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-name { width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-name p { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; height: 44.6px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .paging_simple_numbers .paginate_button { background: #f7f7f8; border: 1px solid #e0e0e0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .paging_simple_numbers .paginate_button.paginate_button.current { color: #ff0000 !important; background: transparent; border: 0px solid #e0e0e0; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .paging_simple_numbers .paginate_button.disabled { background: #eff0f1; color: #bdc0c1 !important; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .paging_simple_numbers .paginate_button.disabled i { color: #bdc0c1 !important; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .add_dataTables_input { margin-top: 5px; padding-top: 0.755em; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__footer .add_dataTables_input .paginate_button { padding: 10px; } main.recommendedArticle .modal { width: 100%; } main.recommendedArticle .modal .modal-dialog { width: 90%; max-width: 1200px; margin: 10px auto; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar { margin-bottom: 0; width: 100%; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-brand { max-width: 80px; height: auto; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-toggle { margin-left: auto; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-toggle .icon-bar { background-color: #2e3233; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .search_icon { position: absolute; right: 0; top: 50%; padding: 15px; transform: translate(0px, -50%); } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .search_icon i { font-size: 30px; } main.recommendedArticle .modal .modal-dialog .modal-body { display: flex; flex-direction: column; overflow-y: auto; max-height: calc(100vh - 200px); margin: 10px auto; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area { display: flex; justify-content: center; flex-wrap: wrap; margin: 5px auto; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 5px; cursor: auto; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item .icon_img { margin: 0 auto; cursor: pointer; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-comment.fas, main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-star.fas, main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-bookmark.fas { color: #446ef6; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item p { text-align: center; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item p span.active { color: #446ef6; font-weight: bold; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area { margin: 5px auto; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .top_label { display: flex; flex-wrap: wrap; margin: 10px 0x; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .top_label .top_label_item { background-color: #446ef6; padding: 5px 10px; margin: 5px 10px 5px 0; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .top_label .top_label_item p { color: white; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0x; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area .avatar_area { max-width: 60px; margin: 0 5px 5px 0; border-radius: 50%; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area .name { margin: 0 5px 5px 0; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area .name p { color: #446ef6; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area .introduction_content { display: flex; flex-wrap: wrap; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .introduction_area .introduction_content p { margin: 0 5px 5px 0; white-space: nowrap; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .related_label_area, main.recommendedArticle .modal .modal-dialog .modal-body .center_area .popular_label_area { background-color: #f4f8fb; display: flex; flex-wrap: wrap; padding: 5px 10px; margin: 10px 0px; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_title, main.recommendedArticle .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_title { display: flex; padding: 5px; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_title p, main.recommendedArticle .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_title p { margin: 0 5px; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_item, main.recommendedArticle .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_item { background-color: #E2E2E2; margin: 0 5px 5px 0; padding: 5px; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .popular_label_area { background-color: transparent; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .middle_img { padding: 10px 20px; background-color: #f4f8fb; max-width: 400px; margin: 10px auto; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .middle_text { margin: 10px 0x; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .middle_text p span { color: #446ef6; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .middle_article { margin: 10px 0; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area .middle_article .subtitle { margin: 0 0 5px 0; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area { border: 1px solid #E2E2E2; padding: 10px; margin: 5px auto; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0x; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .avatar_area { max-width: 60px; margin: 0 5px 5px 0; border-radius: 50%; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .name { margin: 0 5px 5px 0; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .introduction_content { display: flex; flex-wrap: wrap; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .introduction_content p { margin: 0 5px 5px 0; white-space: nowrap; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn { margin: 10px; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn p { text-align: center; padding: 5px 10px; background-color: #446ef6; color: white; } main.recommendedArticle .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn:hover p { background-color: #1348f4; } main.recommendedArticle .modal .modal-dialog .modal-footer { text-align: center; } main.recommendedArticle .modal .modal-dialog .modal-footer .comment_btn { background-color: #446ef6; padding: 5px 10px; border-radius: 5px; margin: 0 auto; cursor: pointer; } main.recommendedArticle .modal .modal-dialog .modal-footer .comment_btn p { color: white; } main.recommendedArticle .modal .modal-dialog .comment_area { padding: 15px; display: none; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group { width: 100%; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group .input-group-text { background-color: #446ef6; border: 1px solid #446ef6; border-radius: 5px; display: flex; flex-direction: column; margin: 5px auto; width: 100%; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group .input-group-text p { color: white; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group .form-control { margin: 5px auto; border: 1px solid #E2E2E2; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group.input_comment { margin: 20px auto; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group.input_comment .limit p { text-align: right; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group.input_comment .limit p span { color: #ff0000; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area { margin: 20px auto; display: flex; justify-content: center; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area .close_btn { border: 1px solid #E2E2E2; background-color: #E2E2E2; margin: 5px; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area .close_btn p { color: #446ef6; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area .close_btn:hover { background-color: #c9c9c9; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area input { background-color: #446ef6; color: white; padding: 5px 10px; border-radius: 4px; border: 0px; margin: 5px; } main.recommendedArticle .modal .modal-dialog .comment_area .button_area input:hover { background-color: #1348f4; } @media screen and (min-width: 576px) { main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__sort .icheck_area .icheck-success-white { width: calc(100% / 3 - 14px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header { flex-direction: row; justify-content: space-between; padding: 5px; margin: 0 15px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area { width: calc(50% - 30px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-read, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-comment, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(50% - 20px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: 100%; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-SR, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-word, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-author, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-sort { width: calc(50% - 20px); } } @media screen and (min-width: 768px) { main.recommendedArticle .join-all .order-wrap { width: 100%; max-width: none; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book { flex-direction: row; align-items: center; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .control-label { width: 150px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__slogan_title { margin-right: 20px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input { width: calc(100% - 350px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input .recommendedBook-search__slogan { max-width: 600px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__sort .icheck_area .icheck-success-white { width: calc(100% / 4 - 14px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .leveledBooks-table__header { flex-direction: row; justify-content: space-between; padding: 5px; margin: 0 15px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area { width: calc(50% - 30px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-name p { height: 50px; } main.recommendedArticle .modal { width: 100%; } main.recommendedArticle .modal .modal-dialog { width: 80%; } main.recommendedArticle .modal .modal-dialog .modal-header { display: flex; } main.recommendedArticle .modal .modal-dialog .modal-header .modal_logo { max-width: 60px; } main.recommendedArticle .modal .modal-dialog .comment_area .input-group .form-control { margin: 5px 10px; width: calc(33% - 20px); } main.recommendedArticle .modal .modal-dialog .comment_area .input-group.input_comment .form-control { width: calc(100% - 20px); } } @media screen and (min-width: 992px) { main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__sort .icheck_area .icheck-success-white { width: calc(100% / 5 - 15px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area { width: calc(33% - 30px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-name p { height: 55px; } } @media screen and (min-width: 1200px) { main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book { align-items: center; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__book .recommendedBook-search__book_input { width: calc(100% - 360px); margin-left: 20px; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-search .recommendedBook-search__sort .icheck_area .icheck-success-white { width: auto; } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-read, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-comment, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid { display: flex; align-items: center; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header { justify-content: flex-start; width: 80px; } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-collapse { width: calc(100% - 160px); } main.recommendedArticle .modal .modal-dialog .modal-header .navbar .container-fluid .search_icon { width: 80px; } main.recommendedArticle .modal .modal-dialog .modal-body { flex-direction: row; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area { flex-direction: column; justify-content: flex-start; width: 100px; flex-wrap: nowrap; } main.recommendedArticle .modal .modal-dialog .modal-body .left_area .icon_item { margin: 10px 5px; } main.recommendedArticle .modal .modal-dialog .modal-body .center_area { width: calc(70% - 100px); } main.recommendedArticle .modal .modal-dialog .modal-body .right_area { width: calc(30% - 100px); } } @media screen and (min-width: 1400px) { main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-read, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-comment, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-name p { height: 60px; } } @media screen and (min-width: 1600px) { main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-read, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-comment, main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } main.recommendedArticle .join-all .order-wrap .order-body .recommendedBook-list .dataTables_wrapper .recommendedBook-table tbody tr.book_area .book-later { width: calc(33.33333% - 20px); } } main.readingClub .join-all { width: 100%; } main.readingClub .join-all .order-wrap { margin: 0 auto; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar { display: flex; flex-wrap: wrap; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item { display: flex; align-items: center; flex-wrap: wrap; margin: 10px 0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .menu_text { margin: 0 15px 10px 0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav { display: flex; flex-wrap: wrap; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li { margin: 0 15px 10px 0; text-align: center; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dataTable_menu_bar_nav_li_btn { cursor: pointer; padding: 5px 15px; border: 1px solid #5a5f60; background-color: white; color: #446ef6; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dataTable_menu_bar_nav_li_btn p { color: #446ef6; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dataTable_menu_bar_nav_li_btn:hover { background-color: #446ef6; color: white; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dataTable_menu_bar_nav_li_btn:hover p { color: white; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dropdown-menu { position: absolute !important; margin: 0; padding: 0; min-width: 100%; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dropdown-menu li p { cursor: pointer; padding: 10px 15px; text-align: center; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTable_menu_bar .dataTable_menu_bar_item .dataTable_menu_bar_nav .dataTable_menu_bar_nav_li .dropdown-menu li p:hover { background-color: #446ef6; color: white; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header { display: flex; flex-direction: column; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header .pull-right { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 5px 0px; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header .pull-right .dataTables_info { padding-top: 0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header .pull-right .paging_simple_numbers { margin-top: 0; padding-top: 0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header .pull-right .paging_simple_numbers a { background: #f7f7f8; border: 1px solid #e0e0e0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header .pull-right .paging_simple_numbers span { display: none; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table thead { display: none; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area { width: 100%; padding: 0; flex-direction: row; flex-wrap: wrap; background-color: white; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area td { text-align: left; line-height: 1.7; padding: 10px; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_id { display: none; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_img { margin: 0px auto; padding: 0; line-height: 0; max-width: none !important; width: 100%; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_img .club_table_img_link { display: block; margin: 0 auto; width: 100%; position: relative; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_img .club_table_img_link img { height: 100%; object-fit: cover; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_img .club_table_img_link:hover::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(68, 110, 246, 0.35); } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_tittle, main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_introduce, main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_time, main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_place { width: 100%; white-space: inherit; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_tittle .club_table_tittle_link { color: black; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_tittle .club_table_tittle_link h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ box-orient: vertical; -moz--box-orient: vertical; -o--box-orient: vertical; -ms--box-orient: vertical; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_tittle .club_table_tittle_link:hover { color: #446ef6; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_introduce { border-bottom: 1px dotted; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_introduce p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ box-orient: vertical; -moz--box-orient: vertical; -o--box-orient: vertical; -ms--box-orient: vertical; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area .club_table_price { display: none; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .paging_simple_numbers .paginate_button { background: #f7f7f8; border: 1px solid #e0e0e0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .paging_simple_numbers .paginate_button.paginate_button.current { color: #ff0000 !important; background: transparent; border: 0px solid #e0e0e0; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .paging_simple_numbers .paginate_button.disabled { background: #eff0f1; color: #bdc0c1 !important; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .paging_simple_numbers .paginate_button.disabled i { color: #bdc0c1 !important; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .add_dataTables_input { margin-top: 5px; padding-top: 0.755em; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__footer .add_dataTables_input .paginate_button { padding: 10px; } main.readingClub .modal { width: 100%; } main.readingClub .modal .modal-dialog { width: 90%; max-width: 1200px; margin: 10px auto; } main.readingClub .modal .modal-dialog .modal-header .navbar { margin-bottom: 0; width: 100%; } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-brand { max-width: 80px; height: auto; } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-toggle { margin-left: auto; } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .navbar-header .navbar-toggle .icon-bar { background-color: #2e3233; } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .search_icon { position: absolute; right: 0; top: 50%; padding: 15px; transform: translate(0px, -50%); } main.readingClub .modal .modal-dialog .modal-header .navbar .container-fluid .search_icon i { font-size: 30px; } main.readingClub .modal .modal-dialog .modal-body { display: flex; flex-direction: column; overflow-y: auto; max-height: calc(100vh - 200px); margin: 10px auto; } main.readingClub .modal .modal-dialog .modal-body .left_area { display: flex; justify-content: center; flex-wrap: wrap; margin: 5px auto; } main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 5px; cursor: auto; } main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item .icon_img { margin: 0 auto; cursor: pointer; } main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-comment.fas, main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-star.fas, main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item .icon_img .fa-bookmark.fas { color: #446ef6; } main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item p { text-align: center; } main.readingClub .modal .modal-dialog .modal-body .left_area .icon_item p span.active { color: #446ef6; font-weight: bold; } main.readingClub .modal .modal-dialog .modal-body .center_area { margin: 5px auto; } main.readingClub .modal .modal-dialog .modal-body .center_area .top_label { display: flex; flex-wrap: wrap; margin: 10px 0x; } main.readingClub .modal .modal-dialog .modal-body .center_area .top_label .top_label_item { background-color: #446ef6; padding: 5px 10px; margin: 5px 10px 5px 0; } main.readingClub .modal .modal-dialog .modal-body .center_area .top_label .top_label_item p { color: white; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0x; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area .avatar_area { max-width: 60px; margin: 0 5px 5px 0; border-radius: 50%; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area .name { margin: 0 5px 5px 0; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area .name p { color: #446ef6; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area .introduction_content { display: flex; flex-wrap: wrap; } main.readingClub .modal .modal-dialog .modal-body .center_area .introduction_area .introduction_content p { margin: 0 5px 5px 0; white-space: nowrap; } main.readingClub .modal .modal-dialog .modal-body .center_area .related_label_area, main.readingClub .modal .modal-dialog .modal-body .center_area .popular_label_area { background-color: #f4f8fb; display: flex; flex-wrap: wrap; padding: 5px 10px; margin: 10px 0px; } main.readingClub .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_title, main.readingClub .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_title { display: flex; padding: 5px; } main.readingClub .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_title p, main.readingClub .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_title p { margin: 0 5px; } main.readingClub .modal .modal-dialog .modal-body .center_area .related_label_area .related_label_item, main.readingClub .modal .modal-dialog .modal-body .center_area .popular_label_area .related_label_item { background-color: #E2E2E2; margin: 0 5px 5px 0; padding: 5px; } main.readingClub .modal .modal-dialog .modal-body .center_area .popular_label_area { background-color: transparent; } main.readingClub .modal .modal-dialog .modal-body .center_area .middle_img { padding: 10px 20px; background-color: #f4f8fb; max-width: 400px; margin: 10px auto; } main.readingClub .modal .modal-dialog .modal-body .center_area .middle_text { margin: 10px 0x; } main.readingClub .modal .modal-dialog .modal-body .center_area .middle_text p span { color: #446ef6; } main.readingClub .modal .modal-dialog .modal-body .center_area .middle_article { margin: 10px 0; } main.readingClub .modal .modal-dialog .modal-body .center_area .middle_article .subtitle { margin: 0 0 5px 0; } main.readingClub .modal .modal-dialog .modal-body .right_area { border: 1px solid #E2E2E2; padding: 10px; margin: 5px auto; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0x; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .avatar_area { max-width: 60px; margin: 0 5px 5px 0; border-radius: 50%; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .name { margin: 0 5px 5px 0; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .introduction_content { display: flex; flex-wrap: wrap; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .introduction_content p { margin: 0 5px 5px 0; white-space: nowrap; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn { margin: 10px; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn p { text-align: center; padding: 5px 10px; background-color: #446ef6; color: white; } main.readingClub .modal .modal-dialog .modal-body .right_area .introduction_area .follow_btn:hover p { background-color: #1348f4; } main.readingClub .modal .modal-dialog .modal-footer { text-align: center; } main.readingClub .modal .modal-dialog .modal-footer .comment_btn { background-color: #446ef6; padding: 5px 10px; border-radius: 5px; margin: 0 auto; cursor: pointer; } main.readingClub .modal .modal-dialog .modal-footer .comment_btn p { color: white; } main.readingClub .modal .modal-dialog .comment_area { padding: 15px; display: none; } main.readingClub .modal .modal-dialog .comment_area .input-group { width: 100%; } main.readingClub .modal .modal-dialog .comment_area .input-group .input-group-text { background-color: #446ef6; border: 1px solid #446ef6; border-radius: 5px; display: flex; flex-direction: column; margin: 5px auto; width: 100%; } main.readingClub .modal .modal-dialog .comment_area .input-group .input-group-text p { color: white; } main.readingClub .modal .modal-dialog .comment_area .input-group .form-control { margin: 5px auto; border: 1px solid #E2E2E2; } main.readingClub .modal .modal-dialog .comment_area .input-group.input_comment { margin: 20px auto; } main.readingClub .modal .modal-dialog .comment_area .input-group.input_comment .limit p { text-align: right; } main.readingClub .modal .modal-dialog .comment_area .input-group.input_comment .limit p span { color: #ff0000; } main.readingClub .modal .modal-dialog .comment_area .button_area { margin: 20px auto; display: flex; justify-content: center; } main.readingClub .modal .modal-dialog .comment_area .button_area .close_btn { border: 1px solid #E2E2E2; background-color: #E2E2E2; margin: 5px; } main.readingClub .modal .modal-dialog .comment_area .button_area .close_btn p { color: #446ef6; } main.readingClub .modal .modal-dialog .comment_area .button_area .close_btn:hover { background-color: #c9c9c9; } main.readingClub .modal .modal-dialog .comment_area .button_area input { background-color: #446ef6; color: white; padding: 5px 10px; border-radius: 4px; border: 0px; margin: 5px; } main.readingClub .modal .modal-dialog .comment_area .button_area input:hover { background-color: #1348f4; } @media screen and (min-width: 576px) { main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-list__header { flex-direction: row; justify-content: flex-end; padding: 5px; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody { justify-content: flex-start; } main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area { width: 47.5%; margin: 10px 1.25%; } } @media screen and (min-width: 1024px) { main.readingClub .join-all .order-wrap .order-body .readingClub-list .dataTables_wrapper .readingClub-table tbody tr.club_table_area { width: 30%; margin: 10px 1.5%; } } main.oversea .join-all .order-wrap .order-page .order-body .signup_area { display: flex; align-items: center; flex-direction: column; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area, main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_text_area { width: 100%; margin: 0 auto; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area { background-color: #5ba4ff; margin: 0 auto 30px; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area .signup_photo_item_text { width: 80%; margin: 15px auto; display: flex; justify-content: center; position: relative; z-index: 1; transform: translate(0px, -5px); } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area .signup_photo_item_text a { display: block; color: white; width: 100%; padding: 10px; background-color: #ff9567; border-radius: 50px; text-align: center; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area .signup_photo_item_text::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 100%; height: 100%; background-color: #fff372; border-radius: 50px; z-index: -1; } @media screen and (min-width: 768px) { main.oversea .join-all .order-wrap .order-page .order-body .signup_area { flex-direction: row; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area, main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_text_area { width: 43.75%; } main.oversea .join-all .order-wrap .order-page .order-body .signup_area .signup_photo_area { margin: 0 auto; } }