body::-webkit-scrollbar {width: 5px;height:5px;}
body::-webkit-scrollbar-thumb {height: 30%;background: rgba(128, 117, 105, .5);border-radius: 3px;}
body::-webkit-scrollbar-track {background: rgba(128, 117, 105, .3);}
* {
    --header-height-1 : 5.5rem;
    --footer-height-1 : 6.5rem;
    --common-width : 720px;
}
main {width: 100%;margin: 0 auto;max-width: var(--common-width);min-height: 100vh;padding-top: var(--header-height-1);padding-bottom: 2rem;background-color: #fff;}


/* 헤더 */
header {
    z-index: 100;
    top: 0;
    left: 50%;
    padding: 0 1.5rem;
    width: 100%;
    position: fixed;
    background-color: #fff;
    transform: translateX(-50%);
    height: var(--header-height-1);
    max-width: var(--common-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .logo img {
    height: calc(var(--header-height-1) - 2rem);
    display: block;
}
header .home img {
    height: calc(var(--header-height-1) - 2.5rem);
    display: block;
}
header .menu, header .dummy, header .prev {
    width: var(--header-height-1);
    height: var(--header-height-1);
    cursor: pointer;
}
header .menu img, header .prev img {
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    object-fit: contain;
}

/* ========================= */


/* home */
main.home {padding-left: 1.5rem;padding-right: 1.5rem;background-color: #f0f7f7;}
main.home .banner_wrap {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
    height: 43rem;
}
main.home .banner_wrap .banner:nth-of-type(1) {background: #d3e6c8 url(../img/btn-2-icon.png) no-repeat 50% 85% / 38%;}
main.home .banner_wrap .banner:nth-of-type(2) {background: #c5e3ee url(../img/btn-3-icon.png) no-repeat 50% 85% / 35%;}
main.home .banner_wrap .banner:nth-of-type(3) {background: #f0d5cc url(../img/btn-4-icon.png) no-repeat 50% 85% / 40%;}
main.home .banner_wrap .banner:nth-of-type(4) {background: #f3e7bf url(../img/btn-5-icon.png) no-repeat 55% 85% / 50%;}
main.home .banner {padding: 1.8rem 1.5rem;border-radius: 1rem;display: block;box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, .1);}
main.home .banner h2 {font-size: 2rem;font-weight: 800;color: #0d1d2d;line-height: 1.4;margin-bottom: .5rem;}
main.home .banner h3 {font-size: 1.4rem;color: #323232;line-height: 1.4;margin-bottom: 1rem;}
main.home .banner p {font-size: 1.4rem;color: #0657a3;line-height: 1.4;color: #fff;width: fit-content;border-radius: .5rem;padding: 1rem;background-color: #0e92cc;}

#home_banner1 {height: 18rem;margin: 1.5rem 0 0;width: 100%;background: #0657a3 url(../img/btn-1-icon.png) no-repeat 100% 100% / 50%;}
#home_banner1 h2 {color: #9ec6e2;}
#home_banner1 h3 {color: #fff;}
#home_banner1 p {background-color: #0e92cc;}

#home_banner2 {height: 15rem;margin: 0 0 1.5rem;width: 100%;background: #d9d6f3 url(../img/btn-6-icon.png) no-repeat calc(100% - 1.5rem) calc(100% - 2rem) / 20%;}
#home_banner2 h2 {color: #0c1c2c;}
#home_banner2 h3 {color: #2b2b29;}
#home_banner2 p {background-color: #8485f1;}




/* sub */
.sub h2 {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    color: #2f2f2f;
    margin-bottom: 1rem;
}
.sub section {
    padding: 1.5rem;
}
.sub .swiper {
    height: fit-content;
}
.sub .swiper-wrapper {
    height: fit-content;
}
.sub .swiper-slide {
    height: fit-content;
    width: fit-content;
    padding: 1rem;
    color: #7c93a2;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 1rem;
    border: 1px solid #83abd1;
    background-color: #edf4f9;
}
.sub .swiper-slide.on {
    padding: 1rem;
    color: #fff;
    font-weight: normal;
    font-size: 1.4rem;
    border-radius: 1rem;
    border: 1px solid #0e92cc;
    background-color: #0e92cc;
}
.sub .content {}
.sub .content.design1 {}
.sub .content.design1 h2 {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #6a7f90;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid #cdcdcd;
}
.sub .content.design1 span {display: grid;grid-template-columns: 1fr 3fr;gap: 1.5rem;margin: 1rem 0;}
.sub .content.design1 span h3 {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #fff;
    font-weight: bold;
    padding: 1.5rem;
    display: flex;justify-content: center;align-items: center;
    border-radius: 1rem;
    text-align: center;
    background-color: #6dc995;
    border: 1px solid #c3e2cf;
}
.sub .content.design1 span pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #555555;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #c3e2cf;
}
.sub .content.design2 {}
.sub .content.design2 h2 {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 800;
    color: #0e92cc;
}
.sub .content.design2 pre {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #535353;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid #f2f2f2;
}
.sub .content.design3 {}
.sub .content.design3 ul {}
.sub .content.design3 ul li {}
.sub .content.design3 ul li a {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #004b9c;
    border-radius: 1rem;
    padding: 1.5rem 1rem;
    margin: 1rem 0;
    font-weight: 800;
    display: block;
    border: 1px solid #ddd;
}
.sub .content.design3 ul li a b {
    line-height: inherit;
    font-weight: normal;
    font-size: inherit;
    color: #cdcdcd;
    margin: 0 .5rem;
}
.sub .content.design3 ul li a span {
    line-height: inherit;
    font-weight: normal;
    font-size: inherit;
    color: #373737;
}
.calc_wrap {}
.calc_wrap .calc_tabs {
    display: flex;justify-content: space-between;align-items: center;
}
.calc_wrap .calc_tabs a {
    color: #b0b0b0;
    font-size: 1.6rem;
    width: 100%;
    height: 5rem;
    display: flex;justify-content: center;align-items: center;
    border-radius: 1rem 1rem 0 0 ;
    border: 1px solid #d3d3d3;
    background-color: #f2f2f2;
}
.calc_wrap .calc_tabs a.on {
    border: 1px solid #0657a3;
    background-color: #0657a3;
    color: #fff;
    font-weight: bold;
}
.calc_wrap .type {
    border: 1px solid #e4e4e4;
    border-top: none;
    padding: 3rem 1rem 2rem;
    border-radius: 0 0 1rem 1rem;
}
.calc_wrap .type > span {
    display: flex;justify-content: space-between;align-items: center;border: 1px solid #f2f2f2;
    border-radius: .5rem;padding: 1rem;margin-bottom: 1.5rem;
}
.calc_wrap .type > span p {
    padding: .5rem 1rem;
    color: #8197a5;
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.4rem;
    border-radius: .5rem;
    border: 1px solid #83abd1;
    background-color: #edf4f9;
}
.calc_wrap .type > span img {
    width: 1.5rem;
}
.calc_wrap .type > span select {
    width: 40%;
    height: 4rem;
    font-size: 1.4rem;
    border: none;
    text-align: right;
}
.calc_wrap .type > span option {
    font-size: 1.4rem;
    color: #6a7f90;
}
.calc_wrap .type > span input[type=number] {
    width: 40%;
    height: 4rem;
    padding-right: .5rem;
    font-size: 1.4rem;
    text-align: right;
}
.calc_wrap .type > span label {
    font-size: 1.4rem;
}
.calc_wrap .type > span span {
    width: 40%;display: flex;justify-content: right;align-items: center;
}
.calc_wrap .type > span span input[type=number] {width: 100%;}
.calc_wrap .type > span span input[type=number]::placeholder {color: #ccc;}
#goresult {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    height: 6rem;
    width: 100%;
    display: block;
    border-radius: 1rem;
    margin-top:3rem;
    background-color: #004b9c;
}
#calc_result {
    font-size: 1.8rem;
    color: #252525;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 2rem;
}
#calc_result span {
    line-height: inherit;
    font-weight: 800;
    font-size: 2.4rem;
    color: #0990cb;
}
#calc_result span b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
pre#info {
    font-size: 1.4rem;
    line-height: 1.4;
    color: #6a7f90;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 2rem;
    border: 1px solid #cdcdcd;
}