@charset "utf-8";

/*===================================================================
* INFORMATION
* -------------------------------------------------------------------
* @File Name: responsive.css
* @Description : 공통 레이아웃 정의
* @Create Date: 2020-11-13
* @Last Update Date: N/A
* @History: N/A
* ====================================================================*/

/* =============================================================================== */
@media all and (max-width:1500px) {
    /* .serviceArea .amount li .grayBox {height:23rem;}
    .serviceArea .amount li.last .grayBox {height:26.5rem;} */
}
@media all and (max-width:1180px) {
    .serviceArea .amount li .grayBox.add {height:23rem;}
    .serviceArea .amount li.first .grayBox {height:26.5rem;}
}
@media all and (max-width:1150px) {
    .serviceArea .amount ul {margin:0 -1rem;}
    .serviceArea .amount li {margin:2rem 1rem;width:calc((100% / 3) - 2rem);}
    .serviceArea .amount li .cardBody > dl dt {display:none;}
    .serviceArea .amount li.first .grayBox {height:27.5rem;}
}
@media all and (max-width:1135px) {
    /* .serviceArea .amount li .grayBox {height:26rem;}
    .serviceArea .amount li.last .grayBox {height:29.5rem;} */
    .serviceArea .amount li .grayBox.add {height:26rem;}
    .serviceArea .amount li.first .grayBox {height:30.5rem;}
}
@media all and (max-width:960px) {
    .serviceArea .amount li {margin:0 0 1rem;max-width:auto;width:100%;display:block;padding:1.2rem;min-width:auto;min-height:auto;}
    .serviceArea .amount li .grayBox {height:auto !important;}
}
@media all and (max-width:900px) {
    #header h1 span {display:none;}
    .privacy {width:100%;}
}
/* =============================================================================== */
/* 디바이스(Galaxy tab s4 세로모드) 넓이 800 이하 일 경우 */
@media all and (max-width:800px) {
    #header {height:4rem;}
    #header h1 {line-height:2.6;font-size:1.571rem;}
    #header h1:before {width:3rem;background-size:auto 74%;}
    #header .menuList {display:none;}
    #header .btnMenu {display:block;margin-top:6px;}
    #container {padding-top:4rem;}
    #container .mainLayout:after {height: calc(100vh);}
    #container .mainTop {height:calc(100vh - 7rem);}
    #container .mainTop strong {font-size:2.571rem;}
    #container .mainTop span {margin:0;font-size:1.216rem;}
    #container .mainTop p {padding:2rem 0 0;font-size:1.216rem;}
    #container .mainTop .imgArea {bottom:2%;width:74%;}
    #container .intro p strong {font-size:2rem;}
    #container .intro p {font-size:1.143rem;}
    #container .serviceArea {padding:4rem 2rem;}
    .serviceArea .service > div {display:block;width:100%;}
    .serviceArea .service > .txtArea {padding:2rem 0;}
    .serviceArea .service > .imgArea {text-align:center;}
    .serviceArea .service > .imgArea img {max-width:80%;}
    .serviceArea .service .function {margin-top:0;}
    .serviceArea .service .function dl {width:100%;padding:2rem 0 0 !important;}
    .serviceArea .service .tags {margin-bottom:2rem;text-align:center;}
    .serviceArea .service .tags .tag {font-size:1.429rem;}
    .serviceArea .amount {padding-bottom:5rem;}
    .card {padding-top:34%;width:100%;background-size:60% auto;background-position:center 4%;}
    .card .formBox {padding:2rem;width:100%;}
    .card .formBox .formBody .gridItem {display:block;padding:0 !important;width:100%;}
    .card p {position:relative;right:auto;top:auto;width:100%;}
    .contact {width:100%;}
    .contact strong {font-size:1.857rem;}
    .infomation {margin-top:2rem;padding:2rem;}
    .infomation ul li {float:none;width:100%;padding:0 0 1.2rem;}
    .infomation li:first-child {width:100%;}
    .infomation ul li:last-child {padding:0;}
    .infomation ul li > strong {margin-bottom:0.5rem;padding-bottom:0.5rem;}
    .download .gridSet {display:block;}
    .download .gridSet .gridItem {float:none;padding:0 2rem;width:100%;}
    .download .gridItem .btnDl {margin:0 2px;font-size:1rem;padding:4px 10px;}
    .download .gridItem .btnDl:before {width:2rem !important;height:2rem !important;}
    #footer {padding:1rem;}
    #footer footer {padding:0 0 0 2.2rem;background-size:auto 1.5rem;background-position:left center;}
    #footer p {font-size:0.86rem;}
    #footer .rule {display:inline-block;margin-top:3px;}
    #footer .btnLine {margin:0 0 0 5px;}
}
/* =============================================================================== */
/* =============================================================================== */
@media (max-width:560px) {
    #footer .rule {float:none;}
    #footer .btnLine em {display:none;}
    .privacyback {padding:2rem;}
}
@media (max-width:440px), (orientation : landscape) and (max-width:820px) {
    .calDupSet .calSet {float:left;width:calc((100% - 25px )/2);}
    #container .mainTop .topTit {padding:0;}
    .serviceArea .service .hyphenList li {font-size:1rem;word-break:break-all;}
    .serviceArea .service .function dl dt {font-size:1.429rem;}
    .serviceArea .service .function dl dd li {font-size:1rem;}
    .serviceArea .service .function2 {padding:6% 0 0 2.5rem;}
    .serviceArea .service .function2 li {font-size:1rem;}
    .serviceArea .service .txtArea > strong {font-size:1.857rem;}
    .serviceArea .amount > strong {padding-bottom:2rem;font-size:1.857rem;}
    .serviceArea .amount > p {font-size:1rem;}
    .serviceArea .amount li > strong {font-size:1.429rem;}
    .serviceArea .amount li .cardBody > span {font-size:1.143rem;}
    .serviceArea .amount li dl dd .price {font-size:1.429rem;}
    .card .formBox .formBody dl dt {font-size:1rem;}
    .card .formBox .gridSet dl {padding:0 0 1rem;}
    .card .formBox .btnSend {height:2.857rem;font-size:1.143rem;}
    .card .formBox {padding:1.5rem 1.5rem 2rem;}
    .floating {bottom:2rem;right:1.5rem;}
    .download {padding:3rem 0;}
    .download .gridItem strong {padding-bottom:2rem;}
    .ctsHead {padding:1.7rem 0 0 0;height:12rem;}
    .ctsHead.ruleCase {padding:1.7rem 0 0 0;height:9rem;}
    .ctsHead h2 {font-size:1.429rem;}
    .ctsHead p {font-size:1rem;padding-top:1rem;}
}