@charset 'utf-8';
@import 'base.css';

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn         { from { opacity: 0; } to { opacity: 1; } }

.shadow{ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); transition: 0.6s; }

/* LAYOUT */
div.inner { width:1128px; margin:0 auto; }

#header::before { }
#header { height:100px; position: sticky; background:#ffffff; top:0; padding-top:15px; z-index:99;}
#header div.inner { display: flex; height:100%; justify-content: space-between; align-items: center; }
#header h1 { }
#header h1 a { display:block; }
#header h1 a img { display:block; }

#header div#gnb { display: flex; align-items: center; }
#header div#gnb div.navi { display: flex; align-items: center; }
#header div#gnb div.switch { display: none; }
#header div#gnb a { padding:0 28px; font-size:14px; color:#79747E; }
#header div#gnb a.selected { color:#0078FE; }
#header div#gnb a:hover { color:#0078FE; transition: color 0.5s; }

#footer { margin-top: 60px; width:auto; height:300px; background: #f2f6fa; }
#footer div.inner { display: flex; height:100%; align-items: center; justify-content: space-between; }
#footer div.inner div.info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color:#a2a6aa; font-size: 13px; }
#footer div.inner div.info p.text { line-height: 20px; margin-top:20px; }
#footer div.inner div.info p.copy { margin-top:10px; }
#footer div.inner div.link { display: flex; flex-direction: column; align-items: flex-end; color:#a2a6aa; line-height: 12px; }
#footer div.inner div.link a:hover { text-decoration: underline; text-underline-position: under; }
#footer div.inner div.link div.icon { display: flex; flex-direction: row; margin-top: 8px; }
#footer div.inner div.link div.icon img { width: 24px; }
#footer div.inner div.link div.icon a { margin-right: 8px; }
#footer div.inner div.link div.icon a:last-child { margin: 0px; }


#contents { padding:100px 0; }

/* MAIN */
#contents.main { padding-top:0; }
#contents.main div.visual { height:600px; margin-bottom:60px; display: flex; align-items: center; }
#contents.main div.visual div.image { position: absolute; right:0; }
#contents.main div.visual div.info { display: flex; flex-direction: column; }
#contents.main div.visual div.info span.slogan { font-family:'Poppins', sans-serif; font-weight: 700; font-size:20px; color:#AEA9B4; margin-bottom:12px; }
#contents.main div.visual div.info span.desc { font-size:32px; color:#1D1A22; margin-bottom:16px; letter-spacing: -0.02em;}
#contents.main div.visual div.info span.desc strong { font-weight:800; }
#contents.main div.visual div.info a.shortcut { border:1px solid #0078FE; border-radius: 4px; width:190px; height:40px; color:#0078FE; font-size:18px; font-weight:500; box-shadow:2px 3px 5px #0078fe20; display: flex; align-items: center; justify-content: center; transition: 0.3s;}
#contents.main div.visual div.info a.shortcut:hover { background-color: #0078FE; color:#ffffff; box-shadow:1px 1px 1px #00000030;}

#contents.main div.reason div.title span { display: block; margin-bottom:16px; }
#contents.main div.reason div.title span.title { font-family:'Poppins', sans-serif; font-weight: 700; font-size:20px; color:#AEA9B4; }
#contents.main div.reason div.title span.desc { font-size:32px; color:#212121; letter-spacing: -0.02em; }
#contents.main div.reason div.content div.sector { margin-bottom:16px; }
#contents.main div.reason div.content div.sector span { display: block;  }
#contents.main div.reason div.content div.sector span.keyword { font-size:22px; font-weight: 700; color:#0078FE; margin-bottom:8px; }
#contents.main div.reason div.content div.sector span.desc { font-size:18px; color:#757575; letter-spacing: -0.02em;}


