@charset "utf-8";
@import url("layout.css");
/*-------------------------------------------------
Author : 조민지
Create date : 2018-10-30
-------------------------------------------------*/

@media (max-width:1920px)
{
    #main {background-size: auto 29.5rem;}

    /* 비주얼 */
    #visual .list img {width: auto;}

    /* 서비스 전체보기 */
    .service {padding-right: 2rem;}
    .service h2 a {right: 2rem;}

    /* 헬프데스크 */
    .helpdesk {background-size: auto 100%;}
}

@media (max-width:1730px)
{
    /* 서비스 전체보기 */
    .service .group2 .label {width: 5rem; padding: 0 0.5rem;}
    .service .group2 ul {margin-left: 5rem;}
}

@media (max-width:1430px)
{
    /* 서비스 전체보기 */
    .service {padding-right: 2rem;}
    .service h2 a {right: 2rem;}
}

@media (max-width:1250px)
{
    #main {background-size: auto 80%;}
    #contents {position: relative; z-index: 0;}
	
	#visual {height: auto; padding: 3rem;}
	#visual .img {top: 0; height: auto; transform: translate(0, 0);}
    #visual .img img {width:12rem; transform: translate(0, 0);}

    /* 비주얼 */
    #visual {float: none; width: 100%;}
    #visual .list {width: 100%; height: 200%;}
    #visual .list li,
    #visual .list img {height: 100%;}

    /* 서비스 전체보기 */
    .service {float: none; width: auto; margin: 0 2rem 2rem; padding: 0;}
    .service h2 a {right: 0; height: 49.2%;}
    .service .group1 li:nth-child(n+4) {margin-top: 0.6%;}
    .service .group2 .label {width: 7rem; padding: 0 1rem;}
    .service .group2 ul {margin-left: 7rem;}
}

@media (max-width:1024px)
{
    .notice {float: none; width: 100%;}
    .popupzone {width: 50%;}
    .helpdesk {width: 50%; background-size: 100% auto;}
}

@media (max-width:768px)
{
    /* 서비스 전체보기 */
    .service .group2 .item {float: none; width: 100%; height: auto; min-height: 4rem; border: 0 none !important;}
    .service .group2 .item + .item {border-top: 1px dotted #cfcfcf !important;}
    .service .group2 .label {width: 7rem; padding: 0 1rem;}
    .service .group2 .label img {width: 2rem;}
    .service .group2 ul {margin-left: 7rem;}

    /* 헬프데스크 */
    .helpdesk {background-size: auto 110%;}
}

@media (max-width:590px)
{
    #main {background-size: auto 60%;}

    /* 비주얼 */
    #visual {height: auto; padding: 3rem;}
    #visual .img {top: 0; height: auto; transform: translate(0, 0);}
    #visual .img img {top: 0; width: auto; max-width: 100%; max-height: 100px; transform: translate(0, 0);}
    #visual .list {width: 100%; height: 400%;}

    /* 서비스 전체보기 */
    .service {height: auto; margin-top:1rem;}
    .service h2 a {z-index: 1; width: 32.333%; height: 10.5rem;}
	.service h2 a:nth-child(1) { margin-top:220px;}
    .service .area {margin-right: 0;}
    .service .group1 {overflow: hidden; width: 101%;}
    .service .group1 li {width: 32.333%; height: 10.5rem;}
	.service .group1 li:nth-child(2) { width: 32.333%; margin-right:32.333%; }
	.service .group1 li:nth-child(2) span { display:none; }
    /*.service .group1 li:nth-child(2), */
    .service .group1 li:nth-child(6) {width: 65.666%;}
    .service .group1 li:nth-child(n+3) {margin-top: 0.5rem;}
    .service .group2 {z-index: 2; width: 100%; padding-top: 0; padding-bottom: 0;}
    .service .group2 .item {padding: 0.9rem 0;}
    .service .group2 .close {display: block; overflow: hidden; position: absolute; right: 1rem; bottom: 1rem; width: 2rem; height: 2rem; text-align: center; line-height: 2rem;}
    .service .group2 .close::before {display: block; font-family: 'xeicon'; font-size: 1.2rem; content: '';}

    /* 공지사항 */
    .notice {height: auto;}
    .notice li {float: none; width: 100%;}
    .notice li + li {border: 0 none; border-top: 1px solid #d6d6d6;}
    .notice a {height: auto; padding-right: 5rem; word-break: keep-all;}
    .notice a::after {bottom: auto; top: 50%; margin-top: -1.1rem;}
    .notice p {height: auto; margin: 0.5rem 0 0.2rem;}

    /* 팝업존 */
    .popupzone {float: none; width: 100%; height: auto;}
    .popupzone img {top: 0; width: 100%; transform: translate(0, 0);}

    /* 헬프데스크 */
    .helpdesk {float: none; width: 100%; height: auto; padding: 3rem 1rem; border-left: 0.5rem solid #fff; border-top: 0 none; background-size: 100% auto;}
    .helpdesk h2 {padding-top: 0;}

	.helpdesk.mobile-only { 
		display:block; 
		border:none;	
		margin-bottom:1rem;
	}
	.helpdesk.pc-only { display:none; }
}

@media (max-width:350px)
{
    /* 비주얼 */
    #visual {padding: 1.5rem 3rem;}
    #visual .list {width: 100%; height: 450%;}

    /* 서비스 전체보기 */
    .service {margin: 0 1rem 1rem;}
    .service h2 a {height: 8rem;}
	.service h2 a:nth-child(1) { }
    .service .group1 li {width: 49%; height: 8rem;}
    .service .group1 li:nth-child(n+2) {margin-top: 0.3rem;}
    .service .group1 li:nth-child(2) {width: 99%;}
    .service .group1 li:nth-child(3) {position: absolute; right: 0; top: 0; margin: 0;}
    .service .group1 a {padding: 1rem;}

    /* 공지사항 */
    .notice a {padding: 1rem; padding-right: 4rem;}
    .notice a::after {right: 1rem;}

    /* 헬프데스크 */
    .helpdesk {background-size: auto 110%;}
}