@charset "UTF-8";

/*-------------------------------------------------------------------
    분류이름: 공통
    분류그룹: 서브 레이아웃
-------------------------------------------------------------------*/
#subContainer{}
#subContainer .subSkin{display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; height: 320px; padding: 0 20px; padding-top: 0;}
#subContainer .subSkin.bg6{}
#subContainer .subSkin h2{display: block; width: 100%; margin-bottom: 0; color: #fff; font-size: 3.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; }
#subContainer .subSkin p{display: block; width: 100%;margin-top: 1.25rem; color: #FFF; font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.6px; }

#subContainer #content{margin-top: 5rem; margin-bottom: 8.75rem; padding: 0 20px;}
#subContainer #content h1.title{margin-bottom: 5rem; padding-bottom: 0; color: #000; font-size: 3.125rem; font-weight: 700; letter-spacing: -1.5px;}
#subContainer #content h1.title:before{display: none;}
#subContainer #content h2.title{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; position: relative; margin-top: 5rem; margin-bottom: 1.25rem; padding-top: 0; color: #1D1D1D; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.078rem;}
#subContainer #content h2.title:before{display: none;}
#subContainer #content h2.title:after{content: ""; display: block; width: 1.1875rem; height: 0.5625rem; background: url(../images/h2title_bg.svg) no-repeat center center / 100% auto;}
#subContainer #content h2.title:first-child,
#subContainer #content h2.title:first-of-type{margin-top: 0;}
a[data-skin="btn"],
[data-skin="btn"]{
    display: inline-flex; padding: 0.838rem 1.25rem; color: #fff; font-weight: 700; letter-spacing: -0.048rem; line-height: 1.2; text-decoration: none; background-color: #006241; border: 2px solid #006241; border-radius: 6px; backdrop-filter: blur(4px);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="btn"]:hover{background-color: #fff; color: #006241;}
[data-skin="btn"][data-type="down"]:before{
    content: ""; display: block; width: 1.125rem; height: 1.125rem; margin-right: 0.6rem; background: url(../images/btn_down.svg) no-repeat center center / 100% auto;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
[data-skin="btn"][data-type="down"]:hover:before{background-image: url(../images/btn_down02.svg);}

/* 컨텐츠 - CI */
#subContainer #content .simbol_wrap{}
#subContainer #content .simbol_wrap .simbols{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
#subContainer #content .simbol_wrap .simbols >.img{display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;  width: 28.125rem; max-width: 100%; margin-right: 1.875rem; padding: 2rem; background-color: #F5F6F8; border-radius: 10px;}
#subContainer #content .simbol_wrap .simbols >.img img{display: block; max-width: 100%; height: 10.625rem;}
#subContainer #content .simbol_wrap .simbols >.desc{display: flex;flex-wrap: wrap;width: calc(100% - 28.125rem - 1.875rem);padding-top: 1.25rem;align-content: stretch;justify-content: flex-start;}
#subContainer #content .simbol_wrap .simbols >.desc >strong{display: block;width: 100%;font-size: 1.625rem;line-height: 1.2;letter-spacing: -0.78px;color: #006241;font-weight: 700;margin-bottom: auto;margin-bottom: 0;}
#subContainer #content .simbol_wrap .simbols >.desc >p{width: 100%;color: #555; font-size: 1.125rem; line-height: 1.625; letter-spacing: -0.54px;}
#subContainer #content .simbol_wrap .simbols >.desc >p b{color: #353535; font-size: 1.1875rem; font-weight: 500;}
#subContainer #content .simbol_wrap .simbols >.desc >strong +p{margin-top: 1.625rem;}
#subContainer #content .simbol_wrap .simbols >.desc .provi{display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;width: 100%;margin-top: 3.5rem; margin-bottom: 0;}
#subContainer #content .simbol_wrap .simbols >.desc .provi .img{width: 120px; height: 70px; margin-right: 0.75rem; background-color: #F5F6F8; border-radius: 4px;}
#subContainer #content .simbol_wrap .simbols >.desc .provi .img img{display: block; width: auto; max-width: 100%; height: 100%; margin: 0 auto; }
#subContainer #content .simbol_wrap .simbols >.desc .provi .desc{}
#subContainer #content .simbol_wrap .simbols >.desc .provi .desc strong{display: block;color: #555; font-size: 1rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.48px;}
#subContainer #content .simbol_wrap .simbols >.desc .provi .desc p{margin-top: 0.25rem; color: #717171; font-size: 0.9375rem; line-height: 1.5; letter-spacing: -0.45px; font-weight: 400;}
#subContainer #content .simbol_wrap .boxs{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 2.5rem; border: 1px solid #E5E5E5; border-radius: 20px;}
#subContainer #content .simbol_wrap .boxs >p{display: block; width: 100%; color: #555; font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.51px;}
#subContainer #content .simbol_wrap .boxs >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; width: 100%;}
#subContainer #content .simbol_wrap .boxs.sign >ul{margin-top: 1.5rem;}
#subContainer #content .simbol_wrap .boxs.sign >ul >li{width: calc((100% - 3.75rem) / 4); margin-right: 1.25rem;}
#subContainer #content .simbol_wrap .boxs.sign >ul >li:nth-child(4n){margin-right: 0;}
#subContainer #content .simbol_wrap .boxs.sign >ul >li > .imgs{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; height: auto; padding-top: 61.69%;  background: url(../images/s6_6_img7.svg) repeat top left; border: 1px solid #DADADA; box-sizing: border-box;}
#subContainer #content .simbol_wrap .boxs.sign >ul >li > .imgs img{
    display: block; position: absolute; top: 50%; left: 50%; width: auto; max-width: calc(100% - 3rem);
    -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
#subContainer #content .simbol_wrap .boxs.sign >ul >li > p{margin-top: 1rem; color: #717171; font-size: 0.875rem; font-weight: 400; letter-spacing: -0.42px;}
#subContainer #content .simbol_wrap .boxs.colors >strong{display: block; margin-top: 1.5rem; color: #2D2D2D; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.6px; }
#subContainer #content .simbol_wrap .boxs.colors >ul{margin-top: 1.25rem;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li{width: calc((100% - 2.5rem) / 2); margin-right: 2.5rem; padding: 2.5rem 2.5rem 2.875rem; text-transform: uppercase; background-color: #00984C; border-radius: 10px;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li:nth-child(2){background-color: #006241;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li:nth-child(2n){margin-right: 0;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li >strong{display: block; color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.6px; }
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table{display: table; table-layout: fixed; width: auto; margin-top: 1rem; }
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody{}
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr{}
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td{padding-top: 0.25rem; padding-bottom: 0.25rem; color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.45px; }
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr:first-child >td{padding-top: 0;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr:last-child >td{padding-bottom: 0;}
#subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td:nth-child(2){padding-left: 2.5rem;}
#subContainer #content .simbol_wrap .boxs >.btns{width: 100%; margin-top: 2rem; text-align: right;}



@media screen and (max-width: 1024px) {
    #subContainer .subSkin{height: 260px;}
    #subContainer .subSkin h2{font-size: 2.5rem;}
    #subContainer .subSkin p{margin-top: 1rem; font-size: 1.15rem;}
    #subContainer #content{margin-top: 3.5rem; margin-bottom: 7rem;}
    #subContainer #content h1.title{margin-bottom: 2rem; font-size: 2.6rem;}
    #subContainer #content h2.title{margin-top: 3.5rem; margin-bottom: 1rem; font-size: 1.45rem;}
    
    /* 컨텐츠 - CI */
    #subContainer #content .simbol_wrap .simbols{display: block; }
    #subContainer #content .simbol_wrap .simbols >.img{width: 100%; margin-right: 0; padding: 3rem 2rem;}
    #subContainer #content .simbol_wrap .simbols >.img img{height: 6rem;}
    #subContainer #content .simbol_wrap .simbols >.desc{display: block; width: 100%; margin-top: 1.6rem; padding: 0;}
    #subContainer #content .simbol_wrap .simbols >.desc >strong{font-size: 1.5rem;}
    #subContainer #content .simbol_wrap .simbols >.desc >p{font-size: 1rem;}
    #subContainer #content .simbol_wrap .simbols >.desc >strong +p{margin-top: 1rem;}
    #subContainer #content .simbol_wrap .simbols >.desc >p b{font-size: 1.07rem;}
    #subContainer #content .simbol_wrap .simbols >.desc .provi{margin-top: 2rem;}
    #subContainer #content .simbol_wrap .boxs{padding: 2rem;}
    #subContainer #content .simbol_wrap .boxs >.btns{margin-top: 1.5rem;}
    #subContainer #content .simbol_wrap .boxs.sign >ul{margin-top: 1.25rem;}
    #subContainer #content .simbol_wrap .boxs.sign >ul >li{width: calc((100% - 3rem) / 4); margin-right: 1rem; }
    #subContainer #content .simbol_wrap .boxs.colors >ul >li{width: calc((100% - 1rem) / 2); margin-right: 1rem; padding: 1.75rem 1.75rem 2.25rem;}
    
}
@media screen and (max-width: 840px) {
    #subContainer #content{margin-top: 3.5rem; margin-bottom: 5rem;}
    /* 컨텐츠 - CI */
    #subContainer #content .simbol_wrap .boxs{padding: 1.5rem;}
    #subContainer #content .simbol_wrap .boxs.sign >ul >li{width: calc((100% - 1rem) / 2); margin-right: 1rem; }
    #subContainer #content .simbol_wrap .boxs.sign >ul >li:nth-child(2n){margin-right: 0;}
    #subContainer #content .simbol_wrap .boxs.sign >ul >li:nth-child(n+3){margin-top: 2rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table,
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody,
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody tr,
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody tr td{display: block; }
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table{margin-top: 0.5rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td:nth-child(2){padding-left: 0}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td{font-size: 0.9rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr:first-child >td{padding-top: 0.15rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td,
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr:first-child >td{padding-top: 0.1rem; padding-bottom: 0.1rem;}
}
@media screen and (max-width: 640px) {
    #subContainer .subSkin{height: 180px;}
    #subContainer .subSkin h2{font-size: 2rem;}
    #subContainer .subSkin p{margin-top: 0.8rem; font-size: 1rem;}
    #subContainer #content{margin-top: 2.5rem; margin-bottom: 3.5rem;}
    #subContainer #content h1.title{margin-bottom: 1.4rem; padding-right: 0; border-bottom: 0; font-size: 2.2rem;} 
    #subContainer #content h2.title{margin-top: 3.5rem; margin-bottom: 1rem; font-size: 1.3rem;}
    a[data-skin="btn"],
    [data-skin="btn"]{padding: 0.6rem 1rem;}
    [data-skin="btn"][data-type="down"]:before{ width: 1rem; height: 1rem; margin-right: 0.4rem;}
    
    /* 컨텐츠 - CI */
    #subContainer #content .simbol_wrap .simbols >.img{padding: 2.5rem 2rem;}
    #subContainer #content .simbol_wrap .simbols >.img img{height: 5rem;}
    #subContainer #content .simbol_wrap .simbols >.desc >strong{font-size: 1.4rem;}
    #subContainer #content .simbol_wrap .simbols >.desc .provi{display: block;}
    #subContainer #content .simbol_wrap .simbols >.desc .provi .img{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 85px; margin-right: 0;}
    #subContainer #content .simbol_wrap .simbols >.desc .provi .img img{height: 70px;}
    #subContainer #content .simbol_wrap .simbols >.desc .provi .desc{margin-top: 0.75rem;}
    #subContainer #content .simbol_wrap .boxs.sign >ul >li >p{margin-top: 0.75rem;}
    #subContainer #content .simbol_wrap .boxs >.btns{margin-top: 1.25rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li{width: 100%; margin-right: 0; padding: 1.25rem 1.25rem 1.5rem}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li:nth-child(n+2){margin-top: 0.75rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table{margin-top: 0.5rem;}
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr >td,
    #subContainer #content .simbol_wrap .boxs.colors >ul >li >table >tbody >tr:first-child >td{padding-top: 0; padding-bottom: 0;}
}
@media screen and (max-width: 480px) {
    /* 컨텐츠 - CI */
    #subContainer #content .simbol_wrap .boxs.sign >ul >li{width: 100%; margin-right: 0; }
    #subContainer #content .simbol_wrap .boxs.sign >ul >li:nth-child(n+2){margin-top: 1.5rem;}
    #subContainer #content .simbol_wrap .boxs.sign >ul >li > .imgs{padding-top: 50%;}
}