/*!

__/\\\\\\\\\\\\\\\_______/\\\\\_________/\\\\\\\\\______/\\\________/\\\______/\\\\\\\\\____
 _\/\\\///////////______/\\\///\\\_____/\\\///////\\\___\/\\\_____/\\\//_____/\\\///////\\\__
  _\/\\\_______________/\\\/__\///\\\__\/\\\_____\/\\\___\/\\\__/\\\//_______/\\\______\//\\\_
   _\/\\\\\\\\\\\______/\\\______\//\\\_\/\\\\\\\\\\\/____\/\\\\\\//\\\______\//\\\_____/\\\\\_
    _\/\\\///////______\/\\\_______\/\\\_\/\\\//////\\\____\/\\\//_\//\\\______\///\\\\\\\\/\\\_
     _\/\\\_____________\//\\\______/\\\__\/\\\____\//\\\___\/\\\____\//\\\_______\////////\/\\\_
      _\/\\\______________\///\\\__/\\\____\/\\\_____\//\\\__\/\\\_____\//\\\____/\\________/\\\__
       _\/\\\________________\///\\\\\/_____\/\\\______\//\\\_\/\\\______\//\\\__\//\\\\\\\\\\\/___
        _\///___________________\/////_______\///________\///__\///________\///____\///////////_____

This file contains custom modifications by FORK9
https://fork9.com
*/

/*
-----------------------------------------------------------------------
공통
-----------------------------------------------------------------------
*/

#mainIndex.main {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#mainIndex section {
    padding: 0 0 0 0;
    border: 0;
    margin: 0;
}

#mainIndex section:first-child {
    padding-top: 0;
}

/*
-----------------------------------------------------------------------
Heading Text
-----------------------------------------------------------------------
*/

#mainIndex .heading-text {
    margin-bottom: 1.875rem /* 30/16 */;
}
#mainIndex .heading-text .title {
    position: relative;
    display: inline-block;
    margin-bottom: 0.3125rem /* 5/16 */;
    font-size: 1.5rem /* 24/16 */;
    font-weight: 600;
    line-height: var(--line-height);
    letter-spacing: -1px;
    color: #000;
}
#mainIndex .heading-text em {
    color: var(--color-purple);
}
#mainIndex .heading-text p {
    margin-bottom: 0;
    font-size: 0.9375rem /* 15/16 */;
    line-height: var(--line-height);
    color: #777;
}
#mainIndex .more-text {
    font-size: 1.375rem; /* 22/16 */
    color: #777;
}

/*
-----------------------------------------------------------------------
메인 슬라이더
-----------------------------------------------------------------------
*/

#mainIndex .slider-banner-wrap .slider-banner {
    /*border-bottom: 1px solid var(--color-lightborder);*/
}

/*
-----------------------------------------------------------------------
카테고리 바로가기
-----------------------------------------------------------------------
*/

#mainIndex .main-cate {
    padding:0;
}
#mainIndex .main-cate .main-cate-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#mainIndex .main-cate .item {
    width: 25%;
    flex: 1 1 auto;
}
#mainIndex .main-cate .item img {
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: .3s ease;
    object-fit: cover;
}
#mainIndex .main-cate .item a {
    display: block;
    position: relative;
    overflow: hidden;
}
#mainIndex .main-cate .item:hover img, #mainIndex .main-cate .item:focus img {
    transform: scale(1.1);
}
#mainIndex .main-cate .item a .item-info {
    position: absolute;
    bottom: 1.375rem /* 22/16 */;
    left: 1.25rem /* 20/16 */;
    transition: .5s ease;
}
#mainIndex .main-cate .item a .item-info .item-name {
    font-size: 1.125rem  /* 18/16 */;
    font-weight: 500;
    color: var(--color-black);
    line-height: 1;
}
#mainIndex .main-cate .item a .item-info .more-text {
    display: none;
    font-size: 0.875rem  /* 14/16 */;
}
#mainIndex .main-cate .item a:hover .more-text {
    display: block;
}
#mainIndex .main-cate .item:nth-child(1) {
    background-color: rgba(126, 208, 243, 0.15);
}
#mainIndex .main-cate .item:nth-child(2) {
    background-color: rgba(137, 201, 143, 0.25);
}
#mainIndex .main-cate .item:nth-child(3) {
    background-color: rgba(254, 193, 206, 0.5);
}
#mainIndex .main-cate .item:nth-child(4) {
    background-color: rgba(255, 218, 193, 0.5);
}

