@charset "utf-8";

/*
 * File    : rwd-awards.css
 * Author  : STUDIO-JT (JC)
 *
 * SUMMARY :
 * 수상내역 — 반응형
 */

@media (max-width: 1664px) {
/* CERTIFICATE */
.certificate_header_title {margin-top: 118px;}

.certificate_year {display: block;width: 100%;margin-bottom: 22px;position: relative;top: 0;left: 0;}
}

@media (max-width: 1023px) {
/* CERTIFICATE */
.certificate {padding-top: 0;}

.certificate_header {padding-bottom: 50px;}

.certificate_txt {width: 100%;margin-bottom: 35px;}

.certificate_header_title {margin: 0 0 25px 0;}

.certificate_header_title > span {font-size: 50px;}

.certificate_header_title > sup {font-size: 18px;}

.certificate_header_description br {display: block;}

.certificate_illust {display: block;width: 100%;max-width: 550px;margin: 0 auto;text-align: center;}

/* 일러스트가 fluid(< 550px) 가 되면 "Yeh!" 말풍선/텍스트도 컨테이너 비례로 축소.
   원본은 spidocheScaler(JS) 로 통째로 축소 → 배경은 이미 %(max-width:100%) 라
   말풍선(53.34%=293/550)·텍스트(16.7%=92/550) 만 %로 바꾸면 동일 결과 (가로 오버플로우 해소). */
.certificate_illust_bubble {width: 53.34%;left: 16.36%;top: 7%;}

/* 말풍선 배경 이미지만 채움 (txt 는 제외 — 아래에서 별도 비율). */
.certificate_illust_bubble > img:not(.certificate_illust_txt) {width: 100%;height: auto;}

/* "Yeh!" 텍스트: 말풍선(부모) 기준 비율 유지 (92/293 = 31.4%). left/top 38% 는 base 유지. */
.certificate_illust_txt {width: 31.4%;}

.certificate_group + .certificate_group {margin-top: 120px;}

.certificate_year > span {font-size: 32px;}

.certificate_year > sup {font-size: 13px;}
}

@media (max-width: 768px) {
/* CERTIFICATE */
.certificate_firecracker figure {transform: scale(0.5);}

.certificate_header_description {font-weight: 400;}

html.ios .certificate_header_title > span > i {padding-left: 3px;}

html.ios .certificate_header_description span {padding-left: 1px;}
}

@media (max-width: 767px) {
/* CERTIFICATE */
.certificate_txt {margin-bottom: 20px;}

.certificate_header_title > span {font-size: 24px;}

.certificate_header_title > sup {padding-bottom: 0px;padding-left: 6px;font-size: 12px;}

.certificate_header_description {line-height: 2;}

.certificate_group + .certificate_group {margin-top: 90px;}

.certificate_year > span {font-size: 18px;}

.certificate_year > sup {padding-left: 6px;padding-bottom: 0px;font-size: 10px;}
}

@media (max-width: 480px) {
/* CERTIFICATE */
.certificate_header {padding-bottom: 30px;}

.certificate_header_description br {display: none;}

.certificate_group + .certificate_group {margin-top: 70px;}

.certificate_year {margin-bottom: 17px;}
}