/* COMMON */
#contents div.description { min-height:200px; padding:40px 45px; background: #F0F7FF; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size:24px; color:#313033; margin-bottom:180px; border-radius: 20px; }
#contents div.description span { text-align: center; letter-spacing: -0.03em; }
#contents div.description span.point { color:#0078FE; }
#contents div.description a.shortcut { display: flex; align-items: center; justify-content: center; height:36px; padding:0 28px; margin-top:12px; border-radius: 4px; background-color: #0078FE; color:#FFF; font-size:20px; font-weight: 400; box-shadow: 2px 2px 3px #0078fe20; transition: 0.3s;}
#contents div.description a.shortcut:hover { background-color: #0569ec; box-shadow: 1px 1px 1px #00000030;}
#contents div.description span.contact { display: flex; align-items: center; }
#contents div.description span.contact a { margin:0 9px; display: flex; align-items: center; }
#contents div.description span.contact a::before { content:''; width:1em; height:1em; background:no-repeat center; margin-right:10px; }
#contents div.description span.contact a.phone::before { background-image:url('../images/contents/ico.phone.svg'); }
#contents div.description span.contact a.email::before { background-image:url('../images/contents/ico.email.svg'); }


/* TECHNOLOGY */
#contents.technology div.section div.sector { margin-bottom:120px; border-top:1px solid #AEAAAE; }
#contents.technology div.section div.sector:last-child { margin-bottom:0; }
#contents.technology div.section div.sector div.info { padding:10px; margin:2px 0; }
#contents.technology div.section div.sector div.info span { display: block; }
#contents.technology div.section div.sector div.info span.title { font-weight: 700; font-size:24px; margin-bottom:8px; color:#0078FE; }
#contents.technology div.section div.sector div.info span.desc { font-weight: 500; font-size:18px; color:#616161; letter-spacing: -0.02em; line-height:28px; }
#contents.technology div.section div.sector div.info span.desc sup { font-size: 50%; }
#contents.technology div.section div.sector div.info span.patent { font-weight:400; font-size:14px; line-height:20px; margin-top: 8px;}
#contents.technology div.section div.sector div.architecture { min-height:280px; border-radius: 2px; padding:32px; border:1px solid #EEE; background: #F5F5F5; overflow-x:hidden;}
#contents.technology div.section div.sector div.architecture div.content { width:1064px; display: flex; justify-content: space-between; align-items: center; }
#contents.technology div.section div.sector div.architecture div.content span.flow { display:block; width:24px; height:24px; border:1px solid #616161; border-radius: 100%; background: #FFF; overflow: hidden; text-indent: -1000em; position:relative; }
#contents.technology div.section div.sector div.architecture div.content span.flow::before { content:''; display: block; position: absolute; width:14px; height:0; top:50%; left:50%; transform:translate(-50%, -50%); border-top:1px solid #616161; }
#contents.technology div.section div.sector div.architecture div.content span.flow.plus::after { content:''; display: block; position: absolute; height:14px; width:0; top:50%; left:50%; transform:translate(-50%, -50%); border-left:1px solid #616161; }
#contents.technology div.section div.sector div.architecture div.content span.flow.easy::after { content:''; display: block; position: absolute; width:6px; height:6px; top:50%; left:50%; transform:translate(-30%, -50%) rotate(-55deg) skewY(20deg); border:1px solid #616161; border-left:0; border-top:0; }
#contents.technology div.section div.sector.d2v div.architecture div.content div { width:500px; }
#contents.technology div.section div.sector.d2v div.architecture div.content div span.title { font-weight:400; font-size:16px; letter-spacing: -0.01em; margin-bottom:12px; display:block; }
#contents.technology div.section div.sector.d2v div.architecture div.content div span.title strong { font-weight:600; font-size:14px; margin-right:12px; }
#contents.technology div.section div.sector.d2v div.architecture div.content::after { content:''; position:absolute; height:100%; width:0; left:50%; top:0; border-left:1px solid #BDBDBD; }


