/* =================================== 회사소개 */
.clfix::after, .clfix::before { display: table; content: ''; line-height: 0; }
.clfix::after { clear: both; }
.inner_header { text-align: left; margin-bottom: 8rem; }
.inner_header em { display: block; margin-bottom: 2rem; font-size: 1.6rem; font-style: normal; }
.inner_header h3 { margin-bottom: 1rem; }
.inner_header h5 { font-weight: 600; }


/* 인트로 */
.introduction { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; background: var(--c-mono-0); padding-top: 0px; padding-bottom: 0px; }
.introduction .container_wrap .inner_wrap { position: relative; height: 100vh; }
.introduction .container_wrap .inner_wrap .ani_bt_wrap { position: absolute; top: 50%; left: 50%; z-index: 2; width: 100%; transform: translate(-50%, -50%); }
.introduction .container_wrap .inner_wrap .ani_bt_wrap .box { display: table; width: 100%; height: 100px; margin-bottom: 5rem; text-align: center; vertical-align: middle; color: var(--c-mono-0); }
.introduction .container_wrap .inner_wrap .ani_bt_wrap .box h1 { line-height: 1.5; }
.introduction .container_wrap .inner_wrap .ani_bt_wrap .box h4 { display: table-cell; vertical-align: middle; font-weight: 600; }
.introduction .container_wrap .inner_wrap .photozone { overflow: hidden; position: absolute; width: 100vw; height: 100vh; left: 50%; top: 50%; transform: translate(-50%,-50%); background:var(--c-mono-0); background-size: 100vw; transition: 0.5s; overflow: hidden; z-index: 1; }
.introduction .container_wrap .inner_wrap .photozone::after { position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1)); top: 0; left: 0; }
.introduction .container_wrap .inner_wrap .photozone video { width: inherit; height: 100vh; object-fit: cover; }
.introduction .container_wrap .inner_wrap .photozone.fixed video { position: fixed; top: 0; }
.introduction .container_wrap .inner_wrap .inner_header { margin-bottom: 0; }


/* 차별화 서비스 */
.advantage { }
.advantage .container_wrap .inner_wrap .item_inner ul {  }
.advantage .container_wrap .inner_wrap .item_inner ul li { display: flex; flex-direction: row-reverse; align-items: center; height: 100%; margin-bottom: 4rem; border-radius: 3rem; background-color: var(--c-mono-2); overflow: hidden; }
.advantage .container_wrap .inner_wrap .item_inner ul li .num { width: 100%; height: 450px; max-height: 500px; flex: calc(100% / 2);  }
.advantage .container_wrap .inner_wrap .item_inner ul li:nth-child(1) .num { background: url(../images/whycallgate/img_06.png) no-repeat center; background-size: cover; }
.advantage .container_wrap .inner_wrap .item_inner ul li:nth-child(2) .num { background: url(../images/whycallgate/img_08.png) no-repeat center; background-size: cover; }
.advantage .container_wrap .inner_wrap .item_inner ul li:nth-child(3) .num { background: url(../images/whycallgate/img_09.png) no-repeat center; background-size: cover; }
.advantage .container_wrap .inner_wrap .item_inner ul li:nth-child(4) .num { background: url(../images/whycallgate/img_07.png) no-repeat center; background-size: cover; }
.advantage .container_wrap .inner_wrap .item_inner ul li .txt { padding: 6rem; flex: calc(100% / 2); }
.advantage .container_wrap .inner_wrap .item_inner ul li .txt h3 { margin-bottom: 2rem; }
.advantage .container_wrap .inner_wrap .item_inner ul li .txt p { font-size: 2rem; }


