.pop-width { padding: 0 4%; } .pop-book-detail { padding: 15px 2%; } /* [ header ] */ #me-header { height: 80px; background: transparent; position: relative; z-index: 999; background-color: #fff; } #me-header > div > div { float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } #me-header > div > div:nth-of-type(1) { width: 30%; } #me-header > div > div:nth-of-type(2) { width: 40%; margin-top: 24px; } #me-header > div > div:nth-of-type(2) .form-control { padding: 10px 10px 10px 20px; height: 36px; border-radius: 20px 0 0 20px; } #me-header > div > div:nth-of-type(2) button { padding: 6px 12; height: 36px; border-radius: 0 20px 20px 0; } #me-header > div > div:nth-of-type(3) { width: 30%; } #me-header > div > div > a > h2 { font-family: "Helvetica Neue", Helvetica, Arial, 'Nanum Gothic', 'Jeju Gothic', sans-serif, 'Jeju Myeongjo', serif, ; color: #FFBB00; font-weight: 800; font-size: 38px; margin: 10px 0 0; padding: 0; } #me-header > div > div > a:hover, #me-header > div > div > a:hover > h2 { text-decoration: none; color: #E9AB00; } #me-header.header-transparent .me-menu a { color: #fff; } #me-header.header-transparent .me-menu a.active, #me-header.header-transparent .me-menu a.current, #me-header.header-transparent .me-menu a:hover, #me-header.header-transparent .me-menu a:focus, #me-header.header-transparent .me-menu a:active, #me-header.header-transparent .me-menu a.highlighted { color: #045AA8; } #me-header.header-transparent .me-menu ul a { color: #7b7b7b; } #me-header.header-transparent .member-header { border-color: #adaea9; } #me-header.header-transparent .member-header a { color: #fff; } #me-header.header-transparent .member-header a:hover { color: #045AA8; } #me-header.header-transparent .social-header { border-color: #adaea9; } #me-header.header-transparent .social-header a { color: #cfcfcc; } #me-header.header-transparent .social-header a:hover { color: #fff; } .header-logo { text-align: center; } .logo-container { padding-top: 0; display: inline-block; } /* .logo-container img { width: 161px; height: 34px; } */ .logo-container a { text-align: right; } .logo-container a h2 { color: #000; font-size: 24px; font-weight: 600; margin-top: 25px; margin-bottom: 0; } .logo-container a span { clear: both; display:inline-block; color: #ccc; font-size: 12px; font-weight: 700; font-family: 'Nanum Gothic', sans-serif; } .header-menu-hide { display:none; } .header-menu { position:relative; width:100%; padding: 0 0; margin-top: 40px; background: transparent; z-index:9; } .header-menu > ul { } .header-menu > ul > li { display:inline-block; } .header-menu > ul > li > a, .header-menu > ul > li > .btn-group > a { font-size: 13px; color: #999; text-decoration: none; margin-left: 18px; font-weight: 600; } .header-menu > ul > li > a:hover, .header-menu > ul > li > .btn-group > a:hover { color: #333; } .header-menu > ul > li > a > i { font-size: 17px; padding-right: 5px; text-decoration: none; } .header-menu > ul > li > span { font-size: 11px; padding: 0 4px; color: #ddd; } .header-menu > ul > li.ts-login a { color: #f10; } .header-nav { position: relative; width:100%; height: 40px; padding: 0; background: transparent; z-index:9; } .header-nav a, .header-nav a:hover { font-size: 17px; font-weight: 600; text-decoration: none; } .header-nav ul { display:block; } .header-nav ul:before, .header-nav ul:after { content:""; display: table; } .header-nav ul:after { clear:both; } * html .header-nav ul, .header-nav ul { zoom:1; } /* .header-nav ul li { display: inline-block; padding: 5px 30px 5px; letter-spacing:normal; white-space:normal; } .header-nav ul li a { position:relative; padding: 5px 10px 2px; color:#D4EBFF; font-size: 16px; display:inline-block; z-index:10; } .header-nav ul li a:hover { background: transparent; color: #FFF; } .header-nav ul li.current a { color:#fff; background-color: #025299; -webkit-border-radius: 3px; border-radius: 3px; } */ .header-nav ul li { float: left; position: relative; padding: 0 0; letter-spacing: normal; white-space: normal; } /* .header-nav ul li { display: inline-block; padding: 5px 30px 5px; letter-spacing:normal; white-space:normal; } */ .header-nav > ul > li > a { float: left; position: relative; height: 46px; padding: 10px 30px; color: #FFF; font-weight: 700; text-decoration: none; } /* .header-nav > ul > li > a, .header-nav > ul > li > ul > li > a { width: 160px; text-align: center; } .header-nav > ul > li + li + li + li + li + li > a, .header-nav > ul > li + li + li + li + li + li > ul > li > a { width: 132px; text-align: center; } .header-nav > ul > li + li + li + li + li + li + li > a, .header-nav > ul > li + li + li + li + li + li + li > ul > li > a { width: 124px; text-align: center; } */ .header-nav ul li a:hover, .header-nav ul li.current a { background-color: #E9AB00; } .header-nav ul li.on a { z-index:11; color:#000; background-color:#fff; } .header-nav li ul { display:none; } .header-nav li.on ul { z-index: 9999; position: absolute; top: 40px; left: -1px; padding: 0 0; background-color: #fff; display: block; border: 1px solid #FFBB00; } .header-nav li.on ul li { float:none; } .header-nav li.on ul li a { font-size:13px; letter-spacing: -1px; color: #666; background-color: #FFF; padding: 10px 5px; font-weight: normal; display: block; } .header-nav li.on ul li a span { font-size:12px; } .header-nav li li.current a , .header-nav li.on ul li a:hover, .header-nav li.on ul li a:focus { color: #FFF; background-color: #FFBB00; } .header-nav li ul li ul { border: 1px solid #FFBB00; } .header-nav li.on ul li ul { left:150px; top:-10px; } .header-nav ul li ul li.current a { color: #FFF; background-color: #FFBB00; } /* IE7 */ *:first-child+html .header-nav ul li a { display:inline; zoom:1; } *:first-child+html .header-nav ul li ul li { height:1%; } *:first-child+html .header-nav ul li ul li a { display:block; } /* IE6 */ * html .header-nav ul li a { display:inline; zoom:1; } * html .header-nav ul li ul li { height:1%; } * html .header-nav ul li ul li a { display:block; } a.header-mobile-nav { display: none; } #location { display:none; } #me-navigation > div.row > div.hidden-header { display: none; } .location { position: relative; background-color: #FFBB00; border-top: 1px solid #ddd; border-bottom: 1px solid #FFBB00; } /* .location { position: relative; height: 40px; z-index: 1; padding: 0 10px; } // .location .root { float: right; font-size: 100%; padding: 25px 10px 0; color: #777; } // .location .root span.arrow { color: #bbb; padding: 0 5px; } */ .breadcrumb { border-bottom: 1px solid #E5E5E5; } .breadcrumb > div > ul { padding: 0; margin:0; background: transparent; } .breadcrumb > div > ul > li { display:inline-block; list-style: none; font-weight:normal; font-size: 13px; border-left: 1px solid #E5E5E5; padding: 12px 20px; } .breadcrumb > div > ul > li.home { margin: 0; padding: 11px 20px 11px; } .breadcrumb > div > ul > li.home > a > i { font-size: 15px; margin: 0; padding: 0; } .breadcrumb > div > ul > li > a { color:#999 } .breadcrumb > div > ul > li > a:hover { color:#000 } /* .breadcrumb ul > li + li:before { content:"/\00a0"; padding:0 8px; color:#bbb; } */ /* // .location ul>li:first-child>a{ color: #000; background:url('/admin/images/interface/breadcrumb_home.png') no-repeat 0; padding-left:16px } */ .breadcrumb > div > ul > li.arrow { color:#bbb; padding: 0 6px } .breadcrumb > div > ul > li:last-child, .breadcrumb > div > ul > li:last-child > a { color:#555; font-weight: 800; } @media all and (max-width: 767px){ .breadcrumb > div > ul > li { padding: 12px 10px; } .breadcrumb > div > ul > li.home { padding: 11px 10px; } } @media all and (max-width: 992px){ #me-header { display:none; } .header-logo { text-align: center; } .logo-container a h2 { margin-top: 0; margin-left: 14px; text-align: center; } .logo-container a span { margin-left: 14px; } #me-navigation { border-bottom: 1px solid #fff; } #me-navigation > div.row > div.hidden-header { display:block; height: 50px; } #me-navigation > div.row > div.hidden-header > a > img { padding: 10px 20px; } .header-menu { display:none; } a.header-mobile-nav { display:block; position: absolute; width: 70px; height: 40px; right: 0; top: 0; font-size: 40px; background: #FFBB00; padding: 0 5px 0; text-align: center; } a.header-mobile-nav > i { color: #fff; font-size: 32px; margin: 0; padding: 9px 0 0; vertical-align: top; } a.header-mobile-nav:focus > i { color: #000; } .header-menu-hide { display:block; padding: 8px 5px 14px; background: #FFFFFF; border-bottom: 1px solid #DDDDDD; } .header-menu-hide > div { display:inline-block; margin-left: 5px; margin-top: 5px; padding: 0; } .header-menu-hide > div > a.btn { font-size: 14px; font-weight: 600; color: #666666; background-color: #FFFFFF; border: 2px solid #CCCCCC; padding: 5px 12px; border-radius: 6px; margin-right: 4px; } .header-menu-hide > div > a.btn:last-child { margin-right: 0; } .header-menu-hide > div > a.btn.logout { color: #333333; } .header-menu-hide > div > a.btn.logout > i { color: #FF1100; } .header-menu-hide > div > a.btn.logout:hover, .header-menu-hide > div > a.btn.logout:focus, .header-menu-hide > div > a.btn.logout:active { color: #FF6600; } .header-menu-hide > div > a.btn > i { font-size: 16px; margin-left: 12px; padding: 6px 0 6px 10px; border-left: 1px solid #DDDDDD; color: #999999; } .header-menu-hide > div > a.btn:hover, .header-menu-hide > div > a.btn:focus, .header-menu-hide > div > a.btn:active { color: #FFBB00; background-color: #FFFFFF; border-color: #BBBBBB; } .header-menu-hide > div > a.btn:hover > i, .header-menu-hide > div > a.btn:focus > i, .header-menu-hide > div > a.btn:active > i { color: #333333; } .header-menu-hide > div + div { display:inline-block; margin-left: 5px; margin-top: 5px; padding: 0; } .header-menu-hide > div + div > a.btn { font-size: 14px; font-weight: 600; color: #FFFFFF; background-color: #FFBB00; border: 2px solid #0099CC; padding: 5px 12px; border-radius: 6px; margin-right: 4px; } .header-menu-hide > div + div > a.btn:hover, .header-menu-hide > div + div > a.btn:focus, .header-menu-hide > div + div > a.btn:active { background-color: #0099CC; border: 2px solid #008CBA; color: #FFFFFF; } .header-menu-hide > div + div > a.btn:last-child { margin-right: 0; } .header-menu-hide > div + div > a.btn > i, .header-menu-hide > div + div > a.btn:hover > i { border-left: 1px solid #49CAFF; color: #FFFFFF; } .header-nav { font-family: 'Nanum Gothic', sans-serif; display: none; position: block; width: 100%; height: auto; background: #fff; padding-top: 1px; margin: 0; } .header-nav ul { display: block; width:100%; margin: 0; padding: 0; } .header-nav ul li { width: 100%; border-bottom: 1px solid #DFDFDF; margin: 0; padding: 0; } .header-nav > ul > li:last-child { display: block; } .header-nav ul li a { display: block; width: 100%; font-size: 18px; color: #444; font-weight: 700; padding: 15px 35px 40px; border: 0; margin: 0; text-align: left; } .header-nav ul li a:hover { color: #333; font-size: 18px; } .header-nav > ul > li > a, .header-nav > ul > li > ul > li > a { width: 100%; } .header-nav > ul > li > ul > li > a:last-child { width: 100%; } .header-nav > ul > li > a, .header-nav > ul > li > ul > li > a, .header-nav > ul > li + li + li + li + li + li > a, .header-nav > ul > li + li + li + li + li + li > ul > li > a, .header-nav > ul > li + li + li + li + li + li + li > a, .header-nav > ul > li + li + li + li + li + li + li > ul > li > a { width: 100%; text-align: left; } .header-nav ul li.current a, .header-nav ul li ul li.current a { color: #0098D6; background-color: #FFF; } .header-nav ul li.current a:hover, .header-nav ul li ul li.current a:hover { display: block; width: 100%; border: none; color: #fff; text-decoration: none; background-color: #FFBB00; } .header-nav ul li.on { display: block; width: 100%; border: none; } .header-nav ul li.on a { display: block; width: 100%; border: none; color: #fff; text-decoration: none; background-color: #FFBB00; } .header-nav li.on ul { display: inline-block; position: relative; top: 0; left: 0; border: none; border-bottom: 1px solid #FFBB00; } .header-nav li.on ul li { display: block; width:100%; border: none; } .header-nav li.on ul li a { padding: 14px 45px; color: #444; font-size: 15px; font-weight: 700; border: 0; display: block; border-top: 1px solid #eee; letter-spacing: 0; } .header-nav li.on ul li a:hover { color: #FFF; } #location { display:inline-block; position: relative; left: 71px; top: 0; height: auto; margin: 0; } #location > li { display:inline-block; text-align:center; font-size: 12px; color: #fff; border-right: 1px solid #2E6A9E; height: 0; padding: 16px 30px 30px; margin: 0; } #location > li > a { color: #CDCCC8; } #location > li > a:hover { color: #fff; } #location > li > span { color: #fff; font-weight: 800; } } @media all and (max-width: 480px){ .header-menu-hide > div > a.btn { font-size: 13px; padding: 5px 8px; } } .header-default-nav { position:relative; width:100%; border-bottom:1px solid #000000; background-color:#2d2d2d; z-index:1; } .header-default-nav ul { margin:0 auto; letter-spacing:-4px; white-space:-4px; } .header-default-nav ul:before, .header-default-nav ul:after { content:""; display:table; } .header-default-nav ul:after { clear:both; } * html .header-default-nav ul { zoom:1; } .header-default-nav ul { zoom:1; } .header-default-nav ul li { float:left; position:relative; letter-spacing:normal; white-space:normal; } .header-default-nav ul li a { position:relative; padding:2px 6px 0 6px; line-height:27px; height:27px; color:#cccccc; text-decoration:none; display:inline-block; } .header-default-nav ul li a:hover { background-color:#4c4c4c; } .header-default-nav ul li a.iconsub { padding-right:17px; background-image:url(./icon_arrow.gif); background-repeat:no-repeat; background-position:right 14px; } .header-default-nav ul li.current a { padding-top:0; color:#fff; font-weight:bold; border-top:2px solid #dd4b39; } .header-default-nav ul li.current a.iconsub { background-position:right 12px; } .header-default-nav ul li.on a { padding-left:5px; padding-right:5px;color:#3366cc; border-left:1px solid #bebebe; border-right:1px solid #bebebe; background-color:#fff; z-index:2; } .header-default-nav ul li.on a:hover { background-color:#fff; } .header-default-nav ul li.on a.iconsub { padding-right:16px; } .header-default-nav li ul { display:none; } .header-default-nav li.on ul { position:absolute; top:28px; left:0px; width:160px; padding:10px 0; border:1px solid #bebebe; background-color:#fff; display:block; } .header-default-nav li.on ul li { float:none; } .header-default-nav li.on ul li a { padding:0 16px; color:#3366cc; font-weight:normal; border-top:none; border-left:none; border-right:none; display:block; } .header-default-nav li.on ul li a:hover, .header-default-nav li.on ul li a:focus { background-color:#eff3fb; } .header-default-nav li.on ul li ul { left:150px; top:-10px; } /* IE7 */ *:first-child+html .header-default-nav ul li a { display:inline; zoom:1; } *:first-child+html .header-default-nav ul li ul li { height:1%; } *:first-child+html .header-default-nav ul li ul li a { display:block; } /* IE6 */ * html .header-default-nav ul li a { display:inline; zoom:1; } * html .header-default-nav ul li ul li { height:1%; } * html .header-default-nav ul li ul li a { display:block; } .header-default-nav ul { width:950px; } a.header_mobile_totalMenu { position:absolute; width:49px; height:49px; left:10px; top:10px; font-size:0; text-indent:-5000px; background:url(./icon_totalmenu.gif) no-repeat left top; display:none; } @media all and (max-width:500px){ .header-default-nav { position:absolute; left:0; top:0; width:260px; min-height:480px; border-bottom:0; z-index:1; display:none; } .header-default-nav ul { width:100%; } .header-default-nav ul { padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .header-default-nav ul li { float:none; } .header-default-nav ul li a { display:block; font-size:1.1em; line-height:32px; height:32px; } .header-default-nav ul li.current a.iconsub { border-top:none; border-left:2px solid #DD4B39; } .header-default-nav ul li.current ul { border-left:2px solid #DD4B39; } .header-default-nav ul li a { padding-left:12px; } .header-default-nav ul li.on a { padding-left:12px; border:none; } .header-default-nav ul li.on a:hover { background-color:#fff; } .header-default-nav ul li.on a.iconsub { padding-right:16px; } .header-default-nav li.on ul { width:100%; position:relative; top:0; left:0; border:none; } .header-default-nav li.on ul li { float:none; } .header-default-nav li.on ul li a { padding:0 16px; color:#3366cc; font-weight:normal; border-top:none; border-left:none; border-right:none; display:block; } .header-default-nav li.on ul li a:hover { background-color:#eff3fb; } a.header_mobile_totalMenu { color:#fff; display:block; } } .col-left { float: left; width: 22%; } .col-main { float: right; width: 76%; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } /* ##################### 서브 좌측메뉴 ######################## */ .sub-nav { display: block; background-color: #FFFFFF; border: 1px solid #DEDCDD; } .sub-nav > h1 { font-size: 26px; font-weight: 700; color: #FFFFFF; text-align: center; padding: 15px 0; margin: 0; background-color: #FFBB00; } .sub-nav > ul { font-size: 15px; margin: 0; padding: 0; } .sub-nav > ul > li { display: block; border-top: 1px solid #DEDCDD; margin: 0; } .sub-nav > ul > li > a { display: block; color: #666; padding: 10px 10px 12px 14px; margin: 0; font-weight: 600; } .sub-nav > ul > li.current > a { font-weight: 700; color: #FE9900; } .sub-nav > ul > li.current > a > i { float: right; color: #FE9900; } .sub-nav > ul > li > ul { margin: 0; padding: 7px 0; border-top: 1px solid #EEEEEE; background-color: #FCFCFC; } .sub-nav > ul > li > ul > li { border: 0; margin-left: 35px; padding-left: 0; list-style-type: disc; font-size: 10px; } .sub-nav > ul > li > ul > li > a { display: block; color: #666; font-size: 13px; font-weight: normal; padding: 3px 0; margin: 0; } .sub-nav > ul > li > ul > li.current, .sub-nav > ul > li > ul > li.current > a { font-weight: 700; color: #FE9900; } /* ##################### 서브 좌측메뉴 ######################## */ .sub-content p { color: #777; margin: 20px 0; line-height: 155%; } @media all and (max-width: 992px){ .col-left { display: none; } .col-main { float: none; display: block; width: 100%; } .sub-content { padding: 0 15px; } } @media all and (max-width: 480px){ .sub-content { padding: 0 25px; } } .main-title > h1 { margin: 0 0 20px; padding: 0 0 10px 10px; font-size: 36px; border-bottom: 1px solid #DDDDDD; color: #333333; } @media all and (max-width: 992px){ .main-title > h1 { margin-bottom: 20px; font-size: 30px; } } @media all and (max-width: 480px){ .main-title > h1 { margin-bottom: 20px; font-size: 24px; } } .main-title2 > h1 { margin: 0; padding: 0 0 10px 10px; font-size: 36px; color: #333333; } @media all and (max-width: 992px){ .main-title2 > h1 { margin-bottom: 8px; font-size: 30px; } } @media all and (max-width: 480px){ .main-title2 > h1 { margin-bottom: 8px; font-size: 24px; } } .content-books-list { margin-left: -5px; margin-right: -5px; } .content-books-list > div { float: left; position: relative; display:inline-block; min-height: 1px; padding-right: 5px; padding-left: 5px; width: 25%; height: 240px; text-align: center; } .content-books-list > div > h5 { margin: 4px 0 0; font-size: 12px; font-weight: 800; line-height: 100%; } .content-books-list > div > p { margin: 0; padding: 0; } .content-books-list > div > p > span, .content-books-list > div > p > a > span { padding: 2px 5px; color: #999999; border: 2px solid #999999; font-size: 10px; font-weight: 800; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; } .content-books-list > div > h5 > span.copyright, .content-books-list > div > p > span.copyright { color: #FF1100; border: 2px solid #FF1100; } .content-books-list > div > h5 > span.series, .content-books-list > div > p > span.series { color: #FE9900; border: 2px solid #FE9900; } .content-books-list > div > h5 > span.quiz, .content-books-list > div > p > span.quiz { color: #0066FF; border: 2px solid #0066FF; } .content-books-list > div > p > span.tpage, .content-books-list > div > p > a > span.tpage { color: #FFAA00; border: 2px solid #FFAA00; } .content-books-list > div > p > span.ws, .content-books-list > div > p > a > span.ws { color: #21ACFF; border: 2px solid #21ACFF; } .content-books-list > div > p > span.video, .content-books-list > div > p > a > span.video { color: #00A650; border: 2px solid #00A650; } .content-books-list > div > p > a:hover { text-decoration: none; } .content-books-view-info { display: block; text-align: center; } .content-books-view { display: block; text-align: center; } .content-books-view > div.vcnt1 > div { display: block; text-align: center; } .content-books-view > div.vcnt2 > div { float: left; position: relative; min-height: 1px; padding-right: 0; padding-left: 0; width: 50%; text-align: center; } .content-books-comment { min-height: 20px; padding: 8px 20px 8px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } .content-books-comment > div:first-child { font-size: 20px; line-height: 1.5em; } .content-books-info { min-height: 20px; padding: 8px 20px 8px; background-color: #FCFCFC; border: 1px solid #DDDDDD; border-radius: 4px; font-size: 12px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .content-books-info > .col-fxl-4 { padding: 0 15px; } .content-books-info > .col-fxl-4 > h5 { margin: 7px 0; padding: 0; } .content-books-info > .col-fxl-4 > p { margin: 4px 0; padding: 0; } .content-books-info > .col-fxl-4:nth-of-type(2) { border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; max-height: 150px; overflow-y: auto; } .content-books-info > .col-fxl-4:nth-of-type(2) > p { margin: 0; padding: 0; } span.books-copyright { padding: 2px 4px; color: #FF1100; border: 2px solid #FF1100; font-size: 10px; font-weight: 800; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } span.books-copyright.lager { padding: 4px 8px; color: #FF1100; border: 2px solid #FF1100; font-size: 12px; } span.books-copyright.off { color: #FF1100; border: 2px solid #FF1100; } span.books-copyright.on { color: #ECAD00; border: 2px solid #ECAD00; } @media all and (max-width: 481px){ .content-books-info { padding: 12px 10px; } .content-books-info > .col-fxl-4 { padding: 0 8px; } .content-books-info > .col-fxl-4:nth-of-type(2) { border: 0; height: auto; } .content-books-info > .col-fxl-4 > h5 { margin: 0; padding: 0; } .content-books-info > .col-fxl-4 > p { margin: 4px 0; padding: 0; } } .default-panel { padding: 10px; border: 1px solid #dedede; background: transparent; } .default-panel * { z-index: 2; position: relative; } .default-panel .panel-icon { position: absolute; right: 28px; bottom: 28px; z-index: 1; } .default-panel .panel-icon i { color: #f5f5f5; font-size: 171px; } .default-panel .list-circle-check { margin-bottom: 0; } .default-panel .list-circle-check li:before { color: #fff; } .default-panel h5 { line-height: 1.1; } .default-panel > h5 > a { color: #333; } .default-panel > h5 > a > i { float: right; font-size: 140%; font-weight: normal; margin-top: -3px; } .default-panel > h5 > a > i:hover { color: #f60; } .main-default-panel { padding: 4px 19px 19px; } .sub-title{ margin-top: 10px; margin-bottom: 20px; border-bottom: 2px solid #FFBB00; } .sub-title > h3 { font-size: 24px; color: #444444; } .sub-title > h3 > small { float: right; font-size: 15px; color: #999999; margin-top: 14px; } .sub-title > h3 > small > em { color: #FF6600; font-style: normal; } .sub-title > h6 { font-size: 14px; color: #999999; font-weight: normal; } @media all and (max-width: 992px){ .sub-title > h3 { margin-top: 0; margin-bottom: 20px; font-size: 18px; } .sub-title > h3 > small { float: none; display: block; font-size: 13px; } } .jq-detail-list { position:relative; width:100%; padding: 0 0; margin-top: 10px; background: transparent; } .jq-detail-list > ul { } /* .jq-detail-list > ul > li { display:inline-block; width: 19.56%; border: 2px solid #EEEEEE; margin-bottom: 3px; } */ .jq-detail-list > ul > li { float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; margin-bottom: 5px; width: 20%; } .jq-detail-list > ul > li > a { float: left; border: 2px solid #EEEEEE; } .jq-detail-list > ul > li > a > span { float: left; position: absolute; width: 17px; height: 17px; background-color: #111111; font-size: 12px; font-weight: 800; color: #FFFFFF; text-align: center; opacity:.8; filter:alpha(Opacity=80); z-index: 3; } .jq-detail-list > ul > li > a > img { width: 100%; } .jq-page-list { position:relative; width:100%; padding: 0 0; margin-top: 10px; background: transparent; } .jq-page-list > ul { } .jq-page-list > ul > li { display:inline-block; width: 50px; border: 2px solid #EEEEEE; margin-bottom: 3px; } .jq-page-list > ul > li > a > span { float: left; position: absolute; width: 22px; height: 17px; background-color: #111111; font-size: 12px; font-weight: 800; color: #FFFFFF; text-align: center; opacity:.8; filter:alpha(Opacity=80); z-index: 3; } .jq-page-list > ul > li.viewed { border: 2px solid #000000; } .jq-page-list > ul > li.viewed > a > span { float: left; position: absolute; width: 46px; height: 46px; background-color: #F1B100; font-size: 11px; font-weight: 700; color: #FFFFFF; text-align: center; line-height: 45px; opacity:.9; filter:alpha(Opacity=90); z-index: 3; } .jq-page-list > ul > li > a > img { width: 50px; } /* width: 100%; margin-top: 0; opacity: 0; filter: alpha(opacity:0); position: absolute; top: 0; right: 0; bottom: 0; float: right; height: 32px; border: none; cursor: pointer; */ /* .jq-page-list > ul > li > a, .jq-page-list > ul > li > .btn-group > a { font-size: 13px; color: #999; text-decoration: none; margin-left: 18px; font-weight: 600; } .jq-page-list > ul > li > a:hover, .jq-page-list > ul > li > .btn-group > a:hover { color: #333; } */ /* ############### Footer ############### */ #footer-menu { margin-top:0; } #footer-menu > .container { padding: 5px 0; } .logo-footer-container { width: 75%; text-align: left; margin: 0; } .logo-footer-container img { width: 115px; height: 24px; margin-left: 6px; } .logo-footer-container > div > div + div { text-align: right; padding: 0; } .logo-footer-info { text-align:center; border-left:1px solid #ddd; width: 20%; } .logo-footer-info > .footer_cs_sudal > li:first-child { padding-bottom:10px; } .logo-footer-info > .footer_cs_sudal > .fcs_02 { color:#333; font-size:13px; font-weight:bold; etter-spacing:-0.05em; } .logo-footer-info > .footer_cs_sudal > .fcs_03 { color:#FFBB00; font-size:28px; font-weight:bold; letter-spacing:-0.07em; line-height:110%; } .logo-footer-info > .footer_cs_sudal > .fcs_04 { color:#999; font-weight:bold; } @media all and (max-width: 800px){ .logo-footer-container { float: normal; width: 100%; margin-top: 0; text-align: center; clear: both; padding: 0 0 20px; } .logo-footer-container > div > div + div { text-align: center; padding: 10px 0; } .logo-footer-info { float: normal; width: 100%; border-left: 0; text-align: center; clear: both; } } /* ################################## 스케줄관련테이블 ################################## */ .schedule-header { font-size: 18px; font-weight: 600; color: #333333; margin: 15px 0 20px; padding: 0; } .schedule-header button { font-size: 18px; padding: 2px 11px; margin-right: 15px; } .schedule-header button + button { margin-left: 15px; } .schedule-header2 { font-size: 16px; font-weight: 600; color: #333333; margin: 0 0 10px; padding: 0; } .schedule-header2 button { font-size: 16px; padding: 2px 8px; margin-right: 10px; } .schedule-header2 button + button { margin-left: 10px; } .schedule-header3 { font-size: 18px; font-weight: 600; color: #333333; margin: 0; padding: 0; } .schedule-header3 button { font-size: 18px; padding: 2px 11px; margin-right: 10px; } .schedule-header3 button + button { margin-left: 10px; margin-right: 0; } .schedule-header-help { margin-top: 8px; } .schedule-header-help > a { font-size: 14px; font-weight: 600; color: #333333; margin: 0; padding: 0; text-decoration:underline; } /* ================================== 모든 스케줄 시간개념 레이아웃 ================================== */ .schedule-body { position: relative; padding: 0 20px 20px; } .schedule-body.slecture-body { position: relative; padding: 0 ; } .schedule-body > .schedule-mark { position: relative; margin: 5px 0; color: #999999; font-size: 15px; }} .schedule-body > .schedule-mark > div { margin-top: 8px; } .schedule-body > .schedule-mark > div > span { padding: 2px 6px; border-radius: 5px; } .schedule-body > .schedule-mark > div:nth-child(1) > span { text-decoration: none; color: #FFFFFF; background-color: #FFBB00; } .schedule-body > .schedule-mark > div:nth-child(2) > span { text-decoration:line-through; color: #CCCCCC; background-color: #FFFFFF; } .schedule-body > .schedule-mark > div:nth-child(3) > span { text-decoration: none; color: #555555; background-color: #FFFFFF; } table.schedule-print { table-layout: fixed; } table.schedule-print > thead > tr > th { padding: 8px 4px; font-size: 16px; font-weight: 700; background-color: #F5F5F5; color: #666666; } table.schedule-print > thead > tr > th.today { background-color: #FFBB00; color: #FFFFFF; } table.schedule-print > tbody > tr > td { padding: 7px 4px; border: 0; } table.schedule-print > thead > tr > th + th, table.schedule-print > tbody > tr > td + td { border-left: 1px solid #CCCCCC; } table.schedule-print > tbody > tr > td > span { text-decoration:line-through; color: #CCCCCC; } table.schedule-print > tbody > tr > td > a.my-schedule, table.schedule-print > tbody > tr > td > span.my-schedule { text-decoration: none; color: #FFFFFF; background-color: #FFBB00; border-radius: 5px; } table.schedule-print > tbody > tr > td > a { color: #555555; } table.schedule-print > tbody > tr > td > span, table.schedule-print > tbody > tr > td > a { padding: 6px; font-size: 15px; font-weight: 700; } table.schedule-print > tbody > tr > td > a.link-off:hover { text-decoration: none; cursor: default; } table.schedule-print > tbody > tr > td > span:first-child, table.schedule-print > tbody > tr > td > a:first-child { margin-right: 10px; } table.schedule-print > tbody > tr > td > a + a, table.schedule-print > tbody > tr > td > a + span, table.schedule-print > tbody > tr > td > span + a, table.schedule-print > tbody > tr > td > span + span { margin-left: 10px; } table.schedule-print > tbody > tr:first-child > td { padding-top: 18px; } table.schedule-print > tbody > tr:last-child > td { padding-bottom: 18px; } table.schedule-print.slecture-print > tbody > tr > td > span:first-child, table.schedule-print.slecture-print > tbody > tr > td > a:first-child { margin-right: 7px; } table.schedule-print.slecture-print > tbody > tr > td > a + a, table.schedule-print.slecture-print > tbody > tr > td > a + span, table.schedule-print.slecture-print > tbody > tr > td > span + a, table.schedule-print.slecture-print > tbody > tr > td > span + span { margin-left: 7px; } table.schedule-print.slecture-print > tbody > tr:first-child > td { padding-top: 15px; } table.schedule-print.slecture-print > tbody > tr:last-child > td { padding-bottom: 15px; } @media all and (max-width: 620px){ .schedule-header { letter-spacing: -1px; } .schedule-header button { padding: 2px 8px; margin-right: 5px; } .schedule-header button + button { margin-left: 5px; } .schedule-body { padding: 0; } table.schedule-print > tbody > tr > td > span:first-child, table.schedule-print > tbody > tr > td > a:first-child { margin-right: 4px; } table.schedule-print > tbody > tr > td > a + a, table.schedule-print > tbody > tr > td > a + span, table.schedule-print > tbody > tr > td > span + a, table.schedule-print > tbody > tr > td > span + span { margin-left: 4px; } table.schedule-print.slecture-print > tbody > tr > td > span, table.schedule-print.slecture-print > tbody > tr > td > a { padding: 6px 2px; font-size: 13px; } table.schedule-print.slecture-print > thead > tr > th { padding: 6px 2px; font-size: 14px; } table.schedule-print.slecture-print > tbody > tr > td > span, table.schedule-print.slecture-print > tbody > tr > td > a { padding: 3px; font-size: 14px; } table.schedule-print.slecture-print > tbody > tr > td > span:first-child, table.schedule-print.slecture-print > tbody > tr > td > a:first-child { margin-right: 1px; } table.schedule-print.slecture-print > tbody > tr > td > a + a, table.schedule-print.slecture-print > tbody > tr > td > a + span, table.schedule-print.slecture-print > tbody > tr > td > span + a, table.schedule-print.slecture-print > tbody > tr > td > span + span { margin-left: 1px; } table.schedule-print > tbody > tr > td > span, table.schedule-print > tbody > tr > td > a { padding: 4px 4px; } table.schedule-print > tbody > tr > td > span:first-child, table.schedule-print > tbody > tr > td > a:first-child { margin-right: 3px; } table.schedule-print > tbody > tr > td > a + a, table.schedule-print > tbody > tr > td > a + span, table.schedule-print > tbody > tr > td > span + a, table.schedule-print > tbody > tr > td > span + span { margin-left: 3px; } } @media (max-width: 768px) { .table-responsive2 { width: 100%; margin-bottom: 15px; overflow: auto; border: 3px solid #dddddd; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .table-responsive2 > .table { table-layout: auto; word-break:break-all; } .table-responsive2 > .table > thead > tr > th, .table-responsive2 > .table > tbody > tr > th, .table-responsive2 > .table > tfoot > tr > th, .table-responsive2 > .table > thead > tr > td, .table-responsive2 > .table > tbody > tr > td, .table-responsive2 > .table > tfoot > tr > td { white-space: nowrap; vertical-align: middle; } .table-responsive2 > .table > tbody > tr > td.white-space-normal { white-space: normal; } } /* ================================== 모든 스케줄 시간개념 레이아웃 ================================== */ .table-responsive3 > .table > thead > tr > th, .table-responsive3 > .table > tbody > tr > th, .table-responsive3 > .table > tfoot > tr > th, .table-responsive3 > .table > thead > tr > td, .table-responsive3 > .table > tbody > tr > td, .table-responsive3 > .table > tfoot > tr > td { font-size: 92%; } @media (max-width: 520px) { .table-responsive3 { width: 100%; margin-bottom: 15px; overflow: auto; border: 3px solid #dddddd; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .table-responsive3 > .table { table-layout: auto; word-break:break-all; } .table-responsive3 > .table > thead > tr > th, .table-responsive3 > .table > tbody > tr > th, .table-responsive3 > .table > tfoot > tr > th, .table-responsive3 > .table > thead > tr > td, .table-responsive3 > .table > tbody > tr > td, .table-responsive3 > .table > tfoot > tr > td { white-space: nowrap; vertical-align: middle; } .table-responsive3 > .table > tbody > tr > td.white-space-normal { white-space: normal; } } .schedule-choise-header { width: 100%; padding: 10px 5px; border-top : 1px solid #ddd; border-left : 1px solid #ddd; border-right : 1px solid #ddd; background-color: #FFBB00; color: #FFFFFF; font-size: 16px; text-align: center; } .schedule-choise { width: 100%; height: 284px; overflow-y:auto; border : 1px solid #ddd; /* overflow-x:scroll; overflow:auto !important; */ -ms-overflow-style:-ms-autohiding-scrollbar; -webkit-overflow-scrolling:touch !important; } .schedule-choise > div { float: left; position: relative; min-height: 1px; width: 50%; padding: 5px; text-align: center; } .schedule-choise > div > span { text-decoration:line-through; color: #CCCCCC; } .schedule-choise > div > a { color: #555555; } .schedule-time-choise { width: 100%; max-height: 300px; height: auto; overflow-y:auto; border : 1px solid #ddd; padding-left: 14px; padding-right: 14px; -ms-overflow-style:-ms-autohiding-scrollbar; -webkit-overflow-scrolling:touch !important; } .schedule-time-choise > table > tbody > tr > td { font-size: 14px; color: #666666; font-weight: 600; text-align: left; padding: 10px 0; } .schedule-time-choise > table > tbody > tr > td:nth-child(2) > span { color: #aaaaaa; font-weight: normal; padding-left: 10px; padding-right: 10px; text-align: left; } .schedule-time-choise > table > tbody > tr > td:nth-child(2) > i { font-size: 18px; color: #FF3366; } .schedule-time-choise > table > tbody > tr > td:nth-child(2) > span.tutor-name { color: #FFBB00; font-weight: 700; font-size: 14px; } .schedule-time-choise > table > tbody > tr:first-child > td { border-top: 0; } .schedule-time-choise > table > tbody, .schedule-time-choise > table > tbody > tr:last-child > td { border-bottom: 0; } .schedule-time-choise > table > tbody > tr > td:last-child { text-align: right; } .schedule-time-choise > table > tbody > tr > td:last-child > a { padding: 6px 10px; color:#fff; background-color:#FF6600; border: 1px solid #D35602; text-align: center; font-size: 13px; font-weight: 700; border-radius: 4px; } .schedule-time-choise > table > tbody > tr > td:last-child > a:hover, .schedule-time-choise > table > tbody > tr > td:last-child > a:focus, .schedule-time-choise > table > tbody > tr > td:last-child > a:active { color:#fff; background-color:#FF3300; border-color:#D35602; text-decoration: none; } .schedule-time-choise > table > tbody > tr > td:last-child > a:active { background-image:none } .schedule-time-choise > table > tbody > tr > td:last-child > a > i { font-size: 14px; margin-left: 8px; } @media (max-width: 767px) { } /* ################################## 스케줄관련테이블 ################################## */ .footer-cs1-panel { padding: 10px 19px 8px; } .footer-cs1-panel h1 { letter-spacing: -2px; color: #FFBB00; text-align: center; line-height: 1.1; } .footer-cs1-panel > h1 > span { padding: 0 10px; -webkit-border-radius: 40px; border-radius: 40px; background-color: #FFBB00; } .footer-cs1-panel > h1 > span > i { font-size: 29px; color: #fff; } .footer-cs1-panel > p { color: #777; text-align: center; padding: 1px 0 2px; font-size: 12px; } .footer-cs1-panel > .cs-info { display: block; padding: 12px 8px; font-size: 12px; margin-left: -10px; margin-right: -10px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #F6F6F6; } .footer-cs1-panel > .cs-info > .cs-info-t { display: inline-block; width: 22%; border-right: 1px solid #e1e1e1; text-align: center; font-weight: 800; } .footer-cs1-panel > .cs-info > .cs-info-m { display: inline-block; width: 75%; padding-left: 2%; } .footer-cs2-panel { padding: 9px 19px 8px; } .footer-cs2-panel h5 { margin-bottom: 5px; line-height: 1.1; } .footer-cs2-panel h4 { margin-top: 0; margin-bottom: 3px; color: #FFBB00; font-weight: 800; line-height: 1.1; } .footer-cs2-panel > p { color: #777; font-size: 12px; } .footer-cs3-panel { padding: 9px 19px 11px; } .footer-cs3-panel > hr { margin: 10px ; } .footer-cs3-panel > div > i { display: inline-block; font-size: 32px; padding: 0 15px; color: #FFBB00; } .footer-cs3-panel > div > h4 { display: inline-block; margin-top: 0;margin-bottom: 3px; color: #333; font-weight: 800; line-height: 1.1; } .footer-cs3-panel > div > h4 > small { display: block; margin-top: 7px; margin-bottom: 5px; font-size: 12px; color: #777; font-weight: 600; } .footer-cs3-panel > div > h4 > span { color: #f60; } .footer-cs4-panel { padding: 10px 19px 8px; } .footer-cs4-panel > p.title { background-color: #F6F6F6; font-size: 12px; padding: 12px 10px; font-weight: 800; -webkit-border-radius: 4px; border-radius: 4px; } .footer-cs4-panel > p.title > span { background-color: #FFBB00; color: #fff; font-weight: normal; padding: 2px 5px; margin-right: 10px; } .footer-cs4-panel > ul.list { padding-top: 5px; } .footer-cs4-panel > ul.list li { display: block; background: url("../images/common/dotted1.png") no-repeat 0 12px; margin-left: 0.2em; padding-left: 0.7em; padding-top: 3px; padding-bottom: 3px; } .footer-cs4-panel > ul.list > li a { font-size: 12px; font-weight: normal; color: #333; } /* ###################### MAIN PANEL ####################### */ /* ###################### SUB PANEL ####################### */ a.sub-leveltest-panel { padding: 18px 19px 10px; border: 1px solid #e5e5e5; display: block; height: 80px; text-align: right; font-size: 14px; color: #00ADEF; font-weight: 700; background: transparent url("../images/00.main/img_woman.png") no-repeat 0 -4%; } a.sub-leveltest-panel:hover { background-color: #E9F5FF; text-decoration: none; } a.sub-leveltest-panel > span { font-size: 18px; color: #333; font-weight: 700; padding-right: 20px; } /* ############### 친구 추천, 원격제어 서비스 ############### */ .sub-help-panel { padding: 9px 0 8px; margin: 0; } .sub-help-panel > hr { margin: 10px 0; } .sub-help-panel > div { display: block; padding: 7px; vertical-align: middle; } .sub-help-panel > div > i { display: inline-block; font-size: 28px; margin-top: 5px; padding: 0 20px; color: #FFBB00; } .sub-help-panel > div > h4 { display: inline-block; color: #333; font-weight: 700; font-size: 16px; padding: 0; margin: 0; } .sub-help-panel > div > h4 a { float: left; margin-top: -20px; } .sub-help-panel > div > h4 span { color: #f60; } /* ############### 고객지원 ############### */ .sub-cs1-panel { padding: 13px 19px 0; } .sub-cs1-panel > h1 { display: inline-block; margin-top: 10px; padding: 0; vertical-align: top; } .sub-cs1-panel > h1 > span { padding: 11px 13px 7px; margin: 0; background-color: #FFBB00; -webkit-border-radius: 80px; border-radius: 80px; } .sub-cs1-panel > h1 > span > i { font-size: 40px; color: #fff; } .sub-cs1-panel > h3 { display: inline-block; margin: 0 0 0 15px; color: #333; text-align: left; font-size: 16px; } .sub-cs1-panel > h3 > span { display: block; color: #999; text-align: left; font-size: 12px; margin-top: 5px; line-height: 18px; } .sub-cs1-panel > h2 { display: block; color: #FFBB00; text-align: center; font-size: 32px; font-weight: 700; margin: 7px 0 0; } .sub-cs1-panel > p { color: #777; text-align: center; padding: 0; font-size: 12px; margin: 2px 0 0; } .sub-cs2-panel { padding: 0 19px 0; } .sub-cs3-panel { padding: 0 19px 0; } .sub-cs2-panel > h5, .sub-cs3-panel > h5 { margin: 0; padding: 0; font-weight: 700; font-size: 15px; color: #666; text-align: center; } .sub-cs2-panel > h4, .sub-cs3-panel > h4 { margin: 10px 0 5px; padding: 0; font-weight: 700; font-size: 15px; color: #FFBB00; text-align: center; } .sub-cs2-panel > p, .sub-cs3-panel > p { margin: 0; padding: 0; font-size: 12px; color: #999; text-align: center; } /* ###################### SUB PANEL ####################### */ .well-info { min-height: 20px; padding: 17px 20px 10px; margin-bottom: 20px; background-color: #FCFCFC; border: 1px solid #e5e5e5; border-radius: 0; font-size: 12px; } .well-info p { margin: 0 0 7px; padding: 0; } .well-info h6 { font-size: 15px; color: #333; margin-left: -27px; } .well-info h6 > i { font-size: 24px; color: #f60; margin: 0 6px 0 0; padding: 0; } /*===== Other typography =====*/ .heading-hr { border-bottom: 1px solid #E5E5E5; padding-bottom: 8px; margin-bottom: 20px; } .heading-margin-none { padding-bottom: 8px; margin-bottom: 0; } .h-hr { border-bottom: 1px solid #E5E5E5; padding-bottom: 5px; margin-bottom: 0; } /* label.error { margin-top: 6px; margin-bottom: 0; color: #fff; background-color: #D65C4F; display: table; padding: 5px 8px; font-size: 11px; font-weight: 600; line-height: 14px; } label.error.valid { background-color: #FFBB00; } .mandatory { color: #b94a48; margin-left: 2px; } */ /* # text Style ================================================== */ .bolder { font-weight: 600; } .bolder-normal { font-weight: normal; } .text-left, .c-text-left { text-align:left } .text-right, .c-text-right { text-align:right } @media (max-width: 767px) { .c-text-left, .c-text-right { text-align:center } } .text-center { text-align:center } .text-justify { text-align:justify } .text-write { color:#fff } .text-black { color:#000 } .text-gray { color:#ccc } .text-gray-e { color:#eee } .text-subject { color:#555 } .text-muted { color:#999999 } .text-support { color:#8856E4 } a.text-support:hover { color:#6234BA } .text-red, input.text-red { color:#f10 } a.text-red:hover { color:#a00 } .text-orange { color:#f60 } a.text-orange:hover { color:#f30 } .text-blue, a.text-blue:hover { color:blue } .text-talk, label.text-talk, a.text-blue:hover { color:#FFBB00 } input.text-talk, select.text-talk { color:#0099F0 } .text-primary { color:#428bca } a.text-primary:hover { color:#3071a9 } .text-success { color:#3c763d } a.text-success:hover { color:#2b542c } .text-info { color:#31708f } a.text-info:hover { color:#245269 } .text-warning { color:#F3288E } a.text-warning:hover { color:#66512c } .text-danger { color:#a94442 } a.text-danger:hover { color:#843534 } .text-highlights { color:#00ADEF } .text-xsmall { font-size: 70%; } .text-small { font-size: 80%; } .text-smedium { font-size: 110%; } .text-medium { font-size: 120%; } .text-larger { font-size: 140%; } .text-line { color:#ddd; padding: 0 5px; } .form-control { width:100%;} .pop-login { font-family: 'Jeju Gothic', sans-serif; } .pop-login label { color: #555; font-weight: normal; } .pop-login button { font-weight: normal; font-size: 15px; padding: 9px 14px; } .pop-login input[type=text], .pop-login input[type=password] { font-family: 'Nanum Gothic', serif; } .sub-category { color: inherit; padding: 0; font-size: 14px; font-family: 'Jeju Gothic', sans-serif; background: #fff; border: 1px solid #eee; } .sub-category h5 { font-size: 15px; font-family: 'Jeju Gothic', sans-serif; padding: 15px 18px; margin: 0; font-weight: normal; color: #fff; background: #FFBB00; } .sub-category ul { padding: 0; } .sub-category li { list-style: none; padding: 0; margin: 0; } .sub-category li dl { padding: 0; margin: 0; } .sub-category li dl dt { margin: 0; padding: 7px 10px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #000; font-size: 16px; font-weight: 600; } .sub-category li dl dd { margin: 0 10px; padding: 9px 8px 6px; font-weight: normal; border-bottom: 1px dotted #ccc; } .sub-category li dl dd.last { border-bottom: 0; padding-bottom: 0; } .sub-category li dl dd a { display: block; color: #555; } .sub-category li dl dd a:hover { color: #0054A2; } .sub-category li dl dd a i { color: #555; } .sub-category li dl dd.active a { color: #0054A2; font-weight: 600; } .pagination { display:inline-block; padding-left:0; margin:20px 0; border-radius:4px } .pagination>li { display:inline } .pagination>li>a, .pagination>li>span { position:relative; float:left; padding:6px 12px; line-height:1.42857143; text-decoration:none; color:#428bca; background-color:#fff; border:1px solid #ddd; margin-left:-1px } .pagination>li:first-child>a, .pagination>li:first-child>span { margin-left:0; border-bottom-left-radius:4px; border-top-left-radius:4px } .pagination>li:last-child>a, .pagination>li:last-child>span { border-bottom-right-radius:4px; border-top-right-radius:4px } .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { color:#2a6496; background-color:#eee; border-color:#ddd } .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus { z-index:2; color:#fff; background-color:#428bca; border-color:#428bca; cursor:default } .pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus { color:#999; background-color:#fff; border-color:#ddd; cursor:not-allowed } .pagination-lg>li>a, .pagination-lg>li>span { padding:10px 16px; font-size:18px } .pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span { border-bottom-left-radius:6px; border-top-left-radius:6px } .pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span { border-bottom-right-radius:6px; border-top-right-radius:6px } .pagination-sm>li>a, .pagination-sm>li>span { padding:5px 10px; font-size:12px } .pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span { border-bottom-left-radius:3px; border-top-left-radius:3px } .pagination-sm>li:last-child>a, .pagination-sm>li:last-child>span { border-bottom-right-radius:3px; border-top-right-radius:3px } /* ===== Pagination ===== */ .pagination { margin: 0; border-radius: 0; font-size: 0; } .pagination > li { display: inline-block; margin-left: 1px; font-size: 12px; } .pagination > li:first-child { margin-left: 0; } .pagination > li > a, .pagination > li > span { float: none; margin-left: 0; border: 0; display: block; color: #333; font-weight: 600; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span, .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span, .pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span, .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { border-radius: 2px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #FFBB00; color: #fff; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { background-color: #2D73CB; cursor: default; } /* ===== Pager ===== */ .pager { padding-left:0; margin: 20px 0 0; list-style:none; text-align:center } .pager li { display:inline; } .pager li > a, .pager li > span { display:inline-block; text-decoration: none; font-size: 13px; font-weight: 700; padding: 5px 10px; margin-bottom: 5px; background-color:#fff; border:1px solid #ddd; border-radius:15px } .pager li > a:hover, .pager li > a:focus { color:#fff; background-color:#D69D00; border-color:#BD8B00 } .pager .next > a, .pager .next > span { float:right } .pager .previous > a, .pager .previous > span { float:left } .pager > .active>a, .pager > .active>span, .pager > .active>a:hover, .pager > .active>span:hover, .pager > .active>a:focus, .pager > .active>span:focus { z-index:2; color:#fff; background-color:#F1B100; border-color:#D69D00 cursor:default } .pager .disabled>a, .pager .disabled>a:hover, .pager .disabled>a:focus, .pager .disabled>span { color:#999; background-color:#fff; cursor:not-allowed } /* .btn-default > i { font-size: 16px; } */ /*Upload Layout*/ .unicorn_waiting { position: absolute; z-index: 999999; visibility: hidden; width: 24px; height: 24px; background-color: #fff; } .unicorn_waiting p { float: left; display: block; } .unicorn_waiting p img { display: block; padding: 0; width: 30px; height: 30px; border: 0; } /*Upload Layout*/ /*===== File uploader =====*/ .uploader { width: 100%; position: relative; overflow: hidden; border: 1px solid #ddd; background: #fff; padding: 2px 2px 2px 10px; } .uploader span.action { width: 28px; background: url('../images/forms/add_files.png') no-repeat 0 0; height: 28px; cursor: pointer; float: right; text-indent: -9999px; display: inline; overflow: hidden; } .uploader:hover span.action { background-position: 0 -28px; } .uploader:active span.action { background-position: 0 -56px; } .uploader span.filename { color: #777; cursor: pointer; max-width: 200px; font-size: 11px; line-height: 28px; float: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; } .uploader input[type=file] { width: 100%; margin-top: 0; opacity: 0; filter: alpha(opacity:0); position: absolute; top: 0; right: 0; bottom: 0; float: right; height: 32px; border: none; cursor: pointer; } .uploader { display: -moz-inline-box; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; } .uploader.disabled span.action { color: #aaa; } .uploader.disabled span.filename { border-color: #ddd; color: #aaa; } .text-body-highlight { font-family: 'Nanum Gothic', serif; font-size: 20px; font-weight: 700; text-align: center; color: #FFBB00; padding: 18px 28px 18px 10px; line-height: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #ffffff; position: relative; margin: 24px 0; z-index: 2; } /* .text-body-highlight:before { content: ""; position: absolute; z-index: 3; left: 50px; bottom: -16px; border: 8px solid transparent; border-left: 8px solid #dedede; border-top: 8px solid #dedede; } .text-body-highlight:after { content: ""; position: absolute; z-index: 3; left: 51px; bottom: -14px; border: 8px solid transparent; border-left: 8px solid #fbfbfb; border-top: 8px solid #fbfbfb; }*/ .text-body-highlight p { margin: 0; position: relative; z-index: 3; } .text-body-highlight p:after { font-family: "Goudy Bookletter 1911", serif; font-style: italic; content: "\201C"; font-size: 90px; font-weight: bold; color: #e4e4e4; position: absolute; top: 20px; left: 0; z-index: -1; } .text-body-highlight p:before { font-family: "Goudy Bookletter 1911", serif; font-style: italic; content: "\201D"; font-size: 90px; font-weight: bold; color: #e4e4e4; position: absolute; top: 20px; right: 10px; z-index: -1; } .circle-info-container { margin: 20px 0 20px; } .circle-info-container li { text-align: center; width: 16.66667%; float: left; } .circle-info-container li p { text-align: center; font-size: 12px; color: 333; } /* counter */ .circle-info { width: 115px; height: 115px; text-align: center; border: 4px solid #d5d5d5; background: #fff; padding: 30px 0; margin: 0 auto; -webkit-border-radius: 50%; border-radius: 50%; } .circle-info h2 { font-size: 35px; line-height: 1; margin-bottom: 5px; color: #000; } .circle-info p { font-size: 12px; color: #777; font-weight: 600; text-transform: uppercase; line-height: 1; margin: 0; } .about1 > * { font-family: 'KoPub Batang', serif, 'Nanum Gothic', serif, 'malgun Gothic', '맑은고딕'; } .about1 > h1 { font-size: 34px; } .about1 > h4 { font-size: 25px; font-weight: 100; } .about1 > h4 > span { font-weight: 700; } .about1 > p { font-size: 20px; font-weight: 100; } .about1 > p > span { font-weight: 700; } .form-control-red { color:#f10; border:1px solid #f10; } /* Input icons */ .has-feedback .form-control-feedback { top: 24px; color: #999; font-size: 16px; } .has-feedback-no-label .form-control-feedback { top: 0; } .has-feedback-left .form-control { padding-right: 0; padding-left: 32px; } .has-feedback-left .form-control-feedback { right: auto; left: 0; } .form-horizontal .has-feedback-left .form-control-feedback { right: 0; left: 15px; } /* Well */ .well { padding: 15px; margin-bottom: 0; background-color: #FCFCFC; border-color: #FFFFFF; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; box-shadow: none; } /* # bg Color ================================================== */ .bg-none { border: 1px solid #BDD5B4; background-color:#fff } .bg-primary { color: #fff; background-color: #2D73CB; } a.bg-primary:hover { background-color:#3071a9 } .bg-success { color: #fff; background-color: #65B688; } a.bg-success:hover { background-color:#c1e2b3 } .bg-info { color: #fff; background-color: #3CA2BB; } a.bg-info:hover { background-color:#afd9ee } .bg-warning { color: #fff; background-color: #EE8366; } a.bg-warning:hover { background-color:#f7ecb5 } .bg-danger { color: #fff; background-color: #D65C4F; } a.bg-danger:hover { background-color:#e4b9b9 } a.bg-primary-point:hover { background-color:#cfe7e7 } .bg-success-point { background-color:#e3ffe2 } a.bg-success-point:hover { background-color:#bce2bb } .bg-info-point { background-color:#fffee7 } a.bg-info-point:hover { background-color:#e0dfc1 } .bg-primary-point { background-color:#DAFFFF } a.bg-primary-point:hover { background-color:#cfe7e7 } .bg-unread { background-color:#f0f0f0 } a.bg-unread:hover { background-color:#eee } .bg-beginner { background-color:#a2d13b } .bg-lowinter { background-color:#ffb144 } .bg-intermediate { background-color:#ff7095 } .bg-advanced { background-color:#a270ff } .bg-yellow { background-color:#ffee00 } .bg-point { background-color:#BDF5FF } .back-default { background-color: #999999; color:#fff; } .back-primary { background-color: #445661; color:#fff; } .back-success { background-color: #65B688; color:#fff; } .back-success2 { background-color: #196F3E; color:#fff; } .back-info { background-color: #3CA2BB; color:#fff; } .back-info2 { background-color: #0A7088; color:#fff; } .back-support { background-color: #A270FF; color:#fff; } .back-attend { background-color: #ABA000; color:#fff; } .back-warning { background-color: #E7804F; color:#fff; } .back-warning2 { background-color: #EC008C; color:#fff; } .back-warning3 { background-color: #a00; color:#fff; } .back-danger { background-color: #D65C4F; color:#fff; } a.login-btn { margin: 6px 0 0 0; padding: 10px; color: #fff; text-decoration: none; content: "\201D"; } a.login-btn:hover { color: #000; text-decoration: none; } /* .breadcrumb { padding:8px 15px; margin-bottom:20px; list-style:none; background-color:#fff; border-radius:4px } .breadcrumb>li { display:inline-block } .breadcrumb>li+li:before { content:"/\00a0"; padding:0 5px; color:#ccc } .breadcrumb>.active { color:#999 } #location { position: relative; height: 40px; z-index: 1; padding: 0 20px; } #location h2 { float: left; font-size: 190%; padding: 0 10px; font-weight: normal; color: #1A2250; } #location .breadcrumb{ float: right; padding: 26px 12px 10px; margin:0; background: transparent; border-radius: 0 } #location .breadcrumb>li{ float:left; list-style: none; font-weight:normal } #location .breadcrumb>li+li:before{ content:"/\00a0"; padding:0 5px; color:#ccc; } #location .breadcrumb>li>a{ color:#000 } #location .breadcrumb>li.arrow{ color:#bbb; padding: 0 6px } #location .breadcrumb>.active{color:#999} */ .book-info-list li { font-size: 14px; color: #777; padding-bottom: 6px; } .book-info-list-pop li { font-size: 15px; color: #777; padding-bottom: 6px; } .book-info-list-pop li span, .book-info-list li span { color: #333; font-weight: 600; } .book-info-list-pop li dd, .book-info-list li dd { padding-left: 6px; font-family: monospace, serif; margin: 4px 0; } .book-info-list-pop li dd:before, .book-info-list li dd:before { font-family: "FontAwesome"; content: "\f0c1"; padding-right: 3px; } .book-info-list-pop li dd span, .book-info-list li dd span { padding-left: 7px; padding-right: 7px; font-size: 12px; color: #ddd; } @media (max-width: 767px) { .book-info-list-pop li { font-size: 13px; } } .app-carousel { margin: 0; border: 1px solid #fff; } .app-carousel .item { margin: 0; padding: 5px 5px; text-align: center; } .app-carousel .item > a > img { display: block; width: 100%; height: auto; border: 5px solid #fff; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } /* .app-carousel .owl-pagination .owl-page span { height: 18px; width: 18px; background: transparent; border: 3px solid #393939; opacity: 1; } .app-carousel .owl-pagination .owl-page span:hover { opacity: 0.5; } .app-carousel .owl-pagination .owl-page.active span { background: #393939; }*/ .owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y} .owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px, 0px, 0px)} .owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%} .owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out} .owl-carousel .owl-item{float:left} .owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer} .owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .grabbing{cursor:url(../img/grabbing.png) 8 8,move} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0)} .owl-theme .owl-controls{margin-top:10px;text-align:center} .owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:0.5} .owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none} .owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline} .owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:0.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#869791} .owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1} .owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px} .owl-item.loading{min-height:150px;background:url(../img/AjaxLoader.gif) no-repeat center center} .owl-origin{-webkit-perspective:1200px;-webkit-perspective-origin-x:50%;-webkit-perspective-origin-y:50%;-moz-perspective:1200px;-moz-perspective-origin-x:50%;-moz-perspective-origin-y:50%;perspective:1200px} .owl-fade-out{z-index:10;-webkit-animation:fadeOut .7s both ease;-moz-animation:fadeOut .7s both ease;animation:fadeOut .7s both ease} .owl-fade-in{-webkit-animation:fadeIn .7s both ease;-moz-animation:fadeIn .7s both ease;animation:fadeIn .7s both ease} .owl-backSlide-out{-webkit-animation:backSlideOut 1s both ease;-moz-animation:backSlideOut 1s both ease;animation:backSlideOut 1s both ease} .owl-backSlide-in{-webkit-animation:backSlideIn 1s both ease;-moz-animation:backSlideIn 1s both ease;animation:backSlideIn 1s both ease} .owl-goDown-out{-webkit-animation:scaleToFade .7s ease both;-moz-animation:scaleToFade .7s ease both;animation:scaleToFade .7s ease both} .owl-goDown-in{-webkit-animation:goDown .6s ease both;-moz-animation:goDown .6s ease both;animation:goDown .6s ease both} .owl-fadeUp-in{-webkit-animation:scaleUpFrom .5s ease both;-moz-animation:scaleUpFrom .5s ease both;animation:scaleUpFrom .5s ease both} .owl-fadeUp-out{-webkit-animation:scaleUpTo .5s ease both;-moz-animation:scaleUpTo .5s ease both;animation:scaleUpTo .5s ease both} @-webkit-keyframes empty{ 0%{opacity:1} } @-moz-keyframes empty{ 0%{opacity:1} } @keyframes empty{ 0%{opacity:1} } @-webkit-keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} } @-moz-keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} } @keyframes fadeIn{ 0%{opacity:0} 100%{opacity:1} } @-webkit-keyframes fadeOut{ 0%{opacity:1} 100%{opacity:0} } @-moz-keyframes fadeOut{ 0%{opacity:1} 100%{opacity:0} } @keyframes fadeOut{ 0%{opacity:1} 100%{opacity:0} } @-webkit-keyframes backSlideOut{ 25%{opacity:.5;-webkit-transform:translateZ(-500px)} 75%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)} 100%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(-200%)} } @-moz-keyframes backSlideOut{ 25%{opacity:.5;-moz-transform:translateZ(-500px)} 75%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)} 100%{opacity:.5;-moz-transform:translateZ(-500px) translateX(-200%)} } @keyframes backSlideOut{ 25%{opacity:.5;transform:translateZ(-500px)} 75%{opacity:.5;transform:translateZ(-500px) translateX(-200%)} 100%{opacity:.5;transform:translateZ(-500px) translateX(-200%)} } @-webkit-keyframes backSlideIn{ 0%, 25%{opacity:.5;-webkit-transform:translateZ(-500px) translateX(200%)} 75%{opacity:.5;-webkit-transform:translateZ(-500px)} 100%{opacity:1;-webkit-transform:translateZ(0) translateX(0)} } @-moz-keyframes backSlideIn{ 0%, 25%{opacity:.5;-moz-transform:translateZ(-500px) translateX(200%)} 75%{opacity:.5;-moz-transform:translateZ(-500px)} 100%{opacity:1;-moz-transform:translateZ(0) translateX(0)} } @keyframes backSlideIn{ 0%, 25%{opacity:.5;transform:translateZ(-500px) translateX(200%)} 75%{opacity:.5;transform:translateZ(-500px)} 100%{opacity:1;transform:translateZ(0) translateX(0)} } @-webkit-keyframes scaleToFade{ to{opacity:0;-webkit-transform:scale(0.8)} } @-moz-keyframes scaleToFade{ to{opacity:0;-moz-transform:scale(0.8)} } @keyframes scaleToFade{ to{opacity:0;transform:scale(0.8)} } @-webkit-keyframes goDown{ from{-webkit-transform:translateY(-100%)} } @-moz-keyframes goDown{ from{-moz-transform:translateY(-100%)} } @keyframes goDown{ from{transform:translateY(-100%)} } @-webkit-keyframes scaleUpFrom{ from{opacity:0;-webkit-transform:scale(1.5)} } @-moz-keyframes scaleUpFrom{ from{opacity:0;-moz-transform:scale(1.5)} } @keyframes scaleUpFrom{ from{opacity:0;transform:scale(1.5)} } @-webkit-keyframes scaleUpTo{ to{opacity:0;-webkit-transform:scale(1.5)} } @-moz-keyframes scaleUpTo{ to{opacity:0;-moz-transform:scale(1.5)} } @keyframes scaleUpTo{ to{opacity:0;transform:scale(1.5)} } /* ############################ BOOK LIST ########################## */ .book-list { /* padding: 19px; border: 1px solid #dedede; */ padding: 19px 0; border-bottom: 1px solid #dedede; margin-bottom: 5px; background: #fff; } .book-list img { float: left; margin-right: 20px; width: 90px; } .book-list .book-description { margin-left: 110px; margin-bottom: 0; } .book-list h4 { margin: 0 0 4px; } .book-list h4 span { display: inline-block; margin: 0 0 0 8px; font-size: 12px; padding: 4px 7px 5px 7px; line-height: 13px; font-family: 'NanumGothic','나눔고딕', NG, ng, 'malgun Gothic', '맑은고딕', dotum, gulim, 'Open Sans', sans-serif, helvetica; font-weight: normal; color: #FFF; background-color: #697EB7; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .book-list ul { display: table; padding: 3px 0 0; font-size: 13px; margin: 0; } .book-list ul li { float: left; list-style: none; width: 50%; padding: 0 0 3px; margin: 0; } .book-list ul li span { font-weight: 600; } .book-list p { margin: 0; color: #777; font-size: 13px; line-height: 21px; } .book-list p span { color: #222; } .book-list p span.line { color: #ddd; } .book-list .author-link { color: #005BAF; text-decoration:underline; } .book-list .author-link:hover { color: #045AA8; text-decoration:none; } .pagelisting { display: block; text-align: right; } @media (max-width:767px) { .book-list .book-description { margin: 0; } .book-list ul li { display: block; width: 100%; } .block-page { padding-bottom: 0; } .showing, .pagelisting { display: block; text-align:center; } } @media (max-width:479px) { .book-list img { display: block; margin-bottom: 10px; width: 100%; } .book-list .book-description { margin: 0; } .book-list ul li { display: block; width: 100%; } .block-page { padding-bottom: 0; } .showing, .pagelisting { display: block; text-align:center; } } .community-search input[type=text] { background: #fff url('/admin/images/interface/filter.png') no-repeat 10px; padding: 10px 10px 10px 30px; height: 40px; border: 1px solid #ccc; font-size: 16px; margin-bottom: 2px; } .community-search input[type=text]:focus { border: 2px solid #FFBB00; } .community-search > .input-group-btn > .btn { padding: 10px 10px ; height: 40px; margin-bottom: 2px; } .community-search > .input-group-btn > .black { background-color: #000; } .community-search > .input-group-btn > .black:hover { background-color: #333; } .book-find-etc { float: right; margin-top: -20px; background-color: #777; padding: 6px 10px; color: #fff; font-size: 12px; } .book-find-etc:hover { background-color: #005BAF; color: #fff; } .community-padding { position: relative; min-height: 1px; padding-left: 7px; padding-right: 7px; } .community-galler-list { position: relative; min-height: 1px; padding: 15px 5px 5px; border-top: 1px solid #DDDDDD; } .community-galler-list.focus { background-color: #F4FFD1; } .community-galler-list > div > h5 { margin: 3px 0 5px; padding: 0; } .community-galler-list > div > h5 > span { font-size: 10px; font-weight: 800; padding: 3px 6px; } .community-galler-list > div > div.memo { font-size: 14px; color: #666666; } .community-galler-list > div > div.memo > a { color: #666666; } .community-galler-list > div > div.date { padding-top: 5px; font-size: 12px; color: #888888; } .community-galler-list > div > div.date > div > span { font-size: 10px; color: #CCCCCC; padding: 0 15px; } .community-galler-list > div > div.date > .pull-right > span { font-size: 13px; padding-left: 2px; } .community-galler-list > div > div.date > .pull-right > span:first-child > i { color: #FF3300; } @media (max-width:480px){ .community-galler-list { padding: 15px; margin: 0; } .community-galler-list > .col-fsl-12 + .col-fsl-12, .community-galler-list > div > h5 { margin: 0; padding: 0; } .community-galler-list > div > div.date > div > span { padding: 0 7px; } } /* ################## 수강증 / 영수증 ################## */ .class-receipt-pop { display: block; margin: 10px auto 0; width: 598px; height: 364px; } .class-receipt { display: block; width: 598px; height: 450px; clear:both } .class-receipt > div.class-receipt-stemp { position: absolute; display: block; width: 598px; height: 364px; } .class-receipt > div.class-no { padding: 24px 0 0 61px; font-size: 18px; font-weight:700; } .class-receipt > div.class-info-left { float: left; padding: 27px 0 0 110px; width:310px; font-size: 15px; font-weight:800; } .class-receipt > div.class-info-right { float: left; padding: 27px 0 0 76px; width:275px; font-size: 15px; font-weight:800; } .class-receipt > div > p { padding: 0; margin: 4.0px 0 0 0; } .class-receipt > div.class-date { margin: 29px auto 0; padding: 0 9px 0 0; width:200px; font-size: 15px; font-weight:600; text-align: center; } .class-receipt > div.class-cscenter { margin: 53px auto 0; padding: 0 16px; width:566px; font-size: 12px; font-weight:700; text-align: left; } .col-r-padding{padding-right:0} .col-lr-padding{padding-left:5px;padding-right:5px} @media (max-width:767px){ .col-r-padding{padding-right:15px} .col-lr-padding{padding-left:15px;padding-right:15px} } .btn, .label, a > .label { white-space: pre-line; } .img-title { margin: 0; } .about-info1 > h4 { margin: 0 0 10px; font-size: 18px; } .about-info1 > p { margin-top: 0; padding-top: 0; } .about-info2 > div > img { display: inline-block; } .about-info2 > div > h4 { display: inline-block; margin-left: 20px; } .about-info2 > div > p { margin-top: 9px; } .about-info2 > div > p.m { margin-top: -2px; } .about-info4 > .col-xs-6 { margin-top: 0; margin-bottom: 30px; } .about-info4-1, .about-info4-2, .about-info4-3, .about-info4-4 { border: 1px solid #e5e5e5; height: 270px; } .about-info4-1 { background: url('../images/01.introduce/img_140_02.png') no-repeat 50% 100%; } .about-info4-2 { background: url('../images/01.introduce/img_140_03.png') no-repeat 50% 100%; } .about-info4-3 { background: url('../images/01.introduce/img_140_04.png') no-repeat 50% 100%; } .about-info4-4 { background: url('../images/01.introduce/img_140_05.png') no-repeat 50% 100%; } .about-info4-1 > h5, .about-info4-2 > h5, .about-info4-3 > h5, .about-info4-4 > h5 { margin-top: 30px; text-align: center; padding: 0 30px; line-height: 1.5; } .about-info4b > img { width: 100%; } .about-info4b h1 { font-size: 42px; line-height: 1.1; margin: 0; padding: 0; } .about-info4b p { margin: 0; } .speaking-info1-1 > div > img { margin-top: 30px; width: 90%; } .speaking-info1-1 > div > h4 { margin: 0 0 5px; font-size: 18px; } .speaking-info1-1 > div > p { margin-top: 0; padding-top: 0; } h3.speaking-info1-2 > small { display: block; font-size: 19px; color: #333; font-weight: 700; } table.speaking-info1-3 > tbody > tr:first-child > td { font-weight: 700; } table.speaking-info1-3 > tbody > tr:first-child > td + td { background-color: #FFBB00; color: #fff; font-weight: 700; } table.speaking-info1-3 > tbody > tr + tr > td { color: #FFBB00; font-weight: 700; } table.speaking-info1-3 > tbody > tr + tr + tr > td:first-child { font-weight: 700; } table.speaking-info1-3 > tbody > tr + tr + tr > td { height: 90px; color: #333; font-weight: normal; } .speaking-info1-4 > div > div { display: block; border: 1px solid #e5e5e5; padding: 12px 20px; border-radius: 15px; } .speaking-info1-4 > div > div > h5 { display: inline-block; color: #777; } @media all and (max-width: 480px){ .speaking-info1-4 > div > div > h5 { padding-right: 60px; } } .speaking-info1-4 > div > div > h5 > span { color: #FFBB00; } .speaking-info1-4 > div > div > a { position: absolute; display: inline-block; top: 21px; right: 32px; } .speaking-info1-4 > div > div i { position: absolute; display: inline-block; color: #FFBB00; top: 13px; right: 42px; } .speaking-info2-1 { border: 1px solid #e5e5e5; height: 280px; padding: 40px; text-align: center; } .speaking-info2-1 > h6 { margin-top: 30px; text-align: center; padding: 0 40px; line-height: 1.5; font-size: 14px; color: #777; } @media (max-width:767px){ .speaking-info2-1 { padding: 30px 10px; } .speaking-info2-1 > h6 { padding: 0 10px; } } .speaking-info2-2 { border: 1px solid #e5e5e5; padding: 20px 10px; } .speaking-info2-2 > .col-sm-3 { text-align: center; } .speaking-info2-2 > .col-sm-3 > img { width: 100%; } .speaking-info2-2 > .col-sm-9 > p { margin: 0 0 5px; } .speaking-info2-2 > .col-sm-9 > p > span { font-weight: 700; color: #333; } @media (max-width:992px){ .speaking-info2-2 > .col-sm-3 > img { width: 155px; } } .speaking-info2-2 > hr { margin-top: 5px; margin-bottom: 20px; border: 0; border-top: 1px solid #eeeeee; } .speaking-info2-3 { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 20px 10px; } .speaking-info2-3 > .col-xs-2 { text-align: center; } .speaking-info2-3 > .col-xs-2 > img { width: 100%; } .speaking-info2-3 > .col-xs-10 > p { margin: 0 0 5px; } .speaking-info2-3 > .col-xs-10 > p > span { font-weight: 700; color: #333; } .speaking-info2-3 > .col-xs-10 > p > span + span { margin-left: 15px; } @media (max-width:750px){ .speaking-info2-3 .col-xs-9 { margin-top: 0; } } .speaking-info2-4 > div > div { border: 1px solid #e5e5e5; padding: 20px 5px; text-align: center; } .speaking-info2-4 > div > div > div.circle1 { border: 4px solid #FA8144; display: inline-block; padding: 0 0; vertical-align: middle; text-align: center; border-radius: 105px; width: 105px; height: 105px; font-weight: bolder; } .speaking-info2-4 > div > div > div.circle2 { border: 4px solid #0DB2B8; display: inline-block; padding: 0 0; vertical-align: middle; text-align: center; border-radius: 105px; width: 105px; height: 105px; font-weight: bolder; } .speaking-info2-4 > div > div > div.circle3 { border: 4px solid #00ADEF; display: inline-block; padding: 0 0; vertical-align: middle; text-align: center; border-radius: 105px; width: 105px; height: 105px; font-weight: bolder; } .speaking-info2-4 > div > div > div > h5 { line-height: 1.1; margin-top: 40%; font-size: 14px; } .speaking-info2-4 > div > div > div > h5.mt { margin-top: 33%; } .speaking-info3-1 { border: 1px solid #e5e5e5; background-color: #FCFCFC; text-align: center; } .speaking-info3-2 > div > h1 { margin: 0; } .speaking-info3-2 > div > h4 { display: inline-block; } .speaking-info3-2 > div > a.btn-circle-tscolor { display: inline-block; margin-top: -5px; margin-left: 20px; } .speaking-info3-2 > div > ul > li { color: #777; } .speaking-info3-2 > div > ul > li > span { color: #333; font-weight: 700; } .speaking-info3-3 { border: 1px solid #CBE5EC; background-color: #FBFEFF; font-size: 13px; padding: 20px 30px; } .speaking-info3-3 > div > div.col-sm-8 { margin-top: 10px; } .speaking-info3-3 > div > div > span { color: #00ADEF; font-weight: 700; } .speaking-info3-3 > a.btn-circle-tscolor { color: #00ADEF; font-weight: 700; } table.grammar1-3 > tbody > tr:first-child > td { color: #333; font-weight: 700; } table.grammar1-3 > tbody > tr > td { padding-left: 10px; padding-right: 10px; } table.grammar1-3 > tbody > tr > td:first-child { background-color: #FFBB00; color: #fff; font-weight: 700; } table.grammar1-3 > tbody > tr + tr > td { color: #FFBB00; font-weight: 700; } table.grammar1-3 > tbody > tr > td.level { background-color: #F5F5F5; color: #777; font-weight: 700; } .grammar2-1 > div > img { margin-top: 10px; width: 90%; } .grammar2-1 > div > h4 { margin: 0 0 5px; font-size: 18px; } .grammar2-1 > div > p { margin-top: 0; padding-top: 0; } .lecture-info1 > div > div:nth-of-type(1) > div { border: 5px solid #00ADEF; padding: 0; vertical-align: middle; text-align: center; border-radius: 85px; width: 100%; height: 85px; font-weight: bolder; } .lecture-info1 > div > div:nth-of-type(1) > div > h2 { display: inline-block; width: 30%; color: #00ADEF; margin-top: 14px; vertical-align: top; text-align: center; } .lecture-info1 > div > div:nth-of-type(1) > div > h5 { display: inline-block; width: 60%; color: #333; margin-top: 26px; text-align: left; } .lecture-info1 > div > div:nth-of-type(1) > div > h5.two { margin-top: 14px; } .lecture-info1 > div > div:nth-of-type(2) > p { margin-top: 0; margin-bottom: 9px; font-size: 14px; line-height: 22px; text-align: left; } .lecture-info1 > div > div:nth-of-type(2) > p.two { margin-top: 10px; } .lecture-info1 > div > div:nth-of-type(2) > p.three { margin-top: 20px; } .lecture-info1 > div > div:nth-of-type(2) > p > small { display: block; font-size: 90%; color:#f60 } @media (max-width: 768px) { .lecture-info1 > div > div:nth-of-type(1) > div { border: 3px solid #00ADEF; padding: 0; vertical-align: middle; text-align: center; border-radius: 8px; width: 100%; height: 50px; font-weight: bolder; } .lecture-info1 > div > div:nth-of-type(1) > div > h5, .lecture-info1 > div > div:nth-of-type(1) > div > h5.two { width: 100%; color: #333; margin-top: 10px; text-align: center; } .lecture-info1 > div > div:nth-of-type(2) { margin-top: 8px; } .lecture-info1 > div > div:nth-of-type(2) > p, .lecture-info1 > div > div:nth-of-type(2) > p.two, .lecture-info1 > div > div:nth-of-type(2) > p.three { margin-top: 0; } } .lecture-info1 > div.col-sm-3 > div { border: 5px solid #00ADEF; padding: 0; vertical-align: middle; text-align: center; border-radius: 85px; width: 100%; height: 85px; font-weight: bolder; } .lecture-info1 > div.col-sm-3 > div > h2 { display: inline-block; width: 30%; color: #00ADEF; margin-top: 14px; vertical-align: top; text-align: center; } .lecture-info1 > div.col-sm-3 > div > h5 { display: inline-block; width: 60%; color: #333; margin-top: 26px; text-align: left; } .lecture-info1 > div.col-sm-3 > div > h5.two { margin-top: 14px; } .lecture-info1 > div.col-sm-9 > p { margin-top: 0; margin-bottom: 9px; font-size: 14px; line-height: 22px; text-align: left; } .lecture-info1 > div.col-sm-9 > p.two { margin-top: 10px; } .lecture-info1 > div.col-sm-9 > p.three { margin-top: 20px; } .lecture-info1 > div.col-sm-9 > p > small { display: block; font-size: 90%; color:#f60 } @media (max-width: 767px) { .lecture-info1 > div.col-sm-3, .lecture-info1 > div.col-sm-9 { margin-bottom: 15px; } .lecture-info1 > div.col-sm-9 > p, .lecture-info1 > div.col-sm-9 > p.two, .lecture-info1 > div.col-sm-9 > p.three { margin-top: 0; } } .warning-email { font-size: 13px; padding: 20px; } .warning-email > i { display: inline-block; vertical-align: top; } .warning-email > h5 { display: inline-block; margin: 3px 0 0 5px; } .warning-email > p { margin: 10px 0 0; line-height: 1.7 } /* ############################## 수업료 및 수강신청 ############################## */ em.lecture-event { font-size: 13px; color: #FF6600; font-weight: 600; background-color: #FFFBE8; border: 1px solid #FCBE86; padding: 4px 7px; font-style: normal; border-radius: 3px; } .class-step-area > li { float: left; position: relative; min-height: 1px; padding: 15px 5px; width: 23.875%; text-align: center; font-size: 14px; font-weight: bolder; letter-spacing: -1px; color: #999999; background-color: #FCFCFC; border: 1px solid #DDDDDD; border-radius: 8px; } .class-step-area > li + li { margin-left: 1.5%; } .class-step-area > li.on { color: #FFFFFF; background-color: #FFBB00; border: 1px solid #FFBB00; } @media (max-width: 767px) { .class-step-area > li { width: 49%; margin-left: 0; } .class-step-area > li + li { margin-left: 2%; } .class-step-area > li + li + li { margin-top: 6px; margin-left: 0; } .class-step-area > li + li + li + li { margin-top: 6px; margin-left: 2%; } } /* ============ 코멘트 박스 ============ */ .class-info1, .class-info2 { border: 1px solid #DDDDDD; background-color: #FFFFFF; font-size: 14px; padding: 20px 20px; } .class-info1 > h5, .class-info2 > h5 { display: inline-block; margin: 3px 0 0 5px; color: #333333; font-size: 17px; letter-spacing: -1px; } .class-info1 > h5 > i, .class-info2 > h5 > i { display: inline-block; font-size: 22px; color: #FFBB00; margin-right: 10px; } .class-info1 > p, .class-info2 > p { margin: 6px 0 0 34px; color: #999999; } .class-info1 > p > span, .class-info2 > p > span { color: #FF6600; } .class-info1 > p.text-talk, .class-info2 > p.text-talk { color: #00ADEF; font-weight: 500; } .class-info1 > p.text-talk > span, .class-info2 > p.text-talk > span { color: #00ADEF; font-weight:700; } @media (max-width: 767px) { .class-info1 > h5, .class-info2 > h5 { font-size: 18px; letter-spacing: 0; } .class-info1 > p { display: none; } .class-info2 > p { display: block; } } .class-info3 { border: 1px solid #DDDDDD; background-color: #FFFFFF; font-size: 14px; padding: 15px; } .class-info3 > h5 { display: inline-block; margin: 3px 0 0 5px; color: #333333; font-size: 17px; letter-spacing: -1px; } .class-info3 > h5 > i { display: inline-block; font-size: 22px; color: #FFBB00; margin-right: 10px; } .class-info3 > ul > li { margin: 3px 0; color: #555555; } .class-info3 > ul > li > span { color: #333333; font-weight: 600; } .class-help-info1 { } .class-help-info1 > h5 { display: inline-block; margin: 3px 0 0 5px; color: #00ADEF; font-size: 19px; letter-spacing: -1px; } .class-help-info1 > p { color: #666666; margin: 3px 0; } .class-help-info1 > p.sub { color: #999999; margin: 3px 0 0 15px; } .class-help-info1 > p.sub-br { color: #999999; padding-left: 25px; } /* ============ 소문내기 이벤트 박스 ============ */ .class-display { display: inline-block; padding: 20px; background-color: #FFFEF9; border: 2px solid #FF6600; border-radius: 10px; width: 100%; } .class-display > div { float: left; position: relative; min-height: 1px; width: 100%; } .class-display > div { padding-left: 0; padding-right: 15px; } .class-display > div + div { padding-left: 15px; padding-right: 0; } .class-display > div > .event-title > h1 { float: left; position: relative; font-size: 48px; margin: 0 8px 0 0; padding: 0; } .class-display > div > .event-title > h5 { float: left; position: relative; font-size: 16px; color: #333333; letter-spacing: -1px; margin-top: 18px; } .class-display > div > .event-title > h5 > small { font-size: 14px; font-weight: normal; color: #666666; clear:both; display: block; margin-bottom: 3px; letter-spacing: 0; } .class-display > div > .event-title > h5 > span { color: #FFFFFF; background-color: #FF6600; } .class-display > div > .event-title > h5 > small > span { color: #FF6600; } @media (max-width: 767px) { .class-display > div, .class-display > div + div { width: 100%; padding: 0; } .class-display > div > .event-title > h1 { margin: 0 4px 0 0; padding: 0; } .class-display > div > .event-title > h5 { font-size: 14px; margin-top: 20px; } } .class-display > div > table > thead { border-top: 2px solid #FF6600; } .class-display > div > table > thead > tr > th { font-size: 13px; border-bottom: 1px solid #FF6600; font-weight: 700; color: #FF6600; } .class-display > div > table > tbody { border-bottom: 1px solid #DDDDDD; } .class-display > div > table > tbody > tr > td, .class-display > div > table > tbody > tr > td > label { font-size: 13px; color: #666666; font-weight: 600; letter-spacing: -1px; } .class-display > div > table > tbody > tr > td > label.sale { color: #AAAAAA; text-decoration: line-through; } .table-display > table > thead { border-top: 2px solid #FFBB00; } .table-display > table > thead > tr > th { font-size: 13px; border-bottom: 1px solid #FFBB00; font-weight: 700; color: #FFBB00; } .table-display > table > tbody { border-bottom: 1px solid #DDDDDD; } .table-display > table > tbody > tr > td, .table-display > table > tbody > tr > td > label { font-size: 13px; color: #666666; font-weight: 600; letter-spacing: -1px; } .table-display > table > tbody > tr > td > label.sale { color: #AAAAAA; text-decoration: line-through; } /* ================== 선택 결과 표시 ================== */ .choose-result { display: inline-block; padding: 0; background-color: #FAFAFA; border-top: 1px solid #DDDDDD; width: 100%; } .choose-result > div { float: left; position: relative; min-height: 1px; width: 50%; padding: 10px; background-color: transparent; } .choose-result > div > table { border: 2px solid #FFBB00; background-color: #FFFFFF; } .choose-result > div > table > tbody > tr > td { font-size: 12px; color: #FFBB00; font-weight: 600; text-align: left; } .choose-result > div > table > tbody > tr > td + td { font-size: 14px; color: #666666; font-weight: 500; padding-left: 2px; padding-right: 2px; } .choose-result > div > table > tbody > tr:last-child > td + td { font-size: 18px; font-weight: 600; color: #333333; } .choose-result > div > table > tbody > tr:last-child > td:last-child { padding: 0; text-align: center; background-color: #FFBB00; } .choose-result > div > table > tbody > tr:last-child > td:last-child > button { padding: 0; border: 0; text-align: center; color: #FFFFFF; background-color: transparent; width: 100%; height: 100%; } .choose-result > div > table > tbody > tr:last-child > td:last-child > button > i { font-size: 26px; } @media (max-width: 767px) { .choose-result > div { float: none; width: 100%; padding: 15px 10px 0; } } /* ############################## 수업료 및 수강신청 ############################## */ /* ========================== 신청 수강정보 테이블 ========================== */ .table-order-list > table > thead { border-top: 2px solid #666666; background-color: #FCFCFC; } .table-order-list > table > thead > tr > th { font-size: 14px; border-bottom: 1px solid #666666; font-weight: 700; color: #666666; } .table-order-list > table > tbody { border-bottom: 1px solid #DDDDDD; } .table-order-list > table > tbody > tr > td { font-size: 14px; color: #666666; font-weight: 600; } .table-order-list > table > tbody > tr > td:first-child { font-size: 12px; } .table-order-list > table > tbody > tr > td:first-child > h5 { font-size: 14px; color: #333333; } .table-order-list > table > tbody > tr > td:last-child { color: #FFBB00; } .table-order-list > table > tbody > tr:last-child > td { color: #FFBB00; font-size: 16px; font-weight: 600; } .table-order-list > table > tbody > tr:last-child > td:last-child { background-color: #FFBB00; color: #FFFFFF; font-size: 24px; font-weight: 700; } .table-order-list > table > tbody > tr:last-child > td:last-child > small { font-size: 14px; font-weight: 600; } .table-classsc-list > table > thead { border-top: 2px solid #666666; background-color: #FCFCFC; } .table-classsc-list > table > thead > tr > th { font-size: 14px; border-bottom: 1px solid #666666; font-weight: 700; color: #666666; } .table-classsc-list > table > tbody { border-bottom: 1px solid #DDDDDD; } .table-classsc-list > table > tbody > tr > td { font-size: 14px; color: #666666; font-weight: 600; } .table-classsc-list > table > tbody > tr > td:nth-child(1) { font-size: 12px; } .table-classsc-list > table > tbody > tr > td:nth-child(1) > h5 { font-size: 14px; color: #333333; padding: 0; margin: 0; } .table-classsc-list > table > tbody > tr > td:nth-child(2) { color: #FFBB00; } .table-classsc-list > table > tbody > tr > td:nth-child(3) { color: #FF6600; } @media (max-width: 767px) { .table-order-list > table > thead > tr > th, .table-order-list > table > tbody > tr > td, .table-order-list > table > tbody > tr > td:first-child > h5 { font-size: 13px; } .table-order-list > table > tbody > tr:last-child > td { font-size: 14px; } .table-order-list > table > tbody > tr:last-child > td:last-child { font-size: 18px; } } /* ================== 강사로 조회 ================== */ .order-tutor-list { display: inline-block; padding: 0; width: 100%; } .order-tutor-list > div { float: left; position: relative; min-height: 1px; width: 50%; margin-top: -1px; } .order-tutor-list > div:nth-child(odd) { padding: 0 6px 0 0; } .order-tutor-list > div:nth-child(even) { padding: 0 0 0 6px; } .order-tutor-list > div > table { border: 1px solid #DDDDDD; background-color: #FFFFFF; } .order-tutor-list > div > table > tbody > tr > td { font-size: 14px; color: #666666; font-weight: 600; text-align: left; } .order-tutor-list > div > table > tbody > tr > td + td > span { color: #aaaaaa; font-weight: normal; padding-left: 10px; padding-right: 10px; text-align: left; } .order-tutor-list > div > table > tbody > tr > td + td > a > i { font-size: 18px; color: #FF3366; } .order-tutor-list > div > table > tbody > tr > td:last-child { text-align: right; } .order-tutor-list > div > table > tbody > tr > td:last-child > a { padding: 8px 12px; color:#666666; background-color: transparent; border: 1px solid #AAAAAA; text-align: center; font-size: 13px; font-weight: 700; border-radius: 4px; } .order-tutor-list > div > table > tbody > tr > td:last-child > a:hover, .order-tutor-list > div > table > tbody > tr > td:last-child > a:focus, .order-tutor-list > div > table > tbody > tr > td:last-child > a:active { color:#555555; background-color:#FAFAFA; border-color:#A0A0A0; text-decoration: none; } .order-tutor-list > div > table > tbody > tr > td:last-child > a:active { background-image:none } .order-tutor-list > div > table > tbody > tr > td:last-child > a > i { font-size: 14px; margin-left: 8px; } .order-lettutor-list > div { float: left; position: relative; min-height: 1px; width: 50%; margin-bottom: 8px; } .order-lettutor-list > div:nth-child(odd) { padding: 0 6px 0 0; } .order-lettutor-list > div:nth-child(even) { padding: 0 0 0 6px; } .order-lettutor-list > div > table { border: 2px solid #FFBB00; } .order-lettutor-list > div > table > tbody > tr > td { font-size: 14px; color: #666666; font-weight: 600; text-align: left; } .order-lettutor-list > div > table > tbody > tr > td + td > h5 { color: #FFBB00; font-weight: 700; padding: 0; margin: 0; font-size: 14px; } .order-lettutor-list > div > table > tbody > tr > td + td > span { color: #aaaaaa; font-weight: normal; padding-left: 10px; padding-right: 10px; text-align: left; } .order-lettutor-list > div > table > tbody > tr > td + td > i { font-size: 18px; color: #FF3366; } .order-lettutor-list > div > table > tbody > tr > td:last-child { text-align: right; } .order-lettutor-list > div > table > tbody > tr > td:last-child > a { padding: 8px 12px; color:#fff; background-color:#FFBB00; border: 1px solid #0099CC; text-align: center; font-size: 13px; font-weight: 700; border-radius: 4px; } .order-lettutor-list > div > table > tbody > tr > td:last-child > a:hover, .order-lettutor-list > div > table > tbody > tr > td:last-child > a:focus, .order-lettutor-list > div > table > tbody > tr > td:last-child > a:active { color:#fff; background-color:#0099CC; border-color:#008CBA; text-decoration: none; } .order-lettutor-list > div > table > tbody > tr > td:last-child > a:active { background-image:none } .order-lettutor-list > div > table > tbody > tr > td:last-child > a > i { font-size: 14px; margin-left: 8px; } @media (max-width: 767px) { .order-tutor-list > div, .order-lettutor-list > div { float: none; width: 100%; } .order-tutor-list > div:nth-child(odd), .order-lettutor-list > div:nth-child(odd) { padding: 0; } .order-tutor-list > div:nth-child(even), .order-lettutor-list > div:nth-child(even) { padding: 0; } } .order-lettutor-list > div.no-lat-tutor { float: left; position: relative; min-height: 1px; width: 100%; margin-bottom: 8px; border: 2px solid #FFBB00; text-align: center; padding: 18px; font-size: 14px; color: #666666; font-weight: 600; } .order-choise-sctype { float: left; position: relative; min-height: 1px; width: 100%; padding: 20px; margin-bottom: 8px; border: 2px solid #FFBB00; background-color: #FFFFFF; } .order-choise-recom { float: left; position: relative; min-height: 1px; width: 100%; padding: 20px; margin-bottom: 8px; border: 2px solid #FCBE86; background-color: #FFFBE8; } .order-choise-time { float: left; position: relative; min-height: 1px; width: 100%; padding: 20px; margin-bottom: 8px; border: 1px solid #CCCCCC; background-color: #FCFCFC; } .order-choise-time button, .order-choise-recom button { padding: 9px 20px; font-weight: 700; border-radius: 0; background-color: #666666; border: 1px solid #555555; color: #FFFFFF; } .order-choise-time button:hover, .order-choise-time button:focus, .order-choise-time button:active, .order-choise-time button.active, .order-choise-recom button:hover, .order-choise-recom button:focus, .order-choise-recom button:active, .order-choise-recom button.active { color:#FFFFFF; border: 1px solid #444444; background-color: #555555; } .order-choise-time button.choise-time2 { display: none; } @media (max-width: 767px) { .order-choise-time button, .order-choise-recom button { padding: 9px 12px; } .order-choise-time button.choise-time1 { display: none; } .order-choise-time button.choise-time2 { display: block; } } /* ========================== LAT 신청 ========================== */ .let-sub-title{ margin-top: 10px; margin-bottom: 20px; border-bottom: 2px solid #666666; } .let-sub-title > h4{ font-size: 18px; color: #333333; } .let-sub-title > h4 > span { color: #FFBB00; } .let-sub-title > h4 > small { float: right; font-size: 15px; color: #999999; margin-top: 8px; } .let-sub-title > h4 > small > em { color: #FF6600; font-style: normal; } .let-step-container { margin-left: -5px; margin-right: -5px; } .let-step-container > div { float: left; position: relative; width: 25%; min-height: 1px; padding-right: 5px; padding-left: 5px; } .let-step-container > div > div { border: 2px solid #DDDDDD; border-radius: 10px; text-align: center; padding: 7px 15px; } .let-step-container > div > div > h3 { font-size: 18px; color: #999999; margin: 0 0 10px; padding: 0 0 7px; border-bottom: 1px solid #DDDDDD; } .let-step-container > div > div > p { font-size: 14px; font-weight: 700; color: #999999; } .let-step-container > div > div.focus { border: 2px solid #01AAED; } .let-step-container > div > div.focus > h3 { color: #01AAED; border-bottom: 1px solid #01AAED; } .let-step-container > div > div.focus > p { color: #333333; } @media (max-width: 540px) { .let-step-container > div { width: 50%; margin-bottom: 10px; } } .let-time-list { padding: 0; } .let-time-list > div:before, .let-time-list > div:after { display: table; content: " "; } .let-time-list > div:after { clear: both; } .let-time-list > div:before, .let-time-list > div:after { display: table; content: " "; } .let-time-list > div:after { clear: both; } .let-time-list > div { margin-bottom: 15px; } .let-time-list > div > div { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .let-time-list > div > div:first-child { width: 70%; font-size: 15px; font-weight: 600; color: #444444; margin-top: 6px; } .let-time-list > div > div:first-child > span { color: #FFBB00; } .let-time-list > div > div:last-child { width: 30%; text-align: right; } .let-time-list > div > div:last-child > a { padding: 7px 10px 7px 15px; font-weight: 600; } .let-time-list > div > div:last-child > a > i { margin-left: 10px; } @media (max-width: 480px) { .let-time-list > div > div:first-child { width: 100%; text-align: center; } .let-time-list > div > div:last-child { width: 100%; text-align: center; margin-top: 14px; } .let-time-list > div > div:last-child > a { padding: 10px 20px 10px 25px; } .let-time-list > div > div:last-child > a > i { margin-left: 15px; } } /* ========================== LAT 신청 ========================== */ /* ========================== 결제 정보입력 테이블 ========================== */ .table-order-decision > table > tbody { border-top: 2px solid #666666; border-bottom: 1px solid #DDDDDD; } .table-order-decision > table > tbody > tr > th { font-size: 14px; background-color: #FCFCFC; font-weight: 600; color: #666666; } .table-order-decision > table > tbody > tr > td { font-size: 12px; color: #666666; text-align: left; } .table-order-decision > table > tbody > tr > td label > span { font-size: 12px; color: #333333; } .table-order-decision > table > tbody > tr > td a { font-size: 12px; } /* ######################################## 고객센터 / 커뮤니티 ############################################## */ .community-header-category { margin: 0; padding: 0; } .community-header-category > li { display: inline-block; margin-top: 5px; } .community-header-category > li > a { display: inline-block; position:relative; min-height: 1px; padding: 9px 15px; text-align: center; font-size: 14px; font-weight: bolder; color: #666666; background-color: #FCFCFC; border: 1px solid #DDDDDD; border-radius: 4px; } .community-header-category > li > a:hover { color: #333333; background-color: #FAFAFA; text-decoration: none; } .community-header-category > li + li { margin-left: 1px; } .community-header-category > li.active > a { color: #FFFFFF; background-color: #FFBB00; border: 1px solid #FFBB00; } .community-header-category > li.active > a:hover { background-color: #FFBB00; } @media (max-width: 767px) { .community-header-category > li > a { padding: 9px 12px; } } .community-header { margin-left: -5px; margin-right: -5px; } @media (max-width: 767px) { .community-header { margin-left: 0; margin-right: 0; } } .community-header > div:first-child > p { margin-top: 15px; margin-bottom: 0; } .community-header > div:last-child > div > div:last-child > div > .input-group-btn > .btn { padding: 9px; } .community-header > div:last-child > div > div:last-child > div > .input-group-btn > .btn:first-child { background-color: #EEEEEE; } .community-header > div:last-child > div > div:last-child > div > .input-group-btn > .btn > i { font-size: 18px; margin-left: 3px; margin-left: 3px; } .community-notice > table > thead { border-top: 2px solid #666666; } .community-notice > table > thead > tr > th { font-size: 14px; font-weight: 600; color: #666666; border-bottom: 1px solid #666666; } .community-notice.talk-color > table > thead { border-top: 2px solid #FFBB00; } .community-notice.talk-color > table > thead > tr > th { border-bottom: 1px solid #FFBB00; } .community-notice.talk-color > table > tbody > tr > td:last-child > button { padding: 7px 10px; font-weight: 600; font-size: 12px; } .community-notice.talk-color > table > tbody > tr > td:last-child > button > i { margin-left: 10px; } @media (max-width: 767px) { .community-notice.talk-color > table > tbody > tr > td:last-child > button { padding: 5px 7px; font-weight: 600; font-size: 12px; } } .community-notice > table > tbody > tr > td { font-size: 14px; } .community-notice > table > tbody > tr > td > a { font-weight: 600; color: #666666; } .community-notice > table > tbody > tr > td > span.label, .community-notice > table > tbody > tr > td > a > span.label { font-size: 10px; padding: 2px 4px; } .community-notice > table > tbody > tr > td > span.label-reply, .community-notice > table > tbody > tr > td > a > span.label-reply { font-size: 10px; padding: 2px 4px; background-color: #FF6600; } .community-notice > table > tbody > tr > td > span.label-new, .community-notice > table > tbody > tr > td > a > span.label-new { margin-left: 8px; padding: 1px 4px; border: 1px solid #D64E02; background-color: #FF6600; } .community-notice > table > tbody > tr > td > span.admin-name, .community-notice > table > tbody > tr > td > a > span.admin-name { font-size: 11px; font-weight: 800; color: #FFBB00; } .community-notice > table > tbody > tr > td > span.default-name, .community-notice > table > tbody > tr > td > a > span.default-name { font-weight: 600; color: #FF6600; } .community-notice > table > tbody > tr > td > a > span.keyword { font-weight: 700; background-color: #A2E4FF; color: #000000; padding: 2px 0; } /* =================== Q&A 게시판 =================== */ .community-notice > table.qna-list > tbody > tr > td { padding-top: 5px; padding-bottom: 5px; } .community-notice > table.qna-list > tbody > tr > td:nth-child(2) { text-align: left; } .community-notice > table.qna-list > tbody > tr > td:nth-child(2) > a { font-weight: normal; } .community-notice > table.qna-list > tbody > tr > td:nth-child(2) > a > big { font-size: 16px; font-weight: 700; color: #333333; margin-right: 5px; } .community-notice > table.qna-list > tbody > tr > td:nth-child(3) { color: #666666; font-size: 12px; } .community-notice > table.qna-list > tbody > tr > td:nth-child(4) { color: #999999; font-size: 12px; } .community-notice > table.qna-list > tbody > tr > td:last-child > a { padding: 6px 10px; font-weight: normal; } .community-notice > table.qna-list > tbody > tr > td:last-child > a.btn-process-y { color: #666666; border: 1px solid #999999; background-color: #FFFFFF; } .community-notice > table.qna-list > tbody > tr > td:last-child > a.btn-process-n { color: #FF6600; border: 1px solid #FFFFFF; background-color: #FFFFFF; } .community-shot-review > .review-title > h3 { float: left; } .community-shot-review > .review-title > p { float: right; margin-top: 20px; } @media (max-width: 767px) { .community-shot-review > .review-title > h3 { float: none; } .community-shot-review > .review-title > p { float: none; margin: 0 0 10px 0; text-align: center; } } .community-shot-review > ul { border-top: 2px solid #666666; } .community-shot-review > ul > li { display: block; width: 100%; border-bottom: 1px solid #DDDDDD; margin: 0; } .community-shot-review > ul > li > dl { display: table; margin: 0; padding: 0; width: 100%; } .community-shot-review > ul > li > dl > dt, .community-shot-review > ul > li > dl > dd { float: left; position: relative; min-height: 1px; margin: 0; padding: 0; } /* .community-shot-review > ul > li > dl > dt:nth-child(1) { width: 17%; padding-left: 10px; padding-right: 10px; background-color: #EEEEEE; } .community-shot-review > ul > li > dl > dd:nth-child(2) { width: 68%; padding-left: 10px; padding-right: 10px; background-color: #DDDDDD; } .community-shot-review > ul > li > dl > dd:nth-child(3) { width: 15%; background-color: #CCCCCC; } */ .community-shot-review > ul > li > dl > dd { width: 100%; padding: 10px; } .community-shot-review > ul > li > dl > dd > p { margin: 0; padding: 0; } .community-shot-review > ul > li > dl > dd > p:nth-child(1) { font-size: 12px; color: #999999; } .community-shot-review > ul > li > dl > dd > p:nth-child(1) > span:nth-child(1) { color: #FFBB00; font-weight: 700; } .community-shot-review > ul > li > dl > dd > p:nth-child(1) > span + span { color: #DDDDDD; font-weight: normal; padding-left: 10px; padding-right: 10px; } .community-shot-review > ul > li > dl > dd > p:nth-child(1) > span:nth-child(3) { color: #333333; font-weight: 700; padding: 0; } .community-shot-review > ul > li > dl > dd > p:nth-child(2) { font-size: 14px; margin-top: 5px; } .community-shot-review > ul > li > dl > dd > p:nth-child(2) > a { font-weight: 700; color: #333; text-decoration:underline; } .community-shot-review > ul > li > dl > dd > p:nth-child(2) > span.label-new { margin-left: 8px; padding: 1px 4px; border: 1px solid #D64E02; background-color: #FF6600; } .community-shot-review > ul > li > dl > dd > p:nth-child(3) { font-size: 14px; color: #666666; margin-top: 0; } .community-shot-review > ul > li > dl > dd > p:nth-child(3) > a { padding: 3px 6px; font-size: 11px; margin-left: 20px; } /* ######################################## 고객센터 / 커뮤니티 ############################################## */ .btn-calendar > div > a:focus { outline:0 } .btn-calendar > a, .btn-calendar > button, .btn-calendar > div > a, .btn-calendar > div > button { margin: 0; padding: 3px 4px; font-size: 12px; font-weight: 600; border-radius: 2px; } .btn-calendar > div > ul { float:left; display:none; position:absolute; z-index:1000; top:100%; left:0; min-width: 100px; padding: 0 0; margin:2px 0 0; list-style:none; font-size:14px; background-color:#fff; } .btn-calendar > div > ul.dropdown-menu-right { left:auto; right:0 } .btn-calendar > div > ul > li { border-bottom: 1px solid #EEEEEE; } .btn-calendar > div > ul > li:last-child { border-bottom: 0; } .btn-calendar > div > ul > li.dropdown-header { border-bottom: 0; padding: 0; margin: 0; } .btn-calendar > div > ul > li > a, { display:block; clear:both; padding: 5px 10px; font-weight: 600; line-height:1.42857143; color:#333; text-align: center; } .btn-calendar > div > ul > li > a:hover, .btn-calendar > div > ul > li > a:focus { text-decoration:none; color:#FFFFFF; background-color:#FFBB00; border: 0; outline: 0; } /* ######################################## 마이페이지 ############################################## */ /* ######################################## 선생님 사랑해요 ######################################## */ .tutor-hart-title > h1 { float: left; } .tutor-hart-title > a { float: right; margin-top: 58px; font-size: 14px; font-weight: 700; color: #666666; background-color: #FFFFFF; padding-left: 20px; padding-right: 14px; box-shadow:1px 1px 2px #ECECEC; } .tutor-hart-title > a > i { margin-left: 16px; font-size: 18px; } .tutor-hart-btn { display: none; } @media all and (max-width: 992px){ .tutor-hart-title > a { display: none; } .tutor-hart-btn { display: block; text-align: center; margin-bottom: 30px; } .tutor-hart-btn > a { margin-top: 10px; font-size: 14px; font-weight: 700; color: #666666; background-color: #FFFFFF; padding-left: 20px; padding-right: 14px; box-shadow:1px 1px 2px #ECECEC; } .tutor-hart-btn > a > i { margin-left: 16px; font-size: 18px; } } .cscenter-info1-1 > div > img { margin-top: 5px; width: 90%; } .cscenter-info1-1 > div > h4 { margin: 0 0 5px; font-size: 18px; } .cscenter-info1-1 > div > p { margin-top: 0; padding-top: 0; } .cscenter-info1-2 > div > h4, .cscenter-info1-2 > div > p { display: inline-block; margin: 0 20px; } .community2-1 { display: block; background-color: #FAFAFA; } .community-hart { position: absolute; z-index: 10; display: block; width: 207px; height: 184px; background: url('../images/06.community/img_6200_02_1.png') no-repeat 0 0; } .community-hart > img { position: absolute; z-index: 11; width: 100%; bottom: 0; } .community-hart > div { position: absolute; z-index: 12; width: 207px; height: 184px; background: url('../images/06.community/img_6200_02_3.png') no-repeat 0 0; text-align: center; } .community-hart > div > h1 { color: #fff; text-align: center; font-weight: 900; font-size: 38px; margin: 52px 0 0; padding: 0; } .community-hart > div > p { color: #fff; font-size: 16px; font-weight: 700; margin: -12px 0 0; padding: 0; text-align: center; } .tutor-hart-panel { display: inline-block; width: 100%; height: auto; padding: 30px 25px 25px; background-color: #FFFBF3; } .tutor-hart-panel > div { float: left; position: relative; min-height: 1px; padding: 0; } .tutor-hart-panel > div:first-child { width: 70%; background: url("../images/common/tutor_hart_3badge.png") no-repeat 100% 100%; } .tutor-hart-panel > div:last-child { width: 30%; } .tutor-hart-panel > div > h6 { font-size: 18px; color: #666666; margin: 0; padding: 0; } .tutor-hart-panel > div > h1 { font-size: 40px; color: #333333; margin: 0; padding: 0; line-height: 46px; letter-spacing: -2px; } .tutor-hart-panel > div > h1 > span { color: #FA406E; } .tutor-hart-panel > div > p { margin: 15px 0 0; font-size: 14px; color: #999999; font-weight: 600; } .tutor-hart-panel > div > p:last-child { margin: 15px 0 0; font-size: 12px; color: #FA406E; } .tutor-hart-panel > div + div > h5 { margin: 20px 0 0; font-size: 20px; color: #FF3366; text-align: center; padding: 0; } .tutor-hart-panel > div + div > h5 > small { display: block; margin: 10px 0 0; font-size: 14px; color: #666666; font-weight: 700; } .tutor-hart-panel > div + div > p { text-align: center; margin-top: 6px; } .tutor-hart-panel > div + div > h6 { margin: 5px 0 0; font-size: 14px; color: #666666; text-align: center; padding: 0; } @media (max-width: 768px) { .tutor-hart-panel > div:first-child { float: none; width: 100%; } .tutor-hart-panel > div:last-child { float: none; width: 100%; margin-top: 35px; } } @media (max-width: 480px) { .tutor-hart-panel { padding: 30px 15px 25px; } .tutor-hart-panel > div:first-child { background: url("../images/common/tutor_hart_3badge_s.png") no-repeat 100% 100%; } .tutor-hart-panel > div > h6 { font-size: 16px; text-align: center; } .tutor-hart-panel > div > h1 { font-size: 32px; text-align: center; line-height: 40px; } .tutor-hart-panel > div > h1 > span { color: #FA406E; } .tutor-hart-panel > div > p { font-size: 13px } .tutor-hart-panel > div > p > span { clear: both; display: block; } .tutor-hart-panel > div > p:last-child { margin: 15px 0 0; font-size: 12px; color: #FA406E; } } .tutor-hart-write-panel { display: inline-block; width: 100%; height: auto; border: 1px solid #E5E5E5; padding: 15px 18px 12px; background-color: #FFFFFF; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(1) > textarea { height: 60px; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(2) > button { width: 100%; height: 60px; color: #FFFFFF; font-weight: 600; border: 1px solid #454545; background: linear-gradient( to bottom, #777777, #454545 ); border-radius: 0; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(2) > button > i { font-size: 18px; margin-right: 6px; } .tutor-hart-write-panel > form > fieldset > p { color: #333333; font-size: 13px; padding: 0 7px; } .tutor-hart-write-panel > form > fieldset > p > span:nth-child(1) { color: #00ADEF; font-weight: 700; } .tutor-hart-write-panel > form > fieldset > p > span:nth-child(2) { color: #999999; } marquee { border-top: 2px solid #666666; border-bottom: 2px solid #666666; height: 209px; } .tutor-hart-list > table { table-layout: fixed; } .tutor-hart-list > table > colgroup > col:nth-child(1) { width: 13%; } .tutor-hart-list > table > colgroup > col:nth-child(3) { width: 12%; } .tutor-hart-list > table > tbody { border-top: 2px solid #666666; } marquee > .tutor-hart-list > table > tbody { border-top: 0; } .tutor-hart-list > table > tbody > tr > td { font-size: 14px; vertical-align: top; padding: 10px; text-align: center; } .tutor-hart-list > table > tbody > tr > td:nth-child(1) { font-size: 13px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) { text-align: left; padding-left: 15px; padding-right: 15px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > p { margin-top: 0; color: #999999; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > p > img, .tutor-hart-list > table > tbody > tr > td:nth-child(2) > p > a > img { width: 30px; margin-right: 8px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > p > span:nth-child(2) { color: #333333; font-weight: 700; margin-right: 8px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) { float: left; width: 82%; margin-top: 0; margin-right: 8px; color: #999999; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) > img, .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) > a > img { float: left; position: relative; min-height: 1px; padding: 0; width: 45px; margin-right: 8px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) > p { color: #777777; font-size: 13px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) > p:nth-of-type(1) > span:nth-of-type(1), .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(1) > p:nth-of-type(2) > span:nth-of-type(1) { color: #333333; font-weight: 700; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > div:nth-of-type(2) { float: right; width: 13%; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > p.heart-comment { font-size: 13px; } .tutor-hart-list > table > tbody > tr > td:last-child { vertical-align: middle; } @media (max-width: 480px) { /* .tutor-hart-list > table { table-layout: auto; } */ .tutor-hart-list > table > colgroup > col:nth-child(1) { width: 25%; } .tutor-hart-list > table > tbody > tr > td:nth-child(3) { display: none; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) { padding: 10px 5px; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(2) { text-align: center; margin-top: 10px; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(2) > button { width: auto; height: auto; padding: 10px 18px; color: #FFFFFF; font-weight: 600; border: 1px solid #454545; background: linear-gradient( to bottom, #777777, #454545 ); border-radius: 0; } .tutor-hart-write-panel > form > fieldset > .tutor-hart-textarea > div:nth-child(2) > button > i { font-size: 18px; margin-right: 6px; } } /* ######################################## 선생님 사랑해요 ######################################## */ .table.schedule-check > thead > tr > th { vertical-align: middle; text-align: center; padding: 4px; font-size: 85%; font-weight: normal; line-height: 160%; background-color: #FAFAFA; } .table.schedule-check > tbody > tr > td { vertical-align: top; padding: 3px; font-size: 85%; font-weight: normal; line-height: 80%; height: 43px; } .table.schedule-check > tbody > tr > td > p { font-size: 90%; } .table.schedule-check > tbody > tr > td > p.holiday { color: #C96D4A; } .table.schedule-check > tbody > tr > td > p.day-hidden { color: #ddd; } .table.schedule-check > tbody > tr > td > button { font-size: 12px; padding: 0 3px; font-weight: normal; background-color:#FFBB00; } .community-view { display: block; } .community-view > h5 { padding: 12px 20px; margin: 0; font-weight: 700; border-top: 2px solid #666666; border-bottom: 1px solid #666666; color: #666666; background-color: #FCFCFC; } .community-view > h5 > big { font-weight: 700; color: #222222; font-size: 18px; margin-right: 7px; } .community-view > .board-write { clear: both; display: block; padding: 12px 20px; border-bottom: 1px solid #E4E4E4; } .community-view > .board-write > * { font-size: 14px; } .community-view > .board-write > .pull-left > span:nth-child(1) { font-size: 15px; color: #FFBB00; font-weight: 600; } .community-view > .board-write > .pull-left > span:nth-child(1).admin-name { color: #FFBB00; font-weight: 800; } .community-view > .board-write > .pull-left > span:nth-child(1).default-name { color: #FF6600; font-weight: 800; } .community-view > .board-write > .pull-left > span + span { font-size: 12px; color: #999999; } .community-view > .board-write > .pull-right { font-size: 12px; color: #999999; } .community-container { padding: 20px 25px; } .community-container .button { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 959px) { .community-container { padding: 20px 15px; } .blog-container { padding: 20px 20px; } } @media only screen and (max-width: 479px) { .community-container { padding: 15px 10px; } .blog-container { padding: 15px 15px; } } .board-bottom { border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; padding: 12px 20px; font-size: 14px; } .board-bottom i { font-size: 16px; } .board-bottom .btn-icon { padding: 5px; } .board-file-list > li { list-style: none; display: block; padding: 5px 30px; } .board-file-list > li > a { color: #00f; text-decoration: underline; } .board-file-list > li > a:hover{ color: #00f; text-decoration: none; } .board-file-link { float: left; margin: 8px } .board-file-link a { color: #00f; text-decoration: underline; } .board-file-link a:hover { color: #00f; text-decoration: none; } .upload-options { display: inline-block; color: #555; } .upload-options .btn-default { padding: 6px 8px; font-size: 14px; } .upload-options .btn-default > i { font-size: 16px; } /* MYPAGE */ a.user-photo-s > img, img.user-photo-s { width:30px; } a.user-photo-m > img, img.user-photo-m { width:40px; } .page-loading { padding: 10px; text-align: center; color:#aaa; } /*===== Main tutor list =====*/ a.main-tutor-list { display: inline-block; padding: 3px; margin: 0; border-radius: 5px; } a.main-tutor-list:hover { background-color: #FFFFFF; } a.main-tutor-list > img { border: 1px solid #EEEEEE; border-radius: 4px; width: 100%; } a.main-tutor-list > img:hover { border: 1px solid #FFBB00; } a.main-tutor-list > span { display: block; font-size: 10px; color: #000000; font-weight: 600; } .main-tutor-hart-pop { width: 100%; height: 550px; } @media only screen and (max-width: 479px) { .main-tutor-hart-pop { height: 400px; } } span.label-new { margin-left: 8px; padding: 1px 4px; border: 1px solid #D64E02; background-color: #FF6600; } /*===== Footer =====*/ .pop-footer { border-top: 1px solid #ddd; padding: 12px 0; text-align: center; font-size: 11px; color: #777; background-color: #fff; } @media (max-width: 480px) { .pop-footer .icons-group { display: none; } } ul.default-list { clear: both; padding-top: 10px; } ul.default-list > li { clear: both; background: url("../images/common/dotted1.png") no-repeat 0 10px; margin: 0; padding: 0 0 2px 7px; font-size: 12px; text-align: left; color: #666666; font-weight: normal; } /* ul.default-list > li > dl { clear: both; font-size: 14px; color: #999; margin: 0; padding: 0; } ul.default-list > li dt { float: left; } ul.default-list > li dd { float: right; letter-spacing: -1px; } ul.default-list > li a { font-weight: normal; color: #666; } ul.default-list > li img.new { margin-left: 3px; } ul.default-list > li span.new { background-color: #FA8C00; color: #FFF; font-size: 9px; font-family: monospace, serif; font-weight: 800; padding: 0 4px 2px; -webkit-border-radius: 3px; border-radius: 3px; }*/ span.search-keyword { font-weight: 700; background-color: #A2E4FF; color: #000000; padding: 2px 0; } .table-quiz-result > thead > tr > th, .table-quiz-result > tbody > tr > td { font-size: 12px; } .table-quiz-result > thead > tr > th { font-weight: 700; } .book-quiz-list { display: block; width: 100%; clear: both; background: transparent; } .book-quiz-list > ul > li { list-style: none; display: block; clear: both; padding: 0; margin: 0; } .book-quiz-list > ul > li + li { padding: 10px 0; border-top: 1px dotted #DDDDDD; } .book-quiz-list > ul > li > dl { display: block; clear: both; } .book-quiz-list > ul > li > dl > dt, .book-quiz-list > ul > li > dl > dd { float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; font-size: 17px; font-weight: 100; } .book-quiz-list > ul > li > dl > dt { text-align: right; color: #00A8FF; font-weight: 300; } .book-quiz-list > ul > li > dl > dd { text-align: left; color: #333333; } .book-quiz-list > ul > li > dl > dd > p:first-child > button { font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 26px; text-decoration: none; color: #FF3366; border: 2px solid #FF3366; background-color: #FFFFFF; -webkit-border-radius: 26px; -moz-border-radius: 26px; } .book-quiz-list > ul > li > dl > dd > p + p { margin-top: 14px; } .book-quiz-list > ul > li > dl > dd > p > a { font-size: 15px; padding: 9px 15px; border-radius:20px; text-decoration: none; color: #000000; border: 1px solid #999999; -webkit-border-radius:20px; -moz-border-radius:20px; } .book-quiz-list > ul > li > dl > dd > p > a + a { margin-left: 5px; } .book-quiz-list > ul > li > dl > dd > p > button { font-size: 15px; padding: 9px; border-radius:20px; text-decoration: none; color: #000000; border: 1px solid #999999; background-color: #FFFFFF; -webkit-border-radius:20px; -moz-border-radius:20px; } .book-quiz-list > ul > li > dl > dd > p > button.pretest { border: 1px solid #00A8FF; background-color: #F1FAFF; } .book-quiz-list > ul > li > dl > dd > p > button.sentence { border: 1px solid #FF3366; background-color: #FFF6F8; } .book-quiz-list > ul > li > dl > dd > p > a > i { color: #999999; } .book-quiz-list > ul > li > dl > dd > p > a.pretest-active, .book-quiz-list > ul > li > dl > dd > p > a.pretest:hover { color: #00A8FF; border: 1px solid #00A8FF; font-weight: 600; } .book-quiz-list > ul > li > dl > dd > p > a.sentence-active, .book-quiz-list > ul > li > dl > dd > p > a.sentence:hover { color: #FF3366; border: 1px solid #FF3366; font-weight: 600; } .book-quiz-list > ul > li > dl > dd > p > a.pretest-active > i, .book-quiz-list > ul > li > dl > dd > p > a.pretest:hover > i, .book-quiz-list > ul > li > dl > dd > p > a.sentence-active > i, .book-quiz-list > ul > li > dl > dd > p > a.sentence:hover > i { color: #111111; } .book-quiz-list > ul > li > dl > dd > h5 { margin: 0; padding: 0; font-size: 20px; font-weight: 100; color: #333333; } /* .book-quiz-list > ul > li > dl > dt:nth-of-type(1) { text-align: left; font-size: 14px; padding-top: 10px; } .book-quiz-list > ul > li > dl > dt:nth-of-type(1) > h5 { font-size: 16px; color: #000000; margin: 4px 0 0; } .book-quiz-list > ul > li > dl > dt:nth-of-type(2) { font-size: 14px; } .book-quiz-list > ul > li > dl > dt:nth-of-type(2) > h5 { font-size: 14px; } .book-quiz-list > ul > li > dl > dd > a { float: left; position: relative; width: 100%; text-align: center; border: 1px solid #DEDEDE; padding: 10px; background-color: #FFFFFF; color: #000000; font-size: 15px; font-weight: 800; border-radius: 4px; } .book-quiz-list > ul > li > dl > dd > button { margin-top: 5px; } .book-quiz-list > ul > li > dl > dd.active > a, .book-quiz-list > ul > li > dl > dd > a:hover { border: 1px solid #FF3366; background-color: #FF3366; color: #FFFFFF; text-decoration: none; } .book-quiz-list > ul > li > dl > dd > a > small { font-size: 75%; color: #777777; font-weight: 600; } .book-quiz-list > ul > li > dl > dd > a > i { font-size: 60px; clear: both; color: #FF3366; font-weight: normal; } .book-quiz-list > ul > li > dl > dd > a:hover > small, .book-quiz-list > ul > li > dl > dd > a:hover > i, .book-quiz-list > ul > li > dl > dd.active > a > small, .book-quiz-list > ul > li > dl > dd.active > a > i { color: #FFFFFF; } */ /* .quiz-panel-list { display: block; width: 100%; clear: both; } .quiz-panel-list > ul > li { list-style: none; display: block; clear: both; padding: 0; margin: 0; } .quiz-panel-list > ul > li + li { padding-top: 10px; } .quiz-panel-list > ul > li > dl { display: block; clear: both; } .quiz-panel-list > ul > li > dl > dt, .quiz-panel-list > ul > li > dl > dd { float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; width: 25%; text-align: center; color: #666666; } .quiz-panel-list > ul > li > dl > dt:nth-of-type(1) { text-align: left; font-size: 14px; padding-top: 10px; } .quiz-panel-list > ul > li > dl > dt:nth-of-type(1) > h5 { font-size: 16px; color: #000000; margin: 4px 0 0; } .quiz-panel-list > ul > li > dl > dt:nth-of-type(2) { font-size: 14px; } .quiz-panel-list > ul > li > dl > dt:nth-of-type(2) > h5 { font-size: 14px; } .quiz-panel-list > ul > li > dl > dd > a { float: left; position: relative; width: 100%; text-align: center; border: 1px solid #DEDEDE; padding: 10px; background-color: #FFFFFF; color: #000000; font-size: 15px; font-weight: 800; border-radius: 4px; } .quiz-panel-list > ul > li > dl > dd > button { margin-top: 5px; } .quiz-panel-list > ul > li > dl > dd.active > a, .quiz-panel-list > ul > li > dl > dd > a:hover { border: 1px solid #FF3366; background-color: #FF3366; color: #FFFFFF; text-decoration: none; } .quiz-panel-list > ul > li > dl > dd > a > small { font-size: 75%; color: #777777; font-weight: 600; } .quiz-panel-list > ul > li > dl > dd > a > i { font-size: 60px; clear: both; color: #FF3366; font-weight: normal; } .quiz-panel-list > ul > li > dl > dd > a:hover > small, .quiz-panel-list > ul > li > dl > dd > a:hover > i, .quiz-panel-list > ul > li > dl > dd.active > a > small, .quiz-panel-list > ul > li > dl > dd.active > a > i { color: #FFFFFF; } */ /* .question-panel */ .question-info { float: left; display: block; width: 100%; clear: both; padding: 13px 10px; background-color: #FFBB00; border-radius: 9px 9px 0 0; -webkit-border-radius: 9px 9px 0 0; -moz-border-radius: 9px 9px 0 0; } .question-info > .label { font-size: 14px; padding: 7px 8px; } /* .question-info > .label:nth-of-type(1) { float: left; } .question-info > .label:nth-of-type(2) { float: right; margin-left: 2px; } .question-info > .label:nth-of-type(3) { float: right; margin-left: 2px; } */ .question-info > .close { margin: 4px 4px 0 0; } #next-btn > .btn { font-size: 18px; margin: 0; padding: 7px 14px; } .question-panel > h5 { padding: 0; margin: 0; font-size: 15px; color: #555555; } .question-panel > h3 { padding: 0; margin: 0; font-size: 20px; font-style: italic; font-weight: 800; color: #333333; text-align: center; } .question-panel > h3 > span { color: #FF3366; } .question-answer > ul { font-size: 17px; margin: 0; padding: 0; } .question-answer > ul > li { display: block; margin: 0; } .question-answer > ul > li > a { display: block; color: #333333; padding: 7px; margin: 3px 0; font-weight: 500; text-decoration: none; border: 1px solid #CCCCCC; text-align: center; border-radius: 4px; } .question-answer > ul > li > a.disabled { pointer-events: none; cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } .question-answer > ul > li > a.choise { font-weight: 800; color: #FFFFFF; border-color: #222222; background-color: #555555; /* background-image:url('../images/quiz/bg_quiz_dotted1.gif'); background-repeat: repeat; background-position: 0 0;*/ opacity: 1; filter: alpha(opacity=100); } #next-btn > button { padding: 8px; } #question-check-mark { display: none; position: absolute; top: 40%; left: 50%; width: 330px; height: 330px; background-color: none; z-index: 999998; opacity: 0.9; filter: alpha(opacity=90); } .question-audio-play { position: absolute; left: -999px; top: -999px; } @media (max-width: 480px) { .question-panel > h3 { font-size: 17px; } .question-answer > ul { font-size: 15px; } } .me-video { position: relative; padding-bottom: 44.25%; padding-top: 0; height: 0; overflow: hidden; margin: 0 auto; width: 640px; height: 360px; } .me-video iframe { border: none; left: 0; top: 0; width: 640px; height: 360px; position: absolute; } /* mediaquery */ @media all and (max-width:640px) { .me-video { position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; margin: 0; width: 100%; } .me-video iframe { border: none; left: 0; top: 0; height: 100%; width: 100%; position: absolute; } }