/*************** 공통 레이아웃 ***************/

.fwrap, .swrap { margin-left:auto; margin-right:auto; }
.fwrap { width:calc(100% - 120px);  }
.swrap { width:1360px; }
@media (max-width:1600px) {
	.fwrap, .swrap { width:92%; }
}




/*************** TOP 메뉴영역 ***************/
#head, #head .cate, #top_items .fwrap { height: 100px; transition: height ease-in-out .4s; }


/* #head */
#head { z-index: 1000; position: relative; width: 100%; border-bottom:1px solid rgba(255,255,255,.3); }

#head #gnb { position: absolute; width:100%; }
#head #gnb ul { position:relative; left: 53%; transform: translateX(-50%); width: 900px; z-index:1000; display: flex; justify-content: space-around; }
#head #gnb ul > li { width: 100%; position:relative; }
#head #gnb ul > li:before { display:block; content:''; position:absolute; width:100%; height:0; left:0; top:0; transition:height .4s;}
#head #gnb .cate { position: relative; display: block; }
#head #gnb .cate > strong { display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; font-weight:600; text-align:center; line-height:1.2; }


/* #head sub_menu */
#head .sub_menu { opacity: 0; height:0; overflow:hidden; transform:translateY(-20px); }
#head .sub_menu a { display: block; padding: 6px 10px; text-align: center; color: #222; font-size: 14.5px; line-height: 1.3; }


/* gnb hover */

#head #gnb ul > li:hover:before { height:100%; background-color:#000; }
#head #gnb .cate:hover ~ .sub_menu, #head .sub_menu:hover { opacity: 1; height:auto; overflow:auto; transform:translateY(0px); padding: 25px 0; transition: height 1s, opacity 1s, transform .5s; }
#head #gnb ul > li:hover .cate > strong, #head #gnb ul > li:hover .sub_menu a { color:#fff; }
#head #gnb ul > li:hover .cate { border-bottom:1px solid rgba(255,255,255,.25); }
#head .sub_menu a:hover { opacity: .7; }








/* #top_items */

#top_items .fwrap { position: relative; }
#top_items #logo { position: relative; }
#top_items #logo img { transform-origin:left; transform:translateY(10%); }
#head #top_items #sub_items { position: absolute; height:100%; right: 0; top: 0; }
#head #top_items #sub_items > li { float: left; height: 100%; }
#head #top_items #sub_items > li:nth-child(n+2) { margin-left: 30px; }

#head #top_items #sub_items #sitemap_btn { display:block; position: relative; top: 50%; transform: translateY(-50%); }
#head #top_items #sub_items #sitemap_btn ul { width:28px; cursor:pointer; padding:20px 0; position:relative; }
#head #top_items #sub_items #sitemap_btn ul li { margin:6px 0; width: 100%; height: 2px; transform-origin: center; transition: transform 0.4s; background: #222;}





/* re_height */

#head.re_height, #head:before, #head.re_height #gnb .cate, #head.re_height #top_items .fwrap { height: 80px; }
#head.re_height #top_items #logo img { height:66px; }
#head.re_height #gnb .cate:hover ~ .sub_menu, #head.re_height .sub_menu:hover { padding: 15px 0; }
#head.re_height .sub_menu a { padding: 5px 10px; }

#head.re_height #dropdown_bg { top: 80px; }
#head.re_height #gnb ul:hover + #dropdown_bg { height: calc(100% - 80px); }



/* re color */
#head.re_color #gnb .cate > strong { color: #222; }
#head.re_color:not(.sitemap_on) #top_items #sub_items #sitemap_btn li { background-color: #333; }


/* scroll fix */

#head.fix { position:fixed; top:0; background:#fff; box-shadow: 0 0 10px 0px rgba(0, 0, 0, .15); }
#head.fix:before { display:block; }

#head.disable { display: none; }
#head.disable.sitemap_on { display:block; }



@media (max-width:1660px){
	#head #gnb ul { width:900px; }
	#head #top_items #sub_items #sitemap_btn ul { width: 24px; }
	#head #top_items #sub_items #sitemap_btn ul li { margin:5px 0; }
}

@media (max-width:1250px){
	#head, #head #top_items, #top_items .fwrap { height: 60px !important; }
	#top_items #logo img { height:42px; transform:translateY(9px); }
	#head #gnb { display: none; }
	#head #top_items #sub_items #sitemap_btn ul { width: 21px; }
	#head #top_items #sub_items #sitemap_btn ul li { margin:4px 0; }
}







