@charset "utf-8";

/* layout */
#wrap {overflow:hidden; transition-duration:0.8s; -webkit-transition-duration:0.8s;}
#wrap.scroll {margin-top:-80px;}

/* skip-go */
#skip-go {display:block;}
#skip-go dt {position:absolute; top:0; left:-1000px;}
#skip-go dd a {display:block; font-weight:bold; position:absolute; top:0; left:-1000px; font-size:120%; text-align:center; background-color:#000; z-index:1000;} 
#skip-go dd a:hover, 
#skip-go dd a:active, 
#skip-go dd a:focus{left:0; height:40px; width:100%; line-height:40px; color:#fff !important;}

/* header */
#header {position:fixed; top:50px; left:0; right:0; margin:0 auto; width:94%; height:70px; background-color:transparent; transition-duration:0.5s; -webkit-transition-duration:0.5s; z-index:999; }
#header h1 {float:left; display:block; width:auto; height:70px; background: url(../gmi/logo.gif) no-repeat left top;}
#header h1 span{float:left; font-size:110%; font-weight: 600; line-height: 20px; margin: 13px 0 0 90px;}
#header p.header_arr {float:right; width:70px; height:70px; border:1px solid #000; background: url(../gmi/header_arr.png) no-repeat center 50%;}
#header .mobile_menu {display:none;}

/* GNB */
#gnb {position:relative;}



/* container */
#container {padding:0; margin:0;}


.index {margin:0; padding:0;}
.index .idx_content {position:relative;}
.section {overflow:hidden; position:absolute; left:0; top:0; height:100%; width:100%;}
.section .visual_bg {background-repeat:no-repeat; background-position:center 0; background-size:cover; display:none; position:absolute; left:0; top:0; height:100%; width:100%;}

/* scene */
#scene1 {top:0;}
#scene2 {top:100%;}
#scene3 {top:100%;}

/* scene_visual */
#scene1 .visual_bg {background: #f5f5f5; display:block;}
#scene2 .visual_bg {background: #fff; display:block;}
#scene3 .visual_bg {background-image:url(../gmi/section03_bg.jpg); display:block;}