/* 시스템 구성 */
.bundlesec { background-color: var(--c-mono-2); }
.bundlesec .container_wrap .inner_wrap .intro_video { width: 100%; height: 600px; background: url(../images/whycallgate/whycallgate.gif) no-repeat center; background-size: cover; border-radius: 3rem; overflow: hidden; }
.bundlesec .container_wrap .inner_wrap .inner_header {  }
.bundlesec .container_wrap .inner_wrap .bundle_list { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 6rem; grid-row-gap: 6rem; margin-top: 6rem; }
.bundlesec .container_wrap .inner_wrap .bundle_list li {  }
.bundlesec .container_wrap .inner_wrap .bundle_list li p { word-break: keep-all; }


/* 솔루션 */
.solution .container_wrap .list_wrap .solution_list { display: flex; gap: 4rem; }
.solution .container_wrap .list_wrap .solution_list .item { flex: 1; padding: 4rem; border-radius: 2rem; border: 1px solid var(--c-mono-4); }
.solution .container_wrap .list_wrap .solution_list .item .icon { display: inline-block; width: 80px; height: 80px; margin-bottom: 2rem; }
.solution .container_wrap .list_wrap .solution_list .item.item1 .icon { background: url(../images/whycallgate/icon_solution_01.png) no-repeat center; background-size: contain; }
.solution .container_wrap .list_wrap .solution_list .item.item2 .icon { background: url(../images/whycallgate/icon_solution_02.png) no-repeat center; background-size: contain; }
.solution .container_wrap .list_wrap .solution_list .item.item3 .icon { background: url(../images/whycallgate/icon_solution_03.png) no-repeat center; background-size: contain; }




/* ============================ media queries ============================ */
@media (max-width: 1920px){
}

@media (max-width: 1600px){
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .img { top: 0; left: 50px; width: 330px; }
}

@media (max-width: 1500px){
    .introduction .container_wrap .inner_wrap .inner_header .header_intro { display: block; height: 400px; margin-bottom: 400px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .img { position: absolute; top: 60px; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; margin-top: 200px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 2rem; text-align: center; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt h3.after::before { height: 15px; bottom: 0; }

    .advantage .container_wrap .inner_wrap .item_inner ul li .txt p br { display: none; }
}

@media (max-width: 991px){
    .introduction .container_wrap .inner_wrap .inner_header .header_intro { margin-bottom: 150px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .img { height: 320px; margin-top: 150px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt h3 { font-size: 2.5rem; }
    .introduction .container_wrap .inner_wrap .inner_header .header_mid h3 { font-size: 2.5rem; }
}

@media (max-width: 683px){
    .inner_header { margin-bottom: 4rem; }

    .introduction .container_wrap .inner_wrap .ani_bt_wrap .box h1 { font-size: 6rem; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro { margin-bottom: 230px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .img { margin-top: 230px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt h3:last-child br.mo { display: block; }
    .introduction .container_wrap .inner_wrap .inner_header .header_mid h3 br { display: none; }

    .advantage .container_wrap .inner_wrap .item_inner ul li { flex-direction: column; }
    .advantage .container_wrap .inner_wrap .item_inner ul li .num { flex: auto; height: 300px; }
    .advantage .container_wrap .inner_wrap .item_inner ul li .txt { padding: 4rem; }
    .advantage .container_wrap .inner_wrap .item_inner ul li .txt h3 { font-size: 3rem; }
    .advantage .container_wrap .inner_wrap .item_inner ul li .txt p { font-size: 1.8rem; }

    .bundlesec .container_wrap .inner_wrap .intro_video { height: 230px; }
    .bundlesec .container_wrap .inner_wrap .bundle_list { grid-template-columns: repeat(1, 1fr); }
    .bundlesec .container_wrap .inner_wrap .bundle_list li p br { display: none; }

    .solution .container_wrap .list_wrap .solution_list { flex-direction: column; }
}

@media (max-width: 450px){
    .introduction .container_wrap .inner_wrap .inner_header .header_intro { margin-bottom: 250px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .img { margin-top: 250px; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt h3.after br { display: block; }
    .introduction .container_wrap .inner_wrap .inner_header .header_intro .txt h3.after::before { display: none; }
}