/*
-----------------------------------------------------------------------
서비스 안내
-----------------------------------------------------------------------
*/

#mainIndex .main-svr {
    padding: 0;
    margin: 0;
}
#mainIndex .main-svr .item {
}
#mainIndex .main-svr-bg-1 {
    background-color: #f8f8f8;
}
#mainIndex .main-svr-bg-2 {
    background-color: #cfebd2;
}
#mainIndex .main-svr-bg-3 {
    background-color: #d9effa;
}
#mainIndex .main-svr-bg-4 {
    background-color: #f7f7f7;
}
#mainIndex .main-svr-bg-5 {
    background-color: #ffdac1;
}

#mainIndex .main-svr .main-svr-list-1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-1 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-1 .item-title {
    color: var(--color-black);
    font-size: 2rem  /* 32/16 */;
    font-weight: 500;
    line-height: 1.2;
}
#mainIndex .main-svr .main-svr-list-1 .item-title em {
    font-style: normal;
    text-emphasis-style: dot;
}
#mainIndex .main-svr .main-svr-list-1 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-1 .item-txt {
    padding: 0 1.875rem /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-1 .item-desc {
    margin: 1.25rem /* 20/16 */ 0;
    line-height: var(--line-height);;
}
#mainIndex .main-svr .main-svr-list-1 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: #0099dc;
    margin-bottom: 8px;
}
#mainIndex .main-svr .main-svr-list-1 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-1 .item.item-txt {
    /*align-self: center;*/
}
#mainIndex .main-svr .main-svr-list-1 .item.item-bg {
    margin-right: auto;
}
#mainIndex .main-svr .main-svr-list-1 .item.item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-1 .item a {
    display: block;
    position: relative;
    overflow: hidden;
}
#mainIndex .main-svr .main-svr-list-1 .item .btn-action {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    background-color: #3db1e2;
    border: 1px solid #3db1e2;
    padding: 5px 15px;
    display: inline-block;
    box-shadow: 0 4px 16px #e0e0e0;
}
#mainIndex .main-svr .main-svr-list-1 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact {
    display: flex;
    align-items: center;
    gap: 0 0.9375rem  /* 15/16 */;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact a {
    display: block;
    position: relative;
    overflow: hidden;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact  i {
    font-size: 1.25rem  /* 20/16 */;
    color: #fff;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact .icon-sns {
    border-radius: 50%;
    width: 2.5rem /* 40/16 */;
    height: 2.5rem /* 40/16 */;
    display: flex;
    align-items: center;
    justify-content: center;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact  .icon-sns.email {
    background-color: #1a3083;
}
#mainIndex .main-svr .main-svr-list-1 .item .item-contact  .icon-sns.phone {
    background-color: var(--color-brand);
}
#mainIndex .main-svr .main-svr-list-1 .item .promotion .btn-action {
    background-color: rgba(255, 0, 0, .7);
    border: 1px solid rgba(255, 0, 0, .7);
}
#mainIndex .main-svr .main-svr-list-1 .item .promotion .btn-action:hover {
    background-color: red;
    border: 1px solid red;
}
#mainIndex .main-svr .main-svr-list-1 .item .promotion-desc {
    margin: 30px 0 10px 0;
    font-size: 0.9375rem  /* 15/16 */;
}

