@charset "utf-8";

.sub-visual {position: relative; height: 540px; margin-top:100px; margin-bottom: 140px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sub-visual01 {background-image: url('../img/sub/sub_visual01.jpg');}
.sub-visual02 {background-image: url('../img/sub/sub_visual02.jpg');}
.sub-visual03 {background-image: url('../img/sub/sub_visual03.jpg');}
.sub-visual04 {background-image: url('../img/sub/sub_visual04.jpg');}
.sub-visual05 {background-image: url('../img/sub/sub_visual05.jpg');}
.sub-visual06 {background-image: url('../img/sub/sub_visual06.jpg');}
.sub-visual .title {height: calc(100% - 80px); align-content: center; text-align: center;}
.sub-visual05 .title, 
.sub-visual06 .title {height: 100%;}

.sub-visual .title p {font-size: 60px; font-weight: 600; line-height: 1.4em; color: #fff;}

.lnb {position: absolute; bottom: 0; left: 0; width: 100%;}
.lnb ul {display: flex; width: 100%; border-radius: 16px 16px 0 0; /* background: rgba(255,255,255,0.9); */ overflow: hidden;}
.lnb ul li {flex: 1;}
.lnb ul li a {position: relative; height: 80px;	align-content: center; font-size: 20px; font-weight: 500; line-height: 1.6em; color: #333; background: rgba(255,255,255,0.9); text-align: center; transition: all 0.3s;}
.lnb ul li.active a {font-weight: 600; background: #c60610; color: #fff;}
.lnb ul li.active a:hover {color: #fff;}
.lnb ul li a:hover {font-weight: 600; color: #c60610;}
.lnb ul li a:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 20px; background: #cacaca;}
.lnb ul li:last-child a:after {display: none;}
.lnb ul li.active a:after {display: none;}

.page-title {margin-bottom: 65px;}
.page-title h2 {position: relative; font-size: 56px; font-weight: 600; line-height: 1.4em; color: #000; text-align: center; padding-top: 18px;}
.page-title h2:before {position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ''; width: 30px; height: 6px; background: #c60610; border-radius: 3px;}

.arti-title {margin-bottom: 64px;}
.arti-title h3 {position: relative; font-size: 50px; font-weight: 600; line-height: 1.4em; color: #000; text-align: center; padding-top: 21px;}
.arti-title h3:before {position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ''; width: 8px; height: 8px; background: #c60610; border-radius: 50%;}

.real-cont {padding: 0 0 180px;}
.sub-content {padding: 0 0 180px;}
.sub-content.pb-0 {padding-bottom: 0;}

/* s101 */
.s101 .arti01 {padding-bottom: 140px;}
.s101 .arti01 .text-box {display: flex; margin-bottom: 75px;}
.s101 .arti01 .text-box .left {max-width: 415px; width: 100%;}
.s101 .arti01 .text-box .left b {display: block; font-size: 18px; font-weight: 700; line-height: 1em; color: #c60610; margin-bottom: 27px;}
.s101 .arti01 .text-box .left h3 {font-size: 40px; font-weight: 400; line-height: 1.25em; color: #333; margin-bottom: 157px;}
.s101 .arti01 .text-box .left h3 strong {font-weight: 600;}
.s101 .arti01 .text-box .sig {font-size: 24px; font-weight: 500; line-height: 1.4em; color: #444;}
.s101 .arti01 .text-box .sig span {font-weight: 600; color: #010101; margin-left: 14px;}
.s101 .arti01 .text-box .right {position: relative; width: 1%; flex: 1 1 auto; padding-left: 60px; margin-top: -5px;}
.s101 .arti01 .text-box .right:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 1px; height: calc(100% - 10px); background: #ddd;}
.s101 .arti01 .text-box .right p {font-size: 18px; line-height: 1.66em; color: #666;}
.s101 .arti01 .text-box .right p:not(:last-child) {margin-bottom: 30px;}
.s101 .arti01 .text-box .right p.mb-0 {margin-bottom: 0;}
.s101 .arti01 .text-box .sig.mob-only {display: none;}
.s101 .arti01 .img-box {height: 450px; background: url('../img/sub/s101_sectioin01_img.jpg') no-repeat center center/cover; border-radius: 20px; overflow: hidden;} 
.s101 .arti02 {padding: 122px 0 180px; background: #f8f8f8;}
.s101 .arti02 ul {display: flex; margin: 0 -10px;}
.s101 .arti02 ul li {width: 33.3333%;padding: 0 10px;}
.s101 .arti02 ul li .inner {height: 100%; background: #fff; border-radius: 20px; padding: 80px 64px 85px; text-align: center;}
.s101 .arti02 ul li .icon {margin-bottom: 33px;}
.s101 .arti02 ul li h4 {font-size: 26px; font-weight: 600; line-height: 1.4em; color: #333; margin-bottom: 16px;}
.s101 .arti02 ul li p {font-size: 18px; line-height: 1.66em; color: #666;}

/* s102 */
.s102 .history {position: relative; display: flex; align-items: flex-start; padding-bottom: 180px;}
.s102 .history:before {position: absolute; bottom: 0; left: 710px; content: ''; width: 1px; height: calc(100% - 15px); background: #c60610; z-index: 5;}
.s102 .history .title {position: sticky; top: 150px; max-width: 710px; width: 100%; text-align: right; padding-right: 110px;}
.s102 .history .title h3 {font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 600; line-height: 1em; color: #c60610; margin-bottom: 12px;}
.s102 .history .title p {font-family: "Poppins", sans-serif; font-size: 120px; font-weight: 700; line-height: 1em; color: #ebebeb; margin-bottom: 44px;}
.s102 .history .title figure {position: relative; z-index: 10;}
.s102 .history .title img {border-radius: 20px; overflow: hidden;}
.s102 .history .description { margin-top: -5px;}
.s102 .history .description .year-wrap {position: relative; padding-left: 130px;}
.s102 .history .description .year-wrap:not(:last-child) {margin-bottom: 87px;}
.s102 .history .description .year-wrap:before {position: absolute; top: 16px; left: -8px; content: ''; width: 17px; height: 17px; border: 4px solid #f4cdcf; background: #c60610; border-radius: 50%;}
.s102 .history .description .year-wrap:after {position: absolute; top: 24px; left: 0; content: ''; width: 100px; border: 1px dashed #ddd; z-index: -1;}
.s102 .history .description .year h4 {font-family: "Poppins", sans-serif; font-size: 46px; font-weight: 600; line-height: 1em; color: #c60610; margin-bottom: 35px;}
.s102 .history .description ul li {position: relative; font-size: 18px; line-height: 1.77em; color: #666; padding-left: 8px;}
.s102 .history .description ul li:before {position: absolute; top: 15px; left: 0; content: ''; width: 3px; height: 3px; background: #666; border-radius: 50%;}

/* s103 */
.s103 .arti01 {background: url('../img/sub/s103_bg.jpg') no-repeat center center/cover;}

/* s105 */
.s105 .map {margin-bottom: 50px; border-radius: 20px; overflow: hidden;}
.s105 .map .root_daum_roughmap {width:100% !important; height:460px !important;}
.s105 .map .root_daum_roughmap .wrap_map {height:460px !important;}
.s105 .map .root_daum_roughmap .border1,
.s105 .map .root_daum_roughmap .border2 {border: none;}
.s105 .map .root_daum_roughmap .border3, 
.s105 .map .root_daum_roughmap .border4 {background-color: transparent;}
.s105 .info-wrap {display: flex; justify-content: space-between;}
.s105 .info {flex: auto;}
.s105 .info dl {display: flex; font-size: 24px; line-height: 1.9em;}
.s105 .info dt {max-width: 70px; width: 100%; font-weight: 600; color: #000;}
.s105 .info dd {width: 1%; flex: 1 1 auto; color: #666;}
.s105 .btn-wrap {display: flex;}
.s105 .btn-wrap a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 10px;} 
.s105 .btn-wrap .btn-map {background-color: #c60610; margin-right: 8px;}
.s105 .btn-wrap .btn-print {background-color: #654f43;}
.s105 .btn-wrap a img {transition: all 0.5s;}
.s105 .btn-wrap a:hover img {transform: rotate(-20deg);}

/* s201 */
.s201 .slick-dots {position: relative; display: flex; justify-content: space-between; margin-bottom: 114px;}
.s201 .slick-dots:before {z-index: -1; position: absolute; top: 140px; left: 50%; transform: translateX(-50%); content: ''; width: calc(100% - 100px); border: 1px dashed #cacaca; }
.s201 .slick-dots li {}
.s201 .slick-dots li button {width: 280px; height: 280px; border-radius: 50%; border: 1px solid #ddd; background: #fff; text-align: center; transition: all 0.3s;}
.s201 .slick-dots li button p {font-size: 18px; font-weight: 600; line-height: 1.4em; color: #c60610; margin-bottom: 6px; transition: all 0.5s;}
.s201 .slick-dots li button h3 {font-size: 30px; font-weight: 600; line-height: 1.4em; color: #000; transition: all 0.5s;}
.s201 .slick-dots li.slick-active button {border: 10px solid #f4cdcf; background: #c60610;}
.s201 .slick-dots li.slick-active button p {color: rgba(255,255,255,0.5);}
.s201 .slick-dots li.slick-active button h3 {color: #fff;}
.s201 .slick-dots li button:hover {background: #c60610;}
.s201 .slick-dots li button:hover p {color: rgba(255,255,255,0.5);}
.s201 .slick-dots li button:hover h3 {color: #fff;}
.s201 .slick-dots li .dot-desc {display: block; font-size: 16px; line-height: 1.5em; color: #888; text-align: center; margin: 26px auto 0;}
.s201 .slide .dot-text {display: none; font-size: 14px; line-height: 1.5em; color: #888;}
.s201 .slide .item .text {position: relative;  margin-bottom: 60px;}
.s201 .slide .item .text:before {z-index: -1; position: absolute; top: 50%; left: 0; content: ''; width: 100%; height: 1px; background: #ddd;}
.s201 .slide .item .text h3 {width: 180px; line-height: 64px; font-size: 26px; font-weight: 600; color: #fff; background: #c60610; border-radius: 32px; text-align: center; margin: 0 auto;}
.s201 .slide .item .text h3 span {font-weight: 400;}
.s201 .slick-arrow {z-index: 5; position: absolute; bottom: calc((100% - 124px - 60px)/2); width: 80px; height: 80px; border-radius: 50%; background-color: #f8f8f8; background-repeat: no-repeat; background-position: center center; font-size: 0; border:0; transition: all 0.3s;} 
.s201 .slick-prev {left: -40px; background-image: url('../img/sub/s201_btn_prev.png');}
.s201 .slick-next {right: -40px; background-image: url('../img/sub/s201_btn_next.png');}
.s201 .slick-prev:hover {background-position: left 27px center;}
.s201 .slick-next:hover {background-position: right 27px center;}

/* s202 */
.img-list {display: flex; flex-wrap: wrap; margin: -36px -10px;}
.img-list li {width: 33.3333%; padding: 36px 10px;}
.img-list li img {border-radius: 20px; overflow: hidden; margin-bottom: 30px;}
.img-list li figcaption {font-size: 26px; font-weight: 500; line-height: 1.46em; color: #333; text-align: center;}

/* s601 */
.s601 .arti01 .wrap {display: flex; border-radius: 20px; overflow: hidden;}
.s601 .arti01 .wrap > div {width: 50%; min-height: 560px;}
.s601 .arti01 .text {display: flex; flex-direction: column; justify-content: center; background: #efedec; padding: 10px;}
.s601 .arti01 .text figure {margin-bottom: 38px; text-align: center;}
.s601 .arti01 .text p {font-size: 30px; font-weight: 500; line-height: 1.26em; color: #666; text-align: center; margin-bottom: 4px;}
.s601 .arti01 .text b {display: block; font-size: 40px; font-weight: 700; line-height: 1.4em; color: #353c3c; margin-bottom: 49px; text-align: center;}
.s601 .arti01 .text a {position: relative; width: 316px; line-height: 75px; background: #c60610; border-radius: 38px; font-size: 20px; font-weight: 600; color: #fff; padding: 0 40px; margin: 0 auto;}  
.s601 .arti01 .text a:after {position: absolute; top: 50%; right: 40px; margin-top: -6px; content: ''; width: 12px; height: 12px; background: url('../img/sub/S601_icon_more.png'); transition: all 0.5s;}
.s601 .arti01 .text a:hover:after {transform: rotate(270deg);}
.s601 .arti01 .img {align-content: center; border: 1px solid #ddd; border-left: 0; border-radius: 0 20px 20px 0; overflow: hidden;}