@charset "utf-8";
#visual {position: relative; height: 460px; border-radius: 0 0 100px 0; overflow: hidden; background: url("../../images/ch/main/bg_ch.png") center /cover no-repeat;}
#visual .img_box {
    float: right;
    border-radius: 0 0 100px 0;
    height: 100%;
}
#visual .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}
#visual .visual_txt {
    position: absolute;
    top: 70px;
    left: 0;
}
#visual .visual_txt .slogan {
    font-family: "gmarket_bold";
    font-size: 45px;
    color: #333;
    padding-bottom: 28px;
    position: relative;
    line-height: 1.3;
}
#visual .visual_txt .slogan::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    right: 60px;
    width: 35px;
    height: 33px;
    background: url("../../images/ch/main/ico_bg.png")  center no-repeat;
}
#visual .visual_txt .slogan::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 1px;
    background-color: #846130;
}
#visual .visual_txt .slogan strong {
    font-size: 55px;
}
#visual .visual_txt .slogan strong.blue {color: #1f5a74;}
#visual .visual_txt .slogan strong.yellow {color: #846130;}

#visual .visual_txt .small {line-height: 1.5; padding-top: 45px; font-size: 18px; font-family: "NanumSquare"; font-weight: 300; color: #333;}

#quick {padding: 70px 0;}
#quick ul { display: flex; justify-content: space-between;}
#quick .list a {
    display: block;
    width: 370px;
    height: 220px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    padding: 30px 37px;
    font-family: "NanumSquare";
    font-size: 26px;
    font-weight: 800;
    color: #2a2a2a;
    text-decoration: none;
    box-shadow: 0 0 7px 3px rgba(0,0,0,0.1);
}

#quick .list {position: relative;}
#quick .list::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: -1;
}


#quick .list a::after {
    content: "";
    display: block;
    position: absolute;
    right: 28px;
    bottom: 20px;
    transition: 0.5s;
}

#quick .list a:hover:after,
#quick .list a:focus:after{transform: rotateY(360deg);}

#quick .list a::before {
    content: "";
    display: block;
    position: absolute;
    left: 37px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    background: url("../../images/ch/main/ico_arrow.png") center no-repeat;
    border-radius: 50%;
}
#quick .list1 a::before {background-color: #d26464;}
#quick .list2 a::before {background-color: #2a82a7;}
#quick .list3 a::before {background-color: #c1a92b;}
#quick .list4 a::before {background-color: #409232;}
#quick .list.list1 a {background-color: #fbe6e6;}
#quick .list.list2 a {background-color: #e6f4fb;}
#quick .list.list3 a {background-color: #fbf9e5;}
#quick .list.list4 a {background-color: #eaf9e7;}
#quick .list.list1::before {background-color: #d26464;}
#quick .list.list2::before {background-color: #2a82a7;}
#quick .list.list3::before {background-color: #c1a92b;}
#quick .list.list4::before {background-color: #409232;}
#quick .list.list1 a::after {
    width:  85px;
    height: 77px;
    background: url("../../images/ch/main/quick1.png") center no-repeat;
}
#quick .list.list2 a::after {
    width: 89px;
    height: 89px;
    background: url("../../images/ch/main/quick2.png") center no-repeat;
}
#quick .list.list3 a::after {
    width: 74px;
    height: 73px;
    background: url("../../images/ch/main/quick3.png") center no-repeat;
}
#quick .list.list4 a::after {
    width: 86px;
    height: 86px;
    background: url("../../images/ch/main/quick4.png") center no-repeat;
}
#quick .list.list1 a:hover {outline: 2px solid #d26464;}
#quick .list.list2 a:hover {outline: 2px solid #2a82a7;}
#quick .list.list3 a:hover {outline: 2px solid #c1a92b;}
#quick .list.list4 a:hover {outline: 2px solid #409232;}

#quick .list a span {word-break: keep-all; font-size: 15px; font-weight: 300; color: #333; display: block;margin-top: 15px;line-height: 1.5;}