#mainIndex .main-svr .main-svr-list-2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-2 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-2 .item-title {
    color: var(--color-black);
    font-size: 2rem  /* 32/16 */;
    font-weight: 500;
    line-height: 1.1;
}
#mainIndex .main-svr .main-svr-list-2 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-2 .item-txt {
    padding: 0 1.875rem /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-2 .item-desc {
    margin: 1.25rem  /* 20/16 */ 0;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-2 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: #0099dc;
    margin-bottom: 0.5rem /* 8/16 */;
}
#mainIndex .main-svr .main-svr-list-2 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-2 .item.item-bg {
    margin-left: auto;
}
#mainIndex .main-svr .main-svr-list-2 .item.item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-2 .item .btn-action {
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--color-brand);
    border: 1px solid var(--color-brand);
    padding: 0.3125rem  /* 5/16 */ 0.9375rem  /* 15/16 */;
    display: inline-block;
    box-shadow: 0 4px 16px #e0e0e0;
}
#mainIndex .main-svr .main-svr-list-2 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}

#mainIndex .main-svr .main-svr-list-3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-3 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-3 .item-title {
    color: var(--color-black);
    font-size: 2.25rem  /* 36/16 */;
    font-weight: 500;
    line-height: 1.1;
}
#mainIndex .main-svr .main-svr-list-3 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-3 .item-txt {
    padding: 0 1.875rem /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-3 .item-desc {
    margin: 1.25rem /* 20/16 */ 0;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-3 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: #0099dc;
    margin-bottom: 0.5rem /* 8/16 */;
}
#mainIndex .main-svr .main-svr-list-3 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-3 .item.item-bg {
    margin-right: auto;
}
#mainIndex .main-svr .main-svr-list-3 .item.item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-3 .item a {
    display: block;
    position: relative;
    overflow: hidden;
}
#mainIndex .main-svr .main-svr-list-3 .item .btn-action {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    background-color: #3db1e2;
    border: 1px solid #3db1e2;
    padding: 5px 15px;
    display: inline-block;
    box-shadow: 0 4px 16px #e0e0e0;
}
#mainIndex .main-svr .main-svr-list-3 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}

#mainIndex .main-svr .main-svr-list-4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-4 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-4 .item-title {
    color: var(--color-black);
    font-size: 2.25rem  /* 36/16 */;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
}
#mainIndex .main-svr .main-svr-list-4 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-4 .item-txt {
    padding: 0 1.875rem /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-4 .item-desc {
    margin: 1.25rem  /* 20/16 */ 0;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-4 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 400;
    color: #0099dc;
    margin-bottom: 8px;
}
#mainIndex .main-svr .main-svr-list-4 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-4 .item.item-bg {
    margin-left: auto;
}
#mainIndex .main-svr .main-svr-list-4 .item.item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-4 .item .btn-action {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    background-color: #3db1e2;
    border: 1px solid #3db1e2;
    padding: 5px 15px;
    display: inline-block;
    box-shadow: 0 4px 16px #e0e0e0;
}
#mainIndex .main-svr .main-svr-list-4 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}

#mainIndex .main-svr .main-svr-list-5 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-5 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-5 .item-title {
    color: var(--color-black);
    font-size: 2.25rem  /* 36/16 */;
    font-weight: 500;
    line-height: 1.1;
}
#mainIndex .main-svr .main-svr-list-5 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-5 .item-txt {
    padding: 0 1.875rem  /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-5 .item-desc {
    margin: 1.25rem  /* 20/16 */ 0;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-5 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: #0099dc;
    margin-bottom: 0.5rem /* 8/16 */;
}
#mainIndex .main-svr .main-svr-list-5 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-5 .item.item-bg {
    margin-right: auto;
}
#mainIndex .main-svr .main-svr-list-5 .item.item-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-5 .item a {
    display: block;
    position: relative;
    overflow: hidden;
}
#mainIndex .main-svr .main-svr-list-5 .item .btn-action {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    background-color: #3db1e2;
    border: 1px solid #3db1e2;
    padding: 5px 15px;
    display: inline-block;
    box-shadow: 0 4px 16px #e0e0e0;
}
#mainIndex .main-svr .main-svr-list-5 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}

