@charset "utf-8";


/* font */

@font-face {
  font-family: 'NotoSansKR';
  font-weight: 200;
  src: url(../fonts/NotoSansKR-Thin.woff) format('woff'), url(../fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansKR'; 
  font-weight: 300; 
  src: url(../fonts/NotoSansKR-Light.woff) format('woff'), url(../fonts/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansKR'; 
  font-weight: normal; 
  src: url(../fonts/NotoSansKR-Regular.woff) format('woff'), url(../fonts/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansKR'; 
  font-weight: 500; 
  src: url(../fonts/NotoSansKR-Medium.woff) format('woff'), url(../fonts/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansKR'; 
  font-weight: bold; 
  src: url(../fonts/NotoSansKR-Bold.woff) format('woff'), url(../fonts/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'NotoSansKR'; 
  font-weight: 900; 
  src: url(../fonts/NotoSansKR-Black.woff) format('woff'), url(../fonts/NotoSansKR-Black.otf) format('opentype');
}


/* Default */

* {margin: 0; padding: 0;}
html, body, div, input, label, select, textarea, button, h1, h2, h3, h4, h5, h6, strong, p, a, ul, li, dl, dt, dd, a {font-family: 'NotoSansKR', sans-serif; letter-spacing: -0.15px;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block;}
a {text-decoration: none;}
img {max-width: 100% !important; border: 0; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ""; content: none;}
table {width: 100%; max-width: 100% !important; border-spacing: 0; table-layout: fixed; word-break: break-all;}
textarea {resize: none; outline: 0;}
button {text-decoration: none; background: transparent; border: none; outline: 0; white-space: nowrap; cursor: pointer;}


/* */

.fixed {position: fixed !important;}
.hidden {display: none !important;}
.blind {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.ellipsis {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/** Ham 수정 **/
.ellipsis.elp2 {
  /*display: -webkit-box !important;*/
  white-space: initial; word-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.float:after {display: block; content: ""; clear: both;}
.float-left {float: left;}
.float_right {float: right;}

.pc-show {display: block;}
.pc-show-ib {display: inline-block;}
.mob-show,
.mob-show-ib {display: none;}


  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) {

      .pc-show,
      .pc-show-ib {display: none;}
      .mob-show {display: block;}
      .mob-show-ib {display: inline-block;}
      
  }


/* mask */

body:before {display: none; content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; visibility: visible; opacity: 0.5; transition: opacity 0.3s linear 0.4s, visibility 0.00s linear 0.00s; background-color: #000;}
body.menu-on,
body.search-on,
body.mask-on {overflow: hidden}
body.menu-on:before,
body.search-on:before {display: block; z-index: 1004;}
body.mask-on:before {display: block; z-index: 1006;}


/* header */

.header {position: relative; line-height: 1.2; z-index: 1005;}
.header a,
.header span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.header ul,
.header li,
.header ol {list-style: none;}
.header strong {display: block;}
.header a {-webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.header-field {position: fixed; top: 0; left: 0; width: 100%; text-align: center; background-color: #fff; border-bottom: 1px solid #a8a8a8; z-index: 100;}
.header .logo {display: inline-block; position: relative; line-height: 140px; font-size: inherit; font-weight: inherit; z-index: 5;}
.header .logo a {width: 188px; height: 80px; background: url(../images/logo-abc.png) center center no-repeat; background-size: auto 100%; vertical-align: middle; z-index: 5;}

.header.fix .logo {line-height: 67px;}
.header.fix .logo a {height: 47px;}

.header .menu,
.header .btn-menu,
.header .menu i,
.header .btn-menu i {display: inline-block; transition: all 0.4s; box-sizing: border-box;}
.header .menu {position: absolute; top: 14px; right: 32px; padding: 9px 7px; width: 40px; height: 40px; z-index: 1;}
.header .btn-menu {display: none;}

.header .i-menu {position: relative; width: 25px; height: 21px;}
.header .i-menu i {position: absolute; left: 0; width: 25px; height: 3px; background-color: #000; border-radius: 3px;}
.header .i-menu i:nth-of-type(1) {top: 0;}
.header .i-menu i:nth-of-type(2) {top: 9px; left: 6px; width: 18px;}
.header .i-menu i:nth-of-type(3) {bottom: 0;}

.header .menu:hover .i-menu i,
.header .menu.active .i-menu i,
.header .btn-menu.active .i-menu i {background-color: #00b6f0;}
.header .menu.active .i-menu i:nth-of-type(1) {transform: translateY(9px) rotate(-45deg);}
.header .menu.active .i-menu i:nth-of-type(2) {left: 100%; opacity: 0;}
.header .menu.active .i-menu i:nth-of-type(3) {transform: translateY(-9px) rotate(45deg);}

.header.fix .menu {top: 12px; padding: 3px; width: 26px; height: 26px;}

.header.fix .menu .i-menu {width: 20px; height: 18px;}
.header.fix .menu .i-menu i {width: 20px;}
.header.fix .menu .i-menu i:nth-of-type(2) {top: 8px; left: 6px; width: 14px;}
.header.fix .menu.active .i-menu i:nth-of-type(1) {transform: translateY(8px) rotate(-45deg);}
.header.fix .menu.active .i-menu i:nth-of-type(2) {left: 100%; opacity: 0;}
.header.fix .menu.active .i-menu i:nth-of-type(3) {transform: translateY(-7px) rotate(45deg);}

.header .i-home,
.header .i-notice,
.header .i-share,
.header .i-my,
.header .i-login,
.header .i-logout,
.header .i-search {position: relative; width: 40px; height: 40px; background-position: center center; background-repeat: no-repeat; background-size: 35px auto;}
.header .i-notice.new:before {display: block; content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: url(../images/i-notice-new.png) center center no-repeat; background-size: 100% auto;}

.header-util {display: flex; position: absolute; top: 50px; left: 0; right: 0; margin: 0 auto; padding: 0 40px; width: 100%; font-size: 12px; justify-content: space-between; box-sizing: border-box;}
.header-util .column {display: flex; white-space: nowrap; align-items: flex-start;}
.header-util .column > a {position: relative; height: 40px;}
.header-util .column:first-child > a {margin-right: 75px;}
.header-util .column:last-child > a {margin-left: 75px;}
.header-util .column > a {width: 40px; height: 40px; background-size: 35px auto;}
.header-util .column > a span {position: absolute; top: 100%; left: 50%; margin-top: 5px; padding: 5px 10px; max-height: 20px; color: #555; background-color: #fff; border-radius: 2px; transform: translateX(-50%); box-shadow: 1px 1px 3px rgb(0 0 0 / 18%); pointer-events: none; opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; z-index: 5;}
.header-util .column > a span:before {content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; background-color: #fff; transform: rotate(-135deg); box-shadow: 1px 1px 3px rgb(0 0 0 / 8%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}

.header-util .column > a.gsmc {width: 111px; background: url(../images/logo-GSMC.png) center center no-repeat; background-size: 100% auto;}
.header-util .column > a.chatomy {width: 152px; background: url(../images/logo-chatomy.png) center center no-repeat; background-size: 100% auto;}

.header-util .column .i-home {background-image: url(../images/i-home.png);}
.header-util .column .i-notice {background-image: url(../images/i-notice.png);}
.header-util .column .i-share {background-image: url(../images/i-share.png);}
.header-util .column .i-my {background-image: url(../images/i-my.png);}
.header-util .column .i-login {background-image: url(../images/i-login.png);}
.header-util .column .i-logout {background-image: url(../images/i-logout.png);}
.header-util .column .i-search {background-image: url(../images/i-search.png);}

.header-util .column .i-home:hover {background-image: url(../images/i-home-hover.png);}
.header-util .column .i-notice:hover {background-image: url(../images/i-notice-hover.png);}
.header-util .column .i-share:hover {background-image: url(../images/i-share-hover.png);}
.header-util .column .i-my:hover {background-image: url(../images/i-my-hover.png);}
.header-util .column .i-login:hover {background-image: url(../images/i-login-hover.png);}
.header-util .column .i-logout:hover {background-image: url(../images/i-logout-hover.png);}
.header-util .column .i-search:hover {background-image: url(../images/i-search-hover.png);}

.header-util .column > a:hover span {opacity: 1;}

.header.fix .header-util {top: 20px;}
.header.fix .header-util .column > a {width: 26px; height: 26px; background-size: 26px auto;}
.header.fix .header-util .column .notice.new:before {width: 15px; height: 15px;}
.header.fix .header-util .column > a.gsmc {width: 90px; background-size: 100% auto;}
.header.fix .header-util .column .chatomy {width: 120px; background-size: 100% auto;}


.header-menu {position: relative; border-top: 1px solid #a8a8a8; box-shadow: 0px 3px 3px 0 rgb(5 5 5 / 10%); box-sizing: border-box;}
.header-menu .menu-list {position: relative; margin: 0 auto; padding-right: 120px; box-sizing: border-box;}
.header-menu .menu-list .list {display: flex; position: relative; justify-content: space-between;}
.header-menu .menu-list .list > li {float: left; position: relative; text-align: center;}
.header-menu .menu-list .list > li:first-child:nth-last-child(1) {width: 100%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(2),
.header-menu .menu-list .list > li:first-child:nth-last-child(2) ~ li {width: 50%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(3),
.header-menu .menu-list .list > li:first-child:nth-last-child(3) ~ li {width: 33.3333%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(4),
.header-menu .menu-list .list > li:first-child:nth-last-child(4) ~ li {width: 25%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(5),
.header-menu .menu-list .list > li:first-child:nth-last-child(5) ~ li {width: 20%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(6),
.header-menu .menu-list .list > li:first-child:nth-last-child(6) ~ li {width:16.6%;}
.header-menu .menu-list .list > li:first-child:nth-last-child(7),
.header-menu .menu-list .list > li:first-child:nth-last-child(7) ~ li {width:14.28%;}
.header-menu .menu-list .list > li > a {display: block; position: relative; line-height: 68px; font-size: 20px; color: #000; font-weight: 500; background-color: #fff; box-sizing: border-box; z-index: 2;}
.header-menu .menu-list .list > li > a:before {display: block; content: ''; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background-color: #00b6f0; transition: left .3s, right .3s; z-index: 11;}
.header-menu .menu-list .list > li > a:hover,
.header-menu .menu-list .list > li:hover > a,
.header-menu .menu-list .list > li.active > a {color: #00b6f0;}

.header.fix .header-menu .menu-list .list > li > a {line-height: 51px; font-size: 18px;}

.header-menu .menu-list .list .depth {display: none; position: absolute; top: 100%; left: 50%; padding: 15px 20px; background-color: #fff; border: 1px solid #a8a8a8; transform: translateX(-50%); box-sizing: border-box; white-space: nowrap;}
.header-menu .menu-list .list .depth ul {}
.header-menu .menu-list .list .depth ul li {position: relative;}
.header-menu .menu-list .list .depth ul li a {position: relative; padding: 7px 0; font-size: 18px; color: #242424;}
.header-menu .menu-list .list .depth ul li.active a,
.header-menu .menu-list .list .depth ul li a:hover {font-weight: bold;}

.header.fix .menu-list .list .depth ul li a {font-size: 16px;}

.header-menu .menu-list .list > li:first-child > a,
.header-menu .menu-list .list > li:first-child .depth {padding-left: 40px; text-align: left;}

.header-menu.open {}
.header-menu.open:before {display: block; content: ''; position: absolute; top: 68px; left: 0px; width: 100%; height: 1px; background-color: #a8a8a8; box-shadow: 0 1px 0px 1px #f3f3f3; z-index: 1;}
.header.fix .header-menu.open:before {top: 52px}
.header-menu.open .menu-list .list > li {padding-bottom: 10px;}
.header-menu.open .menu-list .list > li:before,
.header-menu.open .menu-list .list > li:last-child:after {display: block; content: ''; position: absolute; top: 0; width: 1px; height: 100%; background-color: #ececec; z-index: 1;}
.header-menu.open .menu-list .list > li:before {left: 0;}
.header-menu.open .menu-list .list > li:last-child:after {right: 0;}
.header-menu.open .menu-list .list > li:hover {background-color: #fafafa;}
.header-menu.open .menu-list .list > li > a:before {display: none;}
.header-menu.open .menu-list .list > li:hover > a {color: #00b6f0;}
.header-menu.open .menu-list .list .depth {display: block; position: relative; top: 0; left: 0; padding: 15px 10px; background: none; border: none; transform: translateX(0%);}
.header-menu.open .menu-list .list .depth ul li > a {font-size: 18px;}
.header-menu.open .menu-list .list .depth ul li > a:hover {color: #242424; font-weight: bold;}


.header-menu.open .menu-list .list li.left-center {}
.header-menu.open .menu-list .list li.left-center ul {display: inline-block; vertical-align: top;}
.header-menu.open .menu-list .list li.left-center ul li {text-align: left;}



  @media (min-width: 1600px) {
    .header-util,
    .header-menu .menu-list {max-width: 1920px;}
    .header-util .column > a {background-size: 40px auto;}
    .header-util .column:first-child > a {margin-right: 100px;}
    .header-util .column:last-child > a {margin-left: 100px;}
    .header-util .column > a.chatomy {width: 172px;}
    .header.fix .header-util .column .chatomy {width: 140px;}

    .header-menu .menu-list .list > li > a {font-size: 24px;}
    .header-menu .menu-list .list .depth ul li a {font-size: 20px;}
    .header-menu.open .menu-list .list .depth ul li > a {font-size: 20px;}
  }
  @media (max-width: 1280px) {
    .header-util {padding: 0 30px;}
    .header .menu {right: 22px;}
    .header-util .column > a {background-size: 30px auto;}    
    .header-util .column:first-child > a {margin-right: 50px;}
    .header-util .column:last-child > a {margin-left: 50px;}
    .header-util .column > a.gsmc {width: 100px;}
    .header-util .column > a.chatomy {width: 132px;}
    .header-menu .menu-list {padding-right: 110px;}
    .header-menu .menu-list .list > li > a {font-size: 18px;}
    .header-menu .menu-list .list .depth ul li a {font-size: 16px;}
    .header-menu.open .menu-list .list .depth {padding: 15px 5px; white-space: normal;}
    .header-menu.open .menu-list .list .depth ul li > a {font-size: 15px; letter-spacing: -0.2px;}
    .header-menu .menu-list .list > li:first-child > a,
    .header-menu .menu-list .list > li:first-child .depth {padding-left: 30px;}
  }
  @media (max-width: 900px) {
    .header .logo,
    .header.fix .logo {line-height: 55px;}
    .header .logo a,
    .header.fix .logo a {height: 55px; background-size: auto 45px; vertical-align: top;}
    
    .header-util,
    .header.fix .header-util {top: 0; padding: 0;}
    .header-util .column > a,
    .header.fix .header-util .column > a {width: 55px; height: 55px; background-size: 22px auto;}

    .header-util .column .home,
    .header-util .column .notice,
    .header-util .column .share,
    .header-util .column .gsmc,
    .header-util .column .chatomy,
    .header-util .column .my,
    .header-util .column .login,
    .header-util .column .logout {display: none;}

    .header-util .column > a span {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

    .header .menu,
    .header .btn-menu {display: block; padding: 18.5px 17.5px; width: 55px; height: 55px;}
    .header .menu,
    .header.fix .menu {position: absolute; top: 40px; right: 20px; padding: 3px 2px; width: 24px; height: 24px;}

    .header .i-menu {width: 20px; height: 18px; z-index: 5;}
    .header .i-menu i {width: 20px; height: 2px;}
    .header .i-menu i:nth-of-type(2) {top: 8px; left: 0; width: 14px;}
    .header .menu .i-menu i:nth-of-type(2) {left: 6px;}

    .header .menu.active .i-menu i:nth-of-type(1),
    .header .btn-menu.active .i-menu i:nth-of-type(1) {transform: translateY(8px) rotate(-45deg);}
    .header .menu.active .i-menu i:nth-of-type(2) {left: 100%; opacity: 0;}
    .header .btn-menu.active .i-menu i:nth-of-type(2) {left: -100%; opacity: 0;}
    .header .menu.active .i-menu i:nth-of-type(3),
    .header .btn-menu.active .i-menu i:nth-of-type(3) {transform: translateY(-8px) rotate(45deg);}

    .header-menu {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 95%; background-color: #fff; overflow-y: scroll; z-index: 1010;}
    .header-menu.open {display: block;}
    .header-menu.open:before {display: none;}

    .header .menu:hover .i-menu i,
    .header .menu.active .i-menu i {background-color: #fff;}

    .header-menu .i-notice.new:before {right: -5px; width: 15px; height: 15px;}

    .header-menu .i-home,
    .header-menu .i-notice,
    .header-menu .i-share,
    .header-menu .i-my,
    .header-menu .i-login,
    .header-menu .i-logout,
    .header-menu .i-search {width: 24px; height: 24px; background-size: 24px auto;}
    .header-menu .i-home {background-image: url(../images/i-home-white.png);}
    .header-menu .i-notice {background-image: url(../images/i-notice-white.png);}
    .header-menu .i-share {background-image: url(../images/i-share-white.png);}
    .header-menu .i-my {background-image: url(../images/i-my-white.png);}
    .header-menu .i-login {background-image: url(../images/i-login-white.png);}
    .header-menu .i-logout {background-image: url(../images/i-logout-white.png);}
    .header-menu .i-search {background-image: url(../images/i-search-white.png);}
    
    .header-menu .menu-list {padding: 0;}
    .header-menu .util {display: flex; position: relative; padding: 90px 20px 15px; width: 100%; background-color: #00b6f0; justify-content: space-between; box-sizing: border-box;}
    .header-menu .util .column {display: flex; white-space: nowrap; align-items: flex-start;}
    .header-menu .util .column:first-child > a {margin-right: 10px;}
    .header-menu .util .column:last-child > a {margin-left: 25px;}

    .header-menu .log-box {font-size: 0;}
    .header-menu .user {padding-left: 34px; line-height: 24px; font-size: 15px; color: #fff;}

    .header-menu .site {padding: 0 20px; font-size: 0; text-align: center; box-sizing: border-box;}
    .header-menu .site .round {margin: 0 5px; width: 150px; height: 40px; line-height: 36px; font-size: 16px; color: #000; font-weight: 500; border: 2px solid #00b6f0; box-sizing: border-box; border-radius: 50px;}
    .header-menu .site .round.gsmc {font-size: 0; background: url(../images/logo-GSMC.png) center center no-repeat; background-size: 45% auto;}
    .header-menu .site .round.chatomy {background: url(../images/logo-chatomy.png) center center no-repeat; background-size: 65% auto;}
    .header-menu .site ul {margin: 25px 0;}
    .header-menu .site ul li {display: inline-block; position: relative; padding: 0 5px; width: 150px; vertical-align: top;}
    .header-menu .site ul li:before {display: block; content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 1px; height: 10px; background-color: #8b8b8b;}
    .header-menu .site ul li:first-child:before {display: none;}
    .header-menu .site ul li a {font-size: 16px; color: #8b8b8b;}

    .header-menu.open .menu-list .list {display: block; padding: 20px;}
    .header-menu.open .menu-list .list > li {float: none; padding: 0; width: 100% !important; border-bottom: 1px solid #cacaca; text-align: left;}

    .header-menu.open .menu-list .list > li:before,
    .header-menu.open .menu-list .list > li:after,
    .header-menu.open .menu-list .list > li:last-child:after {display: block; content: ''; position: absolute; top: 16px; left:100%; margin-left: -18px; width: 16px; height: 2px; background-color: #000; transition: all 0.4s; box-sizing: border-box; z-index: 1;}
    .header-menu.open .menu-list .list > li:before {transform: translateY(8px) rotate(180deg);}
    .header-menu.open .menu-list .list > li:after,
    .header-menu.open .menu-list .list > li:last-child:after {transform: translateY(8px) rotate(90deg);}
    .header-menu.open .menu-list .list > li.active:before {transform: translateY(8px) rotate(180deg);}
    .header-menu.open .menu-list .list > li.active:after {transform: translateY(8px) rotate(180deg);}

    .header-menu.open .menu-list .list > li:hover {background-color: transparent;}
    .header-menu.open .menu-list .list > li > a,
    .header.fix .header-menu.open .menu-list .list > li > a {padding-left: 5px; line-height: 51px; font-size: 16px; color: #010101; background-color: transparent;}
    .header-menu.open .menu-list .list > li:hover > a,
    .header-menu.open .menu-list .list > li > a:hover {color: #010101;}
    .header-menu.open .menu-list .list > li > a:after {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; background-color: #000; border-radius: 50%; transform: translateY(-50%);}

    .header-menu.open .menu-list .list > li:hover .depth,
    .header-menu.open .menu-list .list .depth {display: none; border-top: 1px solid #cacaca;}
    .header-menu.open .menu-list .list > li.active .depth {display: block;}
    .header-menu.open .menu-list .list .depth ul li > a,
    .header.fix .header-menu.open .menu-list .list .depth ul li > a {display: block; font-size: 16px; color: #242424;}

    .header-menu .menu-list .list > li:first-child > a,
    .header-menu .menu-list .list > li:first-child .depth {padding-left: 5px;}
      
  }


/* search */

.search {display: none; position: fixed; top: 141px; left: 0; padding: 60px 40px; width: 100%; line-height: 1.2; background-color: #fff; z-index: 1006; box-sizing: border-box;}
.search a,
.search span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.search ul,
.search li,
.search ol {list-style: none;}
.search strong {display: block;}

.header.fix ~ .search {top: 68px}
.search .search-field {position: relative; margin: 0 auto; padding: 0 90px; width: 880px; max-width: 100%; box-sizing: border-box;}
.search .btn-close {position: absolute; top: 0; right: 0; width: 70px; height: 70px; background:#ececec url(../images/i-close-gray.png) center center no-repeat; border-radius: 5px; z-index: 1;}

.search .search-form {position: relative;}
.search .search-form label {}
.search .search-form .search-input {padding: 0 66px 0 18px; width: 100%; height: 70px; font-size: 26px; color: #00b6f0; font-weight: 500; background-color: #fff; border: 3px solid #242424; border-radius: 5px; outline: none; box-sizing: border-box; caret-color: #02b9f3;}
.search .search-form .search-input::-webkit-input-placeholder {color: #cacaca}
.search .search-form .search-input:-ms-input-placeholder {color: #cacaca}
.search .search-form .search-input::placeholder {color: #cacaca}
.search .search-form .search-input::-ms-clear,
.search .search-form .search-input::-ms-reveal {display:none;}
.search .search-form .search-input::-webkit-search-decoration,
.search .search-form .search-input::-webkit-search-cancel-button,
.search .search-form .search-input::-webkit-search-results-button,
.search .search-form .search-input::-webkit-search-results-decoration{display:none;}

.search .search-form .search-btn {position: absolute; top: 0; right: 0;}
.search .search-form .btn-submit {width: 66px; height: 64px; background: url(../images/i-search-submit.png) center center no-repeat; box-sizing: border-box;}

.search-history {display: none;}
.search-history .search-list {}
.search-history .search-list ul {padding: 10px 0; border-bottom: 1px solid #cacaca;}
.search-history .search-list ul li {position: relative; padding-right: 40px;}
.search-history .search-list ul li > a {display: block; padding: 10px 20px;}
.search-history .search-list ul li > a:after {display: block; content: ""; clear: both;}
.search-history .search-list ul li span {font-size: 18px; color: #242424;}
.search-history .search-list ul li .date {float: right; color: #8b8b8b;}
.search-history .search-list ul li .btn-remove {position: absolute; top: 0; right: 20px; width: 20px; height: 100%; background: url(../images/i-search-remove.png) center center no-repeat;}

.search-history .search-btn {padding: 10px 20px; text-align: right;}
.search-history .all-remove {position: relative; padding: 10px 40px 10px 20px; font-size: 18px; color: #8b8b8b; box-sizing: border-box;}
.search-history .all-remove .i-remove {position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: url(../images/i-search-remove.png) center center no-repeat;}

.search.search-write .search-history {display: block;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .search {padding: 50px 30px;}
  }
  @media (max-width: 900px) { 
    .search,
    .header.fix ~ .search {top: 56px;}
    .search {padding: 10px 20px;}
    .search .search-field {padding: 0;}
    .search .btn-close {width: 46px; height: 46px; background-size: 16px auto;}
    .search .search-form {padding-right: 56px;}
    .search .search-form .search-input {padding: 0 46px 0 10px; height: 46px; font-size: 16px; border-width: 2px;}
    .search .search-form .search-btn {right: 56px;}
    .search .search-form .btn-submit {width: 46px; height: 46px; background-size: 20px auto;}
    .search-history .search-list ul li {padding-right: 16px;}
    .search-history .search-list ul li > a {padding: 10px;}
    .search-history .search-list ul li span {font-size: 15px;}
    .search-history .search-list ul li .btn-remove {right: 0; width: 16px; background-size: 12px auto;}
    .search-history .search-btn {padding: 0;}
    .search-history .all-remove {padding-right: 26px; font-size: 15px;}
    .search-history .all-remove .i-remove {width: 16px; background-size: 12px auto;}
    
    .search.search-write,
    .header.fix ~ .search.search-write {top: 0;}
  }



/* footer */

.footer {position: relative; padding: 100px 0 80px; line-height: 1.2; background-color: #3a3b40;}
.footer a,
.footer span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.footer ul,
.footer li,
.footer ol {list-style: none;}
.footer strong {display: block;}

.btn-top {display: none; position: fixed; bottom: 20px; right: 30px; z-index: 6; border: none; outline: none; width: 70px; height: 70px; background: #3a3b40 url(../images/i-top-white.png) center center no-repeat; background-size: 24px auto; border-radius: 5px; box-sizing: border-box; cursor: pointer;}

.footer .logo {position: absolute; top: 50%; left: 50%; margin-top: -45px; transform: translateX(-50%); text-align: center;}
/** HAM 수정 **/
.footer .logo a {width: 207px; height: 90px; background: url(../images/foot-logo-abc.png) center center no-repeat; background-size: auto 99%; vertical-align: middle; z-index: 5;}

.footer .inner {position: relative; margin: 0 auto; padding: 0 40px; box-sizing: border-box;}
.footer .inner:after {display: block; content: ""; clear: both;}
.footer .inner .util {}
.footer .inner .site {position: absolute; top: 0; right: 40px;}

.footer .inner ul {font-size: 0;}
.footer .inner ul li {display: inline-block; position: relative; padding: 0 40px; vertical-align: top;}
.footer .inner ul li:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 14px; background-color: #8b8b8b; transform: translateY(-50%);}
.footer .inner ul li:first-child {padding-left: 0;}
.footer .inner ul li:first-child:before {display: none;}
.footer .inner ul li a {font-size: 20px; color: #cacaca; font-weight: 300;}
.footer .inner ul li a.pc-show-ib {display: inline-block;}
.footer .inner ul li a.mob-show-ib {display: none;}
.footer .inner ul li.policy a {font-weight: bold;}

.footer .inner .site ul li:last-child {padding-right: 0;}

.footer .copyright {margin-top: 35px; font-size: 14px; color: #737373;}

  @media (min-width: 1600px) {
    .footer .inner {max-width: 1920px;}
  }
  @media (max-width: 1280px) {
    .footer {padding: 60px 0;}
    .footer .inner ul li {padding: 20px;}
    .footer .inner ul li a {font-size: 16px;}
  }
  @media (max-width: 900px) { 
    .footer {padding: 0;}
    .footer .btn-top {right: 20px; width: 46px; height: 46px; background-color: rgb(255 255 255 / 80%); background-image: url(../images/i-top.png); background-size: 18px auto; border: 1px solid #cacaca; box-shadow: 0px 5px 9.9px 0.1px rgba(0, 0, 0, 0.15);}
    .footer .logo {position: relative; top: 0; left: 0; margin: 0 0 15px; padding: 40px 0; transform: translateX(0); border-bottom: 1px solid #555;}
    .footer .logo a {width: 150px; height: 50px; background-size: auto 50px;}

    .footer .inner {padding: 0 20px; text-align: center;}
    .footer .inner .util,
    .footer .inner .site {padding: 15px 0;}
    .footer .inner .site {position: relative; right: 0;}
    .footer .inner ul li {padding: 0 15px;}
    .footer .inner ul li a {font-size: 15px;}
    .footer .inner ul li a.pc-show-ib {display: none;}
    .footer .inner ul li a.mob-show-ib {display: inline-block;}

    .footer .copyright {margin: 15px 0 0; padding: 30px 0; border-top: 1px solid #555;}
  }



/* container */

.container {padding-top: 210px;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .container {padding-top: 55px;}
  }


/* main visual */

.main-visual {position: relative; line-height: 1.2;}
/*.main-visual a,*/
/*.main-visual span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}*/
.main-visual ul,
.main-visual li,
.main-visual ol {list-style: none;}
.main-visual strong {display: block;}

.main-visual .slider-visual {position: relative;}
.main-visual .slider-list {position: relative; width: 100%; padding-bottom: 28.9%; transition: top 0.3s;}
.main-visual .slider-list .slick-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-visual .slider-list .slick-track {height: 100%;}
.main-visual .slider-item,
.main-visual .slider-item > a,
.main-visual .slider-item .img,
.main-visual .slider-item .img span {height: 100%;}
.main-visual .slider-item {}
.main-visual .slider-item > a {display: block;}
.main-visual .slider-item .img {}
.main-visual .slider-item .img span {width: 100%; background-position: 0 center; background-size: cover; background-repeat: no-repeat;}

.main-visual .slider-control {position: absolute; bottom: 80px; left: 0; width: 100%; height: 0; font-size: 0; box-sizing: border-box;}
.main-visual .slider-control .inner {height: 0;}
.main-visual .slider-control .round-box {display: inline-block; position: relative; box-sizing: border-box; vertical-align: top;}

.main-visual .slider-counter {display: inline-block; margin: 5px 0;}
.main-visual .slider-counter span {display: inline-block; line-height: 20px; font-size: 18px; font-weight: bold; color: #fff; vertical-align: top;}
.main-visual .slider-counter .current {margin-right: 114px;}
.main-visual .slider-counter .total {opacity: 50%;}

.main-visual .slider-pro-bar {position: absolute; top: 50%; left: 50%; margin-left: -43px; width: 86px; height: 3px; background-color: rgb(255 255 255 / 50%); transform: translateY(-50%);}
.main-visual .slider-pro-bar .pro-bar{position: absolute; bottom:0; left:0; width:0; height:3px; background: #fff;}
.main-visual .slider-pro-bar .pro-ani{animation: proBar 5s 1;}
@keyframes proBar{
  0%{width:0;}
  100%{width:100%;}
}

.main-visual .all-visual {display: inline-block; margin: 5px 20px; width: 27px; height: 20px; background: url(../images/i-all-visual.png) center center no-repeat; box-sizing: border-box; vertical-align: top;}
.main-visual .slider-prev,
.main-visual .slider-next,
.main-visual .slider-pause,
.main-visual .slider-play {position: relative; margin: 0 15px; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; box-sizing: border-box;}
.main-visual .slider-prev,
.main-visual .slider-next {background-size: auto 25px;}
.main-visual .slider-prev {margin-left: 40px; background-image: url(../images/i-visual-prev.png);}
.main-visual .slider-next {background-image: url(../images/i-visual-next.png);}
.main-visual .slider-pause {background-image: url(../images/i-visual-pause.png); background-size: auto 18px;}
.main-visual .slider-play {display: none; background-image: url(../images/i-visual-play.png);}

.main-visual .slider-all-visual {display: none; position: fixed; top: 50%; left: 0%; padding: 40px; width: 100%; box-sizing: border-box; transform: translateY(-50%); z-index: 1007;}
.main-visual .slider-all-visual.active {display: block;}
.main-visual .slider-all-visual .box {position: relative; margin: 0 auto; padding: 25px 20px 20px; width: 100%; max-width: 840px; background-color: #fff; box-sizing: border-box;}
.main-visual .slider-all-visual h3 {margin-bottom: 25px; font-size: 30px; color: #000; font-weight: 500; text-align: center;}
.main-visual .slider-all-visual .btn-close {display: block; position: absolute; top: 0; right: -68px; width: 68px; height: 68px; background: url(../images/i-close-white.png) center center no-repeat;}
.main-visual .slider-all-visual .slider-all-list {}
.main-visual .slider-all-visual .slider-all-list ul {}
.main-visual .slider-all-visual .slider-all-list ul li {margin-top: 20px;}
.main-visual .slider-all-visual .slider-all-list ul li:first-child {margin-top: 0;}


  @media (min-width: 1600px) {
    .main-visual .slider-control {bottom: 90px;}
    .main-visual .slider-counter span {font-size: 20px;}
    .main-visual .slider-prev,
    .main-visual .slider-next {background-size: auto 30px;}
    .main-visual .slider-pause {background-size: auto 21px;}
  }
  @media (max-width: 1280px) {
    .main-visual .slider-control {bottom: 60px;}
    .main-visual .slider-prev,
    .main-visual .slider-next,
    .main-visual .slider-pause,
    .main-visual .slider-play {margin: 0 10px;}
  }
  @media (max-width: 900px) { 
    .main-visual .slider-list {padding-bottom: 63%;}

    .main-visual .slider-control {bottom: 50px; width: auto;}
    .main-visual .slider-control:after {display: block; content: ""; clear: both;}
    .main-visual .slider-control .round-box {padding: 1px 10px; background-color: rgb(36 36 36 / 50%); border-radius: 50px;}
    .main-visual .slider-counter span {font-size: 12px; font-weight: 300;}
    .main-visual .slider-counter .current {margin-right: 50px;}
    .main-visual .slider-counter .total {color: #92cbff; opacity: 1;}

    .main-visual .slider-pro-bar,
    .main-visual .slider-pro-bar .pro-bar {height: 2px;}
    .main-visual .slider-pro-bar {margin-left: -19px; width: 38px; background-color: #92cbff;}

    .main-visual .all-visual {float: right; margin: 0; width: 32px; height: 32px; background: rgb(36 36 36 / 50%) url(../images/i-all-visual-mob.png) center center no-repeat; background-size: 14px auto; border-radius: 50%;}
    .main-visual .slider-prev,
    .main-visual .slider-next {display: none; position: absolute; top: 50%; margin: 0 5px; width: 22px; height: 66px; background-size: 18px auto; transform: translateY(-50%);}
    .main-visual .slider-prev {left: 0; background-image: url(../images/i-visual-prev-mob.png);}
    .main-visual .slider-next {right: 0; background-image: url(../images/i-visual-next-mob.png);}
    .main-visual .slider-pause,
    .main-visual .slider-play {margin: 0 10px; width: 32px; height: 32px; background-color: rgb(36 36 36 / 50%); border-radius: 50%;}
    .main-visual .slider-pause {background-image: url(../images/i-visual-pause-mob.png); background-size: 8px auto;}
    .main-visual .slider-play {background-size: 10px auto;}

    .main-visual .slider-all-visual {padding: 0 20px;}
    .main-visual .slider-all-visual h3 {font-size: 18px;}
    .main-visual .slider-all-visual .btn-close {right: 0; top: -46px; width: 46px; height: 46px; background-size: 20px auto;}
  }


/* main notice */

.main-notice {background-color: #ececec; line-height: 1.2;}
.main-notice a,
.main-notice span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.main-notice ul,
.main-notice li,
.main-notice ol {list-style: none;}
.main-notice strong {display: block;}

.main-notice .notice-list {position: relative; margin: 0 auto; box-sizing: border-box;}
.main-notice .notice-list ul {padding: 17px 0;}
.main-notice .notice-list ul li {float: left; padding: 0 40px; width: 50%; box-sizing: border-box;}
.main-notice .notice-list ul li > a {display: block; position: relative; font-size: 0;}
.main-notice .notice-list ul li > a:after {display: block; content: ""; clear: both;}
.main-notice .notice-list ul li .title,
.main-notice .notice-list ul li span {padding: 8px 0; line-height: 24px; font-size: 20px; color: #242424; font-weight: 400;}
.main-notice .notice-list ul li .title {display: inline-block; position: relative; padding-left: 6px; max-width: 55%; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.main-notice .notice-list ul li .title:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; background-color: #242424; border-radius: 50%; transform: translateY(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.main-notice .notice-list ul li .title:hover {color: #00b6f0;} 
.main-notice .notice-list ul li .title:hover:before {background-color: #00b6f0;}
.main-notice .notice-list ul li span {}
.main-notice .notice-list ul li .em {margin-right: 20px; width: 65px; font-size: 18px; color: #fff; font-weight: 500; background-color: #00b6f0; border-radius: 10px; text-align: center;}
.main-notice .notice-list ul li .new {margin: 5px; padding: 0; width: 30px; height: 30px; background: url(../images/i-new.png) center center no-repeat; background-size: 27px auto;}
.main-notice .notice-list ul li .date {float: right; color: #8b8b8b;}


  @media (min-width: 1600px) {
    .main-notice .notice-list {max-width: 1920px;}
    .main-notice .notice-list ul {padding: 20px 0;}
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span {font-size: 22px;}
    .main-notice .notice-list ul li .em {margin-right: 20px; width: 80px; font-size: 20px;}
    .main-notice .notice-list ul li .new {margin: 5px 10px; background-size: 30px auto;}
  }
  @media (max-width: 1280px) {
    .main-notice .notice-list ul {padding: 15px 0;}
    .main-notice .notice-list ul li {padding: 0 30px;}
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span {padding: 3px 0; font-size: 18px;}
    .main-notice .notice-list ul li .title {padding-left: 5px;}
    .main-notice .notice-list ul li .em {margin-right: 10px; width: 55px; font-size: 16px; border-radius: 5px;}
    .main-notice .notice-list ul li .new {margin: 0 5px; width: 20px; background-size: 20px auto;}
    .main-notice .notice-list ul li .date {font-size: 16px;}
  }
  @media (max-width: 900px) { 
    .main-notice .notice-list ul li {padding: 0 20px; width: 100%;}
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span {line-height: 21px;}
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span {padding-top: 2px; padding-bottom: 2px; font-size: 15px;}
    .main-notice .notice-list ul li .em {margin-right: 5px; width: 40px; font-size: 14px;}
    .main-notice .notice-list ul li .new {margin: 0 2px; width: 18px; height: 25px; background-size: 18px auto;}
    .main-notice .notice-list ul li .date {font-size: 14px;}
  }




/* main contents */

.container h3 {margin-bottom: 30px; line-height: 1.2; font-size: 36px; color: #242424; font-weight: 500;}
.container h3 strong {display: inline-block; font-weight: bold;}

.container h3.title-box {padding: 24.5px 20px; line-height: 21px; font-size: 22px; color: #fff; font-weight: 400; background-color: #00aeec; border-radius: 10px; text-align: center; box-sizing: border-box; box-shadow: 0 5px 7px 0px rgb(0 174 236 / 30%);}

.container .inner {position: relative; margin: 0 auto; padding: 0 40px; box-sizing: border-box;}
/** Ham 수정 **/
.main-contents {position: relative; padding-bottom: 110px;}

.section {padding: 70px 0 50px; border-top: 1px solid #cacaca;}
.section:first-child {border-top: 0;}
.section:last-child {margin-bottom: -80px;}
.section h3 {line-height: 1.2; font-weight: bold; text-align: center;}

.pack {position: relative; padding: 40px 25px 0; background-color: #fff; border: 2px solid #ddd; border-radius: 15px; box-sizing: border-box;}
.pack + .pack {margin-top: 60px;}

.cont {padding: 40px 15px;}
.cont.course_intro {padding: 40px 35px;}

.result {padding: 30px 0;}
.result h3 {margin-bottom: 20px; font-weight: 400; text-align: center;}
.result h3 strong {font-weight: bold;}
.result h3 .em {color: #02b9f3;}

.article {position: relative; padding: 0 15px; line-height: 1.2; box-sizing: border-box;} 
.article a,
.article span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.article ul,
.article li,
.article ol {list-style: none;}
.article strong {display: block;}

.article > a {display: block;}
.article .img {position: relative; box-sizing: border-box;}
.article .img-span {display: block; border: 1px solid #dddddd; box-sizing: border-box; overflow: hidden;}
.article .img img {width: 100%;}

.article .completed-stamp {position: absolute; top: -10px; right: 0; width: 67px; height: 67px; background: url(../images/i-completed-stamp.png) center center no-repeat; z-index: 1;}


.article .play {position: absolute; top: 50%; left: 50%; margin-left: -35px; width: 71px; height: 71px; background: rgb(0 0 0 / 60%) url(../images/i-play.png) 58% center no-repeat; border: none !important; border-radius: 50%; transform: translateY(-50%); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.article > a:hover .play {background-color: rgb(0 0 0 / 40%);}
.article .content {position: relative; padding: 20px 0;}
.article .title {max-width: 100%; font-size: 24px; color: #242424; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.article > a:hover .title {color: #00b6f0;}

.article .wrap {display: flex; height: 65px; align-items: center;}
.article .wrap > span {width: 100%;}

.article .depth {display: block; margin-bottom: 15px; font-size: 18px; color: #555;}

.article .state {display: flex; margin-bottom: 20px; padding-bottom: 20px; font-size: 0; border-bottom: 2px solid #ececec; align-items: end; justify-content: space-between; box-sizing: border-box;}
.article .state .column {display: flex; white-space: nowrap; align-items: flex-start;}
.article .state span {padding: 5px; min-width: 75px; line-height: 21px; font-size: 17px; color: #8b8b8b; border: 2px solid #8b8b8b; border-radius: 50px; box-sizing: border-box; text-align: center;}
.article .state span + span {margin-left: 5px;}
.article .state .before {color: #fff; background-color: #8b8b8b;}
.article .state .ing {color: #fff; background-color: #e556a6; border-color: #e556a6;}
.article .state .complete {color: #fff; background-color: #00b6f0; border-color: #00b6f0;}
.article .state .complete + .completed-stamp {position: static; padding: 0; margin-top: -11px; margin-bottom: -18px; min-width: 67px; height: 67px; border: none; border-radius: 0;}
.article .state .complete + .completed-stamp span {padding: 0; min-width: 1px; line-height: 1.2; border: none; border-radius: 0; text-align: left;}
.article .state .online {color: #00b6f0; border-color: #00b6f0;}


.meta {margin-top: 20px; line-height: 1.2; color: #8b8b8b;}
.meta a,
.meta span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.meta ul,
.meta li,
.meta ol {list-style: none;}
.meta strong {display: block;}

.meta:after {display: block; content: ""; clear: both;}
.meta > span {float: left; position: relative; margin: 0 10px; font-size: 17px;}
.meta > span:before {display: block; content: ''; position: absolute; top: 50%; left: -10px; margin-top: -5px; width: 1px; height: 10px; background-color: #ccc;}
.meta > span:first-child {margin-left: 0;}
.meta > span:first-child:before {display: none;}
.meta .list {padding-left: 25px; background: url(../images/i-list.png) 0 55% no-repeat;}
.meta .viewer {padding-left: 30px; background: url(../images/i-viewer.png) 0 55% no-repeat;}
.meta .stamp {margin: 0 10px; padding-left: 25px; background: url(../images/i-stamp.png) 0 center no-repeat;}
.meta .date {}
.meta .running-time {position: absolute; top: -30px; right: 8px; margin: 0; width: 52px; line-height: 20px; font-size: 14px; color: #fff; font-weight: 300; background-color: rgb(0 0 0 / 60%); border-radius: 3px; text-align: center;}
.meta .running-time:before {display: none;}

.article .meta .date {float: right; margin: 0;}
.article .meta .date:before {display: none;}

  @media (min-width: 1600px) {
    .container h3.title-box {padding: 24.5px 30px; font-size: 24px;}
    .container .inner {max-width: 1920px;}
    
    .article {padding: 0 20px;}
    .article .state span {min-width: 100px; line-height: 24px; font-size: 18px;}
    .meta > span {font-size: 18px;}
  }
  @media (max-width: 1280px) {
    .container .inner {padding: 0 20px;}
  }
  @media (max-width: 900px) { 
    .container h3 {margin-bottom: 20px; font-size: 20px;}
    .container h3.title-box {padding: 15px 10px; font-size: 15px;}

    /** Ham 수정 **/
    .main-contents {padding-bottom: 75px;}

    .section {margin: 0; padding: 25px 0; border: none;}
    .section:last-child {margin: 0;}
    .section .inner {padding: 0;}

    .pack {padding: 15px 15px 0; border-width: 1px;}
    .pack + .pack {margin-top: 30px;}
    
    .mpack {position: relative; margin-top: 30px; padding: 15px 15px 0; background-color: #fff; border: 1px solid #ddd; border-radius: 15px; box-sizing: border-box;}

    .cont {padding: 15px 0;}
    .cont.course_intro {padding: 15px 10px;}

    .result {padding: 15px 0;}

    .article {padding: 0 10px;}
    .article .completed-stamp {top: -5px; right: -10px; width: 55px; height: 55px; background-size: 55px auto;}
    .article .play {width: 56px; height: 56px; background-size: 20px auto;}
    .article .title {font-size: 15px;}

    .article .wrap {display: block; height: auto;}

    .article .state {margin-bottom: 15px; padding-bottom: 15px; border-bottom-width: 1px;}
    .article .state span {padding: 0; line-height: 24px; font-size: 14px; border-width: 1px;}
    .article .state span + span {margin-left: 5px;}
    .article .state .complete + .completed-stamp {margin-top: -7px; margin-bottom: -12px; min-width: 45px; width: 45px; height: 45px; background-size: 45px auto;}

    .meta > span {font-size: 14px;}
    .meta .viewer {padding-left: 20px; background-size: 16px auto;}
    .meta .stamp {padding-left: 18px; background-size: 15px auto;}
  }


/* slider category */

.slider-category {position: relative;}
.slider-category .slider-list {position: relative;}
.slider-category .slider-control {position: relative; margin-top: 25px; box-sizing: border-box;}
.slider-category .progress {display: block; width: 100%; height: 3px; background-color: #e0e0e0; background-image: linear-gradient(to right, black, black); background-repeat: no-repeat; background-size: 0 100%; transition: background-size .4s ease-in-out; overflow: hidden;
}
.slider-category .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}

.slider-category .slider-prev,
.slider-category .slider-next {position: absolute; top: 50%; margin-top: -65px; width: 68px; height: 67px; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; transform: translateY(-50%);}
.slider-category .slider-prev {left: -14px; background-image: url(../images/slider-prev.png);}
.slider-category .slider-next {right: -14px; background-image: url(../images/slider-next.png);}

.slider-category-1 .slider-item {padding: 0 20px;}
.slider-category-1 .slider-item .img > span:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4px solid #00b6f0; box-sizing: border-box; box-shadow: 5px 5px 5px 0px rgb(0 0 0 / 10%); opacity: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.slider-category-1 .slider-item.slick-active > a:hover .img > span:before {opacity: 1;}
.slider-category-1 .article .title {font-size: 28px; text-align: center;}
.slider-category-1 .article > a:hover .title {color: #242424;}

.slider-category-1 .slider-prev,
.slider-category-1 .slider-next {margin-top: -35px;}
.slider-category-1 .slider-prev {left: 35px;}
.slider-category-1 .slider-next {right: 35px;}

/* .slider-category-1 .slider-item.hideL .img:before,
.slider-category-1 .slider-item.hideR .img:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 4%, rgba(255,255,255,1) 96%, rgba(255,255,255,0.9) 100%); box-sizing: border-box;} */

.slider-category-2 .article .title {font-size: 22px;}

.slider-category-1 {overflow: hidden;}
.slider-category-1:before,
.slider-category-1:after {display: block; content: ''; position: absolute; top: 0;  width: 500px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,1) 4%, rgba(255,255,255,1) 96%, rgba(255,255,255,0.9) 100%); box-sizing: border-box; z-index: 5;}
.slider-category-1:before {left: -470px;}
.slider-category-1:after {right: -470px;}


  @media (min-width: 1600px){
    .slider-category-1 .title {font-size: 30px;}
  }
  @media (max-width: 1280px) {
    .slider-category .slider-prev {left: -14px;}
    .slider-category .slider-next {right: -14px;}

    .slider-category-1 .slider-list {padding: 0;}
    .slider-category-1 .slider-item {padding: 0 15px;}
    .slider-category-1 .title {font-size: 24px;}
    
    .slider-category-1 {overflow: visible;}
    .slider-category-1:before,
    .slider-category-1:after {display: none;}
  }
  @media (max-width: 900px) { 
    .slider-category .slider-control {margin-top: 0; padding: 22px 50px;}
    .slider-category .progress {height: 2px;}

    .slider-category-1 .slider-item {padding: 0 20px; opacity: 1 !important; }
    .slider-category-1 .title {font-size: 16px;}

    .slider-category-1 .slider-prev,
    .slider-category-1 .slider-next {top: 100%; margin-top: -46px; width: 26px; height: 46px; background-size: 14px auto; transform: translateY(0);}
    .slider-category-1 .slider-prev {left: 30px; background-image: url(../images/slider-prev-arrow.png); background-position: 0 center;}
    .slider-category-1 .slider-next {right: 30px; background-image: url(../images/slider-next-arrow.png); background-position: right center;}

    .slider-category-1 .article.slick-active .img-span {box-shadow: 5px 5px 5px 0px rgb(0 0 0 / 10%);}

    .slider-category-2 .slick-list {padding: 0 10px;}
    .slider-category-2 .slider-item {padding: 0 10px; width: 320px !important;}
    .slider-category-2 .slider-item .img > span {border: none;}
    .slider-category-2 .slider-item .content {padding: 15px 10px; border: 1px solid #ddd; border-radius: 0 0 10px 10px;}
     
    .slider-category-2 .slider-prev,
    .slider-category-2 .slider-next {display: none;}


  }


/* top field */

.top-field *,
.top-field ~ .main-contents * {letter-spacing: -0.4px}
.top-field {position: relative; padding: 30px 0 55px; line-height: 1.2;}

.top-field a,
.top-field span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.top-field ul,
.top-field li,
.top-field ol {list-style: none;}
.top-field strong {display: block;}

.top-field ~ .main-contents {padding: 60px 0 105px; background-color: #eceef2;}
.top-field .subject {padding: 0 40px;}
.top-field .subject h3 {margin-bottom: 15px;}
.top-field .subject > span {font-size: 20px; color: #242424;}
.top-field .subject .meta {margin-top: 0;}

.top-field .meta {padding-bottom: 10px;}
.top-field .meta > span {margin: 0 20px;}
.top-field .meta > span:first-child {margin-left: 0;}
.top-field .meta > span:before {left: -20px;}

.top-field .result {padding: 0;}
.top-field .result h3,
.top-field .result h3 .em {font-size: 30px;}
.top-field .result h3 {margin-bottom: 0; line-height: 1.6;}
.top-field .result h3 strong {font-size: 36px;}

.breadcrumb {position: relative; margin-bottom: 15px; padding: 0 40px; text-align: right;}
.breadcrumb a {position: relative; margin-left: 20px; line-height: 20px; font-size: 18px; color: #8b8b8b;}
.breadcrumb a:before {display: block; content: '>'; position: absolute; top: 0; left: -20px; width: 20px; line-height: 20px; font-size: 18px; color: #8b8b8b; text-align: center;}
.breadcrumb a:first-child:before {display: none;}
.breadcrumb span {}
.breadcrumb .i-home {margin-left: 0 !important; width: 20px; height: 20px; background: url(../images/i-breadcrumb-home.png) center 45% no-repeat;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .top-field {padding: 25px 0 30px;}
    .top-field ~ .main-contents {padding: 30px 0; min-height: 400px;}
    .top-field .subject {padding: 0;}
    .top-field .subject h3 {font-size: 22px;}
    .top-field .subject span {font-size: 15px;}

    .top-field .meta {padding-bottom: 0;}

    .top-field .result h3,
    .top-field .result h3 strong,
    .top-field .result h3 .em {font-size: 22px;}

    .breadcrumb {padding: 0; text-align: left;}
    .breadcrumb a,
    .breadcrumb a:before {font-size: 13px;}
    .breadcrumb a {margin-left: 15px;}
    .breadcrumb a:before {left: -15px; width: 15px;}
    .breadcrumb .i-home {width: 15px; background-size: 15px auto;}
  }


/* page tab */

.page-tab {padding: 0 15px; line-height: 1.2; text-align: center;}
.page-tab a,
.page-tab span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.page-tab ul,
.page-tab li,
.page-tab ol {list-style: none;}
.page-tab strong {display: block;}

.page-tab ul {display: flex; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
.page-tab ul li {flex: 1;}
.page-tab ul li a {display: flex; padding: 10px; height: 75px; font-size: 24px; color: #242424; font-weight: 500; background-color: #eceef2; box-sizing: border-box; align-items: center; justify-content: center;}
.page-tab ul li.active a {color: #fff; background-color: #00b6f0;}
.page-tab ul li span {}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .page-tab {padding: 0;}
    .page-tab ul {border-radius: 7px;}
    .page-tab ul li a {padding: 10px 5px; height: 50px; font-size: 16px;}
  }


/* control field */

.control-field {margin-bottom: 20px; padding: 0 15px; line-height: 1.2;}
.control-field a,
.control-field span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.control-field ul,
.control-field li,
.control-field ol {list-style: none;}
.control-field strong {display: block;}

.control-field .flex {display: flex; position: relative; font-size: 0; align-items: end; justify-content: space-between; box-sizing: border-box;}
.control-field .column {display: flex; font-size: 0; white-space: nowrap; align-items: flex-start;}

.control-field .total {display: inline-block;}
.control-field .total span {line-height: 21px; font-size: 22px; color: #242424; font-weight: 500; box-sizing: border-box;}
.control-field .total strong {display: inline-block;}
.control-field .total .em {color: #00b6f0;}

.control-field .total-stamp {}
.control-field .total-stamp span {position: absolute; top: 33px; right: 40px; padding: 10px 30px; background-color: #eceef2; border-radius: 5px; text-align: center;}

.filter {position: relative; font-size: 0;}
.filter .select {display: inline-block; position: relative; margin-left: 20px; width: 170px; vertical-align: top; box-sizing: border-box;}
.filter .select:first-child {margin-left: 0 !important;}

.filter ~ .flex {margin-top: 20px; padding-top: 20px; border-top: 2px solid #dddddd;}

.custom-select {}
.custom-select select {display: none;}
.custom-select .select-selected,
.custom-select .select-items div {padding: 12.5px 15px; line-height: 21px; font-size: 20px; color: #8b8b8b; cursor: pointer; user-select: none; box-sizing: border-box;}
.custom-select .select-selected {position: relative; background-color: #fff; border: 2px solid #dddddd; border-radius: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.custom-select .select-selected.select-arrow-active {z-index: 100;}
.custom-select .select-selected:after {position: absolute; content: ""; top: 18px; right: 15px; width: 16px; height: 9px; background: url(../images/i-select-arrow.png) 90% center no-repeat;}

.custom-select.selected .select-selected {color: #242424; background-color: #fff; border-color: #dddddd;}
.custom-select.selected .select-selected:after {background-image: url(../images/i-select-arrow.png);}

.custom-select.grade .select-selected {color: #fff; background: #02b9f3; border-color: #02b9f3;}
.custom-select.grade .select-selected:after {background-image: url(../images/i-select-arrow-white.png);}

.custom-select .select-items {position: absolute; top: 100%; left: 0; right: 0; margin-top: -5px; padding-top: 3px; background-color: #fff; border: 2px solid #dddddd; border-radius: 0 0 5px 5px; box-shadow: 6px 6px 7.36px 0.64px rgba(0, 0, 0, 0.04); z-index: 99;}
.custom-select .select-items div {}
.custom-select .select-hide {display: none;}
.custom-select .select-items div:hover,
.custom-select .same-as-selected {color: #02b9f3;}

.control-tab {display: inline-block; position: relative; line-height: 1.2;}
.control-tab a,
.control-tab span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.control-tab ul,
.control-tab li,
.control-tab ol {list-style: none;}
.control-tab strong {display: block;}

.control-tab ul {}
.control-tab ul li {display: inline-block; position: relative; padding: 0 20px;}
.control-tab ul li:before {display: block; content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 16px; background-color: #ececec; transform: translateY(-50%);}
.control-tab ul li:first-child {padding-left: 0 !important;}
.control-tab ul li:first-child:before {display: none;}
.control-tab ul li a {line-height: 21px; font-size: 20px; color: #8b8b8b; font-weight: 500;}
.control-tab ul li.active a {color: #242424;}

.control-search {display: inline-block; position: relative; line-height: 1.2;}
.control-search .search-form {position: relative; padding-right: 90px;}
.control-search .search-form .btn-close {display: none;}
.control-search .search-form label {}
.control-search .search-form .search-input {padding: 0 20px; width: 100%; height: 50px; font-size: 20px; color: #02b9f3; font-weight: 500; background-color: #fff; border: 1px solid #cacaca; border-radius: 5px; box-sizing: border-box; outline: none; caret-color: #02b9f3;}
.control-search .search-form .search-input::-webkit-input-placeholder {color: #cacaca}
.control-search .search-form .search-input:-ms-input-placeholder {color: #cacaca}
.control-search .search-form .search-input::placeholder {color: #cacaca}
.control-search .search-form .search-input:focus {}

.control-search .search-form .search-input::-ms-clear,
.control-search .search-form .search-input::-ms-reveal {display:none;}
.control-search .search-form .search-input::-webkit-search-decoration,
.control-search .search-form .search-input::-webkit-search-cancel-button,
.control-search .search-form .search-input::-webkit-search-results-button,
.control-search .search-form .search-input::-webkit-search-results-decoration{display:none;}

.control-search .search-form .search-btn {position: absolute; top: 0; right: 0;}
.control-search .search-form .btn-submit {width: 80px; height: 50px; background: #02b9f3 url(../images/i-control-search-submit.png) center center no-repeat; border-radius: 5px; box-sizing: border-box;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    
  }
  @media (max-width: 900px) { 
    .control-field {padding: 0;}
    .control-field .flex {align-items: center;}
    .control-field .column {max-width: 100%;}
    
    .control-field .total {padding: 0;}
    .control-field .total span {font-size: 16px;}

    .control-field .total-stamp {display: block; margin-bottom: 20px; padding: 0;}
    .control-field .total-stamp span {position: relative; top: 0; right: 0; padding: 15px 10px; width: 100%;}

    .filter ~ .flex {padding-top: 0; border-top: none;}
    .filter .select {margin: 0; width: 100%;}
    .filter .select + .select {margin-top: 10px;}

    .custom-select .select-selected,
    .custom-select .select-items div {padding: 8.5px 10px; line-height: 21px; font-size: 15px;}
    .custom-select .select-selected,
    .custom-select .select-items {border-width: 1px;}
    .custom-select .select-selected:after {top: 16px; background-size: 12px auto;}

    .control-tab {padding: 0;}
    .control-tab ul li {padding: 0 10px;}
    .control-tab ul li a {font-size: 16px;}

    .control-search {position: absolute; top: -7px; left: 0; width: 100%; height: 1px; box-sizing: border-box;}
    .filter ~ .flex .control-search {top: -10px;}
    .control-search .search-form {padding-right: 50px;}
    .control-search .search-form .btn-close {display: none; position: absolute; top: 0; right: 50px; width: 40px; height: 40px;}
    .control-search.active .search-form .btn-close {display: block;}
    .control-search .search-form .btn-close:before,
    .control-search .search-form .btn-close:after {display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background-color: #cacaca;}
    .control-search .search-form .btn-close:before {transform: translate(-50%) rotate(45deg);}
    .control-search .search-form .btn-close:after {transform: translate(-50%) rotate(-45deg);}
    .control-search .search-form .search-input {display: none; padding: 0 40px 0 10px; height: 40px; font-size: 15px;}
    .control-search.active .search-form .search-input {display: block;}
    .control-search .search-form .btn-submit {width: 40px; height: 40px; background-size: 18px auto;}
  }


/* grid view */

.grid-view {}
.grid-view ul {font-size: 0;}
.grid-view ul li {display: inline-block; margin-bottom: 40px; width: 25%; vertical-align: top;}
.grid-view .article {padding: 0 15px;}
.grid-view .article > a {}
.grid-view .article .img-span {border-width: 2px;}
.grid-view .article .content {padding: 20px; border: 2px solid #ddd; border-top: none; border-radius: 0 0 15px 15px;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .grid-view ul li {width: 50%;}
  }
  @media (max-width: 900px) { 
    .grid-view {padding-bottom: 15px;}
    .grid-view ul li {margin: 20px 0 0 0; width: 100%;}
    .grid-view ul li:first-child {margin-top: 0;}
    .grid-view .article {padding: 0;}
    .grid-view .article .img-span {border-width: 1px;}
    .grid-view .article .content {padding: 15px; border-width: 1px;}
  }


/* table view */

.list-field {position: relative; margin: 0 auto; width: 1430px; max-width: 100%; box-sizing: border-box;}


.control-field ~ .table-view {margin-top: 30px;}

.table-view {padding: 0 15px; line-height: 1.2; text-align: center;}
.table-view a,
.table-view span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.table-view ul,
.table-view li,
.table-view ol {list-style: none;}
.table-view strong {display: block;}

.table-view table {}
.table-view thead th,
.table-view tbody td,
.table-view tbody .title {line-height: 28px; color: #555555;}

.table-view thead {}
.table-view thead tr {}
.table-view thead th {padding: 20px 10px; font-size: 22px; font-weight: 500; background-color: #eceef2; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd;}
.table-view tbody {}
.table-view tbody tr {}
.table-view tbody td {padding: 28px 10px; font-size: 24px; border-bottom: 2px solid #ececec;}
.table-view tbody td.left {padding-left: 30px; font-size: 0; text-align: left;}
.table-view tbody .em {margin: -6px 0; width: 80px; height: 40px; line-height: 40px; font-size: 20px; color: #fff; background-color: #00b6f0; border-radius: 10px; box-sizing: border-box;}
.table-view tbody .title {max-width: 84%; font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table-view tbody .title:hover {color: #00b6f0;}
.table-view tbody .i-members,
.table-view tbody .i-new {margin: -1px 0 -1px 10px; width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat;}
.table-view tbody .i-members {background-image: url(../images/i-members.png);}
.table-view tbody .i-new {background-image: url(../images/i-new.png);}
.table-view tbody .i-file {margin: -3px 0; width: 33px; height: 34px; background: url(../images/i-file-gray.png) center center no-repeat;}

  @media (min-width: 1600px) {
    .table-view tbody .title {max-width: 87%;}
  }
  @media (max-width: 1280px) {
    .table-view thead th,
    .table-view tbody td,
    .table-view tbody .title {line-height: 26px;}
    .table-view thead th {font-size: 20px;}
    .table-view tbody td {font-size: 20px;}
    .table-view tbody .title {max-width: 80%;}
    .table-view tbody .em {margin: -2px 0; width: 55px; height: 30px; line-height: 30px; font-size: 15px;}
    .table-view tbody .i-file {margin: -2px 0; height: 30px; background-size: auto 30px;}
  }
  @media (max-width: 900px) { 
    .table-view {display: none;}
  }


/* list view */

.list-view {display: none;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .list-view {display: block;}
    .list-view ul {list-style: none;}
    .list-view ul li {border-bottom: 1px solid #dddddd;}
    .list-view ul li:first-child {border-top: 1px solid #dddddd;}
    .list-view ul li > a {display: block; padding: 15px 10px; font-size: 0;}
    .list-view ul li .title,
    .list-view ul li span {color: #242424;}
    .list-view ul li span {display: inline-block; vertical-align: top;}
    .list-view ul li #topInputSpan,
    .list-view ul li .title {display: inline;}
    .list-view ul li .em,
    .list-view ul li .title,
    .list-view ul li .info > span {padding: 2px 0; line-height: 21px; font-size: 15px;}
    .list-view ul li .em {margin-right: 5px; width: 40px; font-size: 14px; color: #fff; font-weight: 500; background-color: #00b6f0; border-radius: 5px; text-align: center; box-sizing: border-box;}
    .list-view ul li .title {max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .list-view ul li .i-members,
    .list-view ul li .i-new {margin: 0 2px; width: 20px; height: 25px; background-position: center center; background-repeat: no-repeat; background-size: 20px auto; box-sizing: border-box;}
    .list-view ul li .i-members {background-image: url(../images/i-members.png);}
    .list-view ul li .i-new {background-image: url(../images/i-new.png);}
    .list-view ul li .i-file {width: 18px; height: 21px; background: url(../images/i-file-gray.png) center center no-repeat; background-size: 13px auto;}
    .list-view ul li .info {display: block; margin-top: 10px;}
    .list-view ul li .info > span {position: relative; padding: 2px 10px; font-size: 14px; color: #8b8b8b;}
    .list-view ul li .info > span:first-child {padding-left: 0;}
    .list-view ul li .info > span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 1px; height: 10px; background-color: #cccccc;}
    .list-view ul li .info > span:first-child::before {display: none;}
  }

  
/* pager */

.pager {position: relative; padding: 40px 15px; font-size: 0; line-height: 1.2; text-align: center;}
.pager a,
.pager span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.pager ul,
.pager li,
.pager ol {list-style: none;}
.pager strong {display: block;}

.pager a {margin: 0 5px; width: 50px; height: 50px; line-height: 46px; border: 2px solid transparent; border-radius: 50%; box-sizing: border-box;}
.pager .first,
.pager .prev,
.pager .next,
.pager .last {background-position: center center; background-repeat: no-repeat; border-color: #ececec;}
.pager .first:hover,
.pager .prev:hover,
.pager .next:hover,
.pager .last:hover {border-color: #00b6f0;}
.pager .first {background-image: url(../images/i-pager-first.png);}
.pager .prev {background-image: url(../images/i-pager-prev.png);}
.pager .next {background-image: url(../images/i-pager-next.png);}
.pager .last {background-image: url(../images/i-pager-last.png);}

.pager ul {display: inline-block; margin: 0 10px; font-size: 0; vertical-align: top;}
.pager ul li {display: inline-block; vertical-align: top;}
.pager ul li a {font-size: 22px; color: #555555; font-weight: 500;}
.pager ul li a:hover {color: #00b6f0;}
.pager ul li.active a {color: #fff; font-weight: bold; background-color: #00b6f0; border-color: #00b6f0;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .pager {padding: 30px 0;}
    .pager a {width: 26px; height: 26px; line-height: 24px; border-width: 1px;}
    .pager .first,
    .pager .prev,
    .pager .next,
    .pager .last {background-size: auto 10px;}
    .pager ul {margin: 0;}
    .pager ul li a {font-size: 14px;}
  }



/* detail page */

.detail-field {position: relative; margin: 0 auto; padding: 0 15px; width: 1430px; max-width: 100%; box-sizing: border-box;}

.table-detail {}

.table-detail thead a,
.table-detail thead span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.table-detail thead ul,
.table-detail thead li,
.table-detail thead ol {list-style: none;}
.table-detail thead strong {display: block;}

.table-detail table {}
.table-detail thead th,
.table-detail .title,
.table-detail span {color: #555555; font-weight: 400;}

.table-detail thead {line-height: 1.2;}
.table-detail thead tr {}
.table-detail thead th {padding: 40px 195px 40px 40px; font-size: 0; background-color: #eceef2; border-top: 2px solid #dddddd; border-bottom: 2px solid #dddddd; text-align: left;}
.table-detail tbody {}
.table-detail tbody tr {}
.table-detail tbody td {padding: 50px 40px 100px; border-bottom: 2px solid #dddddd;}
.table-detail .em {margin: 2px 20px 2px 0; width: 80px; line-height: 40px; font-size: 20px; color: #fff; font-weight: 500; background-color: #00b6f0; border-radius: 5px; text-align: center; box-sizing: border-box;}
.table-detail .title {display: inline; font-size: 32px; color: #242424; font-weight: 400;}
.table-detail .i-new {margin: 6px 5px; width: 30px; height: 30px; background: url(../images/i-new.png) center center no-repeat;}
.table-detail .i-file {margin: 5px 3px; width: 30px; height: 34px; background: url(../images/i-file-gray.png) center center no-repeat;}
.table-detail .info {position: absolute; top: 40px; right: 40px;}
.table-detail .info > span {line-height: 44px; font-size: 24px;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .table-detail thead th {padding: 40px;}
    .table-detail .title {font-size: 28px;}
    .table-detail .em {margin: 0 15px 0 0;}
    .table-detail .i-new {margin: 3px 5px;}
    .table-detail .i-file {margin: 2px 3px;}
    .table-detail .info {display: block; position: relative; top:0; right: 0; margin-top: 20px;}
  }
  @media (max-width: 900px) { 
    .detail-field {padding: 0;}

    .table-detail thead th {padding: 0 10px 20px 10px; background-color: transparent; border-bottom-width: 1px; border-top-color: transparent;}
    .table-detail tbody td {padding: 20px 10px; border-bottom-width: 1px;}

    .table-detail .em,
    .table-detail .title,
    .table-detail .info > span {padding: 2px 0; line-height: 21px; font-size: 15px;}
    .table-detail .em {margin-right: 5px; width: 40px; font-size: 14px;}
    .table-detail .title {font-size: 17px;}
    .table-detail .i-new {margin: 0 0 0 10px; width: 20px; height: 25px; background-size: 20px auto;}
    .table-detail .i-file {margin: 0 0 0 10px; width: 18px; height: 25px; background-size: 18px auto;}

    .table-detail .info {margin-top: 10px;}
    .table-detail .info > span {position: relative; padding: 2px 10px; font-size: 14px; color: #8b8b8b;}
    .table-detail .info > span:first-child {padding-left: 0;}
    .table-detail .info > span:before {display: block; content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 1px; height: 10px; background-color: #cccccc;}
    .table-detail .info > span:first-child::before {display: none;}
  }


/* area */

.cont-area {padding: 40px;}
/*.cont-area p {line-height: 1.6; font-size: 20px; color: #555;}*/

.cont-area + .file-area {padding-top: 40px; border-top: 2px dotted #dddddd;}
.cont-area + .file-area .title {top: 40px;}

.file-area {position: relative; padding: 30px 40px 30px 150px; font-size: 0;}
.file-area a,
.file-area span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.file-area ul,
.file-area li,
.file-area ol {list-style: none;}
.file-area strong {display: block;}

.file-area .title {display: inline-block; position: absolute; top: 30px; left: 40px; line-height: 40px; font-size: 22px; color: #242424; font-weight: 500;}
.file-area a {position: relative; margin: 0 10px 10px; padding: 8.5px 0; line-height: 21px; border: 1px solid #dddddd; border-radius: 5px; box-sizing: border-box; overflow: hidden;}
.file-area .i-download {padding-left: 40px;}
.file-area .i-download:before,
.file-area .i-download:after {display: block; content: ''; position: absolute; top: 0; left: 0;}
.file-area .i-download:before {width: 40px; height: 40px; background: url(../images/i-download.png) center center no-repeat; background-size: 16px auto;}
.file-area .i-download:after {left: 40px; width: 1px; height: 100%; background-color: #dddddd;}
.file-area .i-download span {padding: 0 20px; font-size: 16px; color: #555;}

.file-area .i-download.ing {border-color: #00b6f0;}
.file-area .i-download.ing:after {background-color: #00b6f0;}
.file-area .i-download.ing span{color: #00b6f0;}
.file-area .i-download .downloading {display: none;}
.file-area .i-download.ing .downloading {display: block; position: absolute; top: 0; left: 0; padding: 5px; width: 100%; height: 100%; background-color: rgb(0 182 240 / 70%); text-align: center; box-sizing: border-box;}
.file-area .i-download.ing .downloading .rate {display: block; line-height: 20px; font-size: 16px; color: #fff;}
.file-area .i-download.ing .downloading .bar {display: block; position: relative; margin-top: 5px;}
.file-area .i-download.ing .downloading .bar > span {position: absolute; top: 0; left: 0; padding: 0; height: 3px; background-color: #fff; border-radius: 30px;} 

.tag-area {position: relative; padding: 0 40px 30px; font-size: 0;}
.tag-area a,
.tag-area span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.tag-area ul,
.tag-area li,
.tag-area ol {list-style: none;}
.tag-area strong {display: block;}
.tag-area .tag {min-width: 140px; margin: 0 20px 10px 0; padding: 9.5px 20px; line-height: 21px; font-size: 18px; color: #555; background-color: #f3f3f3; border-radius: 50px; box-sizing: border-box; text-align: center;}

.control-area {position: relative; padding: 15px 0; font-size: 0; border-top: 2px solid #dddddd;}
.control-area:after {display: block; content: ''; clear: both;}
.control-area a,
.control-area span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.control-area ul,
.control-area li,
.control-area ol {list-style: none;}
.control-area strong {display: block;}

.control-area .btn-prev,
.control-area .btn-next,
.control-area .btn-list {position: relative; height: 70px; line-height: 50px; font-size: 20px; color: #242424; font-weight: 500; box-sizing: border-box;}
.control-area .btn-prev,
.control-area .btn-next {padding: 10px 0;}
.control-area .btn-prev:before,
.control-area .btn-next:after {display: inline-block; content: ''; width: 26px; height: 100%; background-position: center 55% ; background-size: 100% auto; background-repeat: no-repeat; vertical-align: top;}
.control-area .btn-prev {text-align: left;}
.control-area .btn-next {float: right; text-align: right;}
.control-area .btn-prev:before {margin-right: 20px; background-image: url(../images/i-detail-prev.png);}
.control-area .btn-next:after {margin-left: 20px; background-image: url(../images/i-detail-next.png);}

.control-area .btn-prev:hover,
.control-area .btn-next:hover {color: #00b6f0;}
.control-area .btn-prev:hover:before {background-image: url(../images/i-detail-prev-hover.png);}
.control-area .btn-next:hover:after {background-image: url(../images/i-detail-next-hover.png);}
.control-area .btn-list {position: absolute; top: 15px; left: 50%; padding: 10px; width: 300px; color: #fff; border-radius: 5px; background-color: #00b6f0; text-align: center; transform: translateX(-50%);}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) { 
    .cont-area {padding: 15px 10px;}
    /*.cont-area p {font-size: 15px;}*/

    .cont-area + .file-area {padding-top: 15px; border-top-width: 1px;}
    .cont-area + .file-area .title {top: 0;}

    .file-area {padding: 15px 10px;} 
    .file-area .title {position: relative; top: 0; left: 0; font-size: 15px;}
    .file-area a {margin: 0 0 10px 0; width: 100%; border-radius: 3px;}

    .tag-area {padding: 10px 10px;}
    .tag-area .tag {margin: 0 10px 10px 0; padding: 5px 10px; min-width: 100px; font-size: 15px;}

    .control-area {padding-top: 0; border-top-width: 1px;}
    .control-area .btn-prev,
    .control-area .btn-next,
    .control-area .btn-list {height: 50px; line-height: 40px; font-size: 15px;}
    .control-area .btn-prev,
    .control-area .btn-next {width: 50%; padding: 5px 0;}
    .control-area .btn-prev:before,
    .control-area .btn-next:after {width: 20px;}
    .control-area .btn-prev:before {margin-right: 10px;}
    .control-area .btn-next:after {margin-left: 10px;}
    .control-area .btn-list {position: relative; top: 0; left: 0; padding: 5px; width: 100%; font-size: 16px; transform: none;}
  }


/* course */

.course {}
.course-field {display: flex; position: relative; margin: 0 auto; width: 1652px; max-width: 100%; padding: 0 15px; box-sizing: border-box;}
.course-field > .column {position: relative; padding: 0 0 0 40px; width: 28.39%; box-sizing: border-box;}
.course-field > .column:first-child {padding: 0 40px 0 0; width: 71.61%;}
.course-field > .column:last-child:before {display: block; content: ""; position: absolute; top: 0; left: 0; width: 2px; height: calc(100% - 40px); background: #dddddd;}

/** 보더 제거 2023-02-28 **/
.course .video {position: relative;
  /*border: 2px solid #dddddd; */
  box-sizing: border-box;
}

.time-stamp {margin-top: 40px; background-color: #fff; border: 2px solid #dddddd; border-radius: 20px; box-sizing: border-box; overflow: hidden;}

.time-stamp a,
.time-stamp span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.time-stamp ul,
.time-stamp li,
.time-stamp ol {list-style: none;}
.time-stamp strong {display: block;}

.time-stamp .title,
.time-stamp .title strong {line-height: 21px; font-size: 24px; color: #242424; font-weight: 500;}
.time-stamp .title {display: block; position: relative; padding: 17.5px 40px; text-align: center;}
.time-stamp .title:before,
.time-stamp .title:after {display: block; content: ''; position: absolute; top: 19px; left: 100%; margin-left: -40px; width: 18px; height: 3px; background-color: #242424; transition: all 0.4s; box-sizing: border-box; z-index: 1;}
.time-stamp .title:before {transform: translateY(8px) rotate(180deg);}
.time-stamp .title:after {transform: translateY(8px) rotate(90deg);}
.time-stamp.active .title:before,
.time-stamp.active .title:after {background-color: #00b6f0;}
.time-stamp.active .title:before {transform: translateY(8px) rotate(180deg);}
.time-stamp.active .title:after {transform: translateY(8px) rotate(180deg);}

.time-stamp ul {display: none; padding: 15px 40px 25px; border-top: 2px solid #dddddd;}
.time-stamp.active ul {display: block;}
.time-stamp ul li {position: relative;}
.time-stamp ul li > a {margin: 2px 0; padding: 5px 0;}
.time-stamp ul li span {line-height: 21px; font-size: 20px; color: #8b8b8b;}
.time-stamp ul li .time {margin-right: 25px; color: #00b6f0;}

.course-view {position: relative; margin-bottom: 40px}
.course-view:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #dddddd; border-radius: 10px; box-sizing: border-box;}

.course-view ::-webkit-scrollbar {width: 0;}
.course-view ::-webkit-scrollbar-thumb {height: 30%; background: transparent; border-radius: 10px;}
.course-view ::-webkit-scrollbar-track {background: transparent;}

.course-view ul {max-height: 1280px; cursor: grab; overflow: hidden; overflow-y: scroll; border-radius: 10px;}

.course-view .article {padding: 0;}
.course-view .article .title {font-size: 22px;}
.course-view .article > a {padding: 0 30px;}
.course-view .article > a:after {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #00b6f0; border-radius: 10px; box-sizing: border-box; opacity: 0;}
.course-view ul li.active .article > a:after {opacity: 1; z-index: 1;} 
.course-view .article > a:hover .title {color: #242424;}

.course-view .article .content {padding: 30px 0;}
.course-view .article .content:before {display: block; content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background-color: #dddddd;}
.course-view ul li:first-child .article .content:before {display: none;}
.course-view .article .state {margin: 20px 0 0; padding-bottom: 0; border-bottom: none;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .course-field {display: block; padding: 0;}
    .course-field .column {padding: 0 !important; width: 100% !important;}
    .course-field .column:last-child:before {display: none;}
  }
  @media (max-width: 900px) { 
    .course > .pack {padding: 0; background-color: transparent; border: none;}

    .course .video {margin: -30px -20px 0; border-width: 1px;}

    .time-stamp {margin-top: 30px; border-width: 1px;}
    .time-stamp .title,
    .time-stamp .title strong {font-size: 15px;}
    .time-stamp .title {padding: 15px 15px;}
    .time-stamp .title:before,
    .time-stamp .title:after {top: 17px; margin-left: -30px; width: 12px; height: 2px;}
    .time-stamp ul {padding: 15px; border-top-width: 1px;}
    .time-stamp ul li:after {display: block; content: ''; position: absolute; left: 100%; top: 7px; margin-left: -17px; width: 7px; height: 17px; background: transparent url(../images/i-course-arrow.png) center center no-repeat; background-size: 7px auto; transform: none;}
    .time-stamp ul li > a {display: block; padding: 5px 10px;}
    .time-stamp ul li span {font-size: 15px;}
    .time-stamp ul li .time {margin-right: 15px;}

    .course .control-area {padding-top: 15px;}
    .course .control-area .btn-prev,
    .course .control-area .btn-next {font-size: 15px; background-size: 20px auto;}
    
    .course-view {margin-bottom: 15px;}
    .course-view:before {border-width: 1px;}
    .course-view ul {max-height: 750px;}
    .course-view .article > a {padding: 0 15px;}
    .course-view .article > a:after {border-width: 2px;}
    .course-view .article .content {padding: 20px 0;}
    .course-view .article .content:before {height: 1px;}
    .course-view .article .state {margin-top: 15px;}

  }




/* course list */

.course-list {position: relative; padding-left: 32.5%; min-height: 590px;}
.course-list:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 32.5%; height: 100%; background: url(../images/course-list.png) center 120px no-repeat; background-size: 90% auto;}
.course-list a,
.course-list span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.course-list ul,
.course-list li,
.course-list ol {list-style: none;}
.course-list strong {display: block;}

.course-list ul {}
.course-list ul li {position: relative;}
.course-list ul li:before,
.course-list ul li:after {display: block; content: ''; position: absolute; top: 41px; left: 100%; margin-left: -66px; width: 26px; height: 3px; background-color: #242424; transition: all 0.4s; box-sizing: border-box; z-index: 1;}
.course-list ul li:before {transform: translateY(8px) rotate(180deg);}
.course-list ul li:after {transform: translateY(8px) rotate(90deg);}
.course-list ul li.active:before,
.course-list ul li.active:after {background-color: #00b6f0;}
.course-list ul li.active:before {transform: translateY(8px) rotate(180deg);}
.course-list ul li.active:after {transform: translateY(8px) rotate(180deg);}

.course-list ul li a {display: flex; position: relative; padding: 10px 40px; height: 100px; font-size: 24px; color: #242424; border-radius: 10px; box-sizing: border-box; align-items: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.course-list ul li a:after {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #dddddd; border-radius: 10px; box-sizing: border-box;}
.course-list ul li > a:hover:after,
.course-list ul li.active > a:after {border: 3px solid #00b6f0;}
.course-list ul li strong {display: inline-block; max-width: 100%; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.course-list ul li span {position: relative; color: #8b8b8b; font-weight: 400;}
.course-list ul li span:before {display: inline-block; content: '–'; margin: 0 5px; font-size: 24px; color: #242424;}

.course-list > ul > li {margin-top: 20px;}
.course-list > ul > li:first-child {margin-top: 0 !important;}

.course-list > ul > li ul li:before,
.course-list > ul > li ul li:after {width: 18px; background-color: #8b8b8b;}
.course-list > ul > li ul a,
.course-list > ul > li ul span:before {font-size: 20px;}

.course-list .depth2 {display: none; position: relative; margin-top: 20px; padding: 0 40px;}
.course-list > ul > li.active .depth2 {display: block;}
.course-list .depth2 > ul {}
.course-list .depth2 > ul > li {margin-top: 10px;}
.course-list .depth2 > ul > li:before,
.course-list .depth2 > ul > li:after {top: 26px;}
.course-list .depth2 > ul > li:first-child {margin-top: 0 !important;}
.course-list .depth2 > ul > li > a {height: 70px; background: #eceef2;}
.course-list .depth2 > ul > li > a:after {border-color: #eceef2;}
.course-list .depth2 > ul > li > a:hover:after,
.course-list .depth2 > ul > li.active > a:after {border: 2px solid #00b6f0;}

.course-list .depth3 {display: none; position: relative; margin-top: 20px; padding: 10px; border: 2px solid #dddddd; border-radius: 10px; overflow: hidden;}
.course-list .depth2 > ul > li.active .depth3 {display: block;}
.course-list .depth3 > ul {}
.course-list .depth3 > ul > li {margin-top: 10px;}
.course-list .depth3 > ul > li:first-child {margin-top: 0 !important;}
.course-list .depth3 > ul > li:before,
.course-list .depth3 > ul > li:after {top: 21px; margin-left: -56px;}
.course-list .depth3 > ul > li > a {padding: 10px 30px; height: 60px; background-color: #f4f6fa;}
.course-list .depth3 > ul > li > a:after {border-color: #f4f6fa;}
.course-list .depth3 > ul > li > a:hover,
.course-list .depth3 > ul > li > a:hover span,
.course-list .depth3 > ul > li > a:hover span:before,
.course-list .depth3 > ul > li.active > a,
.course-list .depth3 > ul > li.active > a span,
.course-list .depth3 > ul > li.active > a span:before {color: #00b6f0;}
.course-list .depth3 > ul > li.active > a:after {border: 2px solid #f4f6fa;}

.course-list .depth4 {display: none; position: relative; padding: 20px 30px 10px;}
.course-list .depth4:before {display: block; content: ''; position: absolute; top: 3px; left: 55px; height: 105%; border-left: 2px dotted #dddddd;}
.course-list .depth3 > ul > li.active .depth4 {display: block;}
.course-list .depth4 > ul {}
.course-list .depth4 > ul > li {margin-top: 5px;}
.course-list .depth4 > ul > li:first-child {margin-top: 0 !important;}
.course-list .depth4 > ul > li:before,
.course-list .depth4 > ul > li:after {}
.course-list .depth4 > ul > li:before {display: none;}
.course-list .depth4 > ul > li:after,
.course-list .depth4 > ul > li.active:after {top: 11.5px; margin-left: -10px; width: 10px; height: 17px; background: transparent url(../images/i-course-arrow.png) center center no-repeat; transform: none;}
.course-list .depth4 > ul > li > a {padding-left: 60px; height: 40px; background-color: transparent;}
.course-list .depth4 > ul > li > a:before {display: block; content: ''; position: absolute; top: 14px; left: 20px; width: 12px; height: 12px; background-color: #fff; border: 3px solid #cacaca; border-radius: 50%; box-sizing: border-box;}
.course-list .depth4 > ul > li > a:hover:before,
.course-list .depth4 > ul > li.active > a:before {border-color: #00b0e8;}
.course-list .depth4 > ul > li > a:after {border-color: transparent;}
.course-list .depth4 > ul > li > a:hover,
.course-list .depth4 > ul > li > a:hover span,
.course-list .depth4 > ul > li > a:hover span:before,
.course-list .depth4 > ul > li.active > a,
.course-list .depth4 > ul > li.active > a span,
.course-list .depth4 > ul > li.active > a span:before {color: #00b6f0;}
.course-list .depth4 > ul > li.active > a:after {border: 2px solid transparent;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .course-list {padding-left: 0; min-height: auto;}
    .course-list:before {display: none;}
    .course-list ul li:before,
    .course-list ul li:after {top: 31px;}
    .course-list ul li a {height: 80px;}
  }
  @media (max-width: 900px) { 
    .course-list ul li:before,
    .course-list ul li:after {top: 21px; margin-left: -36px; width: 16px; height: 2px;}
    .course-list ul li a,
    .course-list ul li span:before {font-size: 16px;}
    .course-list ul li a {padding: 5px 15px; height: 60px; border-radius: 7px;}
    .course-list ul li a:after {border-width: 1px; border-radius: 7px;}
    .course-list ul li a:hover:after,
    .course-list ul li.active a:after {border-width: 2px;}

    .course-list > ul > li {margin-top: 10px;}

    .course-list > ul > li ul li:before,
    .course-list > ul > li ul li:after {width: 12px;}
    .course-list > ul > li ul a,
    .course-list > ul > li ul span:before {font-size: 15px;}

    .course-list .depth2 {margin: 15px 0; padding: 0 10px;}
    .course-list > ul > li:last-child .depth2 {margin-bottom: 5px;}
    .course-list .depth2 > ul > li {margin-top: 5px;}
    .course-list .depth2 > ul > li:before,
    .course-list .depth2 > ul > li:after {top: 17px; margin-left: -32px;} 
    .course-list .depth2 > ul > li > a {height: 50px;}

    .course-list .depth3 {margin: 15px 0; border-width: 1px;}
    .course-list .depth2 > ul > li:last-child .depth3 {margin-bottom: 5px;}
    .course-list .depth3 > ul > li:before,
    .course-list .depth3 > ul > li:after {top: 17px; margin-left: -27px;}
    .course-list .depth3 > ul > li.active + li {margin-top: 0;}
    .course-list .depth3 > ul > li > a {padding: 5px 10px; height: 50px;}

    .course-list .depth4 {padding: 15px;}
    .course-list .depth3 > ul > li:last-child .depth4 {padding-bottom: 5px;}
    .course-list .depth4:before {left: 15px;}
    .course-list .depth4 > ul > li:after,
    .course-list .depth4 > ul > li.active:after {margin-left: -7px; width: 7px; background-size: 7px auto;}
    .course-list .depth4 > ul > li > a:before {left: -5px;}
    .course-list .depth4 > ul > li > a {padding-left: 12px; font-size: 15px;}

  }


/* my stamp */

.stamp-field {display: flex; position: relative; padding: 0 15px 40px; justify-content: space-between;}
.stamp-field a,
.stamp-field span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.stamp-field ul,
.stamp-field li,
.stamp-field ol {list-style: none;}
.stamp-field strong {display: block;}

.stamp-total {position: relative; width: 26.5%; text-align: center; box-sizing: border-box;} 
.stamp-total:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/my-stamp.png) center 115px no-repeat; background-size: 90% auto;}
.stamp-total span,
.stamp-total span strong {line-height: 21px; font-size: 28px; color: #242424; font-weight: 500;}
.stamp-total span {position: relative; padding: 24px 20px; width: 400px; max-width: 100%; background-color: #eceef2; border-radius: 10px; text-align: center; box-sizing: border-box;}
.stamp-total span strong {display: inline-block; font-weight: 500; vertical-align: top;}
.stamp-total .em {font-size: 30px; color: #00b6f0;}

.stamp-list {position: relative; width: 72%; box-sizing: border-box;}
.stamp-list ul {}
.stamp-list ul li {position: relative; margin-top: 20px; padding-left: 80px; font-size: 0;}
.stamp-list ul li:first-child {margin-top: 0 !important;}
.stamp-list ul li:before {display: block; content: ''; position: absolute; top: -3.5px; left: 0; width: 57px; height: 57px; background: url(../images/i-my-stamp.png) center center no-repeat; background-size: 57px auto;}
.stamp-list ul li.completed:before {background-image: url(../images/i-my-completed-stamp.png);}
.stamp-list ul li strong {position: absolute; top: 0; left: 80px; padding: 14.5px 15px; width: 170px; line-height: 21px; font-size: 20px; color: #fff; background-color: #02b9f3; border-radius: 5px; box-sizing: border-box;}
.stamp-list ul li .filter {padding-left: 190px;}
.stamp-list ul li .filter .select {margin-left: 1.5%; width: 21%;}
.stamp-list ul li .filter .select:nth-child(4) {width: 31%;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
    .stamp-field {display: block;}
    .stamp-total,
    .stamp-list {width: 100%;}
    .stamp-total {margin-bottom: 40px;}
    .stamp-total:before {display: none;}
    .stamp-total span {width: 100%;}

    .stamp-list ul li strong {width: 130px;}
    .stamp-list ul li .filter {padding-left: 150px;}
  }
  @media (max-width: 900px) {
    .stamp-field {padding: 0 0 15px;}
    .stamp-total {margin-bottom: 20px;}
    .stamp-total span {padding: 15px 10px; font-size: 15px;}
    .stamp-total .em {font-size: 16px;}
    .stamp-list ul li {padding-left: 50px;}
    .stamp-list ul li:before {top: 2px; width: 36px; height: 36px; background-size: 36px auto;}
    .stamp-list ul li strong {position: relative; left: 0; padding: 9.5px 10px; margin-bottom: 10px; width: 100%; font-size: 16px;}
    .stamp-list ul li .filter {padding-left: 0;}
    .stamp-list ul li .filter .select,
    .stamp-list ul li .filter .select:nth-child(4) {margin-left: 0; width: 100%;}
  }


/* mypage */

  .mypage {}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) {
    .mypage .control-field .column {display: block;}
    .mypage .control-tab {max-width: 100%; height: 21px; overflow: hidden;}
    .mypage .control-tab ul {max-width: 100%; overflow: hidden; overflow-x: auto; box-sizing: border-box;}  
    .mypage .control-tab ul::-webkit-scrollbar {width: 0;}
    .mypage .control-tab ul::-webkit-scrollbar-thumb {height: 0; background: transparent; border-radius: 10px;}
    .mypage .control-tab ul::-webkit-scrollbar-track {background: transparent;}
  }


/* login */

.login-field {position: relative; min-height: 880px; box-sizing: border-box;}
.login-field a,
.login-field span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.login-field ul,
.login-field li,
.login-field ol {list-style: none;}
.login-field strong {display: block;}

.login-pack {position: absolute; top: 50%; left: 50%; margin-left: -400px; padding: 55px 200px; width: 800px; border: 2px solid #dddddd; border-radius: 20px; transform: translateY(-50%); box-sizing: border-box;}
.login-field h3 {margin-bottom: 10px; font-size: 40px; text-align: center;}
.login-field .txt {display: block; font-size: 22px; color: #8b8b8b; text-align: center;}

.login-field .link {margin-top: 20px;}
.login-field .link:after {display: block; content: ''; clear: both;}
.login-field .link a {font-size: 16px; color: #5c5b5b;}
.login-field .link a:last-child {float: right;}

.login-form {margin-top: 35px;}
.login-form .login-id,
.login-form .login-pw,
.login-form .login-btn {width: 100%;}
.login-form .login-id {}
.login-form .login-pw {margin-top: 10px;}
.login-form .login-btn {margin-top: 20px;}

.login-form label {}
.login-form input {padding: 10px 20px; width: 100%; height: 60px; font-size: 18px; background-color: #fff; border: 1px solid #cacaca; border-radius: 5px; box-sizing: border-box; outline: none; caret-color: #02b9f3;}
.login-form input::-webkit-input-placeholder {color: #cacaca}
.login-form input:-ms-input-placeholder {color: #cacaca}
.login-form input::placeholder {color: #cacaca}
.login-form input:focus {padding: 9px 19px; color: #02b9f3; border: 2px solid #02b9f3;}
.login-form .btn-login {padding: 10px 20px; width: 100%; height: 60px; font-size: 20px; color: #fff; background-color: #02b9f3; border-radius: 5px; box-sizing: border-box;}

  @media (min-width: 1600px) {
  }
  @media (max-width: 1280px) {
  }
  @media (max-width: 900px) {
    .login-field {padding: 90px 20px 200px; min-height: 0;}
    .login-pack {position: relative; top:0; left: 0; margin: 0; padding: 15px; width: 100%; border: none; border-radius: 0; transform: translateY(0);}
    .login-field h3 {font-size: 22px;}
    .login-field .txt {font-size: 15px;}
    
    .login-field .link a {font-size: 15px;}
    
    .login-form .login-btn {margin-top: 15px;}

    .login-form input {padding: 0 10px; height: 50px; font-size: 16px;}
    .login-form input:focus {padding: 0 9px;}
    .login-form .btn-login {height: 50px; font-size: 16px;}
  }






/* mobile font size */
  @media (max-width: 900px) {

    .container h3,
    .top-field .subject h3,
    .top-field .result h3,
    .top-field .result h3 strong,
    .top-field .result h3 .em {/*1.375rem*/font-size: 22px;}
    
    .article .wrap .title {/*1.25rem*/font-size: 20px;}

    .container h3.title-box,
    .container h4,
    .article .title,
    .course-view .article .title,
    .file-area .title,
    .slider-category-1 .article .title,
    .slider-category-2 .article .title,
    .time-stamp .title,
    .time-stamp .title strong,
    .course-list ul li a,
    .course-list ul li strong,
    .course-list ul li span:before,
    .stamp-total span,
    .control-field .total span,
    .table-detail .title,
    .control-area .btn-list,
    .login-form .btn-login {/*1.125rem*/font-size: 18px;}

    .container h5,
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span, 
    .time-stamp ul li span,
    .control-area .btn-prev,
    .control-area .btn-next,
    .course .control-area .btn-prev,
    .course .control-area .btn-next,    
    .course-list .depth2 ul li a,
    .course-list .depth2 ul li strong,
    .course-list .depth2 ul li span:before,
    .list-view ul li .title,
    .stamp-list ul li strong {/*1.0625rem*/font-size: 17px;}

    /** HAM 추가 **/
    .temp_notice { max-width: inherit !important;text-overflow:unset !important;white-space: unset !important;}


    .top-field .subject span,
    /* .cont p,
    .cont-area p, */
    .file-area .i-download span,    
    .tag-area .tag,
    .control-tab ul li a,
    .page-tab ul li a,    
    .course-list .depth4 ul li a,
    .course-list .depth4 ul li strong,
    .course-list .depth4 ul li span:before,
    .table-detail .info > span,
    .login-field .txt,
    .login-field .link a,
    .custom-select .select-selected,
    .custom-select .select-items div {/*1rem*/font-size: 16px;}

    .main-notice .notice-list ul li .date,
    .article .depth,
    .article .state span,
    .meta > span,
    .breadcrumb a,
    .breadcrumb a:before,
    .list-view ul li .info > span {/*0.9375rem*/font-size: 15px;}
    
    .main-notice .notice-list ul li .em,
    .list-view ul li .em,
    .table-detail .em {/*0.8750rem*/font-size: 14px;}
  
  }



/* 230224 */

/* course list */

.course-list ul li a {z-index: 2;}

.course-list ul li:before,
.course-list ul li:after {display: none;}

.course-list .btn-open {display: none; position: absolute; top: 0; right: 0; width: 100px; height: 100px; box-sizing: border-box; z-index: 3;}
.course-list > ul > li.add-btn > .btn-open,
.course-list .depth2 > ul > li.add-btn > .btn-open,
.course-list .depth3 > ul > li.add-btn > .btn-open {display: block;}

.course-list .btn-open:before,
.course-list .btn-open:after {display: block; content: ''; position: absolute; top: 41px; left: 50%; margin-left: -16px; width: 26px; height: 3px; background-color: #242424; transition: all 0.4s; box-sizing: border-box; z-index: 1;}
.course-list .btn-open:before {transform: translateY(8px) rotate(180deg);}
.course-list .btn-open:after {transform: translateY(8px) rotate(90deg);}
.course-list ul li.active > .btn-open:before,
.course-list ul li.active > .btn-open:after {background-color: #00b6f0;}
.course-list ul li.active > .btn-open:before {transform: translateY(8px) rotate(180deg);}
.course-list ul li.active > .btn-open:after {transform: translateY(8px) rotate(180deg);}

.course-list .depth2 .btn-open {height: 70px;}
.course-list .depth2 .btn-open:before,
.course-list .depth2 .btn-open:after {top: 26px; margin-left: -16px; width: 18px; background-color: #8b8b8b;}

.course-list .depth3 .btn-open {width: 80px; height: 60px;}
.course-list .depth3 .btn-open:before,
.course-list .depth3 .btn-open:after {top: 21px;}

.course-list .depth4 > ul > li:before {display: block; content: ''; position: absolute; top: 6px; left: 20px; margin: 0; width: 12px; height: 12px; background-color: #fff; border: 3px solid #cacaca; border-radius: 50%; box-sizing: border-box;}

.course-list ul li a:before,
.course-list .depth4 ul li a:before {display: block; content: ''; position: absolute; top: 38px; left: 100%; margin-left: -53px; width: 15px; height: 25px; background: transparent url(../images/i-course-arrow.png) center center no-repeat; transform: none; background-size: 100% auto;}
.course-list ul li.add-btn > a:before {display: none;}

.course-list .depth2 ul li a:before {top: 22px; margin-left: -57px; width: 12px;}
.course-list .depth3 ul li a:before {top: 18px; margin-left: -47px;}
.course-list .depth4 ul li a:before {top: 8px; margin-left: -10px; width: 10px; background-color: transparent; border: none; border-radius: 0;}

  @media (max-width: 1280px){
    .course-list > ul > li > .btn-open {height: 80px;}
    .course-list > ul > li > .btn-open:before,
    .course-list > ul > li > .btn-open:after {top: 31px;}
    .course-list > ul > li > a:before {top: 28px;}
  }
  @media (max-width: 900px) {
    .course-list .btn-open {width: 60px; height: 60px;}
    .course-list .btn-open:before,
    .course-list .btn-open:after {top: 21px; margin-left: -6px; width: 16px; height: 2px;}

    .course-list .depth2 .btn-open {width: 50px; height: 50px;}
    .course-list .depth2 .btn-open:before,
    .course-list .depth2 .btn-open:after {top: 17px; margin-left: -7px; width: 12px;}

    .course-list .depth3 .btn-open {height: 50px;}
    .course-list .depth3 .btn-open:before,
    .course-list .depth3 .btn-open:after {top: 17px; margin-left: -2px; width: 12px;}

    .course-list .depth4 > ul > li:before {left: -5px;}

    .course-list ul li a:before {top: 18px; margin-left: -28px; width: 10px;}
    .course-list .depth2 ul li a:before {top: 13px; margin-left: -27px; width: 8px;}
    .course-list .depth3 ul li a:before {margin-left: -23px;}
    .course-list .depth4 ul li a:before {top: 8px; margin-left: -7px; width: 7px;}


  }



/* mypage */

.stamp-list ul li {height: 50px;}

  @media (max-width: 900px) {

    .stamp-list ul li {height: auto;}

  }




/* 230224 - introduce */

.introduce {margin: 0 auto; padding: 0 15px 40px; width: 1190px; max-width: 100%; box-sizing: border-box; text-align: center;}

.introduce .cont-ceo {display: flex; position: relative; margin-bottom: 80px; align-items: center; justify-content: space-between;}
.introduce .ceo-talk {text-align: left;}
.introduce .ceo-talk .strong {display: flex; position: relative; margin-bottom: 30px;}
.introduce .ceo-talk .strong strong {line-height: 1.4; font-size: 48px; color: #464646; font-weight: bold; text-align: left;}
.introduce .ceo-talk .strong .mark-start {margin-right: 10px;}
.introduce .ceo-talk .strong .mark-end {margin-left: 10px; transform: rotate(180deg); align-self: flex-end;}
.introduce .ceo-talk .strong .mark {width: 60px; height: 46px;}
.introduce .ceo-talk p {margin-left: 70px; line-height: 1.4; font-size: 18px; color: #6e6e6e;}
.introduce .ceo-img {width: 30%; max-width: 100%;}

.introduce .cont-subject {position: relative; margin-bottom: 60px;}
.introduce .cont-video + .cont-subject,
.introduce .cont-img + .cont-subject {margin-top: 120px;}

.introduce .cont-subject a,
.introduce .cont-subject span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.introduce .cont-subject ul,
.introduce .cont-subject li,
.introduce .cont-subject ol {list-style: none;}
.introduce .cont-subject strong {display: block;}
.introduce .cont-subject h4,
.introduce .cont-subject h4 strong {font-size: 36px;}
.introduce .cont-subject h4 {margin-bottom: 15px;}
.introduce .cont-subject strong {font-weight: bold;}
.introduce .cont-subject p,
.introduce .cont-subject p strong,
.introduce .cont-subject span,
.introduce .cont-subject span strong {font-size: 18px;}
.introduce .cont-subject p {color: #6e6e6e;}
.introduce .cont-subject span {margin-bottom: 5px; color: #555;}
.introduce .cont-subject .em {color: #02b9f3;}

.introduce .cont-text {position: relative; text-align: left;}
.introduce .cont-video + .cont-text {margin-top: 80px;}
.introduce .cont-img + .cont-text {margin-top: 40px;}
.introduce .cont-text .block {display: block;}
.introduce .cont-text p,
.introduce .cont-text strong {line-height: 1.4; font-size: 18px;}
.introduce .cont-text p {color: #6e6e6e;}
.introduce .cont-text p + p {margin-top: 40px;}
.introduce .cont-text .block + p,
.introduce .cont-text p + .block {margin-top: 10px;}
.introduce .cont-text strong {font-weight: bold;}
.introduce .cont-text .em-round {display: inline-block; margin: 10px 0; padding: 10px 20px; color: #fff; background-color: #02b9f3; border-radius: 50px;}

.introduce .cont-video {position: relative; margin: 0 auto; width: 880px; max-width: 100%;}

.introduce .cont-img {position: relative;}
.introduce .cont-img + .cont-img {margin-top: 60px;}
.introduce .cont-text + .cont-img {margin-top: 40px;}

.introduce .cont-btn {margin-top: 40px;}
.introduce .cont-btn a,
.introduce .cont-btn span {display: inline-block; font-size: inherit; font-weight: inherit; vertical-align: top;}
.introduce .cont-btn ul,
.introduce .cont-btn li,
.introduce .cont-btn ol {list-style: none;}
.introduce .cont-btn strong {display: block;}
.introduce .cont-btn .round {padding: 15px; width: 150px; line-height: 21px; font-size: 18px; color: #02b9f3; font-weight: 500; border: 1px solid #02b9f3; border-radius: 50px; box-sizing: border-box;}

  @media (max-width: 900px) {

    .introduce {padding: 0 0 15px;}
    .introduce .cont-ceo {display: block;}
    .introduce .ceo-talk {text-align: center;}
    .introduce .ceo-talk .strong {margin: 0 auto 20px; justify-content: center;}
    .introduce .ceo-talk .strong strong {font-size: 22px;}
    .introduce .ceo-talk .strong .mark-start,
    .introduce .ceo-talk .strong .mark-end {width: 32px; height: 24px;}
    .introduce .ceo-talk .strong .mark {width: 32px; height: 24px;}
    .introduce .ceo-talk p {margin-left: 0; font-size: 16px;}
    .introduce .ceo-img {margin: 15px auto 0; width: 560px;}

    .introduce .cont-subject {margin-bottom: 30px;}
    .introduce .cont-video + .cont-subject,
    .introduce .cont-img + .cont-subject {margin-top: 60px;}
    .introduce .cont-subject h4,
    .introduce .cont-subject h4 strong {font-size: 22px;}
    .introduce .cont-subject h4 {margin-bottom: 10px;}
    .introduce .cont-subject p,
    .introduce .cont-subject p strong,
    .introduce .cont-subject span,
    .introduce .cont-subject span strong  {font-size: 16px;}

    .introduce .cont-video + .cont-text {margin-top: 40px;}
    .introduce .cont-text p,
    .introduce .cont-text strong {font-size: 16px;}
    .introduce .cont-text p + p {margin-top: 20px;}

    .introduce .cont-btn {margin-top: 20px;}
    .introduce .cont-btn .round {padding: 10px; width: 120px; font-size: 16px;}

  }



/* 230227 

.cont.course_intro * {display: inherit; line-height: 1.4; font-size: 22px; color: #555;}
.cont.course_intro strong {display: inline; font-weight: bold;}
.cont.course_intro ul {margin-left: 25px; list-style: inherit;}
.cont.course_intro ul li {display: list-item; list-style: inherit;}

  @media (max-width: 900px) {
    .cont.course_intro * {font-size: 16px}
    .cont.course_intro ul {margin-left: 10px; padding: 0 10px;}
    .cont.course_intro ul li p {padding: 0;}
  }
*/


/* 230228 */

.article .depth {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/*.cont-area {line-height: 1.6; font-size: 20px; color: #555;}

  @media (max-width: 900px) {
    .cont-area {font-size: 16px;}
  }
.cont-area,
.cont-area p,
.cont-area li {line-height: 1.6; font-size: 20px; color: #555;}
.cont-area p span,
.cont-area p strong,
.cont-area ul li span,
.cont-area ul li strong {display: inline;}
.cont-area ul {margin-left: 25px; list-style: inherit;}
.cont-area ul li {display: list-item; list-style: inherit;}

  @media (max-width: 900px) {
    .cont-area,
    .cont-area p,
    .cont-area li {font-size: 16px}
    .cont-area ul {margin-left: 20px;}
  }
*/

.vjs-fixed h3 {margin: 0; font-size: inherit; font-weight: inherit;}

/** hyeon 수정 **/
.notice-list .slick-track {margin-left: auto; margin-right: auto;}

/** hyeon 수정 **/
  @media (max-width: 900px) {
    .data-notice-none {display: none;}
  }

/** hyeon 수정 **/
  @media (max-width: 900px) {
    .category-2-abc-new-lessons {margin: 0; padding: 0px 0; border: none;}
    .main-notice .notice-list ul li .title {max-width: 73%;}
  }

/** Ham 수정 **/
.nothing_prev:before {background-image: none !important;}
.nothing_next:after {background-image: none !important;}

/* 230302 */

  @media (max-width: 900px) {
    .header-menu.open .menu-list .list > li:before,
    .header-menu.open .menu-list .list > li:after,
    .header-menu.open .menu-list .list > li:last-child:after {display: none;}
    .header-menu.open .menu-list .list > li.add-btn:before,
    .header-menu.open .menu-list .list > li.add-btn:after,
    .header-menu.open .menu-list .list > li.add-btn:last-child:after {display: block;}
  }


/* 230302 - 2 */

.page-tab ul li {position: relative;}
.page-tab ul li:before {display: block; content: ""; position: absolute; top: 50%; left: -1px; margin-top: -11px; width: 2px; height: 22px; background-color: #cacaca;}
.page-tab ul li.active:before,
.page-tab ul li.active + li:before,
.page-tab ul li:first-child:before {display: none;}

.page-tab + .introduce {margin-top: 70px;}

  @media (max-width: 900px) {
    .page-tab + .introduce {margin-top: 0;}
  }



/*.table-detail tbody td * {font-size: inherit;font-weight: inherit;}*/
/*.table-detail tbody td strong {display: inline; font-weight: bold;}*/
/*.table-detail tbody td ul,*/
/*.table-detail tbody td li {list-style: square inside;}*/
/*.table-detail tbody td img {max-width: 100%;}*/
/*.table-detail tbody td ::marker {font-size: 16px;}*/
/*.table-detail tbody td span {display: inline; vertical-align: baseline;}*/


/* 230302 - 3 */

.course-list ul li strong {max-width: 95%;}
.course-list ul li strong span {display: inline;}

  @media (max-width: 900px) {
    .course-list ul li strong {max-width: 90%;}
    .course-list > ul > li > .btn-open {height: 60px;}
    .course-list > ul > li > .btn-open:before,
    .course-list > ul > li > .btn-open:after {top: 21px}
  }




/* 230314 */

/* .cont.course_intro {line-height: 1.4; font-size: 22px; color: #555;} */
.cont.course_intro .inline {display: inline; margin-left: 20px;}
.cont.course_intro .block {display: block !important; margin: 10px 0;}
.cont.course_intro .flex {display: flex !important; margin: 60px 0 30px; align-items: center;}
.cont.course_intro ul li {margin-top: 20px;}
.cont.course_intro ul li:first-child {margin-top: 0 !important;}
.cont.course_intro ul.circle,
.cont.course_intro ul.circle > li,
.cont.course_intro ul.check,
.cont.course_intro ul.check > li {display: block; margin-left: 0; list-style: none; line-height: 1.4; font-size: 22px;}
.cont.course_intro ul.circle > li,
.cont.course_intro ul.check > li {position: relative; padding-left: 43px;}

.cont.course_intro ul.circle > li:before,
.cont.course_intro ul.check > li:before {display: block; content: ''; position: absolute; top: 10px; left: 6px; width: 11px; height: 11px; background-color: #242424; border-radius: 50%;}

.cont.course_intro ul.check > li:before {top: 8px; left: 0; width: 22px; height: 16px; background: transparent url(../images/i-check.png) center center no-repeat; border-radius: 0;}

.cont.course_intro .em {color: #00b6f0;}
.cont.course_intro .em-round {display: inline-block; padding: 10px 30px; font-size: 24px; color: #fff; background-color: #00b6f0; border-radius: 50px; box-sizing: border-box;}

.cont.course_intro .link {position: relative;}
.cont.course_intro .link.block {margin-bottom: 40px;}
.cont.course_intro .link a {display: inline-block; position: relative; vertical-align: top;}
.cont.course_intro .link a:after {display: inline-block; content: ''; margin: 0 0 -1px 15px; width: 21px; height: 19px; background: transparent url(../images/i-link.png) center center no-repeat; vertical-align: baseline;}
.cont.course_intro .link a strong {padding-bottom: 5px; color: #00b6f0; border-bottom: 1px solid #00b6f0;}

.cont.course_intro .em-round + .link,
.cont.course_intro .em-round + .link * {font-size: 24px;}
.cont.course_intro .em-round + .link {margin-left: 20px; color: #8b8b8b;}

.cont.course_intro .refer,
.cont.course_intro .refer:before,
.cont.course_intro .refer * {font-size: 20px;}
.cont.course_intro .refer {display: inline-block; position: relative; margin-top: 20px; padding-left: 23px; vertical-align: top;}
.cont.course_intro .refer + .refer {margin-top: 5px;}
.cont.course_intro .refer:before {display: block; content: '※'; position: absolute; top: 0; left: 0; }

.cont.course_intro .refer .link,
.cont.course_intro .refer .link * {font-size: 22px;}

.cont.course_intro ul.check-list li {margin-top: 50px;}
.cont.course_intro ul.check-list li > strong:first-child {display: inline-block; margin-bottom: 15px; vertical-align: top;}
.cont.course_intro ul.check-list li > strong + .inline,
.cont.course_intro ul.check-list li > strong + .inline * {font-size: 20px;}

  @media (max-width: 900px) {
    /*.cont.course_intro {padding: 15px 10px; font-size: 16px;}*/
    .cont.course_intro .flex {display: block !important; margin: 30px 0 15px;}
    .cont.course_intro ul.circle,
    .cont.course_intro ul.circle li,
    .cont.course_intro ul.check,
    .cont.course_intro ul.check li {font-size: 16px;}
    .cont.course_intro ul.circle li,
    .cont.course_intro ul.check li {margin-top: 10px; padding-left: 23px;}
    .cont.course_intro ul.circle li:before {top: 9px; left: 4px; width: 7px; height: 7px;}
    .cont.course_intro ul.check li:before {top: 4px; width: 12px; background-size: 100% auto;}

    .cont.course_intro .em-round,
    .cont.course_intro .em-round + .link,
    .cont.course_intro .em-round + .link * {font-size: 17px;}
    .cont.course_intro .em-round {padding: 8px 20px;}
    .cont.course_intro .em-round + .link {display: block; margin: 15px 0 0 0;}

    .cont.course_intro .link.block {margin-bottom: 20px;}
    .cont.course_intro .link a:after {margin: 0 0 -2px 10px; width: 12px; background-size: 100% auto;}
    .cont.course_intro .link a strong {padding-bottom: 2px;}

    .cont.course_intro .refer,
    .cont.course_intro .refer:before,
    .cont.course_intro .refer * {font-size: 15px;}

    .cont.course_intro .refer .link,
    .cont.course_intro .refer .link * {font-size: 16px;}

    .cont.course_intro ul li > strong:first-child + .inline {display: block !important; margin-left: 0;}
    .cont.course_intro ul li > strong:first-child + .inline,
    .cont.course_intro ul li > strong:first-child + .inline * {font-size: 15px;}

    .cont.course_intro ul.check-list li {margin-top: 25px;}
  }




/* 230315 */
/* resolution */

.article .play {display: none;}
.meta .running-time {padding-left: 23px; width: 68px; border-radius: 50px; box-sizing: border-box; text-align: left;}
.meta .running-time:before {display: block !important; content: ''; position: absolute; top: 0; left: 10px; margin-top: 0; width: 8px; height: 100%; background: url(../images/i-play-2.png) center center no-repeat; background-size: 100% auto;}
.article .depth {margin-bottom: 0;}
.article .depth + .title {margin-top: 15px;}

.container {background-color: #eceef2;}
.main-contents,
.top-field,
.login-field {background-color: #fff;}

  @media (min-width: 901px){

    body {position: relative;}
    html,
    body,
    .page-wrap {height: 100%; min-height: 100%;}

    .header {height: 177px;}
    .container {position: relative; margin: -177px 0 -200px; padding: 177px 0 200px; min-height: 100%; box-sizing: border-box;}

    .footer {height: 200px; box-sizing: border-box;}

    .header-util,
    .main-notice .notice-list,
    .main-visual .slider-control .inner,
    .footer .inner,
    .top-field .inner,
    .list-field,
    .detail-field {padding: 0 16px; width: 1552px; max-width: 100%;}
    .header-menu .menu-list {padding-right: 147px; width: 1552px; max-width: 100%;}

    .header .logo {line-height: 115px;}
    .header .logo a {width: 150px; height: 64px;}

    .header .menu {top: 15px; right: 13px; padding: 5px 3px; width: 30px; height: 30px;}
    .header .i-menu {width: 24px; height: 20px;}
    .header .i-menu i {width: 24px; height: 2px;}

    .header-util .column > a {width: 30px; height: 30px; background-size: 100% auto;}
    .header-util .column > a.gsmc {width: 88px;}
    .header-util .column > a.chatomy {width: 148px;}

    .header-util .column:first-child > a {margin-right: 50px;}
    .header-util .column:last-child > a {margin-left: 50px;}

    .header-menu .menu-list .list > li > a {line-height: 60px; font-size: 22px;}
    .header-menu .menu-list .list > li:first-child > a,
    .header-menu .menu-list .list > li:first-child .depth {padding-left: 16px;}

    .header-menu.open:before {top: 60px;}
    .header-menu.open .menu-list .list > li:first-child:before {display: none;}
    .header-menu.open .menu-list .list .depth ul li > a {font-size: 18px;}
    .header-menu.open .menu-list .list .depth ul li > a:hover {color: #00b6f0; font-weight: 400;}

    .header.fix .header-menu .menu-list .list > li > a {font-size: 20px;}

    .btn-top {width: 60px; height: 60px;}

    .footer {padding: 70px 0;}
    .footer .logo {margin-top: -33.5px;}
    .footer .logo a {width: 155px; height: 67px;}
    .footer .inner ul li a {font-size: 18px;}
    .footer .inner .site {right: 16px;}
    .footer .copyright {margin-top: 20px;}

    .container {padding-top: 177px;}
    .container h3 {font-size: 32px; font-weight: 500;}

    .meta > span {font-size: 16px;}
    .article .title {font-size: 20px;}

    .main-visual .slider-list {padding-bottom: 26.05%;}
    .main-visual .slider-item .img span {background-position: center center;}

    .main-visual .slider-control {bottom: 18%;}

    .main-notice .notice-list {padding: 0;}
    .main-notice .notice-list ul {padding: 17px 0;}
    .main-notice .notice-list ul li {padding: 0 16px;}
    .main-notice .notice-list ul li .title,
    .main-notice .notice-list ul li span {padding-top: 6px; padding-bottom: 6px; font-size: 20px;}
    .main-notice .notice-list ul li .em {margin-right: 10px; width: 70px; font-size: 18px;}
    .main-notice .notice-list ul li .new {margin: 3px 10px;}

    .slider-category-1 .article .title {font-size: 26px;}
    .slider-category-2 .article .title {font-size: 20px;}

    .slider-category-2:after {display: block; content: ''; position: absolute; bottom: 0; left: 50%; width: calc(100% - 40px); height: 1px; background-color: #cacaca; transform: translateX(-50%);}


    .section:last-child {padding-bottom: 120px;}

    .breadcrumb,
    .top-field .subject {padding: 0;}

    /* .cont p {padding: 0;} */

    .list-field .control-field,
    .list-field .table-view,
    .list-field .pager {padding-left: 0; padding-right: 0;}

    .table-view thead th,
    .table-view tbody td,
    .table-view tbody .title {font-size: 20px;}
    .table-view thead th {padding: 17px 10px;}
    .table-view tbody td {padding: 20px 10px;}
    .table-view tbody .em {width: 70px; height: 36px; line-height: 36px; font-size: 18px;}
    .table-view tbody .i-file {width: 30px; background-size: 100% auto;}

    .detail-field {padding-top: 50px; padding-bottom: 45px;}

    .table-detail thead th {position: relative; padding-top: 30px; padding-bottom: 30px;}
    .table-detail .em {margin: 0 20px 0 0; width: 70px; height: 36px; line-height: 36px; font-size: 18px;}
    .table-detail .title {font-size: 26px;}
    .table-detail .i-new {margin: 2px 5px;}
    .table-detail .i-file {margin: 0 3px;}
    .table-detail .info {top: 27px;}
    .table-detail .info > span {font-size: 20px;}

    .file-area {padding-bottom: 20px;}

    .control-area .btn-prev,
    .control-area .btn-next,
    .control-area .btn-list {height: 50px; line-height: 30px;}
    .control-area .btn-prev,
    .control-area .btn-next {padding: 15px 0 5px;}
    .control-area .btn-list {width: 120px;}

    .login-pack {padding: 40px 198px;}
    .login-field {position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%;}
    .login-field h3 {font-size: 40px;}

    .header .i-notice.new:before {right: -2px; width: 17px; height: 17px;}

    .table-view tbody .em,
    .main-notice .notice-list ul li .em {border-radius: 5px;}
  }
  @media (min-width: 1280px){
    .header-util .column:first-child > a {margin-right: 80px;}
    .header-util .column:last-child > a {margin-left: 80px;}
  }
  @media (min-width: 901px) and (max-width: 1280px){
    .header-util .column > a.chatomy {width: 122px;}
  }
  @media (max-width: 900px){
    .section + .section {padding-top: 0;}
    .main-notice .notice-list ul li .title {max-width: 87%;}
    .main-notice .notice-list ul li .em + .title {max-width: 73%;}
    .main-notice .notice-list ul li .date {display: none;}
    .main-notice .notice-list ul li .new {margin-top: 5px; height: 18px;}

  }
  @media (min-width: 901px){
    .search {top: 116px;}
  }

/*2023-03-15 추가 1*/
  @media (max-width: 900px) {
    .article .wrap {display: flex; height: 65px;}
  }

/*2023-03-15 추가 2*/
.control-area {border-top: 0;}
.file-area + .control-area {border-top: 2px solid #dddddd}
  @media (max-width: 900px) {
    .file-area + .control-area {border-top-width: 1px;}
  }

/*2023-03-15 추가 3*/
  @media (min-width: 901px){
    .main-notice .notice-list ul li .title {max-width: 72%;}
    .main-notice .notice-list ul li .em + .title {max-width: 61%;}
  }

  @media (min-width: 901px) and (max-width: 1280px){
    .main-notice .notice-list ul li .title {max-width: 68%;}
    .main-notice .notice-list ul li .em + .title {max-width: 53%;}
  }

/*hyeon 2023-03-16 추가 1 (동영상 버튼 이슈)*/
button {color: inherit}
.vjs-fixed h3 {margin: 0; font-size: inherit; font-weight: inherit;}


.page-wrap {height: auto;}
  @media (min-width: 901px){
    .login-field {position: relative; min-height: calc(100vh - 377px);}
  }
.video_z_index{z-index: 9999;}

/* 230320 */
  @media (min-width: 901px){
    .slider-category-2:after {display: none;} .section:last-child .slider-category-2:after {display: block;}
  }

/* 230321 */
.main-visual .slider-all-visual .slider-all-list {margin: 0 -20px; padding: 0 20px; overflow: hidden; overflow-y: auto;}
  @media (min-width: 901px){
    .main-visual .slider-all-visual .slider-all-list {max-height: calc(100vh - 186px);}
  }
  @media (max-width: 900px){
    .main-visual .slider-all-visual .slider-all-list {max-height: calc(100vh - 300px);}
  }
  
/* 230403 */
.page-tab + .curriculum {margin-top: 150px;}
.curriculum .cont-subject + .cont-subject {margin-top: 85px}
.curriculum .cont-table + .cont-subject {margin-top: 100px}
.curriculum .cont-subject {margin-bottom: 40px;}
.curriculum .cont-subject h4,
.curriculum .cont-subject h4 strong {font-size: 38px;}
.curriculum .cont-subject h4 .em-round {margin: 0 auto 40px; padding: 23px; width: 500px; max-width: 100%; line-height: 24px; font-size: 28px; color: #fff; background-color: #02b9f3; border-radius: 50px; box-sizing: border-box;}
.curriculum .cont-subject p {color: #555;}
.curriculum .cont-subject p,
.curriculum .cont-subject p strong {font-size: 24px;}
.curriculum .cont-subject p strong {display: inline;}
.curriculum .cont-subject p.i-check {position: relative;}
.curriculum .cont-subject p.i-check:before {display: inline-block; content: ''; margin: 2px 20px 0 0;width: 23px; height: 17px; background: url(../images/i-check-color.png) center center no-repeat; background-size: 100% auto; vertical-align: baseline;}

.curriculum .cont-table * {position: relative; box-sizing: border-box;}
.curriculum .cont-table {}
.curriculum .cont-table .table {border: 1px solid #cacaca;}
.curriculum .cont-table .head {}
.curriculum .cont-table .head .tr {background-color: #f3fcff; border-bottom: 1px solid #cacaca;}
.curriculum .cont-table .head .th {display: flex; padding: 20px 30px; height: 80px; font-size: 26px; color: #555; font-weight: bold; align-items: center; justify-content: center;}
.curriculum .cont-table .body {}
.curriculum .cont-table .body .tr {border-bottom: 1px solid #cacaca;}
.curriculum .cont-table .body .tr:last-child {border-bottom: none;}
.curriculum .cont-table .body .th,
.curriculum .cont-table .body .td {display: flex; padding: 20px 30px; font-size: 22px; color: #555; align-items: center;}
.curriculum .cont-table .body .th {position: absolute; top: 0; left: 0; width: 28.98%; height: 100%; font-weight: 500; background-color: #fff1f1; justify-content: center;}
.curriculum .cont-table .body .td {padding-right: 20px; text-align: left; background-color: #fff; justify-content: space-between;}
.curriculum .cont-table .body .td + .td {border-top: 1px solid #cacaca;}

.curriculum .cont-table .body .th.rowspan3 {line-height: 1.8;}

.curriculum .cont-table .body .td span {flex: 1; margin-right: 20px;}

.curriculum .cont-table .body .shortcut {font-size: 20px; color: #02b9f3; font-weight: 500;}
.curriculum .cont-table .body .i-link {position: relative; padding-right: 30px;}
.curriculum .cont-table .body .i-link:after {display: block; content: ""; position: absolute; top: 50%; right: 0; width: 17px; height: 15px; background: url(../images/i-link.png) center center no-repeat; background-size: 100% auto; transform: translateY(-50%);}


.curriculum .cont-note {margin: 80px 0 35px; padding: 60px 40px; background-color: #f3f3f3; text-align: left; box-sizing: border-box;}
.curriculum .cont-note p {margin-top: 25px; font-size: 22px; color: #555;}
.curriculum .cont-note p:first-child {margin-top: 0;}
.curriculum .cont-note p strong {display: inline; font-weight: bold;}

.curriculum .cont-note .refer {position: relative; padding-left: 25px;}
.curriculum .cont-note .refer:before {display: block; content: '※'; position: absolute; top: 0; left: 0; }


  @media (min-width: 1281px) {
    .curriculum .cont-table {display: flex;}
    .curriculum .cont-table .table {width: 58.44%;}
    .curriculum .cont-table .table:last-child {margin-left: -1px; width: 41.56%;}
    .curriculum .cont-table .table:first-child .head .tr {padding-left: 28.98%;}
    .curriculum .cont-table .table:first-child .head .th {border-left: 1px solid #cacaca;}
    .curriculum .cont-table .table:first-child .body .tr {padding-left: 28.98%;}
    .curriculum .cont-table .table:first-child .body .td {border-left: 1px solid #cacaca;}

    .curriculum .cont-table .table:last-child .body .tr .th {display: none;}

    .curriculum .cont-table .table:first-child .body .colspan2 {width: 105%; z-index: 1;}
    .curriculum .cont-table .table:first-child .body .colspan2.full {width: 175%;}
    .curriculum .cont-table .table:first-child .body .colspan2 .shortcut {display: none;}
    .curriculum .cont-table .table:last-child .body .colspan2 span {font-size: 0;}

    .curriculum .cont-table .body .th,
    .curriculum .cont-table .body .td {line-height: 24px; height: 100px;}

    .curriculum .cont-table .body .rowspan2,
    .curriculum .cont-table .body .rowspan2-pc {height: 160px;}
    .curriculum .cont-table .body .rowspan3,
    .curriculum .cont-table .body .rowspan3-pc {height: 240px;}

    .curriculum .cont-table .body .rowspan2 ~ .td {height: 80px;}
    .curriculum .cont-table .body .rowspan3 ~ .td {height: 80px;}
    .curriculum .cont-table .body .rowspan3 ~ .td.half {height: 120px;}

  }

  @media (max-width: 1280px) {
    .curriculum .cont-table .table {margin-top: 40px;}
    .curriculum .cont-table .table:first-child {margin-top: 0;}

    .curriculum .cont-table .body .tr {padding-left: 24.8%;}
    .curriculum .cont-table .body .th {width: 24.8%;}
    .curriculum .cont-table .body .td {min-height: 100px; border-left: 1px solid #cacaca;}

  }

  @media (max-width: 900px) {
    .page-tab + .curriculum {margin-top: 45px;}
    .curriculum .cont-subject + .cont-subject {margin: 30px 0;}
    .curriculum .cont-table + .cont-subject {margin: 60px 0 30px;}
    .curriculum .cont-subject h4,
    .curriculum .cont-subject h4 strong {font-size: 22px;}
    .curriculum .cont-subject p,
    .curriculum .cont-subject p strong {font-size: 16px;}
    .curriculum .cont-subject p.i-check:before {margin: 0 5px -2px 0; width: 15px;}
    .curriculum .cont-subject h4 .em-round {margin-bottom: 25px; padding: 13px 20px; width: 300px; font-size: 20px;}

    .curriculum .cont-table .table {margin-top: 40px;}
    .curriculum .cont-table .table:first-child {margin-top: 0;}

    .curriculum .cont-table .head .th {padding: 15px 10px; height: 50px; font-size: 17px;}
    .curriculum .cont-table .body .th.rowspan3 {line-height: 1.4;}

    .curriculum .cont-table .body .th,
    .curriculum .cont-table .body .td {padding: 15px 10px; font-size: 16px;}
    .curriculum .cont-table .body .tr {padding-left: 24.8%;}
    .curriculum .cont-table .body .th {width: 24.8%;}
    .curriculum .cont-table .body .td {min-height: 70px; border-left: 1px solid #cacaca;}

    .curriculum .cont-table .body .td span {margin-right: 10px;}

    .curriculum .cont-table .body .shortcut {font-size: 14px}
    .curriculum .cont-table .body .i-link {padding-right: 20px;}
    .curriculum .cont-table .body .i-link:after {width: 12px;}

    .curriculum .cont-note {margin: 40px 0 25px; padding: 25px 10px;}
    .curriculum .cont-note p {font-size: 16px;}

  }

  @media (max-width: 900px){
    .main-visual .slider-all-visual .slider-all-list {max-height: calc(100vh - 208px);}
  }

/*hyeon 230519 > page-tab > li가 active가 활성화일 경우 pointer-events를 none으로 변경*/
.page-tab ul li.active a {color: #fff; background-color: #00b6f0; pointer-events: none;}

/*230519 (login-page pc) 스크롤 생기도록 수정*/
  @media (min-width: 901px) {
    .container {min-height: 100vh;}
    .login-field {display: flex; padding: 50px 0; align-items: center; justify-content: center;}
    .login-pack {position: relative; top: 0; left: 0; margin-left: 0; transform: translateY(0);}
  }

/*hyeon 20230526 과정 부제 없을 경우는 - 제거*/
.course-list ul li span:before {display: inline-block; content: ''; margin: 0 5px; font-size: 24px; color: #242424;}

.table-detail table table {max-width: 100%;}
.table-detail table table td {padding: 20px;}

/*hyeon 20230619 검색창 글자 길이 조정*/
.container h3 strong {word-break: break-all;}
.search-list span {word-break: break-all;}

/*hojae 20230627 8월 추천 커리큘럼 */
.curriculum-title {width: 70%; margin: 0 auto;}

/*hyeon 20230629 모바일 배너 box > top 40px 추가 */
/*hyeon 20230629 모바일 검색창 겹침 수정 */
/*hyeon 20230630 모바일 검색창, 배너 팝업 > 겹침 수정 */
  @media (max-width: 900px){
    .header {z-index: 1007;}
    .main-visual .slider-all-visual .box {top: 20px;}
    .search.search-write, .header.fix ~ .search.search-write {top: 56px;}
    .main-visual .slider-all-visual .slider-all-list {max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px);}
  }
/* 230804
.cont.course_intro div {display: block;}
.cont.course_intro table {display: table; max-width: 100% !important;}
.cont.course_intro tbody {display: table-row-group;}
.cont.course_intro tr {display: table-row;}
.cont.course_intro td {display: table-cell; border-left: 1px solid #d3d3d3; border-top: 1px solid #d3d3d3}
.cont.course_intro td:last-child {border-right: 1px solid #d3d3d3}
.cont.course_intro tr:last-child td {border-bottom: 1px solid #d3d3d3} */




/* 230811 */
.container h4 {margin-bottom: 25px; line-height: 1.2; font-size: 28px; color: #242424; font-weight: 500;}
.container h5 {margin-bottom: 20px; line-height: 1.2; font-size: 26px; color: #242424; font-weight: 500;}

.cont.course_intro h4,
.cont.course_intro h5 {color: #555;}

.cont.course_intro .gray {color: #8b8b8b;}

.cont.course_intro ul.none {list-style: none;}
.cont.course_intro ul.none li {margin-top: 15px;}

.cont.course_intro ul.check > li.color:before {background-image: url(../images/i-check-color.png);}

.cont.course_intro .table-wrap {margin-top: 35px;}
.cont.course_intro .table-wrap + .table-wrap {margin-top: 55px;}
.cont.course_intro .table-wrap h5 {position: relative;}
.cont.course_intro .table-wrap h5:before {display: inline-block; content: ''; margin-top: -5px; margin-right: 25px; width: 11px; height: 11px; background-color: #242424; border-radius: 50%; vertical-align: middle;}

.cont.course_intro .table thead {}
.cont.course_intro .table thead tr {}
.cont.course_intro .table thead th {padding: 20px 30px; line-height: 1.5; font-size: 26px; color: #555; font-weight: bold; text-align: center; background-color: #f3fcff; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca; border-top: 1px solid #cacaca;}
.cont.course_intro .table thead th:first-child {border-left: 1px solid #cacaca;}
.cont.course_intro .table tbody {}
.cont.course_intro .table tbody tr {}
.cont.course_intro .table tbody td {padding: 20px 30px; line-height: 1.6; border-bottom: 1px solid #cacaca; border-right: 1px solid #cacaca;}
.cont.course_intro .table tbody td:first-child {border-left: 1px solid #cacaca;}

.cont.course_intro .people-wrap {padding: 0 60px; background-color: #f6f6f6;}
.cont.course_intro .people-wrap > div {position: relative; padding: 80px 0; border-top: 2px solid #cacaca;}
.cont.course_intro .people-wrap > div:first-child {border-top: 0;}
.cont.course_intro .people-wrap * {position: relative; z-index: 2;}
.cont.course_intro .people-wrap .img {position: absolute; bottom: 0; right: 0; width: 43%; z-index: 1;}
.cont.course_intro .people-wrap .name {display: block; font-size: 40px;}
.cont.course_intro .people-wrap .name span {margin-left: 20px; font-size: 24px; font-weight: 500;}
.cont.course_intro .people-wrap p {margin-top: 30px; font-size: 26px; font-weight: 500;}
.cont.course_intro .people-wrap h5 {margin: 55px 0 15px;}
.cont.course_intro .people-wrap ul.none li {margin-top: 10px;}

.cont.course_intro .img-wrap {display: flex; position: relative; gap: 27px; flex-wrap: wrap;}
.cont.course_intro .img-wrap span {width: calc(100%/3 - 18px);}

.cont.course_intro .link-button {display: flex !important; margin-top: 15px;}
.cont.course_intro .link-button a {margin-left: 40px; padding: 10px 30px; border: 2px solid #00b6f0; border-radius: 30px; text-align: center;}
.cont.course_intro .link-button a:first-child {margin-left: 0 !important;}
.cont.course_intro .link-button a:after {width: 11px; background-image: url(../images/i-link-.png);}
.cont.course_intro .link-button a strong {padding: 0; border: 0;}

  @media (max-width: 900px) {
    .container h4 {margin-bottom: 15px; font-size: 18px;}
    .container h5 {margin-bottom: 15px; font-size: 17px;}
    
    .cont.course_intro .table-wrap {margin-top: 40px; margin-left: -23px;}
    .cont.course_intro .table-wrap + .table-wrap {margin-top: 40px;}
    .cont.course_intro .table thead th {padding: 15px 10px; font-size: 17px;}
    .cont.course_intro .table tbody td {padding: 20px 15px;}

    .cont.course_intro .table-wrap h5 {text-align: center;}
    .cont.course_intro .table-wrap h5:before {margin-top: -2px; margin-right: 10px; width: 7px; height: 7px;}

    .cont.course_intro .table + .table thead th {border-top: 0;}

    .cont.course_intro .people-wrap {padding: 0 10px;}
    .cont.course_intro .people-wrap > div {padding: 40px 0;}
    .cont.course_intro .people-wrap .img {position: relative; margin-bottom: 25px; width: 100%; text-align: center;}
    .cont.course_intro .people-wrap .name {font-size: 24px; text-align: center;}
    .cont.course_intro .people-wrap .name span {display: block; margin: 0; font-size: 16px;}
    .cont.course_intro .people-wrap p {font-size: 16px; text-align: center;}
    .cont.course_intro .people-wrap h5 {margin-top: 40px;}

    .cont.course_intro .img-wrap {gap: 10px}
    .cont.course_intro .img-wrap span {width: calc(100%/2 - 5px);}

    .cont.course_intro .link-button {flex-wrap: wrap; margin-left: -23px;}
    .cont.course_intro .link-button a {margin: 10px 0 0; padding: 10px 15px; width: 100%; border-width: 1px;}
    .cont.course_intro .link-button a:after {margin-bottom: -4px; width: 7px;}
  }



/* 20230814 */

.top-field .subject {position: relative;}
.top-field .subject .finish-label {position: absolute; top: -10px; left: -2px; width: 69px; height: 77px; background: url(../images/i-finish-label.png) center 0 no-repeat; background-size: 100% auto !important; z-index: 1;}
.top-field .subject .finish-label ~ h3,
.top-field .subject .finish-label ~ span {padding-left: 80px;}

.top-field .button-wrap {display: flex; position: absolute; bottom: -25px; right: 0;}
.top-field .button-wrap button {display: inline-block; margin-left: 10px; width: 50px; height: 50px; background-position: center center; background-repeat: no-repeat; background-size: 100% auto !important; border-radius: 50%;}
.top-field .button-wrap button:first-child {margin-left: 0;}
.top-field .button-wrap .dibs {background-image: url(../images/i-dibs.png);}
.top-field .button-wrap .dibs.on {background-image: url(../images/i-dibs-on.png);}
.top-field .button-wrap .url {background-image: url(../images/i-url.png);}
.top-field .button-wrap .url.on {background-image: url(../images/i-url-on.png);}
.top-field .button-wrap .kakao {background-image: url(../images/i-kakao.png);}
.top-field .button-wrap .kakao.on {background-image: url(../images/i-kakao-on.png);}

.article .state .sandglass {color: #fff; background-color: #b5b5b5; border-color: #b5b5b5;}
.article .state .sandglass:before {display: inline-block; content: ''; margin: 4px 5px 0 0; width: 14px; height: 18px; background: url(../images/i-sandglass.png) center center no-repeat; background-size: 100% auto !important; vertical-align: top;}

.article .state .text {display: flex; padding: 0; line-height: 1.2; height: 36px; border: 0; white-space: normal;align-items: center;}

.article .finish-label {position: absolute; top: -10px; right: 0; width: 69px; height: 77px; background: url(../images/i-finish-label.png) center 0 no-repeat; background-size: 100% auto !important; z-index: 1;}

.article .label-stamp {display: flex; position: absolute; top: -18px; right: 0;}
.article .label-stamp .finish-label,
.article .label-stamp .completed-stamp {position: relative; top: 0; right: 0;}

  @media (min-width: 1600px){
    .article .state .text {height: 38px;}
  }
  @media (max-width: 900px) {
    .top-field .subject .finish-label {position: relative; top: 0; left: 0; width: 56px; height: 66px;}
    .top-field .subject .finish-label ~ h3,
    .top-field .subject .finish-label ~ span {padding-left: 0;}

    .top-field .button-wrap {position: relative; bottom: 0; margin-top: 20px;}
    .top-field .button-wrap button {width: 40px; height: 40px;}

    .article .state .sandglass:before {margin-right: 3px; width: 10px;}

    .article .state .text {height: 26px;}

    .article .finish-label {width: 56px;}

    .article .label-stamp {top: -13px; right: -13px;}
  }



/* 20230816 */

.article .completed-stamp .number {position: absolute; bottom: 10px; right: 4px; padding: 0 7px; min-width: 20px; line-height: 20px; font-size: 12px; color: #fff; background-color: #e556a6; box-sizing: border-box; text-align: center; border-radius: 50px;}

.meta > span.text {}
.meta > span.em {color: #02b9f3;}

/* mypage2 */

.panel-board {display: flex; margin: 50px 0 30px; padding: 0 15px; gap: 0 40px; justify-content: center;}
.panel-board .panel {display: flex; align-items: end; justify-content: end; position: relative; padding: 35px 25px 25px 10px; width: 290px; height: 110px; background-color: #fff; border: 2px solid #e1e2e5; box-shadow: 3px 9px 17px 3px rgba(84, 108, 158, 0.1); border-radius: 15px; text-align: right; box-sizing: border-box;}
.panel-board .panel:before {display: block; content: ''; position: absolute; top: 13px; left: 13px; width: 78px; height: 68px; background-position: center 0; background-repeat: no-repeat; background-size: 100% auto !important;}
.panel-board .panel.all:before {background-image: url(../images/i-panel-board-all.png);}
.panel-board .panel.ing:before {background-image: url(../images/i-panel-board-ing.png);}
.panel-board .panel.complete:before {background-image: url(../images/i-panel-board-complete.png);}
.panel-board .panel.finish:before {background-image: url(../images/i-panel-board-finish.png);}
.panel-board .panel .text {position: relative; font-size: 20px; color: #242424; font-weight: 500; z-index: 1;}
.panel-board .panel .number {display: inline-block; position: relative; margin-left: 10px; line-height: 1; font-size: 44px; font-weight: 500; border-bottom: 2px solid #000; z-index: 1;}
.panel-board .panel.all .number {color: #00b6f0; border-bottom-color: #00b6f0;}
.panel-board .panel.ing .number {color: #e556a6; border-bottom-color: #e556a6;}
.panel-board .panel.complete .number {color: #00b6f0; border-bottom-color: #00b6f0;}
.panel-board .panel.finish .number {color: #f6c607; border-bottom-color: #f6c607;}

.gird-row-view {padding: 0 15px;}
.gird-row-view ul {display: flex; gap: 40px 0; padding: 50px 0; flex-wrap: wrap; list-style: none;}
.gird-row-view ul li {padding-bottom: 40px; width: 50%; border-bottom: 2px solid #ddd; box-sizing: border-box;}
.gird-row-view ul li:nth-child(odd) {padding-right: 20px;}
.gird-row-view ul li:nth-child(even) {padding-left: 20px;}
.gird-row-view .article {padding: 0;}
.gird-row-view .article > a {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.gird-row-view .article .img {width: 320px;}
.gird-row-view .article .content {padding: 0; width: calc(100% - 350px); box-sizing: border-box;}
.gird-row-view .article .wrap {height: 55px;}
.gird-row-view .article .depth {color: #242424; font-weight: 500;}
.gird-row-view .article .title {font-size: 18px; color: #555; font-weight: 400;}
.gird-row-view .article .depth + .title {margin-top: 7px;}
.gird-row-view .article .state {padding-bottom: 0; border-bottom: 0;}
.gird-row-view .article .label-stamp {right: 100%; margin-right: -333px;}
.gird-row-view .article .completed-stamp .number {right: 6px;}
.gird-row-view .article .meta .running-time {top: 100%; right: 100%; margin-top: -30px; margin-right: -320px;}

.gird-row-view .running-time {position: absolute; bottom: 8px; right: 8px; margin: 0; padding-left: 23px; width: 68px; line-height: 20px; font-size: 14px; color: #fff; font-weight: 300; background-color: rgb(0 0 0 / 60%); border-radius: 50px; box-sizing: border-box; text-align: left;}
.gird-row-view .running-time:before {display: block; content: ''; position: absolute; top: 0; left: 10px; margin-top: 0; width: 8px; height: 100%; background: url(../images/i-play-2.png) center center no-repeat; background-size: 100% auto;}


.gird-row-view .article .percent-box {display: flex; margin-top: 20px; padding: 15px 10px; height: 50px; background-color: #eceef2; box-sizing: border-box; flex-wrap: nowrap; justify-content: space-between; align-items: center; border-radius: 10px;}
.gird-row-view .article .percent-box .text {display: flex;}
.gird-row-view .article .percent-box .text strong {}

.gird-row-view .article .percent-box .text.left {width: 95px; font-size: 16px; color: #242424; justify-content: space-between;}
.gird-row-view .article .percent-box .text.left strong {font-weight: bold;}
.gird-row-view .article .percent-box.ing .text.left strong {color: #e556a6;}
.gird-row-view .article .percent-box.complete .text.left strong {color: #00b6f0;}

.gird-row-view .article .percent-box .text.right {width: 85px; font-size: 14px; color: #8b8b8b; letter-spacing: normal; justify-content: flex-end;}
.gird-row-view .article .percent-box .text.right strong {color: #242424; font-weight: 400;}

.gird-row-view .article .percent-box .percent-bar {width: calc(100% - 200px); height: 12px; background-color: #fff; border-radius: 50px; overflow: hidden;}
.gird-row-view .article .percent-box .percent-bar span {height: 100%; background-position: 0 0; background-repeat: repeat-x; background-size: auto 100% !important; border-radius: 50px;}

.gird-row-view .article .percent-box.ing .percent-bar span {background-image: url(../images/percentbar-ing.png);}
.gird-row-view .article .percent-box.complete .percent-bar span {background-image: url(../images/percentbar-complete.png);}


.no-data {display: flex; height: 575px; align-items: center; justify-content: center;}
.no-data span {font-size: 22px; color: #8b8b8b; font-weight: 500;}
.no-data span:before {display: block; content: ''; margin: 0 auto 30px; width: 120px; height: 120px; background: url(../images/i-no-data.png) center 0 no-repeat; background-size: 100% auto !important;}

.check-box {position: relative;}
.check-box input + label {display: block; padding-left: 45px; min-width: 45px; height: 26px; font-size: 22px; font-weight: 500; background: url(../images/i-checkbox.png) 0 0 no-repeat; cursor: pointer; box-sizing: border-box;}
.check-box.no-text input + label {padding-left: 26px; min-width: 26px;}
.check-box input:checked + label {background: url(../images/i-checkbox-on.png) 0 0 no-repeat;}
.check-box input + label .em {color: #00b6f0;}
.check-box input {display: none;}

.control-check {display: flex; gap: 0 10px; align-items: center; flex-wrap: wrap;}
.control-check .text {font-size: 18px; color: #8b8b8b; white-space: normal;}

.control-button {display: flex;}
.control-button .button {display: block; position: relative; padding: 12.5px 10px; min-width: 120px; line-height: 21px; font-size: 20px; color: #8b8b8b; font-weight: 500; background-color: #fff; border: 2px solid #ddd; border-radius: 5px; box-sizing: border-box;}
.control-button .button.color {color: #00b6f0; border-color: #00b6f0;}

.mypage2 .control-field {position: relative; margin: 0 15px; padding: 20px 0; border-bottom: 2px solid #ddd}
.mypage2 .control-field .flex {align-items: end;}

.mypage2 .control-tab ul li.active a {color: #00b6f0;}

.mypage2 .total-stamp {display: flex; height: 60px; align-items: end;}
.mypage2 .total-stamp span {position: static; padding: 0; line-height: 22px; font-size: 22px; color: #242424; font-weight: 500; background-color: transparent; border-radius: 0;}
.mypage2 .total-stamp .em {color: #00b6f0;}

.mypage2 .article .check-box {position: absolute; top: 0; right: 0; z-index: 5;}


  @media (min-width: 901px) {
    .pack.mob-show + .pack {margin-top: 0;}

    .gird-row-view .article .state span {min-width: 100px; line-height: 21px;}

    .mypage2 .filter {position: absolute; top: 20px; right: 0;}
    .mypage2 .filter .select {width: 270px;}
    .mypage2 .filter .select.grade {width: 142px;}
    .mypage2 .custom-select .select-selected,
    .mypage2 .custom-select .select-items div {border-radius: 10px;}
    .mypage2 .custom-select .select-selected {padding: 17.5px 15px; color: #555;}
    .mypage2 .custom-select .select-items div {padding: 16.5px 15px;}
    .mypage2 .custom-select.grade .select-selected {color: #fff;}
    .mypage2 .custom-select .select-selected:after {top: 25px;}
    .mypage2 .custom-select .select-selected.select-arrow-active {border-radius: 10px 10px 0 0;}
    .mypage2 .custom-select .select-items {border-radius: 0 0 10px 10px;}
  }
  @media (max-width: 1600px) {

  }
  @media (max-width: 1600px) and (min-width: 1281px) {
    .mypage2.my-study .gird-row-view ul li {width: 100%;}
    .mypage2.my-study .gird-row-view ul li:nth-child(odd) {padding-right: 0;}
    .mypage2.my-study .gird-row-view ul li:nth-child(even) {padding-left: 0;}
  }
  @media (max-width: 1280px) {
    .panel-board {gap: 0;}
    .panel-board .panel {display: block; padding: 10px; height: auto; text-align: center; border: 0; border-radius: 0; box-shadow: none;}
    .panel-board .panel:before {top: 55px; left: 50%; transform: translateX(-58%);}
    .panel-board .panel .text {display: block; margin-bottom: 100px;}
    .panel-board .panel .number {margin-left: 0;}

    .gird-row-view ul {gap: 40px 30px; padding: 40px 0;}
    .gird-row-view ul li {padding-bottom: 0; width: calc(100% / 2 - 15px); border-bottom: 0;}
    .gird-row-view ul li:nth-child(odd) {padding-right: 0;}
    .gird-row-view ul li:nth-child(even) {padding-left: 0;}
    
    .gird-row-view .article .img {width: 100%;}
    .gird-row-view .article .content {padding: 20px; width: 100%; border: 2px solid #ddd; border-top: none; border-radius: 0 0 15px 15px;}
    .gird-row-view .article .label-stamp {right: -15px; margin-right: 0;}
    .gird-row-view .article .state {padding-bottom: 20px; border-bottom: 2px solid #ececec;}

    .mypage2 .article .check-box {position: relative; margin-bottom: 20px;}
  }
  
  @media (max-width: 900px) { 
    .panel-board {margin: 15px 0; padding: 0;}
    .panel-board .panel {padding: 5px;}
    .panel-board .panel:before {top: 32px; background-size: 42px auto !important; transform: translateX(-55%);}
    .panel-board .panel .text {margin-bottom: 54px; font-size: 15px;}
    .panel-board .panel .number {font-size: 22px; border-bottom-width: 1px;}

    .gird-row-view {padding: 0;}
    .gird-row-view ul {gap: 20px 0; padding: 15px 0;}
    .gird-row-view ul li {width: 100%;}
    .gird-row-view .article .content {padding: 15px ; border-width: 1px;}
    .gird-row-view .article .wrap {height: 50px;}
    .gird-row-view .article .state {padding-bottom: 15px; border-bottom-width: 1px;}
    .gird-row-view .article .state span {min-width: 75px;}
    
    .gird-row-view .article .percent-box {margin-top: 15px; padding: 5px 10px; height: 40px;}
    .gird-row-view .article .percent-box .text.left {width: 90px; font-size: 15px;}

    .gird-row-view .article .percent-box .percent-bar {width: calc(100% - 190px);}

    .no-data {height: 350px;}
    .no-data span {font-size: 15px;}
    .no-data span:before {margin-bottom: 15px; width: 65px; height: 65px;}

    .check-box input + label {padding-left: 30px; min-width: 26px; height: 21px; font-size: 16px; background-size: 21px auto !important;}
    .check-box.no-text input + label {padding-left: 21px; min-width: 21px;}

    .control-check {display: block;}
    .control-check .text {display: block; margin-left: 30px; font-size: 14px;}

    .control-button .button {min-width: 85px; padding: 8.5px 5px; font-size: 16px; border-width: 1px;}

    .mypage2 .control-field {margin: 0; padding: 0 0 15px; border-bottom-width: 1px;}
    .mypage2 .control-field .column {display: block;}

    .mypage2 .page-tab + .control-field {padding-top: 20px;}

    .mypage2.my-stamp .control-field {padding-bottom: 0; border-bottom: 0;}

    .mypage2 .control-tab {max-width: 100%; height: 21px; overflow: hidden;}
    .mypage2 .control-tab ul {max-width: 100%; overflow: hidden; overflow-x: auto; box-sizing: border-box;}  
    .mypage2 .control-tab ul::-webkit-scrollbar {width: 0;}
    .mypage2 .control-tab ul::-webkit-scrollbar-thumb {height: 0; background: transparent; border-radius: 10px;}
    .mypage2 .control-tab ul::-webkit-scrollbar-track {background: transparent;}

    .mypage2 .control-field .total-stamp {display: none;}

    .mypage2 .total-stamp {height: 70px; justify-content: center;}
    .mypage2 .total-stamp span {font-size: 18px;}
    .mypage2 .total-stamp strong {display: inline-block; font-size: 22px;}
    
    .mypage2 .article .check-box {margin-bottom: 10px;}
  }

/*20230824 - 토스트 팝업 css
위 아래 색상은 검정, 오픈일자만 bold 처리, 폰트 사이즈는 동일 처리.*/
.tost-layer {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1006;}
.tost-layer .layer {text-align: center; position: absolute; top: 50%; left: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; width: 503px; min-height: 266px; margin: -133px 0 0 -251.5px; padding: 10px 10px 20px; border-radius: 10px; background-color: #fff; opacity: 0; -webkit-box-shadow: 0 0 20px #ccc; box-shadow: 0 0 20px #ccc; border: 1px solid #ccc; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.tost-layer .layer .content {word-break: keep-all; word-wrap: break-word;}
.tost-layer .layer .footer {padding-top: 20px;}
.tost-layer.fade .layer {opacity: 1;}
.tost-layer .layer:before {content: ''; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 95px; height: 95px; margin: 44px auto 25px; border-radius: 50%; border: 0 solid #6172b6; background-repeat: no-repeat; background-position: 50% 50%; background-image: url('../images/sweetAlertIcon.png'); opacity: 0; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.tost-layer.fade .layer:before {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); border-width: 8px;}
.tost-layer .layer h1 {color:#101820; font-size: 18px; font-weight: normal;}
.tost-layer .layer p {color:#101820; font-size: 18px; font-weight: bold;}
@media (max-width: 900px) {
  .tost-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1007;}

  .tost-layer .layer {
    right: 15px;
    left: 15px;
    width: auto;
    margin-left: 0;
    margin-top: -200px;
  }
}

/*hyeon 20230829 모바일 배너 리스트 가로모드도 보여지도록 수정 */
@media (max-width: 900px){
  .main-visual .slider-all-visual .slider-all-list {max-height: calc(100vh - 330px); max-height: calc(100dvh - 250px);}
}
/*hyeon 20230829 alert 글씨체 수정 */
.sweet-alert h2{margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 1.4;}

/*hyeon 20230829 뷰티케어 관련 css 추가 */
@media (max-width: 900px) {
  .beauty-info .pc-show{display: none;}
  .beauty-info .mob-show{display: inline-block;}
}

/* 230830 */
.cont.course_intro ul.none,
.cont.course_intro ul.none li {line-height: 1.4; font-size: 22px;}
@media (max-width: 900px){
  .cont.course_intro ul.none,
  .cont.course_intro ul.none li {font-size: 16px;}
}

/*230907(pc) > 메뉴바 글자 아래로 떨어지도록 수정 */
@media (min-width: 901px) {
  .header-menu.open .menu-list .list .depth ul li > a {white-space: normal;}
}



/* 230915 */
@media (min-width: 901px) {
  .mypage2 .filter {display: flex; gap: 20px; width: calc(100% - 220px); justify-content: end;}
  .mypage2 .filter .select {margin-left: 0;}
  .mypage2 .filter .select.grade {min-width: 100px;}
  .mypage2 .filter.filter3 .select {max-width: calc(100% / 2 - 60px);}
  .mypage2 .filter.filter4 .select {max-width: calc(100% / 3 - 40px);}
  .mypage2 .filter.filter5 .select {max-width: calc(100% / 4 - 30px);}
  .mypage2 .custom-select .select-selected {padding-right: 30px;}
}
@media (min-width: 901px) and (max-width: 1280px) {
  .mypage2 .filter {gap: 10px;}
  .mypage2 .filter.filter3 .select {max-width: calc(100% / 2 - 55px);}
  .mypage2 .filter.filter4 .select {max-width: calc(100% / 3 - 36.6px);}
  .mypage2 .filter.filter5 .select {max-width: calc(100% / 4 - 27.5px);}
}
@media (max-width: 900px) {
  .mypage2 .total-stamp {align-items: center;}
}

/*!*20230926 에디터에서 li입력시 네모박스로 나오도록*!*/
/*ul .li_square {*/
/*  list-style-type: square;*/
/*}*/

/*hyeon 20231004 에디터 입력 상세 폰트 지정 */
@media (min-width: 901px){
  .cont.course_intro,
  .table-detail tbody td {font-size: 22px;}
  .cont-area {font-size: 20px;}
}
@media (max-width: 900px){
  .cont.course_intro,
  .table-detail tbody td {font-size: 16px;}
  .cont-area {font-size: 15px;}
}

/*hyeon 20231004 alert 글씨체 수정 */
.sweet-alert h2{color:#101820; font-size: 18px; font-weight: normal;}


@media (max-width: 900px){
  .gird-row-view .article .percent-box .text.left {width: 80px}
  .gird-row-view .article .percent-box .percent-bar {width: calc(100% - 175px) }
}
@media (max-width: 900px){
  .left-width {width: 85px  !important;}
  .bar-width {width: calc(100% - 180px) !important;}
}
/*hyeon 20231017 에디터 개선*/
/*.cont.course_intro ul li,*/
/*.table-detail tbody td ul li,*/
/*.cont-area ul li {list-style-type: square;}*/
/*.cont.course_intro li,*/
/*.table-detail tbody td li,*/
/*.cont-area li {list-style-position: outside;}*/

/*.cont.course_intro ul{*/
/*  padding-left: 25px;*/
/*}*/

.cont.course_intro ul li,
.table-detail tbody td ul li,
.cont-area ul li {list-style-type: square;}
.cont.course_intro li,
.table-detail tbody td li,
.cont-area li {list-style-position: outside;}

.cont.course_intro ul,
.table-detail ul,
.cont-area ul,
.cont.course_intro ol,
.table-detail ol,
.cont-area ol {
  padding-left: 25px;
}

/*.cont.course_intro ul li,*/
/*.table-detail tbody td ul li,*/
/*.cont-area ul li {list-style-type: square; list-style-position: inside;}*/

/* 231016 offline 강의 offline표시 왼쪽 재생 아이콘 제거*/
.meta .running-time.offline {padding-left: 0; text-align: center;}
.meta .running-time.offline:before {display: none;}

/* 231017 마이페이지 offline 강의 offline표시 왼쪽 재생 아이콘 제거*/
.article .running-time.offline {padding-left: 0; text-align: center;}
.article .running-time.offline:before {display: none;}

/*20231017 마이페이지 폰트 줄임*/
@media (max-width: 900px) {
  .panel-board .panel .text {
    font-size: 13px;
  }
  .page-tab ul li span {
    font-size: 15px;
  }
}

/*20231017 마이페이지 찜하기*/
.control-check .text {position: relative; padding-left: 20px;}
.control-check .text:before {display: block; content: "※"; position: absolute; top: 0; left: 0;}

@media (max-width: 900px){
  .mypage2 .control-field.pick .flex {gap: 10px;}
  .control-check .text {padding-left: 15px;}
}
/*20231121 18자 이상 강좌명 줄바꿈시 줄 겹침 줄간격 수정.*/
.container h3.title-box {line-height: 36px;}

/* 231127~28 */

.item-area {position: relative; border-bottom: 2px dotted #dddddd;}

.item-slider {position: relative; margin: 20px 0;}
.item-slider .slick-arrow {display: block; position: absolute; top: 0; width: 35px; height: 190px; font-size: 0; color: #fff;background-color: #fff; background-repeat: no-repeat; z-index: 5;}
.item-slider .slick-prev {left: 0; background-image: url(../images/prev-active.png); background-position: 0 center;}
.item-slider .slick-next {right: 0; background-image: url(../images/next-active.png); background-position: right center;}

.item-slider .slick-dots {display: flex; gap: 7px; justify-content: center; margin-top: 20px;}
.item-slider .slick-dots li {list-style: none;}
.item-slider .slick-dots button {display: block; font-size: 0;}
.item-slider .slick-dots button:before {display: block; content: ''; width: 15px; height: 15px; background-color: #fff; border: 1px solid #cacaca; border-radius: 50%; box-sizing: border-box;}
.item-slider .slick-dots .slick-active button:before {background-color: #00b6f0; border-color: #00b6f0;}

.item-slider .slider-item {margin: 0 10px;}
.item-slider .slider-item a {display: flex; flex-wrap: wrap; align-items: center;  position: relative; height: 190px; background-color: #fff; border: 2px solid #ececec; box-sizing: border-box; overflow: hidden;}
.item-slider .slider-item a:after {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.7;}
.item-slider .slider-item.active a {border-color: #00b6f0;}
.item-slider .slider-item.active a:after {opacity: 0;}

.item-slider .img {width: 186px;}
.item-slider .txt {flex: 1; padding: 20px 30px; color: #000;}
.item-slider .txt .title {display: -webkit-box; line-height: 1.3; font-size: 22px; font-weight: 500; white-space: initial; word-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.item-slider .txt .i-box {display: flex; margin-top: 20px; font-size: 18px;}
.item-slider .txt .i-box span {display: flex; align-items: center; position: relative;}
.item-slider .txt .i-box span:before {display: block; content: ''; margin: 0 10px; width: 2px; height: 16px; background-color: #cacaca;}
.item-slider .txt .i-box span:first-child::before {display: none;}
.item-slider .txt .i-box em {font-style: normal;}
.item-slider .txt .i-box .color {color: #00b6f0;}
.item-slider .txt .i-box .pv {font-weight: 500;}

.item-slider.typeA .slider-item a {width: 190px;}
.item-slider.typeA .slider-item.active a {width: 610px;}
.item-slider.typeA .txt {padding-right: 50px;}

.item-slider.typeB .slick-slider {padding: 0 50px;}
.item-slider.typeB .txt {display: flex; gap: 30px; justify-content: space-between;}
.item-slider.typeB .txt .title {flex: 1;}
.item-slider.typeB .txt .i-box {margin-top: 0;}

@media (max-width: 1280px) {
  .item-slider .slider-item {margin: 0;}

  .item-slider .slider-item a {border-radius: 20px;}

  .item-slider.typeA .slider-item a {width: 100% !important;}

  .item-slider.typeB .slick-slider {padding: 0;}
}
@media (max-width: 900px) {
  .item-slider .slick-dots button:before {width: 10px; height: 10px;}

  .item-slider .slider-item a {height: 122px; border-width: 1px;}
  .item-slider .img {width: 120px;}
  .item-slider .txt {padding: 15px;}
  .item-slider .txt .title {font-size: 18px;}
  .item-slider .txt .i-box {margin-top: 10px !important; font-size: 15px;}

  .item-slider.typeB .txt {display: block;}
}

/* 231129 */
.item-slider .txt .i-box em {margin-right: 4px;}

.item-slider.typeB .slider-item a {border-color: #00b6f0;}
.item-slider.typeB .slider-item a:after {opacity: 0;}

@media (max-width: 1280px) {
  .item-slider .slider-item a {border-color: #00b6f0;}
  .item-slider .slider-item a:after {opacity: 0;}
}

/* 231212 */
.cont.course_intro .txt-box {margin: 0 -20px 60px; padding: 60px 30px; background-color: #f3f3f3; border-radius: 10px; box-sizing: border-box; text-align: center;}
.cont.course_intro .txt-box .title {display: block; margin-bottom: 15px; font-size: 32px; font-weight: 500;}
.cont.course_intro .txt-box p {margin-top: 25px; color: #555;}

.cont.course_intro .list-text {margin-top: 60px;}

.cont.course_intro .gsmc-wrap {padding-bottom: 20px;}
.cont.course_intro .gsmc-wrap .margin {position: relative; padding: 0 40px;}

.cont.course_intro .bundle .em-round {background-color: #b5bbbd;}
.cont.course_intro .bundle.ing .em-round {background-color: #00b6f0;}

.cont.course_intro .gsmc-wrap ul.check,
.cont.course_intro .gsmc-wrap ul.circle {padding-left: 0;}
.cont.course_intro .gsmc-wrap ul.circle li {color: #8b8b8b}

@media (min-width: 1920px) {
  .cont.course_intro .gsmc-wrap .margin:before {display: block; content: ''; position: absolute; top: 0; left: 50%; margin-left: 77px; width: 578px; height: 433px; background: url(../images/gsmc-2024.png) right 0 no-repeat;}

  .cont.course_intro .gsmc-wrap .ul-flex {display: flex !important; flex-wrap: wrap;}
  .cont.course_intro .gsmc-wrap .ul-flex li {margin-top: 0; min-width: 700px; box-sizing: border-box;}
}
@media (max-width: 900px) {
  .cont.course_intro .txt-box {margin: 0 -10px 30px; padding:  30px 15px;}
  .cont.course_intro .txt-box .title {font-size: 20px;}
  .cont.course_intro .txt-box img {max-width: 70% !important;}

  .cont.course_intro .list-text {margin-top: 30px;}

  .cont.course_intro .gsmc-wrap .margin {padding: 0;}
}

/* 240205 */
@media (min-width: 1281px) {
  .item-slider.typeB .txt {gap: 30px 50px;}
  .item-slider.typeB .txt .title {font-size: 24px;}
  .item-slider.typeB .txt .i-box {font-size: 22px;}
  .item-slider.typeB .txt .i-box span:before {margin: 0 25px;}
}

/* 240207*/
.meta .running-time {padding-right: 10px; width: inherit; min-width: 52px;}
.meta .running-time.offline {padding-right: 0;}
.content .running-time.offline {padding-left: 15px; padding-right: 15px;}

/* 240208*/
.gird-row-view .running-time {padding-right: 10px; width: fit-content; min-width: 52px;}
.gird-row-view .running-time.offline {padding-left: 10px;}


/* 240220 */
@media (max-width: 900px) {
  .item-area {margin: 0 -20px;}
  .item-slider .slider-item {padding: 0 20px;}
}



/* 240415 */

.header-menu .menu-list .list > li > a .new {display: inline-block; margin-top: -12px; margin-left: 1px; width: 17px; height: 17px; font-size: 0; background: url(../images/i-new-small.png) 0 0 no-repeat; background-size: 100% auto !important; vertical-align: middle;}

.pack2 {border-bottom: 0; border-radius: 15px 15px 0 0; border-bottom: 0}
.pack2 + .pack2 {margin-top: 0; border-radius: 0 0 15px 15px; border-top: 0; border-bottom: 2px solid #ddd;}

.title-wrap ~ .flex {margin-top: 20px; padding-top: 20px; border-top: 2px solid #ddd;}

.pack2 + .pack2 .title-wrap {padding-top: 40px; border-top: 2px solid #ddd;}

.container .title-wrap h4 {margin-bottom: 30px; font-size: 24px;}

.slider-3mp,
.slider-video {position: relative; padding: 0 3px;}
.slider-video {padding-bottom: 40px;}
.slider-3mp .slider-prev,
.slider-3mp .slider-next,
.slider-video .slider-prev,
.slider-video .slider-next {display: none;}
.slider-3mp .slick-arrow,
.slider-video .slick-arrow {position: absolute; top: 50%; width: 68px; height: 67px; font-size: 0; background-position: center center; background-size: 100% auto; background-repeat: no-repeat; transform: translateY(-50%); z-index: 10;}
.slider-3mp .slick-prev,
.slider-3mp .slick-next {margin-top: -110px;}
.slider-video .slick-prev,
.slider-video .slick-next {margin-top: -50px;}
.slider-3mp .slick-prev,
.slider-video .slick-prev {left: -15px; background-image: url(../images/slider-prev.png);}
.slider-3mp .slick-next,
.slider-video .slick-next {right: -15px; background-image: url(../images/slider-next.png);}

.slider-3mp .article,
.slider-video .article {padding: 0 13px;}

.slider-3mp .article .img-span,
.slider-video .article .img-span {border-width: 2px;}
.slider-3mp .article .content,
.slider-video .article .content {padding: 20px; border: 2px solid #ddd; border-top: 0; border-radius: 0 0 20px 20px;} 

.slider-video .article .title {display: -webkit-box; word-break: break-word; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical}

  @media (max-width: 900px) {
    .header-menu .menu-list .list > li > a .new {margin-top: -5px; width: 15px; height: 15px;}

    .pack2,
    .pack2 + .pack2 {padding: 15px 15px 0; border: 1px solid #ddd; border-radius: 15px;}
    .pack2 + .pack2 {margin-top: 30px;}

    .pack2 + .pack2 .title-wrap {padding-top: 0; border-top: 0;}
    .container .title-wrap h4 {margin-bottom: 15px; font-size: 18px;}

    .title-wrap ~ .flex .control-search {top: 10px;}

    .slider-3mp .slick-arrow,
    .slider-video .slick-arrow  {width: 45px; height: 45px;}
    .slider-3mp .slick-prev,
    .slider-3mp .slick-next {margin-top: -110px;}
    .slider-video .slick-prev,
    .slider-video .slick-next {margin-top: -40px;}
    .slider-3mp .slick-prev,
    .slider-video .slick-prev {left: -10px;}
    .slider-3mp .slick-next,
    .slider-video .slick-next {right: -10px;}

    .slider-3mp,
    .slider-video {margin: 0 -13px; padding: 0 0 15px;}
    .slider-3mp .article .img-span,
    .slider-video .article .img-span,
    .slider-3mp .article .content,
    .slider-video .article .content {border-width: 1px;}
  }


/* 240416 */
.slider-video .article .img {position: relative; overflow: hidden;}
.slider-video .article .img:before {display: block; content: ''; padding-bottom: 55.456%;}
.slider-video .article .img .img-span {position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center;}
.slider-video .article .img .img-span img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-height: 100%;}
.slider-video .article .meta {margin-top: 0;}


/* 240424 */
.cont.course_intro .bundle .em-round {min-width: 253px; text-align: center;}

.cont.course_intro .wrap-3mp .txt-box .title em {font-style: normal; font-weight: bold;}
.cont.course_intro .wrap-3mp .txt-box p {line-height: 1.8;}
.cont.course_intro .wrap-3mp .txt-box p em {font-style: normal; font-weight: 500;}
.cont.course_intro .wrap-3mp .txt-box p em.color {color: #00b6f0;}

.cont.course_intro .wrap-3mp .bg-image {display: flex; flex-wrap: wrap; align-items: end; position: relative;}
.cont.course_intro .wrap-3mp .bg-image .list-text {margin-top: 0;}
.cont.course_intro .wrap-3mp .bg-image .list-text .block:last-child {margin-bottom: 0;}

.cont.course_intro .wrap-3mp .month {margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #dddddd;}
.cont.course_intro .wrap-3mp .month .em-round {min-width: 300px; text-align: center;}
.cont.course_intro .wrap-3mp .month .list-text {margin-top: 0;}
.cont.course_intro .wrap-3mp .month .list-text strong {display: block; margin-bottom: 20px;}


  @media (min-width: 1920px) {
    .cont.course_intro .wrap-3mp .margin:before {display: none;}
  }
  @media (min-width: 1281px) {
    .cont.course_intro .wrap-3mp .bg-image {padding-left: 600px; min-height: 375px;}
    .cont.course_intro .wrap-3mp .bg-image:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 500px; height: 100%; background: url(../images/3mp.png) 0 bottom no-repeat;}
  }



/* 240814 */

@media (min-width: 1281px) {
  .curriculum .cont-table .body .rowspan3 ~ .td.full {height: 240px;}
  .curriculum .cont-table .body .rowspan4,
  .curriculum .cont-table .body .rowspan4-pc,  
  .curriculum .cont-table .body .rowspan4 ~ .td.full {height: 320px;}
  .curriculum .cont-table .body .rowspan4 ~ .td {height: 80px;}

}