@charset "utf-8";
/* CSS Document */

/* 공통 */
.mainContent {}

#WeduTxt .inner{ background:#4084a5;padding:37px 100px; color:#fff; box-sizing:border-box; display: grid; grid-template-columns:23% 1fr; border-radius:20px;align-items: center;}
#WeduTxt .s01 span{  font-size:20px; letter-spacing:0;}
#WeduTxt .s01 h1{ font-size:30px; font-weight:700;}
#WeduTxt .s02{ font-size:25px;}
#WeduTxt .s02 p strong{ color:#37e4fe; }
#WeduTxt .s02 p span{ border-radius:10px;display:inline-block; padding:7px 13px; font-size:23px; margin:5px 0;}
#WeduTxt .s02 p .span1{ color:#ffff00; border:1px solid #ffff00}
#WeduTxt .s02 p .span2{ color:#003470; background:#ffff00}
#WeduTxt .s02 p b{color:#ffff00; display:inline-block; margin:0 3px;}
#WeduTxt .s02 p span:last-child{ margin-right:10px;}


#sec01{ margin-top:20px;}
#sec01 .inner{display: flex; flex-wrap: wrap;gap:20px;}
#sec01 .s01{ width:60%}
#sec01 .s02{ width:calc((100% - 60%) - 20px)}
#sec01 .s02 .area01{ background:#0072bc url(../img/main/sec02-02.png) no-repeat 90% 70%;background-size: auto 60%; padding:50px; box-sizing:border-box; color:#fff; width:100%; display:block; margin-bottom:20px;}
#sec01 .s02 .area01 h1{ font-size:32px; margin-bottom:7px; font-weight:700;}

.hid {position: absolute;margin: -1px; padding: 0; width: 1px; height: 1px;border: 0;clip: rect(0, 0, 0, 0);overflow: hidden;}
/* slick slide common */
.slick-slider {-webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-slide {display: none; min-height: 1px; vertical-align: middle;}
.slick-list {overflow: hidden;}
.slick-list.dragging {cursor: pointer;}
.slick-initialized .slick-slide {display: inline-block;}
.slick-arrow.slick-hidden {display: none;}
.slick-current {opacity: 1; display: block;}
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}

/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }


/* 메인비주얼 */
.MVisual { position: relative; width:100%; height:100%; z-index: 1; }
.MVisual .slider { line-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); isolation: isolate; }
.MVisual .slider,
.MVisual .slick-list,
.MVisual .slick-track { position: relative; height: 100%; z-index: 1; }
.MVisual .slick-slide{ height:100%;}
.MVisual .item { position: relative; background-repeat:no-repeat; background-size:cover; background-position:50% 50%; }

