/* =================================== 회사소개 */
.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: #ffffff; padding-top: 0; }
.introduction .contents_wrap .inner_wrap .inner_header { margin-bottom: 0; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro { position: relative; display: flex; justify-content: space-between; height: 500px;  margin-bottom: calc(100px + 50px); background: #323b70; border-radius: 1rem; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .img { position: absolute; content: ''; top: 60px; left: 80px; width: 400px; height: 100%; background: url(../images/img_whycallgate_bg.png) no-repeat center; background-size: contain; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt { position: absolute; top: 50%; right: 62px; transform: translateY(-50%); width: 50%; clear: both; color: #ffffff; text-align: left; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt h3.after { position: relative; display: inline-block; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt h3.after br { display: none; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt h3:last-child { margin-top: 2rem; font-weight: 400; }
.introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt h3:last-child br.mo { display: none; }

.introduction .contents_wrap .inner_wrap .inner_header .header_mid { text-align: center; color: #323b70; }
.introduction .contents_wrap .inner_wrap .inner_header .header_mid h3 { margin-bottom: 0; }

.advantage { background: #fafafc; }
.advantage .contents_wrap .inner_wrap .item_inner ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 8rem; grid-row-gap: 8rem; }
.advantage .contents_wrap .inner_wrap .item_inner ul li .num { float: left; width: 100px; height: 100px; margin-right: 4rem; }
.advantage .contents_wrap .inner_wrap .item_inner ul li:nth-child(1) .num { background: url(../images/img_whycallgate_01.png) no-repeat center; background-size: contain; }
.advantage .contents_wrap .inner_wrap .item_inner ul li:nth-child(2) .num { background: url(../images/img_whycallgate_02.png) no-repeat center; background-size: contain; }
.advantage .contents_wrap .inner_wrap .item_inner ul li:nth-child(3) .num { background: url(../images/img_whycallgate_03.png) no-repeat center; background-size: contain; }
.advantage .contents_wrap .inner_wrap .item_inner ul li:nth-child(4) .num { background: url(../images/img_whycallgate_04.png) no-repeat center; background-size: contain; }
.advantage .contents_wrap .inner_wrap .item_inner ul li .txt { overflow: hidden; }
.advantage .contents_wrap .inner_wrap .item_inner ul li .txt h5 { margin-bottom: 1rem; }

.bundlesec { background: #5d6468; }
.bundlesec .container_wrap .inner_wrap .inner_header { color: #ffffff; }
.bundlesec .container_wrap .inner_wrap .bundle_list { border-top: 1px solid #ffffff; }
.bundlesec .container_wrap .inner_wrap .bundle_list li { position: relative; min-height: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 3rem 3rem 3rem 12rem; }
.bundlesec .container_wrap .inner_wrap .bundle_list li em { position: absolute; left: 2rem; top: 50%; width: 60px; height: 60px; line-height: 60px; transform: translateY(-50%); border-radius: 100px; font-size: 2rem; font-weight: 600; background-color: #ffffff; text-align: center; color: #5d6468; font-style: normal; }
.bundlesec .container_wrap .inner_wrap .bundle_list li strong { display: block; margin-bottom: 1rem; font-size: 2rem; color: #ffffff; }
.bundlesec .container_wrap .inner_wrap .bundle_list li p { color: #ffffff; }

.solution .container_wrap .list_wrap .solution_list { display: flex; justify-content: space-around; gap: 4rem; }
.solution .container_wrap .list_wrap .solution_list .tabcontent { flex: 1; padding: 4rem; border-radius: 1rem; background: #f9f9f9; }
.solution .container_wrap .list_wrap .solution_list .tabcontent strong { display: block; margin-bottom: 2rem; font-size: 2rem; }
.solution .container_wrap .list_wrap .solution_list .tabcontent p { color: #444444; }




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

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

@media (max-width: 1500px){
    .introduction .contents_wrap .inner_wrap .inner_header .header_intro { display: block; height: 400px; margin-bottom: 400px; }
    .introduction .contents_wrap .inner_wrap .inner_header .header_intro .img { position: absolute; top: 60px; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; margin-top: 290px; }
    .introduction .contents_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; }
}

@media (max-width: 1200px){
    .advantage .contents_wrap .inner_wrap .item_inner ul li .num { float: none; margin-bottom: 2rem; }
    .advantage .contents_wrap .inner_wrap .item_inner ul li .txt p br { display: none; }
}

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

@media (max-width: 768px){
}

@media (max-width: 683px){
    .inner_header { margin-bottom: 4rem; }
    .inner_header h3 { font-size: 2.5rem; }
    .inner_header h5 { font-size: 2rem; }

    .introduction .contents_wrap .inner_wrap .inner_header .header_intro { margin-bottom: 230px; }
    .introduction .contents_wrap .inner_wrap .inner_header .header_intro .img { margin-top: 230px; }
    .introduction .contents_wrap .inner_wrap .inner_header .header_intro .txt h3:last-child br.mo { display: block; }
    .introduction .contents_wrap .inner_wrap .inner_header .header_mid h3 br { display: none; }
    .advantage .contents_wrap .inner_wrap .item_inner ul li .num { width: 60px; height: 60px; }
    .advantage .contents_wrap .inner_wrap .item_inner ul li .txt h5 { font-size: 2rem; }

    .bundlesec .container_wrap .inner_wrap .bundle_list li { padding: 3rem 0rem 3rem 6rem; }
    .bundlesec .container_wrap .inner_wrap .bundle_list li em { width: 30px; height: 30px; line-height: 30px; top: 20%; left: 0; transform: translateY(-20%); }
    .bundlesec .container_wrap .inner_wrap .bundle_list li p br { display: none; }

    .solution .container_wrap .list_wrap .solution_list { display: block; }
    .solution .container_wrap .list_wrap .solution_list .tabcontent { margin-bottom: 2rem; padding: 3rem; }
    .solution .container_wrap .list_wrap .solution_list .tabcontent:last-child { margin-bottom: 0; }
}

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

    .advantage .contents_wrap .inner_wrap .item_inner ul { display: block; }
    .advantage .contents_wrap .inner_wrap .item_inner ul li { margin-bottom: 4rem; }
    .advantage .contents_wrap .inner_wrap .item_inner ul li:last-child { margin-bottom: 0; }
}