@charset "utf-8";

main{font-family: 'Mukta', sans-serif}

/*menu1*/
#menu1
{
    width: 950px; height: 700px; 
    margin: 300px auto;
    position: relative
}
.menu1_title
{
    width: 450px; height: 120px;
    font-family: 'Mukta', sans-serif;
    position: relative; top: 0; left: 10px
}
.menu1_title em
{
    display: block; width: 430px; margin-right: -215px;
    font-size: 35px; font-weight: 700; color: #895b8a; line-height: 45px; letter-spacing: 0.9px; font-family: 'Mukta', sans-serif; text-align: center; 
    position: absolute; left: 50%; top: 20px 
}
.menu1_title em:hover
{
    color: rgba(214, 214, 214, 0.7); text-shadow: 3px 5px 13px rgba(0,0,0,0.02)
}
.menu1_desc
{
    width: 430px; margin-right: -100px;
    position: absolute; top: 240px; right: 50px;
    text-align: left
}
.menu1_desc>ul
{
    width: 430px;
    color: #888882; letter-spacing: -1px;
    position: relative
}
.menu1_desc>ul:nth-of-child(1)
{
    display: block; width: 300px; height: 50px;
    border: 1px solid #f00
}
.menu1_desc>ul+ul {margin-top: 50px}
.menu1_desc>ul>li {font-size: 15px; line-height: 23px}
.menu1_desc>ul>li:nth-child(1)
{
    height: 40px;
    font-size: 28px; font-weight: 700; line-height: 40px
}
#menu1 .icon {font-size: 20px}
.menu1_desc .bar1
{
    display: block; width: 200px; height: 32px;
    border-bottom: 1px solid #d9d9d0;
    position: absolute; left: 0; top: 7px
}
.menu1_desc .bar2
{
    display: block; width: 200px; height: 32px;
    border-bottom: 1px solid #d9d9d0;
    position: absolute; left: 0; top: 7px
}
.menu1_desc .bar3
{
    display: block; width: 200px; height: 32px;
    border-bottom: 1px solid #d9d9d0;
    position: absolute; left: 0; top: 7px
}
#menu1>p
{
    display: block; width: 300px; height: 450px;
    margin-left: 150px;
    text-indent: -9999px;
    background: url(../img/pck_230220.png)no-repeat center center/*-30px*/; background-size: contain;
    position: absolute; bottom: 0; left: 0;
   /* box-shadow: 3px 5px 10px rgba(0,0,0,0.07)*/
}
#menu1 .name{font-family: 'Noto Sans KR', sans-serif; font-weight: 600; font-size: 26px}
#menu1 .license {font-family: 'Noto Sans KR', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: -0.6px}
/* menu-E */

/* menu3 */
#menu3
{
    width: 850px; height: 3700px; 
    margin: 100px auto 0 auto;
    position: relative  
}
.menu3_title
{
    width: 430px; height: 380px; float: left;
    position: relative; top: 0; left:0
}
.menu3_title em
{
    display: block; width: 380px; height: 45px;
    font-size: 56px; font-weight: 600; color: #895b8a; line-height: 45px; letter-spacing: -1px; font-family: 'Mukta', sans-serif;
    position: absolute; left: 0; top: 0
}
#menu3>p
{
    display: block ; width: 850px; height: 16px;
    font-size: 15px; color: #7f6f80; text-align: left; font-weight: 300; line-height: 16px; letter-spacing: 0px; 
    opacity: 0.7;
    position: absolute; left: 0; top: 80px; font-family: 'Mukta', sans-serif
}
.menu3_desc
{
    width: 850px; height: 2000px;
    margin: 220px auto 0 auto;
    position: absolute
}
.menu3_desc1
{
    display: block; width: 900px; height: 850px; 
    position: relative
}
.menu3_desc1>h1{display: block; width: 600px; height: 30px;
    margin-left: -300px;
    margin-top: 550px;
    font-size: 32px; color: #888882; text-align: center; line-height: 30px; letter-spacing: -0.8px; font-weight: 400;
    position: absolute; left: 50%
 }
