@charset "utf-8"; 

/* 디바이스 981px 이상에서 적용*/
@media all and (min-width:981px)
{
	html,body{overflow:auto; }
	html.ovfH,body.ovfH{overflow:auto; }
	#mainLogo {display:none; }
	#container {width:100%; max-width:1100px; margin:0 auto; float:none;}
	.contentTitle{text-align:center;}
	#logo {display:none;}
    
    /* 기본 topContentMenu 비율 설정 */
    .topContent .topContentMenu {
        padding: 15px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .topContent .topContentMenu img {
        max-width: 220px;
        max-height: 180px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .topContent ul {
        flex-basis: calc(50% - 10px); /* 태블릿 크기에서는 2개씩 배치 */
    }
}


/* 디바이스 1200px 이하에서 적용*/
@media all and (max-width:1200px)
{
    /* 콘텐츠 영역 조정 */
    .topTitle {
        width: 70%;
        padding-top: 15px;
    }
    
    .topTitle > div:first-child .line1 {
        font-size: 22px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 30px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 36px;
    }
    
    .topTitle > div:last-child img {
        height: 240px;
    }
    
    .topButton > div a {
        font-size: 22px;
    }
    
    .topContent {
        width: 66%;
        margin: 0 auto;
    }
    
    .topContent ul {
        width :250px;
        flex-basis: calc(50% - 10px); /* 태블릿 크기에서는 2개씩 배치 */
    }
    
    .topContent .topContentMenu {
        height: 190px;
        padding: 12px;
    }
    
    .topContent .topContentMenu img {
        max-width: 200px;
        max-height: 165px;
        width: auto;
        height: auto;
    }
    
    #container {
        width: 100%;
        padding: 0 15px;
    }
    
}

/* 디바이스 1100px 이하에서 적용*/
@media all and (max-width:1100px)
{
    .topTitle > div:first-child .line1 {
        font-size: 21px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 28px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 34px;
    }
    
    .topButton > div a {
        font-size: 21px;
    }
    
    .topContent ul {
        min-height: 280px;
        
    }
    
    .topContent .topContentMenu {
        height: 180px;
        padding: 10px;
    }
    
    .topContent .topContentMenu img {
        max-width: 180px;
        max-height: 160px;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 20px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 17px;
    }
}

/* 디바이스 1024px 이하에서 적용*/
@media all and (max-width:1024px)
{
    .topTitle {
        width: 70%;
    }
}
/* 디바이스 980px 이하에서 적용*/
@media all and (max-width:980px)
{
	#logo a{padding:10px; }
	#logo a img{height:30px; }

	/* 중간 레이아웃 */
	#container{width:auto; float:none; padding:15px; }
	.contentTitle{border-bottom:0px;}
	.contentTitle{padding:10px 0 30px;margin-bottom:30px; text-align:center;}
	.contentTitle strong{float:none; color:#333; font-size:30px;}
    
    .topTitle {
        width: 80%;
    }

    .topTitle > div:first-child .line1 {
        font-size: 20px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 26px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 32px;
    }
    
    .topButton > div a {
        font-size: 20px;
    }
    
    .topContent {
        justify-content: center;
        width:90%;

    }
    
    .topContent ul {
        margin: 10px;
        min-height: 280px;
        

    }
    
    .topContent .topContentMenu {
        height: 170px;
    }
    
    .topContent .topContentMenu img {
        max-width: 170px;
        max-height: 150px;
    }
}

/* 디바이스 850px 이하에서 적용*/
@media all and (max-width:850px)
{
	/* contents */
	.mainLogo{padding:20px 0;}
	.mainLogo img{width:80%; margin:0 auto; }
    
    .topTitle {
        width: 80%;
    }

    .topTitle > div:first-child .line1 {
        font-size: 19px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 24px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 30px;
    }
    
    .topButton > div a {
        font-size: 19px;
    }
    
    .topContent {
     width:90%;
    }

    .topContent ul {
        min-height: 250px;
    }
    
    .topContent .topContentMenu {
        height: 160px;
        padding: 8px;
    }
    
    .topContent .topContentMenu img {
        max-width: 160px;
        max-height: 140px;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 19px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 16px;
    }
    .footContent .footline1 {
        font-size: 22px;
    }
    
    .footContent .footline2 {
        font-size: 16px;
    }
}

/* 디바이스 650px 이하에서 적용*/
@media all and (max-width:650px)
{
	/* contents */
	.topTitle {
		flex-direction: column-reverse;
		width: 90%;
		padding-top: 10px;
	}

	.topTitle > div:first-child {
		width: 100%;
		padding-top: 15px;
		text-align: center;
	}

	.topTitle > div:first-child .line1,
	.topTitle > div:first-child .line2,
	.topTitle > div:first-child .line3 {
		padding-left: 0;
	}
    
    .topTitle > div:first-child .line1 {
        font-size: 18px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 22px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 28px;
    }

	.topTitle > div:last-child {
		width: 100%;
		text-align: center;
	}

	.topTitle > div:last-child img {
		height: auto;
		max-width: 100%;
		max-height: 200px;
	}

	.topButton {
		padding-left: 0;
		text-align: center;
	}
    
    .topButton > div {
        padding: 8px 15px;
    }
    
    .topButton > div a {
        font-size: 18px;
    }
    
    .topContent {
        width: 66%;
        justify-content: center;
    }
    
    .topContent ul {
        flex-basis: 100%;
        width: 100%;
        max-width: 400px;
        margin: 10px auto;
        min-height: auto;
        aspect-ratio: auto; /* 비율 조정 */
    }
    
    .topContent .topContentMenu {
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .topContent .topContentMenu img {
        max-width: 180px;
        max-height: 140px;
        margin: 0 auto;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 18px;
        text-align: center;
        width: 100%;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 15px;
        text-align: center;
        width: 100%;
    }

	/* footer */
	#footer > dl > dd a,
	#footer address {font-size:11px; letter-spacing:-0.05em; }
	#footer address em{display:none; }
	#footer p span{display:none; }
    .footContent .footline1 {
        font-size: 20px;
    }
    
    .footContent .footline2 {
        font-size: 12px;
    }
}

/* 디바이스 420px 이하에서 적용*/
@media all and (max-width:420px)
{
	.mainLogo {
        margin-left: -20px;
    }
    .header-util {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 16px;
        gap: 6px;
    }

    /* contents */
	.topTitle > div:first-child .line1 {
		font-size: 16px;
	}

	.topTitle > div:first-child .line2 {
		font-size: 20px;
	}

	.topTitle > div:first-child .line3 {
		font-size: 24px;
	}

	.topButton > div {
		width: 80%;
		margin: 5px auto;
        padding: 6px 10px;
	}

	.topButton > div a {
		font-size: 16px;
	}

	.topContent {
		width: 90%;
	}

	.topContent ul {
		flex-basis: 100%;
		width: 100%;
		margin-bottom: 10px;
        padding: 8px;
	}
    
    .topContent .topContentMenu {
        height: 140px;
        padding: 5px;
    }
    
    .topContent .topContentMenu img {
        max-width: 150px;
        max-height: 130px;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 16px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 13px;
    }
    
    .footContent .footline1 {
        font-size: 15px;
    }
    
    .footContent .footline2 {
        font-size: 14px;
    }

    #footer p {
        color: #999;
        font-size: 10px;
        font-family: verdana;
        padding-top: 0px;
    }
}

/* 갤럭시 S 시리즈 (중소형) */
@media all and (min-width:360px) and (max-width:375px) {
    .mainLogo {
        padding: 4px 0;
    }
    .topTitle {
        width: 95%;
    }
    
    .topTitle > div:first-child .line1 {
        font-size: 15px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 19px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 23px;
    }
    
    .topButton > div {
        width: 85%;
        padding: 5px 8px;
    }
    
    .topButton > div a {
        font-size: 15px;
    }
    
    .topContent {
        width: 95%;
    }
    
    .topContent ul {
        padding: 6px;
    }
    
    .topContent .topContentMenu {
        height: 130px;
    }
    
    .topContent .topContentMenu img {
        max-width: 140px;
        max-height: 120px;
    }
    
    .footContent .footline1 {
        font-size: 15px;
    }
    .footContent .footline2 {
        font-size: 14px;
    }

    #footer p {
        color: #999;
        font-size: 10px;
        font-family: verdana;
        padding-top: 0px;
    }
}

/* 갤럭시 S 시리즈 (최신 모델) */
@media all and (min-width:376px) and (max-width:412px) {
    .mainLogo {
        padding: 4px 0;
    }
    .topTitle {
        width: 95%;
    }
    
    .topTitle > div:first-child .line1 {
        font-size: 16px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 20px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 24px;
    }
    
    .topButton > div {
        width: 82%;
    }
    
    .topContent {
        width: 92%;
    }

    .topContent .topContentMenu img {
        max-width: 140px;
        max-height: 120px;
    }
    
    .footContent .footline1 {
        font-size: 15px;
    }

    .footContent .footline2 {
        font-size: 14px;
    }

    #footer p {
        color: #999;
        font-size: 10px;
        font-family: verdana;
        padding-top: 0px;
    }
}

