@font-face { font-family:'Noto Sans KR'; src: url('/include/font/NotoSansKR-Medium.eot'); src: url('/include/font/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'), url('/include/font/NotoSansKR-Medium.woff') format('woff'); font-weight: normal; font-style: normal; } html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef; } ::-webkit-scrollbar { width: 8px; height: 8px; border: 3px solid #fff; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; height: 10px; background: #f9f9f9; } ::-webkit-scrollbar-track { background: #f9f9f9; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(150, 150, 150, .2); } ::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(150, 150, 150, .2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(150, 150, 150, .1); } html, body{ width:100%; height:100%; margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; position:relative; font-size:14px; color: rgba(0,0,0,0.9); line-height:normal; } body.layer{ overflow-y:hidden; position:fixed; } body.error{ background:#44aee3; } body.error .center{ position:absolute; top:50%; right:50%; transform: translate(50%, -50%); } body.error img{ background:#fff; border-radius:55px; } body.error code{ background:#fff; display:block; padding:10px; margin-bottom:20px; text-align:left; line-height:20px; font-family: 'Noto Sans KR', sans-serif; } body.error.exception{ background:#fd8787; } header{ border-bottom:1px solid #6779d3; position:relative; } header img{ vertical-align:middle; } header .division{ width:100%; } header .division a.sub_link{ font-size:12px; margin-right:10px; } header .division a.sub_link:before{ content:'|'; font-size:12px; vertical-align:top; margin-right:10px; color:#ccc; } header .division a.sub_link:first-child:before{ content:''; margin:0; } header #main_menu.fixed { background: #fff; z-index: 100; border-bottom: 1px solid #6879d3; } header .underline{ border-bottom:1px solid #e0e0e0; height: 42px; line-height: 42px; color:#444; } header .underline .fright a:first-child{ margin-right: 20px; } header .underline .fright a{ margin:0; } header .underline .fleft { font-size:12px; } header .underline .fleft span{ color:#6779d3; } header .underline .align.center{ position:absolute; right:50%; transform: translateX(50%); } header .underline .align.center a{ font-size:12px; } header .underline .align.center a:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f09d'; margin-right:3px; color:#999; } header .underline .align.center a:not(:last-child):after{ content:'\2502'; margin:0px 5px; color:#999; } header .underline .align.center a:hover{ font-weight:bold; } header .underline .align.center a:nth-child(1):hover{ color:#ee8233; } header .underline .align.center a:nth-child(1):hover:before{ color:#ee8233; } header .underline .align.center a:nth-child(2):hover{ color:#00adb2; } header .underline .align.center a:nth-child(2):hover:before{ color:#00adb2; } header .underline .align.center a:nth-child(3):hover{ color:#003586; } header .underline .align.center a:nth-child(3):hover:before{ color:#003586; } header .underline .align.center a:nth-child(4):before{ content:'\f0fd'; font-weight:bold; } header .underline .align.center a:nth-child(4):hover{ color:#f33f3f; } header .underline .align.center a:nth-child(4):hover:before{ color:#f33f3f; } header .navi_wrap{ padding:16.5px 0; } header .navigation{ display:inline-block; vertical-align:middle; margin-left:70px; } header .navigation li{ display:inline-block; vertical-align:middle; font-size:20px; margin:0px 32px; position:relative; } header .navigation li.on a.depth_one{ color:#6779d3; } header .navigation li .children_group li.on a.depth_two, header .navigation .children_group a:hover{ text-decoration:underline; color:#6779d3; } header .navigation li.navi_group.on:after{ content:''; background:#6779d3; width:130%; height:2px; position:absolute; bottom:-27px; left:-15%; } header .navigation .children_group{ position:absolute; width:105px; z-index: 20; display:none; } header .navigation .children_group li{ display:block; font-size:15px; margin:15px 0; } header .navigation .children_group li:first-child{ margin-top:55px; } header #main_menu{ position:relative; background: #fff; } header #main_menu .children_bg{ position:absolute; top:84px; width:100%; height:350px; background:rgba(247,247,247,0.95); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); z-index: 10; display:none; } /*header #main_menu .children_bg .wave { position: absolute; left:0; right:0; top:0; bottom:0; z-index: 1; } header #main_menu .children_bg img{ position:absolute; width:100px; height:100px; bottom:70px; right:400px; } header #main_menu .children_bg .wave + .wave { z-index: 2; } */ header #main_menu .children_bg #main_menu_cs { position: absolute; left: 10%; } header #main_menu .children_bg #bg_menu1 { position: absolute; left: 10%; bottom: -39px; width: 300px; height: 300px; transform:rotate(90deg); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } header .mycampus{ margin-top:9px; border-color: #e0e0e0; } header .mycampus:hover{ border: 1px solid #4d5eb1; background: #6779d3; color: #fff; } header .mycampus:hover:before{ background: #7b8ad9; } header .notification{ width:24px; height:24px; background:#fff; border:2px solid #4254b6; border-radius:16px; position:relative; cursor:pointer; text-align:center; margin:7px 0px 0px 10px; } header .notification i{ margin:0; color:#6879d3; line-height:24px; } header .notification .count{ position:absolute; top:-5px; left:-5px; background:#f33f3f; color:#fff; width:15px; height:15px; font-size:10px; border-radius: 10px; padding:1px; line-height:15px; } header .notification_wrap{ width:360px; opacity:0.3; position:absolute; top:40px; right:0px; background:#fff; border:1px solid #e4e4e4; line-height:normal; display:none; box-shadow:5px 5px 10px 0 rgba(0, 0, 0, 0.3); box-sizing: border-box; z-index:1000; transform:translateX(50%); } header .notification_wrap:before{ content: ""; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); margin-left: -12px; border:13px solid transparent; border-top:0 solid transparent; border-bottom-color:#aaa; margin-top:-2px; } header .notification_wrap:after{ content: ""; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); margin-left: -12px; border:13px solid transparent; border-top:0 solid transparent; border-bottom-color:#fff; } header .notification_wrap a{ display:block; } header .notification_wrap h3{ font-size: } header .notification_wrap .minutely{ padding:13px; text-align:center; border-top:1px solid #e4e4e4; } header .notification_wrap .minutely:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f054'; font-weight:bold; margin-left:3px; } header .notification_wrap ul.notify_wrap{ display:block; max-height:300px; overflow-y: auto; box-sizing: border-box; font-size:12px; } ul.notify_wrap li.notify{ display:block; height:auto; padding:14px; border-bottom:1px solid #e4e4e4; background:#fff; width:100%; box-sizing: border-box; text-align:left; transition:all 0.2s ease; line-height:normal; } ul.notify_wrap a:last-child li.notify{ border-bottom:none !important; } ul.notify_wrap li.notify img{ width:36px; height:36px; border-radius:18px; } ul.notify_wrap li.empty{ text-align:center; padding:30px !important; margin:0; border-bottom: none; } ul.notify_wrap li.empty:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f1f6'; font-weight:bold; display:block; font-size:24px; margin-bottom:10px; } ul.notify_wrap .notify_inner{ position:relative; } ul.notify_wrap .notify_inner:before{ font-family: 'Font Awesome\ 5 Free'; color:#fff; width:18px; height:18px; position:absolute; border-radius:9px; top:-3px; left:-3px; font-size:10px; line-height:18px; text-align:center; z-index:1; } ul.notify_wrap .notify_inner.board:before{ content:'\f7f5'; font-weight:bold; background:#0a97b0; } ul.notify_wrap .notify_inner.comment:before{ content:'\f4ad'; font-weight:normal; background:#2fc4b2; } ul.notify_wrap .notify_inner.error:before{ content:'\f05a'; font-weight:bold; background:#f0134d; } ul.notify_wrap .notify_inner.apply:before{ content:'\f055'; font-weight:bold; background:#ff8ba7; } ul.notify_wrap .notify_inner.global:before{content:'\f0f3'; font-weight:normal; background:#46b3e6; } ul.notify_wrap .notify_inner.cyber:before{ content:'\f0f3'; font-weight:normal; background:#4d80e4; } ul.notify_wrap .notify_inner.payment:before{ content:'\f09d'; font-weight:normal; background:#FF5252; } ul.notify_wrap .notify_inner.deposit:before{ content:'\f290'; font-weight:bold; background:#FFAB40; } ul.notify_wrap .notify_inner.confirm:before{ background:#999; } ul.notify_wrap .notify_inner.confirm .bold{ font-weight:normal !important; } ul.notify_wrap .notify_inner.confirm img{ opacity:0.7; } ul.notify_wrap .notify_contents{ line-height:18px; width:calc(100% - 55px); color:#000; font-weight:normal; } ul.notify_wrap .notify_date{ color:#999 !important; } ul.notify_wrap .notify_delete{ color:red; font-size:14px; position:absolute; top:0px; right:0px; } ul.notify_wrap .notify_delete:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f00d'; font-weight:bold; } ul.notify_wrap .notify_sender{ color:#999 !important; } ul.notify_wrap .notify_sender:before{ content:'\2219'; margin:0px 5px 0px 3px; color:#999; } .area.notification ul.notify_wrap{ clear:both; } .area.notification ul.notify_wrap .direct_link{ display:block; border-bottom:1px solid #e4e4e4; margin-bottom:5px; padding-bottom:30px; } .area.notification ul.notify_wrap .direct_link.empty{ padding-bottom:0px; } .area.notification ul.notify_wrap li.notify{ padding:20px; border-bottom:none; } .area.notification ul.notify_wrap li.notify img{ width:50px; height:50px; border-radius:25px; } .area.notification ul.notify_wrap li.empty{ border-bottom: none; } .area.notification ul.notify_wrap .notify_inner:before{ width:20px; height:20px; border-radius:10px; top:-3px; left:-3px; line-height:20px; } .area.notification ul.notify_wrap .notify_contents{ line-height:25px; width:calc(100% - 65px); } .area.notification ul.notify_wrap li.empty:before{ font-size:30px; } .area.notification ul.notify_wrap .notify_update:before{ content:'\2219'; margin:0px 5px 0px 3px; color:#999; } .area.notification ul.notify_wrap .notify_bubble{ display:inline-block; padding:15px 20px; margin:5px 0px 0px 10px; box-sizing: border-box; border-radius: 10px; font-size:13px; background:#f1f1f1; position:relative; line-height:20px; min-width:300px; } .area.notification ul.notify_wrap .notify_bubble.confirm{ color:#999; opacity:0.5; } .area.notification ul.notify_wrap .notify_bubble:after{ content: ""; position: absolute; bottom:100%; left:20px; border-width:15px; border-style: solid; border-color: transparent transparent #f1f1f1 transparent; } .area.notification ul.notify_wrap .notify_bubble .notify_sender{ color:#4254b6 !important; } .area.notification ul.notify_wrap .notify_bubble .notify_sender:before{ content:''; margin:0; } .area.notification ul.notify_wrap .notify_bubble .notify_sender span{ display:inline-block; vertical-align:middle; } .area.notification ul.notify_wrap .notify_bubble .sender_belong{ font-weight:normal; } .area.notification ul.notify_wrap .notify_bubble .sender_belong:before{ content:'\2219'; margin:0px 5px 0px 3px; color:#6779d3; } footer{ border-top:1px solid #ececec; background:#fafafa; font-size:12px; color:#444; padding:20px 0px 40px; } footer p{ margin:10px 0; } footer p:last-child{ margin:18px 0 0; } footer #footerMenuWrap .fright img{ margin-bottom:5px; } footer #footerLogo{ width:106px; margin-right:26px; } footer #footerMenu{ margin-top:9px; } footer #footerMenu a{ margin: 0 8px; background: #eee; padding: 4px 8px; border-radius: 4px; font-weight: 400; } footer #footerMenuWrap #sslSeal{ margin-top: 10px; } footer #footerMenuWrap .fright { position: relative; z-index: 2; } footer #dreamInfo{ display: block; top: -50px; margin-bottom: -60px } footer #footerMenu #dcamkr { color: #fff; background: #6779d3; } footer #footerMenu #dcamblog { color: #fff; background: #2aac52; } header #popup_zone .area{ position:relative; } header #popup_zone .popup_hide{ position:absolute; right:0px; bottom:5px; font-size:13px; color:rgba(255, 255, 255, 0.7); border:1px solid #aaa; padding:1px 10px; } .home_popup_layer{ position:absolute; border:1px solid #4d5eb1; z-index:5; } .home_popup_layer .popup_content img{ width:100%; } .home_popup_layer .popup_another{ width:100%; height:22px; position:relative; border-top:1px solid #4d5eb1; } .home_popup_layer .popup_hide{ font-size:11px; position:absolute; bottom:4px; right:4px; } #container{ margin-bottom:80px; } #container.home{ margin-bottom:0px; } #container .description{ background: url('/images/user/2depthBG.png') no-repeat bottom; padding: 52px 0 52px; text-align:center; } #container .description .h0{ margin-bottom:24px; } #container .description p{ line-height:23px; } #container .secondary{ width:100%; display:table; } #container .secondary a{ display:table-cell; text-align:center; width:12.5%; background:#6779d3; font-size:16px; transition: background-color 0.2s ease; padding:28px 0; box-sizing:border-box; color:#fff; } #container ol.secondary a{ width:auto; padding:7px 14px; display:inline-block; font-size:14px; } #container .secondary a:hover{ background:#4254b6; } #container .secondary a.on{ background:#4254b6; color:#deff00; } #container.area .inner_wrap{ margin-top:40px; } #container .secondary.thin a{ padding:15px; font-size:14px; } .action_bottom{ position:fixed; bottom:20px; right:20px; /*box-shadow:10px 10px 10px #ccc; outline:none;*/ width:70px; height:70px; /*border:1px solid #f9f9f9;*/ border: 1px solid #ccc; display:none; border-radius:35px; font-size:10px; text-align:center; /*background:rgba(200,200,200,0.2);*/ background:#f9f9f9; z-index:10; padding:15px 0; box-sizing:border-box; color:#6879d3; box-shadow: 0px 0px 5px 0 rgba(50, 50, 50, 0.3); } .action_bottom:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f7e4'; font-weight:bold; font-size:20px; margin-bottom:4px; display:block; color:#4254b6; } #page_top.action_bottom{ bottom:40px; right:40px; padding:13px; } #page_top.action_bottom:before{ content:'\f077'; margin-bottom:0px; } /* 메인 슬라이드 */ .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ bottom:15px !important; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ outline:none; } .swiper-pagination-bullet-active{ background:#6879d3 !important; } .swiper-container img{ position:relative; left:50%; transform:translate(-50%, 0); } .item_group{ width:100%; margin-bottom:70px; } .item_group li{ margin-bottom:10px; border:1px solid #ccc; padding:12px; box-sizing:border-box; position:relative; transition: background-color 0.2s ease; /*box-shadow:3px 3px 5px 0px #eee;*/ } .item_group li:hover{ background:#f9f9f9; border:1px solid #d7daea; } .item_group li:hover .thumbnail{ transform: scale(1.2); transition: transform .35s; } .item_group li.competency .round{ position:absolute; top:5px; right:5px; color:#deff00; background:#4254b6; padding:5px 7px; font-size:10px; } .item_group li.competency .item_infomation{ margin:5px; } .item_group .item_empty{ text-align:center; padding:50px; } .item_group .item_empty p{ margin:10px 0; } .item_group .item_empty i{ font-size:28px; margin-top:10px; } .item_group .item_infomation{ display:inline-block; margin-left:20px; vertical-align:top; /*width:610px;*/ width:750px; } .item_group .item_infomation h1{ width:100%; letter-spacing:-2px; overflow:hidden; } .item_group .item_infomation .absolute{ bottom: 12px; } .item_group .label{ padding: 6px 8px; font-size:10px; } .item_group .additory_infomation{ display:flex; justify-content:right; } .item_group .additory_infomation .study_receive{ display:inline-block; vertical-align:middle; padding:4px 5px 4px 14px; box-sizing:border-box; background:#f1f1f1; font-size:11px; border-radius:30px; margin-bottom:12px; } .item_group .additory_infomation .study_receive .receive_txt{ margin-right:5px; vertical-align:middle; font-weight:bold; } .item_group .additory_infomation .label{ border-radius:30px; padding:7.5px 12px; font-size:11px; vertical-align:middle; background:#ff65a6; color:#fff; margin-right:3px; margin-bottom:12px; } .item_group .additory_infomation .label.complete{ background:#4254b6; } label.toggle{ width:50px; height:22px; line-height:22px; position:relative; display:inline-block; vertical-align:middle; cursor:pointer; } label.toggle.block{ cursor:default; } label.toggle .slider{ position:absolute; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.4s; border-radius:30px; box-shadow:inset 3px 3px 10px -5px #333; } label.toggle .slider:before{ content:''; width:14px; height:14px; position: absolute; left:calc(0% + 4px); bottom:4px; background-color:white; transition: .4s; border-radius: 50%; z-index:10; box-shadow:0px 0px 10px -3px #333; } label.toggle .slider:after{ content:'OFF'; position:absolute; right:9px;transition:all .4s ease; font-size:10px; font-weight:bold; top:50%; transform:translateY(-50%); } label.toggle input:checked + .slider{ background:#fedc00; } label.toggle input:checked + .slider:before{ transform:translateX(28px); } label.toggle input:checked + .slider:after{ content:'ON'; right:auto; left:4px; transform:translate(0.5rem, -50%); } .item_group.half{ display:table; } .item_group.half li{ width:calc(50% - 4px); display:table; } .item_group.half a:nth-child(odd) li{ margin-right:8px; } .item_group.half ul.disc li{ width:100%; } .item_group.half .item_infomation{ width:calc(100% - 205px); } .item_group.half .item_infomation h1{ height:56px; } .item_group.half .item_infomation p{ margin-bottom:4px;} .item_group.quarter { display:table; } .item_group.quarter li{ width:24.5%; display:table; display: inline-block; } .item_group.quarter a:nth-child(odd) li{ margin-right:10px; } .circle_group{ position:absolute; top:50%; right:25px; transform: translate(0%, -50%); } .circle_group.end:not(.collective, .webinar){ top:120px; } .circle_group .c100{ /*box-shadow:5px 5px 10px 0px #ccc;*/ } .circle_group .c100 p{ margin:0; } .circle_group .circle_canvas canvas{ margin:0px 5px; } .circle_canvas{ position:relative; display:inline-block; vertical-align:middle; } .circle_canvas canvas{ margin:0 auto 0; } .circle_canvas .progress_status{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center; width:100%; line-height:20px; } .circle_canvas .h1{ font-size:20px !important; font-weight:bold; line-height:1; letter-spacing:-1px; margin:2px 0px 0px 0px; } .circle_canvas .h4{ font-size:14px !important; } .circle_canvas .h1.blue{ color:#4254b6; } .circle_canvas.big{ display:block; } .circle_canvas.big .h1{ font-size:30px !important; } .circle_canvas.big .h4{ margin:3px 0px 0px 0px; } .circle_canvas:after{ content:''; position:absolute; width:95%; height:95%; background:#fff; border-radius:50%; top:50%; left:50%; transform: translate(-50%, -50%); z-index:-1; } .circle_canvas.blue{ color:#fff; } .circle_canvas.blue:after{ background:#6779d3; transition:all 0.1s ease; } .circle_canvas.blue:hover:after{ background:#4254b6; } .circle_canvas.gray{ color:#666; } .circle_canvas.gray:after{ background:#eee; transition:all 0.1s ease; } .circle_canvas.gray:hover:after{ background:#ddd; } .circle_canvas.player .h1{ font-size:16px !important; } .circle{ width:82px; height:82px; display: inline-block; line-height:84px; text-align:center; border-radius: 50%; margin:0px 5px; /*box-shadow:5px 5px 10px 0px #ccc;*/ transition: background 0.2s ease; } .circle.gray{ background:#eee; border:4px solid #ddd; color:#666; } .circle.gray:hover{ background:#ddd; color:#000; } .circle.purple{ border:4px solid #4254b6; background:#6779d3; color:#fff; } .circle.purple:hover{ border:4px solid #4254b6; background:#4254b6; } .circle.white{ border:4px solid #4254b6; background:#fff; color:#4254b6; } .circle.white:hover{ border:4px solid #6779d3; background:#6779d3; color:#fff; } .circle.pink{ border:4px solid #ff4f99; background:#fd78b0; color:#fff; } .circle.pink:hover{ border:4px solid #ff4f99; background:#ff4f99; } .circle_group .c100:after{ /*left:0.0455em;*/ } /* 버튼 */ .button_group{ text-align:center; margin:30px auto 0; } .button_group .button{ padding:8px 46px; /*height:40px !important; line-height:30px;*/ margin:0 1px; } .button{ display: inline-block; border: 1px solid #cdcdcd; background: #f5f5f5; cursor: pointer; transition: background-color 0.2s ease; /*height: 32px; line-height: 32px;*/ padding: 6px 19px; position: relative; box-sizing:border-box; color:rgba(0,0,0,0.9); outline:none; line-height:normal; vertical-align:middle; font-size:13px; text-align:center; text-decoration: none !important; overflow:hidden; } .button.gray:before { width: 100%; position: absolute; top: 0; background: #fff; height: 1px; content: ""; left: 0; } .button:hover:before { display: none; } .button.blue{ border: 1px solid #4d5eb1; background: #6779d3; color: #fff; } .button.blue:hover{ border: 1px solid #4d5eb1; background: #4d5eb1; color: #fff; } .button.blue:before { width: 100%; position: absolute; top: 0; height: 1px; content: ""; left: 0; background: #7b8ad9; } .button.small{ padding:3px 15px; font-size:11px; } .button.radius{ border-radius:20px; } .button.big{ padding:13px 48px; font-size:16px; } .button.big.radius{ border-radius:30px; } .button.delete{ background:#f33f3f; color:#fff; border:1px solid #ca1414; } .button.delete.disabled{ opacity:0.5; color:#fff !important; } .button.add{ background:#795548; color:#fff; border:1px solid #50382f; } .button.yellow{ background:#F9D949; color:#000; border:1px solid #dfb600; } .button.cancel{ background:#ddd; color:#000; border:1px solid #ccc; } .button.save{ background:#ffb100; color:#fff; border:1px solid #d0a52f; } .button.search{ background:#2196f3; color:#fff; border:1px solid #1f7e9c; } .button.select{ background:#4caf50; color:#fff; border:1px solid #5c8e27; } .button.excel{ background:#217346; color:#fff; border:1px solid #1b402c; } .button.violet{ background:#6879d3; color:#fff; border:1px solid #4254b6; } .button.violet:hover{ background:#4254b6; color:#fff; border:1px solid #6879d3; transition: all 0.2s ease; } .button.white{ background:#fff; color:#000; border:1px solid #4254b6; } .button.white:hover{ background:#6879d3; color:#fff; border:1px solid #6879d3; transition: all 0.2s ease; } .button.purple{ background:#6779d3; border:1px solid #4d5eb1; color:#fff; } .button.kakao{ background:#fedc00; border:1px solid #d6bb08; } .button.naver{ background:#20bc03; border:1px solid #00a030; color:#fff; } .button.pink{ background:#FC819E; border:1px solid #F7418F; color:#fff; } .button.platform{ width:140px; background:#333 !important; color:#fff; text-indent:0px; border-radius:10px; border:none; } .button.platform:before{ content:''; display:block; width:24px; height:24px; background-size:100% 100%; margin:3px auto 5px; } .button.platform.android{ } .button.platform.android:before{ background-image:url('/images/common/store_android.png'); } .button.platform.ios{ } .button.platform.ios:before{ background-image:url('/images/common/store_ios.png'); } .button.chat{ position:fixed; bottom:40px; right:40px; padding:0; width:70px; height:70px; border-radius:50%; text-align:center; z-index:999; line-height:20px; font-size:11px; border:none; box-shadow:0px 0px 5px 0 rgba(50, 50, 50, 0.3); background:#f9f9f9; font-weight:bold; color:#333; overflow:visible; transition:all 0.5s ease; } .button.chat:before{ content:''; width:30px; height:30px; display:block; background:url('/upload/profile/default.png'); background-size:100% 100%; margin:13px auto 0; border-radius:50%; transition:all 0.2s ease; } .button.chat:after{ content:attr(unidentified); position:absolute; top:0px; right:0px; background:#f33f3f; width:20px; height:20px; line-height:20px; text-align:center; transition:all 0.2s ease; color:#fff; font-size:10px; font-weight:bold; border-radius:50%; } .button.chat:hover{ border-radius:20%; } .button.chat:hover:before{ border-radius:20%; } .button.chat:hover:after{ top:-5px; right:-5px; } .button.chat:not(.study).up{ bottom:120px; } iframe#chat{ position:fixed; bottom:40px; right:40px; width:380px; height:700px; background:#fff; z-index:10000; box-shadow:0px 0px 10px 0 rgba(0,0,0,0.3); border-radius:30px; display:none; } .wave { opacity: .4; position: absolute; bottom: 3%; left: 50%; background: #6879d3; color:#fff; width: 120px; height: 120px; margin-left: -60px; margin-bottom: -130px; transform-origin: 50% 48%; border-radius: 43%; transition-duration: 1.75s; transition-property: margin-bottom; transition-timing-function: ease; animation: rotate 2000ms infinite linear; } .wave.up{ margin-bottom: -60px; } @keyframes rotate { from { transform: rotate(0deg); } from { transform: rotate(360deg); } } input[type=submit].button { /*height: 48px;*/ } .quotes{ position:relative; } .quotes:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f10d'; font-weight: 900; font-size:0.5em; margin:2px 3px 0px 0px; display:inline-block; vertical-align:top; } .quotes:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f10e'; font-weight: 900; font-size:0.5em; margin:3px 0px 0px 3px; display:inline-block; vertical-align:top; } p.icon{ text-indent:-16px; margin-left:16px !important; } .icon.percent:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f541'; font-weight:bold; margin-left:3px; } .icon.info:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f05a'; font-weight:bold; margin-right:5px; } .icon.tel:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f87b'; font-weight:bold; margin-right:5px; } .icon.web:before { font-family: 'Font Awesome 5 Brands'; content: '\f268'; font-weight: 900; margin-right: 5px; font-size: 14px; vertical-align: bottom; } .icon.mobile:before { font-family: 'Font Awesome 5 Free'; content: '\f3cd'; font-weight: 900; font-size: 14px; margin-right: 5px; vertical-align: bottom; } .icon.ios:before { font-family: 'Font Awesome 5 Brands'; content: '\f179'; font-weight: 900; margin-right: 5px; font-size: 15px; line-height: 1; /*vertical-align: bottom;*/ } .icon.android:before { font-family: 'Font Awesome 5 Brands'; content: '\f17b'; font-weight: 900; margin-right: 5px; font-size: 15px; line-height: 1; vertical-align: bottom; } .icon.certification:before { font-family: 'Font Awesome 5 Free'; content: '\f2bb'; font-weight: bold; margin-right: 5px; font-size: 14px; vertical-align: bottom; } .icon.right:before { font-family: 'Font Awesome 5 Free'; content: '\f0da'; font-weight: bold; margin: 0px 5px; font-size: 14px; vertical-align: middle; } .icon.blank:after { font-family: 'Font Awesome 5 Free'; content: '\f35d'; font-weight: bold; margin-left:10px; font-size:13px; vertical-align: middle; } .icon.ing:after { font-family: 'Font Awesome 5 Free'; content: '\f004'; font-weight: bold; position: absolute; top:19px; margin-left:5px; font-size:13px; vertical-align: middle; color:#f33f3f; animation:heart 0.9s infinite; } .icon.message:before { font-family: 'Font Awesome 5 Free'; content: '\f086'; font-weight: bold; margin-right:5px; font-size:13px; vertical-align:middle; } /* 색상 */ .color.orange{ color:#ff6600; } .color.red{ color:#f33f3f; } .color.blue{ color:#6779d3; } .color.yellow{ color:#ffc107; } .color.gold{ color:#ffc107; } .color.silver{ color:#9e9e9e; } .color.bronze{ color:#795548; } .color.navi{ color:#3f51b5; } .color.green{ color:#26b72c; } .color.white{ color:#fff; } .color.violet{ color:#6e5cfb; } .color.pink{ color:#ff4f99; } .bold{ font-weight:bold !important; } .secondary { color: rgba(0,0,0,0.7); } .disabled { color: rgba(0,0,0,0.4); } /* 공통 */ .w100{ width:100% !important; } .w20p{ width:20% !important; } .w50p{ width:50% !important; } .w55p{ width:55% !important; } .w60p{ width:60% !important; } .w70p{ width:70% !important; } .w75p{ width:75% !important; } .w80p{ width:80% !important; } .w65px{ width:65px !important; } .w100px{ width:100px !important; } .w145px{ width:145px !important; } .w250px{ width:250px !important; } .w500px{ width:500px !important; } .h100px{ height:100px !important; } .h150px{ height:150px !important; } .h200px{ height:200px !important; } .h300px{ height:300px !important; } .hide{ display:none; } .area{ /*width:1080px;*/ width: 1200px; margin:0 auto 0; clear:both; position:relative; } .area.notification{ margin:30px auto 50px; width:1000px; } .fleft{ float:left; } .fright{ float:right; } .c_blue{ color:#6779d3; } .inline-block{ display:inline-block; } .vertical-middle{ vertical-align:middle !important; } .vertical-top{ vertical-align:top !important; } .vertical-super{ vertical-align:super !important; } .vertical-bottom{ vertical-align:bottom !important; } .vertical-unset{ vertical-align:unset !important; } .label{ padding: 7.5px 10px; background: #f5f5f5; color: #6779d3; font-size:12px; line-height: normal; vertical-align: middle; text-align:center; } .label.purple{ background:#6779d3; color:#fff; } .label.white{ background:#fff; color:#4254b6; border:1px solid #4254b6; } .label.small{ padding:2px 6px; } .label.small.morethan{ padding:2px 8px; font-size:10px; } .label.radius{ border-radius:5px; } .label.evaluation.ing{ background:#ff8100; border-color:#ff8100; color:#fff; } .label.evaluation.submit{ background:#37bf71; border-color:#37bf71; color:#fff; } .label.enroll.complete{ background:#4254b6; border-color:#4254b6; color:#fff; } .jconfirm-content{ line-height:22px; } .jconfirm .jconfirm-buttons{ width:100%; text-align:right; } .jconfirm .btn.fleft{ float:left !important; } .label.hash_tags{ background:transparent; color:#4254b6; display:inline-block; padding:2px 0px; /*min-width:45px;*/ } .item_infomation .label.hash_tags:first-child{ margin-left:10px; } .disabled{ color:rgba(0, 0, 0, 0.45) !important; } img.smileys{ display:inline-block; vertical-align:text-bottom; } .mt0{ margin-top:0px !important; } .mt3{ margin-top:3px !important; } .mt5{ margin-top:5px !important; } .mt6{ margin-top:6px !important; } .mt7{ margin-top:7px !important; } .mt8{ margin-top:8px !important; } .mt10{ margin-top:10px !important; } .mt15{ margin-top:15px !important; } .mt20{ margin-top:20px !important; } .mt25{ margin-top:25px !important; } .mt30{ margin-top:30px !important; } .mt40{ margin-top:40px !important; } .mt50{ margin-top:50px !important; } .mt60{ margin-top:60px !important; } .mt70{ margin-top:70px !important; } .mt80{ margin-top:80px !important; } .mt100{ margin-top:100px !important; } .mb0{ margin-bottom:0px !important; } .mb3{ margin-bottom:3px !important; } .mb5{ margin-bottom:5px !important; } .mb10{ margin-bottom:10px !important; } .mb15{ margin-bottom:15px !important; } .mb20{ margin-bottom:20px !important; } .mb25{ margin-bottom:25px !important; } .mb30{ margin-bottom:30px !important; } .mb40{ margin-bottom:40px !important; } .mb50{ margin-bottom:50px !important; } .mb100{ margin-bottom:100px !important; } .mb140{ margin-bottom:140px !important; } .ml3{ margin-left:3px !important; } .ml5{ margin-left:5px !important; } .ml10{ margin-left:10px !important; } .ml15{ margin-left:15px !important; } .ml20{ margin-left:20px !important; } .ml25{ margin-left:25px !important; } .ml30{ margin-left:30px !important; } .ml40{ margin-left:40px !important; } .ml50{ margin-left:50px !important; } .ml60{ margin-left:60px !important; } .ml70{ margin-left:70px !important; } .mr3{ margin-right:3px !important; } .mr5{ margin-right:5px !important; } .mr10{ margin-right:10px !important; } .mr20{ margin-right:20px !important; } .mr30{ margin-right:30px !important; } .m0{ margin:0px !important; } .border{ border:1px solid #ccc; box-sizing:border-box; } .padding20{ padding:20px; } .padding30{ padding:30px; } .d_table{ display:table; } .clear:after{ content: ''; display: block; clear: both; } .ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; width:95%; letter-spacing: -1px; } .vertial_bar{ color:#ddd; margin:0 15px; } .align.center{ text-align:center; } .align.left{ text-align:left; } .align.right{ text-align:right; } a.common:hover { text-decoration: underline; } .fixed { position: fixed !important; } .relative { position: relative; } .absolute { position: absolute; } .through{ text-decoration:line-through; color:rgba(0, 0, 0, 0.3); } .jconfirm.jconfirm-white .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg{ background:#000; opacity:0.3; } .essential:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; vertical-align:top; margin-right:3px; font-size:10px; } .underline{ text-decoration: underline; } .radius{ border-radius:50%; } .nice-select{ max-width:100%; height:32px !important; line-height:30px !important; font-size:13px !important; border:1px solid #ccc !important; padding-left:13px; } .nice-select .list{ z-index:1000; max-height:160px; overflow-y:auto; } .nice-select .option{ min-height:30px; line-height:30px; } table.table { border-top: 1px solid #ccc; margin: 20px 0; width: 100%; } table.table tr th { background: #ececec; border-bottom: 1px solid #ccc; padding: 15px; } table.table tr td { border-bottom: 1px solid #ccc; padding: 15px; background: #fff; } table.table.mini { width: initial; margin: 0; } table.table.mini tr th { padding: 1px 5px; } table.table.mini tr td { padding: 1px 5px; } .txt { margin: 40px 0 80px; } .txt .box { border: 1px solid #ccc; padding: 20px 30px; background: #f5f5f5; } .txt h1 { margin-top: 40px; margin-bottom: 25px; } .txt h2 { position: relative; margin-top: 15px; margin-bottom: 10px; } .txt h2:before { background: url("/images/user/context_h2.svg"); width: 25px; height: 7px; content: ""; position: absolute; top: -8px; } .txt h3 { position: relative; margin-bottom: 5px; position: relative; padding-left: 10px; } .txt h3:before { content: ""; height: 5px; width: 5px; background: #6779d3; position: absolute; left: 0; top: 7px; } /* TAG 초기화 */ select, input, textarea{ font-size:13px; border:1px solid #ccc; box-sizing: border-box; resize:none; outline:none; vertical-align:middle; border-radius:0; box-shadow:none; } textarea{ padding:5px; height:80px; } select{ padding:5px; } input[type=text], input[type=password], input[type=number], input[type=date]{ padding:6px; } iframe{ border:none; } xmp{ margin:0; } hr{ background:#ddd; border:0; height:1px; } .h00 { font-size: 4.285em; font-weight: 500; } .h0 { font-size:32px !important; margin:0; font-weight: 500; } h1, .h1{ font-size:20px !important; margin:0; font-weight: 500; } h2, .h2{ font-size:16px !important; margin:0; font-weight: 500; } h3, .h3{ font-size:14px !important; margin:0; font-weight: 500; } h4, .h4{ font-size:12px !important; margin:0; font-weight: 400; } h5, .h5{ font-size:10px !important; margin:0; font-weight: 400; } h1.sub_tit:before{ content:''; width:14px; height:14px; background:url('/images/common/sub_tit_icon.png') no-repeat; display:inline-block; margin-right:5px; } h2.sub_tit:before{ content:''; width:12px; height:12px; background:url('/images/common/sub_tit_icon.png') no-repeat; display:inline-block; margin-right:5px; } h3.sub_tit:before{ content:''; width:10px; height:10px; background:url('/images/common/sub_tit_icon.png') no-repeat 100% 100%; display:inline-block; margin-right:5px; } input[type=checkbox] { display: none; } input[type=checkbox] + label { cursor: pointer; user-select: none; } input[type=checkbox]:checked + label { color: #6779d3; } input[type=checkbox] + label span{ display: inline-block; vertical-align: middle; } input[type=checkbox] + label span.check{ height: 15px; width: 15px; margin-right: 5px; background-image: url('/images/user/checkbox.png'); background-repeat: no-repeat; } input[type=checkbox]:checked + label span.check{ background-image: url('/images/user/checkbox.png'); background-repeat: no-repeat; background-position-y: -15px; } input[type=checkbox] + label.simple{ display:inline-block; font-size:14px; cursor:pointer; line-height:20px; vertical-align:unset; } input[type=checkbox] + label.simple span{ display: inline-block; vertical-align:middle; line-height:1; } input[type=checkbox] + label.simple span.check{ width:20px; height:20px; margin:0px; box-sizing:border-box; background:#ced3ed; border-radius:5px; text-align:center; box-shadow:none; border:none; } input[type=checkbox]:checked + label.simple{ font-weight:normal; color:#000; } input[type=checkbox]:checked + label.simple span.check{ background:#5A37E8; border:none; } input[type=checkbox]:checked + label.simple span.check:before{ font-family:'Font Awesome\ 5 Free'; content:'\f00c'; font-weight: bold; font-size:10px; line-height:20px; color:#fff; } input[type=radio]{ display:none; } input[type=radio] + label { cursor:pointer; /*display:table;*/ margin:0 auto 0; } input[type=radio] + label span.radio{ width:14px; height:14px; border-radius:10px; background:#fff; border:1px solid #aaa; margin-right:3px; /*margin-top:1px;*/ } input[type=radio] + label span{ display:inline-block; vertical-align:middle; } input[type=radio] + label:before span.radio{ content:""; } input[type=radio]:checked + label span.radio:before{ content:""; width:8px; height:8px; border-radius:6px; background:#6779d3; display:block; margin:3px auto 0; } input[type=radio]:checked + label{ color:#6779d3; } input[type=radio]:checked + label span.radio{ border:1px solid #4d5eb1; } label.switch{ position: relative; display: inline-block; width: 55px; height: 30px; } label.switch.small{ width:40px; height:22px; } label.switch .slider{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cdcdcd; transition: .4s; border-radius: 30px; } label.switch .slider:before{ position: absolute; content: ""; width: 22px; height: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } label.switch.small .slider:before{ width:14px; height:14px; } input:checked + .slider{ background-color: #79bb33; } input:focus + .slider{ box-shadow: 0 0 1px #79bb33; } input:checked + .slider:before{ transform: translateX(25px); } label.switch.small input:checked + .slider:before{ transform: translateX(18px); } a.select{ font-weight:bold; } a.select:before{ display:inline-block; width:10px; } a.select.left:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d9\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; } a.select.right:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0da\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; } a.select.right.middle:before{ vertical-align:middle; } a.select.up:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d8\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; width:13px; } a.select.down:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d7\00a0\00a0'; font-weight: 900; line-height:1; color:#4254b6; width:13px; } /* 레이어 팝업 */ .layer_group{ width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:1000000; overflow-y:auto; background-color: rgba(0, 0, 0, 0.3); display:none; } .layer_group.show{ display:block; } .layer_group .layer_wrap{ position:absolute; background:#fff; box-sizing:border-box; padding:20px; box-shadow:7px 7px 40px 5px #666; border-radius:5px; text-align:left; z-index:100; max-width:90%; } .layer_group .layer_wrap .layer_container{ max-width:100%; } .layer_group .layer_wrap .layer_container.smallest{ width:auto; padding:0px 20px; } .layer_group .layer_wrap .layer_container.small{ width:500px; } .layer_group .layer_wrap .layer_container.medium{ width:800px; } .layer_group .layer_wrap .layer_container.large{ width:1200px; } .layer_group .layer_wrap .button_group{ border-top:1px solid #cdcdcd; padding-top:15px; text-align:right; } .layer_group .layer_wrap .button_group .button{ padding:5px 15px; } .layer_group .layer_wrap .button_group.long{ text-align:center; border:none; margin:10px auto 0; } .layer_group .layer_wrap .button_group.long .button{ padding:8px 30px; } .layer_group .layer_wrap ul.paging-wrap li{ width:28px; height:28px; line-height:28px; font-size:11px; } .layer_group .layer_wrap ul.paging-wrap li i{ line-height:28px; } .layer_group .layer_wrap .layer_container::-webkit-scrollbar { width: 5px; } .layer_group .layer_wrap .layer_container::-webkit-scrollbar-track { background-color: #efefef; } .layer_group .layer_wrap .layer_container::-webkit-scrollbar-thumb { background-color: #ddd; } .layer_group .layer_wrap.long{ margin-bottom:100px; } .layer_group .layer_wrap .select_option { margin-bottom: 20px; text-align: center; } .layer_group .layer_wrap .select_option .button { padding: 8px; width: calc(50% - 20px); } .layer_group .layer_wrap .select_option .button.active { background: #3985bf; border: 1px solid #2d6c9d; color: #fff; } .layer_group .layer_wrap #mobile_otp { text-align: center; margin-top: 25px; } .layer_group .layer_wrap #mobile_otp input { width: 50px; height: 50px; text-align: center; font-size: 20px; border-radius: 14px; border: 3px solid #ccc; font-weight: bold; } .layer_group .layer_wrap #mobile_otp input:focus { border: 3px solid #6779d3; } .layer_group .layer_wrap #mobile_otp .verify_otp { width: 70%; padding: 8px; } .layer_group .layer_wrap #motp .button.motp_download { width: 90%; padding: 8px; display: block; margin: 30px auto 0; } .layer_group .layer_wrap #motp .button.motp_download:before { content: ""; display: inline-block; width: 50px; height: 50px; background-image: url("/images/user/study/motp/logo.png"); background-size: 100% 100%; border: 1px solid #ccc; border-radius: 15px; vertical-align: middle; margin-right: 8px; } .layer_group .layer_wrap #motp .button.motp_download b { vertical-align: middle; display: inline-block; text-align: left; } .layer_group .layer_wrap .motp_guide .swiper-container-fade .swiper-slide { background: #fff; height: 600px; overflow-y: auto; } .layer_group .layer_wrap .motp_guide .swiper-container-fade .swiper-slide img { border: 1px solid #eee; padding: 10px; box-sizing: border-box; border-radius: 10px; } .layer_group .layer_wrap .motp_guide .swiper-container-fade .swiper-slide h2 { margin-bottom: 10px; } .layer_group .layer_wrap .motp_guide .swiper-loading { border: 1px solid #eee; padding: 100px; box-sizing: border-box; border-radius: 10px; width: 100%; text-align: center; line-height: 22px; font-weight: bold; } .layer_group .layer_wrap.circle{ width:400px; height:400px; background:#fff; border:10px solid #7667ff; text-align:center; border-radius:290px; position:absolute; top:0px; box-shadow: 7px 7px 40px 5px #666; line-height:normal; } .layer_group .layer_wrap.circle .h0{ margin:40px auto 30px; } .layer_group .layer_wrap.circle .error_feedback{ width:80%; margin:20px auto 30px; } .layer_group .layer_wrap.circle .error_feedback .row{ margin-top:-1px; } .layer_group .layer_wrap.circle .error_feedback .row > *{ padding:8px; } .layer_group .layer_wrap.circle li{ line-height:24px; } .layer_group .layer_wrap.circle .error_feedback .cancel{ position:absolute; top:-20px; right:-20px; width:60px; height:60px; background:#7667ff; color:#fff; font-size:34px; padding:12px; border-radius:30px; } .layer_group #member_form{ width:auto; padding:30px; } #loading.layer_group .layer_wrap{ background:none; box-shadow:none; padding:0; } #duty.layer_group .layer_wrap .h0{ font-size:56px !important; } #sample_container .cancel{ position:absolute; top:-55px; right:-55px; width:60px; height:60px; background:#7667ff; color:#fff; font-size:34px; padding:12px; border-radius:30px; } #sample_container .align.center{ padding:20px 0px 25px 0px; } /* 검색 폼 */ /* .search_wrap{ margin-bottom:5px; text-align:left; display: inline-block; } .search_wrap.course{ display:block; border-bottom:1px solid #ccc; padding:15px 15px 10px 15px; text-align:right; margin-bottom:30px; } */ .search_wrap{ margin-bottom:15px; text-align:left; background: #fff; padding: 20px; box-sizing: border-box; border: 5px solid #e7e8ea; font-size:12px; width:100%; } .search_wrap:after{ content:''; clear:both; display:block; } .search_wrap .division{ line-height:30px; } .search_wrap .division .title{ margin-right:5px; font-weight:bold; vertical-align: middle; display:inline-block; line-height:31px; } .search_wrap .division.line:after{ content:'|'; margin:0px 10px 0px 7px; color:#999; } .search_wrap .search_depth:last-child{ margin-top:20px; border-top:1px solid #eee; padding-top:20px; } .search_wrap .search_depth:after{ content:''; clear:both; display:block; } .search_wrap input.button{ height: 32px; /*vertical-align:top;*/ } .search_wrap .search_depth:last-child{ margin-top:20px; border-top:1px solid #eee; padding-top:20px; } .search_wrap .search_depth:after{ content:''; clear:both; display:block; } .search_wrap .search_depth h1:before{ font-family:'Font Awesome\ 5 Free'; content:'\f621'; margin-right:5px; font-size:13px; vertical-align:super; color:red; } .search_wrap.course .checkbox{ text-align:left; margin-bottom:5px; } .search_wrap.course div:first-child{ margin-right:50px; } .search_wrap.course label{ width:140px; } .search_wrap.course #hrd_zero + label{ width:190px; } .search_wrap.course #lll_card + label{ width:140px; } .search_wrap.course div.search{ padding-top:55px; } .search_wrap .bbs_description{ line-height:20px; } .search_wrap .button.company{ margin-top:4px; } /* Toast */ #toast-container .toast-title{ font-size:14px; margin-bottom:2px; } #toast-container .toast-message{ font-size:13px; } #toast-container .toast-success{ background-color:#4d5eb1; background-position:18px; border-radius: 20px; } #toast-container>div{ padding:10px 15px 13px 60px; } #toast-container .toast-info{ background-image:none !important; background-color: #4d5eb1; background-position:20px; border-radius: 20px; } #toast-container .toast-info:before{ font-family:'Font Awesome\ 5 Free'; content:'\f075'; position:absolute; top:50%; left:20px; transform:translate(0%, -50%); font-size:24px; font-weight:bold; } /* 테이블 */ table{ table-layout: fixed; font-size:14px; } table.default i{ vertical-align:middle; } table.default i.fa-bullhorn, table.default i.fa-key{ margin:0; } table.default td.start_date{ border-right:none !important; position:relative; } table.default td.start_date:after{ content:'~'; position:absolute; top:15px; right:-4px; } table.default td.dash{ border-right:none !important; position:relative; } table.default td.dash:after{ content:'-'; position:absolute; top:13px; right:-2px; } table.default td.email{ border-right:none !important; position:relative; } table.default td.email:after{ content:'@'; position:absolute; top:14px; right:-5.5px; font-size:12px; } table.default td{ /*line-height:26px;*/ position:relative; } table.default.column{ width:100%; border-top:1px solid #cdcdcd; text-align:center; background:#fff; margin:15px 0; } table.default.column tr{ border-bottom:1px solid #cdcdcd; } table.default.column td{ padding:13px; /*padding:15px;*/ /*padding:10px;*/ line-height:22px; } table.default.column td.left{ text-align:left; } table.default.column th{ background:#f9f9f9; padding:10px; line-height:22px; } table.default.column .board_info{ padding:5.5px; display:inline-block; } table.default.column .attachment{ padding:5px 10px; } table.default.column.small{ width:70%; } table.default.column.small td, table.default.column.small th{ padding:8px; font-size:13px; } table.default.column .border-right{ border-right:1px solid #cdcdcd; } table.default.column.board td{ padding:10px; } table.default.column input[type=checkbox] + label{ line-height:32px; } table.default.column th.essential{ position:relative; } table.default.column th.essential:before{ content:''; } table.default.column th.essential:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f621'; font-weight:bold; color:#ff3d00; margin-left:3px; font-size:10px; position:absolute; top:10px; } table.rider input[type=radio] + label{ line-height:32px; } table.rider tr p{ font-size:12px !important; } table.default.row i{ margin:0; } table.default.row{ width:100%; border-top:2px solid #344e81; text-align:center; background:#fff; } /* table.default.row.line th, table.default.row.line td{ border-right:1px solid #cdcdcd; } table.default.row.line th:last-child, table.default.row.line td:last-child{ border-right:none; } */ table.default.row.line th:not(:last-child), table.default.row.line td:not(:last-child){ border-right:1px solid #cdcdcd !important; } table.default.row.line tr:nth-child(n+2) th:last-child, table.default.row.line th[rowspan]:not(:last-child), table.default.row.line td[rowspan]:not(:last-child){ border-left:1px solid #cdcdcd; border-right:1px solid #cdcdcd; } table.default.row.line a:not('.button'):hover{ color:#344e81; text-decoration:underline; } table.default.row tr{ border-bottom:1px solid #cdcdcd; } table.default.row tbody tr:hover{ background:#eee !important; color:#4254b6 !important; } table.default.row tr span{ vertical-align:middle; } table.default.row thead tr{ border-bottom:1px solid #344e81; } table.default.row th{ padding:12px; background:#f9f9f9; } table.default.row td{ padding:15px; } table.default.row.share_note td{ padding:10px; height:25px; } table.default.row tr.alt{ background:#fafafa; } table.default.row tr.answer p{ font-size:13px !important; } table.default.row.thin th{ padding:10px; } table.default.row.thin td{ padding:10px; } table.default.row td.left{ text-align:left; } table.default.row td.right{ text-align:right; } table.default.row tr.answer td{ padding:20px; } table.default tr p{ margin:0; font-size:11px; } table.default tr.cursor{ cursor:pointer; } table.default.row.small th, table.default.row.small td{ padding:8px; font-size:13px; } table.default.row.board td{ padding:20px 15px; } table.default.row.board tbody tr{ height:59px; } table.default.row td.latest{ position:relative; } table.default.row td.latest:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f058'; font-weight: 900; margin-right:5px; position:absolute; top:14px; left:20px; font-size:17px; color:red; animation:heart 0.9s infinite; } table.default.row td .fa-medal{ font-size:16px; } table.default.row td.empty{ padding:80px 0 !important; color:rgba(0, 0, 0, 0.45) !important; background:#fff; } table.default.row td.empty.thin{ padding:40px 0 !important; } table.default.row td.empty:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f010'; font-weight: bold; display:block; margin-bottom:20px; font-size:34px; } table.default.row td.empty.thin:before{ margin-bottom:10px; font-size:32px; } table.default.row b.new{ background:#ffd12e; text-align:center; font-size:10px; color:#fff; border-radius:3px; padding:3px 6px; } table.simple.row{ width:100%; border-top:2px solid #6779d3; font-size:13px; text-align:center; } table.simple.row.line th, table.simple.row.line td{ border-right:1px solid #cdcdcd; } table.simple.row.line th:last-child, table.simple.row.line td:last-child{ border-right:none; } table.simple.row tr{ border-bottom:1px solid #ccc; } table.simple.row th, table.simple.row td{ padding:10px; } table.simple.row td.left{ text-align:left; } table.simple.column{ width:100%; border:1px solid #ccc; text-align:left; } table.simple.column tr{ border-bottom:1px solid #ccc; } table.simple.column th{ font-weight:normal; padding:15px 20px; } table.simple.column td{ padding:0px 10px; } .board_view{ border-top:1px solid #cdcdcd; font-size:13px; } .board_view .board_column{ display:inline-block; vertical-align:middle; } .board_view .board_column:first-child{ width:100px; text-align:center; } .board_view .board_column:last-child{ width:calc(100% - 104px); } .board_view .board_title{ padding:25px 30px; font-size:20px; border-bottom:1px solid #cdcdcd; background:#f9f9f9; } .board_view .board_title input{ padding:10px; font-size:16px; } .board_view .board_head{ height:40px; line-height:40px; padding:5px 15px 5px 30px; border-bottom:1px solid #cdcdcd; } .board_view .board_head img.profile{ margin-right:5px; border-radius:50%; vertical-align:-12%; } .board_view .board_head span{ margin-right:15px; } .board_view .board_table{ border-bottom:1px solid #cdcdcd; /*display:table;*/ width:100%; padding:8px; box-sizing: border-box; } .board_view .board_body{ background:#fff; padding:40px 35px; min-height:200px; border-bottom:1px solid #cdcdcd; line-height:20px; font-size: inherit; } .board_view .board_body > *{ max-width:100% !important; } .board_view .board_body ul{ padding-left:20px; } .board_view .board_body ul li{ list-style: disc; } .board_view img{ max-width:100%; height:auto !important; } .board_view a:hover{ text-decoration:underline; } .board_password{ border:1px solid #ccc; margin:80px auto 0; width:340px; padding:60px 30px 70px 30px; text-align:center; box-shadow:0 1px 10px 0 rgba(0,0,0,0.3); box-sizing:border-box; } .board_password input{ padding:10px; } .board_password h1{ font-size:24px !important; } .board_password i{ font-size:30px; padding:30px; border-radius:60px; border:2px solid #6779d3; color:#4254b6; } .board_password .secret_password_error{ margin:10px auto 20px; text-align:center; background:rgb(243, 63, 63, 0.7); box-sizing:border-box; padding:10px; color:#fff; border:2px solid #f33f3f; border-radius:10px; line-height:22px; font-size:13px; } table.table{ table-layout:auto !important; width:100% !important; border:none !important; border-top:1px solid #eee !important; } table.table tr:first-child td, table.table tr th{ background:#f9f9f9 !important; font-weight:bold; border:none !important; } table.table tr{ border-bottom:1px solid #eee; } table.table tr td{ padding:10px; border:none !important; } table.table tr td img{ width:80%; } table.table tr td.border, table.table tr td:not(:last-child), table.table tr th:not(:last-child){ border:none !important; border-right:1px solid #eee !important; } .note-editable p{ font-size:13px !important; } div.attachment{ padding:4px 10px; background:#fff; margin-bottom:8px; box-sizing: border-box; border:1px solid #ccc; text-align:left; font-size:12px; width:100%; line-height:17px; } div.attachment.active{ background:#f5f5f5; } div.attachment:last-child{ margin-bottom:0px; } div.attachment span{ background:#344e81; color:#fff; font-size:10px; padding:0px 6px; border-radius: 10px; margin-left:5px; cursor:pointer; } .board_comment{ margin-top:20px; padding:0px 30px; } .board_comment .comment{ padding:15px 20px; margin:0px auto 20px; box-sizing: border-box; border-radius: 10px; font-size:13px; background:#f1f1f1; width:70%; float:left; position:relative; } .board_comment .comment.me{ float:right; background:#d8def5; } .board_comment .comment_list{ display:flex; flex-direction:column-reverse; max-height:500px; overflow-y:auto; padding:10px; } .board_comment .comment_head span.fleft{ margin-right:15px; } .board_comment .comment_head img{ border-radius:50%; } .board_comment .comment_head .comment_delete{ position:absolute; bottom:15px; right:20px; font-size:12px; color:#f33f3f; } .board_comment .comment_head .comment_delete:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f00d'; font-weight:bold; margin-right:3px; } .board_comment .comment_body{ clear:both; margin-top:15px; line-height:20px; font-size:12px; width:90%; } .board_comment .comment_write{ border:1px solid #ccc; position:relative; background:#f9f9f9; } .board_comment .comment_write textarea{ border:none; width:100%; padding:10px; } .board_comment .comment_write .comment_write_name{ display:block; padding:6px 10px; border-top: 1px solid #ccc; font-size:13px; } .board_comment .comment_write .comment_write_name .notification{ float:right; margin-right:60px; } .board_comment .comment_write .comment_write_name .notification i{ font-size:13px; margin-right:5px; } .board_comment .comment_write .comment_save{ position:absolute; bottom:-1px; right:-1px; height:32px; } /* 안전보건 카페 */ .bbs_safety a:nth-child(2) li { border-left: 1px solid #84be59; border-right: 1px solid #84be59; } .bbs_safety { border: 1px solid #84be59; } .bbs_safety li { width: calc(100% / 3); display: inline-block; text-align: center; box-sizing: border-box; padding: 20px 0; } .bbs_safety li:hover { background: #84be59; color: #fff; } /* 소셜 로그인 아이콘 */ .linkage:before{ content: ''; width: 20px; height: 20px; display: inline-block; vertical-align: middle; margin-right: 5px; } .linkage.naver:before{ background:url('/images/user/member/logo_naver.png'); } .linkage.kakao:before{ background:url('/images/user/member/logo_kakao.jpg'); background-size:100% 100%; } .linkage.google:before{ background:url('/images/user/member/logo_google.png'); } /* 페이징 */ ul.paging-wrap{ width:80%; margin:30px auto 0; text-align:center; } ul.paging-wrap li{ display:inline-block; vertical-align:middle; width:32px; height:32px; line-height:32px; border:1px solid #cdcdcd; margin:0 2px; background:#fff; } ul.paging-wrap li.active{ border:1px solid #6779d3; color:#6779d3; } ul.paging-wrap li i{ color:#6779d3; line-height: 32px; margin:0; } ul.paging-wrap li.disabled{ background:#fafafa; } ul.paging-wrap li.disabled i{ color:#999; } /* 회원 가입 */ .oauth{ padding:13px; display:block; box-sizing: border-box; text-align:center; } #join_wrap{ width:100%; min-height:100%; background:#eee; text-align:center; } #join_wrap #join_footer{ padding:100px 60px 30px 60px; } #join_wrap #join_footer a{ margin:0 7px; } #join_wrap #join_footer p{ font-size:12px; margin:10px 0; } #join_wrap #join_footer .page_links{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd; } #join_wrap #join_header{ padding:20px; border-bottom:1px solid #eaeaea; } #join_wrap .step_circle{ width:10px; height:10px; margin:0 10px; display:inline-block; vertical-align:middle; background:#a1a1a1; border-radius:10px; } #join_wrap .step_circle.on{ width:12px; height:12px; background:#6779d3; } #join_container{ width:720px; height:100%; background:#fff; margin:0px auto 0px; position: relative; text-align:center; } #join_container .area{ width:640px; } #join_container .area.small{ width:480px; } #join_container .agree_each{ margin:0 auto 10px; border:1px solid #ccc; text-align:left; } #join_container .agree_each .title{ border-bottom:1px solid #ccc; padding:10px; line-height:23px; } #join_container .agree_each .contents{ max-height:120px; overflow-y:auto; padding:20px; margin:0; font-size:12px; } #join_container .agree_each .contents h5{ margin:5px 0; } #join_container .agree_each .contents h6{ margin:3px 0; } #join_container .agree_each .ellipsis{ width:85%; } #join_container #certify_limit{ font-size:13px; padding:6px 15px; vertical-align:middle; border:1px solid #ccc; color:#6778d3; font-weight:bold; } #join_container .oauth { padding:14px 0; } #join_container .join_warning{ background:#fff; padding:40px 50px 50px 50px; box-sizing:border-box; border:5px solid #e7e8ea; margin-bottom:40px; text-align:left; } #join_container .join_warning.small{ padding:40px; } /* 회원정보 수정 */ #update_container .oauth { display: inline-block; padding: 4px 30px; } /* 아이디 / 비밀번호 찾기 */ #member_form .resident_number input{ width:calc(50% - 6px); } /* 회원 로그인 */ #member_form{ width:720px; padding:65px 130px; margin:0 auto 0; box-sizing:border-box; z-index:1000; text-align:center; } #member_form img{ margin-bottom:40px; } #member_form input, #member_form select{ height: 49px; padding:13px; margin:0 0 15px; font-size:15px; } #member_form hr{ margin: 45px 0; } #member_form .button.big { height: 57px; padding:16px 48px; } #member_form .button.big:before { display: none; } #member_form .button.naver:hover { background: #20bc03; } #member_form .button.kakao:hover { background: #fedc00; } /* 관리자 로그인 */ #login_authority{ width:100%; height:100%; background:url('/images/user/authority_bg.jpg'); } #login_authority_form{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: rgba( 255, 255, 255, 0.5 ); padding:50px 50px 40px 50px; box-shadow:0 1px 10px 0 rgba(0,0,0,0.3); border-radius:5px; text-align:center; } #login_authority_form #member_form{ width:300px; padding:0; } #login_authority_form #member_form input, #login_authority_form #member_form select{ height:auto; margin:0px 0px 10px 0px; font-size:13px; } #login_authority_form #member_form .button.big{ padding:13px; } /* 메인 */ #main_img_area{ /*height:462px; background:url('/images/user/main.jpg') no-repeat center;*/ position:relative; background:#E0F2FF;/*linear-gradient(#150F2B, #292861, #1C1B5D);*/ } #login_wrap_area { position: absolute; top: 0; left: 0; width: 100%; } #login_wrap_area .area { margin: 0 auto; position: relative; } #login_wrap{ padding:15px; background:rgba(255,255,255,0.6); border:1px solid #ccc; width:260px; position: absolute; right:0; top:69px; box-sizing: border-box; z-index: 2; } #login_wrap .button{ width: calc(50% - 2px); padding:6px; } #login_wrap .fleft{ width:calc(100% - 65px); } #login_wrap .fleft input{ height: 32px; line-height: 32px; padding: 0 10px; } #login_wrap .fleft input[type=text]{ border-bottom: 0; height: 33px; } #login_wrap .fright input[type=submit]{ height: 65px; width: 65px; border: 1px solid #4d5eb1; background: #6779d3; line-height: inherit; padding: 0; color: #fff; font-size: 14px; } #login_wrap .fright input[type=submit]:hover{ background: #4d5eb1; } #login_wrap form .h5{ margin: 10px; } #login_wrap hr{ margin: 18px 0 15px; } #login_wrap #main_notice .clear{ margin-bottom:15px; } #login_wrap #main_notice .more{ margin-top:4px; } #login_wrap #main_notice ul li{ margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #login_wrap #main_notice ul li:last-child{ margin-bottom:0px; } #college{ height: 84px; background: #252287; line-height: 84px; color: #fff; overflow: hidden; } #college .area ul li{ padding: 0 28px; } #college .area ul li:hover{ color: #fff000; } #subject_list .area .item_group{ margin-bottom: 40px; } #subject_list .area h1{ margin: 60px 0 20px; } #subject_list .area h2{ margin-bottom: 10px; height:46px; } #subject_list .area ul li .thumbnail{ position:relative; } #subject_list .area ul li{ border: 1px solid #fff; } #subject_list .area ul li:hover{ border: 1px solid #ccc; background: inherit; } #subject_list .area ul li .thumbnail:before{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; transition: background-color 0.2s ease; } #subject_list .area ul li:hover .thumbnail:before{ background: rgba(0,0,0,0.40); } hr.area { margin: 60px auto 30px; } #shortcut .item_group{ margin-bottom: 40px; } #shortcut .item_group.quarter li{ width: calc(25% - 8.4px); height: 104px; padding: 20px 26px; margin-top: 0; border: 2px solid #ececec; position: relative; transition: background-color 0.2s ease; margin-left: 8px; vertical-align: top; } .-webkit- #shortcut .item_group.quarter li{ width: calc(25% - 6px); } #shortcut .item_group.quarter li:first-child{ margin-left: 0;} #shortcut .item_group.quarter li.green{ border-color: #84be59; } #shortcut .item_group.quarter li.sky{ border-color: #5ba1d6; } #shortcut .item_group.quarter li.red{ border-color: #ff8e8e; } #shortcut .item_group.quarter li.green:hover{ background: #84be59; } #shortcut .item_group.quarter li.sky:hover{ background: #5ba1d6; } #shortcut .item_group.quarter li.red:hover{ background: #f26767; border-color: #f26767; } #shortcut .item_group.quarter li h1{ margin-bottom: 10px; color: rgba(0,0,0,0.9); } #shortcut .item_group.quarter li div{ color: rgba(0,0,0,0.7); } #shortcut .item_group.quarter li:hover:not(#shortcutCall) h1{ color: rgba(255,255,255,0.9); } #shortcut .item_group.quarter li:hover:not(#shortcutCall) div{ color: rgba(255,255,255,0.7); } #shortcut .item_group.quarter li i{ position: absolute; right: 26px; top: 34px; font-size: 30px; } #shortcut .item_group.quarter li#shortcutCall:hover { background: #fff; } #shortcut .item_group.quarter li#shortcutCall a.hover { display: none; } /* #shortcut .item_group.quarter li#shortcutCall:hover a.hover { display: block; } #shortcut .item_group.quarter li#shortcutCall:hover a:not(.hover) { display: none; } */ /* 홈 */ #area_cs > div.area { display: table; margin: 43px auto 48px; } #area_cs > div.area > div { display: table-cell; width: 33%; padding: 0 29px; vertical-align: top; border-right: 1px solid #ccc; } #area_cs > div.area > div:last-child { padding-right: 0; border-right: none; } #area_cs > div.area > div > .h0 { padding-bottom: 12px; letter-spacing: -0.05em; font-size: 26px; } #area_cs > div.area > div .button { font-size: 15px; background: #fff; width: 137px; display: block; padding: 0 20px; line-height: 45px; letter-spacing: -0.025em; border: 1px solid #666; border-radius: 6px; transition: all 300ms; margin-bottom: 10px; text-align: left; } #area_cs > div.area > div:not(#area_button) .button:not(.kakao):hover { color: #fff; background: #6779d3; border-color: #6779d3; } #area_cs > div.area > div .button:last-child { margin-bottom: 0px; } #area_cs > div.area > div .button.kakao { text-align: center; color: #3c1e1c; background: #fdd700; border-color: #fdd700; } #area_cs > div.area > div .button:not(.kakao) i { position: absolute; right: 10px; top: 12.5px; font-size: 20px; } #area_cs > div.area > div p { padding-top: 4px; } #area_cs > div.area > div hr { margin: 10px 0; } #area_cs > div.area > div img { max-height: 26px; } #area_cs > div.area > div .fleft > .h0 { display: block; font-size: 29px; font-weight: 500; line-height: 1; } #area_cs > div.area > div#area_account .fright { position: relative; top: 10px; } #area_cs > div.area > div#area_account .fleft div.h0 { margin: 5px 0 10px; } #area_cs > div.area > div#area_button .button { cursor: default; width: 48%; margin-right: 2%; display: initial; box-sizing: border-box; padding: 0; line-height: 40px; height: 40px; display: inline-block; text-align: center; vertical-align: top; font-size: 13px; } #area_cs > div.area > div#area_button .button div { position: relative; transition: all 0.5s; top:-1px; letter-spacing:-1px; } #area_cs > div.area > div#area_button .button .wave{ width:300px; height:300px; margin-left:-150px; margin-bottom:-340px; animation: rotate 2000ms infinite linear; transition-duration: 1s; } #area_cs > div.area > div#area_button .button:hover .wave{ margin-bottom: -100px; } #area_cs > div.area > div#area_button .button:hover div.show { top: -41.5px; } #area_cs > div.area > div#area_button .button:hover div.hidden { top: -41.5px; } #area_cs > div.area > div#area_button .button:nth-child(even) { margin-right: 0; } /* 교육과정 */ .tertiary{ width:100%; display:table; background:#4254b6; margin-top: -40px; } .tertiary a{ color:#fff; display:inline-block; text-align:center; width:12.5%; padding:10px 0; } .tertiary a:hover, ul.tertiary a.on{ color:#deff00; } .thumbnail_container{ display:inline-block; overflow:hidden; vertical-align:top; } .thumbnail_container .label{ position:absolute; color:#fff; padding:0px; top:10px; left:10px; background: transparent; z-index:1; } .thumbnail_container .label span{ width:42px; height:32px; display:inline-block; text-align:center; line-height:32px; font-size:13px; margin-right:3px; vertical-align:top; } .thumbnail_container .label.small{ top:17px; left:17px; } .thumbnail_container .label.small span{ width:34px; height:24px; line-height:24px; font-size:11px; margin-right:1px; } .thumbnail_container .label span.recommend{ background-color:rgba(255, 79, 79, 0.9); } .thumbnail_container .label span.new{ background-color:rgba(79, 159, 255, 0.9); } .thumbnail_container .label span.ncs{ background-color:rgba(139, 195, 74, 0.9); } .thumbnail_container .label span.hash{ background-color:rgba(46, 204, 113, 0.9); width:auto; padding:0px 5px; } .thumbnail_container .label span.training_type{ background-color:rgba(79, 159, 255, 0.9); padding:0px 5px; min-width:50px; width:auto !important; } .thumbnail_container .thumbnail{ width:500px; height:500px; background-size: 100% 100%; position:relative; } .thumbnail_container .thumbnail.small{ width:180px; height:180px; } .thumbnail_container .thumbnail.none_support_mobile:before{ content:'모바일 미지원'; background:rgba(0, 0, 0, 0.7); width:100%; height:100%; position:absolute; color:#fff; text-align:center; line-height:110px; } .search input[type=text] { border-right: 0; } .secondary_search { margin-bottom: 7px; } .secondary_search .search_wrap{ padding:0; border:none; margin:0; width:auto; } .message_box{ font-size:16px; background:#fff; box-shadow: 0px 2px 1px #eee; font-weight:bold; border:1px solid #ccc; padding:30px; box-sizing:border-box; line-height:24px; } .tip_box{ display:inline-block; vertical-align:top; position:relative; font-size:11px; } .tip_box:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f059'; font-weight:normal; cursor:pointer; color:#3f51b5; } .question_tip{ display:none; background:rgba(0, 0, 0, 0.8); color: #f9f9f9; border-radius:5px; position: absolute; padding:13px 15px; line-height:18px; text-align:left; z-index:100; } .question_tip h4{ margin:0px 0px 10px 0px; } .question_tip p{ font-size:13px !important; padding-left:11px; text-indent:-11px; } .question_tip p:not(:last-child){ margin-bottom:5px !important; } .question_tip p:before{ content:'\A'; width:4px; height:4px; border-radius:50%; background:#fff; display:inline-block; margin-right:7px; font-weight:bold; vertical-align:10%; } .question_tip.exist{ display:block; white-space:nowrap; } .question_tip.small{ width:100px; } .question_tip.medium{ width:200px; } .question_tip.large{ width:300px; } .question_tip.right.exist{ background:rgba(50, 50, 50, 0.9); visibility:visible; left:63px !important; line-height:18px; } .question_tip.right{ top:50%; left:20px; transform: translate(0%, -50%); } .question_tip.right:after{ content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent; } .question_tip.top{ bottom:100%; left: 50%; transform: translate(-50%, 0%); margin-bottom:8px; } .question_tip.top:after{ content: ""; position: absolute; top:100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent; } .question_tip.bottom{ top: 20px; left: 50%; transform: translate(-50%, 0%); } .question_tip.bottom:after{ content: ""; position: absolute; bottom:100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent; } .question_tip.left{ top:50%; right:100%; transform: translate(0%, -50%); margin-right:10px; } .question_tip.left:after{ content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent rgba(0, 0, 0, 0.8); } #player_wrap .message_box{ font-size:14px; line-height:20px; padding:20px; } #course_view table.review{ width:100%; overflow-x:auto; white-space:nowrap; padding-bottom:10px; border-top: 2px solid #6779d3; } #course_view table.review div.review_name{ margin-right: 10px; color: #1e1e1e; font-weight: 700; display: inline-block; } #course_view table.review div.review_date{ color:#aaa; display: inline-block; } #course_view table.review div.review_answer{ display: block; white-space:pre-line; font-size:14px; margin-top:10px; } #course_view table.review div.review_training{ color:#ff7a18; font-size:11px; } #course_view #course_info{ display:table; margin-top:50px; position: relative; width: 100%; } #course_view #course_info .ml30{ width: calc(100% - 530px); } #course_view #course_info ul.disc{ padding-left:0; } #course_view #course_info .hash_tags{ font-size:13px; color:#6e5cfb; margin-right:5px; } #course_view #course_info ul.disc li span:first-child{ width:100px; } #course_view #course_info ul.disc li span:last-child{ width:calc(100% - 150px); } #course_view #course_info .action_group{ position: absolute; bottom: 0; } #course_view #course_info .action_group .button{ padding:15px 40px; vertical-align:middle; margin-right:5px; font-size:16px; } #course_view #course_info .action_group .button.square{ padding:18.5px 20.5px; } #course_view table.mini { width:320px !important; font-size:12px; } #course_view table{ border-top: 2px solid #6779d3; } #course_view #course_info .training_type{ margin-top:7px; } #course_view #course_info li.training_type:before{ top:-1px; } #course_view #course_info .training_type ul{ margin:2px 0 0 0; } #course_view #course_info .training_type ul li{ font-size:13px; display:block; margin-bottom:8px; } #course_view #course_info .training_type ul li:before{ content:''; margin:0; } #course_view #course_info .training_type ul li .head{ color: #6779d3; width:100px; } #course_view #course_info .message_box{ margin-top:18px; padding:15px 20px; width:544px; line-height:20px; } #course_view .share_dreamcampus{ margin-top:70px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:20px; line-height:38px; } #course_view .share_dreamcampus .fright{ display:table; } #course_view .share{ display:inline-block; margin-left:5px; } #course_view .share:before{ content:''; width:38px; height:38px; display:inline-block; } #course_view .share.facebook:before{ background-image:url('/images/user/course/icon_facebook.png'); } #course_view .share.twitter:before{ width:37px; background-image:url('/images/user/course/icon_twitter.png'); } #course_view .share.kakao:before{ background-image:url('/images/user/course/icon_kakaotalk.png'); } #course_view .share.naver:before{ background-image:url('/images/user/course/icon_naver.png'); } #course_view .share.band:before{ background-image:url('/images/user/course/icon_band.png'); } /* 교육 신청 */ #course_schedule .fc-day-header{ padding:10px; } #course_schedule .fc-week{ cursor:pointer; } #course_schedule .fc-day.select{ position:relative; } #course_schedule .fc-day.select i{ position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:50px; color:#000; } .-ms- #course_schedule .fc-day.select i{ transform: translate(-50%, 65%); } #course_schedule .fc-sun{ color:red; } #course_schedule .fc-sat{ color:blue; } #course_schedule .fc-today{ background:#6779d3; color:#fff; } #course_schedule .fc-toolbar{ margin:20px 0; } #course_schedule .fc-toolbar h2{ font-size:21px !important; } #course_schedule .fc-toolbar h2:before{ width:0; } #course_schedule .fc-bgevent{ opacity:0.8; } #course_schedule .fc-bgevent.possible{ position:relative; } #course_schedule .fc-bgevent.possible .label{ position:absolute; bottom:10px; left:10px; background:#4254b6; padding:2px 10px; color:#fff; border-radius:10px; font-size:12px; } #course_schedule .fc-bgevent.possible .apply{ position:absolute; bottom:10px; right:10px; background:#333; padding:2px 10px; color:#fff; border-radius:10px; font-size:12px; } #course_schedule .fc-bgevent.possible .collective{ position:absolute; top:10px; right:10px; } #course_schedule .fc-bgevent.possible .business{ background:#f33f3f; padding:2px 6px; color:#fff; border-radius:10px; font-size:10px; margin-bottom:3px; text-align:center; } table.payment .pay_free_pass{ position:relative; } table.payment .pay_free_pass .free_pass_mileage{ position:absolute; bottom:-40%; left:50%; transform:translate(-50%, 100%); font-size:11px; width:120px; text-align:center; background:#4254b6; border-radius:30px; box-shadow:0 1px 10px 0 rgba(0,0,0,0.3); color:#fff; padding:5px 3px; line-height:16px; } table.payment .pay_free_pass .free_pass_mileage:after{ content: ""; position: absolute; bottom:100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #4254b6 transparent; } .imp-dialog{ background-color: rgba( 100, 100, 100, 0.5 ); } /* 캡챠 */ #hrd_wrap .hrd_frame{ min-height:194px; background:#1c2859; text-align:center; position:relative; } #hrd_wrap .hrd_frame .frame_container{ position:absolute; top:71px; width:100%; } #hrd_wrap .hrd_frame p{ font-size:16px; color:#fff; } #hrd_wrap .hrd_frame .cssFont16, .hrd_frame .cssFont17{ font-size:13px; } #hrd_wrap #otp_keypad{ position:relative; } /* 온라인 강의실 */ #study_header{ width:240px; height:100%; position:fixed; top:0px; left:0px; background:#fff; font-size:16px; } #study_header .study_menu span{ vertical-align:middle; position:relative; } #study_header .study_menu span.icon{ width:25px; text-align:center; display:inline-block; margin-right:10px; font-size:19px; color:#999; } #study_header .study_menu a li{ width:150px; text-align:left; padding:11px 0px 11px 40px; margin-bottom:8px; line-height:1; } #study_header .study_menu a li.on{ background:#f5f5f5; color:#7b7dba; } #study_header .study_menu a li.on i{ color:#7b7dba !important; } #study_header .study_menu a li span.title.study_note:after{ content:'학습노트'; position:absolute; top:5px; right:-57px; font-size:10px; color:#fff; background:red; padding:4px 6px; border-radius:10px; } #study_header .study_menu a li span.title.arrow:after{ font-family: 'Font Awesome\ 5 Free'; content:'\f0a5'; position:absolute; top:-5px; right:-57px; font-size:30px; color:#4254b6; animation:arrow 0.7s infinite; } .-webkit- #study_header .study_menu a li span.title.study_note:after{ top:3px; } .-webkit- #study_header .study_menu a li span.title.arrow:after{ top:-3px; } @keyframes arrow{ 0% { right:-57px; } 5% { right:-56px; } 10% { right:-55px; } 15% { right:-54px; } 20% { right:-53px; } 25% { right:-52px; } 30% { right:-51px; } 35% { right:-50px; } 40% { right:-49px; } 45% { right:-48px; } 50% { right:-47px; } 55% { right:-48px; } 60% { right:-49px; } 65% { right:-50px; } 70% { right:-51px; } 75% { right:-52px; } 80% { right:-53px; } 85% { right:-54px; } 90% { right:-55px; } 95% { right:-56px; } 100% { right:-57px; } } #study_header .study_menu a li:hover{ background:#f5f5f5; transition:background-color 0.2s ease; } #study_header .study_menu a li{ color:#333; } #study_header .study_menu a:first-child li{ width:100%; height:90px; background:#4254b6; text-align:center; padding:0px; margin-bottom:20px; } #study_header .study_menu a:first-child li img{ margin-top:34px; } #study_header hr{ width:90%; height:1px; margin:20px auto 30px; background:#ddd; padding:0; border:0; } #study_header .circle{ width:120px; height:120px; margin:0 auto 0; line-height:inherit; display:block; } #study_header .circle .c100{ margin:0; } #study_header .circle .c100 span{ margin-top:22%; } #study_header .circle .rate{ font-size:30px; color:#f33f3f; } #study_header .completion_percent{ text-align:center; font-size:12px; margin-top:10px; } #study_wrap{ width:calc(100% - 240px); height:100%; padding-left:240px; } #study_wrap .area{ width:960px; } #study_wrap .tag.label { font-size: 10px; padding:4px 12px; border-radius: 10px; } #study_wrap #top{ width:calc(100% - 240px); height:90px; line-height:90px; background:#5b6cc9; color:#fff; position:fixed; z-index:10; } #study_wrap #top .subject_name{ font-size:30px; max-width:750px; } #study_wrap #top #last_study{ position:absolute; right:-55px; top:78px; background:#f5f5f5; color:#333; width:200px; text-align:center; font-size:12px; padding:10px 10px 25px 10px; box-shadow:0 1px 10px 0 rgba(0, 0, 0, 0.3); line-height:18px; border-radius:10px; box-sizing: border-box; animation:bounce 0.7s; animation-iteration-count:3; } #study_wrap #top #last_study:before{ content:''; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); border:10px solid transparent; border-top:0 solid transparent; border-bottom-color:#f5f5f5; } #study_wrap #top #last_study:after{ content:''; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); border:10px solid transparent; border-top:0 solid transparent; border-bottom-color:#f5f5f5; } #study_wrap #top #last_study #last_progress{ width:85%; height:10px; border:2px solid #ccc; position: absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:10px; overflow:hidden; border-radius:10px; background:#ccc; } #study_wrap #top #last_study #last_progress .icon.percent{ position: absolute; top:-4px; left:calc(50% - 10px); z-index:1; transform:scale(0.7); font-size:10px; color:#000; } #study_wrap #top #last_study #last_progress #last_progress_inner{ position: absolute; top:0px; left:0px; height:100%; background:rgba(255, 101, 166, 0.8); border-radius:10px; } #study_wrap #top #last_study #last_progress.done .percent{ color:#fff; } #study_wrap #top #last_study #last_progress.done #last_progress_inner{ background:rgba(66, 84, 182, 0.8); } @keyframes bounce{ 0% { top:78px; } 10% { top:79px; } 20% { top:80px; } 30% { top:81px; } 40% { top:82px; } 50% { top:83px; } 60% { top:82px; } 70% { top:81px; } 80% { top:80px; } 90% { top:79px; } 100% { top:78px; } } #study_wrap .label{ margin-right:20px; } #study_wrap #main{ width:100%; min-height:100%; background:#f9f9f9; padding:120px 0px 100px 0px; box-sizing:border-box; } #study_wrap #main h2{ margin-bottom:20px; } #study_wrap #main a.share_note{ font-size:10px; padding:2px 8px; border-radius:10px; background:#ffb100; color:#fff; position:absolute; right:10px; } #study_wrap #main .urge_survey{ position:fixed; bottom:100px; right:140px; background:#4254b6; width:120px; height:120px; text-align:center; border-radius:60px; box-sizing:border-box; color:#fff; box-shadow:0 1px 10px 0 rgba(0,0,0,0.3); padding:20px 0; } #study_wrap #main .urge_survey:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f4da'; font-weight:bold; margin-bottom:5px; display:block; font-size:28px; } #study_wrap #main .group_box .group_title{ padding:10px 30px; border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; background:#fff; line-height:33px; } #study_wrap #main .group_box .group_title .init_testing{ border-radius:20px; background:#ff65a6; color:#fff; border-color:#ff65a6; transition:all 0.5s ease; } #study_wrap #main .group_box .group_title .init_testing:hover{ background:#ff006c; border-color:#ff006c; } #study_wrap #main .group_box li.item{ width:100%; min-height:100px; /*min-height:120px;*/ border:1px solid #ccc; padding:15px 30px; box-shadow:0px 2px 1px #eee; margin-bottom:15px; background:#fff; box-sizing:border-box; position:relative; } #study_wrap #main .group_box li.item.wait{ opacity:0.5; } #study_wrap #main .group_box li.item.wait:before{ content:'학습기간전'; background:#878787; color:#fff; position:absolute; top:-10px; left:20px; font-size:12px; padding:2px 6px; } #study_wrap #main .group_box li.item .time_name h1.ellipsis{ width:70%; } #study_wrap #main .group_box li.item.half{ display:inline-block; width:49%; } #study_wrap #main .group_box li.item.half.first{ margin-right:2%; } #study_wrap #main .group_box li p.group_item{ margin-bottom:5px; } #study_wrap #main .group_box li p.group_item:last-child{ margin-bottom:0; } #study_wrap #main .group_box .empty i{ font-size:30px; margin-bottom:10px; } #study_wrap #main .dashboard .group_box li.item{ float:left; padding:0; min-height:260px; } #study_wrap #main .dashboard .group_box li.item.small{ min-height:60px; text-align:center; } #study_wrap #main .class_notice a{ padding:0px 8px; } #study_wrap #main .class_notice a.on{ border-bottom:3px solid #6779d3; color:#6779d3; padding-bottom:5px; } #study_wrap #main .dashboard .group_box li.item .synthesis_blur{ filter: blur(3px); } #study_wrap #main #dashboard .group_box li#schedule_box{ min-height:230px; } #study_wrap #main #study_schedule{ width:95%; height:150px; box-sizing:border-box; border-bottom:1px solid #ddd; margin:0 auto 0; position:relative; } #study_wrap #main #study_schedule #base_line{ width:88%; height:7px; position:absolute; top:71px; background:#d5d9eb; margin:0 2%; } #study_wrap #main #study_schedule .point{ width:85px; height:40px; bottom:61px; background-position:center bottom; background-repeat:no-repeat; padding-bottom:15px; z-index:10; } #study_wrap #main #study_schedule p.h4{ bottom:-25px; } #study_wrap #main #study_schedule #schedule_start{ left:10px; background-image:url('/images/user/study/icon_start.png'); background-position-y:31px; } #study_wrap #main #study_schedule #schedule_start p.h4{ left:22%; } #study_wrap #main #study_schedule #schedule_end{ right:10px; background-image:url('/images/user/study/icon_start.png'); background-position-y:31px; } #study_wrap #main #study_schedule #schedule_end p.h4{ left:25%; } #study_wrap #main #study_schedule #exam_ing{ width:158px; left:41%; background-image:url('/images/user/study/icon_exam.png'); background-position-y:28px; } #study_wrap #main #study_schedule #exam_ing p.h4{ left:29%; } #study_wrap #main #study_schedule #exam_final{ width:85px; left:63%; background-image:url('/images/user/study/icon_exam.png'); background-position-y:28px; } #study_wrap #main #study_schedule #exam_final p.h4{ width:100px; left:136%; } #study_wrap #main #study_schedule #exam_final p.h4:before{ content:''; width:45px; height:21px; position:absolute; top:-11px; left:-50%; background-image:url('/images/user/study/within.png'); background-position-x: 1px; } #study_wrap #main #study_schedule #exam_final p.h4:after{ content:''; width:45px; height:21px; position:absolute; top:-11px; right:-50%; background-image:url('/images/user/study/within.png'); background-position-x: 45px; } #study_wrap #main #study_schedule #pos_line { position: absolute; top: 72px; left: 62px; height: 5px; background: #5b6cc9; animation-name: wide; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; opacity: 0.5 } #study_wrap #main #study_schedule #pos_now { position: absolute; top: 62px; ; width: 25px; height: 25px; left: 40px; animation-name: move; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; animation-iteration-count: 1;background: url('/images/favicon/apple-icon-57x57.png') no-repeat 0% 0% / 100% 100%; z-index:20; } #study_wrap #main #schedule_box span{ display:inline-block; vertical-align:middle; } #study_wrap #main #schedule_box .evaluation_title{ width:100px; } #study_wrap #main #schedule_box .evaluation_condition{ font-size:12px; margin-left:15px; } #study_wrap #main #evaluation .c100 span{ margin-top:40%; } #study_wrap #main #evaluation .c100:after{ background-color:#fff; } .layer_container.share_note .criticism{ background:#fff; border-radius:15px; } .layer_container.share_note .criticism i{ margin:3px 0px 0px 5px; } .layer_container.share_note .criticism.up{ border:1px solid #526cec; } .layer_container.share_note .criticism.up.choice{ background:#526cec; border:1px solid #2446ec; } .layer_container.share_note .criticism.up.choice > *{ color:#fff; } .layer_container.share_note .criticism.down{ border:1px solid #f33f3f; } .layer_container.share_note .criticism.down.choice{ background:#ff5b4b; border:1px solid #e22614; } .layer_container.share_note .criticism.down.choice > *{ color:#fff; } ul.dot.big{ font-size:15px; } ul.dot li.item:not(:last-child){ margin-bottom:2px !important; } ul.dot li.item{ padding: 0px 31px 0px 25px; position: relative; line-height: 24px; } ul.dot li.item:before{ position: absolute; left: 3px; top: 3px; width: 10px; height: 100%; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f192'; color: #ff4f4f; line-height: 19px; } ul.dot li.item.blue:before{ color: #85bae3; } ul.dot li.item.green:before{ color: #84be59; } ul.dot.big li.item:before{ top:2.5px; } ul.disc{ padding-left:5px; } ul.disc li{ padding:0; margin-bottom:4px; border:none; list-style:none; display:block; } ul.disc li:hover{ background:initial; border:none; } ul.disc li:last-child{ margin-bottom:0px; } ul.disc li:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f111'; font-weight:bold; color: #6779d3; margin-right:5px; vertical-align:middle; font-size:10px; position:relative; top:1px; } ul.disc.h3 li:before{ top:-1px; } ul.disc li span{ vertical-align:middle; display:inline-block; } ul.disc li span.dot:after{ font-family:'Font Awesome\ 5 Free'; content:'\f142'; font-size:10px; font-weight:bold; margin:0px 5px 0px 7px; color: rgba(0,0,0,0.4); vertical-align:10%; } @keyframes heart{ 0% { transform: scale(0); } 5% { transform: scale(0.1); } 10% { transform: scale(0.2); } 15% { transform: scale(0.3); } 20% { transform: scale(0.4); } 25% { transform: scale(0.5); } 30% { transform: scale(0.6); } 35% { transform: scale(0.7); } 40% { transform: scale(0.8); } 45% { transform: scale(0.9); } 50% { transform: scale(1); } 55% { transform: scale(0.9); } 60% { transform: scale(0.8); } 65% { transform: scale(0.7); } 70% { transform: scale(0.6); } 75% { transform: scale(0.5); } 80% { transform: scale(0.4); } 85% { transform: scale(0.3); } 90% { transform: scale(0.2); } 95% { transform: scale(0.1); } 100% { transform: scale(0); } } /* 온라인 강의실 > 플레이어 */ #dcam_player{ overflow:hidden; } #dcam_player .right_grid{ padding-left:300px; /*padding-left:354px;*/ margin-left:8%; } /* #dcam_player .chrome_flash{ width: 100%; position: fixed; bottom: 0; padding: 15px; background: #ececec; font-size: 13px; color: #929994; z-index: 11; display:none; } #dcam_player .chrome_flash span.flash_allow{ width: 28px; height: 28px; border: 1px #d0d9cd solid; } #dcam_player .chrome_flash span{ display: inline-block; vertical-align: middle; margin-right: 10px; } #dcam_player .chrome_flash span.allow_close{ font-size: 30px; cursor: pointer; position: absolute; top: 16px; right: 34px; } */ #dcam_player p.abort_ex{ margin:15px 5px; } #player_header{ border-bottom:1px solid #6879d3; height:90px; line-height:90px; position: relative; /*overflow:hidden;*/ position:relative; } #player_header .left_grid{ width:355px; height:90px; background:#7584d4; padding:5.5px 15px; box-sizing:border-box; position:fixed; z-index:100; } #player_header .left_grid img{ margin-top:13px; } #player_header .c100{ font-size:80px; line-height: normal; } #player_header .c100:after{ background-color:#fff; top: 0.05em; left:0.05em; width:0.9em; height:0.9em; } #player_header .c100 p{ margin:0; } #player_header .right_grid h2{ max-width:700px; } #player_header .ellipsis{ width:auto; /*max-width:60%;*/ max-width:65%; } #player_header .right_grid .player_button{ margin-right:20px; position:relative; } #player_header .right_grid .player_button .button{ margin:0px 5px; } #player_header .right_grid .player_button .button.dictionary.exist{ overflow:initial; } #player_header .right_grid .player_button .button.dictionary.exist:after{ content:attr(dictionary); position:absolute; top:-7px; right:-7px; width:20px; height:20px; line-height:20px; text-align:center; border-radius:50%; background:#ff4f4f; color:#fff; font-size:11px; letter-spacing:-1px; } #player_header .button_position{ position:absolute; top:0px; padding:28px; text-align:center; background:rgba(255, 255, 255, 0.9); font-size:34px; visibility:hidden; cursor:pointer; outline:1px solid #6879d3; } #player_header #left_position.button_position{ right:-86px; } #player_header #right_position.button_position{ right:0px; } #player_container{ width:100%; } #player_container #time_group{ width:354px; height:calc(100% - 90px); overflow-y:scroll; position:fixed; border-right:1px solid #ccc; z-index:10; background:#fff; } #player_container #time_group::-webkit-scrollbar { width: 0.5em; } #player_container #time_group::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } #player_container #time_group::-webkit-scrollbar-thumb { background-color: lightgray; } #player_container #time_group li.time_item{ border-bottom:1px solid #ccc; padding:10px 25px 10px 45px; position:relative; cursor:pointer; background:#fff; } #player_container #time_group li.time_item:before{ content: ''; width: 8px; height: 8px; position: absolute; left: 20px; top: 45%; background-image: url('/images/user/study/icon_chasi.png'); } #player_container #time_group li.time_item.current{ background:#f5f5f5; } #player_container #time_group li.time_item.current:before{ background-position-y: -7px; } #player_container #time_group .time_numbering{ font-size:12px; } #player_container #time_group .time_name{ width:80%; display:inline-block; } #player_container #page_group ul{ padding-top:10px; background:#f5f5f5; border-bottom:1px solid #ccc; } #player_container #page_group ul li.page_item{ height:42px; line-height:42px; position:relative; background:#eaeaea; margin-bottom:10px; padding-left:45px; cursor:pointer; } #player_container #page_group ul li.page_item.current{ background:#ccc; } #player_container #page_group ul li.page_item:before{ content:''; width:10px; height:42px; position:absolute; top:0px; left:0px; } #player_container #page_group ul li.page_item.done:before{ background:#ff4f4f; } #player_container #page_group ul li.page_item.complete:before{ background:#7584d4; } #player_container #page_group ul li.page_item:after{ content: '미달성'; font-size: 12px; position: absolute; top: 0; right: 10px; width: 40px; height: 100%; padding-left: 20px; color: rgba(0, 0, 0, 0.45); background-image: url('/images/user/study/icon_point.png'); background-repeat: no-repeat; background-position-y: -40px; } #player_container #page_group ul li.page_item.preview:after{ content: ''; background-image:none; } #player_container #page_group ul li.page_item.preview span.ellipsis{ width:80%; } #player_container #page_group ul li.page_item.done:after{ content: '도전중'; color:rgba(0, 0, 0, 0.9); } #player_container #page_group ul li.page_item.complete:after{ content: '획득'; background-position-y:0px; color:rgba(0, 0, 0, 0.9); } #player_container #page_group ul li.page_item .page_numbering{ margin-right:15px; } #player_container .study_record{ position:absolute; font-size:10px; line-height:16px; padding:5px 10px; z-index:10; width:175px; border:1px solid #ddd; border-radius:10px; background:#fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } #player_container .study_record:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0d9'; position:absolute; top:50%; left:-10px; transform: translate(0%, -50%); font-size:20px; font-weight:bold; } #player_container .study_record span{ display:inline-block; vertical-align:middle; } #player_container .study_record .study_title{ width:105px; } #player_container .study_record .study_title:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f06c'; font-size:10px; margin-right:3px; font-weight:bold; } #player_container .study_record .study_time{ width:70px; text-align:right; color:#7584d4; } .-ms- #player_container #page_group ul li.page_item .page_numbering{ vertical-align:top !important; } .-ms- #player_container #time_group ul li.page_item span.ellipsis{ vertical-align:top !important; } #player_container #time_group ul li.page_item span.ellipsis{ width:65%; } #player_container #player_wrap{ padding-top:45px; padding-bottom:20px; overflow-x:hidden; } #player_container #player_wrap iframe{ background: #efefef; } #player_container #player_wrap #time_info{ margin:20px 0 10px; } #player_container #player_wrap .progress_bar{ height: 34px; background: #bfbfbf; } #player_container #player_wrap .progress_bar div{ height: 100%; } #player_container #player_wrap .progress_bar .progress{ height: 100%; } #player_container #player_wrap .progress_bar .btn_navi{ height: 32px; width: 32px; border: 1px solid #7584d4; color: #7584d4; background: #f5f5f5; text-align: center; line-height: 32px; cursor:pointer; } #player_container #player_wrap .progress_bar .btn_navi i{ line-height:32px; } #player_container #player_wrap #caution{ margin-top:50px; } #player_container #player_wrap #caution ul{ padding-left:25px; margin-top:3px; margin-bottom:20px; } #player_container #player_wrap #caution ul li{ list-style: disc; } #player_container #player_wrap .combine > *{ width:100%; position:relative; } #player_container #player_wrap #thirteen{ min-height:50px; box-sizing:border-box; padding:15px; } #player_container #player_wrap #thirteen p{ display:none; } #player_container #player_wrap #thirteen.success{ background:#91cf91; color:#3d8b3d; } #player_container #player_wrap #thirteen.warning{ background:#ebc063; color:#a07415; } #player_container #player_wrap #thirteen.danger{ background:#e27c79; color:#9f2723; } #player_container #player_wrap .helper{ position:absolute; right:-50px; font-size:16px; color:#fff; width:50px; height:50px; line-height:50px; text-align:center; cursor:pointer; } #player_container #player_wrap .helper:after{ font-family: 'Font Awesome\ 5 Free'; font-weight:normal; font-size:18px; } #player_container #player_wrap .helper .sign{ position:absolute; right:50px; width:130px; height:50px; font-size:14px; right:0px; opacity:0; display:none; } #player_container #player_wrap #admit_rule.helper{ top:-50px; background:#7584d4; } #player_container #player_wrap #admit_rule.helper .sign{ background:#4d5eb1; } #player_container #player_wrap #admit_rule.helper:after{ content:'\f059'; } #player_container #player_wrap #clipboard.helper{ top:0px; background:#4d5eb1; } #player_container #player_wrap #clipboard.helper .sign{ background:#7584d4; } #player_container #player_wrap #clipboard.helper:after{ content:'\f328'; } #player_container #player_wrap #auto_play.helper{ top:50px; background:#7584d4; } #player_container #player_wrap #auto_play.helper .sign{ background:#4d5eb1; } #player_container #player_wrap #auto_play.helper:after{ content:'\f04b'; font-weight:bold; font-size:16px; } #player_container #player_wrap #play_speed.helper{ top:50px; background:#7584d4; } #player_container #player_wrap #play_speed.helper .sign{ background:#4d5eb1; } #player_container #player_wrap #play_speed.helper:after{ content:'\f3fd'; font-weight:bold; } #player_container #player_wrap #study_precautions.helper{ top:50px; background:#7584d4; } #player_container #player_wrap #study_precautions.helper .sign{ background:#4d5eb1; } #player_container #player_wrap #study_precautions.helper:after{ content:'\f06a'; font-weight:bold; font-size:20px; } #dcam_player .button.auto_play + #auto_play_bubble{ position:absolute; left:-50px; top:78px; background:#f5f5f5; color:#333; width:200px; text-align:center; font-size:12px; padding:14px 10px; box-shadow:0 0px 20px 0 rgba(0, 0, 0, 0.3); line-height:1; border-radius:10px; box-sizing: border-box; animation:bounce 0.7s; animation-iteration-count:3; font-weight:bold; } #dcam_player .button.auto_play + #auto_play_bubble:before{ content:''; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); border:10px solid transparent; border-top:0 solid transparent; border-bottom-color:#f5f5f5; } #dcam_player .button.auto_play + #auto_play_bubble:after{ content:''; position: absolute; bottom:100%; left: 50%; transform: translateX(-50%); border:10px solid transparent; border-top:0 solid transparent; border-bottom-color:#f5f5f5; } #dcam_player .button.auto_play.on{ border:none; padding:7px 20px; color:#fff; background-size: 300% 300%; background-image: linear-gradient(-45deg, #ff4f99 0%, #6e5cfb 25%, #ff4f99 51%, #6e5cfb 100%); animation: AnimateBG 2s ease infinite; } #dcam_player .button.auto_play.on:after{ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(120deg, #6e5cfb, #ff4f99, #6e5cfb); background-size: 300% 300%; clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 100%, 100% 100%, 100% 0%, 0% 0%); animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 2s ease-in-out infinite; } @keyframes gradient-animation { 0% { background-position: 15% 0%; } 50% { background-position: 85% 100%; } 100% { background-position: 15% 0%; } } @keyframes frame-enter { 0% { clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), 4px calc(100% - 4px), 4px 100%, 100% 100%, 100% 0%, 0% 0%); } 25% { clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 100% 100%, 100% 0%, 0% 0%); } 50% { clip-path: polygon(0% 100%, 4px 100%, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px, 100% 0%, 0% 0%); } 75% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%); } 100% { -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%); } } @keyframes AnimateBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .copy_text{ cursor:pointer; } .copy_text:hover{ text-decoration:underline; } .toast{ position:absolute; top:50%; left:50%; transform: translate(-50%, -120%); background-color: rgba(0, 0, 0, 0.7); color:#fff; padding:5px 16px; border-radius:20px; line-height:normal; font-size:11px; z-index:1050; } .toast:after{ content: ""; position: absolute; top:100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent; } /* 나의 학습노트 */ #my_study_note{ position:absolute; width:320px; top:60px; right:0; z-index:1000; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); display:none; } #my_study_note #note_head{ width:100%; height:44px; line-height:44px; display:table; font-size:13px; } #my_study_note #note_head .head_item{ background:#f5f5f5; display:table-cell; border-top:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #ccc; text-align:center; vertical-align:middle; } #my_study_note #note_head #note_numbering{ color:#6779d3; width:70px; font-weight:bold; } #my_study_note #note_head #note_limit{ color:#4d5eb1; } #my_study_note #note_head a.head_item{ width:15%; } #my_study_note #note_head a.head_item:last-child{ border-right:1px solid #ccc; } #my_study_note #note_head a.head_item:after{ font-family: 'Font Awesome\ 5 Free'; font-weight:normal; font-size:18px; } #my_study_note #note_head #note_save.ready{ background:#7584d4; color:#fff; border-top:1px solid #7584d4; border-bottom:1px solid #7584d4; } #my_study_note #note_head #note_save:after{ content:'\f0c7'; color:#7584d4; } #my_study_note #note_head #note_save.ready:after{ color:#fff; } #my_study_note #note_head #note_pdf:after{ content:'\f1c1'; color:#ff4f4f; } #my_study_note #note_head #note_move:after{ content:'\f0b2'; color:#333; font-weight:bold; } #my_study_note #note_head #note_close:after{ content:'\f057'; color:#333; } #my_study_note textarea{ height:500px; padding:10px; line-height:22px; color:#000; border-top:none; } #my_study_note .toast-bg{ position:absolute; top:0px; left:0px; width:100%; height:100%; } #my_study_note .toast{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: rgba(0, 0, 0, 0.5 ); color:#fff; padding:10px 20px; border-radius:20px; line-height:normal; font-size:13px; } #my_study_note .toast:after{ content:''; border:none; } /* 용어사전 */ #dictionary{ position:absolute; width:320px; height:600px; top:70px; right:0; opacity:0; z-index:10; box-shadow:5px 5px 5px rgba(0, 0, 0, 0.1); border:1px solid #ccc; background:#fff; display:none; } #dictionary ul{ height:calc(100% - 50px); overflow-y: auto; } #dictionary:before{ content: ""; position: absolute; bottom:100%; left:50%; border:13px solid transparent; border-top:0 solid transparent; border-bottom-color:#000; margin-top:-2px; } #dictionary:after{ content: ""; position: absolute; bottom:100%; left:50%; border:13px solid transparent; border-top:0 solid transparent; border-bottom-color:#fff; } #dictionary.minutely:after{ border-bottom-color:#4d5eb1; } #dictionary .dictionary_item{ line-height:17px; border-bottom:1px solid #ccc; padding:8px 0; position:relative; cursor:pointer; } #dictionary .dictionary_item:not(.empty):not(.search):before{ font-family: 'Font Awesome\ 5 Free'; content:'\f0da'; font-weight:bold; position:absolute; top:50%; left:15px; transform: translate(0%, -50%); color:#7584d4; } #dictionary .dictionary_item.open:before{ content:'\f0d7'; } #dictionary .dictionary_item.empty{ width:100%; text-align:center; box-sizing:border-box; cursor:default; border-bottom:none; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } #dictionary .dictionary_item.empty:before{ font-family: 'Font Awesome\ 5 Free'; content:'\f07c'; display:block; margin-bottom:15px; font-size:34px; } #dictionary .dictionary_item.search{ cursor:default; padding:7px; } #dictionary .dictionary_item.search input{ border:none; border-bottom:1px solid #ccc; } #dictionary .dictionary_item.search input:focus{ border-bottom:1px solid #4d5eb1; } #dictionary .dictionary_item .ellipsis{ max-width:85%; padding-left:30px; } #dictionary .dictionary_item .dictionary_title{ font-size:12px; font-weight:bold; color:#4d5eb1; } #dictionary .dictionary_item .dictionary_content{ font-size:11px; color:#999; } #dictionary .minutely{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:#fff; line-height:normal; display:none; } #dictionary .minutely .dictionary_title{ background:#4d5eb1; color:#fff; font-weight:bold; padding:13px; } #dictionary .minutely .dictionary_content{ padding:10px 10px 0px 10px; font-size:13px; height:80%; overflow-y:auto; line-height:22px; } #dictionary .minutely .close_minutely{ position:absolute; bottom:18px; left:50%; transform: translate(-50%, 0%); } #dictionary .additory_text{ position:absolute; line-height:normal; bottom:16px; left:50%; transform: translate(-50%, 0%); color:#7584d4; font-weight:bold; } #dictionary .dictionary_sourse{ font-size:12px; color:#7584d4; } #dictionary .dictionary_sourse:before{ content:''; display:block; margin-top:20px; } /* 온라인강의실 > 평가 */ #testing_agree{ width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:100; overflow-y:auto; background-color: rgba(0, 0, 0, 0.2); display:none; } #testing_agree #testing_agree_container{ width:580px; height:580px; background:#fff; border:10px solid #7667ff; text-align:center; border-radius:290px; position:absolute; top:0px; box-shadow: 7px 7px 40px 5px #666; } #testing_agree #testing_agree_container .h0{ margin:80px auto 30px; } #testing_agree #testing_agree_container .error_feedback{ background:#beb8fe; width:320px; margin:30px auto 50px; border-radius:13px; color:#fff; padding:5px; font-size:13px; } #testing_agree #testing_agree_container li{ line-height:24px; } #testing_container{ background:#f9f9f9; min-height:100%; } #testing_container .container{ margin:0 auto 0; } #testing_header{ border-bottom:1px solid #6779d3; padding:2px 0px 20px 0px; background:#fff; width:100%; box-sizing:border-box; } #testing_header .testing_info{ width:800px; } #testing_header .testing_info > *{ line-height:50px; display:inline-block; vertical-align:middle; } #testing_header #evaluation_type{ background:#4f9fff; color:#fff; padding:6px; margin-right:10px; line-height:1; } #testing_header #limit_time{ position:absolute; top:26px; right:22px; line-height:42px; } #testing_header #timer{ margin-left:20px; } #testing_header #timer .npy-scwrap{ width:100%; height:100%; } #testing_header #timer .npy-scwrap .colon{ font-weight:bold; font-size:13px; margin:0px 3px; } #testing_wrap{ padding:20px; position:relative; } #testing_wrap .testing_group{ display:inline-block; vertical-align:top; } #testing_wrap .title{ width:90%; } #testing_wrap .label{ font-size:10px; padding:5px; opacity:0.5; } #testing_wrap .title p{ /*display:inline-block;*/ } #testing_wrap .title.marking{ color:#6779d3; } #testing_wrap span.numbering{ width:25px; height:25px; line-height:24px; text-align:center; border-radius:25px; border:1px solid #ccc; margin-right:5px; background:#fff; cursor:pointer; } #testing_wrap input[type=radio].numbering:checked + label span, #testing_wrap .numbering.marking{ background:#6779d3; border:1px solid #4d5eb1; color:#fff; } #testing_wrap input[type=radio].numbering:checked + label span:before{ display:none; } #testing_wrap #problem_group.homework{ width:100%; } #testing_wrap #problem_group{ width:calc(100% - 315px); margin:0 auto 0; box-sizing:border-box; padding-bottom:10px; } #testing_wrap #problem_group .problem{ min-height:100px; padding:30px; border:1px solid #ccc; margin-bottom:20px; font-size:16px; background:#fff; } #testing_wrap #problem_group .example{ width:100%; margin-top:5px; padding:20px 20px 0px 25px; box-sizing:border-box; } #testing_wrap #problem_group .example li{ margin-bottom:15px; cursor:pointer; } #testing_wrap #problem_group .example li:last-child{ margin-bottom:0; } #testing_wrap #problem_group .example .exp_txt{ margin-top:4px; line-height:20px; } #testing_wrap #marking_group.homework{ width:100%; position:relative; margin-left:0px; } #testing_wrap #marking_group{ width:295px; position:absolute; margin-left:20px; } #testing_wrap #marking_group .marking_table{ max-height:448px; overflow-y:auto; margin-top:10px; } #testing_wrap #marking_group table{ width:100%; text-align:center; } #testing_wrap #marking_group table tr{ border-bottom:1px solid #ccc; } #testing_wrap #marking_group table tr th{ padding:13px; background:#f5f5f5; } #testing_wrap #marking_group table tr td{ padding:6px; } #testing_wrap #marking_group .marking{ padding:10px; border-bottom:1px solid #ccc; } #testing_wrap #marking_group .numbering{ margin-right:10px; } #testing_wrap #marking_group .file_name{ width: 200px; font-size: 13px; } #testing_wrap #marking_group .save_group .button{ padding:12px 41px; } #testing_wrap #marking_group #timer{ margin:5px auto 20px; text-align:center; } /* 첨삭 확인 */ #testing_wrap .title.marking{ color:#6779d3; } #testing_wrap .title.answer{ color:#03cf5d; } #testing_wrap .title.wrong{ color:#f33f3f; } #testing_wrap span.numbering.answer{ background:#03cf5d; border:1px solid #009642; color:#fff; } #testing_wrap .numbering.wrong{ background:#f33f3f; border:1px solid #bd0000; color:#fff; } #testing_wrap #problem_group .problem.wrong{ border-left:5px solid #f33f3f; } #testing_wrap #problem_group .problem.answer{ border-left:5px solid #03cf5d; } #testing_wrap #problem_group .affix{ min-height:20px; padding:20px; border:1px solid #ccc; background:#fff; } #testing_wrap #problem_group .excellent{ width:100px; height:100px; position:absolute; top:-20px; right:-20px; background:url('/images/common/excellent.png'); background-size:100% 100%; } #testing_wrap #synthesis_memo{ min-height:50px; padding:20px; border:1px solid #ccc; margin-bottom:30px; background:#fff; } #testing_wrap.trainee_confirm table.default.row td, #testing_wrap.trainee_confirm table.default.row th{ padding:10px; } #testing_wrap.trainee_confirm #problem_group .example .exp_txt{ margin-top:0px; } #testing_wrap.trainee_confirm #problem_group .example li{ cursor:default; } /* 온라인강의실 > 만족도 조사 */ #testing_wrap.survey_wrap{ padding-top:0px; } #testing_wrap #problem_group.survey_group{ display:inline-block; vertical-align:top; width:100%; } input[type=radio] + label span.survey{ width:24px; height:24px; border-radius:14px; background:#fff; border:1px solid #aaa; margin-right:5px; text-align:center; } input[type=radio]:checked + label span.survey{ background:#6779d3; border:1px solid #4d5eb1; color:#fff; } /* 마이캠퍼스 > 직무역량진단 */ li.competency.confirm{ position:relative; border:1px solid #ccc; margin-bottom:10px; padding:30px; } li.competency.confirm.empty{ text-align:center; } li.competency.confirm.empty span{ display:inline-block; margin-top:33px; } li.competency.confirm div.chart{ display:inline-block; width:900px; margin-left: -60px; } li.competency.confirm div.chart canvas{ width:100%; height:auto; } li.competency.confirm div.chart_data{ display:inline-block; vertical-align:top; margin-left: -60px; width:300px; } li.competency.confirm div.chart_data table{ border-left:2px solid #666; border-top:1px solid #ccc; font-size:13px; width:100%; } li.competency.confirm div.chart_data table tr{ border-bottom:1px solid #ccc; } li.competency.confirm div.chart_data table.default.row td{ padding:5px; text-align:center; border-right:1px solid #ccc; } li.competency.confirm div.chart_data table.default.row th{ padding:5px; font-weight:bold; } li.competency.confirm div.chart_data table th{ background:#f5f5f5; } li.competency.confirm div.round{ position:absolute; top:10px; left:10px; background:#4254b6; color:#deff00; padding:10px; } #combine{ margin: 50px auto; } li.competency.confirm div.recommend table.default.row{ width:100%; margin-top:20px; text-align:center; border-top:2px solid #666; } li.competency.confirm div.recommend table.default.row tr{ border-bottom:1px solid #ccc; } li.competency.confirm div.recommend table.default.row th{ padding:10px; background:#f5f5f5; font-weight:bold; } li.competency.confirm div.recommend table.default.row td{ padding:8px; } .competency_icon{ display:table; border-left:1px solid #ccc; width:100%; } .competency_icon span{ border: 1px solid #ccc; border-left: 0; width:10%; padding: 20px 0; text-align: center; display:table-cell; } /* 점검 중 */ .inspect-background{ width:100%; height:100%; position:absolute; background:rgb(255, 255, 255, 0.8); } .inspect{ text-align:center; position:absolute; top:50%; right:50%; transform: translate(50%, -50%); padding:50px; box-sizing:border-box; /*background:rgb(255, 255, 255, 0.9);*/ } .inspect h1{ font-size:56px !important; } .inspect h1:before{ font-family:'Font Awesome\ 5 Free'; content:'\f071'; font-size:120px; font-weight:bold; color:red; display:block; margin-bottom:20px; } .inspect h2{ font-size:30px !important; color:#999; margin-top:5px; } .inspect .dot{ text-align:left; background:#f9f9f9; padding:20px; box-sizing:border-box; font-size:14px; width:700px; margin:50px auto 0; color:#666; border:5px solid #eee; } .guide_container{ width:95%; margin:0px 30px; } .guide_container .swiper-container{ box-shadow:0px 0px 20px 10px #ccc; border-radius:20px; } .guide_container .swiper-slide h1{ position:absolute; z-index:1000; color:#fff; top:10px; left:10px; font-size:34px !important; padding:5px 25px; background:rgba(0, 0, 0, 0.4); border-radius:30px; } .guide_container .swiper-slide .guide_title{ margin-bottom:10px; } .guide_container.txt h1{ margin:0px auto 35px; } .guide_container.txt h2.medium{ margin-left:10px; } .guide_container.txt ul.dot{ margin-left:20px; } .guide_container ul.dot li.item{ line-height:20px; margin-bottom:5px; } .guide_container ul.dot li.item:before{ top:0px; } .guide_container .pdfobject-container { width:100%; height:810px; } #choreoathetoid .swiper-slide{ box-sizing:border-box; padding:0px 5px 30px 5px; max-width:300px; } #choreoathetoid .swiper-slide img{ width:100%; } #choreoathetoid .swiper-slide h4{ text-align:center; margin-top:10px; } #choreoathetoid .swiper-pagination{ bottom:0px !important; } .work_data table td span{ vertical-align:middle; position:relative; } .work_data table td span:not(:last-child){ margin-right:8px; padding-right:8px; } .work_data table td span:not(:last-child):after{ content: ''; position: absolute; right: 0; top: 50%; display: block; width: 1px; height: 13px; margin: -6px 0 0 0; background-color: #bbb; } #form_rider h1{ font-size:30px !important; font-weight:bold; margin:100px auto 50px; } .nice-select{ max-width:100%; height:32px !important; line-height:30px !important; font-size:12px; border:1px solid #ccc; padding-left:13px; clear:inherit; margin-right:1px; float:unset; } .nice-select.thin{ height:28px !important; line-height:26px !important; font-size:10px; } .nice-select:after{ margin-top:-5px; } .nice-select:not(:last-child){ margin-right:3px; } .nice-select .list{ z-index:1000; overflow-y:auto; min-width:100%; max-height:160px; } .nice-select .option{ min-height:30px; line-height:30px; } /* 사전 등록 */ #tutorial_wrap{ width:85%; margin:0 auto 0; } #tutorial_wrap #sign_container{ width:200px; height:100px; border:1px solid #ddd; margin:0 auto 0; position:relative; display:flex; align-items:center; justify-content:center; font-size:30px; color:#ccc; border-radius:20px; } #tutorial_wrap #sign_container canvas{ width:100%; height:100%; position:absolute; top:0px; left:0px; } #tutorial_wrap .button.oauth{ width:200px; display:inline-block; vertical-align:middle; } .tt_contrainr{ text-align:left; font-size:16px; } .tt_contrainr input[type=text]{ border-radius:5px; padding-left:10px; } .tt_contrainr.right{ text-align:right; } .tt_contrainr .nice-select.expiration.half{ width:calc(50% - 10px); display:inline-block; } .tt_contrainr .quarter{ width:calc(25% - 9px); display:inline-block; } @media (max-width: 400px) { .h0 { font-size:24px !important; margin:0; font-weight: 500; } h1, .h1{ font-size:18px !important; margin:0; font-weight: 500; } h2, .h2{ font-size:16px !important; margin:0; font-weight: 500; } h3, .h3{ font-size:14px !important; margin:0; font-weight: 500; } h4, .h4{ font-size:12px !important; margin:0; font-weight: 400; } h5, .h5{ font-size:10px !important; margin:0; font-weight: 400; } } @media (max-width: 1800px) { #player_header .right_grid .player_button{ position:absolute; top:0px; right:-350px; background:#fff; transition: all 0.2s ease; } #player_header .right_grid .player_button.show{ right:100px; } #player_header .right_grid .label{ position:absolute; top:30px; right:120px; } #player_header #right_position.button_position{ visibility:visible; } } @media (max-width: 1550px) { #dcam_player .left_grid{ left:-360px; transition:all 0.2s ease; animation: 0.5s ease-in 0s 1 slideInFromLeft; } #dcam_player .left_grid.show{ left:0px; } #player_header .ellipsis{ margin-left:5%; } #dcam_player .right_grid{ padding-left:0px; margin-left:5%; } #player_header #left_position.button_position{ visibility:visible; } } @keyframes slideInFromLeft { 0% { transform: translateX(100%); } 100% { transform: translateX(0%); } } .loader { animation: rotate 1s infinite; height: 50px; width: 50px; position:absolute; } .loader:before, .loader:after { border-radius: 50%; content: ""; display: block; height: 20px; width: 20px; } .loader:before { animation: ball1 1s infinite; background-color: #38ceff; box-shadow: 30px 0 0 #6e5cfb; margin-bottom: 10px; } .loader:after { animation: ball2 1s infinite; background-color: #ffd100; box-shadow: 30px 0 0 #ff4f99; } @keyframes rotate { 0% { transform: rotate(0deg) scale(0.8) } 50% { transform: rotate(360deg) scale(1.2) } 100% { transform: rotate(720deg) scale(0.8) } } @keyframes ball1 { 0% { box-shadow: 30px 0 0 #6e5cfb; } 50% { box-shadow: 0 0 0 #6e5cfb; margin-bottom: 0; transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 #6e5cfb; margin-bottom: 10px; } } @keyframes ball2 { 0% { box-shadow: 30px 0 0 #ff4f99; } 50% { box-shadow: 0 0 0 #ff4f99; margin-top: -20px; transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 #ff4f99; margin-top: 0; } }