@charset "utf-8";

/* .sub_cont */
.sub_cont {
    padding:120px 0;
}

.sub_cont .title {
    font-weight:bold;
    font-size:14px;
    color:#EEBD41;
    margin-bottom:10px;
}

.sub_cont h4 {
    display:inline-block;
    padding:15px 40px;
    border:3px solid #cfa67a;
    border-radius:40px;
    font-size:20px;
    font-weight:bold;
    color:#222222;
    margin-bottom:30px;
}

.sub_cont h4 span {
    color:#cfa67a;
}

.sub_cont .text {
    color:#777777;
    font-size:14px;
    word-break:keep-all;
}

/* #main */
#main {
    text-align:center;
    padding:250px 0 220px;
}

#main h3 img {
    width:100%;
    max-width:1000px;
}

#main p {
    color:#606060;
    font-size:18px;
    margin:50px 0 15px;
    word-break:keep-all;
}

#main ul {
    width:100%;
    max-width:423px;
    margin:0 auto 80px;
}

#main li {
    float:left;
    padding:5px 10px;
    border-radius:5px;
    background-color:#cfa67a;
    color:#ffffff;
    margin-right:10px;
}

#main li:last-child {
    margin-right:0;
}

#main .btn_contact {
    display:inline-block;
    width:200px;
    height:50px;
    line-height:44px;
    border-radius:30px;
    border:3px solid #cfa67a;
    color:#cfa67a;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#main .btn_contact:hover {
    background-color:#cfa67a;
    color:#ffffff;
}

/* #about */
#about {
    width:100%;
    max-width:2000px;
    margin:0 auto;
}

#about .clear .bg {
    width:50%;
    max-width:1920px;
    height:400px;
}

#about .clear .cont dt {
    font-family:sans-serif;
    font-weight:bold;
    font-size:120px;
    color:#141414;
}

#about .clear .cont dd {
    word-break:keep-all;
    font-size:18px;
    color:#141414;
    font-weight:bold;
}

#about .fir .cont {
    float:left;
    width:50%;
    padding:10px 100px;
}

#about .fir .bg {
    float:right;
    background:url(../images/about/about01.png) no-repeat center center;
    background-size:cover;
}

#about .sec {
    padding-top:120px;
}

#about .sec .cont {
    float:right;
    width:50%;
    padding:55px 100px;
}

#about .sec .bg {
    float:left;
    background:url(../images/about/about02.png) no-repeat center center;
    background-size:cover;
}

/* #interimAd */
#interimAd {
    padding:80px 0;
    background-color:#cfa67a;
}

#interimAd p {
    font-size:20px;
    line-height:70px;
    color:#010101;
}

#interimAd p strong {
    font-weight:bold;
}

#interimAd .col-lg-4 {
    text-align:right;
}

#interimAd .col-lg-4 a {
    display:inline-block;
    width:100%;
    max-width:200px;
    height:70px;
    line-height:70px;
    text-align:center;
    background-color:#010101;
    color:#cfa67a;
    font-weight:bold;
    border-radius:40px;
    font-size:14px;
}

/* #word */
#word {
    width:100%;
    padding:0;
    background-color:#010101;
}

#word h4 {
    color:#ffffff;
}

#word .bg {
    float:left;
    width:50%;
    height:700px;
    background:url(../images/word/word.png) no-repeat 50% 50%;
    background-size:cover;
}

#word .cont {
    float:left;
    width:50%;
    box-sizing:border-box;
    padding:90px 50px;
}

#word .cont p {
    word-break:keep-all;
    color:#ffffff;
    font-size:16px;
    margin-top:30px;
}

/* #service */
#service .col-12 {
    text-align:center;
    margin-bottom:30px;
}

#service .service .text {
    color:#111111;
    font-weight:bold;
}

#service .service .col-lg-6 {
    margin-top:50px;
    display:grid;
}

#service .service .col-lg-6 .box {
    box-shadow:10px 10px 20px 3px rgba(0,0,0,0.1);
    transition: transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1), box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
    border-radius:5px;
    padding:50px 30px;
    background-color:#ffffff;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .service .col-lg-6 .box:hover {
    transform: translateY(-10px);
    background-color:#cfa67a;
}

#service .service .col-lg-6 .box .left {
    float:left;
    width:40%;
}