/* 갤럭시 노트 시리즈 (대형) */
@media all and (min-width:413px) and (max-width:428px) {
    .topTitle > div:first-child .line1 {
        font-size: 17px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 21px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 25px;
    }
    
    .topButton > div a {
        font-size: 17px;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 17px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 14px;
    }
}

/* 갤럭시 폴드/플립 (접힌 상태) */
@media all and (max-width:320px) {
    .mainLogo img {
        height: 20px;
    }
    
    .topTitle {
        width: 95%;
    }
    
    .topTitle > div:first-child .line1 {
        font-size: 14px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 18px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 22px;
    }
    
    .topButton > div {
        width: 90%;
        padding: 5px;
        margin: 4px auto;
    }
    
    .topButton > div a {
        font-size: 14px;
    }
    
    .topContent {
        width: 95%;
    }
    
    .topContent ul {
        padding: 5px;
    }
    
    .topContent .topContentMenu {
        height: 120px;
        padding: 4px;
    }
    
    .topContent .topContentMenu img {
        max-width: 130px;
        max-height: 110px;
    }
    
    .topContent ul li:nth-child(2) {
        font-size: 15px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 12px;
    }
    
    .footContent .footline1 {
        font-size: 14px;
    }
    
    .footContent .footline2 {
        font-size: 11px;
    }
}