/* SERVICE */
#contents.service div.sector { display: flex; justify-content: space-between; margin-bottom:120px; }
#contents.service div.sector:last-child { margin-bottom:0; }
#contents.service div.sector div.initial { width:calc(100% - 840px - 24px); border-top:1px solid #AEAAAE; padding-top:0px; font-family:'Poppins', sans-serif; font-weight: 700; font-size:40px; line-height:30px; font-style: italic; }
#contents.service div.sector div.initial span.qidp { color:#ffa726; }
#contents.service div.sector div.initial span.qivp { color:#9ccc65; }
#contents.service div.sector div.initial span.qiip { color:#5c6bc0; }
#contents.service div.sector div.initial span.qis { color:#0078fe; }
#contents.service div.sector div.info { width:840px; border-top:1px solid #AEAAAE; padding-top:12px; }
#contents.service div.sector div.info > span { display: block; }
#contents.service div.sector div.info span.title { margin-bottom:18px; }
#contents.service div.sector div.info span.title span { line-height:28px; }
#contents.service div.sector div.info span.title span.kor { display: block; font-size:24px; color:#1C1B1F; }
#contents.service div.sector div.info span.title span.eng { display: block; font-size:16px; font-family:'Poppins', sans-serif; font-weight:500; color:#938F99; }
#contents.service div.sector div.info span.title span.eng span.point { color:#0078FE; font-weight:200;}
#contents.service div.sector div.info span.desc { font-size:18px; color:#616161; margin-bottom:30px; letter-spacing: -0.03em; }
#contents.service div.sector div.info span.desc p { margin-bottom: 2px; }
#contents.service div.sector div.info span.screen img { display: block; max-width:100%; max-height:100%; }


/* REFERENCE */
#contents.clients div.sector { display: flex; margin-bottom:120px; justify-content: flex-end; align-items: center; }
#contents.clients div.sector:last-child { margin-bottom:0; }
#contents.clients div.sector:nth-child(odd) { flex-direction: row-reverse; }
#contents.clients div.sector div.image { margin-left:70px; }
#contents.clients div.sector div.image img { width:576px; border-radius:10px; }
#contents.clients div.sector:nth-child(odd) div.image { margin-left:0; margin-right:70px;  }
#contents.clients div.sector div.info span { display: block; text-align:right; }
#contents.clients div.sector:nth-child(odd) div.info span { text-align:left; }
#contents.clients div.sector div.info span.initial { font-family:'Poppins', sans-serif; font-size:20px; font-style: italic; color:#BDBDBD; }
#contents.clients div.sector div.info span.title { font-size:34px; letter-spacing: -0.03em; color:#212121; }
#contents.clients div.sector div.info span.desc { font-size:24px; letter-spacing: -0.01em; color:#616161; }


/* TEAM */
#contents.team div.section { border-top:1px solid #AEAAAE; margin-bottom:80px; }
#contents.team div.section div.title { font-family:'Poppins', sans-serif; font-size:20px; line-height:50px; margin-bottom:16px; color:#322F37; padding:0 10px; }
#contents.team div.section div.sector { display: flex; flex-wrap:wrap; }
#contents.team div.section div.sector:nth-child(4n) { padding-bottom:0; }
#contents.team div.section div.sector div.item { width:160px; height:280px; margin:20px 30px 0px; }
#contents.team div.section div.sector div.item:nth-child(5n) { margin-right:0; }
#contents.team div.section div.sector div.item span { display:block; text-align:center; font-size:14px; color:#79747E; }
#contents.team div.section div.sector div.item span.profile { display:flex; align-items:center; justify-content:center; height:160px; border-radius:160px; overflow:hidden; margin-bottom:16px; background:#F5F5F5; transition:0.2s; }
#contents.team div.section div.sector div.item span.profile:hover { filter:sepia(0.1) hue-rotate(180deg) saturate(1.5); }
#contents.team div.section div.sector div.item span.name { color:#1C1B1F; font-size:16px; line-height:20px; margin-bottom:6px; }
#contents.team div.section div.sector div.item span.part { color:#0078FE; font-weight:400;}