#mainIndex .main-svr .main-svr-list-6 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#mainIndex .main-svr .main-svr-list-6 .item {
    flex: 0 0 50%;
}
#mainIndex .main-svr .main-svr-list-6 .item-title {
    color: var(--color-black);
    font-size: 2.5rem /* 40/16 */;
    font-weight: 500;
    line-height: 1.1;
}
#mainIndex .main-svr .main-svr-list-6 .item-title .br {
    display: block;
}
#mainIndex .main-svr .main-svr-list-6 .item-txt {
    padding: 0 1.875rem /* 30/16 */;
}
#mainIndex .main-svr .main-svr-list-6 .item-desc {
    margin: 20px 0;
    line-height: 1.4;
}
#mainIndex .main-svr .main-svr-list-6 .item-desc strong {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: #0099dc;
    margin-bottom: 8px;
}
#mainIndex .main-svr .main-svr-list-6 .item-desc p {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    line-height: var(--line-height);
}
#mainIndex .main-svr .main-svr-list-6 .item.item-bg {
    margin-left: auto;
}
#mainIndex .main-svr .main-svr-list-6 .item.item-bg img {
    /*width: 100%;*/
    /*height: 100%;*/
    width: 39.6875rem /* 635/16 */;
    height: 30.5625rem /* 489/16 */;
    object-fit: cover;
    object-position: center;
}
#mainIndex .main-svr .main-svr-list-6 .item .btn-action {
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    background-color: #3db1e2;
    border: 1px solid #3db1e2;
    padding: 5px 15px;
    display: inline-block;
}
#mainIndex .main-svr .main-svr-list-6 .item .btn-action:hover {
    background-color: #0099dc;
    border: 1px solid #0099dc;
}

/*
-----------------------------------------------------------------------
코웨이 케어
-----------------------------------------------------------------------
*/

#mainIndex .main-cowaycare {
    padding: 50px 0;
    background: #f7f7f7 url(../images/main/bg-why-choose-coway.png) no-repeat center center;
}
#mainIndex .main-cowaycare .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
}
#mainIndex .main-cowaycare .item-title {
    color: var(--color-black);
    font-size: 1.867rem  /* 28/15 */;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1px;
    display: inline-block;
}
#mainIndex .main-cowaycare .item-sub-title {
    display: inline-block;
    font-size: 1.0625rem /* 17/16 */;
    font-weight: 300;
    color: var(--color-primary);
}
#mainIndex .main-cowaycare .main-cowaycare-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
#mainIndex .main-cowaycare .item {
    padding: 50px 0;
    flex: 0 0 23%;
    margin: 8px;
    /*color: #666;*/
    transition: .5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: space-between;
    border-radius: var(--border-radius);
    background-color: #fff;
    border: 1px solid var(--color-lightborder);
    box-sizing: border-box;
}
#mainIndex .main-cowaycare .item a {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#mainIndex .main-cowaycare .item a .item-info {
    width: 100%;
    margin: 2.5rem  /* 40/16 */ 0 0 0;
    min-height: 5rem  /* 80/16 */;
    text-align: center;
    line-height: var(--line-height);
    font-size: 0.9375rem  /* 15/16 */;
    padding: 0 1.25rem  /* 20/16 */;
}
#mainIndex .main-cowaycare .item .more-text {
    text-align: center;
    line-height: 2;
}
#mainIndex .main-cowaycare .item .more-icon {
    display: inline-block;
    text-align: center;
    background-color: #f3f4f6;
    color: #333;
    border-radius: 50px;
    width: 1.875rem /* 30/16 */;
    height: 1.875rem /* 30/16 */;
    font-size: 0.875rem /* 14/16 */;
}
#mainIndex .main-cowaycare .item:hover .more-icon {
    background-color: #fff;
}
#mainIndex .main-cowaycare .item .br {
    display: block;
}