#gallery {
    background: url("../../images/ch/main/bg_gallery.png") top center /contain no-repeat;
    padding: 70px 0;
    position: relative;
    background-color: #f6f6f6;
}
#gallery h4 {color: #fff;font-size: 40px;font-family: "gmarket_bold";text-align: center;MARGIN-TOP: 10PX;}
#gallery .gallery_btn {
    position: absolute;
    top: -5px;
    right: 0;
    display: flex;
}
#gallery .gallery_btn .arrow_btn {
    background-color: #fff;
    border-radius: 26px;
    width: 130px;
    height: 52px;
    line-height: 52px;
    position: relative;
    display: flex;
    justify-content: space-between;
}
#gallery .gallery_btn .arrow_btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #4a5156;
    opacity: 0.1;
}
#gallery .gallery_btn .arrow_btn button {
    width: 49%;
    font-size: 0;
    background: url("../../images/ch/main/ico_arrow_b.png") center no-repeat;
}
#gallery .gallery_btn .arrow_btn button.next {transform: rotate(180deg);}
#gallery .gallery_btn a.more {
    display: inline-block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #1f5a74;
    font-size: 0;
    position: relative;
    margin-left: 20px;
    transition: 0.3s;
}
#gallery .gallery_btn a.more:hover {transform: rotate(180deg);}
#gallery .gallery_btn a.more::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    transform: translate(-50%,-50%);
    background: url("../../images/ch/main/ico_more.png") center no-repeat;
}
#gallery .list_wrap {
    margin-top: 30px;
}
#gallery .list a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    height: 370px;
    border-radius: 10px;
    box-shadow: 0 0 7px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
    text-decoration: none;
    margin: 10px 0;
}
#gallery .pic {width: 100%; height: 250px; border-radius: 10px; overflow: hidden;} 
#gallery .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
#gallery .list a:hover .pic img {
    transform: scale(1.1);
}
#gallery .slick-slide {
    margin: 0 20px;
}
#gallery .slick-list {
    margin: 0 -20px;
}
#gallery .list a p {font-size: 20px; font-family: "NanumSquare"; font-weight: 700;color: #272727;margin-bottom: 13px; max-width: 100%; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#gallery .list a .date {position: relative; font-size: 17px; font-family: "NanumSquare"; font-weight: 300; color: #888;padding-left: 23px;}
#gallery .list a .date::after {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px; 
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: url(../../images/kr/main/main-icos.png) no-repeat -360px 1px; 
}
#gallery .list a .txt_wrap {padding: 30px 21px 37px;}
#gallery .list.none {background-color: #fff; width: 100%;height: 370px; border-radius: 10px;margin: 10px 0;text-align: center;padding: 30px 0 0 0; box-sizing: border-box;}
@media all and (max-width:1680px) {
    .inner {width: 95%;}

    #quick .list {width: 23.5%;}
    #quick .list a {width: 100%; padding: 25px 30px;}
    #quick .list a::after {right: 30px; bottom: 25px;}
    #quick .list a::before {left: 30px; bottom: 25px;}
}
@media all and (max-width:1480px) {
    #visual {height: 380px;}
    #visual .visual_txt {top: 50px;}
    #visual .visual_txt .slogan {font-size: 40px;}
    #visual .visual_txt .slogan strong {font-size: 45px;}
    #visual .visual_txt .small {font-size: 16px; padding-top: 35px;}

    #quick .list a { padding: 20px 25px; font-size: 24px;}
    #quick .list a::after {right: 25px; bottom: 20px; transform: scale(0.9); transform-origin: right bottom;}
    #quick .list a::before {left: 25px; bottom: 20px;}
    #quick .list a span {font-size: 14px;}

    #gallery {padding: 65px 0;}
    #gallery h4 {font-size: 35px;}
    #gallery .gallery_btn .arrow_btn {width: 110px; height: 45px;}
    #gallery .gallery_btn a.more {width: 45px; height: 45px;}
    #gallery .slick-list {margin: 0 -10px;}
    #gallery .slick-slide {margin: 0 10px;}
    #gallery .list a {height: 340px;}
    #gallery .list a p {font-size: 18px;}
    #gallery .list a .date {font-size: 16px;}
    #gallery .list a .txt_wrap {padding: 18px 18px 30px;}
}

