@font-face {
    font-family: "HGGGothicssi";
    src: url(../font/HGGGothicssi 60g.ttf) format('truetype');
}

@font-face {
    font-family: "NanumBarunGothic";
    src:url(../font/NanumBarunGothic.eot);
    src:url(../font/NanumBarunGothic.woff) format('woff'), url(../font/NanumBarunGothic.ttf) format('truetype');
}

body { font-family: "NanumBarunGothic" }
.wrap { background: url(../images/Background.png) center no-repeat; background-size: cover; overflow:hidden; height:1080px;}
.wrap .content_wrap { width: 980px; margin: 0 auto; height: 960px; position: relative;}
.wrap .main_logo {/* padding: 48px 0 0 100px; */position: absolute;left: 50%;top: 40px;margin-left: -230px; z-index:10;}
.wrap .sub_title img{margin-top:55px;}
.wrap .content_wrap .m_logo { display: none; }
.wrap .content_wrap .content_list {margin-top:90px; position: absolute;z-index: 999;}
.wrap .content_wrap .content_list li a{box-sizing:border-box; border-bottom:3px solid #fff;}
.wrap .content_wrap .content_list li:first-child a{ border-top:3px solid #fff;}
.wrap .content_wrap .content_list li a { display: block; width: 310px; height: 93px;}

.wrap .content_wrap .content_list li.con01 a { background: url(../images/con01.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con01.on a { background: url(../images/con01_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con02 a { background: url(../images/con02.png) 40px center no-repeat;transition: all 0.2s; }
.wrap .content_wrap .content_list li.con02.on a { background: url(../images/con02_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con03 a { background: url(../images/con03.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con03.on a { background: url(../images/con03_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con04 a { background: url(../images/con04.png) 40px center no-repeat;transition: all 0.2s; }
.wrap .content_wrap .content_list li.con04.on a { background: url(../images/con04_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con05 a { background: url(../images/con05.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con05.on a { background: url(../images/con05_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con06 a { background: url(../images/con06.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con06.on a { background: url(../images/con06_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con07 a { background: url(../images/con07.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con07.on a { background: url(../images/con07_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .content_list li.con08 a { background: url(../images/con08.png) 40px center no-repeat; transition: all 0.2s; }
.wrap .content_wrap .content_list li.con08.on a { background: url(../images/con08_on.png) center no-repeat; background-size: cover; }

.wrap .content_wrap .im_list { position: absolute; /*bottom: -23px; left: 418px; width:760px; height: 730px;*/ top:0; left:0;width:1600px; height:1200px;}
.wrap .content_wrap .im_list .im_list_wrap { position: relative; width:100%; height: 100%;}
.wrap .content_wrap .im_list .im_list_wrap >li {width:100%; height:100%; position:relative; top:0; }
/*.wrap .content_wrap .im_list .im_list_wrap >li img{z-index:99}*/
/*.wrap .content_wrap .im_list .im_list_wrap >li:nth-child(1) img{margin-top: 70px;}
.wrap .content_wrap .im_list .im_list_wrap >li:nth-child(2) img{margin-top: 0px;}
.wrap .content_wrap .im_list .im_list_wrap >li:nth-child(3) img{margin-top: 70px; margin-left:-200px}*/
#slide01 .imgBox {width:100%; height:100%; background: url(../images/01_img_pc.png) 320px 175px no-repeat;}
#slide02 .imgBox {width:100%; height:100%; background: url(../images/02_img_pc.png) 380px 215px no-repeat;}
#slide03 .imgBox {width:100%; height:100%; background: url(../images/03_img_pc.png) 120px 150px no-repeat;}
#slide04 .imgBox {width:100%; height:100%; background: url(../images/04_img_pc.png) 380px 160px no-repeat;}
#slide05 .imgBox {width:100%; height:100%; background: url(../images/05_img_pc.png) 350px 200px no-repeat;}
#slide06 .imgBox {width:100%; height:100%; background: url(../images/06_img_pc.png) 350px 190px no-repeat;}
#slide07 .imgBox {width:100%; height:100%; background: url(../images/07_img_pc.png) 280px 190px no-repeat;}
#slide08 .imgBox {width:100%; height:100%; background: url(../images/08_img_pc.png) 380px 180px no-repeat;}

/* .wrap .content_wrap .im_list .im_list_wrap div { display: none; position: absolute; bottom: 0px; left: 0px; }
.wrap .content_wrap .im_list .im_list_wrap div:first-child { display: block; } */

.wrap .content_wrap .quick_btn {position: relative;bottom: 340px;left: 680px;z-index: 999;}
.wrap .content_wrap .quick_btn li {margin-left: 10px; width: 300px; height: 70px;}
.wrap .content_wrap .quick_btn li a { display: block; width: 100%; line-height: 74px; height: 100%; text-align: center; color: #0a0f5b; font-size: 24px; border-radius: 60px; font-family: "NanumBarunGothic"; font-weight:600; border-radius: 60px; font-family: "NanumBarunGothic"; background:#00fffc; box-shadow:0px 5px 30px 10px rgba(0,0,0,0.2) }

.wrap .m_content { width: 520px; margin: 0 auto; display: none; }

.wrap .footer { width: 980px; margin: 0 auto; margin-top:20px;height: 165px;}
.wrap .footer.pc{position:relative;}
.wrap .footer.pc .footer_con{position: absolute; z-index: 999;}
.wrap .footer .link {overflow: hidden;}
.wrap .footer .link li { float: left; margin-right: 21px; position: relative; }
.wrap .footer .link li a{display:block;}
/*.wrap .footer .link > li.first:before { content:""; display: block; width: 1px; height: 18px; background: rgba(255,255,255,0.2); position: absolute; top: 5px; right: -11px; }*/
.wrap .footer .ad_list { overflow: hidden; margin-top: 10px; width:500px; font-size:13px; line-height:21px; opacity:0.5;}
.wrap .footer .ad_list li { float: left; margin-right: 19px; font-size: 13px; color: rgba(255, 255, 255, 0.5); position: relative; }
.wrap .footer .ad_list li.last { margin-right: 0; }
.wrap .footer .ad_list li:after { content:""; display: block; width: 1px; height: 12px; background-color: rgba(255,255,255,0.5); position: absolute; top: 3px; right: -10px; }
.wrap .footer .ad_list li.last:after {width:0;}
.wrap .footer.mobile{display:none;}
.wrap .footer.mobile .link > li.first:before{top:10px;}
@media screen and ( max-width:1120px ) {
    .wrap { padding-top: 68px;  height:auto;}
    .wrap .content_wrap { display: none; }
    .wrap .m_content { width: 520px; margin: 0 auto; display: block; }
	.wrap .m_content .sub_title{width:60%; margin:auto;padding-top:20px; padding-left:5%;}
	.wrap .m_content .sub_title img{width:100%; margin:auto;}
    .wrap .m_content .m_conlist { padding-top: 45px; }
    .wrap .m_content .m_conlist li { margin-top: 30px; }
    .wrap .m_content .m_conlist li:first-child { margin-top: 0; }

    .wrap .footer { width: 520px; height: auto; overflow: hidden; padding-bottom: 40px; }
    .wrap .footer .link { float: none; margin-top:20px;}
    .wrap .footer .link li { margin-right: 30px; }
    .wrap .footer .link li.first:before { right: -16px; }
    .wrap .footer .ad_list { float: none; margin-top: 20px; }
    .wrap .footer .ad_list li.ad {margin-bottom:8px; }
    .wrap .footer.pc{display:none;}
    .wrap .footer.mobile{display:block;}
}

@media screen and ( max-width:640px ) {
    .wrap { background: url(../images/m_Background.png) center no-repeat; background-size: cover;  }
    
}

@media screen and ( max-width:560px ) {
    .wrap .m_content { width: 90%; margin: 0 auto; }
    .wrap .m_content .m_logo { width: 100%; }
    .wrap .m_content .m_logo img { width: 100%; }
	.wrap .m_content .sub_title{padding-left:0%;}
    .wrap .m_content .m_conlist { width:100%; }
    .wrap .m_content .m_conlist li { width:100%; }
    .wrap .m_content .m_conlist li img { width: 100%; }

    .wrap .footer { width: 90%; }
    .wrap .footer .link .first { }
    .wrap .footer .link .last { margin-right: 0; }
    .wrap .footer .ad_list{width:90%;}
    .wrap .footer .ad_list li.first {margin-bottom: 5px;width: 100%;}
    
}

@media screen and ( max-width:385px ) {
    .wrap .footer .ad_list li.first { margin-bottom: 5px; }
    .wrap .footer .ad_list li.last { margin-top: 5px; }
}