/* sitemap */
#head #sitemap { z-index: 1050; position: fixed; opacity: 0; left: 100vw; top:0; width: 100%; height:100%; background-color: rgba(0, 0, 0, 0.7); transition: all .5s; }

#head.sitemap_on #sitemap { opacity: 1; left: 0; }

#head.sitemap_on #top_items #logo { position:relative; z-index:1100; }
#head.sitemap_on #top_items #logo img:first-child { display:none; }
#head.sitemap_on #top_items #logo img:last-child { display:inline; }

#head #sitemap .sitemap_wrap { height: 100%; width:100%; position:absolute; left:100vw;  background-color: #fff; transition: all .8s; }
#head.sitemap_on #sitemap .sitemap_wrap { left:0; }

#head #sitemap .fwrap { position: relative; height: 100%; }

#head #sitemap .address { position: absolute; bottom:0; width:20%; }
#head #sitemap .address dt { font-size: 16px; font-weight: 700; color: #fff; }
#head #sitemap .address dd { opacity: .8; font-size: 15px; line-height: 1.5; color: #fff; width:80%; }

#head #sitemap .con { position: absolute; width: 100%; top:52%; transform:translateY(-50%); }
#head #sitemap .con:after { clear:both; visibility:hidden; display:block; content:''; }
#head #sitemap .con p.tit { float: left; font-size: 54px; font-weight: 500; font-family:'jalnan_g', 'pretendard', sans-serif; background:linear-gradient(45deg, #b9910e, #f6d419, #b9910e); background-clip: text; -webkit-background-clip: text; color: transparent; }

#head #sitemap .maps { float: right; display: flex; flex-wrap: wrap; width: 70%; margin: 0 -3.5vw calc(-30px - 3vw) 0; }
#head #sitemap .maps > li { width: 33.3333%; padding: 0 3.5vw calc(30px + 3vw) 0; }
#head #sitemap .maps > li .box > p { font-size: 24px; font-weight: 400; line-height:1.2; font-family:'jalnan_g', 'pretendard', sans-serif; background:linear-gradient(45deg, #b9910e, #f6d419, #b9910e); background-clip: text; -webkit-background-clip: text; color: transparent; }

#head #sitemap .maps > li .box .bar { margin: 22px 0; width: 100%; height: 2px; background-color: rgba(255, 255, 255, .4); }
#head #sitemap .maps > li .box .bar:before { content:''; display:block; width: 0; height: 2px; background-color: #fff; transition: all .5s; }
#head #sitemap .maps > li:hover .box .bar:before { width: 100%; }


#head #sitemap .maps > li .box .sub li a { display:block; padding:5px 0; opacity: .7; color: #fff; font-size: 16px; line-height: 1.4; }
#head #sitemap .maps > li .box .sub li a:hover { opacity: 1; }

#head #sitemap .maps.cnt4, #sitemap .maps.cnt8 { width: 77%; margin: 0 -3.2vw calc(-30px - 3vw) 0; }
#head #sitemap .maps.cnt4 > li, #sitemap .maps.cnt8 > li { width: 25%; padding: 0 3.2vw calc(30px + 3vw) 0; }


#head.sitemap_on #top_items #logo { z-index:1000; }
#head.sitemap_on #top_items #sub_items { z-index:1100; }
#head.sitemap_on #top_items #sub_items #sitemap_btn ul li {background: #fff;}
#head.re_color.sitemap_on #top_items #sub_items #sitemap_btn ul li {background: #fff;}


#head.sitemap_on #top_items #sub_items #sitemap_btn ul li { position: absolute; top:14px; }
#head.sitemap_on #top_items #sub_items #sitemap_btn ul li:nth-child(1) { transform: rotateZ(45deg); }
#head.sitemap_on #top_items #sub_items #sitemap_btn ul li:nth-child(2) { width:0; }
#head.sitemap_on #top_items #sub_items #sitemap_btn ul li:nth-child(3) { width:100%; transform: rotateZ(-45deg); }





@media (max-width: 1660px){
	#head #sitemap .maps > li .box .sub li a { padding:4px 0; }
	#head #sitemap .address dd { width:100%; }
}

@media (max-width: 1023px){
	#head #sitemap .address { display:none; }
	#head #sitemap .maps { width:100%; margin-top:calc(20px + 3vw); }
}

