/* 공통 */
.bg_gray { background: #f5f5f5; }
.bg_brw1 { background: #bf8c50; }
.bg_brw2 { background: #8d7d6f; }
.bg_brw3 { background: #888888; }
.main_container { padding: 50px 0; width: 100%; max-width: 1200px; margin: auto; }
.main_container > h4 { font-size: 30px; text-align: center; letter-spacing: -1px; line-height: 40px }
.main_container > h5 { font-size: 16px; font-weight: 300; color: #888888; text-align: center; }


/* swiper slider */
.main_img_slider { position: relative; width: 100%; height: 550px; transition: height 0.2s ease-in-out; }
.main_img_slider .swiper-slide { display: flex; justify-content: flex-start; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; }
.main_img_slider > div > div > div >  p { word-break: keep-all; color: #fff; font-size: 20px; font-weight: 300; margin-top: 28px;  }
.main_img_slider > div > div > div >  h4 { color: #fff; font-size: 51px; font-weight: 500; line-height: 63px; letter-spacing: -1.5px }
.main_img_slider .slide1 { width: 100%; max-width: 1200px; padding: 0 10px; margin: auto; }
.swiper-pagination { bottom: 20px !important; }
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 12px 5px !important }
.swiper-pagination-bullet { width: 11px !important; height: 11px !important; background: rgba(297,297,297,0.9) !important; opacity: 1 !important; border: rgba(297,297,297,0.9) !important;}
.swiper-pagination-bullet-active { background: #9a7654 !important; border: none !important; }
/* } */

/* 컨텐츠 */
.content01 > ul { width: 100%; display: flex; justify-content: space-between;  }
.content01 > ul > li:nth-of-type(1) { width: 17%; min-width: 204px; max-width: 204px; padding: 60px 30px 40px; background: #9a7654; }
.content01 > ul > li:nth-of-type(1) > h4 { color: #ffffff; font-weight: 600; font-size: 30px; margin-bottom: 8px; }
.content01 > ul > li:nth-of-type(1) > p { color: #ffffff; font-weight: 300; font-size: 18px; margin-bottom: 75px; }
.content01 > ul > li:nth-of-type(1) > p > span { font-weight: 500; }
.content01 > ul > li:nth-of-type(1) > a { background: rgba(297,297,297,0.9); color: #9a7654; padding: 9px 22px; }
.content01 > ul > li:nth-of-type(2) { width: 83%; }
.content01 > ul > li:nth-of-type(2) > div > ol { display: flex; justify-content: space-between;  border: 1px solid #cccccc; border-bottom: none; border-left: none; }
.content01 > ul > li:nth-of-type(2) > div > ol > li { width: 100%; padding: 15px; word-break: keep-all; font-size: 18px; display: flex; justify-content: center; align-items: center; text-align: center; background: #f5f5f5; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; }
.content01 > ul > li:nth-of-type(2) > div > ol > li:last-child { border-right: none; }
.content01 > ul > li:nth-of-type(2) > div > ol > li:hover { cursor: pointer; }
.content01 > ul > li:nth-of-type(2) > div > ol > .active { background: #ffffff; color: #9a7654; font-weight: 600; border-bottom: 1px solid #ffffff; }
.content01 > ul > li:nth-of-type(2) > div > div { display: none; padding: 30px; border: 1px solid #cccccc; border-top: none; border-left: none; }
.content01 .pic_lt { margin-bottom: 0; border: none; display: block!important; }
.content01 .pic_lt ul { display: flex; justify-content: flex-start; padding: 0; }
.content01 .pic_lt li { clear: both; width: 24%; padding: 0; border: 1px solid #cccccc; margin-right: 1.4%; }
.content01 .pic_lt li:last-child { margin-right: 0; }
.content01 .pic_lt li .lt_img { margin: 0;  }
.content01 .pic_lt li .lt_img img { height: 184px; }
.content01 .pic_lt ul:after { display: none; }
.content02 > ul { width: 100%; margin: 35px 0 10px; display: flex; justify-content: space-between; flex-flow: row wrap; }
.content02 > ul > li { width: 32.4%; padding: 35px; display: flex; justify-content: space-between; align-items: center; }
.content02 > ul > li:hover { cursor: pointer; }
.content02 > ul > li > div > h4 { font-size: 22px; font-weight: 500; color: #ffffff; letter-spacing: -1px; }
.content02 > ul > li > div > p { font-size: 16px; color: #ffffff; }
.content03 > dl { display: flex; justify-content: space-between; flex-flow: row wrap; margin: 40px 0; }
.content03 > dl > dt { width: 21%; }
.content03 > dl > dt > h4 { font-size: 30px; font-weight: 600; letter-spacing: -2px; line-height: 28px; }
.content03 > dl > dt > p { font-size: 18px; font-weight: 400; letter-spacing: -1px; margin: 20px 0 40px; }
.content03 > dl > dt > a { background: #a4978c; font-size: 16px; color: #ffffff; padding: 9px 22px; }
.content03 > dl > dd:nth-of-type(1) { width: 40%; position: relative; overflow: hidden; }
.content03 > dl > dd:nth-of-type(1) > iframe { width: 102%; height: 268px; }
.content03 > dl > dd:nth-of-type(2) { width: 32.5%; height: 268px; padding: 35px; display: flex; justify-content: flex-start; align-items: flex-end; background: url(../../../img/main_bg_01.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; }
.content03 > dl > dd:nth-of-type(2) > div > h4 { color: #ffffff; font-weight: 600; font-size: 25px; margin-bottom: 22px; }
.content03 > dl > dd:nth-of-type(2) > div > p { color: #ffffff; font-weight: 300; font-size: 17px; }



@media(max-width: 1260px){
	.main_container { padding: 50px 15px; }
	.content03 > dl > dd:nth-of-type(1) > iframe, .content03 > dl > dd:nth-of-type(2) { height: 21vw; }
}
@media(max-width: 1170px){
	.content01 > ul > li:nth-of-type(2) > ol > li { font-size: 15px; padding: 15px 5px; }
	.content01 > ul > li:nth-of-type(2) > div > ol > li { font-size: 15px; padding: 15px 5px; }
	.content01 > ul > li:nth-of-type(1) { padding: 40px 30px 27px }
	.content01 > ul > li:nth-of-type(2) > div > div { padding: 16px; }
}
@media(max-width: 960px){
	.content01 > ul { flex-flow: row wrap;  }
	.content01 > ul > li:nth-of-type(1) { padding: 21px; position: relative; width: 100%; min-width: 100%; max-width: 100%; }
	.content01 > ul > li:nth-of-type(1) > p { margin-bottom: 0; font-size: 17px; }
	.content01 > ul > li:nth-of-type(1) > a { position: absolute; right: 21px; bottom: 21px; }
	.content01 > ul > li:nth-of-type(1) > h4 { font-size: 25px; }
	.content01 > ul > li:nth-of-type(2) { width: 100%; }
	.content01 > ul > li:nth-of-type(2) > ol, .content01 > ul > li:nth-of-type(2) > div { border-left: 1px solid #cccccc; }
	.content01 .pic_lt li .lt_img img { height: 165px; }
	.content02 > ul > li { padding: 21px; }
	.content03 > dl { position: relative; width: 100%; max-width: 600px; margin: auto ; }
	.content03 > dl > dt { width: 100%; }
	.content03 > dl > dt > h4 { text-align: center; }
	.content03 > dl > dt > p { text-align: center; margin: 10px 0 34px; font-size: 16px; font-weight: 300; color: #888888; }
	.content03 .br_hidden { display: none; }
	.content03 > dl > dd { width: 100% !important; }
	.content03 > dl > dd:nth-of-type(2) { padding: 21px; }
	.content03 > dl > dd:nth-of-type(2) > div > h4 { margin-bottom: 13px; }
	.content03 > dl > dt > a { position: absolute; bottom: 21px; right: 21px; background: transparent; border: 1px solid #ffffff;  }
	.content03 > dl > dd:nth-of-type(1) > iframe { height: 340px; }
	.content03 > dl > dd:nth-of-type(2) { height: auto; }
}

@media(max-width: 760px){
	.main_img_slider { height: 380px; }
	.main_img_slider .slide1 { max-width: 600px; }
	.main_img_slider > div > div > div > h4 { font-size: 40px; line-height: 50px; }
	.main_img_slider > div > div > div > p { font-size: 17px; margin-top: 18px; }
	.swiper-pagination-bullet { width: 8px !important; height: 8px !important; }
	.pc_menu { display: none; }
	.content01 > ul > li:nth-of-type(1) { display: none; }
	.content01 > ul > li:nth-of-type(2) { max-width: 600px; margin: auto; }
	.content01 > ul > li:nth-of-type(2) > div { }
	.content01 > ul > li:nth-of-type(2) > div:nth-of-type(odd) { display: block !important; }
	.content01 > ul > li:nth-of-type(2) > div:nth-of-type(2n) {  }
	.content01 > ul > li:nth-of-type(2) > ol { flex-flow: row nowrap; }
	.content01 > ul > li:nth-of-type(2) > ol > li { width: 100%; }
	.content01 .pic_lt ul { flex-flow: row wrap; justify-content: space-between; }
	.content01 .pic_lt li { width: 48.5%; margin-right: 0; margin-bottom: 20px; }
	.content01 .pic_lt li .lt_img img { height: 27vw; }
	.content01 > ul > li:nth-of-type(2) > div > ol > li { padding: 5px; letter-spacing: -1.5px }
	.content01 > ul > li:nth-of-type(2) > div > div { padding: 30px 30px 10px ; }
	.content02 > ul { width: 100%; max-width: 600px; margin: 34px auto 0; }
	.content02 > ul > li { width: 100%; margin-bottom: 10px; }
	.content02 > ul > li:last-child { margin-bottom: 0; }
}
@media(max-width: 644px){
	.content01 .pic_lt li { margin-bottom: 2.5vw; }
	.content03 > dl > dd:nth-of-type(1) > iframe { height: 53vw; }
	.main_container > h4, .content03 > dl > dt > h4 { font-size: 25px; line-height: 32px; }
	.content03 > dl > dt > p { margin: 2px 0 34px; }
}
@media(max-width: 450px){
	.content01 > ul > li:nth-of-type(2) > div > ol > li { font-size: 13px; }
	.content03 > dl > dt > a { font-size: 13px; padding: 5px 10px; }
	.content03 > dl > dd:nth-of-type(2) > div > h4 { font-size: 22px; }
	.content03 > dl > dd:nth-of-type(2) > div > p { font-size: 15px; }
	.main_img_slider { height: 320px; }
	.main_img_slider > div > div > div > h4 { font-size: 34px; line-height: 39px; }
	.main_img_slider > div > div > div > p { font-size: 16px; margin-top: 6px; }
	.content01 > ul > li:nth-of-type(2) > div > div { padding: 10px 10px 0 ; }
}
@media(max-width: 400px){
	.content02 > ul > li > div > h4, .content03 > dl > dd:nth-of-type(2) > div > h4 { font-size: 20px; }
	.content03 > dl > dd:nth-of-type(2) > div > p { font-size: 15px; }
	.content02 > ul > li > div > p { font-size: 14px; }
	.content03 > dl > dd:nth-of-type(2) { padding: 21px 21px 57px; }
	.content03 > dl > dt > a { right: auto; left: 21px; bottom: 15px; }
	.main_container > h4, .content03 > dl > dt > h4 { font-size: 26px; }
	.main_container > h5, .content03 > dl > dt > p { font-size: 15px; }
}

