@charset "utf-8";

#container{min-width:1100px;}
#container .mintro{width:1100px;margin:80px auto;display:flex;justify-content: space-around;}
#container .mintro .box{overflow:hidden;position:relative;width:526px;height:580px;border-radius:20px;background-position:50% 50%;background-repeat:no-repeat;font-size:0;box-shadow:7px 12px 15px rgba(0,0,0,0.1);margin-right:23px;}
#container .mintro .box h3{position:relative;margin-top:45px;padding-top:155px;font-family:'NotoKrM';font-size:36px;line-height:1;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,0.2);background-repeat:no-repeat;background-position: 50% 50%;z-index:2;}
#container .mintro .box .link_wrap{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;padding-top:255px;}
#container .mintro .box .link_wrap a{display:inline-block;width:208px;height:46px;margin:2px;border:1px solid rgba(255,255,255,0.5);border-radius:50px;text-align:left;font-family:'NotoKrM';font-size:17px;line-height:49px;color:#fff;box-shadow:0 0 8px rgba(0,0,0,0.15);}
#container .mintro .box .link_wrap a span{display:block;height:50px;padding:0 0 0 15px;background-image:url(/nanum/site/img/main/box_arr.png);background-repeat:no-repeat;background-position:90% 50%;}
#container .mintro .box .link_wrap .longText{letter-spacing: -1px;}

/*임시수정*/
/* #container .mintro .box .link_wrap a:nth-child(5){display:none;} */
/* #container .mintro .box.c_box .link_wrap a:last-child{float:left;margin-left:50px;} */

#container .mintro .box:hover,
#container .mintro .box:focus-within {box-shadow:20px 40px 60px rgba(0,0,0,0.5);}
#container .mintro .box:hover .link_wrap,
#container .mintro .box:focus-within .link_wrap {opacity:1;}

/* 백두 */
#container .mintro .box.l_box{float:left;background-image:url(/nanum/site/img/main/intro_box_bg1.jpg);margin-top:0;}
#container .mintro .box.l_box h3{background-image:url(/nanum/site/img/main/box_icon1.png);} 

/* 세종 */
#container .mintro .box.c_box{float:left;background-image:url(/nanum/site/img/main/intro_box_bg2.jpg);margin-top:0;}
#container .mintro .box.c_box h3{background-image:url(/nanum/site/img/main/box_icon2.png);}
/* #container .mintro .box.c_box .link_wrap a{width:208px;font-size:14px;} */
/* #container .mintro .box.c_box .link_wrap a span{padding:0 0 0 20px;} */

/* 자생 */
#container .mintro .box.r_box{float:left;background-image:url(/nanum/site/img/main/intro_box_bg3.jpg);}
#container .mintro .box.r_box h3{background-image:url(/nanum/site/img/main/box_icon3.png);}

/*정원문화원*/
#container .mintro .box.s_box{float:left;background-image:url(/nanum/site/img/main/intro_box_bg4.jpg); background-size:cover;} 
#container .mintro .box.s_box h3{background-image:url(/nanum/site/img/main/box_icon4.png);}

#container .mintro .box .callbox{display:none;}

/********************태블릿********************/
@media all and (max-width:1024px){

#container{min-width:100%;}
#container .mintro{width:94%;margin:50px auto;display:flex;justify-content: space-between;}
#container .mintro .box{width:48%;}
#container .mintro .box h3{font-size:30px;background-size:auto 80px;}
#container .mintro .box .link_wrap{padding:300px 2% 0 2%;box-sizing:border-box;}
#container .mintro .box .link_wrap a,
#container .mintro .box.c_box .link_wrap a{width:46%;height:auto;margin:1% 2%;padding:15px 5px;text-align:center;font-size:15px;line-height:1.4;box-sizing:border-box;}
#container .mintro .box .link_wrap a span,
#container .mintro .box.c_box .link_wrap a span{display:inline-block;height:auto;padding:0;background-image:none;}

#container .mintro .box:hover{box-shadow:0;}

#container .mintro .box.c_box .link_wrap a:last-child{float:none;margin-left:0;}
    
}

