.layout-mail
{
    padding-bottom:50px;
}

.main_bg
{
    position:relative;
    width:100%;
    height:384px;
    overflow:hidden;
    background:url(/images/pages/life/internet/mail/main_bg.png) no-repeat center center; background-size:cover;
}

.main_top
{
    position:relative;
    width:87%;
    height:264px;
    background:#fff;
    text-align:center;
    overflow:hidden;
    margin:0 auto;
    margin-top:-84px
}

.main_top h4
{
    font-family:'NanumSB';
    font-size:36px;
    color:#333;
    margin-top:63px;
}

.main_top h4 span
{
    font-family:'NanumSB';
    color:#034ea2;
}

.main_top p
{
    padding-top:20px;
    font-size:17px;
    color:#666666;
    font-family:'Verdana', Malgun Gothic;
    line-height:1.7;
    width:56%;
    margin:0 auto;
    letter-spacing:-0.06em
}

.main_list
{
    position:relative;
    width:100%;
    border-top:1px solid #333333;
    overflow:hidden
}

.main_depth
{
    position:relative;
    width:100%;
    border-bottom:1px solid #dcdcdc;
    overflow:hidden
}

.m_depth_content
{
    overflow:hidden;
}

.m_depth_left
{
    position:relative;
    width:25%;
    height:100%;
    overflow:hidden;
    float:left;
    margin-top:95px
}

.main_list > div:nth-child(3) .m_depth_left
{
    margin-top:55px
}

.m_depth_left img
{
    display:block;
    margin:0 auto
}

.m_depth_right
{
    position:relative;
    width:75%;
    height:100%;
    overflow:hidden;
    float:right;
    padding:40px 40px 40px 35px
}

.m_depth_right:after
{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:1px;
    height:70px;
    background:#dcdcdc
}

.m_depth_right h5
{
    font-family:'NanumSB';
    font-size:21px;
    color:#000
}

.m_depth_right > ul
{
    margin-top:25px;
    margin-left:25px
}

.m_depth_right > ul > li
{
    position:relative;
    line-height:28px;
    color:#666;
    font-size:16px;
    margin-top:3px;
}

.m_depth_right > ul > li:before
{
    content:'';
    position:absolute;
    top:12px;
    left:-12px;
    width:3px;
    height:3px;
    background:#666666
}

.m_depth_right ul li ul
{
    margin-left:25px
}

.m_depth_right ul li ul li
{
    position:relative;
    color:#666;
}

.m_depth_right ul li ul li:before
{
    content:'';
    position:absolute;
    top:12px;
    left:-12px;
    width:5px;
    height:1px;
    background:#666666
}

@media(max-width:768px)
{
    .main_top
    {
        width:100%;
        margin-top:0;
        height:auto;
        padding:0px 0 50px 0
    }

    .main_top p
    {
        width:90%
    }

    .m_depth_left, .m_depth_right
    {
        width:100%;
    }

	.m_depth_left
	{
		margin-top:60px !important;
	}

    .m_depth_right:after
    {
        display:none
    }

    .m_depth_right
    {
        padding:40px 0 40px 0
    }
}

@media(max-width:590px)
{
    .main_top h4 span
    {
        display:block;
        margin-top:5px;
    }
}

@media(max-width:480px)
{
    .m_depth_left
    {
        display:none
    }
    .m_depth_left img
    {
        display:none
    }
    .main_top
    {
        padding:0 0 30px 0
    }
    .main_top h4
    {
        font-size:28px;
        margin-top:33px
    }
    .m_depth_right
    {
        padding:26px 0 24px 0
    }
    .main_top p
    {
        font-size:16px
    }
    .m_depth_right h5
    {
        font-size:24px
    }
    .m_depth_right > ul
    {
        margin-top:10px
    }





    .main_bg
    {
        height:184px;
    }




}