@charset "utf-8";

#contents { position:relative; z-index:1;}
.main_container {position:relative; padding:200px 0 120px; overflow:hidden;}
.main_con {position:relative; max-width:780px; width:50%; left:44%; z-index:5;}
.mainBg {position:absolute; width:100%; max-height:960px; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(0,43,25,0.8); z-index:1;}
.mainBg .swiper-container { opacity:0.2;}
.mainBg .swiper-slide {background-position:center center !important; background-size:cover !important; background-repeat:no-repeat !important;}
.mainBg_typo {position:absolute; max-width:1320px; width:94%; left:55%; bottom:50%; transform:translateX(-50%); color:#fff; opacity:0; z-index:3;}
.mainBg_typo .title01 {font-family: 'DWImpactamin'; font-size:2.14em; line-height:1.4em; letter-spacing:0.02em;}
.mainBg_typo .title02 {font-family: 'DWImpactamin'; font-size:4.28em; line-height:1.1em; letter-spacing:0.02em; margin:0.2em 0;}
.mainBg_typo .text {font-family: 'NEXON Lv2 Gothic'; font-size:0.928em; line-height:1.7em; letter-spacing:0.2em; text-transform:uppercase; opacity:0.5;}

.mainBg.active_a .swiper-container { opacity:1; transition:all 1.5s ease-out; }
.mainBg.active_a .mainBg_typo {opacity:1; left:50%; transition:all 0.4s ease-out 1s;}

.mainBg_navigation { position:absolute; left:0; bottom:-70px; z-index:3;}
[class^="mainBg-swiper"] { float:left; display:inline-block; padding:8px; border:1px solid rgba(255,255,255,0.7); cursor:pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.mainBg-swiper-next {border-left:0;}
[class^="mainBg-swiper"]:hover {background:rgba(0,0,0,0.3);}
[class^="mainBg-swiper"] svg { width:30px; height:30px; color:#fff; vertical-align:top;}


.board_last {font-family: 'NEXON Lv2 Gothic'; font-size:1.142em; line-height:1.6; color:#fff;}
.board_last .slider-nav {margin-bottom:15px;}
.board_last .slider-nav .slick-slide {position:relative; display:inline-block; width:auto !important; font-size:1.125em; line-height:28px; color:rgba(255,255,255,0.5); padding:0 15px; cursor:pointer; vertical-align:middle; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.board_last .slider-nav .slick-slide .circle-down {display:none;}
.board_last .slider-nav .slick-slide.slick-current {font-size:1.5em; color:#ffcb18;}
.board_last .slider-nav .slick-slide.slick-current .circle-down {display:inline-block; width:0.9em; height:0.9em; vertical-align: middle;}
.board_last .slider-nav .slick-slide::before {position:absolute; content:""; width:1px; height:15px; background:rgba(255,255,255,0.5); left:0; top:50%; transform:translateY(-50%) rotate(30deg); }
.board_last .slider-nav .slick-slide:first-child {padding-left:0;}
.board_last .slider-nav .slick-slide:first-child::before {display:none;}
.board_last .slider-for .slick-arrow {position:absolute; top:-40px; background:none; border:none; }
.board_last .slider-for .slick-arrow.slick-prev {left:none; right:30px;}
.board_last .slider-for .slick-arrow.slick-next {right:0;}
.board_last .slider-for .slick-arrow svg {width:20px; height:20px; color:#fff;}


.mainLink_wrap {background:rgba(0,114,66,0.8); padding:24px 30px; font-family: 'NEXON Lv2 Gothic'; font-size:1.142em; line-height:1.6; color:#fff; margin-top:35px;}
.mainLink_wrap dt {font-size:1.5em; margin-bottom:1em;}
.mianLink {display:flex; justify-content: space-around;}
.mianLink li {max-width:140px;width:22%; text-align:center;}
.mianLink li a {color:#fff;}

.mianLink li .title {display:block; margin:0 0 0.7em;}

.mianLink li a .title::before {display:block; content:""; width:100%; height:0; padding-bottom:100%; background-color:rgba(255,255,255,0.1); background-image:url("/theme/dtree/images/main/main_link.png"); background-size:400%; border-radius:50%; overflow:hiddne; margin-bottom:1.5em;
-webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out;}
.mianLink li a:hover .title::before {background-color:rgba(255,255,255,1);}

.mianLink li:nth-child(1) a .title::before {background-position:0 0;}
.mianLink li:nth-child(2) a .title::before {background-position:33.34% 0;}
.mianLink li:nth-child(3) a .title::before {background-position:66.67% 0;}
.mianLink li:nth-child(4) a .title::before {background-position:100% 0;}

.mianLink li:nth-child(1) a:hover .title::before {background-position:0 100%;}
.mianLink li:nth-child(2) a:hover .title::before {background-position:33.3334% 100%;}
.mianLink li:nth-child(3) a:hover .title::before {background-position:66.6667% 100%;}
.mianLink li:nth-child(4) a:hover .title::before {background-position:100% 100%;}

@media  (max-width: 1280px){
.main_con {width:calc(60% - 70px); left:40%;}
.tree_list ul li { width: calc(50% - 5px);}
.mainLink_wrap {padding:20px 24px; margin-top:1.6em;}
.mainBg_typo {font-size:0.9em;}
}

@media  (max-width:768px){
.mainBg_typo {left:50px; transform:none; bottom:60px; font-size:0.65em;}
.mainBg.active_a .mainBg_typo { left:15px; }
.mainBg_navigation { bottom:-50px;} 
[class^="mainBg-swiper"] svg { width:20px; height:20px;}
.mainBg_typo .text {line-height:2.3em;}

.main_container { padding:100px 0 220px; }
.main_con {width:calc(100% - 30px); left:15px;}

.board_last .slider-nav .slick-slide {padding:0 10px;}
.mainLink_wrap {padding:20px; margin-top:0.8em;}

}

@media  (max-width:520px){
.mainBg_typo {font-size:0.6em}
}


/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative; max-width:1200px; margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} 
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

@media  (max-width: 1024px){
.hd_pops {max-width:400px !important; width:90% !important; height:auto !important;}
}