@media all and (max-width:1380px) {
    #quick .list a {padding: 20px; font-size: 23px;}
    #quick .list a::after {right: 20px; bottom: 20px; transform: scale(0.8);}
    #quick .list a::before {left: 20px; bottom: 20px;}
}
@media all and (max-width:1280px) {
    #visual .img_box {width:75%;}
    #visual .img_box img {object-position: 10px center;}
    #visual .visual_txt .slogan {font-size: 37px;}
    #visual .visual_txt .slogan strong {font-size: 42px;}

    #quick .list a {font-size: 23px;}
    #quick .list a::after {transform: scale(0.7);}

    #gallery {background-size: auto;}
    #gallery .pic {height: 200px;}
    #gallery .list a {height: 290px;}
    #gallery .list_wrap {margin-top: 40px;}
    #gallery .list a p {font-size: 17px;}
    #gallery .list a .date {font-size: 15px;}
}
@media all and (max-width:1180px) {
    #visual .img_box {width:80%;}    

    #quick .list a { padding: 18px; font-size: 21px;}
    #quick .list a::after {right: 18px; bottom: 18px; transform: scale(0.6);}
    #quick .list a::before {left: 18px; bottom: 18px;}
}
@media all and (max-width:1080px) {
    #visual .img_box {width:85%;}
    #quick .list a { font-size: 20px;}    
}
@media all and (max-width:1024px) {
    #visual {height: 600px;}
    #visual .img_box {float: none; width: 100%; height: 53%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
    #visual .img_box img {object-position: center;}
    #visual .img_box::after {height: 350px;}
    #visual .visual_txt {top: 363px;}
    #visual .visual_txt .slogan {font-size: 30px;}
    #visual .visual_txt .slogan strong {font-size: 40px;}
    #visual .visual_txt .small {padding-top: 30px;}
    #quick .list a { font-size: 18px;}   
    #quick .list a::before {width: 30px; height: 30px;}
}
@media all and (max-width:980px) {
    #quick ul {flex-wrap: wrap;}
    #quick .list {width: 48%;}
    #quick .list1, #quick .list2 {margin-bottom: 20px;}
    #quick .list a {width: 100%; font-size: 22px;}
    #quick .list a span {font-size: 16px;}
    #quick .list a::before {width: 40px; height: 40px;}
    #quick .list a::after {transform: scale(0.7);}

    #gallery h4 {font-size: 33px;}
    #gallery .gallery_btn .arrow_btn {height: 40px;}
    #gallery .gallery_btn a.more {width: 40px;height: 40px;}
}
@media all and (max-width:780px) {
    #gallery {padding: 60px 0;}
    #gallery h4 {text-align: left;}
    #gallery .pic {height: 165px;}
    #gallery .list a {height: 255px;}
}

@media all and (max-width:580px) {
    #visual {height: 480px; border-radius: 0 0 60px 0;}
    #visual .visual_txt {top:240px;}
    #visual .img_box {height: 44%;}
    #visual .visual_txt .slogan {font-size: 27px; word-break: keep-all;}
    #visual .visual_txt .slogan strong {font-size: 31px;}
    #visual .visual_txt .small {font-size: 15px; word-break: keep-all;}

    #quick {padding: 60px 0;}
    #quick .list a {font-size: 20px;}
    #quick .list a span {font-size: 15px;}
    #quick .list a::after {transform: scale(0.6);}

    #gallery {padding: 50px 0;}
    #gallery .gallery_btn {top: 55px;}
    #gallery .list_wrap {margin-top: 65px;}
    #gallery .list a p {font-size: 16px;}
    #gallery .list a .date {font-size: 14px;}
}
@media all and (max-width:480px) {
    #visual .img_box {height: 42%;}
    #quick .list a {font-size: 18px;}
    #quick .list a span {font-size: 14px;}

    #gallery {padding: 45px 0;}
    #gallery h4 {font-size: 30px;}
    #gallery .slick-list {margin: 0 -7px;}
    #gallery .slick-slide {margin: 0 7px;}
    #gallery .gallery_btn {top: 50px;}
    #gallery .gallery_btn .arrow_btn {width: 110px;}
    #gallery .list a {height: 240px;}
    #gallery .list a p {font-size: 15px;}
    #gallery .list a .date {font-size: 13px;}
    #gallery .list a .txt_wrap {padding: 10px;}
}
@media all and (max-width:380px) {
    #visual {height: 500px;}
    #visual .visual_txt .slogan {padding-bottom: 20px;}
    #visual .visual_txt .small {padding-top: 25px;}

    #quick .list a {font-size: 17px; word-break: keep-all;}

    #gallery h4 {font-size: 28px;}
    #gallery .list a {height: 237px;}
}