@import url(font.css);

body {width:100%; height:auto; margin:0; padding:0; font-family:'NanumSquare'; font-size: var(--basic); font-weight:200; background-color: var(--sc);}

ul {margin:0; padding:0; list-style:none;}
p {margin:0; padding:0;}
a {text-decoration:none; color: var(--mc);}
a:hover, a:active, a:focus {text-decoration:none;}

:root {
    --mc: #3b3b3b;
    --sc: #fafafa;
    --script: 12px;
    --basic: 14px;
    --subtit: 20px;
    --sidepd: 50px;
}

#wrap {display: block; width: 100%; height: auto; padding-top: 85px;}
#wrap > section {position: relative; display: block; width: 100%; padding: 50px var(--sidepd); border-bottom: 1px solid var(--mc); box-sizing: border-box; overflow: hidden;}

.inner {width: 100%; max-width: 1280px; margin: auto;}

header {position: fixed; top: 0; display: inline-block; width: 100%; height: auto; padding: 25px var(--sidepd); background: var(--sc); border-bottom: 1px solid var(--mc); box-sizing: border-box; overflow: hidden; z-index: 10;}
header .ci {float: left; display: inline-block;}
header .menu {float: right; display: inline-block; overflow: hidden;}
header .menu li {float: left; display: inline-block; padding-top: 8px; margin-right: 50px;}
header .menu li:last-child {margin-right: 0;}

#abt {overflow: visible !important;}
#abt .txt li {margin-bottom: 8px;}
#abt .txt li:last-child {margin-bottom: 0;}
#abt .txt .key {margin-top: 25px;}
#abt .arena {position: absolute; bottom: -45px; right: 50px; width: auto; overflow: hidden;}
#abt .arena li {float: left; display: inline-block; width: 90px; height: 90px; margin: 0 15px 0 0; background-repeat: no-repeat; background-position: left top; background-size: contain;}
#abt .arena li:last-child {margin: 0;}
#abt .arena .brand {background-image: url(../img/arena_01.svg);}
#abt .arena .uiux {background-image: url(../img/arena_02.svg);}
#abt .arena .web {background-image: url(../img/arena_03.svg);}
#abt .arena .print {background-image: url(../img/arena_04.svg);}
#abt .arena .video {background-image: url(../img/arena_05.svg);}

#mean {padding: 250px var(--sidepd) !important; text-align: center;}
#mean img {width: 100%; max-width: 695px; margin: 0;}

.tit {float: left; display: inline-block; width: 200px; font-size: var(--basic); font-weight: 700; margin: 0;}
.con {float: left; display: inline-block; width: calc(100% - 200px); margin: 0;}
.con > li {margin-bottom: 50px; overflow: hidden;}
.con > li:last-child {margin-bottom: 0;}
.con .year {float: left; display: inline-block; width: 75px; margin: 0;}
.con .year span {display: inline-block; padding: 0; border-radius: 0; background: var(--sc); color: var(--mc);}
.con .list {display: inline-block; margin-left: 0;}
.con .list li {margin-bottom: 8px;}

#act .con > li {margin-bottom: 10px;}
#act .con > li:last-child {margin-bottom: 0px;}

#work {background-image: url(../img/bg_deco.svg); background-position: right center; background-repeat: no-repeat; background-attachment:fixed;}

#link .con > li {margin-bottom: 10px;}
#link .con > li:last-child {margin-bottom: 0px;}
#link .con li {padding: 0 0 0 25px; background-repeat: no-repeat; background-size: 16px 16px; background-position: left center;}
#link .con li.mail {background-image: url(../img/ico_mail.svg);}
#link .con li.insta {background-image: url(../img/ico_insta.svg);}
#link .con li.naver {background-image: url(../img/ico_blog.svg);}
#link .con li.youtube {background-image: url(../img/ico_tube.svg);}
#link .con li a {text-decoration: underline;}

footer  {display: block; padding: 15px 25px; font-size: var(--script); text-align: center; color: var(--sc); background-color: var(--mc); box-sizing: border-box;}


/*scroll*/
::-webkit-scrollbar {width: 5px;} 
::-webkit-scrollbar-thumb {background-color: var(--mc); border-radius: 10px;}
::-webkit-scrollbar-track {background-color: #ddd; border-radius: 5px; box-shadow: inset 0px 0px 1px rgba(0,0,0,0.1);}


/*select*/
::selection {background-color: var(--mc); color: var(--sc);}
::-moz-selection {background-color: var(--mc); color: var(--sc);}


@media screen and (max-width:775px) {
    :root {
        --sidepd: 25px;
    }

    #wrap > section {padding: 25px var(--sidepd);}

    header .menu li {margin-right: 20px;}

    #abt .arena {bottom: -310px; right: 25px; width: 60px;}
    #abt .arena li {width: 60px; height: 60px; margin: 0 0 10px 0;}

    #mean {padding: 250px var(--sidepd) 180px var(--sidepd) !important;}
    #mean img {margin: 0 0 0 -30%; transform: rotate(-90deg);}

    .tit {width: 100%; margin: 25px 0 50px 0;}
    .con {width: 100%;}
    .con > li {margin-bottom: 25px;}
    .con .year {width: 100%; margin: 0 0 8px 0;}
    .con .year span {padding: 5px 10px; border-radius: 20px; background: var(--mc); color: var(--sc);}
    .con .list {margin-left: 10px;}

    #act .con > li {margin-bottom: 25px;}
}