/* ==========================================================================
   1. 기본 스타일 (BASE STYLES) - 모든 페이지 공통 및 PC
   ========================================================================== */

/* [공통] sub.css 내용 */
.br_m { display: none; }
.br_1200 { display: block; }
p { letter-spacing: 0.5px; }

.sub_top { padding-top: 100px; }
.sub_top > ul > li > a {
    display: block;
    padding: 10px 15px;
    border-radius: 50px;
    background-color: #F8F8F8;
    color: #003e09;
    font-size: 20px;
}
.sub_top > ul > li:hover a {
    color: #fff;
    background-color: #003e09;
}

.sub_content { padding-top: 100px; }
.sub_content > h2 {
    font-size: 40px;
    font-weight: normal;
    text-align: center;
    line-height: 1.3;
    padding: 50px 0;
}
.sub_content > h2 > span { color: #003e09; font-weight: bold; }
.color_g { color: #003e09; font-weight: bold; }

/* [Sub 1] sub1.css 내용 */
/* 주의: 페이지별로 .sub_top > ul 컬럼 설정이 다릅니다. 필요시 페이지별 클래스 추가 권장 */
.sub_top > ul {
    display: grid;
    grid-template-columns: repeat(4,1fr); /* 기본 4칸 */
    grid-gap: 10px;
    max-width: 800px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}

.sub_top2 > ul {
    grid-template-columns: repeat(3,1fr);
}

.sub_content img { width: 100%; }

.p1_1_1_img {
    background-image: url(/theme/basic/img/sub/p1_1_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    margin: 0 auto;
}

.p1_1_div ul {
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(2,auto);
    grid-gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
.p1_1_div ul h2 { font-size: 34px; padding-bottom: 20px; line-height: 1.3; }
.p1_1_div ul p { font-size: 26px; line-height: 1.3; font-weight: 500; }
.p1_1_div ul span { color: #003e09; font-weight: bold; }

.p1_1_ulimg {
    border-radius: 50px;
    overflow: hidden;
    width: 500px;
    height: 350px;
}
.p1_1_ulimg img { height: 100%; }

.p1_2_div { padding-top: 100px; }
.p1_2_1_img {
    background-image: url(/theme/basic/img/sub/p1_2_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 25%;
    height: 500px;
    margin: 0 auto;
}

.p1_2_ul {
    position: relative;
    transform: translate(-50%,-50%);
    top: 30%;
    left: 50%;
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(2,auto);
    justify-content: space-between;
    align-items: end;
}
.p1_2_ul_li1 h2 { font-size: 40px; line-height: 1.3; }
.p1_2_ul_li1 span { color: #003e09; }
.p1_2_ul_li1 p { font-size: 20px; line-height: 1.3; padding-top: 30px; color: #222; }

.p1_2_ul_li2 h3, .p1_2_ul_li2 h4, .p1_2_ul_li2 h5 {
    font-weight: normal;
    text-align: right;
    letter-spacing: 1px;
    font-size: 14px;
}
.p1_2_ul_li2 span { padding-left: 20px; }
.p1_2_ul_li2 h4 { color: #222; padding-top: 5px; }
.p1_2_ul_li2 h5 { padding-top: 20px; color: #333; }

.p1_2_text { max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.p1_2_text h2 { color: #003e09; font-size: 34px; padding-bottom: 30px; }
.p1_2_text p { padding-top: 30px; font-size: 26px; text-align: justify; letter-spacing: 1.2; line-height: 1.3; }

.p1_3_box {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    grid-gap: 150px;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 50px;
}
.p1_3_box > div > ul {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px;
    align-items: center;
}
.p1_3_box > div > ul h2 { font-weight: bold; font-size: 30px; color: #003e09; min-width: 140px; }
.p1_3_box > div > ul p { font-size: 24px; line-height: 2; }

.p1_3_li > div {
    display: grid;
    grid-template-columns: repeat(2,auto);
    grid-gap: 20px;
    justify-content: start;
    padding-bottom: 30px;
}

.p1_3_box_flex { display: flex; grid-gap: 100px; }
.p1_3_box_flex_1 { width: 45%; }
.p1_3_box_flex_2 { width: 60%; }

.p1_3_box_flex_1 > h2 { font-size: 46px; font-weight: 600; }
.p1_3_box_flex_1 > h3 { font-size: 21px; margin-top: 10px; }
.p1_3_box_flex_1 > p { font-size: 18px; margin-top: 50px; text-align: justify; line-height: 1.3; }

.p1_3_box_flex_2 > div { border-top: 2px solid #000; padding-top: 20px; margin-top: 80px; display: flex; }
.p1_3_box_flex_2 > div:first-child { margin-top: 0; }
.p1_3_box_flex_2 > div > h2 { width: 30%; }
.p1_3_box_flex_2 > div > ul { width: 70%; }

.p1_3_box_flex_2 h2 { font-size: 27px; font-weight: 600; }
.p1_3_box_flex_2 h3 { font-size: 21px; font-weight: 500; }
.p1_3_box_flex_2 p { font-size: 16px; color: #787878; line-height: 1.5; text-align: left; }

.p1_3_box_flex_2_ul > li {
    display: grid;
    grid-template-columns: repeat(2,auto);
    border-bottom: 1px solid #dcdcdc;
    padding: 10px 0;
    box-sizing: border-box;
    justify-content: start;
    grid-gap: 100px;
}
.p1_4_box { max-width: 900px; margin: 0 auto; }

/* [Sub 2] sub2.css 내용 */
.p2_1_box { text-align: center; padding-top: 200px; }
.p2_1_box2 { padding-top: 50px; }
.p2_1_box h2 { font-size: 34px; color: #003e09; }
.p2_1_box h2::after {
    content: '';
    background-color: #003e09;
    height: 2px;
    width: 100px;
    display: block;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    bottom: -10px;
}
.p2_1_box p { font-size: 26px; padding-top: 50px; line-height: 1.3; }
.p2_1_img { padding-top: 50px; max-width: 1200px; margin: 0 auto; overflow: hidden; }
.p2_1_box span { font-weight: bold; text-decoration: underline; }
.p2_1_video { padding-top: 50px; max-width: 1200px; margin: 0 auto; }
.p2_1_simg { padding-top: 50px; max-width: 1200px; margin: 0 auto; }
.p2_1_simg>div { position: relative; }
.p2_1_1 { width:100%; position: relative; transform: translateX(-50%); left: 50%; }

.arrow-left, .arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.arrow-left { left: 10px; }
.arrow-right { right: 10px; }
.arrow-left::before { content: '<'; font-size: 30px; position: relative; bottom: 2px; }
.arrow-right::before { content: '>'; font-size: 30px; position: relative; bottom: 2px; }

.p2_div { max-width: 1200px; margin: 0 auto; }

/* Sub 2 모달 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}
#modalContent { margin: 1% auto; display: flex; justify-content: center; align-items: center; position: relative; }
#modalImg { height: 95vh; }
#closeBtn {
    color: #fff;
    font-size: 4rem;
    position: absolute;
    top: -25px;
    right: 20px;
    cursor: pointer;
}

#bo_gall,
#bo_list {
    padding-top: 100px;
}

/* [Sub 3] sub3.css 내용 */
.p3_1_img {
    background-image: url(/theme/basic/img/sub/p3_1_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    padding-top: 0;
}
.p3_2_img {
    background-image: url(/theme/basic/img/sub/p3_2_1-2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    padding-top: 0;
}
.p3_3_img {
    background-image: url(/theme/basic/img/sub/p3_3_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 500px;
    padding-top: 0;
}
.p3_1_div { padding-top: 100px; }
.p3_1_div img { width: 100%; }
.p3_1_text { max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.p3_1_text > h2 { font-size: 34px; color: #003e09; }
.p3_1_text span { font-size: 40px; }
.p3_1_text > p { padding-top: 20px; font-size: 26px; line-height: 1.3; text-align: justify; }

.p3_1_div_ul {
    padding-top: 100px;
    display: grid;
    grid-template-columns: repeat(2,auto);
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    grid-gap:3%;
}
.p3_2_div_ul { grid-gap: 0; }
.p3_1_div_ul h2 { font-size: 34px; padding-bottom: 20px; line-height: 1.3; color: #003e09; }
.p3_1_div_ul p { font-size: 26px; line-height: 1.3; font-weight: 500; }
.p3_1_div_ul span { font-weight: bold; }

.p3_1_ulimg {
    border-radius: 50px;
    overflow: hidden;
    width: 500px;
    height: 350px;
    border: 1px solid #eee;
    box-sizing: border-box;
}
.p3_1_ulimg img { width: 100%; height: 100%; }

.p3_1_5_div { padding-top: 100px; max-width:1200px; position: relative; transform: translateX(-50%); left: 50%; }
.p3_1_5 { width:100%; max-width:100%; }

.p3_2_div { padding-top: 100px; }
.p3_2_div img { width: 100%; }
.p3_2_text { max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.p3_2_text > h2 { font-size: 34px; color: #003e09; }
.p3_2_text span { font-size: 40px; }
.p3_2_text > p { padding-top: 20px; font-size: 27px; line-height: 1.3; text-align: justify; }

.p3_2_ibox2 { width: 100%; margin: 0 auto; max-width: 1200px; padding-top: 100px; }
.p3_2_ibox2 img { width: 100%; }

.p3_3_div { padding-top: 100px; }
.p3_3_div img { width: 100%; }
.p3_3_text { max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.p3_3_text > h2 { font-size: 34px; color: #003e09; }
.p3_3_text span { font-size: 40px; }
.p3_3_text > p { padding-top: 20px; font-size: 28px; line-height: 1.3; text-align: justify; }

.p3_3_ibox { max-width: 700px; margin: 0 auto; }
.p3_3_ibox2 { max-width: 700px; margin: 0 auto; }
.p3_4_div { max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.p3_4_div img { width: 100%; }

/* [Sub 4] sub4.css 내용 */
#contents .p4_3_div .p4_3_ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1%;
}
#contents .p4_3_div .p4_3_ul > li { width: 100%; position: relative; }
#contents .p4_3_div .p4_3_ul > li > a { width: 100%; text-align: center; font-size: 18px; line-height: 1.3; }

#contents .p4_3_div .p4_3_ul > li .imgLink2 {
    overflow: hidden;
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#contents .p4_3_div .p4_3_ul > li > a:first-child {
    max-height: 300px;
    overflow: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin-bottom: 10px;
}
#contents .p4_3_div .p4_3_ul > li > a > img { width: 100%; height: initial; margin: 0; }


/* ==========================================================================
   2. MAX-WIDTH: 1200px (통합)
   ========================================================================== */
@media all and (max-width:1200px) {
    /* [Common] */
    .sub_content {
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* [Sub 1] */
    .p1_1_div ul { grid-gap: 20px; }
    .p1_1_ulimg { max-width: 400px; }
    .p1_1_div ul h2 { font-size: 30px; }
    .p1_1_div ul p { font-size: 20px; }
    .p1_2_ul { padding: 0 10px; box-sizing: border-box; }
    .p1_3_box { grid-gap: 100px; }
    .p1_3_box_flex { flex-direction: column; grid-gap: 50px; }
    .p1_3_box_flex_1 { width: 100%; padding: 0 10px; box-sizing: border-box; }
    .p1_3_box_flex_2 { width: 100%; padding: 0 10px; box-sizing: border-box; }

    /* [Sub 2] */
    .p2_1_box p { font-size: 20px; }
    .p2_1_box { padding-top: 100px; }
    .p2_1_div .bx-viewport { height: 500px; }
    .p2_2_ul { display: grid; grid-template-columns: repeat(4,1fr); min-width: initial!important; }
    
    .xans-board-listpackage-8 .xans-board-list-8 li,
    .xans-board-listpackage-3001 .xans-board-list-3001 li { width: 100%!important; }
    
    .xans-board-listpackage-8 .xans-board-list-8 li a.imgLink,
    .xans-board-listpackage-8 .xans-board-list-8 li a.imgLink:hover,
    .xans-board-listpackage-8 .xans-board-list-8 li span,
    .xans-board-listpackage-3001 .xans-board-list-3001 li a.imgLink,
    .xans-board-listpackage-3001 .xans-board-list-3001 li a.imgLink:hover,
    .xans-board-listpackage-3001 .xans-board-list-3001 li span { width: 100%!important; }
    
    .xans-board-listpackage-8 .xans-board-list-8 li .imgLink img,
    .xans-board-listpackage-3001 .xans-board-list-3001 li .imgLink img { width: 100%!important; }

    /* [Sub 3] */
    .p3_1_div_ul { grid-gap: 20px; }
    .p3_1_ulimg { max-width: 400px; width: 100%; }
    .p3_1_div_ul h2 { font-size: 30px; }
    .p3_1_div_ul p { font-size: 20px; }

    /* [Sub 4] */
    .p4_3_ul { display: grid; min-width: initial!important; }
}


/* ==========================================================================
   3. MAX-WIDTH: 900px (통합)
   ========================================================================== */
@media all and (max-width:900px) {
    /* [Common] */
    .br_m { display: block; }
    .br_1200 { display: none; }
    .sub_top { padding-top: 50px; }
    .sub_top > ul > li > a { font-size: 16px; padding: 5px; }
    .sub_content { padding-top: 50px; }
    .sub_content > h2 { font-size: 28px; }

    /* [Sub 1] */
    .p1_1_1_img { height: 300px!important; }
    .p1_1_ulimg { max-width: 500px; }
    .p1_1_div ul { grid-gap: 50px; display: flex; }
    .p1_1_div_ul1, .p1_1_div_ul3 { flex-direction: column-reverse; }
    .p1_1_div_ul2 { flex-direction: column; }
    .p1_1_div_ul li { width: 100%; }
    .p1_1_div_ul1 li:first-child, .p1_1_div_ul3 li:first-child { padding: 0 10px; box-sizing: border-box; }
    .p1_1_div_ul2 li:last-child { padding: 0 10px; box-sizing: border-box; }
    .p1_1_div ul h2 { font-size: 34px; text-align: center; }
    .p1_1_div ul p { font-size: 24px; text-align: center; }
    .p1_2_1_img { height: 300px; }
    .p1_2_ul { grid-template-columns: repeat(1,1fr); padding: 0 10px; box-sizing: border-box; grid-gap: 20px; top: 50%; }
    .p1_2_ul_li1 h2 { font-size: 26px; }
    .p1_2_ul_li1 p { font-size: 18px; color: #fff; text-shadow: 1px 1px 10px #000; }
    .p1_2_ul_li2 h3, .p1_2_ul_li2 h4, .p1_2_ul_li2 h5 { color: #fff; text-shadow: 1px 1px 10px #000; }
    .p1_2_ul_li2 h5 { padding-top: 10px; }
    .p1_2_text h2 { font-size: 28px; }
    .p1_2_text p { font-size: 24px; }

    /* [Sub 2] */
    .p2_1_box { padding-top: 50px; }
    .p2_1_box h2 { font-size: 30px; }
    .p2_1_box p { font-size: 18px; }
    .p2_1_v { max-height: 400px; }
    .p2_2_ul { grid-template-columns: repeat(3,1fr); }

    #bo_gall,
    #bo_list {padding-top: 50px;}

    /* [Sub 3] */
    .p3_1_img, .p3_2_img, .p3_3_img { height: 300px; }
    .p3_1_div_ul { padding-top: 50px; display: flex; }
    .p3_1_div_ul1, .p3_1_div_ul3 { flex-direction: column-reverse; }
    .p3_1_div_ul2 { flex-direction: column; }
    .p3_1_div_ul1 li:first-child, .p3_1_div_ul3 li:first-child, .p3_1_div_ul2 li:last-child { padding: 0 5%; box-sizing: border-box; }
    .p3_1_text > h2 { font-size: 28px; }
    .p3_1_text > p { font-size: 22px; }
    .p3_2_text > h2 { font-size: 28px; }
    .p3_2_text > p { font-size: 22px; }
    .p3_3_text > h2 { font-size: 28px; }
    .p3_3_text > p { font-size: 22px; }

    /* [Sub 4] */
    .p4_3_ul { grid-template-columns: repeat(3,1fr); }
}


/* ==========================================================================
   4. MAX-WIDTH: 600px (통합)
   ========================================================================== */
@media all and (max-width:600px) {
    /* [Common] */
    .br_m { display: block; }
    .sub_top > ul { align-items: center; grid-gap: 5px; }
    .sub_content > h2 { font-size: 16px; }
    .sub_top > ul > li > a { font-size: 12px; padding: 5px; }

    /* [Sub 1] */
    .p1_1_div ul h2 { font-size: 22px; }
    .p1_1_div ul p { font-size: 14px; }
    .p1_2_ul_li1 h2 { font-size: 18px; }
    .p1_2_ul_li1 p { font-size: 16px; }
    .p1_2_text h2 { font-size: 24px; }
    .p1_2_text p { font-size: 18px; }
    .p1_3_box_flex_1 > h2 { font-size: 40px; }
    .p1_3_box_flex_1 > p { font-size: 16px; margin-top: 30px; }
    .p1_3_box_flex_2 > div > ul { width: 100%; }
    .sub_content .p1_3_box_flex_2_ul > li { grid-gap: 20px; }
    .sub_content .p1_3_box_flex_2 > div { flex-direction: column; grid-gap: 20px; margin-top: 50px; }
    .sub_content .p1_3_box_flex_2 h3 { font-size: 16px; }
    .sub_content .p1_3_box_flex_2 p { font-size: 14px; }

    /* [Sub 2] */
    .p2_1_box h2 { font-size: 24px; }
    .p2_1_box p { font-size: 14px; }
    .p2_1_v { max-height: 250px; }
    .p2_2_ul { grid-template-columns: repeat(2,1fr); }

    /* [Sub 3] */
    .p3_1_text > p, .p3_2_text > p, .p3_3_text > p { font-size: 16px; }
    .p3_1_div_ul1 li:first-child, .p3_1_div_ul3 li:first-child, .p3_1_div_ul2 li:last-child { padding: 0; }
    .p3_1_div_ul h2 { font-size: 24px; text-align: center; }
    .p3_1_div_ul p { font-size: 14px; }

    /* [Sub 4] */
    #contents .p4_3_div .p4_3_ul > li > a { font-size: 14px; }
}