@charset "utf-8";

/*sub_common*/

.main_only { display: none; }
main { padding-top: var(--header_height); }
.shadow_regular { box-shadow: 0 0 30px rgba(0, 0, 0, .1); }
.shadow_small { box-shadow: 0 0 15px rgba(0, 0, 0, .05); }

/* navigation bar */
#subTop { border-width: 1px 0; border-style: solid; border-color: #ddd; }
#subTop .location_bar { height: 6.25rem; }
#subTop .location_bar li { position: relative; }
#subTop .location_bar li + li { margin-left: 1.125rem; }
#subTop .location_bar li + li::before { content: "·"; margin-right: 1.125rem;  }



/* 1-1 why sksecu? */

.why_sksecu .sec1 .inner { padding: 8.75rem 0 6.25rem; align-content: center; }
.why_sksecu .sec1 .fs90 { width: 100%; }
.why_sksecu .sec1 .fs40 { width: 100%; max-width: 820px; }
.full_bg { width: 100%; aspect-ratio: 2.7428/1; }

.why_sksecu .sec2 { padding: 6.25rem 0; }
.why_sksecu .sec2 .round30 { padding: 5.625rem 3.75rem; }
.why_sksecu .sec2 .ul_disc li + li { margin-top: 1.5rem; }

.plus_grid > li { position: relative; padding: 3.25rem 0; background: #f8f8f8; border-radius: 1.25rem; }
.plus_grid > li + li::after { content: ""; position: absolute; left: calc(-1% - 1.25rem ); top: 50%; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; background: url('../images/plus_circle.png') no-repeat 50% 50%; background-size: 100%; }

.why_sksecu .sec3 .quarter { padding: 3.75rem 1.875rem; text-align: center; border-radius: 1.875rem; box-shadow: 0 0 15px rgba(0, 0, 0, .05); }
.why_sksecu .sec3 .quarter figure img { width: auto; height: 8.125rem; }
.why_sksecu .sec3 .quarter .fs32 { margin-top: 1.5rem; }
.why_sksecu .sec3 .quarter .fs22 { margin-top: .625rem; line-height: 1.4; }


/* 2-1 통합관제시스템 */

.title_section { padding: 6.875rem 0 4rem; }
.combined_sys .tab_content { padding-bottom: 5.625rem; }

.system_intro { align-items: flex-start; }
.system_intro .img_box { width: 36.5853%; aspect-ratio: 1.2/1; background-color: #f8f8f8; border-radius: 1.25rem; }
.system_intro .text { width: 58.5365%; padding-top: 1rem; }


.system_tab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.6vw; }
.system_tab > li { position: relative; overflow: hidden; border-radius: 1.25rem; box-shadow: 0 0 15px rgba(0, 0, 0, .05); }
.system_tab > li i { z-index: 1; position: absolute; right: 2.5rem; top: 2.5rem; color: var(--color_w_gray); transition: .3s; }
.system_tab > li .text { position: relative; z-index: 2; padding: 2rem 1.875rem 0; }
.system_tab > li .img_box { width: 100%; aspect-ratio: 1.5625/1; }
.system_tab > li .click_box { z-index: 3; opacity: 0; background: rgba(0, 0, 0, .4); }
.system_tab > li:hover .click_box { opacity: 1; }
.system_tab > li:hover i, .system_tab > li.active i { color: var(--color_skyblue); }
.system_tab > li .click_box .btn_css { position: absolute; right: 1.875rem; bottom: 1.25rem; }


.compare_list > li + li { margin-top: 20px; }
.compare_list > li { display: flex; justify-content: flex-end; gap: 2vw; }
.compare_list > li:first-child div { padding: 0; }
.compare_list > li .title { justify-content: flex-end; padding-bottom: .75rem; width: 12rem; background-repeat: no-repeat; background-position: 50% 30%; background-size: auto 40%; }
.compare_list > li:not(:first-child) div { background-color: #fff; border-radius: 1.25rem; box-shadow: 0 0 30px rgba(0, 0, 0, .1); }
.compare_list > li div:not(.title) { width: calc((100% - 12rem)/2); }
.compare_list > li:not(:first-child) div:not(.title) { display: flex; align-items: center; width: calc((100% - 12rem)/2); padding: 1.5rem 2.5rem; }

.check_box_style > li { position: relative; padding: 2.5rem 2.5rem 2.5rem 3.25rem; background-color: #edf3fc; border-radius: 1.25rem; }
.check_box_title { display: flex; gap: 1.25rem; align-items: center; }
.check_box_title i { position: relative; display: block; width: 3.75rem; height: 3.75rem; background: var(--color_primary); border-radius: .94rem;  }
.check_box_title i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9375rem; height: 1.5rem; border-right: .3125rem solid #fff; border-bottom: .3125rem solid #fff; transform: translate(-50%, -60%) rotate(45deg); }
.check_box_title span { width: calc(100% - 5.3125rem); }

.solution_grid .round20 { min-height: 220px; padding: 1.875rem 2.5rem; }
.solution_grid > .third { position: relative; }
.solution_grid > .third + .third::after { content: "→"; font-size: 1.5rem; font-weight: 700; color: var(--color_primary); position: absolute; top: 55%; left: -7%; }


/* 2-2 통합 경비앱 */

.combine_app .diagram { gap: 5.3125rem; }

.check_box_style2 > li { position: relative; padding: 4.375rem 3.75rem; border-radius: 1.25rem; box-shadow: 0 0 15px rgba(0, 0, 0, .05); }

.grid4_graybox > li { padding: 3.125rem 0; background: #f8f8f8; text-align: center; border-radius: 1.25rem; }
.grid4_graybox > li img { height: 7.5rem; }
.half.grid4_graybox > li { position: relative; padding: 2rem 2vw; }
.half.grid4_graybox > li img { height: 5rem; }

.requestForms { min-width: 550px; }
.requestForms tr { border-bottom: 1px solid #ddd; }
.requestForms td { padding: .5rem; border-left: 1px solid #ddd; }
.requestForms td input[type="number"] { width: 80px; }
.requestForms td input[type="text"] { width: 100px; padding: 0; border: 0; border-radius: 0; outline: none; text-align: center; }

.phone_input.mobile { display: block; width: 100%; border-bottom: 1px solid #ddd; }
.phone_input.mobile input { width: 30%; text-align: center; font-size: inherit; padding: 0; border: 0; outline: none; }

/* 3-1 정보통신공사 */

.diagram_process { position: relative; width: 70%; margin: 5rem auto; height: 500px; display: flex; justify-content: space-between; }
.diagram_process::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -1; left: 0; width: 100%; height: 1.25rem; border-radius: 50px; background-image: linear-gradient(to right, var(--color_skyblue), var(--color_primary));  }
.diagram_process > li { position: relative; padding: 0 1vw; }
.diagram_process > li::after { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(50%); width: 1px; height: 40%; border-left: 2px dashed #ccc; }
.diagram_process > li:nth-child(odd)::after { transform: translateY(-100%); }
.diagram_process > li > i { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3.25rem; aspect-ratio: 1; background: rgba(255, 255, 255, .58); box-shadow: 0 0 9px rgba(0, 0, 0, .13); border-radius: 50%; }
.diagram_process > li > i::after { content: attr(color-name); position: absolute; bottom: -95px; left: 50%; transform: translateX(-50%); }
.diagram_process > li > i::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: .8125rem; height: .8125rem; background: #fff; border-radius: 50%; z-index: 2; }
.diagram_process > li > div { width: calc(100vw/6); max-width: 300px; height: fit-content; padding: 1.25rem; background: #fff; position: absolute; transform: translateX(-50%); font-size: 1.125rem; line-height: 1.4; text-align: center; }
.diagram_process > li:nth-child(even) > div { bottom: 0; }
.diagram_process > li > div img { height: 4rem; }
.diagram_process > li > div p { margin-top: 1rem; }
.diagram_process > li > div span { position: absolute; left: 20%; top: 20px; font-size: 2rem; font-weight: 700; color: var(--color_skyblue); }


/* 3-3 공용 폰 */

.grid3_graybox > li { padding: 2.8125rem; background: #f8f8f8; border-radius: 1.25rem; }
.grid3_graybox > li figure { margin-bottom: 8.75rem; }
.grid3_graybox > li figure img { height: 6.875rem; }


/* 4-1 셀파고 */
.sherpago_list li { position: relative; z-index: 1; margin-bottom: 20px; padding: 2rem 2.5rem; border-radius: 1.25rem; }
.sherpago_list li p { position: relative; z-index: 3; width: calc(100% - 6.25rem); }
.sherpago_list li figure { position: absolute; z-index: 2; right: 2.5rem; top: 2.5rem; width: 6.25rem; }


/* 4-2 대한정보통신 */
.daehan { position: relative; flex-wrap: nowrap; gap: 6vw; }
.daehan .left::after { content: "←"; position: absolute; right: -5%; top: 50%; transform: translate(100%, -50%); font-size: 3rem; color: var(--color_primary); }
.grid4_graybox .num { position: absolute; left: 0; top: 0; transform: translate(-30%, -30%); width: 2.5rem; aspect-ratio: 1; border-radius: 50%; font-weight: 500; color: #666; text-align: center; line-height: 2.5rem; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .1); }


.sherpago_list .gray_bg { position: relative; }
.sherpago_list .gray_bg::after { content: "→"; position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%); font-size: 3rem; color: var(--color_primary); }



/* 상담 문의 */
.contact_form > li { display: flex; flex-wrap: wrap; position: relative; padding-bottom: 3.75rem; }
.contact_form > li > .right { width: 100%; font-size: 1.25rem; color: #666; }
.contact_form input[type=text], .contact_form input[type=email] { border: none; background: transparent; min-width: 0; outline: none; }
.contact_form > li > .right .half { display: flex; gap: .5rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid #bbb; position: relative; }
.contact_form > li > .right .half:nth-child(n+3) { margin-top: 2rem; }
.contact_form > li > .right .half > input[type=text], 
.contact_form > li > .right .half > input[type=email] { display: block; font-size: 1.25rem; width: 100%; max-width: calc(100% - 130px); }
.contact_form > li > .right .half .mobile { display: block; width: 100%; max-width: calc(100% - 100px); }
.contact_form > li > .right .half .mobile input { width: 30%; text-align: center; font-size: inherit; }
.contact_form .check_wrap { gap: 2.125rem; padding: 1.75rem 2.125rem; background: #f7f7f7; }
.contact_form .check_wrap li { position: relative; display: flex; align-items: center; }
.contact_form input[type=radio] { width: 23px; height: 23px; border-color: #bbb; border-radius: 0; position: relative; }
.contact_form input[type=radio]:checked { background: var(--color_primary); border-color: var(--color_primary); }
.contact_form input[type=radio]:checked + label { font-weight: 500; color: #000; }
.contact_form textarea { width: 100%; font-size: 1.25rem; height: 11.875rem; }
.contact_form .file_attach input[type=text] { width: calc(100% - 128px); height: 2.5rem; border: 1px solid #ccc; border-radius: 0; }
.contact_form .file_attach .btn_style { padding: 0; width: 120px; height: 2.5rem; line-height: 2.4rem; text-align: center; }
.captcha_wrap { gap: 1.5rem; }
.contact_form > li > .right .captcha_wrap .half > input { max-width: 100%; }





@media screen and (max-width:1280px) {
    .fs40 { font-size: 28px; line-height: 1.4; }
    .fs30, .fs28, .fs26, .fs24 { font-size: 21px; }

    .combine_app .diagram { flex-wrap: nowrap; gap: 0; justify-content: space-between; }

    .diagram_process > li > div span { left: 8%; }
}

@media screen and (max-width:1024px) {
    .fs90, .fs70, .fs65 { font-size: 40px; }
    .fs50, .fs45 { font-size: 28px; letter-spacing: -2px; }
    .fs40, .fs36, .fs35 { font-size: 24px; letter-spacing: -1px; }
    .fs30, .fs28, .fs26, .fs24 { font-size: 18px; }

    .why_sksecu .sec2 ul.ul_disc > li { padding-left: 1rem; }
    .why_sksecu .sec2 ul.ul_disc > li::before { top: 10px; }
    .why_sksecu .sec2 .ul_disc li + li { margin-top: 1rem; }

    .why_sksecu .sec2 .round30 { padding: 50px 40px; }

    .system_tab { grid-template-columns: repeat(2, 1fr); }

    .check_box_style2 > li { padding: 30px; }


    .diagram_process { width: 85%; }
    .diagram_process > li > div { width: calc(100vw/4); }
    .diagram_process > li > div span { left: 10%; }

}


@media screen and (max-width:767px) {
	#subTop .location_bar { height: 50px; }

    .title_section { text-align: center; }

    .compare_list > li:first-child { display: none; }
    .compare_list > li { width: 100%; margin-bottom: 20px; gap: 0; flex-direction: column; border-radius: 1.25rem; box-shadow: 0 0 30px rgba(0, 0, 0, .1); }
    .compare_list > li .title { width: 100%; padding: 20px 6rem; background-position: 2.5rem 50%; align-items: flex-start; }
    .compare_list > li:not(:first-child) div:not(.title) { width: 100%; }
    .compare_list > li:not(:first-child) div { border-radius: 0; box-shadow: none; }
    .compare_list > li + li { margin-top: 0; }

    .check_box_title i { width: 3rem; height: 3rem; border-radius: 8px; }
    .check_box_title i::after { border-width: 3px; }

    .grid3_graybox > li figure { margin-bottom: 2rem; }
    .grid3_graybox > li figure img { height: 3rem; }

    .half.grid4_graybox, .sub3-1 .grid_box.grid4 { grid-template-columns: repeat(2, 1fr); }
    
    .sherpago_list { flex-direction: column-reverse; gap: 6vw; } 
    .daehan { flex-wrap: wrap; flex-direction: column-reverse; }
    .daehan .left::after { right: 50%; top: 0; z-index: 5; transform: translate(50%, -80%) rotate(-90deg); }

    .sherpago_list .gray_bg { text-align: center; }
    .sherpago_list .gray_bg::after { left: 50%; top: 0; transform: translate(-50%, -80%) rotate(90deg); }

    .reverse { display: flex; flex-direction: column-reverse; gap: 30px; }


}

@media screen and (max-width:640px) {
    .fs90, .fs70, .fs65 { font-size: 35px; letter-spacing: -2px; }
    .fs50, .fs45 { font-size: 24px; letter-spacing: -1px; }
    .fs40, .fs36, .fs35, .fs32 { font-size: 21px; }
    .fs30, .fs28 { font-size: 18px; }
    .fs26, .fs24, .fs22, .fs20 { font-size: 16px; }

    .plus_grid { margin-top: 30px; }
    .plus_grid > li + li::after { top: 0; left: 50%; }

    .why_sksecu .sec3 .quarter { padding: 30px 20px; }
    .why_sksecu .sec3 .quarter figure img { height: 4rem; }
    .why_sksecu .sec3 .mt100 { margin-top: 40px; }


    .solution_grid .round20 { min-height: 0; }
    .solution_grid > .third .c { text-align: left; }
    .solution_grid > .third + .third { margin-top: 30px; }
    .solution_grid > .third + .third::after { top: 0; left: 50%; transform: rotate(90deg); }


    .diagram_process { width: 90%; height: fit-content; flex-direction: column; }
    .diagram_process::after { width: 10px; height: 100%; top: 0; transform: translateY(-30px); background-image: linear-gradient(to bottom, var(--color_skyblue), var(--color_primary)); }
    .diagram_process > li { width: 100%; padding-left: 3rem; }
    .diagram_process > li > i { left: 0; top: 0; transform: translate(-38%, -50%) }
    .diagram_process > li > div { position: static; max-width: 100%; width: 100%; min-height: 100px; background: none; transform: translate(0, -50%); text-align: left; }
    .diagram_process > li:nth-child(even) > div { bottom: auto; }
    .diagram_process > li::after { left: 0; top: 0; width: 40px; height: 1px; border-left: none; border-top: 2px dashed #ccc; }
    .diagram_process > li:nth-child(odd)::after { transform: translateY(-100%); }
    .diagram_process > li > div img { position: absolute; right: 0; max-width: 40px; max-height: 30px; }
    .diagram_process > li > div p { padding-left: 0; width: calc(100% - 30px) }
    .diagram_process > li > div span { font-size: 18px; left: 0; }

}


@media screen and (max-width:480px) {
    .fs90, .fs70, .fs65 { font-size: 28px; letter-spacing: -1px; }
    .fs50, .fs45 { font-size: 20px; }
    .fs40, .fs36, .fs35, .fs32 { font-size: 18px; }
    .fs30, .fs28 { font-size: 16px; }
    .fs26, .fs24, .fs22, .fs20 { font-size: 14px; }

    .why_sksecu .sec2 .round30 { padding: 10% 8%; }
    .why_sksecu .sec2 ul.ul_disc > li { margin-top: 8px; }
    .why_sksecu .sec2 ul.ul_disc > li::before { top: 8px; width: 5px; height: 5px; }
    .why_sksecu .sec2 .round30 p.mt24 { margin-top: 8px; }

    .plus_grid > li { padding: 30px 0; }

    .system_intro .img_box, .system_intro .text { width: 100%; }

    .system_tab > li { border-radius: 10px; }
    .system_tab > li i { right: 15px; top: auto; bottom: 15px; }
    .system_tab > li .text { padding: 15px 10px; }
    .system_tab > li .btn_css { display: none; }
    .system_tab > li .img_box { position: absolute; left: 0; top: 0; opacity: .15; }

    .combine_app .diagram { flex-wrap: wrap; flex-direction: column; }
    .combine_app .diagram figure:first-child { max-width: 50%; }
    .combine_app .diagram div img { transform: rotate(90deg); }

    .check_box_style > li { padding: 20px; }

    .grid3_graybox > li { padding: 30px; }

    .grid4_graybox > li { position: relative; text-align: left; padding: 20px; }
    .grid4_graybox > li img { height: 4rem; position: absolute; top: 20px; right: 20px; }

    .half.grid4_graybox { grid-template-columns: repeat(1, 1fr); }
    .half.grid4_graybox > li { padding: 20px; }
    .half.grid4_graybox > li img { height: 40px; }

}


@media screen and (max-width:400px) {
    .fs90, .fs70, .fs65 { font-size: 25px; }
    .fs50, .fs45 { font-size: 18px; }
    .fs40, .fs36, .fs35, .fs32 { font-size: 16px; }
    .fs30, .fs28 { font-size: 15px; }
    .fs26, .fs24, .fs22, .fs20 { font-size: 13px; }

    .check_box_style2 > li { padding: 20px; }
    .check_box_title span br { display: none; }
    

}