@charset "utf-8";
@import url('ani.css');

body{overflow:inherit; position:relative; left:0px; transition:all 0.5s ease-out 0s;}
body.active{overflow:hidden; position:fixed; left:-70%; width:100%;}

#header{position:fixed; top:35px; left:0px; z-index:90; width:100%;}
#header h1{width:198px; height:50px; margin-left:65px;}
#header h1 > a{display:block; height:100%; background:url(../images/common/logo.png) no-repeat 50% 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#header .gnb{position:absolute; top:20px; right:65px;}
#header .gnb:after{content:''; display:block; clear:both;}
#header .gnb > li{float:left; position:relative;}
#header .gnb > li > a{display:block; padding:10px 45px 15px; font-family:'Nanum Square', Sans-serif; font-size:18px; color:#000; letter-spacing:-1px; font-weight:700;}
/*#header .gnb > li:last-child > a{padding-right:0px;}*/

#header .gnb li ul{display:none; position:absolute; left:50%; width:95%; margin-left:-45%; padding:5px 0; background:#fff; border-radius:15px; border:2px solid #f65490;}
#header .gnb li ul li{padding:10px 7px; border-bottom:1px solid #ececec;}
#header .gnb li ul li:last-child{border-bottom:0;}
#header .gnb li ul li a{display:block; color:#414141; text-align:center; font-size:14px;}
#header .gnb li ul li a:hover{color:#f65490;}

#header .btn_menu{display:none; position:absolute; top:10px; right:15px; width:30px; height:30px;}
#header .btn_menu span{opacity:1; display:block; position:relative; right:0px; height:3px; margin:10px 0px; background:#444; border-radius:40px; font-size:0px; transition:all 0.3s ease 0s;}
#header .btn_menu:before,
#header .btn_menu:after{content:''; display:block; width:100%; height:3px; background:#444; border-radius:40px; transition:all 0.3s ease 0s;}
#header .btn_menu.active span{position:relative; right:-55px;}
#header .btn_menu.active:before{transform:rotate(45deg) translate(8px, 8px);}
#header .btn_menu.active:after{transform:rotate(-45deg) translate(10px, -10px);}
#header .btn_close{display:none; width:30%; height:100%; font-size:0px;}

#header.mob nav{position:fixed; top:0px; right:-100%; width:100%; height:100%; transition:all 0.5s ease-out 0s;}
#header.mob nav.active{right:0px;}
#header.mob .gnb{overflow-y:auto; top:0px; right:0px; width:70%; height:100%; background:#f65490;}
#header.mob .gnb > li{float:none;}
#header.mob .gnb > li > a{padding:20px 20px; background:#f65490; border-bottom:1px solid #ff6ca2; color:#fff;}