.menu3_desc1>h1>b{font-weight: 600}
.menu3_title:hover em{/*color: #888882;*/ text-shadow: 3px 5px 13px rgba(0,0,0,0.02)}
.web1-img
{
    width: 850px; height: 500px;
    margin: 0 auto; 
    position: absolute; top:0;
    transition: all 0.3s 0s;
    box-shadow: 3px 5px 10px rgba(0,0,0,0.07)
}
.web1-img:hover{transform: scale(1.008)}
.web1-txt
{
    display: block; width: 600px; height: 13px;
    margin-left: -300px;
    margin-top: 590px;
    font-size: 13px; color: #b3b3b0; text-align: center; line-height: 13px; letter-spacing: 0px;
    position: absolute; left: 50%
}
.web1_btn1
{
    display: block; width: 257px; height: 30px;
    margin-top: 640px;
    margin-left: -128px;
    position: absolute; left: 50%
}
.web1_btn2
{
    display: block; width: 394px; height: 30px;
    margin-top: 640px;
    margin-left: -197px;
    position: absolute; left: 50%
}
.web1_btn3
{
    display: block; width: 257px; height: 30px;
    margin-top: 640px;
    margin-left: -128px;
    position: absolute; left: 50%
}
.web1_btn4
{
    display: block; width: 120px; height: 30px;
    margin-top: 640px;
    margin-left: -60px;
    position: absolute; left: 50%
}
.web_btn_common>li
{
    width: 120px; height: 30px; float: left;
    border: 1px solid #895b8a; border-radius: 15px;
    text-align: center
}
.web_btn_common>li+li {margin-left: 17px}
.web_btn_common>li>a {font-size: 13px; color: #895b8a; line-height: 30px; letter-spacing: 0px}
.web_btn_common>li:hover {background-color: #895b8a}
.web_btn_common>li:hover a {color: #fff; text-decoration: none}
/* menu3-E */

/* menu4 */
#menu4
{
    width: 950px; height: 700px;
    margin: 850px auto 50px auto; 
    position: relative
}
.logo
{
    width: 450px; height: 380px; float: left;     
    position: relative;
    background-color: #f5f5f5;
    margin-right: 50px;
    box-shadow: 3px 5px 10px rgba(0,0,0,0.08)
}

.logo:hover .logo_img {transform: scale(1.06)}
/*.logo:hover p {font-weight: 600}*/
.logo_img {transition: all 0.3s 0s}
.logo_txt>p {transition: all 0.3s 0s}
.logo_img>a>img {width: 450px; height: auto}
.logo_txt>p
{
    display: block; height: 30px;
    font-size: 24px; font-weight: 500; color: #888882; line-height: 35px; letter-spacing: -0.6px; font-family: 'Mukta', sans-serif;
    position: absolute; bottom: -55px; left: 0
}
.logo_txt>em 
{
    display: block; height: 30px;
    font-size: 16px; font-weight: 300; color: #b3b3b0; line-height: 30px; letter-spacing: 0px; font-family: 'Mukta', sans-serif;
    position: absolute; bottom: -77px; left: 0
}
.leaflet
{
    width: 450px; height: 380px; float: left;     
    position: relative;
    background-color: #f5f5f5;
    box-shadow: 3px 5px 10px rgba(0,0,0,0.08)
}
.leaflet:hover .leaflet_img {transform: scale(1.06)}
/*.leaflet:hover p {font-weight: 600}*/
.leaflet_img {transition: all 0.3s 0s}
.leaflet_txt>p {transition: all 0.3s 0s}
.leaflet_img>a>img
{
    width: auto; height: 341px;s
    margin-top: 25px
}
.leaflet_txt>p
{
    display: block; height: 30px;
    font-size: 24px; font-weight: 500; color: #888882; line-height: 35px; letter-spacing: -0.6px; font-family: 'Mukta', sans-serif;
    position: absolute; bottom: -55px; left: 0
}
.leaflet_txt>em
{
    display: block; height: 30px;
    font-size: 16px; font-weight: 300; color: #b3b3b0; line-height: 30px; letter-spacing: 0px; font-family: 'Mukta', sans-serif;
    position: absolute; bottom: -77px; left: 0
}
/* menu4-E */

/* menu5 */
#menu5
{
    width: 900px; height: 900px;
    margin: 150px auto 0 auto;
    position: relative
}
.menu5_title
{
    width: 430px; height: 170px; float: left;
    position: relative;top: 0; left:0
}
.menu5_title em
{
    display: block; width: 280px; height: 45px;
    font-size: 56px; font-weight: 600; color: #895b8a; line-height: 45px; letter-spacing: -1px; font-family: 'Mukta', sans-serif;
    position: absolute; left: 0; top: 0
}
.menu5_title em:hover {/*color: #895b8a;*/ text-shadow: 3px 5px 13px rgba(0,0,0,0.02)}
#menu5>p
{
    display: block; width: 1000px; height: 16px; 
    font-size: 15px; color: #7f6f80; text-align: left; line-height: 16px; letter-spacing: 0px; font-family: 'Mukta', sans-serif;
    opacity: 0.7;
    position: absolute; left: 0; top: 73px
}
#menu5>div
{
    width: 900px; height: 300px; float: left; 
    margin: 0 auto;
    position: relative
}
.menu5_desc1
{
    display: block; width: 400px; height: 415px; 
    position: absolute; right: 0
}
.menu5_desc2
{
    display: block; width: 400px; height: 415px;
    position: absolute; top: 250px
}

.art-img {transition: all 0.3s 0s}
.art-img:hover {transform: scale(1.02)}
.art-img img {width: 400px; height: 350px; margin: 0 auto}
.art-img>a>img {box-shadow: 3px 5px 10px rgba(0,0,0,0.1)}
.art-txt
{
    display: block; width: 250px; height: 55px;
    position: absolute; top: 370px; left: 0;
    font-family: 'Mukta', sans-serif
}
.art-txt>p
{
    display: block; height: 30px;
    font-size: 25px; font-weight: 500; color: #888882; line-height: 30px; letter-spacing: -1px;
    position: absolute; top: 0; left: 0
}
.art-txt>em
{
    height: 16px; width: 400px;
    font-size: 16px; color: #b3b3b0; line-height: 16px; letter-spacing: 0px; font-weight: 300; font-family: 'Mukta', sans-serif;
    position: absolute; top: 35px; left: 0
}
/* menu5-E */