/* HISTORY */
#contents.history div.sector { display: flex; justify-content: space-between; margin-bottom:120px; }
#contents.history div.sector:last-child { margin-bottom:0; }
#contents.history div.sector div.year { width:calc(100% - 840px - 24px); border-top:1px solid #AEAAAE; padding:12px 10px; font-size:24px; line-height: 30px; letter-spacing: -0.02em; }
#contents.history div.sector div.list { width:840px; border-top:1px solid #AEAAAE; }
#contents.history div.sector div.list div.item { padding:16px 10px; }
#contents.history div.sector div.list div.item span { display: inline-block; line-height:24px; font-weight:400; font-size:20px; letter-spacing: -0.02em; color:#212121; }
#contents.history div.sector div.list div.item sup { font-size: 12px; }
#contents.history div.sector div.list div.item span.comment { display: inline-block; line-height:24px; font-weight:200; font-size:14px; letter-spacing: -0.02em; color:#616161; margin-top: 2px; }
#contents.history div.sector div.list div.item span.category { padding:0 6px; margin-right:6px; border-radius: 4px; font-size:16px; letter-spacing: -0.02em; }
#contents.history div.sector div.list div.item span.category.startup { background: #FFEBEE; color:#E35141; }
#contents.history div.sector div.list div.item span.category.core { background: #E3F2FD; color:#1E88E5; }
#contents.history div.sector div.list div.item span.category.production { background: #E8F5E9; color:#43A047; }
#contents.history div.sector div.list div.item span.category.awards { background: #FFF3E0; color:#FF9800; }
#contents.history div.sector div.list div.item span.category.mou { background: #EDE7F6; color:#5E35B1; }
#contents.history div.sector div.list div.item span.category.news { background: #E8EAF6; color:#3949AB; }
#contents.history div.sector div.list div.item.start span { font-weight:600; color:#0078fe; }


/* CONTACT */
#contents.contact div.sector { margin-bottom:32px; }
#contents.contact div.sector span { display: block; text-align: center; letter-spacing: -0.02em; padding:2px 0; }
#contents.contact div.sector span.title { color:#0078FE; font-size:18px; }
#contents.contact div.sector span.addr { font-size:22px; }
#contents.contact div.sector span.desc { font-weight:400; font-size:18px; }
#contents.contact div.map img { display: block; width:70%; margin:0 auto; border-radius:10px; transition:0.4s; }
/* #contents.contact div.map img:hover { width:810px; box-shadow: 24px 24px 10px #00000016;} */