/* content */
.section_wrap {position:relative; left:0; top:0; height:100%;}
.content {overflow:hidden; width:94%; height:80%; z-index: 1; position:absolute; right:0; left:0; top:13%; margin:0 auto; text-align: center;}
.content h2 {font-size:320%; font-weight: bold; line-height:40px; letter-spacing: 0;}
.content p.h2_text {font-size:150%; font-weight:300; color: #bcbcbc; letter-spacing:0; margin:12px 0 80px;}
.content p.h2_text span.bullet {display:block; width:10px; height:13px; background: url(../gmi/bullet_black.png) no-repeat left top; left:0; right:0; margin:35px auto 0;}
.content p.h2_text span.bullet_white {background: url(../gmi/bullet_white.png) no-repeat left top !important;}

/* icon_wheel */
.content .icon_wheel {right:0; left:0; bottom:0; margin:0 auto;}
.icon_wheel {overflow:hidden; border:1px solid #333; border-radius:20px; box-sizing:border-box; position:absolute; width:22px; height:34px; }
.icon_wheel .icon_wheel_center {border-radius:20px; width:4px; height:8px; display:block; position:absolute; left:42%; top:6px; border:1px solid #333; background: #333;}
.wheel_white  {border:1px solid #fff;}
.icon_wheel .center_white  {border:1px solid #fff; background: #fff;}


/* portfolio_list */
.portfolio_list {float:left; display:block; width:100%; margin:0; padding:0;}
.portfolio_list li {display:inline; float:left; width: 32%; height:auto; margin:0; padding:0; left:0; top:0 !important;}
.portfolio_list li:hover {opacity: 0.5;}
.portfolio_list li:nth-child(2) {margin: 0 2%;}
.portfolio_list li a {display:inline-block; width:100%; text-align: left; color: #888; font-size:95%; letter-spacing: -1px;}
.portfolio_list li a img {width:100%; height:auto;}
.portfolio_list li span {display: block; margin:20px 0px 2px 0px; font-weight:600; color: #000; font-size:115%;}


/* profile */
.profile {display:block; width:1400px; height:auto; margin:0 auto;}
.profile ul {float:left; width:45%; border-top:2px solid #222; text-align: left;}
.profile ul:nth-child(2) {float:right;}
.profile ul li {float:left; width:45.6%; height:210px; border-top:1px solid #b2b2b2;}
.profile dl {width:100%; margin: 30px 0 0 0;}
.profile dt {color:#777777;}
.profile dt span {font-size:120%; font-weight: 600; display: block; }
.profile dd {margin:25px 0 0 0; line-height: 24px; word-wrap:break-word;}
.profile dd span {width:35px; display: table; float:left; padding-top:2px;}
.profile ul li:nth-child(1),
.profile ul li:nth-child(2) {border-top:none;}
.profile ul li:nth-child(1),
.profile ul li:nth-child(3) {margin-right:8.8%;}
.profile ul li:nth-child(3),
.profile ul li:nth-child(4) { margin-top:25px;}

/* work_list */
.work_list {display:block; width:1400px; height:auto; margin:0 auto; text-align: left;}
.work_list dl {float:left; width:31%; height:450px; background: #fff;}
.work_list dl:nth-child(2) {margin:0 3.5%; }
.work_list dt {width:82%; font-size:115%; font-weight:600; margin: 40px auto 0; padding-bottom:25px; border-bottom:2px solid #222; }
.work_list dd {width:82%; margin:0 auto; border-bottom:1px solid #dadada;}
.work_list dd:last-child {border-bottom:0px; }
.work_list dd a {display:block; width:100%; font-size:110%; line-height:50px; letter-spacing: -1px; background: url(../gmi/work_more.gif) no-repeat right 48%;}
.work_list dd a:hover {opacity: 0.5;}
.work_list dd span {display:block; font-size:110%; line-height:50px; letter-spacing: -1px;}




/* 인디게이터 */
.ind {position:fixed; right:50px; top:53%; margin-top:-58px; height:86px; width:30px; z-index:100;}
.ind:before {background-color:#000; content:""; border-radius:30px; opacity:0.2; position:absolute; left:0; top:0; height:100%; width:100%;}
.ind span {background-color:#fff; display:block; border-radius:50px; cursor:pointer; opacity:0.8; transition:opacity 0.5s, transform 0.3s; -webkit-transition:opacity 0.5s, -webkit-transform 0.3s; margin:0 auto; height:6px; width:6px;}
.ind span:first-child {margin-top:12px;}
.ind span + span {margin-top:20px;}
.ind span.active {background-color:#f37321; transform:scale(1.6);}

@media all and (max-width:1450px){
.profile {width:100%;}
.profile ul {width:48%;}
.profile ul li {width:48%;}
.profile ul li:nth-child(1),
.profile ul li:nth-child(3) {margin-right:2%;}
.profile ul li dd {letter-spacing: -1px;}

.work_list {width:100%;}
.work_list dl {width:32.33%;}
.work_list dl:nth-child(2) {margin:0 1.5%; }
.work_list dd a,
.work_list dd span {font-size:105%; letter-spacing: -2px;}
}

@media all and (max-width:1024px){
.ind,
.content .icon_wheel {display:none;}

.section,
.section_container,
.content {overflow: visible; position: inherit;}

#header {top:0px; width:100%; height:40px;}
#header h1 {height:40px; background: #222 url(../gmi/logo.gif) no-repeat left top; width:100%; }
#header h1 span {width:100%; text-align:center; color: #fff; margin: 9px auto 0;}
#header h1 span br {display:none;}

#header .header_arr {display:none;}
#header .mobile_menu {display:block; width:100%; }
#header .mobile_menu li {float:left; width:33.33%; text-align: center; background: #000; padding:5px 0; border-right:1px solid #444; border-bottom:1px solid #444;}
#header .mobile_menu li:nth-child(3) {border-right:none;}
#header .mobile_menu li a{color:#fff;}

.section_wrap {overflow: hidden; padding-top:100px;}
.content h2 {font-size:240%; line-height:30px;}
.content p.h2_text {font-size:100%; margin: 10px 0 30px 0;}
.content p.h2_text span.bullet {margin: 15px auto 0;}

.portfolio_list {margin-bottom:30px;}


.profile ul {width:100%;}
.profile ul:nth-child(2) {border-top:1px solid #b2b2b2; margin-bottom:30px;}
.profile ul li {width:50%;}
.profile ul li:nth-child(1),
.profile ul li:nth-child(3),
.profile ul li:nth-child(4) {margin:0;}
.profile dd {margin-top:10px;}


.work_list dl {height:420px; margin-bottom:30px;}
.work_list dt {margin:20px auto 0; padding-bottom:10px;}
.work_list dd a,
.work_list dd span {line-height: 20px; padding:10px 30px 10px 0;}
}

@media all and (max-width:767px){
.work_list dl {width:100%; height:auto; padding-bottom:20px; margin:0 0 10px 0 !important;}
.work_list dl:nth-child(3) {margin:0 0 30px 0 !important;}
.work_list dt {width:90%;}
.work_list dd {width:90%;}
.work_list dd a, 
.work_list dd span {font-size:105%;}

}
@media all and (max-width:580px){
.portfolio_list li {width:100%; margin-bottom:20px;}
.portfolio_list li:nth-child(2) {margin: 0 0 20px 0;}
.portfolio_list li span {margin-top:10px;}


.profile ul li:nth-child(2) {border-top:1px solid #b2b2b2;}
.profile ul li {width:100%; height:auto;}
.profile dl {margin: 20px 0;}
.profile dd {margin-top:10px;}



}