/* #content */

.sub_visual { text-align: center; width: 100%; height:450px; position: relative;
    background-image: url(../images/img_visual_bg.jpg);  background-repeat: no-repeat;  background-position: center 20%; background-size: cover;
    background-color: rgba(0, 0, 0, 0.2); background-blend-mode: darken;}
.sub_visual .text_box {text-align: center; color: #fff;}
.sub_visual .text_box .add_text{font-family: "El Messiri", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; margin-bottom: 20px;}
.sub_visual .text_box h3{font-size: 40px; font-weight: 500; line-height: 1.3; }

.top_title h3 {font-size: 46px; line-height: 56px; letter-spacing: -0.02em; color: var(--gray-color-1000);}

.container .inner{padding: 160px 12.6%;}
.accordion-wrap{margin-top: 60px; border-top: 2px solid #000; box-sizing: border-box;}
.accordion {background-color: #fff;color: var(--gray-color-1000);cursor: pointer;padding: 30px 40px;width: 100%;text-align: left;outline: none;font-size: 26px;font-weight: 500;line-height: 1.2;transition: 0.4s;box-sizing: border-box;position:relative;}
.accordion a{display: block;position:relative;}
.accordion a::before{content:''; display: inline-block;width: 25px;height: 24px;background-image: url(../images/icon_chk_primary.png);background-repeat:  no-repeat;background-position: center;background-size: contain;margin-right: 40px;vertical-align: middle;}
.accordion .icon_view{display: inline-block;position: absolute;right: 40px;top: 50%;transform: translate(0, -50%);width: 32px;height:32px;border-radius: 999px;border: 2px solid #898989;box-sizing: border-box;}
.accordion .icon_view:before, .icon_view:after{content: "";position: absolute;background-color: #898989;transition: transform 0.25s ease-out;}
.accordion .icon_view:before{top: 50%;left: 50%;width: 2px;height: 60%;transform: translate(-50%, -50%);}
.accordion .icon_view:after{top: 50%;left: 50%;width: 60%;height: 2px;transform: translate(-50%, -50%);}
.accordion.active .icon_view,.accordion:hover .icon_view{border-color: #fff;}
.accordion:hover .icon_view:before,.accordion:hover .icon_view:after{ background-color: #fff;}
.accordion.active:hover .icon_view:before,.accordion.active .icon_view:before{ transform:  translate(-50%, -50%) rotate(90deg); background-color: #fff;}
.accordion.active:hover  .icon_view:after,.accordion.active .icon_view:after{ transform:  translate(-50%, -50%) rotate(180deg); background-color: #fff;}
.accordion.active a::before, .accordion:hover a::before{background-image: url(../images/icon_chk_white.png);}
.accordion.active, .accordion:hover {background-color: var(--primary-color);color: #fff;border-color: transparent;z-index: 2;}
.item{position:relative;  border-bottom: 1px solid #909498;}
.item:last-of-type{border-bottom: 2px solid #000;}
.item.on{border-color: transparent;}
.item.on::before{opacity: 1;transition: opacity 0.45s cubic-bezier(.3, .4, .2, 1);z-index:1;}
.item::before{content:'';border-radius: 20px;position:absolute;top: 0;left: 0;width: 100%;height: 100%;box-shadow:0 90px 70px 0 rgba(0,0,0,0.04),0 40px 35px 0 rgba(0,0,0,0.03),0 25px 15px 0 rgba(0,0,0,0.03),0 11px 7px 0 rgba(0,0,0,0.03),0 2px 5px 0 rgba(0,0,0,0.03);transition: opacity 0.15s ease;opacity: 0;display: block;}
.accordion.active a,.accordion:hover a{color: #fff;}
.panel {max-height: 0;overflow: hidden;transition: max-height 0.4s ease;box-sizing: border-box;}
.panel ul{padding:40px;box-sizing: border-box;}
.panel li{font-size: 25px;font-weight: 500;color: var(--gray-color-1000);line-height: 1.5;margin-bottom: 12px;position: relative;padding-left: 50px;box-sizing:border-box;letter-spacing: -1px;}
.panel li:last-of-type{margin-bottom:0;}
.panel li::before{content: '';width:6px;height: 6px;background: #000;display: inline-block;position:absolute;left: 0;top: 0;transform: translate(0 , 14.5px);}
/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .container  .inner{padding: 120px 12.6%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* html body #content {margin-top: 94px;} */
    /* content */
    .top_title h3 {font-size: 28px; line-height: 36px;}
    .accordion-wrap{margin-top: 40px;}
    .accordion { padding: 30px 20px;font-size: 22px;}
    .accordion .icon_view{width: 24px; height: 24px; right: 20px;}
    .panel ul{padding: 20px 30px;}
    .panel li{font-size: 18px;padding-left:20px;}
    .panel li::before{width:4px;height: 4px;transform: translate(0, 12px);}

}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    /* content */
    /* html body #content {margin-top: 72px;position : relative;} */
    .container .inner {padding: 60px 5%;}

    .sub_visual {box-sizing: border-box;height: 240px;background-image: url(../images/img_visual_bg_mo.jpg);background-position: center center;background-attachment:local ;}
    .sub_visual .text_box h3{font-size: 26px; }
    .sub_visual .text_box .add_text{font-size:20px;}

    .accordion { padding: 20px;font-size: 20px;}
    .accordion a::before{ width: 20px; height: 22px;margin-right: 20px;}
    .accordion .icon_view{ width: 22px; height: 22px;}
    .panel ul{padding: 20px;}
    .panel li{font-size: 16px;}
    .panel li::before{transform: translate(0, 10px);}
}