.MVisual .control { position: absolute; bottom: 0; right: 0;  }
.control {  display: flex; align-items: center; z-index: 2; background:#fff; padding:15px 20px; }
.control .page { color: #333; margin-right:10px; }
.control .page span { position: relative; display: inline-block; padding-left:80px; margin-left: 0.4rem; color: #333; }
.control .page span::before { position: absolute; top: 50%; left:10px; width:50px; height:2px; background: #111; content: ""; }
.control a { color: #333; padding: 0 0.1rem; }
.control a.play { display: none; }

/* 팝업 */
.popupZone { position: relative; width:100%; }
.popupZone .pop_img { width:100%; overflow: hidden;}
.popupZone .slider,
.popupZone .slick-list,
.popupZone .slick-track { position: relative;z-index: 1;}
.popupZone .pop_img .item { width:100%; }
.popupZone .pop_img .item a { position: relative; display: block; }
.popupZone .pop_img .item a img { width:100%;}
.popupZone .control{ position: absolute; top:0;right: 0;  }

/* 팝업:active */


#sec02, #sec03, #sec04, #sec05{ margin-top:130px;}
#sec02 h1{ font-size:40px;}
#sec02 h1 b{ display:block; font-size:50px; }
#sec02 .area{ position:relative; background:#c2c5ca url(../img/main/sec03-06.jpg) no-repeat 100% 50%; background-size:auto 100%; padding:70px; margin-top:20px;}

#sec02 .area ul{display: grid; grid-template-columns:repeat(2, 1fr); width:60%; gap:15px;}
#sec02 .area ul li a{ position:relative; background:#fff; padding:30px 50px; border-radius:17px; display:block;transition: all 0.4s;}
#sec02 .area ul li a:before{ content: "\ea6e";font-family: "remixicon"; position:absolute; top:50%;transform: translateY(-50%); right:30px; width:45px; height:45px; border-radius:50%; background:#c2c5ca; color:#fff; display:flex;justify-content: center;align-items: center;transition: all 0.4s;}
#sec02 .area ul li a:hover{ background:#06F; color:#fff;}
#sec02 .area ul li a:hover:before{ background:#fff; color:#06F;}
#sec02 .area ul li strong{ font-size:30px; font-weight:500;}
#sec02 .area ul li p{ color:#777; margin-top:5px;}
#sec02 .area ul li a:hover p{ color:rgb(255,255,255,0.8)}


#sec03 .tit{ display:flex; justify-content: space-between; border-bottom:2px solid #222; padding-bottom:20px; margin-bottom:30px;}
#sec03 .tit h1 b{ font-weight:700; color:#09a514}
#sec03 .tit p a{ font-size:35px; font-weight:700;}
#sec03 .tit p a i{ font-size:45px; margin-left:10px;}
#sec03 .tit p a+a{ margin-left:70px;}
#sec03 ul{display: grid; grid-template-columns:repeat(2, 1fr); }
#sec03 ul li{ border-bottom:1px #ddd solid; padding:50px 0;}
#sec03 ul li:nth-of-type(2n){ padding-left:50px;}
#sec03 ul li:nth-of-type(2n+1){ padding-right:50px;}
#sec03 ul li b{ font-size:25px; font-weight:500;}
#sec03 ul li .no{ color:#349e00;}
#sec03 ul li .bo{ color:#0070d8;}
#sec03 ul li h2{ margin:15px 0 5px 0;-webkit-line-clamp:1}
#sec03 ul li p, #sec03 ul li span{ color:#555;}
#sec03 ul li h2, #sec03 ul li p, #sec04 ul li p{display: -webkit-box;overflow: hidden;white-space: normal;word-wrap: break-word; -webkit-box-orient: vertical;}
#sec03 ul li p{max-height:78px;line-height:27px; -webkit-line-clamp: 3; margin-bottom:20px;}

#sec04 .tit{ display:flex; justify-content: space-between;}
#sec04 .tit i{ font-size:45px; font-weight:bold;}
#sec04 h1 b{ font-weight:700; color:#0070d8}
#sec04 ul{display: grid; grid-template-columns:repeat(4, 1fr); gap:37px; margin-top:20px;}
#sec04 ul li img{ width:100%; }
#sec04 ul li p{-webkit-line-clamp:1; padding:0 15px; font-size:23px; margin-top:15px;}
#sec04 ul li a{ box-sizing:border-box;transition: all 0.4s; padding-bottom:15px; display:block; border-radius:17px; overflow:hidden}
#sec04 ul li a:hover{ display:block; position:relative; transition: all 0.4s; background:#06C;border-radius:17px; overflow:hidden; color:#fff;}
#sec04 ul li a:hover:before{ content:''; position:absolute; top:0; left:0; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #06C;border-radius:17px;}

#sec05 .inner{ background:url(../img/main/sec06-01.jpg); background-size:cover;}
#sec05 dl{ padding:70px 100px; color:#fff;display: grid; grid-template-columns:270px 1fr;}
#sec05 dl dt strong{ font-size:27px;}
#sec05 dl dt p{ font-size:30px; margin-top:10px;}
#sec05 dl dt p b{ font-size:70px;}
#sec05 ul{display: grid; grid-template-columns:repeat(2, 1fr);gap:15px 70px;}
#sec05 ul li a{ color:#fff;display: grid; grid-template-columns:70px 1fr; font-size:23px;}
#sec05 ul li a b{ color:#eff60f}
#sec05 .more{ position:absolute; top:70px; right:70px; color:#fff; font-size:45px;}

#sec06 ul{display: flex; flex-wrap: wrap; gap:0 50px;justify-content: center; text-align:center; margin-top:100px; }
#sec06 ul+ul{ margin-top:30px;}
#sec06 ul li{}
#sec06 ul img{ height:50px; }
@media (max-width: 1980px) {
	
	#WeduTxt .inner{ padding:30px 70px;}
	#WeduTxt .s01 span{font-size:17px;}
	#WeduTxt .s01 h1{ font-size:25px;}
	#WeduTxt .s02{ font-size:20px;}

	
	
	#sec01{ margin-top:15px;}
	#sec01 .inner{gap:15px;}
	#sec01 .s02 {width: calc((100% - 60%) - 15px);}
	#sec01 .s02 .area01{ margin-bottom:15px;}
	#sec01 .s02 .area01{  padding:30px;}
	#sec01 .s02 .area01 h1{ font-size:27px;}
	
	.control{ }
	.control .page{font-size:16px;}
	.control .page span { padding-left:40px;}
	.control .page span::before {left:5px;width:30px;height:1px;}
	
	#sec02, #sec03, #sec04, #sec05{ margin-top:100px;}
	#sec02 h1{ font-size:30px;}
	#sec02 h1 b{ display:block; font-size:40px;}
	#sec02 .area{ padding:37px 70px;}
	#sec02 .area:before{ width:600px; height:300px;}
	#sec02 .area ul{ width:65%;}
	#sec02 .area ul li a{padding:20px 50px;}
	#sec02 .area ul li strong{ font-size:23px;}
	#sec02 .area ul li a:before{ width:35px; height:35px;}
	
	#sec03 .tit p a{ font-size:27px;}
	#sec03 .tit p a i{ font-size:30px;}
	#sec03 .tit p a+a{ margin-left:30px;}
	#sec03 ul li{ padding:30px 0;}
	#sec03 ul li:nth-of-type(2n){ padding-left:30px;}
	#sec03 ul li:nth-of-type(2n+1){ padding-right:30px;}
	#sec03 ul li b{ font-size:21px;}
	#sec03 ul li p{max-height:66px;line-height:23px;}
	
	#sec04 ul{ gap:30px;}
	#sec04 ul li p{font-size:20px;}
	#sec04 .tit i{ font-size:35px;}
	
	#sec05 dl{grid-template-columns:200px 1fr;}
	#sec05 dl dt strong{ font-size:23px;}
	#sec05 dl dt p{ font-size:25px;}
	#sec05 dl dt p b{ font-size:50px;}
	#sec05 ul li a{  font-size:19px; grid-template-columns:55px 1fr; }
	#sec05 .more{ position:absolute; top:50px; right:50px; color:#fff; font-size:35px;}
	
	
	#sec06 ul{ margin-top:70px;}
	#sec06 ul img{ height:40px; }

	
	
	
}
@media (max-width: 1440px) {
	#sec01{ margin:10px;}
	#sec01 .inner{gap:10px;}
	#sec01 .s02 .area01{ margin-bottom:10px;}
	#sec02 .area{ padding:50px;}
	#sec02 .area:before{ height:250px;}
	#sec03, #sec04, #sec06{ padding:0 10px;}
}

@media (max-width: 1280px) {
	#WeduTxt .inner{ display:block; padding:30px;}
	#WeduTxt .s01 h1{ margin-bottom:10px;}
	#WeduTxt .s02 p{ display:inline-block;}
	#WeduTxt .s02 p br{ display:none;}
	
	#sec04 ul{gap:10px;}
}
@media (max-width: 1024px) {
	#WeduTxt .s01 span{ display:none}
	#WeduTxt .s01 h1{ font-size:25px; }
	#WeduTxt .s02{ font-size:17px;}
	#WeduTxt .s02 p span{ font-size:15px; padding:7px 10px;}
	
	#sec02, #sec03, #sec04, #sec05{ margin-top:70px;}
	
	#sec01 .inner{ display:block;}
	#sec01 .s01{ height:500px; margin-bottom:10px;}
	#sec01 .s01, #sec01 .s02{ width:100%;}
	#sec01 .s02 .area02{ margin:0 -6px;}
	.popupZone .pop_img .item a img { padding:0 6px; box-sizing:border-box;}
	
	#sec02 .area{ padding:25px; background-image:none;}
	#sec02 .area:before{ display:none;}
	#sec02 .area ul{ width:100%;}
	#sec02 h1{ font-size:25px; padding:0 10px;}
	#sec02 h1 b{ font-size:30px;}
	#sec02 .area ul li strong{ font-size:20px;}
	
	
	#sec03 .tit{ display:block; margin-bottom:0;}
	#sec03 .tit h1{ font-size:30px; }
	#sec03 .tit p{ display:none;}
	#sec03 ul li h2{ font-size:20px;}
	
	#sec03 ul li:nth-of-type(2n+1){ padding-right:15px;}
	#sec03 ul li:nth-of-type(2n){ padding-left:15px;}
	
	#sec04 ul{grid-template-columns: repeat(3, 1fr);}
	#sec04 ul li:nth-child(7), #sec04 ul li:nth-child(8){ display:none;}
	
	#sec05 dl{ padding:70px; display:block;}
	#sec05 dl dt{ display:flex;align-items: center; margin-bottom:15px;}
	#sec05 dl dt p{ margin-top:0; margin-left:10px;}
	#sec05 dl dt p b{ font-size:25px;}
}



@media (max-width: 640px) {
	
	#WeduTxt .inner{ background-image:none;}
	#WeduTxt .s01 h1{ font-size:20px; }
	#WeduTxt .s02 { font-weight:400;}
	#WeduTxt .s02 p strong{font-weight:400;}
	#WeduTxt .s02 p span{ padding:3px 10px;}
	
	.control{ padding:10px 15px;}
	.control .page{ font-size:15px;}
	.control .page span::before { width:10px;}
	.control .page span{ padding-left:20px; margin-left:5px;}
	
	#sec01 .s01{ height:400px;}
	#sec01 .s02 .area01{ background-size:auto 60px;}
	#sec01 .s02 .area01 p{ padding-right:100px; font-size:16px;}
	#sec01 .s02 .area01 p br{ display:none;}
	
	#sec02 h1{ font-size:20px;}
	#sec02 h1 b{ font-size:25px;}
	#sec02 .area ul{ display:block;}
	#sec02 .area ul li+li{ margin-top:10px;}
	
	
	#sec03 .tit h1, #sec04 .tit h1{ font-size:25px;}
	#sec03 ul{ display:block;}
	#sec03 ul li:nth-of-type(2n+1){ padding-right:0px;}
	#sec03 ul li:nth-of-type(2n){ padding-left:0px;}
	#sec03 ul li{ padding:20px 0;}
	
	#sec04 ul{grid-template-columns: repeat(2, 1fr);}
	
	#sec05 dl{ padding:70px 30px;}
	#sec05 ul{ display:block;}
	#sec05 ul li+li{ margin-top:7px;}
	
	#sec06 ul img{ height:30px; padding:5px 0;}
	#sec06 ul+ul{ margin-top:0}
	
}


@media (max-width:480px) {
	
	#sec02, #sec03, #sec04, #sec05{ margin-top:50px;}
	#sec01 .s02 .area02{ margin:0;}
	
	.popupZone .pop_img .item a img { padding:0;}
	
	#sec02 .area ul li a {padding: 20px 25px;}
	#sec02 h1{ font-size:17px;}
	#sec02 h1 b{ font-size:23px;}
	#sec02 .area ul li strong{ font-size:19px;}
	
	#sec04 ul li p{ font-size:17px; padding:0 ;}
	
	#sec06 ul{gap:10px; margin-top:50px;}
	#sec06 ul img{ height:23px;} 
	
	
	
}