/* 세로 모드에서 가로 모드로 전환 시 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .topTitle {
        padding-top: 5px;
    }
    
    .topTitle > div:first-child {
        padding-top: 5px;
    }
    
    .topTitle > div:last-child img {
        height: 150px;
    }
    
    .topButton {
        margin-top: 10px;
    }
    
    .topButton > div {
        padding: 5px 10px;
        margin: 3px;
    }
    
    .topContent {
        margin-top: 10px;
    }
    
    .topContent ul {
        min-height: auto;
    }
    
    .topContent .topContentMenu {
        height: 130px;
    }
    
    .footContent {
        margin: 20px auto;
    }
}

/* 작은 화면 (iPhone SE, 미니 시리즈 등) */
@media screen and (max-width: 375px) {
  /* 스타일 */
 .mainLogo {
    padding: 4px 0;
} 
  .topTitle {
    width: 95%;
}

.topTitle > div:first-child .line1 {
    font-size: 16px;
}

.topTitle > div:first-child .line2 {
    font-size: 20px;
}

.topTitle > div:first-child .line3 {
    font-size: 24px;
}

.topButton > div {
    width: 82%;
}

.topContent {
    width: 92%;
}
.topContent ul li:nth-child(2) {
    font-size: 15px;
}

.topContent ul li:nth-child(3) {
    font-size: 12px;
}

.footContent .footline1 {
    font-size: 14px;
}

.footContent .footline2 {
    font-size: 11px;
}
}


/* 중간 화면 (iPhone 기본 모델) */
@media screen and (min-width: 376px) and (max-width: 428px) {
    /* 스타일 */
    .mainLogo {
        padding: 4px 0;
    }
    .topTitle {
        width: 95%;
    }
    
    .topTitle > div:first-child .line1 {
        font-size: 16px;
    }
    
    .topTitle > div:first-child .line2 {
        font-size: 20px;
    }
    
    .topTitle > div:first-child .line3 {
        font-size: 24px;
    }
    
    .topButton > div {
        width: 82%;
    }
    
    .topContent {
        width: 92%;
    }
    .topContent ul li:nth-child(2) {
        font-size: 15px;
    }
    
    .topContent ul li:nth-child(3) {
        font-size: 12px;
    }
    
    .footContent .footline1 {
        font-size: 14px;
    }
    
    .footContent .footline2 {
        font-size: 11px;
    }
  }