#service .service .col-lg-6 .box .right {
    float:left;
    width:60%;
}

#service .service .col-lg-6 .box h5 {
    font-weight:bold;
    font-size:25px;
    color:#111111;
    text-align:center;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .service .col-lg-6:hover .box h5 {
    color:#ffffff;
}

#service .service .col-lg-6 .box .left span {
    display:block;
    width:100px;
    height:100px;
    border-radius:50%;
    margin:20px auto 30px;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .service .col-lg-6 .box .left .icon_development {
    background:url(../images/service/service01.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6:hover .box .left .icon_development {
    background:url(../images/service/service01_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6 .box .left .icon_marketing {
    background:url(../images/service/service02.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6:hover .box .left .icon_marketing {
    background:url(../images/service/service02_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6 .box .left .icon_listing {
    background:url(../images/service/service03.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6:hover .box .left .icon_listing {
    background:url(../images/service/service03_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6 .box .left .icon_etc {
    background:url(../images/service/service04.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6:hover .box .left .icon_etc {
    background:url(../images/service/service04_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#service .service .col-lg-6 .box .right {
    color:#111111;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .service .col-lg-6:hover .box .right {
    color:#ffffff;
}

#service .service .col-lg-6 .box .right li {
    margin-bottom:5px;
    list-style:disc;
    margin-left:30px;
    word-break:keep-all;
}

#service .service .col-lg-6 .box .right li:last-child {
    margin-bottom:0;
}

#service .service .col-lg-6:nth-child(2) .box .right ul {
    margin:30px 0;
}

#service .service .col-lg-6:nth-child(4) .box .right p {
    margin:30px 0;
    word-break:keep-all;
}

#service .service .col-lg-6:nth-child(5) .box .right ul {
    margin:50px 0;
}

#service .exchange .col-lg-3 {
    margin-top:30px;
}

#service .exchange .col-lg-3 .thumb {
    overflow:hidden;
    width:100%;
    border-radius:5px;
    box-shadow:0 0 10px 3px rgba(0,0,0,0.1);
    transition: transform 0.65s cubic-bezier(0.05, 0.2, 0.1, 1), box-shadow 0.65s cubic-bezier(0.05, 0.2, 0.1, 1);
    filter:grayscale(100%);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .exchange .col-lg-3:hover .thumb {
    transform: translateY(-5px);
    filter:grayscale(0);
}

#service .exchange .col-lg-3 .thumb img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#service .exchange .col-lg-3:hover .thumb img {
    -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);   
    -o-transform:scale(1.05);
    transform:scale(1.05);
}


/* #contact */
#contact {
    background-color:#f3f3f3;
    padding:50px 0 0;
}

#contact .col-12 {
    text-align:center;
}

#contact .col-12 img {
    width:100%;
    max-width:180px;
}

#contact .col-lg-3 {
    margin-top:30px;
    text-align:center;
    font-weight:bold;
    font-size:12px;
    line-height:30px;
}

#contact .col-lg-3 .btn_telegram:hover {
    color:#239BD6;
}

#contact .col-lg-3 .btn_telegram span {
    display:inline-block;
    width:30px;
    height:30px;
    border-radius:50%;
    margin-left:8px;
    margin-bottom:5px;
    vertical-align:middle;
    background:url(../images/sns/telegram.png) no-repeat 50% 50%;
    background-size:100%;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#contact .col-lg-3 .btn_telegram:hover span {
    background:url(../images/sns/telegram_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#contact .col-lg-3 .btn_kakao:hover {
    color:#3B1E1E;
}

#contact .col-lg-3 .btn_kakao span {
    display:inline-block;
    width:30px;
    height:30px;
    border-radius:50%;
    margin-left:8px;
    margin-bottom:5px;
    vertical-align:middle;
    background:url(../images/sns/kakao.png) no-repeat 50% 50%;
    background-size:100%;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#contact .col-lg-3 .btn_kakao:hover span {
    background:url(../images/sns/kakao_hover.png) no-repeat 50% 50%;
    background-size:100%;
}

#contact .col-lg-3 .btn_mail {
    text-decoration:underline;
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -ms-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
}

#contact .col-lg-3 .btn_mail:hover {
    color:#cfa67a;
}