@media (min-width: 601px){
	#head #sitemap .maps > li .box .sub { display:block !important; }
}
@media (max-width: 600px){
	#head.sitemap_on { overflow:hidden; }
	#head #sitemap .sitemap_wrap { overflow:auto; }
	#head #sitemap .con { top:10%; transform:translateY(0); }
	#head #sitemap .con p.tit { display: none; }
	#head #sitemap  .address { display:none; }
	#head #sitemap .maps { float: none; display: block; width: 100%; margin: 0; }
	#head #sitemap .maps > li { margin:0; width: 100%; padding: 0; cursor: pointer; text-align:center; }

	#head #sitemap .maps { border-bottom:1px solid rgba(255,255,255,.6); }
	#head #sitemap .maps > li .box > p { padding:calc(15px + 1vw) 0; border-top:1px solid rgba(255,255,255,.6); }
	#head #sitemap .maps > li .box .bar, #head #sitemap .maps > li .box .sub { display:none; }
	#head #sitemap .maps > li .box .sub li a { opacity: 1; padding:calc(10px + 0.3vw) calc(10px + 0.3vw); background:rgba(0,0,0,.1); margin-top:1px; }
}



/***** SNS 링크 *****/

#sns_btns { position:fixed; right:20px; bottom:50px; z-index:500; text-align:right; }

#sns_btns > * { display:block; margin-left:auto; width:64px; height:64px; border-radius:50%; background-repeat:no-repeat; background-position:center; box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, .12); }
#sns_btns > *:nth-child(n+2) { margin-top:10px; }

#sns_btns .kakao { background-color:#f8e049; background-image:url('/images/icon_kakao.png'); }
#sns_btns .ytb { background-color:#d91226; background-image:url('/images/icon_ytb.png'); }
#sns_btns .blog { background-color:#009345; background-image:url('/images/icon_blog.png'); }
#sns_btns .insta { background-color:#1c275f; background-image:url('/images/icon_insta.png'); }
#sns_btns .tel { background-color:#fff; background-image:url('/images/icon_tel.png'); cursor:pointer; }
#sns_btns .tel.pc { text-align:center; transition:all .3s; }
#sns_btns .tel.pc span { display:inline-block; font-size:0; font-weight:600; position:relative; top:50%; transform:translateY(-50%); white-space:nowrap; }




#sns_btns .tel.pc:hover { background-image:none; width:auto; border-radius:100px; padding:0 30px; }
#sns_btns .tel.pc:hover span { font-size:17px; color:#111; }
#sns_btns .tel.mo { display:none; }

@media (max-width:1660px) {
	#sns_btns { right:10px; bottom:calc(15px + 1.8vw); }
	#sns_btns > * { width:calc(35px + 1.5vw); height:calc(35px + 1.5vw); background-size:calc(20px + 0.7vw); }
	#sns_btns > *:nth-child(n+2) { margin-top:8px; }
	#sns_btns .tel.pc:hover { padding:0 calc(17px + 0.7vw); }
	#sns_btns .tel.pc:hover span { font-size:calc(12px + 0.3vw); }
}

@media (max-width:767px) {
	#sns_btns > *:nth-child(n+2) { margin-top:6px; }
	#sns_btns .tel.pc { display:none; }
	#sns_btns .tel.mo { display:block; }
}


/***** 하단 *****/

#footer * { letter-spacing:0; }
#footer { position:relative; padding: 70px 0; background-color: #111; }
#footer .wrap { position:relative; }
#footer .f_top::after { clear:both; visibility:hidden; display:block; content:''; }
#footer .f_top li { float: left; color: #fff; font-size: 16px; font-weight: 400; }
#footer .f_top li:nth-child(n+2){ margin-left: 35px; }
#footer .line { border-top: 1px solid rgba(255,255,255, .2); }

#footer .f_info li { font-size: 15px; font-weight: 300; display: inline-block; color:rgba(255,255,255, .7); line-height: 200%; margin-right: 30px; }
#footer .f_info li span { color: #fff; font-weight: 500; margin-right: 5px; }
#footer .f_info li:last-child{ margin-right: 0; }

#footer .copy { font-size: 12.5px; font-weight: 400; color: #969696; }
#footer .sns img { opacity: .3; }

#footer #page_top { width:80px; height:80px; position:absolute; top:0; right:60px; cursor:pointer; background:#fff; transform:translateY(-50%); box-shadow:0 0 16px 0px rgba(0, 0, 0, .1); }
#footer #page_top:before { display:block; content:''; position:absolute; background:url('/images/ptop_arrow_b.png') center no-repeat; width:100%; height:100%; opacity:.8; }

#footer #page_top:hover { background-color:#2b2b2b; border:0; }
#footer #page_top:hover:before { background-image:url('/images/ptop_arrow.png'); opacity:1; }

#footer #wishweb_logo { position:absolute; bottom:0; right:60px; }