#mainIndex .main-cowaycare .item .icon {
    width: 4.375rem /* 70/16 */;
    height: 4.375rem /* 70/16 */;
    background: #1899dc;
    border-radius: 4.375rem /* 70/16 */;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: -5px 5px 30px -5px rgba(24, 153, 220, 0.4);
    box-shadow: -5px 5px 30px -5px rgba(24, 153, 220, 0.4);
    margin: auto;
}
#mainIndex .main-cowaycare .item .icon svg {
    width: 60%;
    fill: #fff;
}
#mainIndex .main-cowaycare .item:hover {
    background: #1899dc;
    box-shadow: -5px 5px 30px -5px rgba(24, 153, 220, 0.4);
    border: 1px solid rgba(24, 153, 220, 0.4);
}
#mainIndex .main-cowaycare .item:hover .item-info {
    color: #fff;
}
#mainIndex .main-cowaycare .item:hover .icon {
    background-color: #fff;
    box-shadow: -5px 5px 30px -5px rgba(0, 0, 0, 0.4);
}
#mainIndex .main-cowaycare .item:hover .icon svg {
    fill: #1899dc;
}

/*
-----------------------------------------------------------------------
게시판
-----------------------------------------------------------------------
*/

#mainIndex .main-board {
}
#mainIndex .main-board .main-board-wrap {
    display: flex;
    height: auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 30px;
}
#mainIndex .main-board .aside {
    display: flex;
    width: 274px;
    min-width: 274px;
    overflow: hidden;
    flex-direction: column;
}
#mainIndex .main-board .board-list {
    display: flex;
    /*justify-content: space-between;*/
    margin: -10px;
    flex-wrap: wrap;
}
#mainIndex .main-board .board-list .board-item {
    width: calc(50% - 20px);
    height: auto;
    margin: 10px;
    background-color: #fff;
}

#mainIndex .main-board.aside .main-poll {
    margin-top: 30px;
}
#mainIndex .main-board .aside .ad {
    gap: 0;
}
/*#mainIndex .main-board .aside .ad a:last-child img {*/
/*    border-radius: 0 0 var(--border-radius) var(--border-radius);*/
/*}*/
#mainIndex .main-board .aside .ad .boxbanner-item:last-child img {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

#mainIndex .twr .heading-2,
#mainIndex .poll .heading-2 {
    /*font-size: 1.25rem !* 20/16 *!;*/
    /*font-weight: 600;*/
    color: var(--color-black);
}

/*
-----------------------------------------------------------------------
메인 광고
-----------------------------------------------------------------------
*/

#mainIndex .main-ad {
    height: auto;
    margin-bottom: 30px;
    /*background-color: #009cbe;*/
    /*color: #fff;*/
    overflow: hidden;
}
#mainIndex .main-ad img {
    width: 100%;
    max-width: 100%;
    /*border-radius: var(--border-radius);*/
}

/*
-----------------------------------------------------------------------
설문조사
-----------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------
Top Writers
-----------------------------------------------------------------------
*/

/*
-----------------------------------------------------------------------
상품 목록
-----------------------------------------------------------------------
*/
#mainPrdList .main-prd .heading-text:not(:first-child) {
    padding-top: 30px;
    border-top: 1px solid #ddd;
}

/*
-----------------------------------------------------------------------
Top 6 products
-----------------------------------------------------------------------
*/

#mainIndex .main-top-product .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px 0;
    margin-top: 50px;
}
#mainIndex .main-top-product .heading .item-title {
    letter-spacing: -1px;
    font-size: 2.25rem  /* 36/16 */;
}
#mainIndex .main-top-product .heading .item-title strong {
    color: #e7483e;
    font-weight: 700;
}
#mainIndex .main-top-product .heading .item-sub-title  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: bold;
    font-size: 1.125rem  /* 18/16 */;
}

