/* 공통 */
.layout {
    width:90%;
    margin: 0 auto;
    max-width:1400px
}
.bgDot {
    background: url("/public/images/dot-bg.jpg") repeat;
}
.btn-type1 {
    background-color: var(--color-dark);
    color: var(--color-white);
    font-weight: var(--fw-b);
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-40)
}
    /* 공통 미디어쿼리 */
    @media all and (max-width:640px) {
        .btn-type1 {
            height: 55px;
            font-size: var(--font-15)
        }   
    }

/* Main Common */
.fairBtnArea {
    width: 100%;
    position: absolute;
    right:0;
    top:30px;
}
.fairBtnArea .layout {
    display: flex;
    justify-content: flex-end;
}
.fairBtnArea .btnFair {
    height: 40px;
    padding: 0 var(--space-20);
    font-size: var(--font-18);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-pink);
    color: var(--color-white);
    font-weight: var(--fw-b);
    border-radius: 1000000px;
}
.fairBtnArea .btnFair:hover {
    background-color: var(--color-dark);
}
.mainWrap {
    padding: var(--space-180) 0
}
.mainVisual .layout {
    position: relative;
}
.mainStxt {
    color: var(--color-pink);
    font-weight: var(--fw-b);
    font-size: var(--font-20);
    display: block;
    font-family: var(--font-en);
    text-transform: uppercase;
    margin-bottom: var(--space-5)
}
.mainTitle {
    font-size: var(--font-70);
    font-weight: var(--fw-b);
}
.mainTitle.en {
    font-weight: var(--fw-eb);
    text-transform: uppercase;
    font-family: var(--font-en);
    line-height: 1
}
.mainSubtxt {
    font-size: var(--font-28);
    font-weight: var(--fw-b);
}
.mainSubtxt2 {
    font-size: var(--font-30);
    font-weight: var(--fw-eb);
}
    /* Main Common 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainWrap {
            padding: var(--space-150) 0
        }
        .mainTitle {
            font-size: var(--font-60);
        }
    }
    @media all and (max-width:1000px) {
        .mainWrap {
            padding: var(--space-100) 0
        }
        .mainStxt {
            font-size: var(--font-18);
        }
        .mainTitle {
            font-size: var(--font-50);
        }
        .mainSubtxt,
        .mainSubtxt2 {
            font-size: var(--font-25);
        }
        .btn-type1 {
            padding: 0 var(--space-20)
        }
    }
    @media all and (max-width:640px) {
        .mainWrap {
            padding: var(--space-70) 0;
        }
        .fairBtnArea {
            height: 35px;
            top:20px;
        }
        .fairBtnArea .btnFair {
            height: 40px;
            padding: 0 var(--space-15);
            font-size: var(--font-16);
        }
        .mainTitle {
            font-size: var(--font-35);
        }
        .mainStxt {
            font-size: var(--font-16);
        }
        .mainSubtxt,
        .mainSubtxt2 {
            font-size: var(--font-23);
        }
    }

/* Main > mainVisual */
.mainVisual {
    width:100%;
    height: 753px;
    /* background: center / cover url("/public/images/main-visual.jpg") no-repeat; */
    background-image: url("/public/images/main-visual-presentation.jpg");
    display: flex;
    align-items: center;
    color: var(--color-white)
}
.mainVisual.canada {
    background-image: url("/public/images/main-visual-presentation.jpg");
}
.mainVisual h2 {
    font-size: var(--font-100);
    font-weight: var(--fw-eb);
}
.mainVisual p {
    font-size: var(--font-28);
    font-weight: var(--fw-b);
    margin: var(--space-60) 0 var(--space-10)
}
.mainVisual strong {
    display: block;
    font-size: var(--font-60);
    font-weight: var(--fw-b);
    font-family: var(--font-en);
    color: rgba(255,255,225,0.49)
}
    /* Main > mainVisual 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainVisual h2 {
            font-size: var(--font-80);
        }
        .mainVisual strong {
            font-size: var(--font-40);
        }
    }
    @media all and (max-width:1000px) {
        .mainVisual {
            height: 600px;
        }
        .mainVisual h1 {
            width: 120px;
            margin-bottom: var(--space-10)
        }
        .mainVisual h1 img {
            width:100%
        }
        .mainVisual h2 {
            font-size: var(--font-60);
        }
        .mainVisual p {
            font-size: var(--font-25);
        }
    }
    @media all and (max-width:640px) {
        .mainVisual {
            height: 500px;
            padding-top:80px
        }
        .mainVisual h1 {
            width: 100px;
        }
        .mainVisual h2 {
            font-size: var(--font-40);
            line-height: 1.2;
        }
        .mainVisual p {
            margin: var(--space-40) 0 var(--space-10);
            font-size: var(--font-18)
        }
        .mainVisual strong {
            font-size: var(--font-25);
        }
    }

/* Main > mainConsulting */
.mainConsulting .mtitleArea {
    text-align: center;
}
.mainConsulting .mainTitle {
    font-weight: var(--fw-eb);
}
.mainConsulting .mainStxt {
    text-transform: capitalize;
}
.mainConsulting .mainContent {
    margin-top: var(--space-40)
}
.mainConsulting .row {
    display: flex;
    justify-content: space-between;
    margin: 0 -10px var(--space-20)
}
.mainConsulting .inputBox {
    width: 33.333%;
}
.mainConsulting .selectBox {
    width: 50%
}
.mainConsulting .selectBox option br {
    display: none;
}
.mainConsulting .selectBox option:disabled {
    color: var(--color-dark);
}
.mainConsulting .inputBox,
.mainConsulting .selectBox,
.mainConsulting .textareaBox {
    padding: 0 var(--space-10);
}
.mainConsulting .inputBox,
.mainConsulting .selectBox {
    height: var(--space-70);
}
.mainConsulting .textareaBox {
    width: 100%
}
.mainConsulting .inner {
    border: var(--border);
    background-color: var(--color-white);
    position: relative;
    height: 100%;
    transition: var(--transition);
}
.mainConsulting .inner:hover {
    border-color: var(--color-pink)
}
.mainConsulting .inputBox .inner {
    display: flex;
    align-items: center;
    padding-left: var(--space-30)
}
.mainConsulting .inputBox label,
.mainConsulting input,
.mainConsulting select,
.mainConsulting textarea {
    font-size: var(--font-18);
    font-weight: var(--fw-b);
}
.mainConsulting input,
.mainConsulting select {
    height: 100%;
}
.mainConsulting .inputBox label {
    width:110px;
    position: relative;
    margin-right: var(--space-15);
}
.mainConsulting .inputBox label::after {
    content:"";
    width:1px;
    height:20px;
    display: block;
    position: absolute;
    right:0;
    top: 1px;
    background-color: var(--color-lgray);
}
.mainConsulting select {
    padding: 0 var(--space-30);
    background: center right 30px url("/public/images/arrow-down.svg") no-repeat;
}
.mainConsulting textarea {
    padding: var(--space-30)    
}
.mainConsulting input::placeholder,
.mainConsulting select::placeholder,
.mainConsulting textarea::placeholder {
    font-weight: var(--fw-l);
    color: var(--color-gray)
}
.mainConsulting .row4 .inputBox {
    width: 100%;
}
.mainConsulting .row4 .captcha {
    width: calc(100% - 110px);
    display: flex;
    align-items: center;
} 
.mainConsulting .row4 .inputBox label span {
    color: var(--color-gray);
    font-size: var(--font-16);
    font-weight: var(--fw-l);
}
.mainConsulting .row4 #captcha_section {
    cursor: pointer;
} 
.mainConsulting .row4 .inputBox input {
    padding-left: var(--space-20);
    width: calc(100% - 160px);
}
.mainConsulting .input-policy {
    display: flex;
    align-items: center;
}
.mainConsulting .input-policy button {
    display: flex;
    align-items: center;
    background-color: transparent;
    font-weight: var(--fw-b);
    font-size: inherit;
}
.mainConsulting .label--checkbox {
    display: flex;
    align-items: center;
    font-weight: var(--fw-b);
    cursor: pointer;
    transition: var(--transition);
}
.mainConsulting .label--checkbox:hover,
.mainConsulting .input-policy button:hover {
    color: var(--color-pink)
}
.mainConsulting .checkbox {
    width: 18px;
    height: 18px;
    border: var(--border);
    position: relative;
    margin: -4px 9px 0 0;
    cursor: pointer;
}
.mainConsulting .checkbox:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 1;
    width: 10px;
    height: 6px;
    border: 2px solid var(--color-pink);
    border-top-style: none;
    border-right-style: none;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -moz-transition: -moz-transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.3s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg) scale(0, 0);
    -moz-transform: rotate(-45deg) scale(0, 0);
    -ms-transform: rotate(-45deg) scale(0, 0);
    -o-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
}
.mainConsulting .checkbox:checked:before {
    -webkit-transform: rotate(-45deg) scale(1, 1);
    -moz-transform: rotate(-45deg) scale(1, 1);
    -ms-transform: rotate(-45deg) scale(1, 1);
    -o-transform: rotate(-45deg) scale(1, 1);
    transform: rotate(-45deg) scale(1, 1);
}
.mainConsulting .checkbox:after {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 18px;
    height: 18px;
    background: transparent;
    cursor: pointer;
}
.mainConsulting .input-policy a {
    font-weight: var(--fw-b);
}
.mainConsulting .btn-type1 {
    margin: 0 auto;
    margin-top: var(--space-70)
}
    /* Main > mainConsulting 미디어쿼리 */
    @media all and (max-width:1000px) {
        .mainConsulting .row {
            flex-wrap: wrap;
        }
        .mainConsulting .inputBox {
            width:100%;
        }
        .mainConsulting .inputBox .inner {
            padding-left: var(--space-20);
        }
        .mainConsulting select {
            padding: 0 var(--space-20);
            background: center right 20px url(/public/images/arrow-down.svg) no-repeat;
        }
        .mainConsulting .inputBox:not(:last-of-type) {
            margin-bottom: var(--space-20)
        }
        .mainConsulting input::placeholder,
        .mainConsulting select::placeholder,
        .mainConsulting textarea::placeholder {
            font-size: var(--font-15);
        }
    }
    @media all and (max-width:640px) {
        .mainConsulting .mainContent {
            margin-top: var(--space-30);
        }
        .mainConsulting .row {
            margin: 0 -10px var(--space-10);
        }
        .mainConsulting .inputBox, .mainConsulting .selectBox {
            height: var(--space-55);
        }
        .mainConsulting .inputBox .inner {
            padding-left: var(--space-15);
        }
        .mainConsulting .inputBox:not(:last-of-type),
        .mainConsulting .selectBox:first-of-type {
            margin-bottom: var(--space-10);
        }
        .mainConsulting .inputBox label {
            width: 80px;
        }
        .mainConsulting .selectBox {
            width:100%
        }
        .mainConsulting .selectBox option br {
            display: block;
        }
        .mainConsulting select {
            padding: 0 var(--space-15);
            background-position: center right 15px;
        }
        .mainConsulting .inputBox label,
        .mainConsulting input,
        .mainConsulting select,
        .mainConsulting textarea {
            font-size: var(--font-16);
        }
        .mainConsulting textarea {
            padding: var(--space-15);
        }
        .mainConsulting input::placeholder,
        .mainConsulting select::placeholder,
        .mainConsulting textarea::placeholder {
            font-size: var(--font-14);
        }
        .mainConsulting .row4 .inputBox {
            height: auto;
        }
        .mainConsulting .row4 .inputBox .inner {
            flex-direction: column;
            align-items: flex-start;
            padding-top: var(--space-15);
            padding-bottom: var(--space-15);
        }
        .mainConsulting .row4 .inputBox label {
            width: 100%;
            margin-right: 0;
            margin-bottom: var(--space-5)
        }
        .mainConsulting .row4 .inputBox label span {
            font-size: var(--font-14);
        }
        .mainConsulting .row4 .inputBox label::after {
            display: none;
        }
        .mainConsulting .row4 .captcha {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        .mainConsulting .row4 .inputBox input{
            width: 100%;
            height: 40px;
            padding-left: 0;
            margin-top: var(--space-5)
        }
        .mainConsulting .row4 .inputBox img {
            width: 150px;
        }
        .mainConsulting .btn-type1 {
            margin-top: var(--space-30)
        }
        .mainConsulting .label--checkbox,
        .mainConsulting .input-policy button {
            font-size: var(--font-16);
        }
    }

/* Main > mainAbout */
.mainAbout {
    background: center / cover url("/public/images/main-about.jpg") no-repeat;
}
.mainAbout {
    color: var(--color-white)
}
.mainAbout .mainStxt {
    font-weight: var(--fw-r);
}
.mainAbout .mainStxt,
.mainAbout .mainSubtxt {
    color: #E6E6E6;
}
.mainAbout .mainSubtxt {
    margin: var(--space-10) 0 var(--space-60)
}
   /* Main > mainReason 미디어쿼리 */
    @media all and (max-width:640px) {
        .mainAbout {
            background-position: 83% center;
        }
        .mainAbout .mainSubtxt {
            margin: var(--space-10) 0 var(--space-30);
        }
    }

/* Main > mainReason */
.mainReason {
    position: relative;
}
.mainReason::after {
    content:"";
    width:100%;
    height: 70%;
    position: absolute;
    left:0;
    bottom: 0;
    display: block;
    background: center / cover url("/public/images/reason-bg.jpg") no-repeat;
    z-index: 0;
}
.mainReason .layout {
    position: relative;
    z-index: 1
}
.mainReason .mainTitle {
    margin-bottom: var(--space-60)
}
.mainReason .mainTitle mark {
    background-color: transparent;
    font-size: inherit;
    font-weight: inherit;
    color: var(--color-white)
}
.mainReason .mainSubtxt {
    color: var(--color-white)
}
.mainReason .mainContent {
    margin-top: var(--space-110)
}
.mainReason .mainContent ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.mainReason .mainContent ul li {
    width: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--color-white);
}
.mainReason .mainContent .icon {
    width: 89px;
    margin: 0 auto;
    margin-bottom: var(--space-40)
}
.mainReason .mainContent .icon img {
    width:100%;
}
.mainReason .mainContent .detailTxt {
    font-family: var(--font-en);
    font-weight: var(--fw-l);
    font-size: var(--font-14);
    text-transform: uppercase;
    color: #D8D8D8;
}
.mainReason .mainContent .mainSubtxt2 {
    margin: var(--space-10) 0 var(--space-30)
}
.mainReason .mainContent p {
    font-weight: var(--fw-l);
    color :#E6E6E6
}
    /* Main > mainReason 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainReason::after {
            height: 71%;
        }
        .mainReason .mainContent .icon {
            width: 60px;
            margin-bottom: var(--space-20)
        }
    }
    @media all and (max-width:1000px) {
        .mainReason::after {
            height: 79%;
        }
        .mainReason .mainTitle {
            margin-bottom: var(--space-40);
        }
        .mainReason .mainContent .mainSubtxt2 {
            margin: var(--space-10) 0 var(--space-20);
        }
        .mainReason .mainContent ul {
            flex-wrap: wrap;
        }
        .mainReason .mainContent ul li {
            width: 45%
        }
        .mainReason .mainContent ul li p {
            width: 80%;
            margin: auto
        }
        .mainReason .mainContent ul li:nth-child(-n+2) {
            margin-bottom: var(--space-40)
        }
        .mainReason .mainContent .icon {
            width: 40px;
            margin-bottom: var(--space-20)
        }
        .mainReason .mainContent {
            margin-top: var(--space-70)
        }
    }
    @media all and (max-width:640px) {
        .mainReason::after {
            height: 83%;
        }
        .mainReason .mainContent ul li {
            width: 48%
        }
        .mainReason .mainContent ul li p {
            width: 100%;
        }
        .mainReason .mainContent {
            margin-top: var(--space-40);
        }
        .mainReason .mainContent .mainSubtxt2 {
            margin: var(--space-5) 0 var(--space-10);
        }
    }
    @media all and (max-width:375px) {
        .mainReason::after {
            height: 83.5%;
        }
    }

/* Main > mainService */
.mainService {
    background:center / cover url("/public/images/main-service-bg.jpg") repeat;
}
.mainService .mainTitle {
    font-weight: var(--fw-eb);
    margin-bottom: var(--space-10)
}
.mainService .mainContent ul {
    display: inline-grid;
    column-gap: 0px;
    grid-template-columns: repeat(3, 1fr)
}
.mainService .mainContent li {
    padding: 0 var(--space-70);
}
.mainService .mainContent li a {
    position: relative;
    display: block;
}
.mainService .mainContent li:nth-child(1),
.mainService .mainContent li:nth-child(3),
.mainService .mainContent li:nth-child(4),
.mainService .mainContent li:nth-child(6) {
    padding-top: var(--space-115)
}
.mainService .mainContent li:nth-child(3),
.mainService .mainContent li:nth-child(6) {
    padding-top: var(--space-50)
}
.mainService .mainContent li strong {
    position: absolute;
    color: var(--color-white);
    left: var(--space-30);
    z-index: 2;
    bottom: var(--space-30);
}
.mainService .mainContent li .imgArea {
    display: block;
    position: relative;
}
.mainService .mainContent li .imgArea img {
    width:100%
}
.mainService .mainContent li .imgArea::before {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.45) 100%);
    transition: all 0.5s linear 0s;
}
.mainService .mainContent li .imgArea:hover::before {
    background: linear-gradient(180deg, rgba(217,0,96,0.75) 0%, rgba(64,18,116,0.75) 55%, rgba(26,104,179,0.75) 100%);
}
.mainService .mainContent li a:hover {
    box-shadow: 5px 6px 19px rgba(0, 0, 0, .3);
}
    /* Main > mainService 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainService .mainContent ul {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .mainService .mainContent li {
            padding: 0 var(--space-30);
        }
        .mainService .mainContent li:nth-child(1),
        .mainService .mainContent li:nth-child(2),
        .mainService .mainContent li:nth-child(3),
        .mainService .mainContent li:nth-child(4),
        .mainService .mainContent li:nth-child(5),
        .mainService .mainContent li:nth-child(6) {
            padding-top: var(--space-80)
        }
    }
    @media all and (max-width:1000px) {
        .mainService .mainContent li:nth-child(1),
        .mainService .mainContent li:nth-child(2),
        .mainService .mainContent li:nth-child(3),
        .mainService .mainContent li:nth-child(4),
        .mainService .mainContent li:nth-child(5),
        .mainService .mainContent li:nth-child(6) {
            padding-top: var(--space-60)
        }
        .mainService .mainContent li {
            padding: 0 var(--space-20);
        }
    }
    @media all and (max-width:640px) {
        .mainService .mainContent ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .mainService .mainContent li {
            width: 48%;
            padding:0
        }
        .mainService .mainContent li strong {
            left: var(--space-15);
            bottom: var(--space-15)
        }
        .mainService .mainSubtxt2 {
            font-size: var(--font-20)
        }
        .mainService .mainContent li:nth-child(1),
        .mainService .mainContent li:nth-child(2) {
            padding-top: var(--space-40);
        }
        .mainService .mainContent li:nth-child(3),
        .mainService .mainContent li:nth-child(4),
        .mainService .mainContent li:nth-child(5),
        .mainService .mainContent li:nth-child(6) {
            padding-top: var(--space-20);
        }
    }

/* Main > mainWork */
.mainWork .mtitleArea {
    position: relative;
    margin-bottom: var(--space-140);
}
.mainWork .object {
    position: absolute;
    right: -19%;
    top: 0;
    /* width: 60%; */
    max-width:1192px
}
.mainWork .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mainWork .inner .imgArea {
    width: 55%
}
.mainWork .inner .imgArea img {
    width: 100%
}
.mainWork .inner .txtArea {
    width: 40%
}
.mainWork .mainContent pre {
    color: var(--color-gray);
    margin: var(--space-20) 0 var(--space-50)
}
.mainWork .btn-type1 {
    max-width: 275px;
    justify-content: space-between;
}
    /* Main > mainReason 미디어쿼리 */
    @media all and (max-width:1200px) {
        .mainWork .mtitleArea {
            margin-bottom: var(--space-80)
        }
        .mainWork .object {
            display: none;
        }
    }
    @media all and (max-width:1000px) {
        .mainWork .mainTitle:last-of-type {
            font-size: var(--font-40)
        }
        .mainWork .mtitleArea {
            margin-bottom: var(--space-60)
        }
        .mainWork .btn-type1 {
            width: 230px
        }
        .mainWork .mainContent pre {
            margin: var(--space-10) 0 var(--space-30);
        }
    }
    @media all and (max-width:640px) {
        .mainWork .inner {
            flex-wrap: wrap;
        }
        .mainWork .mtitleArea {
            margin-bottom: var(--space-40);
        }
        .mainWork .inner .imgArea,
        .mainWork .inner .txtArea {
            width:100%
        }
        .mainWork .mainContent .mainTitle:last-of-type {
            font-size: var(--font-30);
        }
        .mainWork .inner .txtArea {
            margin-top: var(--space-20)
        }
        .mainWork .btn-type1 {
            width: 200px;
        }
    }

/* Main > mainLocation */
.mainLocation {
    background:center / cover url("/public/images/main-location-bg.jpg") repeat;
    color: var(--color-white)
}
.mainLocation .mainSubtxt2 {
    color: #CFCFD0
}
.mainLocation .mainSubtxt2 strong {
    color: var(--color-white);
}
.mainLocation .mainContent {
    margin-top: var(--space-60)
}
.mainLocation .mainContent .inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.mainLocation .mainContent .box {
    width: 48%
}
.mainLocation .mapArea {
    height: 380px;
    overflow: hidden;
    margin-top: var(--space-20)
}
    /* Main > mainLocation 미디어쿼리 */
    @media all and (max-width:1000px) {
        .mainLocation .mapArea {
            height: 300px;
            margin-top: var(--space-10);
        }
    }
    @media all and (max-width:640px) {
        .mainLocation .mainContent .box {
            width: 100%
        }
        .mainLocation .mapArea {
            height: 200px;
        }
        .mainLocation .mainContent {
            margin-top: var(--space-40);
        }
        .mainLocation .mainContent .box:first-of-type {
            margin-bottom: var(--space-30)
        }
    }