/* ALERT */
div.d93Alert { position: fixed; bottom:100px; left:50%; transform: translateX(-50%); text-align: center; padding:10px 50px; font-weight:400; font-size:12px; background:#00000066; color:#FFF; border-radius: 4px; -webkit-animation: fadeIn 0.2s; animation: fadeIn 0.2s; }
div.d93Alert.warning { background: #FF000033; }






@media (max-width: 1160px) {
    div.inner { width: auto; padding:0 40px; margin: 0; }
    #contents div.description { align-items: flex-start; font-size:20px; padding:20px 25px; }
    #contents div.description span { text-align: left; }
    
}
    

@media (max-width: 768px) {
    div.inner { width:auto; min-width:580px; padding:0 40px; margin:0; }

    #header { height:70px; padding-top:0; background: rgba(255,255,255,0.96); }
    #header div#gnb div.navi { display: flex; align-items: center; position:fixed; top:70px; right:-100%; height:calc(100% - 70px); flex-direction: column; background:rgba(255, 255, 255, 0.96); overflow-y:auto; transition: right 0.3s; }
    #header div#gnb div.navi a { line-height:2.5em; font-size:1.2em; }
    #header div#gnb div.switch { display: block; }
    #header div#gnb div.switch button { background: none; width:2em; height:2em; overflow: hidden; display: block; position: relative; }
    #header div#gnb div.switch button::before { content:''; display: block; position: absolute; top:3px; left:0; width:100%; height:0; border-top:2px solid #0078FE; transition: transform 0.3s;}
    #header div#gnb div.switch button::after { content:''; display: block; position: absolute; bottom:3px; left:0; width:100%; height:0; border-bottom:2px solid #0078FE; transition: transform 0.3s;}
    #header div#gnb div.switch button span { display: block; overflow: hidden; text-indent: -1000em; position:absolute; top:50%; right:0; width:100%; height:0; margin-top:-1px; border-top:2px solid #0078FE; transition: right 0.3s;}

    #header div#gnb.active div.navi { right:0; transition: right 0.3s; }
    #header div#gnb.active div.switch button::before { transform:rotate(45deg); top:45%; transition: transform 0.3s;}
    #header div#gnb.active div.switch button::after { transform:rotate(-45deg); bottom:45%; transition: transform 0.3s;}
    #header div#gnb.active div.switch button span { right: -100%; transition: right 0.3s;}

    #footer div.inner { flex-direction: row; justify-content: space-between; align-items: center; padding: 40px; }


    /* COMMON */
    #contents div.description { font-size:18px; padding:20px 25px; }
    #contents div.description span br { display: none; }
    #contents div.description span.contact { flex-direction: column; }


    /* MAIN */
    #contents.main div.visual { background-size: 80%; background-position: right top; margin:50px 0 100px; height:auto; flex-direction: column; align-items: normal; }
    #contents.main div.visual div.image { position: relative; right:auto; width:540px; text-align:center; margin: 0 0 40px;}
    #contents.main div.visual div.image img { max-width:80%; }
    #contents.main div.visual div.info span.desc { font-size:24px; }
    #contents.main div.visual div.info span.desc strong { display: block; }
    #contents.main div.visual div.info span.desc br { display: none; }
    #contents.main div.reason div.title span.desc { font-size:24px; }
    #contents.main div.reason div.title span.desc br { display: none; }


    /* TECHNOLOGY */
    #contents.technology div.section div.sector div.architecture { overflow-x:scroll; -ms-overflow-style:none; scrollbar-width: none; }
    #contents.technology div.section div.sector div.architecture::-webkit-scrollbar { display: none; }


    /* SERVICE */
    #contents.service div.sector { display: block; }
    #contents.service div.sector div.initial { width:auto; border-top:0; }
    #contents.service div.sector div.info { width:auto; }


    /* CLIENTS */
    #contents.clients div.sector { display: block; max-width:576px; margin:0 auto 160px; }
    #contents.clients div.sector div.image { margin:0; }
    #contents.clients div.sector:nth-child(odd) div.image { margin:0; }
    #contents.clients div.sector div.image img { max-width:100%; }
    #contents.clients div.sector div.info span.desc { font-size:22px; letter-spacing: -0.03em; }
    #contents.clients div.sector div.info span.desc br { display: none; }


    /* TEAM */
    #contents.team div.section div.sector { justify-content: space-around; }
    #contents.team div.section div.sector div.item { margin:0; }


    /* HISTORY */
    #contents.history div.sector { display:block; }
    #contents.history div.sector div.year { width:auto; border-top:0; }
    #contents.history div.sector div.list { width:auto; }
}

@media (max-width: 450px) {
    div.inner { width:auto; min-width:360px; padding:0px 24px; }
    #footer {height: auto;}
    #footer div.inner { display: flex; flex-direction: column; align-items: flex-start; padding: 60px 24px; }
    #footer div.inner div.info img { width: 120px; }
    #footer div.inner div.info p { font-size: 11px; line-height: 10px; }
    #footer div.inner div.link { display: flex; align-items: flex-start; font-size: 11px; line-height: 10px;  margin-top: 40px; }
    
    #contents { padding:60px 0; }
    
    /* MAIN */
    #contents.main div.visual div.image { width: 360px; margin-bottom: 60px; }
    #contents.main div.visual div.info span.desc { font-size:18px; }
    #contents.main div.visual div.info a.shortcut { border:1px solid #0078FE; border-radius: 4px; color:#0078FE; font-size:16px; font-weight:500; padding: 12px; transition: 0.3s;}
    #contents.main div.visual div.info a.shortcut:active { background-color: #0078FE; color:#ffffff; box-shadow:1px 1px 1px #00000030;}
    #contents.main div.reason div.title span.desc { font-size:18px; }
    #contents.main div.reason div.content div.sector span.keyword { font-size:16px; font-weight: 800; }
    #contents.main div.reason div.content div.sector span.desc { font-size:14px; line-height: 1.5 }


    /* COMMON */
    #contents div.description { font-size:18px; padding:20px 24px; margin: 0 auto 60px;}
    #contents div.inner div.description span { text-align: left; }
    

    /* TECHNOLOGY */
    #contents.technology div.section div.sector { margin-bottom:60px; }
    #contents.technology div.tab a { height:80px; font-size:16px; border-radius: 10px; }
    #contents.technology div.inner div.section div.sector div.info span.title { font-size:18px; line-height: 24px; }
    #contents.technology div.inner div.section div.sector div.info span.desc { font-size:16px; line-height: 24px; }
    #contents.technology div.sections div.sector { justify-content: normal; flex-direction: column-reverse; }
    #contents.technology div.sections div.sector div.architecture { width:100%; }
}