/********************모바일********************/
@media all and (max-width:767px){

#container .mintro{display:inline-block;}
#container .mintro .box{width:100%;height:auto;margin-bottom:20px;background-size:cover;}
#container .mintro .box.l_box,
#container .mintro .box.c_box{float:none;}
#container .mintro .box h3{position:absolute;top:0;left:0;width:100%;text-align:center;margin-top:0;padding-top:80px;font-size:22px;background-size:auto 60px;}

#container .mintro .box .link_wrap{position:relative;display:block;margin-top:0;padding:185px 6% 20px 6%;}
#container .mintro .box .link_wrap a,
#container .mintro .box.c_box .link_wrap a{width:100%;font-size:14px;border-radius:50px;margin:0.5% 0;}
#container .mintro .box .link_wrap a span,
#container .mintro .box.c_box .link_wrap a span{display:block;line-height:1;background:url(/nanum/site/img/main/box_arr.png) no-repeat 95% 50%;}

/* 백두 */
#container .mintro .box.l_box .link_wrap{background-color:rgba(39,165,103,0.9);}

/* 세종 */
#container .mintro .box.c_box .link_wrap{background-color:rgba(255,105,23,0.9);}

/* 자생 */
#container .mintro .box.r_box .link_wrap{background-color:rgba(16, 72, 91, 0.9)}

/*정원문화원*/
#container .mintro .box.s_box .link_wrap{background-color:rgba(100, 10, 84, 0.9)}

#container .mintro .box .callbox{display:block;position:absolute;top:120px;left:0;right:0;z-index:1;}
#container .mintro .box .callbox div{margin-top:5px;font-size:14px;font-family:'Roboto', 'NotoKrM';color:#fff;letter-spacing:-0.05em;}
#container .mintro .box .callbox div:first-child{margin-top:0;}

}

/********************웹********************/
@media all and (min-width:1025px){
	
#container .mintro .box:hover .link_wrap a:hover,
#container .mintro .box:focus-within .link_wrap a:focus-within{background:#fff;}

/* 백두 */
#container .mintro .box.l_box:hover .link_wrap,
#container .mintro .box.l_box:focus-within .link_wrap {background-color:rgba(39,165,103,0.9);}
#container .mintro .box.l_box:hover .link_wrap a:hover,
#container .mintro .box.l_box:focus-within .link_wrap a:focus-within {color:#11824c;}
#container .mintro .box.l_box:hover .link_wrap a:hover span,
#container .mintro .box.l_box:focus-within .link_wrap a:focus-within span {background-image:url(/nanum/site/img/main/box_arr_on.png);}

/* 세종 */
#container .mintro .box.c_box:hover .link_wrap,
#container .mintro .box.c_box:focus-within .link_wrap {background-color:rgba(255,105,23,0.9);}
#container .mintro .box.c_box:hover .link_wrap a:hover,
#container .mintro .box.c_box:focus-within .link_wrap a:focus-within {color:#ff6917;}
#container .mintro .box.c_box:hover .link_wrap a:hover span,
#container .mintro .box.c_box:focus-within .link_wrap a:focus-within span {background-image:url(/nanum/site/img/main/box_arr2_on.png);}

/* 세종 */
#container .mintro .box.r_box:hover .link_wrap,
#container .mintro .box.r_box:focus-within .link_wrap {background-color:rgba(16, 72, 91, 0.9)}
#container .mintro .box.r_box:hover .link_wrap a:hover,
#container .mintro .box.r_box:focus-within .link_wrap a:focus-within {color:#10485b}
#container .mintro .box.r_box:hover .link_wrap a:hover span,
#container .mintro .box.r_box:focus-within .link_wrap a:focus-within span {background-image:url(/nanum/site/img/main/box_arr3_on.png);}

/*정원문화원*/
#container .mintro .box.s_box:hover .link_wrap,
#container .mintro .box.s_box:focus-within .link_wrap {background-color:rgba(100, 10, 84, 0.9)}
#container .mintro .box.s_box:hover .link_wrap a:hover,
#container .mintro .box.s_box:focus-within .link_wrap a:focus-within {color:#10485b}
#container .mintro .box.s_box:hover .link_wrap a:hover span,
#container .mintro .box.s_box:focus-within .link_wrap a:focus-within span {background-image:url(/nanum/site/img/main/box_arr3_on.png);}


}