@charset "utf-8";

/* area_visual */
.emph{font-size:18px; font-family:'Work Sans', Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
.area_visual{position:relative; width:100%; box-sizing:border-box; padding:24px 24px 0;}
.visual_list{position:relative; width:100%; height:860px;}
.visual_list > li{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50%; background-size:cover; text-align:center;}
.visual_list > li.active{display:block;}
.visual_list > li.img01{background-image:url(/images/main/img_visual01.jpg);}
.visual_list > li.img02{background-image:url(/images/main/img_visual02.jpg);}
.visual_list > li.img03{background-image:url(/images/main/img_visual03.jpg);}
.visual_list .text{position:absolute; top:30.23%; left:0; width:100%;}
.visual_list .text em{display:block; margin-bottom:21px; font-weight:500; color:#f3bc24;}
.visual_list .text h2{position:relative; z-index:1; font-size:55px; font-family:'AritaBuri', Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-weight:800; text-shadow:0 5px 3px rgba(0,0,0,.15); color:#fff; letter-spacing:-1.5px;}
.visual_list .text p{opacity:0; font-weight:400; color:#ededed; margin-top:25px;}
.visual_page{position:absolute; bottom:0; left:0; width:100%; text-align:center;}
.visual_page > a{opacity:0.5; display:inline-block; padding-bottom:13px; margin:0 14px; color:#fff; border-bottom:4px solid #a8872c;}
.visual_page > a.active{opacity:1;}
.visual_ctrl{position:absolute; top:999em; left:-999em; font-size:0; width:0; height:0; overflow:hidden;}

/* visual_quick */
.visual_quick{position:absolute; bottom:100px; left:50%; width:1014px; transform:translateX(-50%);}
.visual_quick ul{width:103%; margin:0 auto;}
.visual_quick ul li{float:left; width:22%; height:209px; margin:10px 3% 0 0; background:rgba(255,255,255,.08); transition:box-shadow 0.3s, background-color 0.3s;}
.visual_quick ul li > a{display:block; position:relative; overflow:hidden; width:100%; height:100%; box-sizing:border-box; padding:35px 20px 5px 30px; background-repeat:no-repeat; background-position:50%; background-size:cover;}
.visual_quick ul li > a:after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:2px solid #fff;}
.visual_quick ul li em{display:inline-blok; poition:relative; padding-right:26px; margin-bottom:60px; font-size:16px; color:#eee4bd;}
.visual_quick ul li em:after{content:''; display:inline-block; position:absolute; top:50%; right:0; width:15px; height:2px; margin-top:-1px; background:#eee4bd; vertical-align:middle;}
.visual_quick ul li h3{margin-bottom:7px; font-weight:300; font-size:21px; letter-spacing:-1.5px; color:#fff; transition:all 0.2s;}
.visual_quick ul li span{display:inline-block; opacity:0.25; font-size:16px; letter-spacing:-1.0px; font-weight:100; color:#fff; -webkit-mask-image:-webkit-gradient(linear, left 50%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); transition:transform 0.3s ease-out 0.18s;}
@media all and (min-width:781px){
.visual_quick ul li:hover{box-shadow:12px 0 32px rgba(0,0,0,.23); border-color:transparent;}
.visual_quick ul li:hover h3{opacity:0.1;}
.visual_quick ul li:hover span{opacity:1; -webkit-mask-image:none; transform:translateY(-15px);}
.visual_quick ul li.quick01:hover > a{background-image:url(/images/main/img_quick01.jpg);}
.visual_quick ul li.quick02:hover > a{background-image:url(/images/main/img_quick01.jpg);}
.visual_quick ul li.quick03:hover > a{background-image:url(/images/main/img_quick01.jpg);}
.visual_quick ul li.quick04:hover > a{background-image:url(/images/main/img_quick01.jpg);}
.visual_quick ul li:hover > a:after{opacity:0;}
}

/* sec */
.sec article[class^="area_"]{position:relative; float:left;}
.sec article[class^="area_"] h4{margin-bottom:26px; font-weight:700; font-size:24px; color:#1c1c1c; letter-spacing:-0.075em;}
.sec article[class^="area_"] h4 + a{display:inline-block; position:absolute; top:91px; right:0; width:22px; height:22px; border:1px solid #c2c2c2; text-align:center; transition:all 0.2s ease-out 0s;}
.sec article[class^="area_"] h4 + a img{display:inline-block; padding:13px 0px; vertical-align:middle;}
.sec article[class^="area_"] h4 + a:after{content:""; position:absolute; top:0; left:0; width:0; height:100%; background:#000; transition:all 0.2s ease-out 0s;}
.sec article[class^="area_"] h4 + a:hover:after{width:100%;}
.sec article[class^="area_"] h4 + a > span > i{transition:all 0.2s ease-out 0s;}
.sec article[class^="area_"] h4 + a:hover > span > i{opacity:0.5; z-index:99; background:#fff;}
.sec article[class^="area_"] h4 + a > span > i:nth-child(1){display:inline-block; position:absolute; top:50%; margin-top:-5px; left:50%; width:1px; height:11px; background:#aaa;}
.sec article[class^="area_"] h4 + a > span > i:nth-child(2){display:inline-block; position:absolute; top:50%; left:50%; margin-left:-5px; width:11px; height:1px; background:#aaa;}
.sec article[class^="area_"] h4 + a:hover{border:1px solid #000;}

.sec{width:100%;}
.sec .inr{position:relative; max-width:1200px; padding:60px 0; box-sizing:border-box; margin:0 auto;}
.sec .inr:after{content:''; display:block; clear:both;}
.list_link{margin:0 auto;}
.list_link > li{float:left; width:15.83%; height:80px; margin-right:1%; margin-bottom:0.5%; margin-top:0.5%; background:#fff; border-radius:10px; transition:0.4s; box-sizing:border-box;}
.list_link > li:nth-child(6n){margin-right:0;}
.list_link > li:hover{box-shadow:0 0 10px #b4b4b4;}
.list_link > li > a{display:block; width:90%; height:100%; background-repeat:no-repeat; background-position:50%; background-size:contain; margin:0 auto; text-indent:-9999px;}
.list_link > li.link01 a{background-image:url(/images/main/icon_link01.jpg);}
.list_link > li.link02 a{background-image:url(/images/main/icon_link02.jpg);}
.list_link > li.link03 a{background-image:url(/images/main/icon_link03.jpg);}
.list_link > li.link04 a{background-image:url(/images/main/icon_link04.jpg);}
.list_link > li.link05 a{background-image:url(/images/main/icon_link05.jpg);}
.list_link > li.link06 a{background-image:url(/images/main/icon_link06.jpg);}
.list_link > li.link07 a{background-image:url(/images/main/icon_link07.jpg);}
.list_link > li.link08 a{background-image:url(/images/main/icon_link08.jpg);}
.list_link > li.link09 a{background-image:url(/images/main/icon_link09.jpg);}
.list_link > li.link10 a{background-image:url(/images/main/icon_link10.jpg);}
.list_link > li.link11 a{background-image:url(/images/main/icon_link11.jpg);}
.list_link > li.link12 a{background-image:url(/images/main/icon_link12.jpg);}

/* sec01 */
.sec01 {background-color:#fff;}
.sec01 .inr{overflow:hidden; padding:0;}
.sec01 p {letter-spacing:-0.075em; color:#9d9d9d; padding:8px 0;}
.sec01 article{width:346px; padding:85px 0 85px 40px; margin-right:40px; border-left:solid 1px #efefef; margin-right:40px;}
.sec01 article:first-child{padding-left:0; border:none;}
.sec01 article:last-child{margin-right:0;}

/* sec02 */
.sec02{overflow:hidden;}


/* effect */
.noAni{transition-delay:0s !important;}
.Ani{transition-delay:0.2s !important;}
.moveUp{animation:moveUp 0.8s ease forwards; animation-delay:0.2s;}

/* keyframes */
@-webkit-keyframes moveUp{
	0%{ -webkit-transform:translateY(0px); opacity:0; }
	100%{ -webkit-transform:translateY(-30px); opacity:0.25; }
}
@keyframes moveUp{
	0%{ transform:translateY(0px); opacity:0; }
	100%{ transform:translateY(-30px); opacity:0.25; }
}

/* pc divide */
@media all and (max-width:1300px){
	.visual_list{height:760px;}
	.visual_list .text{top:26.23%;}	
	.visual_quick{width:900px;}
	.visual_quick ul{width:102%;}
	.visual_quick ul li{width:23%; margin-right:2%;}
	.visual_quick ul li > a{padding:25px 15px 5px 23px;}

	.sec .inr{padding:50px 0;}
  
  .sec01 .inr{padding:0 24px; display: -webkit-flex; display:flex; justify-content:center; -webkit-justify-content:center;}
  .sec01 article{flex:5;}
  .sec01 article:first-child{flex:3;}

  .list_link{width:98%;}
}

/* tablet */
@media all and (max-width:1024px){
	.area_visual{padding:15px 15px 0;}
	.visual_list .text{top:18.23%;}
	.visual_quick{max-width:556px; width:90%;}
	.visual_quick ul li{width:48%; height:127px;}
	.visual_quick ul li > a{padding-left:84px;}
	.visual_quick ul li em{position:absolute; left:23px;}
	.visual_quick ul li h3{font-size:18px;}
	
	.sec .inr{padding:40px 0;}
  
  .sec article[class^="area_"] h4 + a{top:66px;}
  .sec01 .inr{padding:0 30px;}
  .sec01 article{padding:60px 0 60px 40px;}
  .sec01 article:first-child{flex:5;}
  .sec01 article:nth-child(2){margin-right:0;}
  .sec01 .area_gospel{display:none;}
}

/* mobile */

@media all and (max-width:780px){
	.emph{font-size:15px;}
	.visual_list{height:660px;}
	.visual_list .text em{margin-bottom:10px;}
	.visual_list .text h2{font-size:45px;}
	.visual_page > a{font-size:14px;}

	.visual_quick ul li{height:auto;}
	.visual_quick ul li > a{padding:20px 15px;}
	.visual_quick ul li > a:after{border-width:1px;}
	.visual_quick ul li em{position:relative; top:auto; bottom:auto; right:auto; left:auto; margin-bottom:5px;}
	.visual_quick ul li h3{margin-bottom:0; font-size:16px;}
	.visual_quick ul li span{display:none;}
	.visual_quick ul li:hover{background-color:rgba(158,125,34,0.7);}
	.visual_quick ul li:hover > a:after{border-color:#9e7d22;}

  .sec .inr{padding:30px 0;}
  .list_link{width:90%;}
	.list_link > li{width:32.6666%; margin-bottom:1%;}
  .list_link > li:nth-child(3n){margin-right:0;}
  .list_link > li > a{width:95%;}
  
  .sec01 .inr{flex-direction:column; align-items:center;}
  .sec01 article{width:85%; margin:0; border-left:none; padding:25px 0;}
  .sec01 article:first-child{border:none;}
  .sec01 .area_gospel{display:block;}
  .sec01 article ul{border-top:solid 2px #222}

  .sec article[class^="area_"] h4{margin-bottom:18px; font-size:21px;}
  .sec article[class^="area_"] h4 + a{top:34px;}
  .sec01 p {padding:12px 0; border-bottom:solid 1px #efefef}
}
@media all and (max-width:640px){
	.area_visual{padding:0;}
	.visual_list{height:590px;}
	.visual_list .text{width:90%; left:5%;}
	.visual_list .text h2{font-size:32px; font-weight:600;}
	.visual_list .text p br{display:none;}
	.visual_page > a{margin:0 8px; font-weight:400; font-size:13px;}

  .sec01 article{width:90%; padding:20px 0;}
}
@media all and (max-width:400px){
	.visual_list .text h2{font-size:30px; word-break:keep-all;}
  .visual_list .text h2 br{display:none;}
  
  .sec01 article{flex:0;}
  .sec01 p {padding:9px 0; border-bottom:solid 1px #efefef; font-size:14px;}

	.list_link > li{height:60px;}
}