@charset "utf-8";

/* 폰트 */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

/* reset */
* {margin: 0; padding: 0; box-sizing:border-box;}
ul, ol {list-style-type: none;}
h1 {margin: 0;}
i {font-style:normal;}
a {text-decoration:none; color:inherit;}
a.block {display:block; width:100%; height:100%;}
button {outline:none; border:none; background:none; cursor:pointer;}
img {border: none; image-rendering:-webkit-optimize-contrast; backface-visibility: hidden; display: block;}
html {font-size: 0.625em; color:#333;}
body {font-family: 'NanumSquare', sans-serif; line-height: 1.4; overflow-x:hidden; letter-spacing: -1px;}
.clear:after {content: ""; display: block; clear: both;}
.pc, .tablet {display:none;} .mo{display: block;}
body.hidden {overflow:hidden;}
#wrap {overflow:hidden; position:relative;}

/* common */
.header-inner, .main-inner, .s-inner {
    padding: 0 20px;
}
/* header */
header {
    position: fixed;
    background: #fff;
    width: 100%;
    z-index: 9;
}
.header-inner {
    display:flex;
    align-items: center;
    justify-content: space-between;
    height:54px;
    position:relative;
}
.header-inner .top-menu.mo a {
    display: block;
    background: url(../images/m_menu.svg) no-repeat;
    width: 22px; height: 22px;
}
.header-inner h1 {
    width:40px; height:29px;
    background:url(../images/ain_logo.png) no-repeat 50%;
    background-size:contain;
}
.header-inner h1 span {
    text-indent:-9999px;
    position:absolute; top:-9999px; left:-9999px;
}

/* moile menu */
.mobile-menu {
    position: fixed;
    top: 0;
    width: 100%; height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99;
}
.mobile-menu .mobile-menu-inner {
    width: 307px; height: 100vh;
    background-color: #fff;
    position: absolute;
    right: 0;
}
.mobile-menu .menu-close {
    position: absolute;
    width: 22px; height: 22px;
    background: url(../images/close_icon.svg) no-repeat 50%;
    right: 20px; top: 19px;
}
.mobile-menu .menu-close a {
    display: block;
    width: 100%; height: 22px;
}
.mobile-menu .menu-navi {
    font-size: 1.8rem;
    position: absolute;
    top: 70px;
    left: 54px;
}
.mobile-menu .menu-navi li {
    margin-bottom: 41px;
}

/* main */
main {
    margin-top: 80px;
    background: url(../images/ain_main_bg.png) no-repeat;
    background-size: 100%;
    background-position: -50% 170px;
    padding-bottom: 200px;
}
main p {
    font-size: 1.8rem;
    font-weight: 700;
}
main img {
    width: 83%;
    margin: 13px 0 17px;
    max-width: 431px;
}
main span {
    display: block;
    font-size: 1.2rem;
}

/* section */
section .service-tag {
    width: 96px; height: 32px;
    border-radius: 32px;
    border: 2px solid #FF754D;
    font-size: 1.4rem;
    text-align: center;
    line-height: 32px;
    color: #FF754D;
    font-weight: 700;
    margin: 36px 0 40px;
}
section .service-txt h3 {
    font-size: 2.4rem;
    margin-bottom: 16px;
}
section .description {
    font-size: 1.6rem;
    display: block;
    margin: 24px 0 12px;
}
section .description-bold {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 50px;
}
section .description-bold1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 70px;
}
section .service-img img {
    margin: 0 auto 50px;
}
.se01 .service-txt h3, .se01 .description-bold {
    color: #18B7B2;
}
.se01 .service-txt h3, .se01 .description-bold1 {
    color: #18B7B2;
}
.se01 .service-img img {
    width: 93%;
}
.se02 .service-txt h3, .se02 .description-bold {
    color: #BC4448;
}
.se02 .service-img img {
    width: 100%;
}
section .service-txt img {
    width: 320px;
}
.se03 .service-txt h3, .se03 .description-bold {
    color: #3B78CD;
}
.se03 .service-img img {
    width: 73.4%;
}
.se04 {
    background: url(../images/ain_bg_mo.jpg) no-repeat 50%;
    background-size: cover;
    padding: 112px 0 234px;
}
section .sec-title {
    font-size: 3.2rem;
    color: #FF754E;
    font-weight: 800;
    margin-bottom: 14px;
}
.se04 span {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.8;
}
.se05 {
    padding: 60px 0;
}
.se05 .sec-title {
    text-align: center;
    margin-bottom: 30px;
}
.se05 img {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
.se06 {
    padding: 80px 0 90px;
}
.se06 .sec-txt {
    font-size: 1.8rem;
    text-align: center;
    font-weight: 700;
    width: 82%;
    margin: 0 auto 40px;
}
.se06 .sec-txt br {
    display: none;
}
.se06 img {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
}
.se07 {
    padding: 60px 0;
}
.se07 ul {
    display: flex;
    flex-wrap: wrap;
}
.se07 li {
    width: 100%; height: 220px;
    box-shadow: 0px 0px 15px rgba(130, 130, 130, 0.25);
    overflow:hidden;
    background:#fff;
    background-size: 60px 60px;
    background-repeat:no-repeat;
    background-position:right 15px top 75%;
    /*border: 1px solid #FE522A;*/
    border-radius: 34px;
    margin-bottom: 20px;
    padding: 22px 33px;
    position: relative;
}
.se07 li p {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FF8A00;
    margin-bottom: 7px;
}
.se07 li span {
    font-size: 1.4rem;
}
.se07 li img {
    width: 118px;
    position: absolute;
    right: 24px;
    bottom: 12px;
}
.se08 {
    padding: 50px 0 70px;
    text-align: center;
}
section .sec-sub {
    font-size: 1.4rem;
    margin-bottom: 40px;
}
.se08 ul {
    display: flex;
    flex-wrap: wrap;
}
.se08 ul li {
    width: 50%; height: 94px;
    border: 1px solid #E1E1E1;
    position: relative;
}
.se08 ul li img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 280px;
}
.se09 {
    padding: 50px 0 120px;
    text-align: center;
}
.se09 .recruit-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.se09 .recruit-wrap {
    display: flex;
    flex-wrap: wrap;
}
.se09 .recruit-wrap li {
    width: 87.5%;
    margin: 0 auto 15px;
    height: 55px;
    background: linear-gradient(270deg, #FD7253 0%, #FF9A02 100%);
    text-align: center;
    line-height: 55px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 55px;
}
.se09 .recruit-wrap li a {
    width: 100%; height: 55px;
    display: block;
}
.se09 .recruit-email {
    font-size: 1.6rem;
    font-weight: 700;
}

/* footer */
footer {
    background-color: #2B2B2B;
    color: #fff;
    padding: 30px;
}
footer .contact {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 38px;
}
footer li {
    display: flex;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
footer li p {
    flex-basis: 87px;
    font-weight: 700;
}
footer li span {
    display: inline-block;
    width: 66.8%;
}
footer .logo img {
    width: 85px;
    margin-top: 16px;
    margin-left: auto;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 54px;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    text-align: center;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(130, 130, 130, 0.25);
    width: 335px; /* Could be more or less, depending on screen size */
}
.modal-content img {
    display: block;
    margin: 0px auto;
    width: 100%;
    max-width:60px;
    text-align: center;
    margin-bottom: 10px;
}

/* 220923 해킹 관련 안내팝업 */
.info{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    left: 0;    top: 0;
    padding-top: 54px;
    width: 100%;    height: 100%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
}
.warning-content{
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    margin: 2%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(130, 130, 130, 0.25);
    max-width: 500px;
    max-height: 90%;

    overflow: overlay;
}
.warning-content img {
    width: 100%;
    max-width:750px;
    text-align: center;
    margin-bottom: 10px;
}
.warning-content .close_btn{
    cursor:pointer;
    background-color:#DDDDDD;
    text-align: center;
    padding: 10px 25px;
    border-radius: 5px;
}
.warning-content .close_btn .pop_bt{
    font-size: min(12px, 4vw);
}
/* // 220923 해킹 관련 안내팝업 */
.s-inner button{
    width:160px;
    height: 40px;
    color:#fff;
    background: #18B7B2;
    font-size: 16px;
    border:none;
    border-radius: 20px;
    transition:0.3s;
    position: absolute;
    margin-top: 10px;
    left:3%;
}

/* 가로 해상도 768 이상 */
@media screen and (min-width:768px){
    .mo {
        display: none;
    }
    .tablet {
        display: block;
    }
    .pc {
        display: none;
    }
    .header-inner .pc {
        display: block;
    }
    .header-inner {
        height: 80px;
    }
    .header-inner, .main-inner, .s-inner {
        padding: 0 30px;
    }
    .header-inner h1 {
        width: 52px; height: 38px;
    }
    .header-inner .top-menu.pc ul {
        display: flex;
    }
    .header-inner .top-menu.pc li {
        font-size: 1.4rem;
        margin-left: 72px;
    }
    main {
        padding: 186px 0 225px;
        margin-top: 0;
        background-size: 140%;
        background-position: -25% 20%;
    }
    main p {
        font-size: 2.4rem;
    }
    main img {
        margin-bottom: 30px;
    }
    main span {
        font-size: 1.8rem;
    }
    section .service-tag {
        width: 115px; height: 40px;
        font-size: 1.8rem;
        line-height: 40px;
        margin: 116px 0 60px;
    }
    section .description {
        font-size: 1.8rem;
    }
    section .description-bold {
        font-size: 2.4rem;
    }
    section .description-bold1 {
        font-size: 2.4rem;
    }
    .service-wrap .s-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .service-wrap .service-txt {
        width: 47%;
    }
    .se01 .service-img img, .se02 .service-img img, .se03 .service-img img {
        width: 110%;
        max-width: 440px;
        margin: 0 auto;
    }
    .se04 {
        margin-top: 40px;
        background: url(../images/ain_bg_t.jpg) no-repeat 50%;
        padding: 200px 0;
    }
    section .sec-title {
        font-size: 4rem;
    }
    .se04 span {
        display: inline-block;
        width: 384px;
        line-height: 1.8;
    }
    .se05 .sec-title {
        margin-bottom: 46px;
    }
    .se06 {
        padding: 130px 0 113px;
    }
    .se06 .sec-txt {
        font-size: 2.2rem;
        width: 100%;
    }
    .se06 .sec-txt br {
        display: block;
    }
    .se07 {
        padding: 120px 0;
    }
    .se07 ul {
        justify-content: space-between;
    }
    .se07 li {
        width: calc(50% - 9px);
        height: 260px;
    }
    .se07 li p {
        font-size: 2.6rem;
        margin-bottom: 12px;
    }
    .se07 li span {
        font-size: 1.8rem;
    }
    .se07 li img {
        width: 130px;
    }
    section .sec-sub {
        font-size: 1.8rem;
    }
    .se08 ul li {
        width: 25%;
    }
    .se09 .recruit-wrap li {
        width: 200px;
        margin-bottom: 0;
    }
    .se09 .recruit-wrap {
        width: 640px;
        margin: 0 auto 20px;
    }
    .se09 {
        padding: 70px 0 160px;
    }
    footer {
        padding: 75px 30px 120px;
        position: relative;
    }
    footer .contact {
        font-size: 3.2rem;
    }
    footer li {
        font-size: 1.6rem;
    }
    footer .logo {
        right: 30px; top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
    footer .logo img {
        width: 155px;
    }

    /* 220923 해킹 관련 안내팝업 */
    .info{
        display: flex;
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;   top: 0;
        padding-top: 80px;
        width: 100%; /* Full width */
        height: 100%;
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        text-align: center;
    }
}


/* 가로 해상도 1280 이상 */
@media screen and (min-width:1280px){
    .tablet {
        display: none;
    }
    .pc {
        display: block;
    }
    .header-inner, .main-inner, .s-inner, .footer-inner {
        padding: 0;
        width: 1180px;
        margin: 0 auto;
    }
    .header-inner {
        height: 100px;
    }
    .header-inner h1 {
        width: 75px; height: 54px;
    }
    .header-inner .top-menu.pc li {
        font-size: 1.8rem;
        margin-left: 57px;
    }
    main {
        background: url(../images/ain_main_bg_pc.png) no-repeat;
        background-size: contain;
        background-position: 300px 40px;
        padding: 260px 0 245px;
    }
    main p {
        font-size: 4rem;
    }
    main img {
        width: 522px;
        max-width: none;
        margin-bottom: 50px;
    }
    main span {
        font-size: 2.6rem;
    }
    section .service-tag {
        width: 146px; height: 50px;
        font-size: 2.8rem;
        line-height: 50px;
        margin: 75px 0 110px;
    }
    .se01 .service-img img, .se02 .service-img img, .se03 .service-img img {
        width: 100%;
        max-width: 760px;
    }
    .se02 .service-img img, .se03 .service-img img {
        margin-left: 30px;
    }
    section .service-txt h3 {
        font-size: 3.4rem;
        margin-bottom: 24px;
    }
    section .service-txt img {
        width: 498px;
    }
    section .description {
        font-size: 2.5rem;
        margin-top: 80px;
    }
    section .description-bold {
        font-size: 3.3rem;
        margin-bottom: 170px;
    }
    section .description-bold1 {
        font-size: 3.3rem;
        margin-bottom: 200px;
    }
    .se04 {
        background: url(../images/ain_bg_pc.jpg) no-repeat 50%;
    }
    section .sec-title {
        font-size: 5rem;
    }
    .se04 span {
        font-size: 2.5rem;
        width: 560px;
    }
    .se05 img {
        max-width: 1161px;
    }
    .se05 .sec-title {
        margin-bottom: 80px;
    }
    .se05 {
        padding: 100px 0 110px;
    }
    .se06 {
        padding: 130px 0;
    }
    .se06 .sec-txt {
        font-size: 2.9rem;
        margin-bottom: 90px;
    }
    .se07 ul {
        width: 1146px;
        margin: 0 auto;
    }
    .se07 li {
        width: 566px;
        height: 240px;
        padding: 62px 33px;
    }
    .se07 li p {
        font-size: 3.3rem;
    }
    .se07 li span {
        font-size: 2rem;
    }
    .se07 li img {
        width: 200px;
        bottom: 24px;
    }
    section .sec-sub {
        font-size: 2.9rem;
    }
    .se08 ul {
        width: 1189px;
        margin: 0 auto;
    }
    .se08 ul li {
        height: 158px;
    }
    .se09 .recruit-title {
        font-size: 2.9rem;
    }
    .se09 .recruit-wrap {
        width: 884px;
    }
    .se09 .recruit-wrap li {
        width: 288px; height: 72px;
        line-height: 72px;
        font-size: 2.2rem;
    }
    .se09 .recruit-wrap li a {
        height: 72px;
    }
    .se09 .recruit-email {
        font-size: 2.1rem;
    }
    .se09 {
        padding-bottom: 180px;
    }
    footer .contact {
        font-size: 5.5rem;
    }
    .footer-inner {
        position: relative;
    }
    footer li {
        font-size: 2.6rem;
    }
    footer li p {
        flex-basis: 138px;
    }
    footer .logo img {
        width: 251px;
    }
}

/* 가로 해상도 1920 이상 */
@media screen and (min-width:1920px){
    main {
        background-position: 100% 40px;
    }
}