@media (max-width:1600px) {
	#footer #page_top { right:4%; width:calc(30px + 3vw); height:calc(30px + 3vw); }
	#footer #page_top:before { background-size:calc(7px + 0.5vw); }
	#footer #wishweb_logo { right:4%; }
	#footer #wishweb_logo img { width:calc(70px + 4vw); }
}
@media screen and (max-width:768px) {
	#footer .f_info li { margin-right: 20px; }
	#footer .f_top li:nth-child(n+2) { margin-left: 20px; }
	#footer .sns img { width: 160px; }
}




/* 비전 인포 */

.m_info3 {background: #f2f2f2;}
.m_info3 .swrap { padding: 205px 0 100px; position: relative; background-image:url('/images/m_tree.jpg'); background-position:left center; background-repeat:no-repeat;}

.m_info3 .txt_box {position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.m_info3 .txt_box.appear { opacity:1; }
.m_info3 .txt_box h3 { display: inline-block; }
.m_info3 .txt_box h3 > div { overflow:hidden; }
.m_info3 .txt_box h3 p { font-size: 44px; font-family: 'jalnan_g', 'pretendard', sans-serif; font-weight: 400; line-height:1.2; transform: translateY(100%); transition:transform .8s; }
.m_info3 .txt_box h3 .line {border-bottom: 6px solid #f6d419; width:0; transition:all .4s; opacity:0; }

.m_info3 .txt_box.play h3 p { transform: translateY(0); }
.m_info3 .txt_box.play h3 .line { width:100%; transition-delay:.6s; opacity:1; }

.m_info3 .txt_box .con {font-size: 22px; font-weight: 500; line-height: 1.7; transform: translateY(20%); opacity:0; transition:all .7s; }
.m_info3 .txt_box .con span.mc {font-size: 26px; font-weight: 700;}

.m_info3 .txt_box.play .con { transform: translateY(0); opacity:1; transition-delay:1s; }


.info_box {margin-left: auto; text-align: center; width: 555px; position: relative;}
.info_box.appear { opacity:1; }
.info_box img {max-height: 100%; vertical-align: middle;}
.info_box .cir { width: 37%; position: absolute; border-radius: 50%; aspect-ratio: 1; box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; opacity:0; transition:all .7s; background-color:#000; border:8px solid #d9b334; }

.info_box .cir1 {top:50%; left: 50%; transform: translate(-50%, -50%); }
.info_box .cir2 {bottom:50%; left: 50%; transform: translate(-50%, 50%); }
.info_box .cir3 {bottom:50%; right: 50%; transform: translate(50%, 50%); }
.info_box .cir h4 {font-size: 32px; font-weight:700; background: linear-gradient(180deg,#f6d419, #b9910e); background-clip: text; -webkit-background-clip: text; color: transparent; }
.info_box .cir h5 {font-size: 20px; color:#fff; font-weight: 600;}

.info_box.play .cir { opacity:1; }

.info_box.play .cir1 { top:0; left: 50%; transform: translate(-50%, -56%); }
.info_box.play .cir2 { bottom:0; left: 0; transform: translate(0, 11%); transition-delay:.3s; }
.info_box.play .cir3 { bottom:0; right: 0; transform: translate(0, 11%); transition-delay:.6s; }


@media (max-width :1660px) {
	.m_info3 .swrap { padding: calc(100px + 5vw) 0 calc(46px + 2.5vw); background-size:calc(300px + 13vw);  }
    .info_box {width: calc(230px + 19vw);}
    .info_box img {height: calc(156px + 13vw);}
    .info_box .cir { border-width:6px; }
}
@media (max-width :1400px) {
	.m_info3 .txt_box h3 .line {border-width: 5px;}
    .info_box .cir { border-width:5px; }
}
@media (max-width :1100px) {
    .m_info3 .txt_box .con {width:46%;}
    .m_info3 .txt_box .con br {display: none;}
}

@media (max-width :819px) {
    .m_info3 .swrap {padding: calc(36px + 3vw) 0 calc(40px + 3vw); background:none; }
    .m_info3 .txt_box {position: static; text-align: center; transform: translateY(0);}
	.m_info3 .txt_box h3 .line {border-width: 4px;}
    .m_info3 .txt_box .con {width:100%; text-align: center;}
    .info_box {margin-right: auto; margin-top: calc(50px + 9vw);}
}
@media (max-width :430px) {
    .info_box {width: 95%; margin-top: calc(60px + 10vw);}
    .info_box img {height: calc(140px + 30vw);}
    .info_box .cir { border-width:4px; }
}