@charset "utf-8";
@import url('common.css');/* font, reset */
/*
    layot.css = sub공통

*/

/* -------------------------- PC -------------------------- */
body {}

.wrap {width:100%; transition:all 0.3s ease; }

/* header */
header {position:fixed; top:0; left:0; width:100%; height:12rem; background:#fff; opacity:.85; z-index:100; transition:all .4s;}
header.on {opacity:1;}
header .inner_menu_wrap {width:100%; height:100%; position:relative; display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center; padding:0 4rem;}
header .logo {display:inline-flex; height:7.4rem;}
header .logo h1 {display:inline-flex; width:100%; min-width:7.1rem; height:100%; text-align:left; justify-content:flex-start; transition:auto;}
header .logo h1 a {display:flex; width:100%; height:100%; text-align:left; background:url('../images/common/CI.svg') no-repeat left; background-size:7.1rem 100%; font-size:0; align-items:center;}
header .logo h1 a i {display:none;}
header.on .logo h1 a i {display:flex; width:100%; padding-left:8.6rem;}
header.on .logo h1 a i img {max-width:100%;}
header .btn_gnb {display:inline-flex; position:relative; width:4.4rem; height:3.8rem;}
header .btn_gnb span {display:block; position:absolute; left:0; width:100%; height:.6rem; font-size:0; background:#171717; border-radius:4px; transition:all .4s;}
header .btn_gnb span:nth-child(1) {top:0;}
header .btn_gnb span:nth-child(2) {top:50%; transform: translateY(-50%);}
header .btn_gnb span:nth-child(3) {bottom:0;}
header .btn_gnb.active-1 span:nth-child(1) {transform:translateY(250%) rotate(45deg);}
header .btn_gnb.active-1 span:nth-child(2) {opacity:0;}
header .btn_gnb.active-1 span:nth-child(3) {transform:translateY(-280%) rotate(-45deg);}

/* nav */
nav { width:100%; height:0; overflow:hidden; position:relative; background:#fff; opacity:0; animation-name:slide_up; animation-duration:.3s; }
header.on nav {height:auto; opacity:1; animation-name:slide_down; animation-duration:.3s;}
nav li {display:flex; align-items:center; width:100%; min-height:6.4rem; border-bottom:2px solid #d8d8d8;}
nav li a {display:flex; width:100%; height:100%; font-size:2rem; font-weight:400; line-height:1.4; color:#171717; padding:0 4rem; align-items:center;}
nav li a.shop::after {content:''; display:inline-flex; width:2rem; height:2rem; background:url('../images/common/arrow_rightup.svg') no-repeat top left; background-size:100% 100%; margin-left:.5rem;}
@keyframes slide_up{
    0%{
        height:38.4rem;
    }
    100%{
        height:0;
    }
}

@keyframes slide_down{
    0%{
        height:0px;
    }
    100%{
        height:38.4rem;
    }
}


/* footer */
footer {width:100%; position:relative; background:#231f20; transition:all 0.3s ease;}
footer .address_copy {display:flex; align-items:center; justify-content:center; width:100%; height:20rem; color:#fff; font-size:2.4rem; text-align:center;}
footer .address_copy a {color:#fff; text-decoration: underline;}
footer .address_copy .copy p + p {margin-top:1rem;}

/* container */
.container {}
.sub_inner {width:100%;}

/* visual */
.sub_inner.visual {position:relative; width:100%; min-height:100%; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#003C1A; color:#fff; padding:0 4rem;}
.sub_inner.visual .bg {position:absolute; top:0; left:0%; display:flex; align-items:center; justify-content:center; text-align:center; width:100%; height:100%;}
.sub_inner.visual .bg img {display:inline-flex; width:100%; margin:0 auto; filter:invert(99%) sepia(34%) saturate(0%) hue-rotate(94deg) brightness(110%) contrast(101%); opacity:.35;}
.visual .text_box {position:relative; z-index:2; color:#fff; text-align:center; font-size:3.6rem; font-weight:300; line-height:1.4;}
.visual .text_box h3 {color:#fff;}
.visual .text_box h3 + p {margin-top:6rem;}
.visual .text_box p + a {margin-top:6rem;}

/* partition_01 */
.partition_01 .text_box {position:relative; color:#003C1A; text-align:center; font-size:3.6rem; font-weight:300; line-height:1.4; height:0; overflow:hidden;}
.partition_01 .text_box.on {height:auto; overflow:visible;}
.state {margin-top:6rem;}
.state .icon {display:block; width:20rem; height:20rem; margin:0 auto; font-size:0;}
.state_good .icon {background:url('../images/common/state_good.svg') no-repeat; background-size:100% 100%;}
.state_soso .icon {background:url('../images/common/state_soso.svg') no-repeat; background-size:100% 100%;}
.state_bad .icon {background:url('../images/common/state_bad.svg') no-repeat; background-size:100% 100%;}
.state strong {display:block; font-size:6.8rem; margin-top:2rem;}
.partition_01 .text_box .txt_mrg_t {margin-top:6rem;}
.partition_01 .text_box .tree_list {margin-top:6rem;}

/* partition_02 */
.partition_02 .text_box {margin-top:6rem; height:0; overflow:hidden;}
.partition_02 .text_box.ani {height:auto; overflow:visible;}

/* partition_03 */
.partition_03 .text_box {margin-top:6rem;}
.partition_03 p + .btn_con_type02 {margin-top:8rem;}
.partition_03 p + .btn_con_type04 {margin-top:8rem;}

/* partition_04 */
.partition_04 .text_box {margin-top:6rem;}

/* partition_05 */
.box_type01.partition_05 {padding:10rem 0;}
.partition_05 .title_type01 {padding:0 4rem;}
.partition_05 .card_wrap {margin-top:6rem;}

/* partition_06 */
.partition_06 {position:relative; width:100%; background:#f8f8f9; padding:10rem 0; text-align:center;}
.partition_06::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/common/CI.svg') no-repeat center; background-size:120% auto; opacity:.15;}
.partition_06 .title_type01 {position:relative; z-index:2; padding:0 4rem;}
.partition_06 .text_box {position:relative; z-index:2; padding:0 4rem; margin-top:6rem;  font-weight:400;}
.partition_06 .btn_con_type03 {margin-top:6rem;}

/* tree_list */
.tree_list {width:100%; flex-wrap:wrap; margin:0 auto; padding:0 4rem;} /*display:flex;  */
.tree_list li {display:inline-flex; width:calc(100% / 6); height:16.2rem; padding:2rem 1rem; font-size:0; justify-content:center;}
.tree_list li span {display:inline-flex; width:11.4rem; height:100%;}
.tree_list li:nth-child(odd) span {background:url('../images/common/shape1.svg?v=1') no-repeat; background-size:100% auto;}
.tree_list li:nth-child(2n) span {background:url('../images/common/shape2.svg') no-repeat; background-size:100% auto;}
.tree_list li:nth-child(3n) span {background:url('../images/common/shape3.svg') no-repeat; background-size:100% auto;}

/* box_type01 */
.box_type01 {width:100%; padding:14rem 4rem; text-align:center; background:#fff;}

/* box_type02 */
.box_type02 {width:100%; padding:14rem 4rem; text-align:center; background:#FDF8E0;}

/* text type */
.title_type01 {width:100%;}
.title_type01 .box_block {display:block;}
.sub_inner h3 {font-size:6.8rem; line-height:1.4; font-weight:bold; color:#003C1A;}
.text_box {position:relative; color:#221f20; text-align:center; font-size:3.6rem; font-weight:300; line-height:1.4;}
.text_box .txt_mar_t {margin-top:6rem;}

/* btn type */
.btn_con_type01 {display:inline-flex; position:relative; min-width:34rem; height:10rem; line-height:9.8rem; padding:0 2rem; font-size:3.8rem; font-weight:bold; color:#003C1A; text-align:center; align-items:center; justify-content:center; background:#fff; border-radius:50px;}
.btn_con_type01::after {content:''; display:inline-flex; width:3rem; height:1.7rem; background:url('../images/common/direction=down.svg') no-repeat top left; background-size:100% 100%; margin-left:1rem;}
.btn_con_type02 {display:inline-flex; position:relative; min-width:64rem; height:10rem; line-height:9.8rem; padding:0 2rem; font-size:3.8rem; font-weight:bold; color:#fff; text-align:center; align-items:center; justify-content:center; background:#163b1c; border-radius:50px;}
.btn_con_type02::after {content:''; display:inline-flex; width:3rem; height:1.7rem; background:url('../images/common/direction=down.svg') no-repeat top left; background-size:100% 100%; filter:invert(99%) sepia(34%) saturate(0%) hue-rotate(94deg) brightness(110%) contrast(101%); margin-left:1rem;}
.btn_con_type03 {display:inline-flex; position:relative; min-width:48rem; height:10rem; line-height:9.8rem; padding:0 2rem; font-size:3.8rem; font-weight:bold; color:#fff; text-align:center; align-items:center; justify-content:center; background:#163b1c; border-radius:50px;}
.btn_con_type03::after {content:''; display:inline-flex; width:4.2rem; height:4.2rem; background:url('../images/common/arrow_rightup.svg') no-repeat top left; background-size:100% 100%; filter:invert(99%) sepia(34%) saturate(0%) hue-rotate(94deg) brightness(110%) contrast(101%); margin-left:1rem;}
.btn_con_type04 {display:inline-flex; position:relative; min-width:64rem; height:10rem; line-height:9.8rem; padding:0 2rem; font-size:3.8rem; font-weight:bold; color:#fff; text-align:center; align-items:center; justify-content:center; background:#163b1c; border-radius:50px;}
.btn_con_type04::after {content:''; display:inline-flex; width:3rem; height:1.7rem; background:url('../images/common/direction=down.svg') no-repeat top left; background-size:100% 100%; filter:invert(99%) sepia(34%) saturate(0%) hue-rotate(94deg) brightness(110%) contrast(101%); margin-left:1rem;}

/* graph_wrap */
.graph_wrap {width:100%;}
.graph_wrap .graph_in {width:80%; margin:0 auto; display:flex; flex-wrap:wrap; align-items:flex-start; align-items:center;}
.graph_wrap .graph_in + .graph_in {margin-top:2.5rem;}
.graph_wrap .graph_in .tit {display:inline-flex; width:20%; font-size:2.6rem; text-align:right; justify-content:flex-end; padding-right:1rem; word-break:break-all;}
.graph_wrap .graph_in .graph_list {position:relative; display:inline-flex; flex-wrap:wrap; width:.5rem; overflow:hidden; padding:.5rem 0;}
.graph_wrap .graph_in .graph_list::before {content:''; width:1px; height:100%; background:#000; position:absolute; top:0; left:0;}
.graph_wrap .graph_in .graph_list.show {width:calc(100% - 20%); overflow:visible;}
.graph_wrap .graph_in .graph_list li {display:inline-flex; background:#f8f8f9; height:8rem; font-size:2.6rem; align-items:center; justify-content:center; text-align:center; border-right:1px solid #cdcdcd;}
.graph_wrap .graph_in.unique .graph_list li {background:#163b1c; color:#fff; border-color:#f8f8f9;}

.unique_txt {width:100%; margin-top:4.5rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center;}
.unique_txt p > strong {display:inline-flex; font-size:6rem; padding:0 2rem;}
.unique_txt .icon {display:inline-flex; flex-direction: column;}
.unique_txt .icon span {display:flex; width:4rem; height:2rem;}
.unique_txt .icon.up span {background:url('../images/common/direction=up.svg') no-repeat; background-size:100%  100%;}
.unique_txt .icon.down span {background:url('../images/common/direction=down.svg') no-repeat; background-size:100%  100%;}

/* map_wrap */
.map_wrap {width:100%; min-height:3rem; background:#eee; margin-top:8rem;}
.map_wrap + .list_wrap {margin-top:6rem;}

/* dl_list_type01 */
.dl_list_type01 {width:100%; display:flex; flex-wrap:wrap; align-items: flex-start; justify-content: flex-start;}
.dl_list_type01 + .dl_list_type01 {margin-top:6rem;}
.dl_list_type01 dt {display:flex; width:16rem; font-weight:bold;}
.dl_list_type01 dd {width:calc(100% - 16rem); text-align:left; padding-left:3rem; margin-bottom:2rem;}
.dl_list_type01 dd:last-child {margin-bottom:0;}

/* dl_list_type02 */
.dl_list_type02 {width:100%; text-align:left;}
.dl_list_type02 + .dl_list_type02 {margin-top:6rem;}
.dl_list_type02 dt {margin-bottom:2rem; font-size:3.2rem; font-weight:300; line-height:1.4; }
.dl_list_type02 dt strong {font-weight:bold; font-size:3.6rem;}
.dl_list_type02 dd {font-size:3.2rem; font-weight:300; line-height:1.4;}
.dl_list_type02 dd span {font-size:2.6rem;}

/* ul_list_type01 */
.ul_list_type01 {width:100%;}
.ul_list_type01 li {position:relative; padding-left:2rem; margin-top:2rem; line-height: 1.2;}
.ul_list_type01 li::before {content:''; position:absolute; top:2.2rem; left:0; width:.6rem; height:.6rem; background:#221f20; border-radius:25px;}
.ul_list_type01 li:first-child {margin-top:0;}

/* card_wrap */
.card_wrap {width:100%; padding-left:4rem;}
.card_roll_wrap {width:100%; position:relative; }
.card_roll_wrap .card_list {position:relative; color:#221f20; margin-right:4rem; margin-bottom:3rem;}
.card_roll_wrap .card_list .tit {display:flex; flex-direction:column; width:100%; font-size:3.2rem; font-weight:bold;}
.card_roll_wrap .card_list .tit strong {font-size:4.8rem;}
.card_roll_wrap .card_list i {display:flex; width:27.4rem; margin:6rem auto;}
.card_roll_wrap .card_list i img {width:100%;}
.card_roll_wrap .card_list span {font-size:3rem;}
/*.card_roll_wrap .card_list .card {display:flex; flex-direction:column; flex-wrap:wrap; text-align:center; align-items:center; justify-content:center; width:100%; min-height:68rem; border-radius:45px; cursor:pointer;}*/
.card_roll_wrap .card_list .card {display:flex; flex-direction:column; flex-wrap:wrap; text-align:center; align-items:center; justify-content:center; width:100%; height:88rem; border-radius:45px; cursor:pointer;}
.card_roll_wrap .card_list .front_wrap {background: #fcf8e1; padding:8rem 2rem;}
.card_roll_wrap .card_list .back_wrap {position:absolute; top:0; left:0; width:100%; height:100%; font-size:3.6rem; font-weight:400; line-height:1.4; background:#f4f4f1; border-radius:45px; z-index:2; box-shadow:2px 8px 15px 0px rgb(0 0 0 / 15%); transform:rotateY(90deg);}
.card_roll_wrap .card_list .back_wrap strong {display:block; font-size:8rem; margin-top:6rem;}

.card_roll_wrap .cardRotate .front_wrap{opacity:0;animation:rotateAni 0.3s 1; transform:rotateY(90deg);}
.card_roll_wrap .cardRotate .back_wrap{opacity:1;animation:rotateAni2 0.3s 0.3s 1 backwards; transform:rotateY(0);}
.card_roll_wrap .backRotate .front_wrap{animation:backAni 0.3s 1; opacity:1;}
.card_roll_wrap .backRotate .back_wrap{opacity:0;}

@keyframes rotateAni{
    0%{transform:rotateY(0);}
    100%{transform:rotateY(90deg);}
}
@keyframes rotateAni2{
    0%{transform:rotateY(-90deg);}
    100%{transform:rotateY(0deg);}
}
@keyframes backAni{
    0%{transform:rotateY(90deg);}
    100%{transform:rotateY(0deg);}
}

@media screen and (min-width:1024px) {
}



/* -------------------------- tablet -------------------------- */
@media screen and (max-width:1023px) {
    /* header */
    header {height:12rem;}
    header.on .logo {width:calc(100% - 8.4rem);}

    /* nav */
    nav li {min-height:7.4rem;}
    nav li a {font-size:2.6rem;}
    @keyframes slide_up{
        0%{
            height:44.4rem;
        }
        100%{
            height:0;
        }
    }
    
    @keyframes slide_down{
        0%{
            height:0px;
        }
        100%{
            height:44.4rem;
        }
    }

    /* footer */
    footer .address_copy {height:18rem; font-size:2.4rem;}

    /* partition_03 */
    .partition_03 .btn_con_type02 {min-width:auto; max-width:100%; padding:0 6rem;}
	.partition_03 .btn_con_type04 {max-width:60%;min-width:auto; padding:2rem 6rem;font-size:2.4rem;height:auto;line-height:1.4}

    /* btn type */
    .btn_con_type01 {padding:0 4rem; font-size:3.4rem;}
    .btn_con_type02 {padding:0 4rem; font-size:3.4rem;}
    .btn_con_type03 {padding:0 4rem; font-size:3.4rem;}

    /* graph_wrap */
    .graph_wrap .graph_in .tit {width:16rem;}
    .graph_wrap .graph_in .graph_list {width:.5rem;}
    .graph_wrap .graph_in .graph_list.show {width:calc(100% - 16rem);}

    
}


/* -------------------------- mobile -------------------------- */
@media screen and (max-width:719px) {
	
}

@media screen and (max-width:340px) {
}

@media screen and (max-width:320px) {
    
}