/*------------------ 공통 css -----------------------*/
.sub04 .sub4010_bg{background: url("/theme/basic/img/sub04_01_bg.png") no-repeat; background-size: cover; width: 100%;}
.sub04 .sub4020_bg{background: url("/theme/basic/img/sub04_02_bg.png") no-repeat; background-size: cover; width: 100%;}
.sub04 .sub4030_bg{background: url("/theme/basic/img/sub04_03_bg.png") no-repeat; background-size: cover; width: 100%;}
.sub04 .sub4040_bg{background: url("/theme/basic/img/sub04_04_bg.png") no-repeat; background-size: cover; width: 100%;}


/*------------------ sub04_01 -----------------------*/
.sub04 .gra_con{width: 100%; margin-bottom: 30px;}
.sub04 .gra_con .gra_tit{background: transparent linear-gradient(90deg, #C3D93F 0%, #00AFD5 100%) 0% 0% no-repeat padding-box; padding: 17px 30px; color: #fff; font-weight: bold; font-size: 20px; line-height: 30px; box-shadow: 3px 0 3px #00000029;}
.sub04 .gra_con .gra_txt{box-shadow: 0px 3px 6px #00000029; padding: 20px 30px;}
.sub04 .gra_con .gra_txt .basic_tb td:last-child{text-align: center;}


/*------------------ sub04_03 -----------------------*/
.contents-body .img-slider {text-align: center;}
.contents-body .img-slider img {display: none;}
.contents-body .img-slider img.on {display: inline-block;}
.contents-body .img-slider__nav div {display: inline-block; font-size: 0;}
.contents-body div.nav-img__selector {width: calc( 100% - 160px );height: 60px;}
.contents-body div.nav-img__selector li {margin-right: 8px;cursor: pointer;position: static;right:0;left:0;transition: 0.2s;}
.contents-body div.nav-img__selector li.on img {outline: 4px solid #00AFD5;}
.contents-body div.nav-img__selector li:nth-child(5n) {margin-right: 0;}
.contents-body div.nav-img__selector li:nth-child(n+6) {display: none;}
.contents-body div.nav-img__selector li.right-move {position: relative;right: 110%;left: auto;}
.contents-body div.nav-img__selector li.left-move {position: relative;right: auto;left: 110%;}
.contents-body .nav-button {width: 76.8px;font-size: 15px !important;}
.ul-inline-block li {display: inline-block;}
.t-center {text-align: center;}
.nav-button {cursor: pointer;}
.m-top-20 {margin-top: 20px;}


@media (max-width: 1240px) {
    /*------------------ sub04_03 -----------------------*/

    .contents-body .nav-button {width: 4%;}
    .contents-body .nav-button img {width: 100%;height: auto;margin-top: 5px;}
    .contents-body .nav-button.left {margin-right: 15px;}
    .contents-body .nav-button.right {margin-left: 15px;}
    .contents-body div.nav-img__selector {width: calc( 100% - 9% - 30px );}
    .contents-body div.nav-img__selector li{text-align: center;}
    .contents-body div.nav-img__selector li img {width: 120px;height: 70px;}
}

@media(max-width: 768px) {
    /*------------------ sub04_01 -----------------------*/
    .sub04 .gra_con .gra_tit{font-size: 18px; padding: 10px 20px;}

    /*------------------ sub04_03 -----------------------*/
    .contents-body .nav-button {width: 28px;}
    .contents-body .nav-button.left {margin-right: 10px;}
    .contents-body .nav-button.right {margin-left: 10px;float: right;}
    .contents-body div.nav-img__selector li img {width: 100%;height: auto;}
    .contents-body .img-slider img {width: 100%;height: auto;}
    .contents-body div.nav-img__selector {width: calc( 100% - 9% - 44px );text-align: center;}
    .contents-bottom table.bottom-list-box {padding: 30px 20px;}
    .contents-body div.nav-img__selector li {width: 17.3%;}



}