.area_quick{position:absolute; top:495px; right:50%; z-index:90; margin-right:-720px;}
.area_quick > a{display:block; width:68px; height:68px; box-sizing:border-box; padding-top:10px; margin:5px 0px; background:#ffd0d8; border-radius:10px; font-size:13px; color:#111; text-align:center; font-weight:300; transition:all 0.3s ease 0s;}
/* .area_quick > a:before{content:''; display:block; width:29px; height:34px; margin:0 auto; background:url(../images/main/img_quick01.png) no-repeat 50% 0;}
.area_quick > a:hover{box-shadow:3px 3px 0 rgba(0,0,0,0.2);}
.area_quick > a:nth-of-type(2){background:#ff85b2;}
.area_quick > a:nth-of-type(2):before{background-image:url(../images/main/img_quick02.png);}
.area_quick > a:nth-of-type(3){background:#7cc2ff;}
.area_quick > a:nth-of-type(3):before{background-image:url(../images/main/img_quick03.png);}
.area_quick > a:nth-of-type(4){background:#bee0ae;}
.area_quick > a:nth-of-type(4):before{background-image:url(../images/main/img_quick04.png);} */
.area_quick { top: 50%; transform: translateY(-20%); }
.area_quick > a::before{content:''; display:block; width:29px; height:34px; margin:0 auto;}
.area_quick > a:hover{box-shadow:3px 3px 0 rgba(0,0,0,0.2);}
.area_quick > a.a1::before{background:url(../images/main/img_quick01.png);}
.area_quick > a.a2 {background:#ff85b2;}
.area_quick > a.a2::before{background-image:url(../images/main/img_quick02.png);}
.area_quick > a.a3 {background:#7cc2ff;}
.area_quick > a.a3::before{background-image:url(../images/main/img_quick03.png);}
.area_quick > a.a4 {background:#bee0ae;}
.area_quick > a.a4::before{background-image:url(../images/main/img_quick04.png);}
.area_quick > a.a5::before{background-image:url(../images/main/img_quick04.png);}
.area_quick > a.yt {background:#ff85b2;}
.area_quick > a.yt::before{background-image:url(../images/main/yt2.svg); background-size: cover; background-position: center;}
.area_quick > a.ig {background:#FFC085;}
.area_quick > a.ig::before{background-image:url(../images/main/ig2.svg); background-size: cover; background-position: center;}

#footer{min-width:320px; box-sizing:border-box; background:#2c2e32; padding:50px 0 60px; text-align:center;}
#footer .inr{position:relative; width:98%; max-width:1160px; box-sizing:border-box; margin:0 auto; color:#fff;}
#footer .f_info > li{display:inline-block; margin-bottom:10px; margin-right:34px; font-weight:300;}
#footer .f_info > li em{font-weight:500;} 
#footer .f_copy{color:#828385;}
#footer .btn_top{display:block; position:absolute; top:-20px; right:-140px; z-index:90; width:68px; height:68px; line-height:68px; background:#2c2e32; border:1px solid #616264; border-radius:8px; color:#fff; text-align:center;}
#footer .btn_top span{display:inline-block; line-height:1.2; vertical-align:middle;}

/* sub visual */
.area_subVisual{overflow:hidden; position:relative; width:100%; height:642px; line-height:642px; background:#ffe2e7; background:-moz-linear-gradient(top, #ffe2e7 0%, #ffe2e7 51%, #ffcdd5 100%); background:-webkit-linear-gradient(top, #ffe2e7 0%,#ffe2e7 51%,#ffcdd5 100%); background:linear-gradient(to bottom, #ffe2e7 0%,#ffe2e7 51%,#ffcdd5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe2e7', endColorstr='#ffcdd5',GradientType=0 ); text-align:center;}
.area_subVisual.summer{background:#e7f4ff; background:-moz-linear-gradient(top, #e7f4ff 0%, #e7f4ff 51%, #c6dff1 100%); background:-webkit-linear-gradient(top, #e7f4ff 0%,#e7f4ff 51%,#c6dff1 100%); background:linear-gradient(to bottom, #e7f4ff 0%,#e7f4ff 51%,#c6dff1 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f4ff', endColorstr='#c6dff1',GradientType=0 );}
.area_subVisual:after{content:''; display:block; position:absolute; left:0px; top:0px; z-index:5; width:100%; height:100%; background-image:url(/images/main/winter/snow.png), url(/images/main/winter/snow02.png); animation:snow 20s linear infinite;}
.area_subVisual .text{display:inline-block; position:relative; z-index:10; line-height:1; margin-bottom:85px; vertical-align:middle; font-family:'Exo 2', sans-serif;}
.area_subVisual .text i{display:block; margin-bottom:20px; font-size:71px; font-weight:800; color:#414141;}
.area_subVisual .text i span{display:block; font-size:90px; color:#f65490;}
/*.area_subVisual .text i span:after{content:''; display:inline-block; width:76px; height:76px; margin-left:10px; background:#f65490 url(/images/contents/img_2022.png) no-repeat 12px 21px; border-radius:50% 50% 50% 0;}*/
.area_subVisual .winter{position:absolute; bottom:0; left:50%; z-index:10; width:1160px; height:100px; transform:translateX(-50%); background:#fff; border-radius:40px 40px 0 0;}
.area_subVisual .winter div[class^="box"]{position:absolute; bottom:0;}
.area_subVisual .winter .box01{left:40px; width:301px; height:230px;}
.area_subVisual .winter .box02{left:377px; width:489px; height:195px;}
.area_subVisual .winter .box03{right:40px; width:216px; height:242px;}
.area_subVisual .winter *[data-box-winter]{position:absolute; top:0; left:0;}
.area_subVisual .winter *[data-box-winter="cloud"]{top:-300px; left:12px; width:232px; height:196px;}
.area_subVisual .winter .box01 *[data-box-winter="obj04"]{animation:objUpUp 1.5s ease-out 2s infinite alternate;}
.area_subVisual .winter .box01 *[data-box-winter="obj02"]{animation:objUpUp 1.5s ease-out 3s infinite alternate;}
.area_subVisual .winter .box02 *[data-box-winter="obj03"]{animation:objUpUp 1.5s ease-out 1.5s infinite alternate;}
.area_subVisual .winter .box03 *[data-box-winter="obj03"] i{position:absolute; top:0px; left:0px;}
.area_subVisual .winter .box03 *[data-box-winter="obj03"] i:nth-of-type(1){animation:objUp 4s ease-out 1s infinite alternate;}
.area_subVisual .winter .box03 *[data-box-winter="obj03"] i:nth-of-type(2){animation:objUp 4s ease-out 1.5s infinite alternate;}
.area_subVisual .winter .box03 *[data-box-winter="obj03"] i:nth-of-type(3){animation:objUp 4s ease-in 2s infinite alternate;}
.area_subVisual .winter .box03 *[data-box-winter="obj03"] i:nth-of-type(4){animation:objUp 4s ease-out 2.5s infinite alternate;}

.area_subVisual.summer{height:400px !important; line-height:400px !important;}
.area_subVisual.summer:after{display:none !important;}
.area_subVisual.summer .text{margin-bottom:-60px !important;}

/* layer pop */
.layerPop{position:absolute; z-index:90; left:50%; top:50%; z-index:99; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(calc(-50% + 1px)) translateY(calc(-50% + 0.5px)); display:block;}
.layerPop a{display:block;}
.layerPop img{max-width:100%;}
.layerPop .btn{padding:3px 10px; background:#292b42; text-align:right;}
.layerPop .btn button{display:inline-block; margin-left:15px; background:none; color:#fff; font-size:12px;}

@media all and (max-width:1550px){
	#header h1{margin-left:20px;}
	#header .gnb{right:20px;}
	#footer{padding:40px 50px;}
	#footer .f_info > li{margin-bottom:5px; margin-right:15px;}
	#footer .btn_top{right:10px;}
}

/*mobile*/
@media all and (max-width:1024px){
	#header .gnb > li > a{padding:0 20px;}
	#footer{padding:30px; font-size:14px;}
	#footer .btn_top{position:fixed; right:20px; top:auto; bottom:20px; width:60px; height:60px; line-height:60px; background:#f65490; border-color:transparent; border-radius:50%;}
	.area_subVisual .text i{font-size:60px; margin-bottom:13px;}
	.area_subVisual .text i span{font-size:74px;}
	.area_subVisual .text p img{max-width:80%;}
}

@media all and (max-width:900px){
	#header .btn_close,
	#header .btn_menu{display:block;}

	#header .gnb li ul{position:static; margin:8px auto 0;}
}

@media all and (max-width:767px){
	#footer .btn_top{right:15px; bottom:15px;}
	.area_subVisual{height:600px;}
	.area_subVisual .text i{font-size:50px;}
	.area_subVisual .text i span{font-size:55px;}	
}

@media all and (max-width:640px){
	.layerPop{width:90%;}
	.layerPop a{text-align:center;}
}