/* -------------------------------------------------------------------------- * UnicornNet.com : LMS Default HTML Template * * file : common.css -> 기본 LAYOUT CSS * Version : 1.0 * * UnicornNet Copyright 2017 All Rights Reserved. * -------------------------------------------------------------------------- */ @charset "utf-8"; html, body, div, p, span, form, button, input, select, textarea, table, th, td, em, u { font-family: 'Nanum Gothic', 'Jeju Gothic', 'Gulim', 'Dotum', sans-serif, inherit; } /* ############################## TITLE LINE TYPE ############################## */ .hero-line { position: relative; display: block; width: 80px; height: 3px; margin: 0 auto; background-color: #FFBB00; } .hero-line.left { margin: 0 0; } .hero-line.black { background-color: #000000; } .title-line { padding-bottom: 4px; border-bottom: 1px solid #CCCCCC; } .pop-width { padding: 0 4%; } .pop-book-detail { padding: 15px 2%; } .ebook-detail { padding: 0 2% 10px; min-height: 300px; } /* [ header ] */ #me-header { height: 80px; padding-top: 15px; padding-bottom: 15px; position: relative; z-index: 997; background-color: #FFFFFF; } #me-header > div > div { float: left; position: relative; min-height: 1px; } #me-header > div > div:nth-of-type(2) { width: 30%; margin-top: 7px; } #me-header > div > div:nth-of-type(2) .form-control { padding: 10px; height: 40px; border: 3px solid #FF3366; } #me-header > div > div:nth-of-type(2) button { padding: 6px 12; margin-left: 3px; height: 40px; font-weight: 700; border-radius: 0; } #me-header > div > div:nth-of-type(3) { width: 40%; margin-top: 16px; } #me-header > div > div > a > h2 { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'malgun Gothic', '맑은고딕', sans-serif; color: #FF3366; 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: #DE2654; } */ #me-header.header-transparent .me-menu a { color: #FFFFFF; } #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: #FFFFFF; } #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: #FFFFFF; } .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: #CCCCCC; font-size: 12px; font-weight: 700; font-family: 'malgun Gothic', '맑은고딕', sans-serif; } .header-menu-hide { display:none; } .header-menu { position:relative; width:100%; padding: 0 0; margin-top: 36px; background: transparent; z-index:9; } .header-menu > ul { } .header-menu > ul > li { display:inline-block; font-size: 12px; color: #555555; } .header-menu > ul > li:first-child { padding-right: 10px; } .header-menu > ul > li > a, .header-menu > ul > li > .btn-group > a { font-size: 12px; color: #555555; text-decoration: none; margin-left: 0; font-weight: 600; border: 1px solid #EEEEEE; padding: 6px 8px; border-radius: 2px; } .header-menu > ul > li > a:hover, .header-menu > ul > li > .btn-group > a:hover { color: #000000; } .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: #DDDDDD; } .header-menu > ul > li.logout > a, .header-menu > ul > li > a.logout { color: #FF1100; } .header-menu > ul > li.iactivity > a, .header-menu > ul > li.iactivity > a:hover { font-size: 12px; font-weight: normal; border: 0; padding: 0; color: #555555; } .header-menu > ul > li.iactivity > a > span { color: #000000; } .header-menu > ul > li.iactivity > a:hover, .header-menu > ul > li.iactivity > a:hover> span { color: #FF3366; } .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: #FFFFFF; } .header-nav ul li.current a { color:#FFFFFF; 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: #FFFFFF; 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: #DE2654; } */ .header-nav ul li.on a { z-index:11; color:#000; background-color:#FFFFFF; } .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: #FFFFFF; display: block; border: 1px solid #FF3366; } .header-nav li.on ul li { float:none; } .header-nav li.on ul li a { font-size:13px; letter-spacing: -1px; color: #666666; background-color: #FFFFFF; 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: #FFFFFF; background-color: #FF3366; } .header-nav li ul li ul { border: 1px solid #FF3366; } .header-nav li.on ul li ul { left:150px; top:-10px; } .header-nav ul li ul li.current a { color: #FFFFFF; background-color: #FF3366; } /* 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-login, a.header-mobile-nav { display: none; } /* #location { display:none; } */ #me-navigation > div.row > div.hidden-header { display: none; } #search-location { display: none; } /* .location { position: relative; background-color: #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } */ /* .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 { display: none; } .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.mobile-nav-toggle > a > i { display:none; } .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; } .breadcrumb > div > ul > li.mobile-nav-toggle > a { color:#000000; } .breadcrumb > div > ul > li.mobile-nav-toggle > a:hover { color:#FF3366; text-decoration:none; } .breadcrumb > div > ul > li.mobile-nav-toggle > a > i { display:inline-block; color:#FF3366; } } #smart-sub-category { display: none; } div.smart-sub { display: none; } @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 #D61545; } #me-navigation > div.row > div.hidden-header { display:block; height: 97px; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a { float: left; display:block; position: relative; min-height: 1px; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(1), #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3) { width: 20%; height: 51px; padding: 5px; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(2) { width: 60%; height: 51px; text-align: center; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(2) > img { width: 162px; height: 51px; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(1) { text-align: left; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3) { text-align: right; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(1) > i { border: 1px solid #FF6699; color: #FFFFFF; font-size: 24px; margin: 0; padding: 7px 10px; vertical-align: top; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3) > img { border: 1px solid #FF6699; margin: 0; padding: 7px 5px; vertical-align: top; background: url('../images/interface/mobile_log_off.png') no-repeat 50% 50%; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3) > img.member { background: url('../images/interface/mobile_my_off.png') no-repeat 50% 50%; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(1):hover > i { border: 1px solid #DD1043; color: #DD1043; background-color: #FFFFFF; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(1):focus > i { color: #000; } /* #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3):hover, #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3):focus { background: url: '../images/interface/mobile_log_on.png' no-repeat 0; } */ #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3):hover > img { border: 1px solid #DD1043; background: #FFFFFF url('../images/interface/mobile_log_on.png') no-repeat 50% 50%; } #me-navigation > div.row > div.hidden-header > div:nth-of-type(1) > a:nth-of-type(3):hover > img.member { background: #FFFFFF url('../images/interface/mobile_my_on.png') no-repeat 50% 50%; } #search-location { display:block; background-color: #FFFFFF; padding: 0; } #search-location > div > ul { position:relative; width:100%; height: 47px; padding: 13px 0 0; margin: 0; background: transparent; text-align:center; border-bottom:1px solid #DDDDDD; } #search-location > div > ul > li { display:inline-block; } #search-location > div > ul > li > a { padding: 10px 30px; border-bottom:4px solid #FFFFFF; font-size: 15px; color: #777777; text-decoration:none; } #search-location > div > ul > li > a:hover { color: #000000; } #search-location > div > ul > li.active > a, #search-location > div > ul > li.active > a:hover, #search-location > div > ul > li.active > a:focus { color: #FF3366; font-weight: 700; border-bottom:4px solid #FF3366; } /* #me-navigation > div.row > div.hidden-header > a > img { padding: 0 0; } */ .header-menu { display:none; } .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: #FF3366; 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: #FF3366; 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, .header-nav > ul, .header-nav > ul > li, .header-nav > ul > li > a{ display: none; } /* #smart-sub-category { display:block; width: 100%; padding: 0 0; background-color: #FF3366; position: relative; border-top: 1px solid #FF547F; } #smart-sub-category > div { padding-left: 5px; padding-right: 5px; } #smart-sub-category > div > ul:nth-of-type(1) { position: relative; width:100%; height: 24px; } #smart-sub-category > div > ul:nth-of-type(1) > li { float: left; width: 23%; margin: 0; padding: 5px 0; } #smart-sub-category > div > ul:nth-of-type(1) > li:first-child { width: 31%; } #smart-sub-category > div > ul:nth-of-type(1) > li:hover { } #smart-sub-category > div > ul:nth-of-type(1) > li > a { display: block; padding: 0 0; font-size: 14px; color: #FFDBE4; text-align: center; } #smart-sub-category > div > ul:nth-of-type(1) > li + li > a { border-left: 1px solid #FF547F; } #smart-sub-category > div > ul:nth-of-type(1) > li > a:hover { color: #FFFFFF; text-decoration: none; } #smart-sub-category > div > ul:nth-of-type(1) > li:hover { } #smart-sub-category > div > ul:nth-of-type(1) > li:active > a, #smart-sub-category > div > ul:nth-of-type(1) > li.active > a { color: #FFFFFF; font-weight: 800; } div.smart-sub { display:block; padding: 10px; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } div.smart-sub > ul { margin: 0; padding: 0; } div.smart-sub > ul > li { margin-left: 20px; margin-bottom: 10px; padding-left: 0; list-style-type: disc; font-size: 13px; } div.smart-sub > ul > li > h5 { margin: 0; padding: 0; font-size: 15px; } div.smart-sub > ul > li.active, div.smart-sub > ul > li.active > h5 { color: #FF3366; font-weight: 400; } div.smart-sub > ul > li > ul { margin: 0; padding: 0; } div.smart-sub > ul > li > ul > li { display: inline-block; } div.smart-sub > ul > li > ul > li.span { padding: 2px 5px; color: #DDDDDD; font-size: 11px; } div.smart-sub > ul > li > ul > li > a { color: #333333; } div.smart-sub > ul > li > ul > li.active > a { color: #FF3366; font-weight: 700; text-decoration: underline; background-color: #FFFFEC; } */ #smart-sub-category { display:block; width: 100%; padding: 0 0; background-color: #FFFFFF; position: relative; border-bottom: 1px solid #DDDDDD; } #smart-sub-category > div { padding-left: 5px; padding-right: 5px; } #smart-sub-category > div > ul:nth-of-type(1) { position: relative; width:100%; height: 24px; } #smart-sub-category > div > ul:nth-of-type(1) > li { float: left; width: 16.66666666666667%; margin: 0; padding: 7px 0; } #smart-sub-category > div > ul:nth-of-type(1) > li:first-child { } #smart-sub-category > div > ul:nth-of-type(1) > li:hover { } #smart-sub-category > div > ul:nth-of-type(1) > li > a { display: block; padding: 0 0; font-size: 14px; color: #777777; text-align: center; } #smart-sub-category > div > ul:nth-of-type(1) > li + li > a { border-left: 1px solid #F0F0F0; } #smart-sub-category > div > ul:nth-of-type(1) > li > a:hover { color: #000000; text-decoration: none; } #smart-sub-category > div > ul:nth-of-type(1) > li:hover { } #smart-sub-category > div > ul:nth-of-type(1) > li:active, #smart-sub-category > div > ul:nth-of-type(1) > li.active { border-bottom: 4px solid #FF3366; } #smart-sub-category > div > ul:nth-of-type(1) > li:active > a, #smart-sub-category > div > ul:nth-of-type(1) > li.active > a { color: #FF3366; font-weight: 800; } div.smart-sub { display:block; padding: 10px; background-color: #FFFFFF; border-bottom: 3px solid #AAAAAA; } div.smart-sub > ul { margin: 0; padding: 0; } div.smart-sub > ul > li { margin-left: 20px; margin-bottom: 10px; padding-left: 0; list-style-type: disc; font-size: 13px; } div.smart-sub > ul > li > h5 { margin: 0; padding: 0; font-size: 15px; } div.smart-sub > ul > li.active, div.smart-sub > ul > li.active > h5 { color: #FF3366; font-weight: 400; } div.smart-sub > ul > li > ul { margin: 0; padding: 0; } div.smart-sub > ul > li > ul > li { display: inline-block; } div.smart-sub > ul > li > ul > li.span { padding: 2px 5px; color: #DDDDDD; font-size: 11px; } div.smart-sub > ul > li > ul > li > a { color: #333333; } div.smart-sub > ul > li > ul > li.active > a { color: #FF3366; font-weight: 700; text-decoration: underline; background-color: #FFFFEC; } div.smart-sub > p { text-align: right; } .breadcrumb { display: none; } } @media (min-width: 993px) { div.smart-sub, div.smart-sub > * { display: none; } } @media all and (max-width: 480px){ .header-menu-hide > div > a.btn { font-size: 13px; padding: 5px 8px; } #search-location > div > ul > li > a { padding: 10px 13px; } } .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:#FFFFFF; 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:#FFFFFF; z-index:2; } .header-default-nav ul li.on a:hover { background-color:#FFFFFF; } .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:#FFFFFF; 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:#FFFFFF; } .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:#FFFFFF; display:block; } } .mobile-nav { display: none; } .sub-nav > h1 > i { display: none; } @media all and (max-width: 992px) { .mobile-nav { display: block; margin-top: 20px; margin-bottom: 0; padding: 0; } .mobile-nav > .sub-nav { display: block; margin: 0; border: 0; } .mobile-nav > .sub-nav > h1 { display: none; } .mobile-nav > .sub-nav > ul { display: none; margin: 0; padding:0; font-size: 16px; border: 0; } .mobile-nav > .sub-nav > ul > li:last-child { border-bottom: 1px solid #CCCCCC; } .mobile-nav > .sub-nav > ul > li > dl > dd > a { font-size: 15px; color: #555; } .mobile-nav > .sub-nav > ul > li > dl > dd.current > a { color: #009AD9; font-weight: 700; } .mobile-nav > .sub-nav > ul > li > dl > dd.current > a > i { color: #009AD9; margin-left: 7px; } } @media all and (max-width: 480px) { .mobile-nav { margin-top: 0; } .mobile-nav > .sub-nav > h1 { text-align: left; margin: 0; font-size: 22px; border-top: 0; border-bottom: 2px solid #FF3366; border-bottom: 2px solid #FF3366; background-color: #FFFFFF; padding: 10px 0; font-weight: 700; color: #000000; text-decoration: none; cursor: pointer; } } .col-left { float: left; width: 22%; } .col-main { float: right; width: 76%; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } .main-col { float: right; width: 76%; } /* ##################### 서브 좌측메뉴 ######################## */ .sub-nav { display: block; background-color: #FFFFFF; border: 1px solid #DEDCDD; } .sub-nav > h1 { font-size: 26px; font-weight: 500; color: #FFFFFF; text-align: center; padding: 15px 0; margin: 0; background-color: #FF3366; } .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, .sub-nav > ul > li > span { display: block; color: #666666; padding: 10px 10px 12px 14px; margin: 0; font-weight: 600; } .sub-nav > ul > li.current > a, .sub-nav > ul > li.current > span { font-weight: 700; color: #D92C57; } .sub-nav > ul > li.current > a > i, .sub-nav > ul > li.current > span > i { float: right; color: #D92C57; } .sub-nav > ul > li small { font-weight: 800; } .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: #666666; 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: #D92C57; } /* ##################### 서브 좌측메뉴 ######################## */ /* ====== i 활동 포인트 ====== */ .icommunity-point { display: block; border-top: 1px solid #FF3366; border-bottom: 2px solid #FF3366; margin: 0; padding: 0 10px; height: auto; text-align: left; } .icommunity-point > h6 { font-size: 14px; color: #333333; padding: 8px 0 6px 10px; margin: 0; border-bottom: 1px solid #DFDFDF; } .icommunity-point > h6 > span { color: #FF3300; } .icommunity-point > ul { margin-left: 4px; padding: 5px 0 0; font-size: 12px; } .icommunity-point > ul > li { list-style-type: disc; display: block; padding: 2px 10px; } /* ====== i 활동 포인트 ====== */ .padding-top-0 { padding-top: 0; } .sub-content p { color: #777; margin: 20px 0; line-height: 155%; } @media all and (max-width: 992px){ .col-left { display: none; } .col-main, .main-col { float: none; display: block; width: 100%; } .sub-content { padding: 0 15px; } } @media all and (max-width: 480px){ .sub-content { padding: 0 25px; } .col-main { padding-left: 7px; padding-right: 7px; } .diary-calendar-panel { padding-left: 7px; padding-right: 7px; } .diary-calendar-panel > .table > tbody.diary-schedule > tr > td > p { text-align: center; font-size: 10px; margin: 0; padding: 6px 4px; } .container { padding: 0; margin: 0; } } .main-title > h1 { margin: 0 0 20px; padding: 0; font-size: 28px; border-bottom: 1px solid #DDDDDD; color: #333333; } .main-title > h1 > small { display: block; margin-top: 3px; margin-bottom: 5px; font-size: 16px; font-family: 'Spoqa Han Sans'; color: #777777; font-weight: 400; } .main-title > h2 { margin: 0 0 20px; padding: 0 0 10px 10px; font-size: 30px; border-bottom: 1px solid #DDDDDD; color: #333333; } .main-title > h2 > small { margin-left: 3px; font-size: 14px; font-family: 'Spoqa Han Sans'; color: #AA0000; font-weight: 400; } .main-title > h3 { margin: 0 0 20px; padding: 0 0 10px 10px; font-size: 22px; font-family: 'Spoqa Han Sans', sans-serif; border-bottom: 1px solid #DDDDDD; color: #333333; font-weight: 400; } .main-title > h3 > small { display: block; margin-top: 10px; margin-bottom: 5px; font-size: 14px; font-family: 'Spoqa Han Sans'; color: #777777; font-weight: 400; } .main-title > h4 { margin: 0 0 0; padding: 0 10px 0; font-size: 20px; font-family: 'Spoqa Han Sans', sans-serif; color: #333333; font-weight: 400; } .main-title > h4 > small { margin-left: 10px; font-size: 14px; font-family: 'Spoqa Han Sans'; color: #888888; } .main-title > h4 > .btn { font-size: 14px; font-weight: normal; padding: 5px 10px 2px; } .main-title > h4 > .btn > i { color: #FF3366; } .main-title > h6 { margin: 0 0 5px; padding: 0 0 0 10px; font-size: 15px; font-family: 'Spoqa Han Sans', sans-serif; font-weight: 400; color: #888888; } .main-title > h6 > span { margin-left: 5px; font-size: 13px; font-family: 'malgun Gothic', '맑은고딕', sans-serif; font-weight: 600; } @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; text-align: center; } } .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; } } .main-title3 > h1 { margin: 0; padding: 0 0 10px 10px; font-size: 36px; color: #333333; } @media all and (max-width: 992px){ .main-title3 > h1 { margin-bottom: 8px; font-size: 30px; border-bottom: 1px solid #DDDDDD; } } @media all and (max-width: 480px){ .main-title3 > h1 { margin-bottom: 8px; font-size: 24px; } } .column-left { float: left; } .column-right { float: right; } @media (max-width: 480px) { .column-left, .column-right { float: none; text-align: center; } } .content-bookpd-category { padding: 0 10px; } .content-bookpd-category > h4 { font-weight: 600; font-size: 17px; padding: 0; margin: 0; } .content-bookpd-category > ul > li { display: inline-block; padding-right: 8px; line-height: 50px; } .content-bookpd-category > ul > li > a { font-size: 14px; font-weight: 600; color: #333333; padding: 12px 10px; border: 1px solid #F8F8F8; background-color: #F8F8F8; border-radius: 3px; } .content-bookpd-category > ul > li > a:hover { border: 1px solid #EEEEEE; color: #FF3366; background-color: #FFFFFF; text-decoration: none; } .content-bookpd-category > ul > li.active > a { border: 1px solid #EEEEEE; color: #FF3366; background-color: #FFFFFF; text-decoration: none; } .content-bookpd-list { margin-left: -5px; margin-right: -5px; } .content-bookpd-list > div { display: block; clear: both; min-height: 1px; padding: 0; text-align: center; } .content-bookpd-list > div > div { float: left; position: relative; display:inline-block; min-height: 1px; padding-right: 10px; padding-left: 10px; margin-top: 10px; width: 25%; height: auto; text-align: center; } .content-bookpd-list > div > div > h5 { margin:0; padding: 0; font-size: 16px; font-weight: 500; } .content-bookpd-list > div > div > h5 > em { padding-left: 10px; font-size: 12px; } .content-bookpd-list > div > div > h5 > em:nth-of-type(2), .content-bookpd-list > div > div > h5 > em:nth-of-type(3) { padding-left: 4px; } .content-bookpd-list > div > div > h5 > span { font-size: 12px; } .content-bookpd-list > div > div > p { margin:0; padding: 0; } .content-bookpd-list > div > div > p > a { font-size: 12px; font-weight: normal; color: #555555; } .content-bookpd-list > div > div > p > a:hover { color: #FF3366; } .content-bookpd-list > div > div > p > a > span.label { margin: 0 1px; } .content-bookpd-list > div > p.pd-clear { display: none; } @media (max-width: 720px) { .content-bookpd-list > div > div { padding-right: 15px; padding-left: 15px; width: 50%; } .content-bookpd-list > div > p.pd-clear { display: block;clear: both; padding-top: 10px; } } @media (max-width: 481px) { .content-bookpd-list > div > div { padding-right: 10px; padding-left: 10px; width: 50%; } } .bookpd-category > a { font-weight: normal; line-height: 26px; color: #333333; } /* .bookpd-category > a.active { font-weight: 600; border: 1px solid #FF3366; color: #FFFFFF; background-color: #FF3366; text-decoration: none; border-radius: 3px; } */ .bookpd-category > a:hover { color: #000000; text-decoration: underline; } .bookpd-category > a.active { font-weight: 600; color: #FF3366; text-decoration: none; } .bookpd-category > span { padding: 0 7px; font-weight: normal; color: #DDDDDD; } .content-books-list { margin-left: -5px; margin-right: -5px; } .content-books-list > div { display: block; clear: both; min-height: 1px; padding: 0; text-align: center; } .content-books-list > div > div { float: left; position: relative; display:inline-block; min-height: 1px; padding-right: 5px; padding-left: 5px; margin-top: 10px; width: 25%; height: auto; text-align: center; } .content-books-list > div > div > h5 { margin: 5px 0 0; font-size: 12px; font-weight: 800; } .content-books-list > div > div > p { margin: 0; padding: 0; } .content-books-list > div > p.pd-clear { display: none; } @media (max-width: 720px) { .content-books-list > div > div { padding-right: 15px; padding-left: 15px; width: 50%; } .content-books-list > div > p.pd-clear { display: block;clear: both; padding-top: 10px; } } @media (max-width: 481px) { .content-books-list > div > div { padding-right: 30px; padding-left: 30px; width: 100%; } .content-books-list > div > p.pd-clear { display: none; } } .content-books-view-info { display: block; text-align: center; } .content-books-view { display: block; text-align: center; } .content-books-view > iframe { width: 100%; height: 600px; } .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: #FFFFFF; } .default-panel h5 { line-height: 1.1; } .default-panel > h5 > a { color: #333333; } .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 #FF3366; } .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; } } .sub-title-noborder{ margin-top: 10px; margin-bottom: 0; border-bottom: 0; } .sub-title-noborder > h3 { font-size: 24px; color: #444444; } .sub-title-noborder > h3 > small { float: right; font-size: 15px; color: #999999; margin-top: 14px; } .sub-title-noborder > h3 > small > em { color: #FF6600; font-style: normal; } .sub-title-noborder > h6 { font-size: 14px; color: #999999; font-weight: normal; } @media all and (max-width: 992px){ .sub-title-noborder > h3 { margin-top: 0; margin-bottom: 0; font-size: 18px; } .sub-title-noborder > 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: 25%; } .jq-detail-list > ul > li > a { float: left; border: 2px solid #EEEEEE; width: 100%; } .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: #D92C57; 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: #999999; 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: #333333; } */ /* ############### Footer ############### */ #footer-menu { margin-top:0; } #footer-menu > .container { padding: 5px 0; } .logo-footer-panel > div > div + div { text-align: right; } @media all and (max-width: 768px){ .logo-footer-panel > div > div, .logo-footer-panel > div > div + div { text-align: center; } } /* .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 #DDDDDD; width: 20%; } .logo-footer-info > .footer_cs_sudal > li:first-child { padding-bottom:10px; } .logo-footer-info > .footer_cs_sudal > .fcs_02 { color:#333333; font-size:13px; font-weight:bold; etter-spacing:-0.05em; } .logo-footer-info > .footer_cs_sudal > .fcs_03 { color:#FF3366; font-size:28px; font-weight:bold; letter-spacing:-0.07em; line-height:110%; } .logo-footer-info > .footer_cs_sudal > .fcs_04 { color:#999999; 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: #FF3366; } .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: #FF3366; 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: #FF3366; 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 (max-width: 620px) { .col-main-group > [class*="col-fms-12"] + [class*="col-fms-12"] { margin-top: 10px; } } @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 #DDDDDD; border-left : 1px solid #DDDDDD; border-right : 1px solid #DDDDDD; background-color: #FF3366; color: #FFFFFF; font-size: 16px; text-align: center; } .schedule-choise { width: 100%; height: 284px; overflow-y:auto; border : 1px solid #DDDDDD; /* 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 #DDDDDD; 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: #FF3366; 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:#FFFFFF; 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:#FFFFFF; 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; } /* ################################## 스케줄관련테이블 ################################## */ .footer-cs1-panel { padding: 10px 19px 8px; } .footer-cs1-panel h1 { letter-spacing: -2px; color: #FF3366; text-align: center; line-height: 1.1; } .footer-cs1-panel > h1 > span { padding: 0 10px; -webkit-border-radius: 40px; border-radius: 40px; background-color: #FF3366; } .footer-cs1-panel > h1 > span > i { font-size: 29px; color: #FFFFFF; } .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: #FF3366; 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: #FF3366; } .footer-cs3-panel > div > h4 { display: inline-block; margin-top: 0;margin-bottom: 3px; color: #333333; 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: #FF3366; color: #FFFFFF; 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: #333333; } /* ###################### MAIN PANEL ####################### */ /* ###################### SUB PANEL ####################### */ .mroom-userlist-panel { padding: 0; display: block; height: auto; background-color: #FFFFFF; text-align: center; border: 1px solid #CCCCCC; border-bottom: 0; } .mroom-userlist-panel > h5 { font-size: 16px; font-weight: 700; padding: 0; margin: 0; line-height: 30px; background-color: #FF3366; color: #FFFFFF; font-family: 'malgun Gothic', '맑은고딕', sans-serif; } .mroom-userlist-panel > table > tbody > tr { border-top: 1px solid #CCCCCC; } .mroom-userlist-panel > table > tbody > tr > td { padding: 5px; } /* ############### 친구 추천, 원격제어 서비스 ############### */ .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: #FF3366; } .sub-help-panel > div > h4 { display: inline-block; color: #333333; 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: #FF3366; -webkit-border-radius: 80px; border-radius: 80px; } .sub-cs1-panel > h1 > span > i { font-size: 40px; color: #FFFFFF; } .sub-cs1-panel > h3 { display: inline-block; margin: 0 0 0 15px; color: #333333; text-align: left; font-size: 16px; } .sub-cs1-panel > h3 > span { display: block; color: #999999; text-align: left; font-size: 12px; margin-top: 5px; line-height: 18px; } .sub-cs1-panel > h2 { display: block; color: #FF3366; 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: #666666; text-align: center; } .sub-cs2-panel > h4, .sub-cs3-panel > h4 { margin: 10px 0 5px; padding: 0; font-weight: 700; font-size: 15px; color: #FF3366; text-align: center; } .sub-cs2-panel > p, .sub-cs3-panel > p { margin: 0; padding: 0; font-size: 12px; color: #999999; 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: #333333; 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: #FFFFFF; background-color: #FF3366; display: table; padding: 5px 8px; font-size: 11px; font-weight: 600; line-height: 14px; } label.error.valid { background-color: #FF3366; } .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:#FF3366 } 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-point { color:#FF3366 } .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:#DDDDDD; padding: 0 5px; } .text-cancel { text-decoration: line-through } .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: 'malgun Gothic', '맑은고딕', serif; } .sub-category { color: inherit; padding: 0; font-size: 14px; font-family: 'Jeju Gothic', sans-serif; background: #FFFFFF; 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: #FFFFFF; background: #FF3366; } .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 #CCCCCC; border-bottom: 1px solid #CCCCCC; 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 #CCCCCC; } .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:#FFFFFF; border:1px solid #DDDDDD; 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:#FFFFFF; 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:#999999; background-color:#FFFFFF; border-color:#DDDDDD; 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: #333333; 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: #FF3366; color: #FFFFFF; } .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:#FFFFFF; border:1px solid #DDDDDD; border-radius:15px } .pager li > a:hover, .pager li > a:focus { color:#FFFFFF; background-color:#DE2654; 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:#FFFFFF; background-color:#D92C57; border-color:#DE2654 cursor:default } .pager .disabled>a, .pager .disabled>a:hover, .pager .disabled>a:focus, .pager .disabled>span { color:#999999; background-color:#FFFFFF; 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: #FFFFFF; } .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 #DDDDDD; background: #FFFFFF; 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: #DDDDDD; color: #aaa; } .text-body-highlight { font-family: 'malgun Gothic', '맑은고딕', serif; font-size: 20px; font-weight: 700; text-align: center; color: #FF3366; 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: #FFFFFF; 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, '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:#FF1100; border:1px solid #FF1100; } /* Input icons */ .has-feedback .form-control-feedback { top: 24px; color: #999999; 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: #FFFFFF; background-color: #2D73CB; } a.bg-primary:hover { background-color:#3071a9 } .bg-success { color: #FFFFFF; background-color: #65B688; } a.bg-success:hover { background-color:#c1e2b3 } .bg-info { color: #FFFFFF; background-color: #3CA2BB; } a.bg-info:hover { background-color:#afd9ee } .bg-warning { color: #FFFFFF; background-color: #EE8366; } a.bg-warning:hover { background-color:#f7ecb5 } .bg-danger { color: #FFFFFF; background-color: #FF3366; } a.bg-danger:hover { background-color:#D92C57 } 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:#FFFFFF; } .back-primary { background-color: #445661; color:#FFFFFF; } .back-success { background-color: #65B688; color:#FFFFFF; } .back-success2 { background-color: #196F3E; color:#FFFFFF; } .back-info { background-color: #3CA2BB; color:#FFFFFF; } .back-info2 { background-color: #0A7088; color:#FFFFFF; } .back-support { background-color: #A270FF; color:#FFFFFF; } .back-attend { background-color: #ABA000; color:#FFFFFF; } .back-warning { background-color: #E7804F; color:#FFFFFF; } .back-warning2 { background-color: #EC008C; color:#FFFFFF; } .back-warning3 { background-color: #a00; color:#FFFFFF; } .back-danger { background-color: #FF3366; color:#FFFFFF; } a.login-btn { margin: 6px 0 0 0; padding: 10px; color: #FFFFFF; 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:#FFFFFF; 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:#CCCCCC; } #location .breadcrumb>li>a{ color:#000 } #location .breadcrumb>li.arrow{ color:#bbb; padding: 0 6px } #location .breadcrumb>.active{color:#999} */ .book-info > div { float: left; position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } .book-info > div:nth-of-type(1) { width: 18%; } .book-info > div:nth-of-type(2) { width: 41%; border-right: 1px solid #DDDDDD; } .book-info > div:nth-of-type(3) { width: 41%; border-left: 1px solid #DDDDDD; margin-left: -1px; } .book-info > div:nth-of-type(2) > ul { display: block; padding: 0; margin-bottom: 15px; } .book-info > div:nth-of-type(2) > ul > li { font-size: 15px; color: #777; padding-left: 20px; padding-bottom: 6px; } .book-info > div:nth-of-type(2) > ul > li span { color: #333333; font-weight: 600; } .book-info > div:nth-of-type(2) > ul > li span.spoint { color: #FF3366; font-weight: 800; font-size: 120%; } .book-info > div:nth-of-type(2) > ul > li em { color: #EEEEEE; font-style: normal; padding: 0 7px; } .book-info > div:nth-of-type(2) > ul > li dd { padding-left: 6px; font-family: monospace, serif; margin: 4px 0; } .book-info > div:nth-of-type(2) > ul > li dd:before { font-family: "FontAwesome"; content: "\f0c1"; padding-right: 3px; } .book-info > div:nth-of-type(2) > ul > li dd span { padding-left: 7px; padding-right: 7px; font-size: 12px; color: #DDDDDD; } .book-info > div:nth-of-type(2) > ul.none-border { padding-top: 8px; border-bottom: 0; } .book-info > div:nth-of-type(2) > ul.none-border > li { padding-left: 5px; padding-bottom: 9px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) { display: block; padding: 0 10px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > h5 { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > p { padding: 0 0 6px; margin: 0; font-size: 14px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul { display: block; padding: 0; margin-bottom: 15px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul > li { font-size: 15px; color: #333333; padding-left: 20px; padding-bottom: 6px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul > li:last-child { padding-bottom: 0; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul > li span { font-weight: 600; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul > li span.spoint { color: #FF3366; font-weight: 800; font-size: 120%; } .book-info > div:nth-of-type(3) > div:nth-of-type(2) { display: block; padding: 0 10px; line-height: 45px; text-align: center; } @media (max-width: 767px) { .book-info > div:nth-of-type(1) { width: 28%; } .book-info > div:nth-of-type(2) { width: 72%; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid #DDDDDD; } .book-info > div:nth-of-type(3) { width: 72%; border-left: 0; margin-left: 0; padding-top: 20px; } .book-info > div:nth-of-type(3) > div:nth-of-type(1) > ul > li { font-size: 13px; } .book-info > div:nth-of-type(2) > ul > li { padding-left: 14px; } .book-info > div:nth-of-type(3) > div:nth-of-type(2) > button, .book-info > div:nth-of-type(3) > div:nth-of-type(2) > .btn-group > button { padding: 6px 11px; font-size: 12px; } .book-info > div:nth-of-type(3) > div:nth-of-type(2) > button > i, .book-info > div:nth-of-type(3) > div:nth-of-type(2) > .btn-group > button > i { font-size: 12px; } } @media (max-width: 540px) { .book-info > div:nth-of-type(1) { width: 28%; } .book-info > div:nth-of-type(2) { width: 72%; padding-bottom: 20px;border-bottom: 0; } .book-info > div:nth-of-type(3) { width: 100%; border-top: 1px solid #DDDDDD; } } @media (max-width: 480px) { .book-info > div:nth-of-type(2) > ul > li { padding-left: 10px; } .book-info > div:nth-of-type(3) > div:nth-of-type(2) > button, .book-info > div:nth-of-type(3) > div:nth-of-type(2) > .btn-group > button { padding: 6px 11px; font-size: 12px; } .book-info > div:nth-of-type(3) > div:nth-of-type(2) > button > i, .book-info > div:nth-of-type(3) > div:nth-of-type(2) > .btn-group > button > i { font-size: 12px; } .book-item-buy { text-align: center; } } .book-info-list { display: block; padding: 0; margin-bottom: 15px; border-bottom: 1px solid #DDDDDD; } .book-info-list > li { font-size: 15px; color: #777; padding-left: 20px; 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: #333333; font-weight: 600; } .book-info-list-pop li span.spoint, .book-info-list > li span.spoint { color: #FF3366; font-weight: 800; font-size: 120%; } .book-info-list-pop li em, .book-info-list > li em { color: #EEEEEE; font-style: normal; padding: 0 7px; } .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: #DDDDDD; } .book-info-list.none-border { padding-top: 8px; border-bottom: 0; } .book-info-list.none-border > li { padding-left: 5px; padding-bottom: 9px; } .book-info-cart { display: block; margin-top: 18px; padding: 0 10px; margin-bottom: 15px; border-bottom: 1px solid #DDDDDD; } .book-info-cart > h5 { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .book-info-cart > p { padding: 0 0 6px; margin: 0; font-size: 14px; } .book-info-menu { display: block; padding: 0 10px; line-height: 37px; } .book-info-cart > .book-info-buy { display: block; padding: 0; margin-bottom: 15px; } .book-info-cart > .book-info-buy > li { font-size: 15px; color: #333333; padding-left: 20px; padding-bottom: 6px; } .book-info-cart > .book-info-buy > li:last-child { padding-bottom: 0; } .book-info-cart > .book-info-buy > li span { font-weight: 600; } .book-info-cart > .book-info-buy > li span.spoint { color: #FF3366; font-weight: 800; font-size: 120%; } .book-item-buy { padding: 0 10px; } @media (max-width: 767px) { .book-info-list-pop li, .book-info-cart > .book-info-buy > li { font-size: 13px; } .book-info-list > li { padding-left: 14px; } .book-info-menu > button, .book-info-menu > .btn-group > button { padding: 6px 11px; font-size: 12px; } .book-info-menu > button > i, .book-info-menu > .btn-group > button > i { font-size: 12px; } } @media (max-width: 480px) { .book-info-list > li { padding-left: 10px; } .book-info-menu > button, .book-info-menu > .btn-group > button { padding: 6px 11px; font-size: 12px; } .book-info-menu > button > i, .book-info-menu > .btn-group > button > i { font-size: 12px; } .book-item-buy { text-align: center; } } .book-list-info > div > p > span { font-weight: 600; color: #333333; } .book-list-com-info > span { font-weight: 600; color: #333333; } .app-carousel { margin: 0; border: 1px solid #FFFFFF; } .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 #FFFFFF; -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:#FFFFFF;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:#FFFFFF;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: #FFFFFF; } .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: #FFFFFF; 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: #DDDDDD; } .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 #CCCCCC; font-size: 16px; margin-bottom: 2px; } .community-search input[type=text]:focus { border: 2px solid #FF3366; } .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: #333333; } .book-find-etc { float: right; margin-top: -20px; background-color: #777; padding: 6px 10px; color: #FFFFFF; font-size: 12px; } .book-find-etc:hover { background-color: #005BAF; color: #FFFFFF; } .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 > h4, .community-galler-list > div > h5 { margin: 0; padding: 0; font-weight: 500; } .community-galler-list > div > h4 > span, .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; } } .reply-comment-msg { position: relative; min-height: 1px; padding: 20px 20px 10px; margin-bottom: 20px; border: 1px solid #DDDDDD; background-color: #FFFFFF; } /* ################## 수강증 / 영수증 ################## */ .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: #333333; 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: #FF3366; color: #FFFFFF; font-weight: 700; } table.speaking-info1-3 > tbody > tr + tr > td { color: #FF3366; 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: #333333; 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: #FF3366; } .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: #FF3366; 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: #333333; } @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: #333333; } .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: #333333; 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: #333333; 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: #FF3366; color: #FFFFFF; font-weight: 700; } table.grammar1-3 > tbody > tr + tr > td { color: #FF3366; 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 > .col-fxl-10 > 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-fxl-10 > div > h2 { display: inline-block; width: 30%; color: #00ADEF; margin-top: 14px; vertical-align: top; text-align: center; } .lecture-info1 > div > .col-fxl-10 > div > h5 { display: inline-block; width: 60%; color: #333333; margin-top: 26px; text-align: left; } .lecture-info1 > div > .col-fxl-10 > 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 > .col-fxl-10 > 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 > .col-fxl-10 > div > h5, .lecture-info1 > div > .col-fxl-10 > div > h5.two { width: 100%; color: #333333; 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: #333333; 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: #FF3366; border: 1px solid #FF3366; } @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: #FF3366; 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: #FF3366; 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 #FF3366; } .table-display > table > thead > tr > th { font-size: 13px; border-bottom: 1px solid #FF3366; font-weight: 700; color: #FF3366; } .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 #FF3366; background-color: #FFFFFF; } .choose-result > div > table > tbody > tr > td { font-size: 12px; color: #FF3366; 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: #FF3366; } .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: #FF3366; } .table-order-list > table > tbody > tr:last-child > td { color: #FF3366; font-size: 16px; font-weight: 600; } .table-order-list > table > tbody > tr:last-child > td:last-child { background-color: #FF3366; 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: #FF3366; } .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 #FF3366; } .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: #FF3366; 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:#FFFFFF; background-color:#FF3366; 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:#FFFFFF; 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 #FF3366; 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 #FF3366; 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: #FF3366; } .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: #FF3366; } .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: #FF3366; border: 1px solid #FF3366; } .community-header-category > li.active > a:hover { background-color: #FF3366; } @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 #FF3366; } .community-notice.talk-color > table > thead > tr > th { border-bottom: 1px solid #FF3366; } .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: #FF3366; } .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: #FF3366; 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: #333333; 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:#FFFFFF; } .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:#333333; text-align: center; } .btn-calendar > div > ul > li > a:hover, .btn-calendar > div > ul > li > a:focus { text-decoration:none; color:#FFFFFF; background-color:#FF3366; 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: #FFFFFF; text-align: center; font-weight: 900; font-size: 38px; margin: 52px 0 0; padding: 0; } .community-hart > div > p { color: #FFFFFF; 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) > .col-fxl-10 { float: left; width: 82%; margin-top: 0; margin-right: 8px; color: #999999; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > .col-fxl-10 > img, .tutor-hart-list > table > tbody > tr > td:nth-child(2) > .col-fxl-10 > 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) > .col-fxl-10 > p { color: #777777; font-size: 13px; } .tutor-hart-list > table > tbody > tr > td:nth-child(2) > .col-fxl-10 > p:nth-of-type(1) > span:nth-of-type(1), .tutor-hart-list > table > tbody > tr > td:nth-child(2) > .col-fxl-10 > 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 > 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: #DDDDDD; } .table.schedule-check > tbody > tr > td > button { font-size: 12px; padding: 0 3px; font-weight: normal; background-color:#FF3366; } */ .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: #FF3366; font-weight: 600; } .community-view > .board-write > .pull-left > span:nth-child(1).admin-name { color: #FF3366; 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; } @media (max-width: 767px) { .community-view-rate > div { float: none; clear: both; width: 100%; text-align: center; margin-bottom: 5px; } } .community-view-menu { display: block; padding: 0 15px; margin-bottom: 30px; } @media (max-width: 420px) { .community-view-menu > div { float: none; clear: both; width: 100%; text-align: center; margin-bottom: 15px; } } .community-container { padding: 20px 25px; } .community-container .button { margin-bottom: 0; } .community-container iframe { width: 100%; height: 600px; overflow: auto; border: 3px solid #dddddd; background-color: #FFFFFF; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .gcommunity-container { padding: 20px 15px; } .gcommunity-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, .gcommunity-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 #FF3366; } 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 #DDDDDD; padding: 12px 0; text-align: center; font-size: 11px; color: #777; background-color: #FFFFFF; } @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: #999999; 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: #666666; } ul.default-list > li img.new { margin-left: 3px; } ul.default-list > li span.new { background-color: #FA8C00; color: #FFFFFF; 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: #FF3366; 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 { opacity: 0.65; box-shadow: none; pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-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; } } /* ====== 프로필 사진 ====== */ .my-picture { display: block; padding: 18px; margin-top: 15px; border: 1px solid #DDDDDD; border-radius:2px } .modal-mypicture-body { padding: 10px 20px 0; } .modal-mypicture-body .form-control { height: 40px; padding: 10px; } .my-picture > .thumbnail{background:0 0;position:relative;border:0;padding:0;margin:0;text-align:center} .my-picture >.thumbnail .caption{ padding: 0; margin: 0; text-align:left} .thumbnail .caption.text-center{text-align:center} .thumbnail .caption > h5 {display:block; margin:0; padding:0;} .thumbnail .caption h5 small{display:block;margin-top:4px} .thumbnail-boxed .caption{padding:0} .caption .caption-title{font-size:14px;font-weight:600;margin-bottom:0;display:block} .thumbnail-boxed{border:1px solid #DDDDDD;padding:2px;border-radius:2px;background-color:#fff} .thumbnail-boxed .item-info{margin-bottom:12px} .thumbnail a img, .thumbnail img{margin-right:auto;margin-left:auto;display:block;max-width:100%;width:100%;height:auto;z-index:2; border-radius:2px} .thumb{position:relative;display:inline-block} .thumb:hover .thumb-options{opacity:1} .thumbnail iframe{width:100%;max-width:100%;height:250px;border:0} .thumb-zoom{background:#32434D url('../images/interface/zoom.png') no-repeat 50%;display:inline-block;border-radius:2px;border:0} .thumb-zoom img{opacity:1} .thumb-zoom:hover img{opacity:.2} .thumb-options{border-radius:2px;position:absolute;top:0;left:0; background:rgba(0,30,43,.8); height:100%;width:100%;opacity:0;text-align:center} .thumb-options span{display:block;top:50%;position:absolute;margin-top:-17px;width:100%} .tab-content { border: 0; padding: 0; } .smart-category.left{width:280px;height:100%;overflow-y:scroll;position:fixed;left:-100%;top:0;background:#FFFFFF;border-left:1px solid #DD1144;border-right:1px solid #DD1144;display:block;z-index:998; transition: all 0.5s;} .smart-category.right{width:280px;height:100%;overflow-y:scroll;position:fixed;right:-100%;top:0;background:#FFFFFF;border-left:1px solid #DD1144;border-right:1px solid #DD1144;display:block;z-index:999; transition: all 0.5s;} .slidebar-toggle{position:fixed;top:100px;right:0;height:50px;width:50px;line-height:50px;text-align:center;background:rgba(0,0,0,0.55);color:#FFFFFF;cursor:pointer;z-index:1000;border:0} .smart-category::-webkit-scrollbar{display:none !important;width:0 !important} .smart-tab-menu{background-color:#DD1144; width:100%; height: 52px; padding: 10px 20px; margin: 0;} .smart-tab-menu > li {float:left; position: relative; min-height: 1px;} .smart-tab-menu > li:nth-of-type(1) {width:90%;} .smart-tab-menu > li:nth-of-type(2) {width:10%;text-align:right;padding-right: 0;} .smart-tab-menu > li > h4 {font-size:18px;color: #FFFFFF; margin:2px 0 0; padding: 0 0;} .smart-tab-menu > li > h4 > i {margin-right:10px;} .smart-tab-menu > li > a > i {border: 1px solid #FF6699; color: #FF6699; font-size: 19px; margin: 0; padding: 5px 7px; vertical-align: top;} .smart-tab-menu > li.active > a > i, .smart-tab-menu > li > a:focus > i, .smart-tab-menu > li > a:hover > i {border: 1px solid #DD1043; color: #DD1043; background-color: #FFFFFF;} .smart-search {width:100%;padding: 0 5px 5px; } .smart-search > div > div > input {border:1px solid #FF3366;} .smart-search > div > span > button {padding: 9px 12px; border-radius: 0; background-color: #FFFFFF;} .smart-category > p {text-align: center; padding: 0 15px;} .smart-category > p > a {width: 100%;padding: 10px;font-size: 16px; font-weight: 700;} .smart-category > p > a > i {float:left;width:30px;padding-right: 15px;font-size: 18px;text-align:center;border-right: 1px solid #FF5C85;} .smart-category > p > a.btn-point > i {border-right: 1px solid #FF8534;} .smart-menu {width:100%;} .smart-menu > ul {margin: 0;} .smart-menu > ul > li {position: relative;} .smart-menu > ul > li > a {display:block; padding: 8px 12px 8px 20px; border-bottom:1px solid #E1E1E1; font-size: 14px; color: #333333;} .smart-menu > ul > li > a:hover {color: #FFFFFF; border-bottom:1px solid #DD1144; background-color: #FF3366; text-decoration:none;} .smart-menu > ul > li > ul > li + li { border-top:1px solid #FFFFFF;} .smart-menu > ul > li.active > a, .smart-menu > ul > li.active:hover > a, .smart-menu > ul > li.active:focus > a { color: #FFFFFF; text-decoration:none; font-weight: 700; background-color: #FF3366; border-color: #DD1144; } .smart-menu > ul > li.active > a > i { opacity: 1; filter: alpha(Opacity=100); } /* .smart-menu > ul > li > a:after {float:right; font-family: 'FontAwesome'; content: "\f196";font-size: 16px;color: #999999;} .smart-menu > ul > li > a:after:focus {content: "\f147";} */ .smart-menu > ul > li > ul { border-bottom:1px solid #FF3366; background-color:#FCFCFC;padding:0;} .smart-menu > ul > li > ul > li > a {display:block; padding: 5px 20px 5px 23px; font-size: 13px; color: #333333;} .smart-menu > ul > li > ul > li.active > a, .smart-menu > ul > li > ul > li.active:hover > a, .smart-menu > ul > li > ul > li.active:focus > a { color: #DD0044; text-decoration:none; font-weight: 700; background-color: #FFDDDD; } .smart-menu > ul > li > ul > li > a:before {content: "- ";} .smart-menu > ul > li > ul > li > a:hover {background-color:#F0F0F0;text-decoration:none;} /* .smart-menu > ul > li > ul > li > a:after {float:right;content: "\f067";font-family: FontAwesome;} .smart-menu > ul > li > ul > li.active > a:after {content: "\f068";} */ .smart-menu > ul > li > ul > li.active > a:after, .smart-menu > ul > li > ul > li > ul > li.active > a:after {float:right;content:"●";color:#DD1144;} .smart-menu > ul > li > ul > li > ul { background-color:#F8F8F8;padding:0;border-left:3px solid #DD1144;border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;} .smart-menu > ul > li > ul > li > ul > li + li { border-top:1px solid #FFFFFF;} .smart-menu > ul > li > ul > li > ul > li > a {display:block; padding: 5px 20px 5px 24px; font-size: 13px; color: #333333;} .smart-menu > ul > li > ul > li > ul > li > a:before{ content: "o"; color: #AAAAAA; font-size: 8px; padding-right: 0.5em; } .smart-menu > ul > li > ul > li > ul > li.active > a, .smart-menu > ul > li > ul > li > ul > li.active:hover > a, .smart-menu > ul > li > ul > li > ul > li.active:focus > a { color: #DD1144; text-decoration:none; font-weight: 700; background-color: #FFEEEE; } .smart-menu > ul > li > ul > li > ul > li.active > a:before, .smart-menu > ul > li > ul > li > ul > li.active:hover > a:before, .smart-menu > ul > li > ul > li > ul > li.active:focus > a:before { color: #DD1144; font-weight: normal; } .smart-menu > ul > li > ul > li > ul > li > a:hover {background-color:#ECECEC;text-decoration:none;} .smart-menu > ul > li > ul > li > ul > li > a > i {font-size: 6px;} #smartCategory > .tab-content > p {text-align: center; padding: 0 15px;} #smartCategory > .tab-content > p > a {width: 100%;padding: 10px;font-size: 16px; font-weight: 700;} #smartCategory > .tab-content > p > a > i {float:left;width:30px;padding-right: 15px;font-size: 18px;text-align:center;border-right: 1px solid #FF6699;} #smartCategory > .tab-content > p > a.btn-point > i {border-right: 1px solid #FF8534;} button.btn-login { width: 100%;padding: 10px;font-size: 16px; font-weight: 700; color: #FFFFFF; background-color: #555555; border-color: #333333; } button.btn-login:hover, button.btn-login:focus, button.btn-login:active, button.btn-login.active { color: #FFFFFF; background-color: #333333; border-color: #111111; } button.btn-login > i {float:left;width:30px;padding-right: 15px;font-size: 20px;text-align:center;border-right: 1px solid #777777;} /* #################### Total search #################### */ .search-header-panel { position:relative; width:100%; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 15px 0; background: transparent; } .search-header-panel > li { display:inline-block; } .search-header-panel > li > a { padding: 13px 30px; border-bottom:4px solid #FFFFFF; font-size: 15px; color: #777777; text-decoration:none; } .search-header-panel > li > a:hover {color: #000000; } .search-header-panel > li.active > a, .search-header-panel > li.active > a:hover, .search-header-panel > li.active > a:focus { color: #FF3366; font-weight: 700; border-bottom:4px solid #FF3366; } @media all and (max-width: 992px){ .search-header-panel { display:none; } } .search-book-panel > h3 { margin: 0; padding: 0; } .search-book-panel > h3 > a { font-size: 80%; font-weight: 500; line-height: 1.5; color: #1A0DAB; } .search-book-panel > h4 > a { font-size: 90%; font-weight: 500; line-height: 1.5; color: #1A0DAB; } .search-book-panel > .search-book-list { margin-left: 0; margin-right: 0; } .search-book-panel > .search-book-list > div { display: block; clear: both; min-height: 1px; padding: 0; text-align: center; } .search-book-panel > .search-book-list > div > div { float: left; position: relative; display:inline-block; min-height: 1px; padding-right: 5px; padding-left: 5px; width: 25%; height: auto; text-align: center; } .search-book-panel > .search-book-list > div > div.book-clear { margin-top: 15px; } .search-book-panel > .search-book-list > div > div > h5 { margin: 5px 0 0; padding: 0; line-height: 16px; font-size: 12px; font-weight: 800; } /* .search-book-panel > .search-book-list > .blist-check { clear: normal; padding-top: 0; } .search-book-panel > .search-book-list > .blist-check:nth-of-type(4) { clear: both; padding-top: 10px; } */ @media (max-width: 768px) { .search-book-panel > h3 > a { font-size: 70%; } .search-book-panel > h4 > a { font-size: 80%; } .search-book-panel > .search-book-list { margin-left: -5px; margin-right: -5px; } } .search-category-panel > h4 { font-size: 16px; font-weight: 500; line-height: 1.5; color: #333333; } .search-category-panel > ul { list-style-type: disc; margin-left: 5px; border-left: 5px solid #EEEEEE; } .search-category-panel > ul > li { display: block; margin-left: 0; padding: 0 5px 3px 0; padding-left: 0; } .search-category-panel > ul > li > a { font-size: 15px; font-weight: 500; line-height: 1.5; color: #1A0DAB; } .search-list-panel > div { padding-left: 10px; padding-right: 10px; } .search-list-panel > div > h3 { font-size: 18px; font-weight: 500; margin-bottom: 4px; color: #999999; } .search-list-panel > div > h3 > a { color: #1A0DAB; } .search-list-panel > div > h3 > small { padding-left: 10px; font-size: 14px; } .search-list-panel > div > h4 > a { font-size: 80%; font-weight: 500; line-height: 1.5; color: #1A0DAB; } .search-list-panel > div > p.content { color: #777777; } .search-list-panel > div > p.category { color: #BBBBBB; } .search-list-panel > div > p.category > span { padding: 0 10px; } .search-list-panel > div > p.category > span:nth-of-type(2) { padding: 0 4px; } .search-list-panel > div > p.category > a { color: #1A0DAB; } .search-list-panel > div.table-footer { padding-top: 5px; border-top: 0; } .search-list-panel > div.table-footer > div.table-actions { padding-top: 5px; font-size: 13px; } .search-list-panel > div.table-footer > div.table-actions > p { color: #999999; } .venobox-btn { line-height: 40px; padding: 20px; } .venobox-title { margin: 0; padding: 10px; } .venobox-list { list-style-type: disc; padding: 10px; max-height: 600px; border: 3px solid #dddddd; overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } .venobox-list > li { float: left; position: relative; width: 45%; color:#555; line-height: 24px; margin-left: 20px; } .venobox-list > li.sector { width: 30.333333333%; margin-left: 3%; } .venobox-list > li > a { color: #333333; font-size: 14px; } .venobox-list > li.active > a { color: #FF3366; text-decoration: underline; } @media (max-width: 768px) { .search-list-panel > div > h3 > small { display: block; padding: 5px 0; font-size: 13px; } .venobox-list { max-height: 400px; } .venobox-list > li { width: 95%; } .venobox-list > li.sector { width: 45%; margin-left: 20px; } } /* ul.disc { list-style-type: disc; } ul.disc > li { color:#555; margin-left: 20px; } */ @media (max-width: 480px) { .radio-inline, .checkbox-inline { display: block; } .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-left: 0; margin-top: 9px; } } .diary-book-list { text-align: left; margin-top: 10px; border: 1px solid #CCCCCC; padding: 10px; } .diary-book-list > div > span:nth-of-type(1) { display:inline-block; height:28px; line-height:28px; color:#FF3366; font-weight: 700; margin-left:10px; padding: 0 10px; } .diary-book-list > div > span:nth-of-type(2) { display:inline-block;margin-left:5px; } .diary-book-list > div > button { padding: 8px 15px; } .diary-book-list > #view_loading_state { text-align:center; margin-top:10px; } .diary-book-list > #country_list_id { display: none; width: 100%; min-height:40px; max-height:300px; margin-top:10px; margin-bottom:10px; overflow-y:auto; border: 1px solid #DDDDDD; } .diary-book-list > #country_list_id > table > tbody > tr:first-child > td { border-top: 0; } .diary-book-list > #country_list_id > table, .diary-book-list > #country_list_id > table > tbody { border-bottom: 0; } .diary-book-list > #today_read_book { margin-top:10px; } .diary-book-list > #today_read_book > table { border: 3px solid #FF3366; } /* .diary-book-list > #today_read_book > table > tbody, .diary-book-list > #today_read_book > table > tbody > tr > td { border: 0; } */ .diary-book-list > #today_read_book > table > tbody > tr > td:nth-of-type(2) { font-weight: 700; } .diary-book-list > #today_read_book > table > tbody > tr > td > label > input[type="checkbox"] { width: 25px; height: 25px; } @media all and (max-width: 992px){ .diary-book-list > div > span:nth-of-type(1) { height: 22px; line-height:22px; margin-left:10px; padding: 0 0; font-size: 12px; } .diary-book-list > div > span:nth-of-type(2) > input.form-control { font-size: 12px; padding: 6px; height: 30px; } .diary-book-list > div > button { padding: 6px 8px; font-size: 12px; } } @media all and (max-width: 480px){ .diary-book-list > div > span:nth-of-type(1) { display:block; margin-bottom: 5px; } } .archive-panel > .form-mgroup > .col-fxl-10 > * { font-family: 'Spoqa Han Sans', sans-serif; } .archive-panel > .no-archive { display: block; padding: 40px; text-align: center; } .archive-panel > .no-archive > span { font-weight: 600; } .archive-panel > .form-mgroup > div:first-child > .diary-link { cursor: pointer; } .archive-panel > .form-mgroup > div:first-child > .diary-link > h3 { font-weight: 400; font-size: 20px; font-family: 'Spoqa Han Sans', sans-serif; color: #5A5A5A; margin: 0 0 5px; line-height: 1.3; } .archive-panel > .form-mgroup > div:first-child > .diary-link:hover > h3 { color: #FF3366; } .archive-panel > .form-mgroup > div:first-child > .diary-link > div { color: #888888; } .archive-panel > .form-mgroup > div:first-child > p { color: #999999; margin-top: 10px; font-size: 14px; } .archive-panel > .form-mgroup > div:first-child > p > span:nth-of-type(2) { color: #FF3366; } .archive-panel > .form-mgroup > div:first-child > p > span:nth-of-type(1) { color: #EEEEEE; font-size: 10px; margin-left: 6px; margin-right: 6px; } .archive-panel > .form-mgroup > div:first-child > .date { padding-top: 10px; font-size: 13px; color: #888888; } .archive-panel > .form-mgroup > div:first-child > .date > div > span.line { font-size: 10px; color: #CCCCCC; padding: 0 15px; } .archive-panel > .form-mgroup > div:first-child > .date > div > span { font-size: 13px; padding-left: 2px; } @media (max-width:480px){ .archive-panel > .form-mgroup > div:first-child > .diary-link > h3 { font-size: 18px; } .archive-panel > .form-mgroup > div:first-child > .date > .pull-left, .archive-panel > .form-mgroup > div:first-child > .date > .pull-right { float: left; display: block; text-align: left; } .archive-panel > .form-mgroup > div:first-child > .date > div > span.line { padding: 0 7px; } } .my-diary-children-list { text-align: left; margin: 0; padding: 0 10px; } .my-diary-book-list { text-align: left; margin: 0; border: 3px solid #FCD800; padding: 0 10px; } .my-diary-book-list > table, .my-diary-book-list > table > tbody { border-bottom: 0; } .my-diary-book-list > table > tbody > tr > td { border-top: 1px solid #EAEAEA; } .my-diary-book-list > table > tbody > tr:first-child > td { border-top: 0; } .my-diary-book-list > table > tbody > tr:last-child > td { border-bottom: 0; } /* .diary-book-list > table > tbody, .diary-book-list > table > tbody > tr > td { border: 0; } */ .my-diary-book-list > table > tbody > tr > td:nth-of-type(2) { font-weight: 600; color: #333333; } .my-diary-memo { font-size: 16px; line-height: 32px; } /* ######################### 최근글 ######################### */ .integration-panel > div { padding-left: 10px; padding-right: 10px; } .integration-panel > div > h3 { font-size: 17px; font-weight: 500; margin-bottom: 4px; color: #999999; } .integration-panel > div > h3 > a { color: #1A0DAB; } .integration-panel > div > h3 > small { padding-left: 10px; font-size: 14px; } .integration-panel > div > h4 > a { font-size: 80%; font-weight: 500; line-height: 1.5; color: #1A0DAB; } .integration-panel > div > p.content { color: #777777; } .integration-panel > div > p.category { color: #BBBBBB; } .integration-panel > div > p.category > span{ font-size: 10px; padding: 3px; } /* .integration-panel > div > p.category > span { padding: 0 10px; } .integration-panel > div > p.category > span:nth-of-type(2) { padding: 0 4px; } */ .integration-panel > div > p.category > a { color: #1A0DAB; } @media (max-width: 768px) { .integration-panel > div { padding-left: 0; padding-right: 0; } .integration-panel > div > h3 { font-size: 15px; } .integration-panel > div > h3 > small, .integration-panel > div > p.content, .integration-panel > div > p.category { font-size: 13px; } } /* ######################### 최근글 ######################### */ /* ######################### Books icon ####################### */ .bookpd-tb > table > tbody > tr > td > span { margin-left: 1px; } .bookpd-tb > table > tbody > tr > td span, .content-books-list > div > div > h5 > span, .content-books-list > div > div > p > span, .content-books-list > div > div > p > a > span, .search-book-list > div > div > h5 > span, .search-book-list > div > div > p > span, .search-book-list > div > div > p > a > span { padding: 2px 4px; color: #999999; border: 2px solid #999999; font-size: 10px; font-weight: 800; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .book-activity > a > span { padding: 2px 6px; color: #999999; border: 2px solid #999999; font-size: 10px; font-weight: 800; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .book-activity > a > span.point, .bookpd-tb > table > tbody > tr > td span.point, .content-books-list > div > div > h5 > span.point, .content-books-list > div > div > p > span.point, .search-book-list > div > div > h5 > span.point, .search-book-list > div > div > p > span.point { color: #FF3366; border: 2px solid #FF3366; } .book-activity > a > span.copyright, .bookpd-tb > table > tbody > tr > td span.copyright, .content-books-list > div > div > h5 > span.copyright, .content-books-list > div > div > p > span.copyright, .search-book-list > div > div > h5 > span.copyright, .search-book-list > div > div > p > span.copyright { color: #FF1100; border: 2px solid #FF1100; font-weight: 700; } .book-activity > a > span.series, .bookpd-tb > table > tbody > tr > td span.series, .content-books-list > div > div > h5 > span.series, .content-books-list > div > div > p > span.series, .search-book-list > div > div > h5 > span.series, .search-book-list > div > div > p > span.series { color: #FE9900; border: 2px solid #FE9900; } .book-activity > a > span.quiz, .bookpd-tb > table > tbody > tr > td span.quiz, .content-books-list > div > div > h5 > span.quiz, .content-books-list > div > div > p > span.quiz, .search-book-list > div > div > h5 > span.quiz, .search-book-list > div > div > p > span.quiz { color: #0066FF; border: 2px solid #0066FF; } .book-activity > a > span.worksheet, .bookpd-tb > table > tbody > tr > td span.worksheet, .content-books-list > div > div > h5 > span.worksheet, .content-books-list > div > div > p > span.worksheet, .search-book-list > div > div > h5 > span.worksheet, .search-book-list > div > div > p > span.worksheet { color: #00A64E; border: 2px solid #00A64E; } .book-activity > a > span.youtube, .bookpd-tb > table > tbody > tr > td span.youtube, .content-books-list > div > div > h5 > span.youtube, .content-books-list > div > div > p > span.youtube, .search-book-list > div > div > h5 > span.youtube, .search-book-list > div > div > p > span.youtube { background-color: #FF1100; color: #FFFFFF; border: 2px solid #E00F00; } span.book-activity-youtube { background-color: #FF1100; padding: 2px 4px; color: #FFFFFF; border: 2px solid #E00F00; font-size: 10px; font-weight: 800; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } .book-activity > a > span.tpage, .content-books-list > div > div > p > span.tpage, .content-books-list > div > div > p > a > span.tpage, .search-book-list > div > div > p > span.tpage, .search-book-list > div > div > p > a > span.tpage { color: #FF3366; border: 2px solid #FF3366; } .book-activity > a > span.ws, .content-books-list > div > div > p > span.ws, .content-books-list > div > div > p > a > span.ws, .search-book-list > div > div > p > span.ws, .search-book-list > div > div > p > a > span.ws { color: #21ACFF; border: 2px solid #21ACFF; } .book-activity > a > span.video, .content-books-list > div > div > p > span.video, .content-books-list > div > div > p > a > span.video, .search-book-list > div > div > p > span.video, .search-book-list > div > div > p > a > span.video { color: #00A650; border: 2px solid #00A650; } .book-activity > a:hover, .content-books-list > div > div > p > a:hover, .search-book-list > div > div > p > a:hover { text-decoration: none; } .bookpd-tb > table > tbody > tr > td > p { margin: 3px 0; } .bookpd-tb > table > tbody > tr > td > p:nth-of-type(1) > a { color: #000000; } .bookpd-tb > table > tbody > tr > td > p:nth-of-type(2) > a { font-weight: 600; font-size: 16px; } /* ######################### Books icon ####################### */ /* ######################### 내가 작성한 글 ######################### */ .archive-menu { margin: 0 0 10px 0; } .archive-menu > li { display: inline-table; padding: 10px 20px; margin: 0; font-size: 14px; color: #EEEEEE; border: 1px solid #EFEFEF; } .archive-menu > li > a { margin: 0; font-weight: 100; color: #666666; } .archive-menu > li.active > a { font-weight: 700; color: #FF3366; } .archive-total { margin: 15px 0; color: #777777; font-size: 14px; } .archive-total > i { color: #BBBBBB; font-size: 13px; } .archive-total > span { color: #555555; font-weight: 600; } a.archive-category { color: #555555; font-size: 12px; font-weight: 700; } /* ######################### 내가 작성한 글 ######################### */ /* ================== 선택 결과 표시 ================== */ .archive-point { display: inline-block; padding: 0; width: 100%; } .archive-point > table { border: 2px solid #FF3366; background-color: #FFFFFF; } .archive-point > table > tbody > tr > td { font-size: 16px; color: #777777; font-weight: 600; text-align: left; padding: 14px 20px; } .archive-point > table > tbody > tr > td:last-child { font-size: 17px; color: #000000; font-weight: 700; text-align: right; } .archive-point > table > tbody > tr:last-child { border-top: 2px solid #FF3366; } .archive-point > table > tbody > tr:last-child > td:last-child { color: #FF3366; } /* .archive-point > table > tbody > tr:last-child > td:last-child { padding: 0; text-align: center; background-color: #FF3366; } .archive-point > 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%; } .archive-point > table > tbody > tr:last-child > td:last-child > button > i { font-size: 26px; } */ /* @media (max-width: 767px) { .archive-point { float: none; width: 100%; padding: 15px 10px 0; } } */ /* ================== 유튜브PD Play 목록 ================== */ .youtube-play-list { max-height: 420px; overflow: auto; margin: 0; padding: 0; border: 1px solid #ddd; background-color: #fff; } .youtube-play-list > h4 { margin: 0; padding: 8px; color: #333333; } .youtube-play-list > h4 > small { color: #333333; } .youtube-play-list > ul { margin: 0; padding: 0; } .youtube-play-list > ul > li { display: block; clear:both; margin: 0; border-top: 1px solid #EEEEEE; min-height: auto; } .youtube-play-list > ul > li.hover, .youtube-play-list > ul > li:hover { cursor: pointer; background-color: #FFF4F7; color: #FF3366; } .youtube-play-list > ul > li > dt { float: left; min-height: 1px; width: 20%; padding: 5px 0; } .youtube-play-list > ul > li > dt > img { padding: 3px; border: 3px solid #FFFFFF; } .youtube-play-list > ul > li.hover > dt > img, .youtube-play-list > ul > li:hover > dt > img { border: 3px solid #FF3366; } .youtube-play-list > ul > li > dd { float: left; min-height: 1px; width: 80%; padding: 10px 0 10px 10px; } .youtube-play-list > ul > li > dd > span { font-size: 11px; padding-left: 5px; color: #0000FF; } @media (max-width: 720px) { .youtube-play-list > ul > li > dt { width: 15%; } .youtube-play-list > ul > li > dd { width: 85%; font-size: 13px; } } @media (max-width: 481px) { .youtube-play-list > ul > li > dt { width: 14%; } .youtube-play-list > ul > li > dt > img { min-width: 45px; } .youtube-play-list > ul > li > dd { width: 86%; padding: 5px 0 5px 10px; } } .button { display: inline-block; padding: 5px 12px; margin-bottom: 0; font-size: 13px; font-weight: 600; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; color: #333333; background-color: #FFFFFF; border: 1px solid #BBBBBB; border-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .button:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .button:hover, .button:focus { color: #000000; text-decoration: none; background-color: #FFFFFF; border: 1px solid #FF3366; } .button:active, .button.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .button-active { color: #FFFFFF; background-color: #000000; border-color: #000000; } .button-active:hover { color: #FFFFFF; background-color: #333333; border-color: #333333; } .button-active:active, .button-active:focus { color: #FFBB00; text-decoration: none; } .button-download { color: #FFFFFF; background-color: #FF3366; border-color: #FF3366; } .button-download:hover { color: #FFFFFF; background-color: #000000; border-color: #000000; } .button-download:active, .button-download:focus { color: #FF3366; text-decoration: none; } .button-point { color: #FF3366; } .button-point:hover, .button-point:focus { color: #FF3366; } .btn-disabled { pointer-events: none; cursor: not-allowed; } .btn-on-disabled { color: #FF3366; pointer-events: none; cursor: not-allowed; } .button-default { color: #FFFFFF; background-color: #FF3366; border-color: #FF3366; } .button-default:hover { color: #FFFFFF; background-color: #333333; border-color: #333333; } .button-default:active, .button-default:focus { color: #FF3366; background-color: #333333; border-color: #333333; } .button.lager { padding: 10px 50px; border-radius: 3px; font-size: 16px; font-weight: 600; text-decoration: none; } .button.small { padding: 8px 14px; } .button.xsmall { padding: 5px 14px; } .button.xxmall { padding: 4px 12px; font-size: 12px; border-radius: 3px; } .button.fsize { padding: 7px 14px; } .button > i { margin-right: 5px; font-weight: 800; } .pdlistdetail-profile { float: left; width: 100%; position: relative; min-height: 1px; padding: 25px 30px; border: 1px solid #DDDDDD; background-color: #FFFFFF; } .pdlistdetail-profile > div { float: left; position: relative; min-height: 1px; } .pdlistdetail-profile > div:nth-of-type(1) { width: 16%; } .pdlistdetail-profile > div:nth-of-type(1) > div { display: block; width: 100%; padding: 0; margin: 0 auto; text-align: center; } .pdlistdetail-profile > div:nth-of-type(1) > div > img, .pdlistdetail-profile > div:nth-of-type(1) > div > a > img { border: 1px solid #DDDDDD; } /* { border: 1px solid #DDDDDD; width: 100%; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; width: 100%; opacity:.8; filter:alpha(Opacity=80); } */ .pdlistdetail-profile > div:nth-of-type(2) { width: 60%; padding: 0 3% 0 5%; border-right: 1px solid #DDDDDD; margin-right: -1px; } .pdlistdetail-profile > div:nth-of-type(3) { width: 24%; padding: 0 0 0 3%; border-left: 1px solid #DDDDDD; } .pdlistdetail-profile > div:nth-of-type(2) > h3 { margin: 0 0 10px; } .pdlistdetail-profile > div .button i { color: #FF3366; } .pdlistdetail-profile > div label { color: #666666; } .pdlistdetail-profile > div label:nth-of-type(1) { padding-top: 6px; } .pdlistdetail-profile > div:nth-of-type(3) p { text-align: center; } .pdlistdetail-profile > div:nth-of-type(3) .button { padding: 12px 18px; font-size: 16px; } /* .pdlistdetail-profile > div:nth-of-type(1) > div > img, .pdlistdetail-profile > div:nth-of-type(1) > div > a > img { border: 1px solid #DDDDDD; width: 100%; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; } */ .pdlistdetail-picture { float: left; width: 22%; height: auto; background-color: #FFFFFF; } .pdlistdetail-picture > div { display: block; width: 100%; padding: 15px; margin: 0 auto; text-align: center; background-color: #FFFFFF; border: 1px solid #DDDDDD; } .pdlistdetail-picture > div > img, .pdlistdetail-picture > div > a > img { border: 1px solid #DDDDDD; } .pdlistdetail-picture > div > h5 { padding: 7px 0 0; margin: 0; text-align: center; } .pdlistdetail-picture > div > h5 > a.btn { margin-left: 15px; padding: 4px 9px 2px; font-size: 11px; } .pdlistdetail-picture > div > h5 > a.btn > i { color: #FF3366; margin-right: 3px; } .pdlistdetail-picture > div > h5 > a.btn:hover { border: 1px solid #FF3366; } .pdlistdetail-picture > div > p { padding: 0; margin: 0; text-align: center; } .pdlistdetail-info { float: right; width: 76%; height: auto; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } .pdlistdetail-info > div { float: left; position: relative; min-height: 1px; } .pdlistdetail-info > div:nth-of-type(1) { width: 67%; padding: 0 3% 0 0; border-right: 1px solid #DDDDDD; margin-right: -1px; } .pdlistdetail-info > div:nth-of-type(2) { width: 33%; padding: 0 0 0 3%; border-left: 1px solid #DDDDDD; } .pdlistdetail-info > div:nth-of-type(1) > h3 { margin: 0 0 10px; } .pdlistdetail-info > div:nth-of-type(1) > h3 > a.btn { margin-left: 15px; padding: 4px 9px 2px; font-size: 13px; } .pdlistdetail-info > div:nth-of-type(1) > h3 > a.btn > i { color: #FF3366; margin-right: 5px; } .pdlistdetail-picture > div .button i, .pdlistdetail-info > div .button i { color: #FF3366; } .pdlistdetail-info > div label { color: #666666; } .pdlistdetail-info > div label:nth-of-type(1) { padding-top: 6px; } .pdlistdetail-info > div:nth-of-type(2) p { text-align: center; } .pdlistdetail-info > div:nth-of-type(2) .button { padding: 12px 18px; font-size: 16px; } @media all and (max-width: 992px){ .pdlistdetail-picture, .pdlistdetail-info { float: left; display: block; width: 100%; clear:both; } .pdlistdetail-info { border-top: 0; } .pdlistdetail-info > div:nth-of-type(1) { width: 60%; padding: 0 2% 0 0; } .pdlistdetail-info > div:nth-of-type(2) { width: 40%; padding: 0 0 0 1.5%; } .pdlistdetail-info > div:nth-of-type(2) .button { padding: 8px 18px; font-size: 14px; } } @media all and (max-width: 767px){ .pdlistdetail-picture, .pdlistdetail-info, .pdlistdetail-picture > div { border: 0 } .pdlistdetail-info { border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; } } @media all and (max-width: 620px){ .pdlistdetail-info > div:nth-of-type(1), .pdlistdetail-info > div:nth-of-type(2) { width: 100%; padding: 0; border: 0; } .pdlistdetail-info > div:nth-of-type(2) { padding-top: 15px; } } .mission-left { float: left; width: 60%; position: relative; min-height: 1px; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } .mission-right { float: right; width: 38%; position: relative; min-height: 1px; } @media all and (max-width: 992px){ .mission-left, .mission-right { float: none; display: block; width: 100%; padding: 10px 0 5px; } } .block-widget { margin-bottom: 20px; display: block; text-align: center; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } .active-widget { margin-bottom: 10px; display: block; text-align: left; background-color: #FFFFFF; border: 1px solid #DEDCDD; padding: 20px; } .active-widget > .category { display: block; text-align: left; font-size: 16px; background-color: #FFFFFF; border-bottom: 1px solid #DEDCDD; } .active-widget > .category > a { display: inline-table; color: #000000; padding: 10px 20px 25px; font-weight: 600; } .active-widget > .category > a:hover { display: inline-table; color: #000000; padding: 10px 20px 25px; font-weight: 600; } .active-widget > .category > a.active { color: #FF3366; padding: 10px 20px 25px; font-weight: 600; } /* ########## 회원 미션 실행 상황 ########## */ .mission-widget { margin-bottom: 10px; float: left; width:100%; background-color: #FFFFFF; border: 1px solid #DEDCDD; clear: both; } .mission-widget > div { float: left; position: relative; width: 33.33333333333333%; min-height: 1px; padding: 7px 5px 6px; color: #333333; text-align: center; } .mission-widget > div:nth-of-type(2) { border-left: 1px solid #DEDCDD; border-right: 1px solid #DEDCDD; height: auto; } .mission-widget > div > h2 { font-size: 28px; margin: 0; padding: 0; } .mission-widget > div > h5 { font-size: 15px; font-weight: 700px; margin: 8px 0 0; padding: 0; } .mission-widget > div > h6 { font-size: 13px; margin: 0; } .mission-widget > div > h6 > span { display: none; } .mission-widget > div > a > span { font-size: 14px; padding: 5px 7px; margin: 3px 0 0; } /* ########## 회원 미션 실행 기본정보 ########## */ .mission-info { margin-bottom: 10px; display: inline-table; width: 100%; background-color: #FFFFFF; border: 1px solid #DEDCDD; clear: both; padding: 18px 15px; } .mission-info > h4, .mission-info > div > h4 { font-size: 16px; margin: 0; padding: 0; text-align: left; } .mission-info > h4:nth-of-type(2) { padding: 10px 0; } .mission-info > h4 > a.btn { float: right; padding: 4px 6px; font-size: 13px; } /* ########## 미션 관련 버튼 ########## */ .mission-button { display: inline-table; width: 100%; clear: both; } .mission-button > a { float: left; position: relative; width: 100%; min-height: 1px; padding: 16px 20px; font-size: 14px; font-weight: 600; text-align: left; line-height: 26px; } .mission-button > a > i { float: right; font-size: 54px; font-weight: 100; } @media all and (max-width: 992px){ .mission-widget, .mission-info { margin-bottom: 10px; } .mission-widget > div > h6 { margin: 0; padding: 0; } .mission-widget > div > h6 > br { display: none; } .mission-widget > div > h6 > span { display: inline-block; padding: 0 6px; font-style: normal; } .mission-button > a { padding: 15px 5px; border-radius: 0; -webkit-border-radius: 0; } } /* ########## 미션 일지, SNS, 코멘트 작성내역 ########## */ .mission-diary { min-height: 150px; } /* ### RIGHT SIDEBAR CLASS CALENDAR ### */ /* .calendar-wrap { margin-left: 0; margin: 0; min-height: 350px; } .calendar-wrap > .loading { padding: 200px 0; color: #999999; text-align: center; background-color: #FAFAFA; } .widget-calendar .widget-title { margin: 0; padding: 0 0 10px; border-bottom: 1px solid #EEEEEE; } .widget-calendar caption { margin: 0 0 13px; text-align: center; color:#000000; } .widget-calendar caption div { float: left; display: inline-table; text-align: center; } .widget-calendar caption div:nth-of-type(1) { width: 15%; text-align: left; } .widget-calendar caption div:nth-of-type(2) { width: 70%; font-size: 16px; font-weight: 700; } .widget-calendar caption div:nth-of-type(3) { width: 15%; text-align: right; } .widget-calendar caption div:nth-of-type(1) a, .widget-calendar caption div:nth-of-type(3) a { color: #FF3366; border: 1px solid #EEEEEE; background-color: #EEEEEE; padding: 8px 10px 6px; -webkit-border-radius:3px; border-radius:3px; } .widget-calendar caption div:nth-of-type(1) a:hover, .widget-calendar caption div:nth-of-type(3) a:hover { color: #FFFFFF; border: 1px solid #FF3366; background-color: #FF3366; text-decoration: none; } .widget-calendar caption a i { font-size: 18px; } .widget-calendar caption div a.disabled, .widget-calendar caption div a[disabled], .widget-calendar caption div a.disabled:hover, .widget-calendar caption div a[disabled]:hover, .widget-calendar caption div a.disabled:focus, .widget-calendar caption div a[disabled]:focus, .widget-calendar caption div a.disabled:active, .widget-calendar caption div a[disabled]:active, .widget-calendar caption div a.disabled.active, .widget-calendar caption div a[disabled].active { pointer-events: none; cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } .widget-calendar table { margin-bottom:0; table-layout:fixed; width:100%; border-collapse:separate; border-spacing:5px; border:none; } .widget-calendar table tbody+tbody, .widget-calendar table td, .widget-calendar table th, .widget-calendar table thead th { border:none } .widget-calendar th { font-size: 10px; text-align: center; padding:0 0 4px; font-weight:400 } .widget-calendar th:first-child { color: #FF1100; } .widget-calendar th:last-child { color: #0000FF; } .widget-calendar tbody td { position:relative; font-size: 10px; padding: 5px; text-align: center; -webkit-border-radius: 3px; border-radius:3px; line-height: 100%; padding: 5px; height: 50px; } .widget-calendar tbody td a { display:block; position:absolute; top:0; left:0; width:100%; height:100%; padding: 5px; -webkit-border-radius:3px; border-radius:3px; color:inherit; border:1px solid #F3F3F3; background-color:#FFFFFF; color:#888888; } .widget-calendar tbody td a:hover { background-color:#3AD88F; color:#FFFFFF; border-color:#3AD88F; text-decoration: none; } .widget-calendar tbody td:not(.pad) { background-color:#F8F8F8; color:#AAAAAA; } .widget-calendar tbody td span, .widget-calendar tbody td a span { text-align: right; display:block; } .widget-calendar tbody td i, .widget-calendar tbody td a i { text-align: center; display:block; font-size: 40px; } .widget-calendar tbody td.success a i { color: #FF3366; } .widget-calendar tbody td.fail i { color: #CCCCCC; } .widget-calendar tbody td a:hover span { color: #FFFFFF; } .widget-calendar tbody td#today{ background-color:#3AD88F; color:#FFFFFF;} .widget-calendar tbody td#today a { display:block; position:absolute; top:0; left:0; width:100%; height:100%; padding: 5px; -webkit-border-radius:3px; border-radius:3px; color:inherit; background-color:#3AD88F; color:#FFFFFF; border-color:#3AD88F; text-decoration: none; } .widget-calendar tbody td#today a:hover i { color:#FF3366; } .widget-calendar tbody td.holiday{ background-color:#EAEAEA; color:#FF1100;} .widget-calendar tbody td.holiday span + span { font-size:10px; color: #FF1100; line-height: 150%; } .widget-calendar tbody td.not{ background-color:#FFFFFF; color:#CCCCCC; } .widget-calendar tbody td.not-holiday{ background-color:#FFFFFF; color:#FF1100;} .widget-calendar tbody td.not-holiday span + span { width: 100%; font-size:10px; color: #FF1100; line-height: 150%; } @media (min-width:1441px) { .calendar-wrap{ margin-left: -10px; margin: -10px } .widget-calendar table { border-spacing:10px } .widget-calendar tbody td { vertical-align: top; text-align: center; line-height: 100%; padding: 5px; height: 76px; } .widget-calendar tbody td i, .widget-calendar tbody td a i { font-size: 52px; } } */ .mission-title > a { float: right; font-size: 15px; font-weight: 500; margin-left: 10px; padding: 6px 10px 4px; } .mission-title > a > i { margin-right: 5px; } .calendar-wrap { margin-left: 0; margin: 0; min-height: 300px; } .calendar-wrap > .loading { padding: 200px 0; color: #999999; text-align: center; background-color: #FAFAFA; } .widget-calendar .widget-title { margin: 0; padding: 0 0 10px; border-bottom: 1px solid #EEEEEE; } .widget-calendar caption { margin: 0; text-align: center; color:#000000; } .widget-calendar caption div { float: left; display: inline-table; text-align: center; } .widget-calendar caption div:nth-of-type(1) { width: 15%; text-align: left; } .widget-calendar caption div:nth-of-type(2) { width: 70%; font-size: 16px; font-weight: 700; } .widget-calendar caption div:nth-of-type(3) { width: 15%; text-align: right; } .widget-calendar caption div:nth-of-type(1) a, .widget-calendar caption div:nth-of-type(3) a { color: #FF3366; border: 1px solid #EEEEEE; background-color: #EEEEEE; padding: 8px 10px 6px; -webkit-border-radius:3px; border-radius:3px; } .widget-calendar caption div:nth-of-type(1) a:hover, .widget-calendar caption div:nth-of-type(3) a:hover { color: #FFFFFF; border: 1px solid #FF3366; background-color: #FF3366; text-decoration: none; } .widget-calendar caption a i { font-size: 18px; } .widget-calendar caption div a.disabled, .widget-calendar caption div a[disabled], .widget-calendar caption div a.disabled:hover, .widget-calendar caption div a[disabled]:hover, .widget-calendar caption div a.disabled:focus, .widget-calendar caption div a[disabled]:focus, .widget-calendar caption div a.disabled:active, .widget-calendar caption div a[disabled]:active, .widget-calendar caption div a.disabled.active, .widget-calendar caption div a[disabled].active { pointer-events: none; cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } .widget-calendar table { margin-bottom: 0; table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 5px; border: none; } .widget-calendar table tbody+tbody, .widget-calendar table td, .widget-calendar table th, .widget-calendar table thead th { border:none } .widget-calendar th { font-size: 10px; text-align: center; margin: 0; padding: 0; font-weight: 600; } .widget-calendar th:first-child { color: #FF1100; } .widget-calendar th:last-child { color: #0000FF; } .widget-calendar tbody td { position:relative; font-size: 10px; text-align: center; -webkit-border-radius: 3px; border-radius:3px; line-height: 100%; padding: 5px 1px; height: 50px; } .widget-calendar tbody td a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 5px 1px; -webkit-border-radius: 3px; border-radius: 3px; color: inherit; border: 1px solid #F3F3F3; background-color: #FFFFFF; color: #888888; } .widget-calendar tbody td a:hover { background-color:#3AD88F; color:#FFFFFF; border-color:#3AD88F; text-decoration: none; } .widget-calendar tbody td:not(.pad) { background-color:#F8F8F8; color:#AAAAAA; } .widget-calendar tbody td span, .widget-calendar tbody td a span { text-align: right; display:block; color: #555555; } .widget-calendar tbody td i, .widget-calendar tbody td a i { text-align: center; display: inline-block; font-size: 18px; margin: 5px 2px 0; font-weight: normal; } .widget-calendar tbody td.success a i { color: #FF3366; } .widget-calendar tbody td.fail i, .widget-calendar tbody td i.off-data, .widget-calendar tbody td a i.off-data { color: #CCCCCC; } .widget-calendar tbody td a:hover span { color: #FFFFFF; } .widget-calendar tbody td#today{ background-color:#3AD88F; color:#FFFFFF;} .widget-calendar tbody td#today a { background-color:#3AD88F; color:#FFFFFF; border-color:#3AD88F; } .widget-calendar tbody td#today a:hover i { color:#FF3366; } .widget-calendar tbody td.holiday{ background-color:#EAEAEA; color:#FF1100;} .widget-calendar tbody td.holiday span + span { font-size:10px; color: #FF1100; line-height: 150%; } .widget-calendar tbody td.not{ background-color:#FFFFFF; color:#CCCCCC; } .widget-calendar tbody td.not span{ color:#CCCCCC; } .widget-calendar tbody td.not-holiday{ background-color:#FFFFFF; color:#FF1100;} .widget-calendar tbody td.not-holiday span + span { width: 100%; font-size:10px; color: #FF1100; line-height: 150%; } .mission-calendar-exp { display: block; text-align: right; font-size: 14px; border-top: 1px solid #DEDCDD; padding-top: 8px; color: #777777; } .mission-calendar-exp > i { margin-left: 15px; } @media (min-width:1441px) { .calendar-wrap{ margin-left: -10px; margin: -10px } .widget-calendar table { border-spacing: 7px } .widget-calendar tbody td { vertical-align: top; text-align: center; line-height: 100%; padding: 5px; height: 57px; } .widget-calendar tbody td i, .widget-calendar tbody td a i { font-size: 22px; margin-left: 4px; margin-right: 4px; } } @media all and (max-width: 480px){ .widget-calendar tbody td { height: 45px; } .widget-calendar tbody td i, .widget-calendar tbody td a i { margin-top: 5px; font-size: 16px; } } @media all and (max-width: 320px){ .widget-calendar tbody td i, .widget-calendar tbody td a i { font-size: 16px; } } .widget-calendar-attend { position: relative; font-size: 10px; font-weight: 400; padding: 1px 3px; border-radius: 3px; } .wc-attend1 { background-color: #00AAF0; border: 1px solid #0099CC; color: #FFFFFF; } .wc-attend2 { background-color: #EEFCFE; border: 1px solid #96DFE8; color: #0180BF; } .wc-attend3 { background-color: #FFF8F8; border: 1px solid #FF9F98; color: #FF1100; } .wc-attend4 { background-color: #F7F7F7; border: 1px solid #CCCCCC; color: #AAAAAA; } .wc-attend5 { background-color: #EEFCFE; border: 1px solid #99E5EE; color: #0180BF; } .wc-attend6 { background-color: #FF6600; border: 1px solid #D35400; color: #FFFFFF; } .wc-attend1:hover, .wc-attend2:hover, .wc-attend3:hover, .wc-attend4:hover, .wc-attend5:hover, .wc-attend6:hover { text-decoration: none; } /* ############################# 일지작성 자녀 영어 노출시간 ############################# */ .diary-child-category { float: left; display:block; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; padding: 10px 0; width: 100%; } .diary-child-category > div { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; width: 100%; } .diary-child-category > div:nth-of-type(1) { width: 25%; padding-right: 0; padding-left: 0; } .diary-child-category > div:nth-of-type(1) > ul, .diary-child-category > div:nth-of-type(1) > ul > li, .diary-child-category > div:nth-of-type(1) > ul > li > dl { display: block; width: 100%; clear: both; padding: 0; margin: 0; border: 2px solid #FFFFFF; } .diary-child-category > div:nth-of-type(1) > ul > li > dl { cursor: pointer; } .diary-child-category > div:nth-of-type(1) > ul > li > dl.active { border: 2px solid #FF3399; background-color: #FFFDDA; font-weight: 500; } .diary-child-category > div:nth-of-type(1) > ul > li > dl.active > dd { font-weight: 700; color: #000000; } .diary-child-category > div:nth-of-type(1) > ul > li > dl + dl { border-top: 1px solid #AAAAAA; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dt, .diary-child-category > div:nth-of-type(1) > ul > li > dl > dd { float: left; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dt { width: 20%; padding: 5px 5px 3px 5px; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dt img { width: 100%; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dd { width: 80%; padding-top: 13px; } .diary-child-category > .diary-ctime { width: 75%; display: none; } .diary-child-category > .diary-ctime.first { display: block; } .diary-child-category > .diary-ctime > div { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .diary-child-category > .diary-ctime > div:nth-of-type(1) { width: 50%; border-left: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } .diary-child-category > .diary-ctime > div:nth-of-type(2) { width: 25%; text-align: center; border-right: 1px solid #EEEEEE; } .diary-child-category > .diary-ctime > div:nth-of-type(3) { width: 25%; text-align: center; } .diary-child-category > .diary-ctime > div > a { float: left; width: 100%; padding: 8px; color: #000000; } .diary-child-category > .diary-ctime > div > a:hover { background-color: #FFF5F7; border: #FFCBD8 1px solid; text-decoration: none; } .diary-child-category > .diary-ctime > div > a > h2 { margin: 8px 0 0; } .diary-child-category > .diary-ctime > div > table { width: 100%; } .diary-child-category > .diary-ctime > div > table > tbody > tr > td { padding: 2px; line-height: 1.428571429; vertical-align: middle; font-size: 14px; } .diary-child-category > .diary-ctime > div > table > tbody > tr > td > .button { width: 80px; padding: 6px 0; font-size: 14px; } @media all and (max-width: 992px){ .diary-child-category > div { padding: 0; } .diary-child-category > div:nth-of-type(1) { width: 100%; padding-right: 0; padding-left: 0; padding-bottom: 10px; } .diary-child-category > div:nth-of-type(1) > ul > li > dl { float: left; position: relative; min-height: 1px; padding: 0; width: 25%; display: normal; clear: none; border: 2px solid #EEEEEE; cursor: pointer; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dt { width: 30%; max-width: 40px; padding: 3px 3px 0; text-align: left; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dd { width: 70%; padding-top: 8px; padding-left: 4px; font-size: 13px; } .diary-child-category > div:nth-of-type(1) > ul > li > dl > dd > span { display: none; } .diary-child-category > div:nth-of-type(1) > ul > li > dl + dl { border: 2px solid #EEEEEE; } .diary-child-category > .diary-ctime { width: 100%; } .diary-child-category > .diary-ctime > div { padding-right: 5px; padding-left: 5px; font-size: 12px; } .diary-child-category > .diary-ctime > div:nth-of-type(1) { width: 50%; border-left: 0; } .diary-child-category > .diary-ctime > div:nth-of-type(2), .diary-child-category > .diary-ctime > div:nth-of-type(3) { width: 25%; } .diary-child-category > .diary-ctime > div > a > h2 { font-size: 26px; margin: 8px 0 0; } .diary-child-category > .diary-ctime > div > table > tbody > tr > td { font-size: 12px; } .diary-child-category > .diary-ctime > div > table > tbody > tr > td > .btn { width: auto; padding: 4px 9px; font-size: 12px; } } /* ############### MEMBER JOIN ############### */ .site-agree { margin: 0; padding: 0 10px; text-align: left; } .site-agree > li { display: block; clear: both; margin: 0; padding: 20px 0; list-style-type: disc; } .site-agree > li > dl { display: block; clear: both; color: #666; margin: 0; padding: 0; } .site-agree > li > dl > dt { float: left; margin: 0; padding: 0; font-weight: 400; color: #333333; } .site-agree > li > dl > dd { float: right; } .site-agree > li:last-child { color: #000000; border: 1px solid #EEBB00; background-color: #FFCC00; padding: 6px 10px; margin-top: 20px; font-weight: 400; -webkit-border-radius:3px; border-radius:3px; } .site-agree i { font-weight: 500; } @media (max-width: 992px) { .site-agree { padding: 0; } .site-agree > li { padding: 0 0 30px; } .site-agree > li > dl > dt { float: none; display: block; clear: both; } .site-agree > li > dl > dd { float: none; display: block; clear: both; padding-top: 15px; } .site-agree > li:last-child { margin-top: 0; } } /* ############### MEMBER JOIN ############### */ .table-city-section > div { float: left; position: relative; min-height: 1px; padding: 5px; width: 50%; } .table-meeting > tbody > tr > td { padding: 5px; background-color: #EEEEEE; color: #333333; cursor: pointer; } .table-meeting > tbody > tr > td:hover { color: #000000; } .table-meeting > tbody > tr > td.active { background-color: #FFFFFF; color: #000000; font-weight: 600; } #choise-city { max-height: 285px; overflow-y: auto; } .venobox-body { position: relative; padding: 15px 10px; } .venobox-body > h3 { margin: 0; padding: 0; } .venobox-body > form > h5 { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #CCCCCC; } .venobox-body > form > h5 > span { color: #777777; } /* venobox-close */ .venobox-close { position: absolute; right: -8px; top: -10px; text-align: right; height: 50px; width: 50px; z-index: 1; } .venobox-close > a { height: 50px; width: 50px; font-size: 42px; color: #000000; } .venobox-close > a:hover { color: #FF1100; text-decoration: none; } /* venobox-close */