/* 넥슨폰트 */ @font-face { font-family: 'NEXON Lv1 Gothic OTF'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NEXON Lv1 Gothic OTF Bold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NEXON Lv1 Gothic OTF Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* g마켓폰트 */ @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; } /* SCoreDream */ @font-face { font-family: 'SCoreDream'; font-weight: 100; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 200; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 300; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 400; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 500; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 600; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 700; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 800; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format('woff'); font-display: swap; } @font-face { font-family: 'SCoreDream'; font-weight: 900; font-style: normal; src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'), url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff'); font-display: swap; } @import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css); @import url('//fonts.googleapis.com/earlyaccess/notosanskr.css'); * {margin:0; padding:0;} body {width:100%;} body, ul, li, form{list-style:none; margin:0; padding:0; } li{list-style:none} a{margin:0; text-decoration:none; color:inherit; } .header{ position:relative; width:100%; height:auto; } .no_data {font-size:16px; padding:80px 0; letter-spacing:-0.1em; color:#ccc;} .org {color:orangered;} /* ------------------------------------------ 헤더페이지 1.1 */ /* 로그인, 회원가입 */ #loginjoin_str {width:100%; height:45px; background-color:#f5f9fe;} #loginjoin_str .loginjoin{position:relative; top:10px; font-size:12px; width:1000px; height:26px; left:calc(50% - 500px);} #loginjoin_str .idform{float:left; margin-right:6px; width:120px; height:26px; border:1px solid #cfcfcf;} #loginjoin_str .pwform{float:left; margin-right:6px; width:120px; height:26px; border:1px solid #cfcfcf;} #loginjoin_str .logform{float:left; margin-right:6px; width:70px; height:26px; text-align:center; border:0; background-color:gray; color:white;} #loginjoin_str .joinform{float:left; margin-right:6px; width:70px; height:26px; border:0; background-color:red; color:white;} #loginjoin_str .findform{float:left; width:140px; height:26px; border:0; background-color:#95BAC5; color:white;} #loginjoin_str .afterlogin{float:left; margin-right:6px; width:240px; height:26px; border:0; font-size:14px; font-weight:bold; font-family:'NanumSquare', sans-serif; margin-top:4px;} #loginjoin_str .mylesson{float:left; width:140px; height:26px; border:0; background-color:#053768; color:white; cursor:pointer;} #loginjoin_str .logform:hover {background-color:#ccc; color:#000;} #loginjoin_str .joinform:hover {background-color:tomato;} #loginjoin_str .mylesson:hover {background-color:#1465a3;} #loginjoin_str .findform:hover {background-color:#bfdce4; color:#053768;} #loginjoin_str .logform, #loginjoin_str .joinform, #loginjoin_str .findform, #loginjoin_str .mylesson:hover{cursor:pointer;} /* ------------------------------------------ 헤더페이지1.1 FIN */ /* ------------------------------------------ 메인페이지 */ /* 메인페이지 ver1.3 */ #stage01 {margin-bottom:26px; width:100%; height:340px; background-color:#fff;} #stage01 .stage01_center {position:relative; margin:0 auto; width:1000px; height:350px; background-color:#fff; font-family:'NanumSquare', sans-serif;} #stage01 .stage01_center .bxslider {position:absolute; display:inline-block; width:690px; height:340px; left:0;} #stage01 .stage01_center .bxslider_move {position:absolute; display:inline-block; width:690px; height:307px; left:0;} #stage01 .stage01_center .bxslider_move img {cursor:pointer;} #stage01 .stage01_center .bxslider_menu {position:absolute; left:0; bottom:0; width:690px; cursor:pointer;} #stage01 .stage01_center .bxslider_menu ul li {float:left; box-sizing:border-box; border:1px solid #ddd; width:25%; height:40px; text-align:center; line-height:40px; font-size:12px; font-weight:bold; color:#3f3f3f; background-color:#f5f5f5;} #stage01 .stage01_center .bxslider_menu ul a:hover li {border:0;; font-weight:bold; color:white; background-color:black;} #stage01 .stage01_center .bxslider_menu ul a.active li {border:0;; font-weight:bold; color:white; background-color:black;} #stage01 .stage01_center .bxslider_menu ul li:after {clear:both;} #stage01 .stage01_center .info_box {position:absolute; display:inline-block; width:300px; height:307px; right:0; top:0; cursor:pointer;} #stage01 .stage01_center .info_box > ul > li {position:relative; display:block; box-sizing:border-box; width:300px; height:165px; overflow:hidden; cursor:pointer;} #stage01 .stage01_center .info_box > ul > li div {width:100%; height:100%; transform:scale(1); transition:transform 0.5s;} #stage01 .stage01_center .info_box > ul > li:nth-child(1) {margin-bottom:10px; border:2px solid #ccc;} #stage01 .stage01_center .info_box > ul > li:nth-child(1) div {background:url("/edutube_img/main_20210701/info01.png") no-repeat center center;} #stage01 .stage01_center .info_box > ul > li:nth-child(2) {border:2px solid #ccc;} #stage01 .stage01_center .info_box > ul > li:nth-child(2) div {background:url("/edutube_img/main_20210701/info02.png") no-repeat center center;} #stage01 .stage01_center .info_box > ul > li:hover div { opacity:0.8; -webkit-transform:scale(1.03); /* 크롬 */ -moz-transform:scale(1.03); /* FireFox */ -o-transform:scale(1.03); /* Opera */ transform:scale(1.03); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s; -webkit-transition: transform .35s; } #stage01 .stage01_center .right_banner {position:absolute; top:0; right:-154px;} #stage01 .stage01_center .info_box > ul > li:hover {border:2px solid #133281;} /* 메인페이지 ver1.3 */ .stage02 {margin-bottom:14px; width:100%; background-color:#fff;} .stage02 ul {margin:0 auto; width:1000px;} .stage02 ul > li {box-sizing:border-box; width:495px; height:442px; border:1px solid #ccc;} .stage02 ul > li:nth-child(1) {float:left;} .stage02 ul > li:nth-child(2) {float:right;} .stage02 ul > li .s2_tit {width:100%; height:34px; line-height:34px; font-size:14px; text-align:center; color:#fff; background-color:#2a3034;} .stage02 ul > li > ul {box-sizing:border-box; padding:14px 10px; width:100%; border:none;} .stage02 ul > li > ul > li {margin-bottom:10px; height:184px; border:none; overflow:hidden; cursor:pointer;} .stage02 ul > li > ul > li div {width:100%; height:100%; transform:scale(1); transition:transform 0.5s;} .stage02 ul > li > ul > li:hover {box-shadow:0px 0px 12px rgb(0 0 0 / 50%);} .stage02 ul > li > ul > li:nth-child(1) {width:474px;} .stage02 ul > li > ul > li:nth-child(2) {float:left; width:233px;} .stage02 ul > li > ul > li:nth-child(3) {float:right; width:233px;} .stage02 ul > li:nth-child(1) > ul > li:nth-child(1) div {background:url('/edutube_img/main_20210701/stage2_01.png') no-repeat center center;} .stage02 ul > li:nth-child(1) > ul > li:nth-child(2) div {background:url('/edutube_img/main_20210701/stage2_02_20210830.png') no-repeat center center;} .stage02 ul > li:nth-child(1) > ul > li:nth-child(3) div {background:url('/edutube_img/main_20210701/stage2_03_20210830.png') no-repeat center center;} .stage02 ul > li:nth-child(2) > ul > li:nth-child(1) div {background:url('/edutube_img/main_20210701/stage2_04_20210830.png') no-repeat center center; background-size:cover;} .stage02 ul > li:nth-child(2) > ul > li:nth-child(2) div {background:url('/edutube_img/main_20210701/stage2_05_20210830.png') no-repeat center center; background-size:cover;} .stage02 ul > li:nth-child(2) > ul > li:nth-child(3) div {background:url('/edutube_img/main_20210701/stage2_06_20210830.png') no-repeat center center; background-size:cover;} .stage02 ul > li:nth-child(1) > ul > li:nth-child(1):hover div, .stage02 ul > li:nth-child(1) > ul > li:nth-child(2):hover div, .stage02 ul > li:nth-child(1) > ul > li:nth-child(3):hover div, .stage02 ul > li:nth-child(2) > ul > li:nth-child(1):hover div, .stage02 ul > li:nth-child(2) > ul > li:nth-child(2):hover div, .stage02 ul > li:nth-child(2) > ul > li:nth-child(3):hover div, .stage02 ul > li:nth-child(2) > ul > li:nth-child(4):hover div { opacity:0.8; -webkit-transform:scale(1.03); /* 크롬 */ -moz-transform:scale(1.03); /* FireFox */ -o-transform:scale(1.03); /* Opera */ transform:scale(1.03); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s; -webkit-transition: transform .35s; } .stage03 {width:100%;} .stage03 .stage03_center {margin:0 auto; width:1000px;} .stage03 .stage03_center .shoppingmall {width:100%; height:115px; background:url('/edutube_img/main_20210701/stage3_01.png'); cursor:pointer;} .stage03 .stage03_center .shoppingmall:hover {background:url('/edutube_img/main_20210701/stage3_01on.png');} .stage03 .stage03_center .openmarket {width:100%; height:150px;} .stage03 .stage03_center .openmarket ul {width:100%; height:100%;} .stage03 .stage03_center .openmarket ul li {box-sizing:border-box; float:left; position:relative; margin:3% 1%; width:12.28%; height:84%; border-radius:16px; cursor:pointer;} .stage03 .stage03_center .openmarket ul li:hover {box-shadow:4px 4px 16px rgb(0 0 0 / 30%);} .stage03 .stage03_center .openmarket ul li:nth-child(1) {background:url('/edutube_img/main_20210701/icon_coupang.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(2) {background:url('/edutube_img/main_20210701/icon_smst.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(3) {background:url('/edutube_img/main_20210701/icon_11st.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(4) {background:url('/edutube_img/main_20210701/icon_lotteon.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(5) {background:url('/edutube_img/main_20210701/icon_wmp.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(6) {background:url('/edutube_img/main_20210701/icon_cacao.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li:nth-child(7) {background:url('/edutube_img/main_20210701/icon_AI.png') no-repeat center center;} .stage03 .stage03_center .openmarket ul li span {display:inline-block; position:absolute; bottom:0px; width:100%; height:30px; line-height:30px; text-align:center; font-size:14px; font-weight:700;} .floors{width:100%; height:auto; margin-bottom:20px; background-color:#fff;} .floors .title {position:relative; margin:20px auto 0 auto; width:1000px; height:71px; line-height:71px; background-color:#f9fafb; font-size:22px; font-weight:bold; font-family:'NanumSquare', sans-serif;} .floors .title p{position:absolute; margin:0; left:0; bottom:4px;} .floors .sub_title_img{padding-top:27px; padding-bottom:14px} .floors .floor_01 {position:relative; width:1000px; height:265px; margin:0 auto;} .floors .floor_01_img{float:left; overflow:hidden} .floors .floor_01_imgscale{transform:scale(1); transition:transform 0.5s} .floors .floor_01_imgscale :hover{ -webkit-transform:scale(1.1); /* 크롬 */ -moz-transform:scale(1.1); /* FireFox */ -o-transform:scale(1.1); /* Opera */ transform:scale(1.1); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s; -webkit-transition: transform .35s; } .floors .floor_02{position:relative; width:1000px; height:265px; margin:0 auto;} .floors .floor_02 .title_img{padding-top:27px} .floors .floor_02 > ul > li {float:left; position:relative; box-sizing:border-box; margin-right:21px; width:234px; height:265px; border:1px solid #ccc; overflow:hidden; cursor:pointer;} .floors .floor_02 > ul > li:nth-child(4) {float:right; margin:0;} .floors .floor_02 > ul > li:after {clear:both;} .floors .floor_02 > ul > li:hover {border:1px solid #000;} .floors .floor_02 > ul > li:nth-child(4):hover {margin:0;} .floors .floor_02 > ul > li img {transform:scale(1); transition:transform 0.5s} .floors .floor_02 > ul > li:hover img { opacity:0.7; -webkit-transform:scale(1.05); /* 크롬 */ -moz-transform:scale(1.05); /* FireFox */ -o-transform:scale(1.05); /* Opera */ transform:scale(1.05); transition: transform .35s; -o-transition: transform .35s; -moz-transition: transform .35s; -webkit-transition: transform .35s; } .floors .floor_02 > ul > li .txt_box {position:absolute; bottom:0px; width:100%; height:111px; border-top:1px solid #ccc; background-color:#fff;} .floors .floor_02 > ul > li .txt_box ul li {position:absolute; left:8px; font-family:'Noto Sans KR',sans-serif;} .floors .floor_02 > ul > li .txt_box ul li:nth-child(1) {top:20px; font-size:12px;} .floors .floor_02 > ul > li .txt_box ul li:nth-child(2) {top:20px; font-size:14px; font-weight:bold;} .floors .floor_02 > ul > li .txt_box ul li:nth-child(3) {bottom: 12px; font-size:13px;} .floors .floor_02 > ul > li:hover .txt_box {border-top:1px solid #000; background-color:#000;} .floors .floor_02 > ul > li:hover .txt_box ul li {color:#fff;} .floors .floor_02 > ul > li:hover .txt_box ul li:nth-child(2) {font-size:16px;} .ending_box {width:100%;} .ending_box .ending_banner {width:1000px; height:77px; margin:0 auto 20px auto;} .ending_box .ending_banner ul {width:1000px; height:77px;} .ending_box .ending_banner ul li{width:494px; height:77px; cursor:pointer;} .ending_box .ending_banner ul li:after {clear:both;} .ending_box .ending_banner ul li:nth-child(1) {float:left; background:url("/edutube_img/main/ending_banner01.png");} .ending_box .ending_banner ul li:nth-child(2) {float:right; background:url("/edutube_img/main/ending_banner02.png");} .ending_box .channel_introducing {width:100%; height:340px; background-color:#464b50; text-align:center;} .ending_box .channel_introducing > ul {display:block; position:relative; top:54px;} .ending_box .channel_introducing > ul > li {font-family:'NanumSquare', sans-serif;} .ending_box .channel_introducing > ul > li:nth-child(1) {color:white; font-weight:bold; font-size:24px;} .ending_box .channel_introducing > ul > li:nth-child(2) {position:relative; top:10px; color:#868889; font-size:14px;} .ending_box .channel_introducing .channels {position:relative; top:100px; margin:0 auto; width:924px; height:154px;} .ending_box .channel_introducing .channels > ul {width:924px; height:154px;} .ending_box .channel_introducing .channels > ul > li {float:left; width:154px; height:154px; cursor:pointer;} .ending_box .channel_introducing .channels > ul > li:after {clear:both;} .ending_box .channel_introducing .channels > ul > li .gradi_box {position:absolute; bottom:0; width:154px; height:120px; background:linear-gradient(to top, black 10%, transparent 90%);} .ending_box .channel_introducing .channels > ul > li span {position:relative; display:block; width:154px; height:40px; text-align:left; left:10px; top:104px; color:white;} .ending_box .channel_introducing .channels > ul > li:nth-child(1) {background:url("/edutube_img/main/channel01.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:nth-child(2) {background:url("/edutube_img/main/channel02.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:nth-child(3) {background:url("/edutube_img/main/channel03.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:nth-child(4) {background:url("/edutube_img/main/channel04.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:nth-child(5) {background:url("/edutube_img/main/channel05.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:nth-child(6) {background:url("/edutube_img/main/channel06.png"); background-size:cover;} .ending_box .channel_introducing .channels > ul > li:hover .gradi_box {background:linear-gradient(to top, #133281 10%, transparent 90%);} /* ------------------------------------------ 메인페이지 FIN */ /* 하단 COPYRIGHT 레이어 팝업 */ #div_popup {box-sizing:border-box; margin:0 auto; width:100%; max-width:640px; height:800px; border:2px solid #000; padding: 0; position:relative; background-color:#fff;} #div_popup .ajax-popup-close {box-sizing:border-box; font-size:20px; position:absolute; top:-2px; right:-40px; width:40px; height:40px; font-weight:bold; color:#fff; background-color:black; border:2px solid black; cursor:pointer; z-index:10;} @media screen and (max-width: 1000px) { #div_popup .ajax-popup-close {right:0; width:30px; height:30px;} } #div_popup .contents { width:100%; height:790px; font-size:14px; padding:30px 20px; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;} #member_popup { width:640px; height:800px; margin:0 auto; border:2px solid #000; padding: 0; position:relative; background-color:#fff;} #member_popup .ajax-popup-close {position:absolute; box-sizing:border-box; top:-2px; right:-40px; width:40px; height:40px; background-color:#000; border:2px solid #000; font-size:20px; font-weight:bold; cursor:pointer;} #member_popup .ajax-popup-close:hover {background-color:#732019;} #member_popup .contents { width:100%; height:100%; font-size:14px; padding:20px 20px; overflow:hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;} /* 하단 COPYRIGHT 레이어 팝업 FIN */ /* 아이디 비번 찾기(구버젼)*/ ._layer {display:none; position:fixed; z-index:520; border-radius:4px; box-shadow:0 2px 8px rgba(0, 0, 0, .33); min-width:414px; width:25%; left:47%; top:50%; margin-left:-180px; margin-top:-240px; font-family:'Noto Sans KR',sans-serif; overflow:hidden;} .modal-wrapper{margin:0; padding:0} .modal-container {position:relative; top:0; margin:0 auto; background-color:#fff;} .btn_close_layer {position:absolute; display:block; top:16px; right:12px; width:30px; height:30px; text-align:center; padding-top:4px;} .btn_close_layer img {width:23px; height:23px;} .modal-header {border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: 0; color: #fff; background: #1d1d1d; font-size: 20px; line-height: 64px; text-align: center; } .modal-header h3 {height:64px; margin:0;} /*.modal-body {border-bottom-right-radius:4px; border-bottom-left-radius: 4px;}*/ .clfix {width:100%; padding:0} #findIdPwdTabs {height:50px; line-height:45px; text-align:center; background:#1d1d1d;} #findIdPwdTabs li {box-sizing:border-box; float:left; width:50%;} #findIdPwdTabs li a {display:block; width:100%; height:100%; border-bottom:3px solid #fff;} #findIdPwdTabs li .on span {border-bottom:3px solid #fff; font-weight:bold;} #findIdPwdTabs li span {display:inline-block; box-sizing:border-box; height:100%; margin-top:-3px; font-size:15px; color:#fff; } #findIdFormViewWrap, #findPwdFormViewWrap {padding:0 14px; height:330px;} #findIdFormViewWrap .answer_box, #findPwdFormViewWrap .answer_box {display:table; width:100%; height:100px; text-align:center; font-size:16px; color:#000;} #findIdFormViewWrap .answer_box p , #findPwdFormViewWrap .answer_box p {display:table-cell; vertical-align:middle;} #findIdFormViewWrap .answer_box_ok, #findPwdFormViewWrap .answer_box_ok {display:table; width:100%; height:330px; text-align:center; font-size:16px; color:#000;} #findIdFormViewWrap .answer_box_ok p, #findPwdFormViewWrap .answer_box_ok p {display:table-cell; vertical-align:middle;} #findIdFormViewWrap .input, #findPwdFormViewWrap .input { box-sizing: border-box; width: 100%; height: 48px; border: 1px solid #dedede; border-radius: 2px; padding-left: 14px; font-size: 15px; margin-bottom: 8px; } #findIdFormViewWrap .bir1, #findPwdFormViewWrap .bir1 { box-sizing: border-box; display: block; float: left; width: 17%; height: 48px; padding-left: 14px; font-size: 15px; border-radius: 2px; border: 1px solid #dedede; margin-bottom: 8px; } #findIdFormViewWrap .bir2, #findPwdFormViewWrap .bir2 { box-sizing: border-box; display: block; float: left; width: 15%; height: 48px; padding-left: 14px; font-size: 15px; border-radius: 2px; border: 1px solid #dedede; margin-bottom: 8px; } #findIdFormViewWrap .bir_txt, #findPwdFormViewWrap .bir_txt { float: left; padding: 19px 18px 0 5px; } ._popup_btn {display:block; box-sizing: border-box; float: left; height:50px; line-height:50px; font-size:15px; text-align: center; background: none; border: none; cursor: pointer; } ._btn_cancel {width:50%; border-top: 1px solid #dedede; background:white; border-bottom-left-radius: 4px; } ._btn_accept {width:50%; background:#133281; color: #fff; border-bottom-right-radius: 4px; } ._dimm {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color:#000; z-index: 510; opacity:0.4;} .idpw_answer {font-weight:bold; color:#ff6600;} /* 아이디 비번 찾기(구버젼) FIN */ /* ------------------------------------------ 마이페이지 */ .con_title01 {width:60px;} .con_title02 {width:240px;} .con_title04 {width:120px;} .my_page_banner {width:100%; height:200px; line-height:200px; text-align:center; font-size:30px; font-weight:bold; color:white; background:url(/edutube_img/top_background/my_page.png) no-repeat center center; } .my_page {width:100%; min-height:1150px; padding:0; margin:0;} .my_page .contents {width:1000px; margin:0 auto; padding:20px 0; position:relative;} .my_page .contents:after{content:''; display:block; clear:both;} .my_page .contents .left_div {float:left; width:200px; padding:0; top:10px; left:0; clear:both;} /* .my_page .contents .left_div .leftbox_title{color:#770b0b; font-size:16px; font-weight:bold; padding:15px 0; border-bottom:1px solid #770b0b; font-family:'Noto Sans KR',sans-serif;} */ .my_page .contents .left_div .leftbox_title{color:#000; font-size:24px; font-weight:bold; border-bottom:1px solid #133281; font-family:'Noto Sans KR',sans-serif; text-align:center; border:5px solid #133281; padding:30px 0; margin:0 0 5px 0; position:relative;} /* .my_page .contents .left_div .left_subtitle{font-size:18px; font-weight:bold; padding:15px 0 15px 10px; border-bottom:1px solid #ccc; background-color:#f0cec9; text-align:left; font-family:'Noto Sans KR',sans-serif;} */ .my_page .contents .left_div .left_subtitle{font-size:17px; padding:15px 0; border-bottom:1px solid #ccc; background-color:#133281; text-align:left; font-family:'Noto Sans KR',sans-serif; text-align:center; color:#fff; letter-spacing:2px;} .my_page .contents .left_div .left_con{text-indent:10px; padding:0; border-bottom:1px solid #ccc; font-family: 'Nanum Gothic', sans-serif;} .my_page .contents .left_div .left_con li {font-size:14px; padding:10px 0 10px 28px; border-bottom:1px solid #ccc; letter-spacing:-0.1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; cursor:pointer; background:url(/edutube_img/icon/left-bar.png) no-repeat left 18px center; } .my_page .contents .left_div .left_con li:hover, .my_page .contents .left_div .left_con li.on {background:url(/edutube_img/icon/left-plus-bar.png) no-repeat left 18px center; background-color:#e1e9fb; } .my_page .contents .left_div .left_con li:last-child {border-bottom:none;} .my_page .contents .left_div .left_subtitle, .left_con: hover{cursor:pointer} .my_page .contents .right_div {width:100%; padding:0 0 10px 0;} .my_page .contents .right_div .right_con_div {width:100%; min-height:1000px; margin:0; padding:0; } .my_page .contents .right_div .right_con_div .top_img {width:100%; text-align:center; position:absolute; top:0;} .my_page .contents .right_div .right_con_div .top_img img {text-align:center;} .my_page .contents .right_div .right_con_div .sub_div_menu {width:990px; padding:0 0 0 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;} .my_page .contents .right_div .right_con_div .sub_div_menu ul {width:100%;} .my_page .contents .right_div .right_con_div .sub_div_menu li {width:calc(20% - 1px); float:left; border-top:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #000; padding:15px 10px; text-align:center; font-size:14px; letter-spacing:-0.2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; display:table-cell; vertical-align:middle; font-family: 'Nanum Gothic', sans-serif;} .my_page .contents .right_div .right_con_div .sub_div_menu li.on, .my_page .contents .right_div .sub_div_menu li:hover {background-color:#cf1c1c; color:#fff; cursor:pointer;} .my_page .contents .right_div .right_con_div .sub_div_menu li:last-child { border-right:1px solid #000;} .my_page .contents .right_div .right_con_div .sub_div_menu ul:after {content:''; display:block; clear:both;} .my_page .contents .right_div .right_con_div .sub_class_area {width:100%;} /* .my_page .contents .right_div .right_con_div .movelogin{position:relative; left:calc(50% - 120px); margin-top:50px; margin-bottom:50px; width:240px; height:50px; font-size:18px; font-weight:bold} */ .my_page .contents .right_div .right_con_div .movietable{position:relative; margin:0 0 0 220px; width:770px; height:auto; text-align:center; border-collapse:collapse} .my_page .contents .right_div .right_con_div .movietable thead{height:40px; border-bottom:3px solid #133281;} .my_page .contents .right_div .right_con_div .movietable th, td{padding:4px; height:40px; font-size:14px; font-family: 'Nanum Gothic', sans-serif;} .my_page .contents .right_div .right_con_div .movietable_title{text-align:left;} .my_page .contents .right_div .right_con_div .movietable_date {text-align:right;} .my_page .contents .right_div .right_con_div .movietable th,td{border-bottom:1px solid black;} .my_page .contents .right_div .right_con_div .movietable td.line_center {text-align:center;} /* .my_page .contents .right_div .right_con_div .start_icon{ width:100px; height:36px; line-height:36px; border-radius:18px; background:rgb(255,192,72); color:white; margin:0 auto; cursor:pointer;} .my_page .contents .right_div .right_con_div .no_icon{ width:100px; height:36px; line-height:36px; border-radius:18px; background:#ccc; color:white; margin:0 auto; cursor:pointer;} */ .my_page .contents .right_div .right_con_div .hand img{ cursor:pointer;} .my_page .contents .right_div .right_con_div .con_txt {text-align:left; letter-spacing:-0.1em;} .my_page .contents .right_div .right_con_div .gray_font {color:#ccc;} /* ------------------------------------------ 마이페이지 FIN */ /********************************* 회원가입 */ .join_register{width:100%; height:auto; background:#fafafa; font-family:NotoSansKR, sans-serif;} .container_join{position:relative; width:1000px; left:calc(50% - 500px); padding-bottom:80px} .container_join input{border:1px solid rgb(222, 222, 222); text-indent:10px} .join_title_wrap{text-align:center; color:rgb(29, 29, 29);} .join_title_wrap h3{font-size:40px; padding:40px 0 0 0; margin:0;} .join_title_wrap p{font-size:14px; line-height:14px; font-weight:400; margin:10px auto 0 auto;} .join_title_wrap p span {cursor:pointer;} .required{display:none;} .join_form_wrap{position:relative; padding:40px; width:600px; height:auto; margin:50px auto 0 auto; background:#fff;} .join_form_wrap .required_input{position:absolute; top:-34px; right:0px; color:rgb(29, 29, 29); font-size:12px;} .join_info_box{height:50px; margin-bottom:20px} .join_sub_title{float:left; width:120px; height:50px; font-weight:bold} .join_sub_title .sub_title_txt{position:relative; top:14px} .join_sub_title .sub_title_star{position:relative; top:14px; color:#ff6600} .join_info_box ._input_box {position:relative;} .join_info_box .inputer_class {float:left; width:470px; height:48px} .join_info_box .btn_phonechk, .join_info_box .btn_idchk {position:absolute; right:16px; top:7px; padding:8px; text-align:center; border-radius:2px; background:#272e40; color:white; font-size:14px; font-weight:bold; cursor:pointer;} .btn_join {position:absolute; left:0px; width:680px; height:50px; background:#272e40; color:#fff; text-align:center; line-height:50px; margin-top:40px; font-size:16px; font-weight:bold; cursor:pointer;} .join_info_box .btn_phonechk:hover, .join_info_box .btn_idchk:hover {background:#133281;} .btn_join:hover {background:#133281;} .join_info_box .zip_input_class1{box-sizing:border-box; float:left; width:100px; height:50px} .join_info_box .zip_input_class2{box-sizing:border-box; float:left; width:100px; height:50px} .join_info_box .bir1{width:77px; height:44px} .join_info_box .bir2{width:77px; height:44px} .join_agreement_chks{margin-bottom:40px} /* checkbox */ .join_checkbox_wrap .chk_all_wrap{font-size:14px} .join_checkbox_wrap .chk_cell_wrap{font-size:12px} .join_checkbox_wrap .checks{margin-bottom:10px; color:#222; font-weight:bold} .join_checkbox_wrap .checks_icon_txt{color:#ff6600} .join_checkbox_wrap .info_go {text-decoration:underline; cursor:pointer;} .join_checkbox_wrap .checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ color: #99a1a7; background: url(/edutube_img/join/checkbox_on@2x.png) no-repeat left top; -webkit-background-size: cover; background-size: cover; border: none; border-radius: 0px; } .join_checkbox_wrap .checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */ content: ' '; display: inline-block; width: 24px; /* 체크박스의 너비를 지정 */ height: 24px; /* 체크박스의 높이를 지정 */ line-height: 24px; /* 세로정렬을 위해 높이값과 일치 */ margin: -1px 4px 0 0; text-align: center; vertical-align: middle; background: url(/edutube_img/join/checkbox_off@2x.png) no-repeat left top; -webkit-background-size: 100% 100%; background-size: 100% 100%; border: none; border-radius: 0px; } .container_join #show {display:none; position:fixed; top:150px; left:calc(50% - 280px); width:560px; height:500px;} .container_join #show .close_info_bg {position:absolute; top:0px; right:-28px; width:30px; height:30px; background-color:#000;} .container_join #show .close_info_box {position:absolute; box-sizing:border-box; border:4px solid #000; top:0px; right:-28px; width:30px; height:30px; background:url(/edutube_img/footer/menu_x.png) no-repeat center center; background-size:40px; cursor:pointer;} .container_join #show .pop_info_box {box-sizing:border-box; padding:10px; border:2px solid #000; width:100%; height:100%; background-color:#fff; overflow:scroll;} /********************************* 회원가입 FIN */ /******************************** 로그인 */ .login_container {position:relative; width:100%; font-family:'Noto Sans KR',sans-serif;} .login_container .login_topbanner_area {background:url("/edutube_img/top_background/login.png") no-repeat center center; background-size:cover; padding:50px 0; width:100%; text-align:center; color:white;} .login_container .login_content{position:relative; width:1000px; height:300px; margin:80px auto 80px auto; background-color:#fff;} .login_container .login_content .login_center_box {position:relative; margin:0 auto; width:450px; height:100%;} .login_container .login_content .login_center_box .input_box {display:block; position:relative; box-sizing:border-box; margin:0 auto 10px auto; width:100%; height:50px; border:1px solid #ccc;} .login_container .login_content .login_center_box #log_id, .login_container .login_content .login_center_box #log_pw {padding:20px;} .login_container .login_content .login_center_box .input_btn {text-align:center; background-color:#272e40; color:#fff; cursor:pointer;} .login_container .login_content .login_center_box .input_btn:hover {background-color:#133281;} .login_container .login_content .login_center_box .find_box {position:relative; width:100%; height:30px;} .login_container .login_content .login_center_box .find_box span {position:absolute; right:0px; font-size:14px; color:#979797; cursor:pointer;} .login_container .login_content .login_center_box .join_box {position:relative; margin-top:40px; width:100%; height:30px; font-size:16px; text-align:center;} .login_container .login_content .login_center_box .join_box span {color:#ff6600;} .login_container .login_content2 .login_center_box .alreaylogin {text-align:center; line-height:300px;} /******************************** 로그인 FIN */ /********************************* 아이디비번찾기pop */ #find_wid100 {width:100%; min-height:770px; font-family:NotoSansKR, sans-serif;} #find_wid100 .find_title {position:relative; text-align:center;} #find_wid100 .find_title h3 {font-size:40px; padding-top:40px; margin:0;} #find_wid100 .find_title span {font-size:14px; line-height:14px; font-weight:400;} #find_wid100 .find_box {position:relative; margin:40px auto 0 auto; box-sizing:border-box; width:400px; border:1px solid #732019; background-color:#fff; text-align:center;} #find_wid100 .find_box #what_title {width:100%; height:46px; line-height:46px; font-size:18px; font-weight:bold;} #find_wid100 .find_box #what_title ul li {float:left; width:50%; text-align:center; font-weight:bold; color:#fff; background-color:#ccc; cursor:pointer;} #find_wid100 .find_box #what_title ul li:hover {background-color:#cf1c1c;} #find_wid100 .find_box #what_title ul li.on {background-color:#732019;} #find_wid100 .find_box .id_box {display:none;} #find_wid100 .find_box .pw_box {display:none;} #find_wid100 .find_box .on {display:block;} #find_wid100 .find_box .answer_box {display:table; width:100%; height:100px; text-align:center;} #find_wid100 .find_box .answer_box span {display:table-cell; vertical-align:middle;} #find_wid100 .find_box .input_area {display:inline-block; position:relative; margin-bottom:10px; width:25%; height:46px;} #find_wid100 .find_box .input_box {box-sizing:border-box; padding:10px; margin-bottom:10px; height:46px; border:1px solid #ccc;} #find_wid100 .find_box .input_area span {position:absolute; bottom:0px; right:10px; line-height:46px;} #find_wid100 .find_box ._input_ {display:inline-block; position:relative; width:5%;} #find_wid100 .find_box #id_my_name, #find_wid100 .find_box #pw_my_name {width:90%;} #find_wid100 .find_box #pw_my_id {width:90%;} #find_wid100 .find_box .input_area #id_my_Y, #find_wid100 .find_box .input_area #pw_my_Y {width:100%;} #find_wid100 .find_box .input_area #id_my_M, #find_wid100 .find_box .input_area #pw_my_M {width:100%;} #find_wid100 .find_box .input_area #id_my_D, #find_wid100 .find_box .input_area #pw_my_D {width:100%;} #find_wid100 .find_box #id_my_HP, #find_wid100 .find_box #pw_my_HP {width:90%;} #find_wid100 .find_box .btn_box {padding:20px;} #find_wid100 .find_box .btn_box .go_cancel, #find_wid100 .find_box .btn_box .go_OK {display:inline-block; width:40%; height:46px; line-height:46px; color:#fff; cursor:pointer;} #find_wid100 .find_box .btn_box .go_cancel:hover, #find_wid100 .find_box .btn_box .go_OK:hover {background-color:#cf1c1c;} #find_wid100 .find_box .btn_box .go_cancel {background-color:#ccc;} #find_wid100 .find_box .btn_box .go_OK {background-color:#732019;} #find_wid100 .login_box {position:relative; margin-top:20px; text-align:center;} #find_wid100 .login_box .go_login {padding:10px; cursor:pointer;} /********************************* 아이디비번찾기pop FIN */ /********************************* 회원정보수정 */ .useredit_register{width:100%; height:auto; background:#fafafa} .useredit_register input{border:1px solid rgb(222, 222, 222); text-indent:10px} .useredit_container{position:relative; width:1000px; left:calc(50% - 500px); padding-bottom:80px} .useredit_container .title_wrap{text-align:center; color:rgb(29, 29, 29); font-family:NotoSansKR, sans-serif} .useredit_container .title_wrap h3{font-size:40px; padding:40px 0 0 0; margin:0;} .useredit_container .title_wrap p{font-size:14px; line-height:14px; font-weight:400; margin:10px auto 0 auto;} .useredit_form_wrap{position:relative; margin:0 auto; padding:40px 40px 160px 40px; width:600px; height:auto; margin-top:50px; background:#fff;} .useredit_form_wrap .required_input{position:absolute; right:0px; top:-34px; color:rgb(29, 29, 29); font-size:12px; font-family:NotoSansKR, sans-serif} .useredit_info_box{height:50px; margin-bottom:20px} .useredit_sub_title{float:left; width:120px; height:50px; font-weight:bold} .useredit_sub_title .sub_title_txt{position:relative; top:14px} .useredit_sub_title .sub_title_star{position:relative; top:14px; color:#ff6600} .useredit_info_box ._input_box {position:relative;} .useredit_info_box .inputer_class{float:left; width:470px; height:48px} .useredit_info_box .gender_box{float:left; width:470px; height:44px; line-height:44px;} .useredit_info_box .btn_pwchk{position:absolute; right:16px; top:6px; padding:8px 12px 8px 8px; text-align:center; border-radius:2px; background:#272e40; color:white; border-radius:4px; cursor:pointer;} .useredit_info_box .btn_phonechk{position:absolute; right:16px; top:6px; padding:8px 12px 8px 8px; text-align:center; border-radius:2px; background:#272e40; color:white; border-radius:4px; cursor:pointer;} .useredit_info_box .btn_pwchk:hover, .useredit_info_box .btn_phonechk:hover {background:#133281;} .useredit_btn_edit {position:absolute; left:0px; bottom:70px; width:680px; height:50px; background:#272e40; color:#fff; text-align:center; line-height:50px; margin-top:40px} .useredit_btn_edit:hover {background:#133281;} .useredit_btn_bye{position:absolute; left:0px; bottom:0px; width:100%; height:50px; margin-top:30px} .bye_box{position:absolute; right:0px; width:100px; height:50px; background:#ff6600; color:white; text-align:center; line-height:50px;} .bye_box:hover {background:red; color:white;} .useredit_info_box .zip_input_class1{box-sizing:border-box; float:left; width:100px; height:50px} .useredit_info_box .zip_input_class2{box-sizing:border-box; float:left; width:100px; height:50px} .useredit_info_box .bir1{width:77px; height:44px} .useredit_info_box .bir2{width:77px; height:44px} /********************************* 회원정보수정 FIN */ .member_blue_hover_txt:hover {color:#008ad8;} /********************************* 수강신청페이지 signup_class */ .sign_container { position:relative; width:1000px; margin:20px auto 0 auto; font-family:'Noto Sans KR',sans-serif; } .sign_container .right_box {position:absolute; width:220px; top:0; left:-240px;} .sign_container .info_title{box-sizing:border-box; width:100%; height:60px; padding:6px; border:4px solid #272e40;} .info_title_first{display:inline-block; position:relative; margin:0; left:20px; font-size:23px; font-weight:bold; line-height:40px; font-family:'Noto Sans KR',sans-serif; letter-spacing:-0.1em;} .info_title_subbox{display:inline-block; position:absolute; right:20px; line-height:40px;} .info_title_dir{display:inline-block; position:relative; margin:0; font-size:12px} .sign_container .info{position:relative; margin-top:20px; margin-bottom:100px; height:320px;} .sign_container .info .info_img{float:left; width:634px; height:422px; border:1px solid #ccc;} .sign_container .info .info_img img {width:632px !important; height:392px !important; margin:0 auto; border:1px solid #ccc;} .sign_container .info .info_txt {float:right; position:relative; width:320px; height:422px; font-size:14px; border:1px solid #ccc; padding:0px 15px;} .sign_container .info .info_txt .info_sub_title{display:table; width:320px; height:80px; font-size:21px; font-weight:bold; border-bottom:2px solid #272e40;} .sign_container .info .info_txt .info_sub_title span {display:table-cell; vertical-align:middle; letter-spacing:-0.1em;} .sign_container .info .info_txt .info_sub{display:table; width:320px; height:50px; border-bottom:1px solid #c7c7c7;} .sign_container .info .info_txt .long_textbox{height:70px;} .sign_container .info .info_txt .info_sub span {display:table-cell; vertical-align:middle;} .sign_container .info .info_txt .info_sub span.s_tit {width:64px;} .sign_container .info .info_txt .info_sub span.s_con {width:256px;} .sign_container .info .info_txt .info_sub_m {display:table; width:320px; height:50px; border-bottom:1px solid #c7c7c7;} .sign_container .info .info_txt .mobile_icon {display:table-cell; vertical-align:middle; width:24px; background:url('/css/img/icon_mobile.jpg') no-repeat center center;} .sign_container .info .info_txt .s_con_m {display:table-cell; vertical-align:middle;} .sign_container:after {clear:both;} .Signup_Click {position:absolute; width:320px; height:46px; line-height:46px; bottom:10px; background-color:#272e40; color:white; font-size:20px; font-weight:bold; text-align:center;} .Signup_Click:hover {background-color:#133281; cursor:pointer} .container ul:after {content:''; display:block; clear:both;} #wide {width:100%; padding:20px 0 0 0;} #wide .contents {display:block; width:1000px; margin:0 auto;} #wide .contents img {display:block; margin:0 auto;} /********************************* 수강신청페이지 signup_class FIN */ /********************************* 수강신청페이지 pay_class */ #pay_wid100 {width:100%; min-height:650px; height:auto;} #pay_wid100:after {clear:both;} #pay_wid100 .pay_box1000 {position:relative; width:800px; height:auto; margin:0 auto;} #pay_wid100 .pay_box1000 .pay_title {width:1000px; height:50px; line-height:50px; font-size:20px; font-weight:bold} #pay_wid100 .pay_box1000 .pay_box {float:left; width:750px; height:auto; margin-bottom:40px;} #pay_wid100 .style1 {color: #FF3300; font-weight: bold} /********************************* 수강신청페이지 pay_class FIN */ /********************************* 결제페이지 */ /******** bill */ #bill_wid100 {width:100%; height:auto;} #bill_wid100 .bill_box1000 {position:relative; width:800px; height:auto; margin:35px auto 0 auto;} #bill_wid100 .bill_box1000 .bill_content_box {float:left; width:750px; height:auto;} #bill_wid100 .bill_box1000 .bill_content_box th, td {border-bottom:none;} /******** bill FIN */ /******** bill_ok */ #bill_ok_wid100 {position:relative; width:800px; height:auto; margin:35px auto 0 auto;} #bill_ok_wid100 .bill_ok_1000 {float:left; width:750px; height:auto; margin-bottom:40px;} #bill_ok_wid100 .bill_ok_1000 #pay_last_box {width:665px; height:388px; border:1px solid #d9d9d9; margin:58px auto 0px; position: relative;} #bill_ok_wid100 .bill_ok_1000 #pay_last_tt {width:394px; height:37px; position:absolute; top:52px; left:135px;} #bill_ok_wid100 .bill_ok_1000 #pay_last_tt_couponOK {width:394px; height:37px; position:absolute; top:125px; left:135px;} #bill_ok_wid100 .bill_ok_1000 #pay_table_3 {width:523px; position:absolute; top:123px; left:71px;} #bill_ok_wid100 .bill_ok_1000 #pay_last_st {width:474px; height:13px; position:absolute; top:284px; left:96px; font-size:12px; color:#222; text-align:center;} #bill_ok_wid100 .bill_ok_1000 #pay_btn_home {width:106px; height:30px; position:absolute; top:337px; left:280px; cursor:pointer;} #bill_ok_wid100 .bill_ok_1000 .table_t_4 {color:#ff6600;} /******** bill_ok FIN */ .txt_stt{font-size:14px} .apply_input{font-size:12px} .table_t_1{color:white} .txt_check{font-size:12px; color:#666;} .pay_st{height:15px; margin:30px 0px 10px 0px} #pay_table_2{font-size:12px} .delivery_info{border-top:2px solid #b2b2b2; border-bottom:2px solid #b2b2b2; border-collapse: collapse} .delivery_info tr{border-bottom:1px solid #d9d9d9} .delivery_info_title{width:112px; height:45px; text-indent: 10px; background-color:rgb(245, 245, 245); color:#666} .delivery_info_con{width:635px; height:45px; text-indent: 10px;} #pay_btn_box {width: 217px; height:30px; margin:15px auto 0px} td, th {display: table-cell} .index_txt {font-family:'dotum'; font-size:12px; color:#535353; line-height:24px; position:absolute; left: 15px} #pay_index_1 {position: relative;width: 747px;height: 100px;background: #f5f5f5;border-top: 1px solid #b2b2b2;border-bottom: 1px solid #b2b2b2} #bill_wid100 input, #bill_wid100 textarea, #bill_wid100 select {background-color: white;cursor: text;text-rendering: auto;color: initial;letter-spacing: normal;word-spacing: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;margin: 0em;font: 400 13.3333px Arial} #bill_ok_wid100 input, #bill_ok_wid100 textarea, #bill_ok_wid100 select {background-color: white;cursor: text;text-rendering: auto;color: initial;letter-spacing: normal;word-spacing: normal;text-transform: none;text-indent: 0px;text-shadow: none;display: inline-block;text-align: start;margin: 0em;font: 400 13.3333px Arial} #pay_index_0{position: relative; width:745px; height:151px; background:#f5f5f5; border:1px solid #cccccc; margin:40px 0px 100px 0px} .index_txt_1{position:absolute; top:17px; left:44px; font-size:12px} .index_txt_2{position:absolute; top:45px; left:21px; font-size:12px} /********************************* 결제페이지 FIN */ /******************************** 무료쿠폰페이지 coupon */ #coupon_wid100 {width:100%; margin-top:35px; font-family: 'Nanum Gothic', sans-serif;} #coupon_wid100 .signup_top{position:relative; width:1000px; height:470px; margin:0 auto;} #coupon_wid100 .signup_top_part02 {float:left; width:750px; height:auto;} #coupon_wid100 .signup_top_part02_title{width:750px; font-family:'Nanum Gothic'; font-size: 23px; font-weight: 600; color: #4c4c4c; padding-left:20px; padding:8px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; border:3px solid #000; letter-spacing:-0.1em;} #coupon_wid100 .signup_top_part02_img2{float:left; width:750px; height:404px} #coupon_wid100 .signup_click{position:absolute; width:222px; height:46px; right:8px; bottom:62px; border-radius:8px} #coupon_wid100 .signup_contents{position:relative; width:1000px; height:auto; left:calc(50% - 500px);} /* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); .notosanskr * { font-family: 'Noto Sans KR', sans-serif; } */ #cou_wrap {width:731px; padding:0px 0px 0px 20px; margin:0 auto; min-height:100px;} #cou_header {width:731px; height:42px; float:left; border-bottom:1px solid #e5e5e5;} #coupon_wid100 .cou_text_1 {font-family:'Nanum Gothic'; font-size:23px; font-weight:bold; color:#4c4c4c; float:left;} #coupon_wid100 .cou_text_2 {padding:40px 0; font-family:'Nanum Gothic'; font-size:20px; color:#4c4c4c; display:block; width:731px; text-align:center; letter-spacing:-0.05em;} #coupon_wid100 .cou_text_2 span {color:#fc9208; font-weight:bold;} #coupon_wid100 .cou_table {width:712px; float:left; margin-bottom:40px;} #coupon_wid100 .cou_table table {width:100%; border-collapse:collapse;border-spacing:0; margin:20px 0 0 0;} #coupon_wid100 .cou_table table th {padding:10px 0;} #coupon_wid100 .cou_table table td { letter-spacing:-0.1em; } #coupon_wid100 .cou_table_th {font-family:'Nanum Gothic'; font-size:16px; font-weight:600; color:#0581e5; border:1px solid #cccccc; width:30%;} #coupon_wid100 .cou_table_td {font-family:'Nanum Gothic'; font-size:12px; color:#4c4c4c; text-indent:15px; border:1px solid #cccccc; border-top:0px; position:relative; text-align:left; width:30%;} #coupon_box {width:717px; height:239px; margin-top:15px; margin-bottom:100px; float:left; position:relative;background:url(images/coupon_bg.png);} #coupon_wid100 .coupon_number_1 {text-align:center; position:absolute; top:178px; left:145px; width:145px; height:30px;line-height:30px; border:1px solid #868686; font-size:16px;} #coupon_wid100 .coupon_number_2 {text-align:center; position:absolute; top:178px; left:306px; width:145px; height:30px;line-height:30px; border:1px solid #868686; font-size:16px;} #coupon_wid100 .cou_check {position:absolute; right:20px;} #coupon_wid100 .td_bg_color { background-color:#f5f9fd;} /******************************** 무료쿠폰페이지 coupon FIN */ /******************************** 샘플쿠폰페이지 my_coupon_class */ #cuopon_list{position:relative; width:1000px; height:auto; left:calc(50% - 500px); margin:0; margin-top:35px} #cuopon_list .cuopon_list_box{float:left; width:750px; height:auto;} #cuopon_list .cuopon_list_title{float:left; width:750px; font-family:'Nanum Gothic'; font-size: 23px; font-weight: 600; color: #4c4c4c; padding-left:20px; padding:8px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; border:3px solid #000; letter-spacing:-0.1em;} #cuopon_list .cuopon_list_title:after {claer:both;} /* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); .notosanskr * { font-family: 'Noto Sans KR', sans-serif; } */ #cuopon_list .cuopon_list_box #cou_wrap {width:731px; padding:0px 0px 40px 20px; margin:0 auto; min-height:100px;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table {width:712px; float:left; margin-bottom:40px;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table table {width:100%; border-collapse:collapse;border-spacing:0; margin:20px 0 0 0;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table table th {padding:10px 0; font-family:'Nanum Gothic'; font-size:16px; border-top:2px solid #000; border-bottom:1px solid #000;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table table td { letter-spacing:-0.1em; font-family:'Nanum Gothic'; font-size:12px; border-bottom:1px solid #ccc;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table .line_center {text-align:center;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table .start_icon{ width:100px; height:36px; line-height:36px; border-radius:18px; background:rgb(255,192,72); color:white; margin:0 auto; cursor:pointer;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table .no_icon{ width:100px; height:36px; line-height:36px; border-radius:18px; background:#ccc; color:white; margin:0 auto; cursor:pointer;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table .gray_font {color:#ccc;} #cuopon_list .cuopon_list_box #cou_wrap .cou_table .bold {font-weight:bold;} /******************************** 샘플쿠폰페이지 my_coupon_class FIN */ /******************************** 학습문의 QnA_main */ #qna_main {width:100%; min-height:400px;} #qna_main .qna_top {width:100%; padding:50px 0; text-align:center; color:white; background:url("/edutube_img/top_background/qna_title.png") no-repeat center center; background-size:cover;} #qna_main .qna_container {width:1000px; margin:0 auto; padding-top:20px; font-family:'Noto Sans KR',sans-serif;} #qna_main .btn_go_write {float:right; box-sizing:border-box; width:117px; height:35px; margin-bottom:10px; color:#fff; font-size:14px; font-weight:bold; border-radius:.4em; background-color:#F47721; border:none; cursor:pointer;} #qna_main .btn_go_write:hover {border:2px solid #F47721; background-color:#fff; color:#F47721;} #qna_main .table-striped {width:100%; margin-bottom:20px; border-collapse:collapse; border-spacing:0;} #qna_main .table-striped thead {background-color: #F3F3F3;} #qna_main .table-striped tr {border:1px solid #E3E3E1;} #qna_main .table-striped thead tr th {text-align:center;} #qna_main .table-striped thead tr .th_1 {width:15%; text-align:center;} #qna_main .table-striped thead tr .th_3 {width:20%; text-align:center;} #qna_main .table-striped thead tr .th_4 {width:20%; text-align:center;} #qna_main .table-striped tr td {border:0;} /******************************** 학습문의 QnA_main FIN */ /******************************** 학습문의 QnA_view */ #qna_view {width:100%; min-height:500px; margin-bottom:40px;} #qna_view .qna_top {width:100%; padding:50px 0; text-align:center; color:white; background:url("/edutube_img/qna_title.png") no-repeat center center; background-size:cover;} #qna_view .qna_container {width:1000px; margin:0 auto; padding-top:40px; font-family:'Noto Sans KR',sans-serif;} #qna_view .qna_container .qna_view_title {height:30px; font-weight:bold; margin-bottom:20px; border-bottom:2px solid #32A085;} #qna_view .table_striped {width:100%; margin-bottom:40px; border-collapse:collapse; border-spacing:0; border:1px solid #E3E3E1;} #qna_view .table_striped tbody tr {border-bottom:1px solid #E3E3E1;} #qna_view .table_striped tbody tr td {border:0;} #qna_view .table_striped tbody tr .td_subtitle {background-color: #F3F3F3; text-align:center; border-right:1px solid #E3E3E1;} #qna_view .table_striped tbody tr .td_content {box-sizing:border-box; padding:10px;} #qna_view .button_confirm {position:relative; box-sizing:border-box; margin:0 auto; text-align:center; width:300px; height:40px; line-height:40px; font-size:15px; color:#fff; background-color:#32A085; cursor:pointer;} #qna_view .button_confirm:hover {color:#32A085; background-color:#fff; border:2px solid #32A085; line-height:36px; font-weight:bold;} /******************************** 학습문의 QnA_view FIN */ /******************************** 학습문의 QnA_write */ #qna_write {width:100%; min-height:500px; margin-bottom:40px;} #qna_write .qna_top {width:100%; padding:50px 0; text-align:center; color:white; background:url("/edutube_img/qna_title.png") no-repeat center center; background-size:cover;} #qna_write .qna_container {width:1000px; margin:0 auto; padding-top:40px; font-family:'Noto Sans KR',sans-serif;} #qna_write .qna_container .qna_write_title {height:30px; font-weight:bold; margin-bottom:20px; border-bottom:2px solid #32A085;} #qna_write .table_striped {width:100%; margin-bottom:20px; border-collapse:collapse; border-spacing:0; border:1px solid #E3E3E1;} #qna_write .table_striped tbody tr {border-bottom:1px solid #E3E3E1;} #qna_write .table_striped tbody tr td {border:0;} #qna_write .table_striped tbody tr .td_subtitle {background-color: #F3F3F3; text-align:center; border-right:1px solid #E3E3E1;} #qna_write .table_striped tbody tr .td_content {box-sizing:border-box; padding:10px;} #qna_write .table_striped tbody tr td .wr_title {border:1px solid #E3E3E1; width:100%; height:30px;} #qna_write .table_striped tbody tr td .wr_textarea {border:1px solid #E3E3E1; width:100%; height:280px;} #qna_write .qna_file {margin-bottom:40px; width:100%;} #qna_write .button_confirm {position:relative; margin:0 auto; text-align:center; width:300px; height:40px;} #qna_write .button_confirm div {box-sizing:border-box; width:140px; height:40px; line-height:40px; color:#fff; font-size:15px; background-color: #32A085; cursor:pointer;} #qna_write .button_confirm .btn_cancel {float:left;} #qna_write .button_confirm .btn_ok {float:right;} #qna_write .button_confirm div:hover {color:#32A085; background-color:#fff; border:2px solid #32A085; line-height:36px; font-weight:bold;} /******************************** 학습문의 QnA_write FIN */ /******************************** 공지사항 notice_main */ #notice_main {width:100%; min-height:400px;} #notice_main .notice_top {width:100%; padding:50px 0; text-align:center; color:white; background:url("/edutube_img/top_background/qna_title.png") no-repeat center center; background-size:cover;} #notice_main .notice_container {width:1000px; margin:0 auto; padding-top:20px; font-family:'Noto Sans KR',sans-serif;} #notice_main .btn_go_write {float:right; box-sizing:border-box; width:117px; height:35px; margin-bottom:10px; color:#fff; font-size:14px; font-weight:bold; border-radius:.4em; background-color:#F47721; border:none; cursor:pointer;} #notice_main .btn_go_write:hover {border:2px solid #F47721; background-color:#fff; color:#F47721;} #notice_main .table-striped {width:100%; margin-bottom:20px; border-collapse:collapse; border-spacing:0;} #notice_main .table-striped thead {background-color: #F3F3F3;} #notice_main .table-striped tr {border:1px solid #E3E3E1;} #notice_main .table-striped thead tr th {text-align:center;} #notice_main .table-striped thead tr .th_1 {width:15%; text-align:center;} #notice_main .table-striped thead tr .th_3 {width:20%; text-align:center;} #notice_main .table-striped thead tr .th_4 {width:20%; text-align:center;} #notice_main .table-striped tr td {border:0;} /******************************** 학습문의 QnA_main FIN */ /******************************** 첫영상피드백 */ .fir_feedback_container {width:100%; font-family:'Noto Sans KR',sans-serif;} .fir_feedback_container input {display:block; padding:0 30px; width:100%; height:40px; border:0; box-sizing:border-box;} .fir_feedback_topbanner_area {background:url("/edutube_img/top_background/first_feed.png") no-repeat center center; background-size:cover; padding:50px 0; width:100%; text-align:center; color:white;} .fir_feedback_document {position:relative; margin:40px auto; width:1000px; margin-bottom:50px;} .fir_feedback_document .step1 {widh:100%} .fir_feedback_document .step2 {widh:100%} .fir_feedback_title {font-size:13px; color:#681b1b; border-bottom:2px solid #681b1b; padding:10px 0;} .fir_feedback_title .title_L {font-size:19px; font-weight:bold} .fir_feedback_title .title_pc {color:#E58888} .fir_feedback_document .step1 .contentbox {padding:30px 0 50px 0; width:100%;} .fir_feedback_document .step1 .contentbox ul {border-bottom:1px solid #EBEBEB; padding:10px 0;} .fir_feedback_document .step1 .contentbox li {display:inline-block;} .fir_feedback_document .step1 .contentbox li .subtitle {display:inline-block; width:120px; height:30px} .fir_feedback_document .step1 .contentbox li .info {display:inline-block; width:360px; height:30px; margin:0;} .fir_feedback_document .step2 .contentbox {padding:30px 0; width:100%;} .fir_feedback_document .step2 .guide{width:100%; padding:30px; background:#F5F5F5; margin-top:20px; box-sizing:border-box;} .fir_feedback_document .step2 .guide li div {width:100%; padding:10px 0;} .fir_feedback_document .step2 .guide li div {display:inline-block;} .fir_feedback_document .step2 .guide li div span {font-size:13px; color:#681b1b;} .fir_feedback_document .step3 .contentbox {padding:30px 0 50px 0; width:100%;} .fir_feedback_document .step3 .contentbox ul {border-bottom:1px solid #EBEBEB; padding:10px 0;} .fir_feedback_document .step3 .contentbox li{text-align:center;} .fir_feedback_document .step3 .contentbox li .subtitle {display:inline-block; width:120px; height:30px;} .fir_feedback_document .step3 .contentbox li .info1 {display:inline-block; width:620px; height:30px; padding:6px 0; cursor:pointer; text-align:left;} .fir_feedback_document .step3 .contentbox li .info1 :hover {font-weight:bold; color:#681b1b;} .fir_feedback_document .step3 .contentbox li .info2 {display:inline-block; width:120px; height:30px; padding:6px 0;} .feedback_document .fir_answer_click {color:#681b1b;} .fir_feedback_document .Q_input{display:block; padding:10px 10px; width:100%; min-height:200px; border:0; box-sizing:border-box; row="8"} .fir_feedback_document .Q_clic {box-sizing:border-box; width:140px; padding:10px 0; margin:40px auto 0 auto; text-align:center; font-size:18px; border:2px solid #681b1b; background-color:#681b1b; color:#fff; border-radius:4px; cursor:pointer;} .fir_feedback_document .Q_clic:hover {background-color:#fff; color:#681b1b;} /******************************** 첫영상피드백 FIN */ /******************************** 첫영상피드백 에디트 */ .first_feededit {width:100%; font-family:'Noto Sans KR',sans-serif;} .first_feededit input {display:block; padding:0 30px; width:100%; height:40px; border:0; box-sizing:border-box; background-color:transparent} .first_feededit .feededit_document {position:relative; margin:40px auto; width:1000px; margin-bottom:50px;} .first_feededit .feededit_document .step2 {widh:100%} .first_feededit .feededit_document .title {font-size:13px; color:#681b1b; border-bottom:2px solid #681b1b; padding:10px 0;} .first_feededit .feededit_document .title .title_L {font-size:19px; font-weight:bold} .first_feededit .feededit_document .title .title_pc {color:#E58888} .first_feededit .feededit_document .step2 .guide{width:100%; padding:30px; background:#F5F5F5; margin-top:20px; box-sizing:border-box;} .first_feededit .feededit_document .step2 .guide li div {width:100%; padding:4px 0;} .first_feededit .feededit_document .step2 .guide li div {display:inline-block; width:120px;} .first_feededit .feededit_document .answer_title {font-size:16px; font-weight:bold;} .first_feededit .feededit_document .Q_input {display:block; padding:10px 10px; width:100%; min-height:200px; border:0; box-sizing:border-box; row="8"} .first_feededit .feededit_document .Q_clic {box-sizing:border-box; width:140px; padding:10px 0; margin:40px auto 0 auto; text-align:center; font-size:18px; border:2px solid #681b1b; background-color:#681b1b; color:#fff; border-radius:4px; cursor:pointer;} .first_feededit .feededit_document .Q_clic:hover {background-color:#fff; color:#681b1b;} /******************************** 첫영상피드백 에디트 FIIN */ /******************************** 콘텐츠피드백 */ .feedback_container {width:100%; font-family:'Noto Sans KR',sans-serif;} .feedback_container input {display:block; padding:0 30px; width:100%; height:40px; border:0; box-sizing:border-box;} .feedback_topbanner_area {background:url("/edutube_img/manuscript_title.png") no-repeat center center; background-size:cover; padding:50px 0; width:100%; text-align:center; color:white;} .feedback_document {position:relative; margin:40px auto; width:1000px; margin-bottom:50px;} .feedback_document .step1 {widh:100%} .feedback_document .step2 {widh:100%} .feedback_title {font-size:13px; color:#32A085; border-bottom:2px solid #32A085; padding:10px 0;} .feedback_title .title_L {font-size:19px; font-weight:bold} .feedback_title .title_pc {color:#E58888} .feedback_document .step1 .contentbox {padding:30px 0 50px 0; width:100%;} .feedback_document .step1 .contentbox ul {border-bottom:1px solid #EBEBEB; padding:10px 0;} .feedback_document .step1 .contentbox li {display:inline-block;} .feedback_document .step1 .contentbox li .subtitle {display:inline-block; width:120px; height:30px} .feedback_document .step1 .contentbox li .info {display:inline-block; width:360px; height:30px; margin:0;} .feedback_document .step2 .contentbox {padding:30px 0; width:100%;} .feedback_document .step2 .guide{width:100%; padding:30px; background:#F5F5F5; margin-top:20px; box-sizing:border-box;} .feedback_document .step2 .guide li div {width:100%; padding:10px 0;} .feedback_document .step2 .guide li div {display:inline-block; width:120px;} .feedback_document .step3 .contentbox {padding:30px 0 50px 0; width:100%;} .feedback_document .step3 .contentbox ul {border-bottom:1px solid #EBEBEB; padding:10px 0;} .feedback_document .step3 .contentbox li{text-align:center;} .feedback_document .step3 .contentbox li .subtitle {display:inline-block; width:120px; height:30px;} .feedback_document .step3 .contentbox li .info1 {display:inline-block; width:620px; height:30px; padding:6px 0; cursor:pointer; text-align:left;} .feedback_document .step3 .contentbox li .info1 :hover {color:#32A085;} .feedback_document .step3 .contentbox li .info2 {display:inline-block; width:120px; height:30px; padding:6px 0;} .feedback_document .answer_click {color:#32A085;} .feedback_document .Q_input{display:block; padding:10px 10px; width:100%; min-height:200px; border:0; box-sizing:border-box; row="8"} .feedback_document .Q_clic{box-sizing:border-box; width:140px; padding:10px 0; margin:40px auto 0 auto; text-align:center; font-size:18px; border:2px solid #32A085; background-color:#32A085; color:#fff; border-radius:4px; cursor:pointer;} .feedback_document .Q_clic:hover {box-sizing:border-box; background-color:#fff; color:#32A085;} /******************************** 콘텐츠피드백 FIN */ /******************************** 콘텐츠피드백 에디트 */ .feededit_container {width:100%; font-family:'Noto Sans KR',sans-serif;} .feededit_container input {display:block; padding:0 30px; width:100%; height:40px; border:0; box-sizing:border-box; background-color:transparent} .feededit_document {position:relative; margin:40px auto; width:1000px; margin-bottom:50px;} .feededit_document .step2 {widh:100%} .feededit_document .title {font-size:13px; color:#32A085; border-bottom:2px solid #32A085; padding:10px 0;} .feededit_document .title .title_L {font-size:19px; font-weight:bold} .feededit_document .title .title_pc {color:#E58888} .feededit_document .step2 .guide{width:100%; padding:30px; background:#F5F5F5; margin-top:20px; box-sizing:border-box;} .feededit_document .step2 .guide li div {width:100%; padding:4px 0;} .feededit_document .step2 .guide li div {display:inline-block; width:120px;} .feededit_document .answer_title {font-size:16px; font-weight:bold;} .feededit_document .Q_input{display:block; padding:10px 10px; width:100%; min-height:200px; border:0; box-sizing:border-box; row="8"} .feededit_document .Q_clic{width:140px; padding:10px 0; margin:40px auto 0 auto; text-align:center; font-size:18px; background-color:#32A085; color:#fff; border-radius:4px; cursor:pointer;} /******************************** 콘텐츠피드백 에디트 FIIN */ /******************************** 스튜디오 렌탈 신청페이지 */ .studio_find_map {position:relative; width:1000px;} .studio_user_info {position:relative; width:1000px;} .studio_user_date {position:relative; width:1000px;} .service_date {display:table; width:100%; min-height:33.25rem; border:#555 solid 1px;} .service_date h4 {height:3.85rem; background:#555; color:#fff; font-size:1.2rem; text-align:center; font-weight:400; line-height:3.3;} .service_date:first-child h4 {border:none;} .service_date h4 i {font-size:0;} .service_date h4 i:before {content:"*"; display:inline-block; width:1rem; padding-left:0.2rem; font-weight:400; font-size:1.1rem; text-align:center; vertical-align:top;} .studio_user_date .sv_date, .sv_time, .sv_engineer, .sv_massage {display:table-cell; position:relative; background:#fff;} .studio_user_date .sv_date > p.t_error, .sv_time > p.t_error{position:absolute; width:100%; top:4rem; left:0; text-align:center;} /* 날짜 선택 */ /*.sv_time right_side {height:400px}*/ .studio_user_date .sv_date {width:80.5%;} .studio_user_date .sv_date > div {padding:0 1.3rem;} .cal_wrap {position:relative; } .cal_wrap:after {content:""; display:block; clear:both; height:0; visibility:hidden;} .cal_wrap > button {position:absolute; z-index:1; top:2.8rem; width:0.4rem; height:0.7rem; background:url(../images/common/splite_common.png) no-repeat; background-size:25rem auto; font-size:0;} .cal_wrap > button.prev {display:none; left:0; background-position:-15rem -12.5rem;} .cal_wrap > button.next {right:0; background-position:-17.5rem -12.5rem;} .cal_wrap > button.prev:hover, .cal_wrap > button.prev:focus {background-position:-15rem -15rem;} .cal_wrap > button.next:hover, .cal_wrap > button.next:focus {background-position:-17.5rem -15rem;} /******************************** 스튜디오 렌탈 신청페이지 FIN */ /******************************** 무료음원자료실 free_sounds */ #freesound_main {width:100%; min-height:400px;} #freesound_main span {cursor:auto;} #freesound_main .notice_top {width:100%; padding:50px 0; margin-bottom:20px; text-align:center; color:white; background:url("/edutube_img/top_background/update_free.png") no-repeat center center; background-size:cover;} #freesound_main .notice_container {width:1000px; margin:0 auto; font-family:'Noto Sans KR',sans-serif;} #freesound_main .notice_container .notice_content {width:100%; margin-bottom:20px;} #freesound_main .notice_container .notice_content .guide_box {box-sizing:border-box; padding:14px; width:100%; height:146px; background-color:#f3f3f3;} #freesound_main .notice_container .notice_content .guide_box .guide_title {font-size:18px; font-weight:bold; color:#72787c; margin:0; padding:0 0 10px 0;} #freesound_main .notice_container .notice_content .guide_box .guide_txt {font-size:15px; color:#a7a7a7; margin:0; padding:0 0 4px 0;} #freesound_main .notice_container .notice_content .btn_box {position:relative; width:100%; height:32px; margin:70px 0;} #freesound_main .notice_container .notice_content .btn_box .down_btn {position:absolute; box-sizing:border-box; width:126px; height:32px; line-height:32px; text-align:center; color:white; font-size:14px; cursor:pointer;} #freesound_main .notice_container .notice_content .btn_box .orange {right:0px; background-color:#ff5a00; font-weight:bold;} #freesound_main .notice_container .notice_content .btn_box .orange:hover {border:2px solid #000; background-color:#000; line-height:28px;} #freesound_main .notice_container .notice_content .sound_subtitle {width:100%; height:32px; margin-bottom:10px; background-color:#F3F3F3; text-align:center; color:#72787c;} #freesound_main .notice_container .notice_content .sound_subtitle .subtit {float:left; height:32px; line-height:32px;} #freesound_main .notice_container .notice_content .sound_notices {clear:both; display:block; width:100%;} #freesound_main .notice_container .notice_content .content_box {display:block; box-sizing:border-box; margin-bottom:10px; width:100%; height:70px; text-align:center; border:2px solid #F3F3F3;} #freesound_main .notice_container .notice_content .sound_notices .content_box .subcon {float:left; display:table; height:70px;} #freesound_main .notice_container .notice_content .subcon span {display:table-cell; vertical-align:middle;} #freesound_main .notice_container .notice_content .sub_idx {width:10%;} #freesound_main .notice_container .notice_content .sub_title {width:50%;} #freesound_main .notice_container .notice_content .sub_atmosphere {width:20%;} #freesound_main .notice_container .notice_content .sub_length {width:20%;} #freesound_main .notice_container .notice_content .sub_length span {display:inline-block; position:relative; width:100px; height:30px; top:20px; line-height:30px; color:#fff; background-color:#ff5a00; cursor:pointer;} #freesound_main .notice_container .notice_content .sub_length span:hover {background-color:#000;} /******************************** 무료음원자료실 free_sounds FIN */ /******************************** 업데이트강의 Update_main */ #update_main {width:100%; min-height:400px;} #update_main .update_top {width:100%; padding:50px 0; text-align:center; color:white; background:url("/edutube_img/top_background/update_free.png") no-repeat center center; background-size:cover;} #update_main .update_container {width:1000px; margin:0 auto; font-family:'Noto Sans KR',sans-serif;} #update_main .update_container .submenu_box {width:1000px; height:224px; margin:20px auto 50px auto;} #update_main .update_container .submenu_box .menu_txt {position:relative; box-sizing:border-box; width:1000px; height:60px; border-bottom:2px solid #cf1c1c;} #update_main .update_container .submenu_box .menu_txt .bold_txt {position:absolute; left:0px; bottom:20px; font-size:20px; font-weight:bold;} #update_main .update_container .submenu_box .menu_txt .herite_txt {position:absolute; left:182px; bottom:20px; font-size:14px;} #update_main .update_container .submenu_box .submenu {position:relative; width:1000px; height:160px;} #update_main .update_container .submenu_box .submenu ul {margin:0 auto; width:800px; height:160px;} #update_main .update_container .submenu_box .submenu ul li {position:relative; float:left; width:160px; height:160px; line-height:280px; text-align:center; font-size:18px; font-weight:bold; color:#424242; cursor:pointer;} #update_main .update_container .submenu_box .submenu ul li:nth-child(1) {background:url("/edutube_img/icon/update01.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(2) {background:url("/edutube_img/icon/update02.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(3) {background:url("/edutube_img/icon/update03.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(4) {background:url("/edutube_img/icon/update04.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(5) {background:url("/edutube_img/icon/update05.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(1).on {color:#cf1c1c; background:url("/edutube_img/icon/update01_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(2).on {color:#cf1c1c; background:url("/edutube_img/icon/update02_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(3).on {color:#cf1c1c; background:url("/edutube_img/icon/update03_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(4).on {color:#cf1c1c; background:url("/edutube_img/icon/update04_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(5).on {color:#cf1c1c; background:url("/edutube_img/icon/update05_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(1):hover {background:url("/edutube_img/icon/update01_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(2):hover {background:url("/edutube_img/icon/update02_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(3):hover {background:url("/edutube_img/icon/update03_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(4):hover {background:url("/edutube_img/icon/update04_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:nth-child(5):hover {background:url("/edutube_img/icon/update05_on.png") no-repeat center center;} #update_main .update_container .submenu_box .submenu ul li:hover {color:#cf1c1c;} #update_main .update_container .update_class {width:100%;} #update_main .update_container .update_class .class_box {position:relative; width:996px; height:153px; margin-bottom:17px; border:2px solid #fff; cursor:pointer;} #update_main .update_container .update_class .class_box:hover {border:2px solid #000;} #update_main .update_container .update_class .class_box .img_box {position:absolute; top:0px; left:0px; width:272px; height:153px;} #update_main .update_container .update_class .class_box .txt_box {position:absolute; top:0px; right:0px; width:708px; height:153px;} #update_main .update_container .update_class .class_box .txt_box .class_title {font-size:18px; font-weight:bold;} #update_main .update_container .update_class .class_box .txt_box .class_sub {font-size:14px; color:#7b7b7b; margin-bottom:10px;} #update_main .update_container .update_class .class_box .txt_box .class_min {font-size:14px; color:#7b7b7b;} #update_main .update_container .update_class .class_box:hover .txt_box .class_title {text-decoration:underline;} #update_main .update_container .update_class .class_box:hover .txt_box .class_sub {color:black;} #update_main .update_container .update_class .class_box:hover .txt_box .class_min {color:black;} /******************************** 업데이트강의 Update_main FIN */ /******** feedback_pager 페이저 */ .feedback_pager {padding-left: 0; margin:20px 0; list-style: none; text-align: center;} .feedback_pager li {display: inline;} .feedback_pager li > a {display:inline-block; padding:5px 14px; background-color: #fff; border: 1px solid #ddd;} .feedback_pager .pagination2 {display:inline-block; padding-left:0; margin:20px 0; border-radius:4px;} .feedback_pager .pagination2 > li {display:inline;} .feedback_pager .pagination2 > li > a {position:relative; float:left; padding:2px 12px; line-height:1.42857143; text-decoration:none; color:#fff; background-color: #32A085; border:1px solid #ddd; margin-left: -1px;} .feedback_pager .pagination2 > li.selected > a {background-color:#fff; color:#32A085;} .feedback_pager .pagination2 > li:hover > a {background-color:#fff; color:#32A085;} .hidden {display:none!important; visibility:hidden!important;} /******** feedback_pager 페이저 */ /******** notice 페이저 */ .notice_pager {padding-left: 0; margin:20px 0; list-style: none; text-align: center;} .notice_pager li {display: inline;} .notice_pager li > a {display:inline-block; padding:5px 14px; background-color: #fff; border: 1px solid #ddd;} .notice_pager .pagination2 {display:inline-block; padding-left:0; margin:20px 0; border-radius:4px;} .notice_pager .pagination2 > li {display:inline;} .notice_pager .pagination2 > li > a {position:relative; float:left; padding:2px 12px; line-height:1.42857143; text-decoration:none; color:#fff; background-color: #770b0b; border:1px solid #ddd; margin-left: -1px;} .notice_pager .pagination2 > li.selected > a {background-color:#fff; color:#770b0b;} .notice_pager .pagination2 > li:hover > a {background-color:#fff; color:#770b0b;} .hidden {display:none!important; visibility:hidden!important;} /******** notice 페이저 */ /******** QnA 페이저 */ .qna_pager {padding-left: 0; margin:20px 0; list-style: none; text-align: center;} .qna_pager .qna_pager li {display: inline;} .qna_pager .qna_pager li > a, .pager li > span {display:inline-block; padding:5px 14px; background-color: #fff; border: 1px solid #ddd;} .qna_pager .pagination2 {display:inline-block; padding-left:0; margin:20px 0; border-radius:4px;} .qna_pager .pagination2 > li {display:inline;} .qna_pager .pagination2 > li > a {position:relative; float:left; padding:2px 12px; line-height:1.42857143; text-decoration:none; color:#fff; background-color: #ff0015; border:1px solid #ddd; margin-left: -1px;} .qna_pager .pagination2 > li.selected > a {background-color:#fff; color:#ff0015;} .qna_pager .pagination2 > li:hover > a {background-color:#fff; color:#ff0015;} .hidden {display:none!important; visibility:hidden!important;} /******** QnA 페이저 */ /* 20200723 팝업페이지 */ #event_div {width:100%; margin:0 padding:0; text-align:center;} #event_div .img_div {width:1000px; margin:0 auto;} #event_div .img_div ul {width:100%;} #event_div .img_div li {padding:0; margin:0; line-height:0;} .floor_main_str .tmp_popup_div {width:470px; height:620px; position:absolute; z-index:999999; top:10px; left:20px; border:2px solid #CCC; background-color:#fff;} .floor_main_str .tmp_popup_div .popup_area {width:100%; height:100%; position:relative;} .floor_main_str .tmp_popup_div .popup_area .bottom_div {width:100%; padding:4px 0; position:relative;} .floor_main_str .tmp_popup_div .popup_area .popup_close_top {width:26px; height:26px; background:url("/edutube_img/footer/menu_x.png") no-repeat center center; background-size:cover; color:#fff; position:absolute; right:0px; top:0px; font-size:26px; font-weight:600; letter-spacing:-0.05em; cursor:pointer;} .floor_main_str .tmp_popup_div .popup_area .bottom_div .popup_close {padding:5px 15px; background-color:#cf1c1c; color:#fff; position:absolute; right:10px; font-size:12px; font-weight:600; letter-spacing:-0.05em; cursor:pointer;} .floor_main_str .tmp_popup_div .popup_area .bottom_div .popup_text {position:absolute; top:8px; right:75px; font-size:12px; font-weight:600; letter-spacing:-0.05em; cursor:pointer;} .floor_main_str .tmp_popup_div .popup_area .bottom_div .popup_text input {vertical-align:middle; cursor:pointer;} /* 20200723 팝업페이지 FIN */ /* 제휴문의 팝업 alliance.php */ #alliance_container {width:100%;} #alliance_container .a_tutle {position:relative; left:0; top:0; width:600px; height:134px; background:url("/edutube_img/footer/top.png");} #alliance_container .alliance_table {position:relative; width:600px; left:0; top:0;} #alliance_container .alliance_table ul {width:100%;} #alliance_container .alliance_table ul li {width:100%; height:40px; padding:10px 0; line-height:40px;} #alliance_container .alliance_table .all_subtitle {float:left; width:100px; height:40px;} #alliance_container .alliance_table .all_subtitle_long {float:left; width:100%; height:40px;} #alliance_container .alliance_table .tx {float:left; left:20px; width:480px; height:30px; margin-top:4px; border:1px solid black;} #alliance_container .alliance_table .tx:after {clear:both;} #alliance_container .alliance_table .tx_mail {display:inline-block; width:160px; height:30px; margin-top:4px; border:1px solid black;} #alliance_container .alliance_table .tx_mailQ {display:inline-block; width:14px; height:30px; margin-top:4px;} #alliance_container .alliance_table .tx_mail_select {display:inline-block; width:120px; height:34px; margin-top:4px; border:1px solid black;} #alliance_container .alliance_table .tx_area {float:right; position:relative; right:14px; width:480px; height:120px; margin-top:4px; border:1px solid black;} #alliance_container .alliance_table .tx_area:after {clear:both;} #alliance_container .alliance_table .alliance_btn {position:relative; width:100px; height:23px; margin:20px auto;} #alliance_container .alliance_table .alliance_btn ul {display:table; position:relative; height:23px;} #alliance_container .alliance_table .alliance_btn li {display:table-cell; width:auto; top:0px; height:23px; cursor:pointer; background:url("/edutube_img/footer/icon_ok.gif") no-repeat;} /* 제휴문의 팝업 alliance.php FIN */ #left_banner {float:left; width:219px; height:auto; margin-right:31px; font-family:'Noto Sans KR',sans-serif;} #left_banner .left01 {position:relative; box-sizing:border-box; width:100%; height:223px; border:1px solid #ccc; margin-bottom:10px;} #left_banner .left02 {position:relative; box-sizing:border-box; width:100%; height:234px; border:1px solid #ccc;} #left_banner .left01 ul li {position:absolute;} #left_banner .left01 ul li:nth-child(1) {display:block; width:calc(100% - 20px); left:10px; top:0; height:40px; line-height:40px; border-bottom:1px solid #ccc; font-size:18px; font-weight:bold;} #left_banner .left01 ul li:nth-child(2) {top:47px; width:100%; text-align:center; font-size:26px; font-weight:bold;} #left_banner .left01 ul li:nth-child(3) {top:95px; width:100%; text-align:center; font-size:12px;} #left_banner .left01 ul li:nth-child(4) {top:125px; width:100%; text-align:center; font-size:12px;} #left_banner .left01 ul li:nth-child(5) {top:142px; width:100%; text-align:center; font-size:12px;} #left_banner .left01 .coupon, #left_banner .left01 .oneone {position:absolute; box-sizing:border-box; bottom:0px; width:50%; height:47px; line-height:47px; border-top:1px solid #ccc; background-color:#eee; text-align:center; font-size:12px;} #left_banner .left01 .coupon {left:0px;} #left_banner .left01 .coupon .icon {position:absolute; left:16px; top:6px; width:35px; height:35px; background:url('/edutube_img/signup/icon_coupon.png') no-repeat center center;} #left_banner .left01 .oneone {position:absolute; right:0px; border-left:1px solid #ccc;} #left_banner .left01 .oneone .icon {position:absolute; left:16px; top:6px; width:35px; height:35px; background:url('/edutube_img/signup/icon_oneone.png') no-repeat center center;} #left_banner .left01 span {position:absolute; right:22px; line-height:45px; color:#222; font-size:16px; font-weight:bold;} #left_banner .left01 .coupon:hover {background-color:#222;} #left_banner .left01 .coupon:hover span {color:#eee;} #left_banner .left01 .oneone:hover {background-color:#222;} #left_banner .left01 .oneone:hover span {color:#eee;} #left_banner .left02 .account_title {position:relative; box-sizing:border-box; width:100%; height:40px; font-size:18px; font-weight:bold; background-color:transparent; border:none;} #left_banner .left02 .account_title ul {box-sizing:border-box; width:100%; height:100%;} #left_banner .left02 .account_title ul li {position:absolute; left:18px;} #left_banner .left02 .account_title ul li:nth-child(1) {display:block; left:10px; top:0; width:calc(100% - 20px); height:100%; line-height:40px; font-size:18px; border-bottom:1px solid #ccc;} #left_banner .left02 .account_title ul li:nth-child(2) {padding:6px 10px; left:125px; top:4px; border-radius:20px; color:#fff; background-color:#272e40; cursor:pointer;} #left_banner .left02 .account_title ul li:nth-child(2):hover {background-color:#133281;} #left_banner .left02 .account_num {position:relative; width:100%;} #left_banner .left02 .account_num ul li {position:absolute; width:100%; text-align:center;} #left_banner .left02 .account_num ul li span {color:#ff5526;} #left_banner .left02 .account_num ul li:nth-child(1) {top:24px;} #left_banner .left02 .account_num ul li:nth-child(2) {top:52px;} #left_banner .left02 .account_num ul li:nth-child(3) {top:78px;} #left_banner .left02 .account_num ul li:nth-child(4) {top:124px; font-size:14px;} #left_banner .left02 .account_num ul li:nth-child(5) {top:144px; font-size:14px;} /* 왼쪽베너 left_banner FIN */ .clear_box {display:block; content:''; clear:both;}