/**/
header{padding: 2rem 0 ; transition: 0.3s ease;width: 100%; z-index: 200; background-color: #fff0; border-bottom:0; ;display: flex; gap: 15px; ; align-items: center; justify-content: center}
header.fixed{position: fixed; top: 0; left: 0; width: 100%; z-index: 200; background-color: #fff; border-bottom: 1px solid #eee; transition: 0.3s ease;}
header .black {display: block}
header .white {display: none}
header.fixed .black {display: block}
header.fixed .white {display: none}

header .mobile{display: none;}
header .inner{position: relative;}
header div.logo{max-width: 1065px;padding: 0 15px;margin: 0 auto; display: flex; gap: 15px; color: #fff; align-items: center}
header.fixed div.logo{color: #000; }

header .inner.index {width: fit-content}

.tnb > a{margin-left: 6px;}
.tnb .hd_count{display: none; }
.tnb .hd_count li{line-height: 1.2em;}
.tnb > ul{margin-right: 10px;}
.tnb .mobile{display: none;}
.mobile-menu{display: none;}
.index #gnb .depth1 > li > select {background: #fff;border: 1px solid #eee; box-shadow: 0 0 10px #00000010}
@media screen and (min-width: 1200px) {
    #gnb {font-size: 1.1em;}
    #gnb .depth1 {list-style: none;padding: 0;margin: 0;display: flex;align-items: start; gap: 0px;}
    .index  #gnb .depth1 {gap: 10px;}
    #gnb .depth1 > li {padding: 10px 0px; position: relative}
    #gnb .depth1 > li > a {white-space: nowrap;text-decoration: none;padding: 10px ;display: block;font-size: 15px;font-weight: 600;position: relative; height: 40px; border-radius: 10px}
    .index #gnb .depth1 > li > a {color: #000;}
    #gnb .depth1 > li.qr div {opacity: 1; transition:all .3s ease;max-height: 100px}
    .fixed #gnb .depth1 > li.qr div {opacity: 0;max-height: 0}
    .fixed .index #gnb .depth1 > li > a {color: #000;}
    #gnb .depth1 > li.active > a {color: #0f343e;}
    #gnb .depth1 > li:hover > a {font-weight: 600;color: #000000; background: #00000010; transition: all 0.3s;}
    #gnb .depth1 > li:hover > a:after{width: 100%; height: 4px; opacity: 1; margin-top: 6px;}
    #gnb .depth1 > li > a.txt-orange:after{background: #FF6225!important}
    #gnb .depth1 > li:hover .depth2-wrapper {display: block;}
    #gnb .depth2-wrapper {display: none;position: absolute;top: 20px;left: 0; z-index: 1000;}
    #gnb .depth2 {margin-top: 30px;gap: 10px;row-gap: 0px;display: flex;flex-wrap: wrap;list-style: none;padding: 10px 25px;box-shadow: 0 0 30px #00000010;border-radius: 10px;overflow: hidden;background-color: #fff;width: fit-content}
    #gnb .depth2 li {text-decoration: none;padding: 7px 5px;white-space: nowrap; display: block;text-align: center;}
    #gnb .depth2 li a:hover {color: #0f343e;font-weight: 600;}
    #gnb .mobile-my{display: none;}
    header .inner.index {max-width: 1085px}
    .tnb {display: none!important;}
    .inner:not(.index) .depth1 > li.qr div {display: none;position: absolute;top: 50px;right: 25px;z-index: 1000;}
    .inner:not(.index) .depth1 > li.qr:hover div {display: block}
    header:has(.inner:not(.index)) {padding-top: 0}
}
@media screen and (max-width: 1200px) {
    .depth2-wrapper {overflow: hidden;max-height: 0;transition: max-height 0.3s ease;}
    .depth2-wrapper.open {}
    header .mobile{display: block;}

    header{padding: 1rem 3rem;}
    header>.mobile{display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-top: 0px;}
    header>.mobile>a{width: 100%;}
    header h1 img{height: 25px;}
    header {white-space:nowrap;display: flex;}
    .mobile-menu{display: block;}
    .mobile-menu i{font-size: 1.8em; height: 35px; line-height: 35px; width: 30px; text-align: center; color: #1C1C1C;}
    header .inner {justify-content: flex-end !important;}

    .tnb > ul{display: none!important;}
    .tnb .mobile{display: inline-block;}
    .tnb .btn-line{display: none}

    /**/
    #gnb {position: fixed;right: -90%; /* Hide it outside the screen */top: 0;width: 90%;height: 100%;background-color: #fff;z-index: 1000;transition: right 0.3s ease-in-out; padding: 1rem; overflow-y: auto; max-width: 400px;}
    #gnb.open {right: 0; z-index: 9999; /* Slide in the menu */}

    #gnb .depth1{border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > a{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; padding: 1.2rem 1rem;display: flex; align-items: center;}
    #gnb .depth1 > li > select{font-size: 1.2em;font-weight: 600;border-top: 1px solid #eee; background: #fff;display: flex; align-items: center;width: 100%}
    #gnb .depth2{padding: 1rem 1.6rem; background-color: #fff; border-radius: 10px; margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px}
    #gnb .depth2 a:before{content: ""; display: inline-block; width: 4px; height: 4px; background-color: #5abdb0; margin-right: 6px; vertical-align: middle; border-radius: 50%;}
    #gnb .mobile-my{display: block; padding: 1rem}
    #gnb .mobile-my .btn{margin-bottom: 0;}
    #gnb .mobile-my .close-btn{font-size: 2em;cursor: pointer}
    #gnb .lnb{margin-top: 10px;}
    #gnb .lnb .mypage{padding-top: 10px; padding-bottom: 10px;}
    #gnb .lnb .mypage span{color: #333333}
    #gnb .lnb a{border-bottom: 0; font-size: 0.9em; line-height: 1.8em; display: flex; align-items: center;}
    #gnb .lnb a:after{content: ""; width: 1px; height: 12px; background-color: #ccc; display: inline-block; margin: 0 4px;}
    #gnb .lnb a:last-child:after{display: none;}

    .container{padding-left: 1rem; padding-right: 1rem;}

    .fnb > .flex{display: block!important;}
    .fnb > .flex li{display: inline-block;}

    .lnb_wrapper{display: block!important;}
    .lnb_wrapper .lnb{display: none;}
}

@media screen and (max-width: 992px) {
    header {padding: 1rem;}
}


#wrapper{ min-height: 80vh}
.lnb-side{display: grid; grid-template-columns: 220px 1fr; gap: 60px;}
.container{padding: 0;margin: 0;}


/**/

footer{padding: 3rem 0 5rem; background: #000; color: #fff}
.fnb{  padding: 2rem 0; font-size: 1.1em;}
.fnb a{font-weight: 600; color: #fff}
.copy{padding: 1rem 0;}
.copy h1{font-weight: 600; font-size: 1.1em;margin-top: 25px}
.copy ul{margin: 6px 0; opacity: 0.6}
.copy li{margin-right: 10px; display: inline-block;}
.copy .flex div h5 {font-weight: 600; margin-bottom: 10px}
.copy .flex div p { opacity: 0.6}
.dot-list ul li:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: #55555520; margin: 0 6px 1px}
.area-top{border-bottom: 3px solid #555; margin-bottom: 40px; padding-bottom: 20px;}


@media screen and (max-width: 768px) {
    .copy .flex {display: block!important;}
    .copy .flex div {text-align: right}
    .copy .flex div {padding: 25px 0}
}

/**/

.sub-box {margin-top: 0px; background: url("../img/common/sub02.png") center bottom no-repeat; text-align: center; padding-top: 60px; background-size: cover}
.sub-box h6 {color: #fff; font-weight: 600; font-size: 40px; margin: 15px 0 25px}
.sub-box p {display: inline-block;  color: #5BBEB1; font-weight: 800; font-size: 20px; padding: 15px 25px; border-radius: 10px 10px 0 0}
.sub-box p:has(a) { padding: 0px; border-radius: 10px 10px 0 0}
.sub-box p a {display: inline-block; background: #ffffff20; color: #fff; font-weight: 800; font-size: 20px; padding: 15px 25px; border-radius: 10px 10px 0 0}
.sub-box p a.active { background: #fff; color: #5BBEB1; }

@media screen and (max-width: 1200px) {
    .sub-box { margin-top: 0px;}
    .sub-box h6 {font-size: 30px; margin: 15px 0 25px}
    .sub-box p  a{font-size: 14px; padding: 5px 20px; border-radius: 10px 10px 0 0}

}
/**/

.mypage{margin-top: 100px;}
.mypage p{font-size: 1.15em;}
.mypage span{font-size: 0.9em;}

@media screen and (max-width: 1200px) {
    .signup .box-gray .grid2,
    .sign_form .box-gray .grid2{grid-template-columns: 1fr!important;}
}

/*메인*/

/* Layout ---------------------------------------------------*/
.hero-wrap{
    position:relative;
    width:calc(100% - 40px);
    height:87vh;
    overflow:hidden;
    background:#fff;
    border-radius:20px;
    margin:0 auto 20px;
    transition:width .4s ease,border-radius .4s ease;
}
.hero-wrap.is-full{
    width:100%;
    border-radius:0;
}

.hero-wrap .swiper-slide{
    width:100%;height:87vh;
    display:flex;align-items:center;
    justify-content:center;;color:#fff;position:relative;text-align: center;
}
.hero-wrap .hero-content{z-index:5;position:relative;}

/* Typography -----------------------------------------------*/
.hero-wrap h1{font-size:6em;font-weight:800;line-height:1.1;margin:0 0 .4em;text-shadow: 0 0 20px #00000060}
.hero-wrap .s3-line{text-shadow: 0 0 20px #00000060}
.hero-wrap p{font-size:2em;margin:.2em 0;text-shadow: 0 0 20px #00000030;line-height:1.5}
.hero-wrap p.line{font-size:1.2em;margin:.2em ;text-shadow: 0 0 20px #00000030; display: inline-flex; justify-content: center;align-items: center; padding: 5px 10px; border: 1px solid #fff; border-radius: 50px}

/* Background presets ----------------------------------------*/
.hero-wrap .swiper-slide{
    position:relative;
    overflow:hidden;
}
.hero-wrap .swiper-slide::before{
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;
    animation:gradientMove 6s ease-in-out infinite;
}
.hero-wrap .swiper-slide[data-bg="dark"]{
    background:url('../img/main01.jpg') center/cover no-repeat, #00000020;
    background-blend-mode: darken;
}
.hero-wrap .swiper-slide[data-bg="bright"]{
    background:url('../img/main02.jpg') center/cover no-repeat, #00000020;
    background-blend-mode: darken;
}
.hero-wrap .swiper-slide[data-bg="mixed"]{
    background:url('../img/main03.jpg') center/cover no-repeat, #00000020;
    background-blend-mode: darken;
}
.hero-wrap .swiper-slide::before{
    background:radial-gradient(circle at center, #00000000 20%, #6a6a6a 30%, #111 100%);

    mix-blend-mode:color;
    animation-duration:6s;
}
@keyframes gradientMove{
    0%{transform:translate(0%,0%) rotate(0deg) scale(1);}
    10%{transform:translate(0%,0%) rotate(0deg) scale(1.5);}
    30%{transform:translate(-10%,-10%) rotate(30deg) scale(1.5);}
    60%{transform:translate(10%,10%) rotate(30deg) scale(1.5);}
    90%{transform:translate(0%,0%) rotate(0deg) scale(1.5);}
    100%{transform:translate(0%,0%) rotate(0deg) scale(1);}
}


@media(max-width:1024px){
    .hero-wrap .s3-line{    padding: 0 20px;font-size:3.5em!important;}
    .hero-wrap .s3-line:first-child{font-size:4.5em!important;}
    .hero-wrap h1{    padding: 0 20px;font-size:4.5em}
    .hero-wrap p{    padding: 0 20px;font-size:1.6em}
    .hero-wrap p.line{font-size:1.1em}
}

@media(max-width:768px){
    .hero-wrap {height: 89vh;}
    .hero-wrap .swiper-slide {height: 89vh;}
    .hero-wrap .s3-line{font-size:2.2em!important;}
    .hero-wrap .s3-line:first-child{font-size:3.2em!important;}
    .hero-wrap h1{font-size:3.2em}
    .hero-wrap p{font-size:1.3em}
    .hero-wrap p.line{font-size:1em;padding:4px 10px}
}

@media(max-width:480px){
    .hero-wrap .s3-line{font-size:1.4em!important;}
    .hero-wrap .s3-line:first-child{font-size:2.4em!important;}
    .hero-wrap h1{font-size:2.4em}
    .hero-wrap p{font-size:1.1em}
    .hero-wrap p.line{font-size:.9em;padding:3px 8px}
}

/* Slide 3 — Cinematic Lines --------------------------------*/
.hero-wrap .s3-line{
    font-size:6em;font-weight:800;opacity:.15;
    transform:scale(1.05);filter:blur(8px);
    position:relative;overflow:hidden;display:block;line-height: 1.5em;
}
.hero-wrap .s3-line::after{
    content:"";position:absolute;top:0;left:0;width:100%;height:100%;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,0));
    transform:translateX(-120%);
    opacity:0;
}

/* Spotlight --------------------------------------------------*/
.hero-wrap .hero-spotlight{
    position:absolute;width:22em;height:22em;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
    filter:blur(2.5em);mix-blend-mode:soft-light;z-index:9;
    pointer-events:none;
}

.main-3col {display:grid;grid-template-columns:repeat(3,1fr);gap:30px; padding: 20px 30px 50px; max-width: 1200px; margin:  0 auto}
.main-3col .col{border:1px solid #e5e5e5;padding:24px;
    border-right: 0;
    border-left: 0;}
.main-3col .col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.main-3col .col-head h3{font-size:18px;font-weight:600}
.main-3col .btn-toggle{border:0;background:none;font-size:20px;cursor:pointer}
.main-3col ul{list-style:none;padding:0;margin:0}
.main-3col .service-list li:not(:last-child) {margin-bottom: 5px}
.main-3col .service-list li a{display:block;padding:10px; background: #f8f8f8; border-radius: 2px}
.main-3col .service-list .title{color: #05343E;font-weight:800;display:block;}
.main-3col .service-list .desc{display:block;font-size:13px;color:#777}
.main-3col .board-list li{padding:8px 0}
.main-3col .board-list li {color:#222; border: 0; border-radius: 2px; background: #f8f8f8; padding: 10px;}
.main-3col .board-list li:not(:last-child) {margin-bottom: 5px}
.main-3col .board-list .empty{color:#999}
@media(max-width:1024px){
    .main-3col{grid-template-columns:1fr}
    .main-3col .col {    padding: 24px 0;}
}


/**/

.accordion {width: 100%;display: flex; flex-direction: column; justify-content: space-between;gap: 15px; text-align: left}
.accordion-item {}
.accordion-header {font-size: 20px; font-weight: 600;background: #F7F8FC;padding: 25px;cursor: pointer;border-radius: 15px;display: flex;justify-content: space-between}
.accordion-header:after {display: block;font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f078";}
.accordion-content {display: none;padding: 20px;background: #fff;}
.accordion-item.active .accordion-content {display: flex; gap: 5px; }
.accordion-item.active .accordion-content b {font-size: 20px; font-weight: 600;color: #5BBEB1 }
.accordion-item.active .accordion-content p {font-size: 16px; font-weight: 600; }
.accordion-item.active .accordion-header:after {display: block;font-family: "Font Awesome 6 Pro";font-weight: 900;content: "\f077";}

@media screen and (max-width: 1200px) {
    .accordion-header {font-size: 15px;padding: 20px}
}
/**/

#company .company-box {padding: 220px 0; position: relative;overflow: hidden;}
#company .company-box:before {content: ''; display: block; width: 55vh; height: 45vh; background: url("../img/company02.png") center center no-repeat; background-size: contain; position: absolute; right: 15vw; top: 10vh }
#company .company-box:after {content: ''; display: block; width: 55vh; height: 45vh; background: url("../img/company03.png") center center no-repeat; background-size: contain; position: absolute; left: 15vw; bottom: 10vh }
#company .company-box h4 {line-height: 1.4em;font-size: 48px;color: #05343E; font-weight: 700; margin:20px 0;position: relative;z-index: 1;}
#company .company-box h4 + p {line-height: 1.4em;font-size: 18px;color: #9A9A9A;position: relative;z-index: 1;}
#company .company-box h4 + p + h6 {line-height: 1.55em;font-size: 18px;color: #05343E;position: relative;z-index: 1; margin-top: 15px; font-weight: 600}
#company .company-box h4 + p b {color: #05343E;}
#company .company-box .history-box {margin: 150px 0 100px; text-align: right;position: relative;z-index: 1}
#company .company-box .history-box h6 {line-height: 1.4em;font-size: 30px;color: #000; font-weight: 700; margin-bottom: 25px }
#company .company-box .history-box p {line-height: 1.4em;font-size: 18px;color: #9A9A9A; }
#company .company-box .history-box p b {color: #5C5C5C; font-weight: 800 }
#company .company-box .history-box ul {display: grid; grid-template-columns: repeat(1, 1fr);row-gap: 25px;; max-width: 800px;margin-left: auto;}


@media screen and (max-width: 1200px) {
    #company .company-box:before {width: 35vh; height:25vh; right: 5vw; top: 10vh }
    #company .company-box:after {width: 35vh; height: 25vh; left: 5vw; bottom: 10vh }
    #company .company-box h4 {font-size: 35px}
    #company .company-box h4 + p {font-size: 16px; }
    #company .company-box .history-box h6 {font-size: 20px; }
    #company .company-box .history-box p {font-size: 14px;}

}
.org-wrap{max-width:1100px;margin:0 auto;padding:60px 20px;text-align:center;position: relative; z-index: 2}
.org-ceo{display:inline-block;padding:14px 40px;border:2px solid #5cc3b3;border-radius:30px;font-size:18px;font-weight:700;color:#1f3d3a;margin-bottom:60px;position:relative;}
.org-level{display:flex;justify-content:space-between;gap:30px;position:relative;}
.org-group{flex:1;background:#f6fbfa;border-radius:20px;padding:30px 20px;}
.org-head{font-size:17px;font-weight:700;color:#1f3d3a;margin-bottom:20px;position:relative;}
.org-group ul{list-style:none;padding:0;margin:0;}
.org-group li{background:#fff;border-radius:14px;padding:14px 10px;margin-bottom:12px;font-size:15px;color:#555;box-shadow:0 6px 18px rgba(0,0,0,.04);}
.org-group li:last-child{margin-bottom:0;}

/* 연결 라인 */
.org-ceo:after{content:"";position:absolute;bottom:-40px;left:50%;width:2px;height:40px;background:#5cc3b3;transform:translateX(-50%);}
.org-level:before{content:"";position:absolute;top:-20px;left:0;right:0;height:2px;background:#5cc3b3;}

/* 반응형 */
@media(max-width:900px){
    .org-level{flex-direction:column;gap:40px;}
    .org-level:before{display:none;}
    .org-ceo{margin-bottom:40px;}
    .org-ceo:after{display:none;}
}

/**/

#contact {padding: 120px 0}
#contact h2 {font-size: 40px; font-weight: 600; line-height: 1.3em; margin: 10px 0 20px; color: #05343E}
#contact h2 + p{font-size: 18px; font-weight: 600; line-height: 1.3em; margin-bottom: 45px; color: #000}
#contact .box-line {margin-bottom: 25px}

@media screen and (max-width: 1200px) {
    #contact {padding:100px 0}
    #contact h2 {font-size: 30px;}
}

#service-intro{padding:0 0px 100px}
#service-intro .intro { position: relative;overflow: hidden;max-width:1200px;margin:100px auto;}

#service-intro .intro{font-size:16px;line-height:1.8;color:#2b2b2b;margin-bottom:50px}
#service-intro .intro h3{font-size:20px;margin-top:25px;}
#service-intro .intro h3 b{font-weight:700;color:#002b33}
#service-intro .service-box{position: relative;overflow: hidden;}
#service-intro .service-box{display:flex;justify-content:space-between;align-items:end;background:#f6fbfa;border-radius:20px;padding:34px 40px;margin:0 auto 24px}
#service-intro .service-box .txt{max-width:880px}
#service-intro .service-box h3{font-size:20px;font-weight:700;margin-top:12px;color:#002b33}
#service-intro .service-box h3.accent{color:#2fb7a4}
#service-intro .service-box .desc{font-weight:400;font-size:15px;line-height:1.7;color:#002b33;margin-bottom:6px}
#service-intro .service-box .sub{font-size:14px;line-height:1.6;color:#666}
#service-intro .service-box .go{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#2fb7a4;text-decoration:none}
#service-intro .service-box .go span{display:inline-flex;width:32px;height:32px;border-radius:50%;background:#2fb7a4;color:#fff;align-items:center;justify-content:center;font-size:14px;transition:.2s}
#service-intro .service-box .go:hover span{transform:translateX(4px)}
#service-intro .service-box img {width: 100%; max-width: 200px; margin-bottom: 15px; mix-blend-mode: darken}

@media(max-width:768px){
    #service-intro{margin:70px auto}
    #service-intro .service-box{flex-direction:column;align-items:flex-start;gap:24px;padding:28px 26px}
    #service-intro .service-box .go{align-self:flex-end}
}

#service-intro .banner-box {height: 840px;background: url("../img/company.png") center bottom no-repeat; padding-top: 0px; background-size: cover; display: flex; justify-content: center; align-items: center}
#service-intro .banner-box .inner{display: flex; justify-content: center; align-items: center}
#service-intro .banner-box .text-box {row-gap: 50px;display: flex; justify-content: center; align-items: center; width: 100%; white-space: nowrap; flex-direction: column}
#service-intro .banner-box .text {font-size: 96px;font-weight: 600;;color: #ffffff; line-height: 96px}
#service-intro .banner-box .text span {color: rgba(255, 255, 255, 0.2);}
#service-intro .banner-box .text2 {font-size: 45px;font-weight: 700;color: #ffffff;}
#service-intro .banner-box .text2 span {color: rgba(255, 255, 255, 0.2);}

@media screen and (max-width: 1200px) {
    #service-intro .banner-box {height: 60vh;min-height: 600px}
    #service-intro .banner-box .text-box {flex-direction: column}
    #service-intro .banner-box .text-box hr {display: none;}
    #service-intro .banner-box .text {font-size: 70px; }
    #service-intro .banner-box .text2 {font-size: 33px;}
}

#news-list {padding:100px 0}
#news-list .news-vertical {list-style:none;display:flex;flex-direction:column;gap:20px}
#news-list .news-vertical li a {display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:#000;border-bottom:1px solid #eee;padding-bottom: 20px}
#news-list .news-vertical .thumb {flex-shrink:0;width:120px;height:80px;overflow:hidden;border-radius:8px;background:#f1f1f1}
#news-list .news-vertical .thumb img {width:100%;height:100%;object-fit:cover}
#news-list .news-vertical .text {flex:1}
#news-list .news-vertical .title {font-size:18px;font-weight:600;margin-bottom:10px;line-height:1.4}
#news-list .news-vertical .desc {font-size:15px;color:#555;line-height:1.6;margin-bottom:8px}
#news-list .news-vertical .date {font-size:13px;color:#999}
#news-list .news-vertical li a:hover .title {text-decoration:underline}

@media screen and (max-width: 1200px) {
    #news-list .news-vertical li a {flex-direction: column}
    #news-list .news-vertical .thumb {width: 100%;height: auto; aspect-ratio: 16 / 9}
}
#arctive-view {padding:100px 0}
#arctive-view .news-detail .title {font-size:26px;font-weight:700;line-height:1.4;margin-bottom:15px}
#arctive-view .news-detail .meta {font-size:14px;color:#999;margin-bottom:25px}
#arctive-view .news-detail .thumb {margin-bottom:30px;border-radius:10px;overflow:hidden}
#arctive-view .news-detail .thumb img {width:100%;display:block}
#arctive-view .news-detail .content {font-size:16px;line-height:1.8;color:#333}
#arctive-view .news-detail .content p {margin-bottom:20px}
#arctive-view .news-detail .nav-links {display:flex;justify-content:space-between;margin-top:40px}
#arctive-view .news-detail .nav-links a {font-size:15px;color: #5abdb0;text-decoration:none; font-weight: 600}
#arctive-view .news-detail .nav-links a:hover {color: #308f82;}

#article-list{padding:100px 0}
#article-list .inner{max-width:1200px;margin:0 auto;padding:0 20px}
#article-list .table table{width:100%;border:0!important;border-collapse:collapse}
#article-list .table th{padding:14px 10px;font-size:15px;font-weight:600;color:#333;border:0!important;border-bottom:1px solid #ddd!important;}
#article-list .table td{padding:14px 10px;font-size:15px;color:#555;border:0!important;border-bottom:1px solid #eee!important;;text-align:center}
#article-list .table td a{color:#333;text-decoration:none}
#article-list .table td a:hover{color:#5abdb0}
#article-list .table tr.fixed td{background:#f7fbfa;font-weight:600}
#article-list .table td.empty{padding:40px 0;color:#999}
#article-list .pagination{margin-top:40px;text-align:center}
#article-list .pagination a,#article-list .pagination strong{display:inline-block;min-width:36px;height:36px;line-height:36px;margin:0 3px;border-radius:6px;font-size:14px}
#article-list .pagination a{border:1px solid #ddd;color:#666}
#article-list .pagination strong{background:#5abdb0;color:#fff;border-color:#5abdb0}
#article-list .pagination a:hover{background:#f2f2f2}

@media(max-width:1024px){
    #article-list{padding:70px 0}
    #article-list .table th,#article-list .table td{font-size:14px;padding:12px 8px}
}

@media(max-width:768px){
    #article-list{padding:50px 0}
    #article-list .table colgroup,#article-list .table thead{display:none}
    #article-list .table table,#article-list .table tbody,#article-list .table tr,#article-list .table td{display:block;width:100%;border: 0!important;}
    #article-list .table tr{padding:14px;border-bottom:1px solid #eee!important;}
    #article-list .table td{border:0;padding:6px 0;text-align:left}
    #article-list .table td:first-child{font-weight:600;color:#5abdb0}
    #article-list .table td:first-child:before{content: 'No.'; display: inline-block}
    #article-list .table td:nth-child(3):before{content: '조회수 '; display: inline-block}
    #article-list .table td a{font-size:16px;font-weight:600;display:block}
    #article-list .pagination{margin-top:30px}
}