html { font-size: 10px;}
body { font-family: 'Pretendard', '맑은고딕', '돋움', sans-serif; font-size: 1.8rem; font-weight: 600; word-break: keep-all;}

/* headaer */
.landing .header-wrapper{ position: fixed; left: 0; right: 0; top: 0; height: 90px; line-height: 90px; background: #FFFFFF; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000;}
.landing .header-wrapper .header { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; padding: 0 20px;}
.landing .header-wrapper .header h1 a { display: block; width: 220px; height: 64px; text-indent: -9999px; background-image: url(../images/header_logo.png); background-repeat: no-repeat; background-size: contain; }
.landing .header-wrapper .header .util { flex-grow: 1; text-align: right; }
.landing .header-wrapper .header .util > a { display: inline-block; height: 48px; line-height: 48px; color: #4C4E54; padding:0 16px; border-radius: 48px; transition: all .3s;}
.landing .header-wrapper .header .util > a::before { content: ' '; display: inline-block; width: 32px; height: 32px; margin-right: 8px; background-image: url(../images/header_tel_icon.png); background-repeat: no-repeat; vertical-align: middle; transform: translateY(-2px); background-size: cover;}
.landing .header-wrapper .header .util > a:hover { background-color: #EAEDF6; }
.landing .header-wrapper .header .util > a > span { color: #212121; font-size: 2rem; font-weight: 700; }
.landing .header-wrapper .header .util > a > span:before { content: ''; display: inline-block; width: 2px; height: 14px; background-color: #ccc; margin: 0 8px;}

.fixed_call { position: fixed; right: 20px; bottom: 20px; display: inline-block; width: 56px; height: 56px;
    background-image: url(../images/common_icon_tel.png); background-repeat: no-repeat; text-indent: -9999px; z-index: 10000; background-size: contain;
}


/* section */

.landing .contents { margin-top: 90px;}
.section{ max-width: 1160px; min-width: 320px; margin: 0 auto; padding: 50px 20px; display: flex; justify-content: center; align-items: center; gap: 80px;}

.section01, .section02 { overflow-x: hidden;}
.section01 { background-color: #EAEDF6; background-image: url(../images/section01_bg01.png);}
.section02 .section { flex-direction: row-reverse;}

.section02 {position: relative;}
.section02::before,
.section02::after{ content: ' '; background-repeat: no-repeat; position: absolute; background-size: cover; z-index: -1;}
.section02::before{ width: 400px; height: 780px; background-image: url(../images/section02_bg01.png); left:0; bottom: 0;}
.section02::after { width: 800px; height: 730px; background-image: url(../images/section02_bg02.png); right: 0; bottom: 0; opacity: 0.8;}
.section02 .sec_left .img {width: 96px; display: inline-block;}
.section02 .sec_left .img img {width: 100%;}

/* txt_box */
.section .sec_left .txt_box .caption{ color: #666;}
.section .sec_left .txt_box .title { color: #212836; font-size: 4rem; line-height: 1.4; margin-top: 4px;}
.section .sec_left .txt_box .title > .em { color: #0091F8;}

/* downlaod_box */
.section .sec_left .downlaod_box { margin-top: 6%;}
.section .sec_left .downlaod_box .item.seeker { background-color: #0091F8;}
.section .sec_left .downlaod_box .item.recruiter { background-color: #1E2736;}
.section .sec_left .downlaod_box .item {  display: flex; min-width: 340px; padding: 16px 20px; margin-top: 8px; align-items: center; color: #fff; gap: 12px; border-radius: 16px; transition: all .3s;}
.section .sec_left .downlaod_box .item:hover { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);}
.section .sec_left .downlaod_box .item .img { width: 32px; height: 32px;}
.section .sec_left .downlaod_box .item .img img {width: 100%;}
.section .sec_left .downlaod_box .item .txt { flex-grow: 1; }
.section .sec_left .downlaod_box .item .txt > span {font-size: 1.5rem;font-weight: 400; margin-bottom: -4px; letter-spacing: 1px;}
.section .sec_left .downlaod_box .item .txt > h3 { margin-bottom: 8px; line-height: 1; font-weight: 600;}
.section .sec_left .downlaod_box .item .link { height: 48px ;}
.section .sec_left .downlaod_box .item .link > a { display: inline-block; margin-left: 8px; width:48px; height: 48px; border-radius: 24px; transition: all .3s;}
.section .sec_left .downlaod_box .item .link > a:hover { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);}
.section .sec_left .downlaod_box .item .link > a img {width: 100%;}

/* point_box */
.section .sec_left .point_box { margin-top: 6%;}
.section .sec_left .point_box .item{ padding: 12px 16px; border-bottom: 2px solid #eee; min-width: 320px; transition: all .3s;}
.section .sec_left .point_box .item:hover { border-color:#0091F8;}
.section .sec_left .point_box .item::before { content: ' '; display: inline-block; background-image: url(../images/section02_check.png); width: 24px; height: 20px; margin-right: 12px;}

/* tooltip */
.tooltip[data-tooltip]{ position: relative; cursor: pointer; }
.tooltip[data-tooltip]::before { content: ' '; z-index: 10000; opacity: 0; visibility: hidden; width: 0; height: 0; border-width: 5px; border-style: solid; border-color: transparent; border-top-color: #111; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); transition: opacity .3s; }
.tooltip[data-tooltip]::after{ content: attr(data-tooltip); z-index: 10000; opacity: 0; visibility: hidden; visibility: visible; position: absolute; top: calc( -100% + 8px); padding: 2px 8px; color: #fff; background-color: #111; font-size: 1.6rem; border-radius: 3px; white-space: nowrap; transition: opacity .3s;  left: 50%; transform: translateX(-50%); }
.tooltip[data-tooltip]:hover::before,
.tooltip[data-tooltip]:hover::after{ opacity: 1; visibility: visible; }


.footer-wrapper { position: relative; background-color: #F8F8F8; z-index: 1000;}
.footer { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; padding: 20px 20px 30px;} 

.footer .footer_logo { flex-grow: 1;}
.footer .footer_logo .img { width: 120px;}
.footer .footer_logo .img img {width: 100%;}
.footer .footer_info { text-align: right;}
.footer .footer_info ul {display: flex;}
.footer .footer_info ul li { color: #77849B; font-size: 1.5rem; font-weight: 500;}
.footer .footer_info ul li + li { margin-left: 8px;}
.footer .footer_info ul li::before{ content: ' '; display: inline-block; width: 1px; height: 12px; margin-right: 8px; background-color: #ADB6C7;}
.footer .footer_info ul li:nth-child(1)::before { background-color: transparent;}




@media screen and (max-width: 1200px) {
    /**/
    .tooltip[data-tooltip]::after { left:0}
    
    /* section */
    .section { flex-direction: column-reverse; gap: 0; padding: 30px 20px;}
    .section02 .section { flex-direction: column-reverse; gap: 40px;}
    .section .sec_left .txt_box .title { width: 60%;}
    .section02::before { display: none;}

    /* footer */
    .footer { flex-direction: column; gap: 20px;}
    .footer .footer_info ul  { flex-wrap: wrap;}
}

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

    body { font-size: 1.5rem; }

    /* header  */
    .landing .header-wrapper { height: 64px;}
    .landing .header-wrapper .header h1 {margin: 4px auto; padding-left: 30px;}
    .landing .header-wrapper .header h1 a { width: 160px; background-size: contain;}
    .landing .header-wrapper .header .util { display: none;}
    /*
    .landing .header-wrapper .header .util > a { height: 30px;line-height: 30px; margin-top: 16px;}
    .landing .header-wrapper .header .util > a:hover { background-color: transparent;}
    .landing .header-wrapper .header .util > a > span { font-size: 1.6rem; display: block;}
    .landing .header-wrapper .header .util > a > span:before { display: none;} 
    */

    
    /* section */
    .landing .contents { margin-top: 64px;}
    .section { flex-direction: column-reverse; gap: 0;}
    .section .sec_left .txt_box {text-align: center;}
    .section .sec_left .txt_box .title { width: 80%; margin: 4px auto 0; font-size: 2.4rem;}

    /* downlaod_box */
    .section .sec_left .downlaod_box .item {min-width: 280px; border-radius: 12px;}
    .section .sec_left .point_box .item {min-width: 240px; width: 85%; }
    .section .sec_left .downlaod_box .item .txt > span { font-size: 1.4rem;}
    .section .sec_left .downlaod_box .item .txt > h3 {font-size:1.8rem;}

    .section .sec_right { text-align: center;}
    .section .sec_right img {width: 80%; margin: 0 auto;}

    /* point_box */
    .section .sec_left .point_box .item::before { width: 16px; height:12px; background-size: contain; background-repeat: no-repeat;}
    
    /* footer */

    .footer .footer_info ul  { flex-direction: column; text-align: left;}
    .footer .footer_info ul li { font-size: 1.4rem;}
    .footer .footer_info ul li:nth-child(1)::before { background-color: #ADB6C7;}
    .footer .footer_info ul li + li { margin-left: 0;}
    

}