#mainIndex .main-top-product .heading .item-sub-title::before,
#mainIndex .main-top-product .heading .item-sub-title::after {
    content: "";
    width: 1.25rem  /* 20/16 */;
    height: 1px;
    background-color: #ccc; /* 선 색상 */
}
#mainIndex .main-top-product-list .main-prd-tp-4 {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .item {
    width: calc(33.3333% - 20px);
    flex: 0 0 auto;
    margin: 10px;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product {
    margin-bottom: 40px;
    position: relative;
    display: block;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product a:not(.btn) {
    color: #484848;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-category {
    font-size: 0.875rem  /* 14/16 */;
    color: #73848e;
    margin-top: 20px;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product .product-title {
    font-size: 1.125rem  /* 18/16 */;
    color: #000;
    font-weight: 500;
    line-height: 1.4;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    text-align: center;
    transition: all .3s ease;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank {
    border-radius: 0 0 50% 0;
    color: #fff;
    font-size: 26px;
    font-family: Arial;
    font-weight: 700;
    width: 18%;
    height: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 1;
    background-color: #0c71c3;
    border: 0;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank1 {
    background-color: #ad2e28;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-1:hover {
    border: 1px solid #ad2e28;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank2 {
    background-color: #355ca1;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-2:hover {
    border: 1px solid #355ca1;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank3 {
    background-color: #9f6f3b;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-3:hover {
    border: 1px solid #9f6f3b;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank4 {
    background-color: #28b62f;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-4:hover  {
    border: 1px solid #28b62f;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank5 {
    background-color: #2d3191;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-5:hover {
    border: 1px solid #2d3191;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image .product-rank6 {
    background-color: #2f3035
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image.product-image-6:hover  {
    border: 1px solid #2f3035
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image img {
    max-width: 100%;
    /* width: 100%; */
    height: auto;
    transition: .3s ease;
    border-radius: var(--border-radius);
    object-fit: cover;
}
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image:hover img,
#mainIndex .main-top-product-list .main-prd-tp-4 .product-image:focus img {
    transform: translate(-3%, -3%) scale(1.1);
    /*transform: scale(1.1);*/
}
#mainIndex .main-top-product-list .main-prd-tp-4 .btn.btn-outline {
    padding: 8px 8px;
}

/*
-----------------------------------------------------------------------
CTA
-----------------------------------------------------------------------
*/

#mainIndex .main-regist-call {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#mainIndex .main-regist-call .call-to-action {
    margin-bottom: 0;
}
#mainIndex .main-regist-call .call-to-action .title {
    font-size: 1.5rem /* 24/16 */ !important;
    font-weight: 600;
    color: #fff;
}
#mainIndex .main-regist-call .call-to-action p {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.4;
    color: rgb(255, 255, 255, 0.8);
}

/*
-----------------------------------------------------------------------
회사소개
-----------------------------------------------------------------------
*/

#mainIndex .com-about {
    background-color: #f7f7f7;
    background-image: url(/theme/basic/images/pattern/pattern19.png);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
#mainIndex .com-about .icon-xbox-wrap {
    display: flex;
    margin: -5px;
}
#mainIndex .com-about .icon-xbox {
    margin: 5px;
    padding: 25px;
    flex: 0 0 calc(33.33% - 10px);
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 20px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
#mainIndex .com-about .icon-xbox .icon {
    display: flex;
    align-items: center;
    gap: 0 15px;
}
#mainIndex .com-about .icon-xbox .icon i {
    font-size: 36px;
    background-color: transparent;
    border-radius: 0;
    color: var(--color-sky);
}
#mainIndex .com-about .icon-xbox .icon-xbox-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--color-black);
}
#mainIndex .com-about .icon-xbox-description {
    font-size: 0.875rem /* 14/16 */;
    line-height: var(--line-height);
    color: #666;
}

/*
-----------------------------------------------------------------------
공지사항
-----------------------------------------------------------------------
*/

#mainIndex .main-notice {
    padding: 5px 0;
}
#mainIndex .main-notice .main-notice-wrap {
    display: flex;
    margin-top: 10px;
    margin-bottom: 0;
}
#mainIndex .main-notice .heading-text {
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 10px;
    white-space: nowrap;
}
#mainIndex .main-notice .heading-text .title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #000;
}
#mainIndex .main-notice .heading-text .more-text {
    font-size: 1rem;
}