@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'CoreGothicE';
  font-style: normal;
  font-weight: 300;
  src: url(/wf/CoreGothicE-3Light.eot);
  src:        url(/wf/CoreGTE3.eot?#iefix) format('embedded-opentype'),
       url(/wf/CoreGothicE-3Light.woff2) format('woff2'),
       url(/wf/CoreGothicE-3Light.woff) format('woff'),
       url(/wf/CoreGothicE-3Light.ttf) format('truetype');
}

@font-face {
  font-family: 'CoreGothicE';
  font-style: bold;
  font-weight: 700;
  src: url(/wf/CoreGothicE-7ExtraBold.eot);
  src: url(/wf/CoreGothicE-7ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(/wf/CoreGothicE-7ExtraBold.woff2) format('woff2'),
       url(/wf/CoreGothicE-7ExtraBold.woff) format('woff'),
       url(/wf/CoreGothicE-7ExtraBold.ttf) format('truetype');
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; position: relative;
}
body {
	line-height: 1;
	font-family: 'CoreGothicE', '맑은 고딕', Dotum, AppleGothic;
	background: #edf0f4;
	-webkit-text-size-adjust: 100%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


html, body { width: 100%; height: 100%;  border: 0; color: #06378e;}
.blind { visibility: hidden; overflow: hidden; position: absolute; top: 0; left: 0; width: 1px; height: 1px; font-size: 0; line-height: 0; }
.relative {position: relative; display: block; width: 100%; height: 100%;}
button {  display: block; border: none;  cursor: pointer; padding: 0; background: transparent; font-family: 'CoreGothicE', '맑은 고딕', Dotum, AppleGothic; color: #06378e; }
a {text-decoration: none; color: #06378e; cursor: pointer; }
 *:focus { outline:none; }
em { font-style: normal;}
span, h1, h2, h3 { display: block;}
strong { font-weight: bold;}
 #clear { clear: both }

.inMobile_iframe { transform: scale(2)}

.arrow_icon { width: 12px; height: 30px; display: inline-block; margin-top: 12px; background: url(/img_odden/normal_arr_b.svg) no-repeat; }
.arrow_icon span { display: none; background: #06378e; width: 2px; height: 100%; border-radius: 1px; position: absolute; left: 50%; margin-left: -1px; z-index: 100;}
.arrow_icon .arrowhead_l, .arrow_icon .arrowhead_r { width: 2px; height: 8px; bottom: 0;  }
.arrow_icon .arrowhead_l { transform: rotate(45deg); left: 45%; transform-origin: 50% 100%;}
.arrow_icon .arrowhead_r { transform: rotate(-45deg); left: 55%; transform-origin: 50% 100%;}

section { width: 720px; margin: 0 auto; background:#FFF; line-height: 250%; position: relative; overflow: hidden; }
section header { width: 100%; height: 140px; margin: 0 auto 4px; position: relative;}
section header:after {content: ""; display: block; width: 640px; height: 4px; background: rgba(6, 55, 142, 1); border-radius: 2px; margin: 0 auto;}
section header h1 { width:100%;; height: 140px; text-align: center; font-size: 42px; line-height: 42px; font-weight: bold; box-sizing: border-box; padding: 38px 0 32px; }
section header h1 > em { display: block; font-size: 20px; line-height: 28px; font-weight: normal; letter-spacing: 1px; text-indent: 6px;  }
.global_menu_button { display: block; width:130px; height: 140px; position: absolute; right: 0; top: 0; z-index: 200;}
.global_menu_button .relative { box-sizing: border-box; padding: 53px 0;}
.btn_box  { display: block; width: 55px; height: 36px; margin: 0 auto;}
.btn_box span { display: block; width: 40px; height: 3px; background: rgba(6, 55, 142, 0.35); margin:0 auto 8px; border-radius: 2px; }
.btn_box span:last-child { margin:0 auto 0;}

#intro .btn_box span:nth-child(1),
#contactus .btn_box span:nth-child(4) {width: 55px; background: rgba(255, 255, 255, 1);}
#experience .btn_box span:nth-child(2),
#aboutus .btn_box span:nth-child(3) {width: 55px; background: rgba(6, 55, 142, 1);}

#intro .btn_box span { background: rgba(255, 255, 255, 0.35);}
#contactus .btn_box span { background: rgba(255, 255, 255, 0.35);}

footer { display: block; width: 640px; height: 225px; position: relative; margin: 0 auto;}
footer .bottom_ui button,
footer .bottom_ui a { width: 110px; height: 65px; text-align: center; position: absolute; top: 50px; }
footer .bottom_ui .go_intro,
footer .bottom_ui .go_top{
 font-size: 20px; line-height: 30px; box-sizing: border-box; padding-top: 35px;
}
footer .bottom_ui .go_intro { left: 0; background:url(/m/img/oddenstar.png) no-repeat center top; background-size: 45px 30px;}
footer .bottom_ui .go_top { right:0; background: url(/m/img/arr_11.png) center 6px no-repeat; background-size: auto 22px;}
footer .bottom_ui .go_next {  display:block; font-size: 28px; font-weight: bold; line-height: 35px; position: relative; margin: 50px auto 0; height: 75px; padding-bottom: 35px; vertical-align: top; background-image: url(/m/img/arr_30.png); background-position:center bottom; background-repeat: no-repeat;  background-size: auto 30px;}
footer .bottom_ui .go_next > em { display:block; width: 100%; font-size: 18px !important; font-weight: normal; line-height: 30px;}

#intro .bg_hommage { display: block; width: 100%; height: 100px; position: absolute; left: 0; bottom: 200px;  color: rgba(255, 255, 255, 0.25); font-size: 20px; line-height: 27px; z-index: 6; text-align: center; }

#intro footer { display: block; position: absolute; width: 100%; height: 250px; left: 0; bottom: 0; z-index: 5;}
#intro footer .bottom_ui .go_next { color: rgba(255, 255, 255, 1) !important; background-image: url(/m/img/arr_30_w.png) !important; background-size: auto 30px; background-repeat: no-repeat; background-position: center bottom; }

/* 팝업UI */
.Layerflatform { width: 100%; height: 100%; position: fixed; left: 0; top: 0; right: 0; z-index: 9993; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.75);}
.disNon { display: none !important; }
.pop_img_box { width: 720px; height: 100%; box-sizing: border-box; }
.pop_img_box img { height: 100%;}
.pop_img_box ul { display:block; width: 100%; height: 100%;}
.pop_img_box ul li,
.pop_img_box ul li section { display: block; width: 100%; height: 100%;}
.pop_img_box .pop_sbs { background-image: url(/img_odden_m/ODDEN_BrandingTogether_Portrait.jpg); background-repeat: no-repeat; background-position: left top; background-size: 100% auto;}
.pop_img_box .pop_a4A { background-image: url(/img_odden_m/ODDEN_a4A_Portrait.jpg); background-repeat: no-repeat; background-position: left top; background-size: 100% auto;}

.LayerflatformUI { position: fixed; right: 55px; top:130px; z-index: 9994; transform: rotate(-90deg) translate3d(0px, -32px, 0px); transform-origin: 100% 0%; }
.LayerflatformUI .normalType {display: inline-block; padding: 8px 20px 0; font-size: 21px; font-weight: bold; line-height: 36px; color: #FFF; margin-left: 20px; border-width: 2px; border-style: solid; border-bottom: none !important; opacity: .8; background-color: rgba(255,255,255,0) !important; }
.indexBtn_close { display: block; width: 130px; height: 140px; position: absolute; right: 0; top: 0; background-image: url(/m/img/menu_close.png); background-size: 31px 31px; background-position: center center; background-repeat: no-repeat; z-index: 9995; }
	
/*#PopControl.list_01_On .indexBtn_close { background-image: url(/m/img/menu_close_ob.png); }*/

#PopControl .Layerflatform { display: none; }
#PopControl .indexBtn_close { display:none;}
#PopControl.PopOn .Layerflatform { display: block; }
#PopControl.PopOn .indexBtn_close { display:inline-block;}
#PopControl.PopOn .indexBtn_close .line { background: rgba(255, 255, 255, 1)  !important ; }

.Layerflatform li { display: none; }
#PopControl.PopOn .normalType { opacity: .25; color: #FFF !important; border-color: rgba(255,255,255,1) !important; }
#PopControl.list_01_On li:nth-child(2) { display: block}
#PopControl.list_01_On li:nth-child(1) { display: none  !important;}
#PopControl.list_02_On li:nth-child(1) { display: block}
#PopControl.list_02_On li:nth-child(2) { display: none  !important;}

#PopControl.list_01_On .indexBtn_a4A { opacity: 1 !important;}
#PopControl.list_02_On .indexBtn_sbs { opacity: 1 !important;}
.be_white { color: rgba(255,255,255,1) !important; border-color: rgba(255,255,255,1) !important; }

.indexBtn_a4A { opacity: 1; display: none !important;}
.indexBtn_story { display: none !important;}


/* 메뉴 */
.nav-wrapper {  position: fixed; display: none; left: 50%; top: 0; width: 720px; height: 100%; min-height: 1080px; transform: translateX(-360px); color: #FFF; background: rgba(6, 55, 142, 0.96); background-size: cover; background-position: center center; background-attachment: fixed; z-index: 9990; opacity: 1; text-align: center; }


.nav-wrapper .logo_wrap { width: 100%; height: 25%; position: relative; min-height: 200px; }
.nav-wrapper .logo_wrap h1.logo { position: absolute; left: 50%; top: 65%; margin: -48px 0 0 -60px;}
.nav-wrapper .logo { width: 120px !important; height: 100px !important; background: url(/m/img/logo_odden.png) no-repeat center center ; background-size: 120px 100px; margin: 0 auto 30px;}
#intro h3 { font-size: 19px;}
#odden_map_view h1.logo { position: relative; display: inline-block; }

.menu_close {display: block; width:130px; height: 140px; position: absolute; right: 0; top: 0; z-index: 200;  background-image: url(/m/img/menu_close.png); background-size: 31px 31px; background-position: center center; background-repeat: no-repeat; }

nav.navigation { width: 100%; height: 50%; min-height: 400px; position: relative; }
nav.navigation .menu-list { display: block; width: 190px; height: 360px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -95px;}
nav.navigation ul {display:block; width: 100%;}
nav.navigation ul li { margin-bottom: 56px; width: 100%;}
nav.navigation ul li a { display: block; position: relative; width: 100%; font-weight: bold; font-size: 38px; height: 50px; color: #FFF;  }
nav.navigation ul li a .current_line {content: ""; display: none; position: absolute; top: 16px; left: 0; width: 100%; height: 2px; background:#FFF; z-index: 11; border-radius: 1px; }
nav.navigation ul li a em  {display: block; width: 100%;  height: 14px; font-size: 18px; color: rgba(255, 255, 255, 0.35); line-height: 22px; font-weight: normal; margin-top: 12px; letter-spacing: 1px; }

#page_intro nav.navigation ul li a#nav_intro .current_line { display: block; }
#page_experience nav.navigation ul li a#nav_exp .current_line { display: block; }
#page_aboutus nav.navigation ul li a#nav_about .current_line { display: block; }
#page_contactus nav.navigation ul li a#nav_contact .current_line { display: block; }


.nav_footer_wrap { width:100%; height: 25%; font-size: 15px; color: rgba(255, 255, 255, 0.35); letter-spacing: 1px; }
.nav_footer_wrap .copyright, .nav_footer_wrap .minitext { margin-top: 18px; }
.nav_footer_wrap a { display:inline-block; position: relative; width:60px; height: 60px; background: url(/m/img/iconSet_sns.png) no-repeat; background-size: 60px; margin: 40px 20px 0; opacity: 0.35; }
.nav_footer_wrap a.btn_behance  { background-position: 0 0; }
.nav_footer_wrap a.btn_instagram  { background-position: 0 -60px; }
.nav_footer_wrap a.btn_anotherg  { background-position: 0 -120px; display: none; }
.nav_footer_wrap a .ready_text { display: none; }
.nav_footer_wrap a:hover {opacity: 1; }

.nav_footer_wrap a:hover .ready_text { display:block; position: absolute; left: 50%; top: -36px; width: 140px; height: 30px; background: #FFF; border-radius: 2px; color: #06378e; text-align: center; font-size: 20px; font-weight: bold; line-height: 30px; transform: translate3D(-50%, 0, 0); }


#menu_page.menu_on { display: block; animation: menu_motion_on .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease;}

#menu_page.menu_out { animation: menu_motion_out .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; }

@-webkit-keyframes menu_motion_on { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; }}
@keyframes menu_motion_on {  0% { display: none; opacity: 0; } 100% { display: block; opacity: 1; }}

@-webkit-keyframes menu_motion_out { 0% { display: block; opacity: 1; } 100% { display: none; opacity: 0; }}
@keyframes menu_motion_out {  0% { display: block; opacity: 1; } 100% { display: none; opacity: 0; }}



/* 처음으로 */
#intro { width: 720px; height: 100%; min-height: 1080px;}
#intro article { position: absolute; width: 100%; min-height: 400px; top: 50%; margin-top: -200px; z-index: 10; background-size: cover }
.bg_intro { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #06378e url(/img_odden_m/intro_matrix_01_270x360.gif) no-repeat; background-size: cover; background-position: center center;  z-index: 0; animation: intro_bg_in 10s 1; -webkit-animation-fill-mode:forwards; animation-fill-mode: forwards; animation-timing-function:linear;}
.bg_intro:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: intro_cover 10s 1; -webkit-animation-fill-mode:forwards; animation-fill-mode: forwards; animation-timing-function:linear; background: url(/m/img/pattern.png) repeat; background-size: 9px; z-index: 1;}
.bg_intro_cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: intro_blue 7s 1; -webkit-animation-fill-mode:forwards; animation-fill-mode: forwards; animation-timing-function:linear; background: rgba(6, 55, 142, 1) ;   z-index: 2; }
#intro .logo_main { width: 120px !important; height: 100px !important; position: absolute; left: 50%; top: 50%; margin: -305px 0 0 -60px; background: url(/m/img/logo_odden.png) no-repeat center center ; background-size: 120px 100px; z-index: 3; }

#intro .title_line { display: block; position: absolute; left: 50%; top: 50%; width: 100%; height: 400px; background-image: url(/m/img/intro_slogan.png); background-size: cover; margin: -205px 0 0 -50%; }
#intro .slogan_part1 { animation: intro_in_part1 13s infinite; -webkit-animation-fill-mode:forwards; animation-fill-mode: forwards; animation-timing-function:linear; background-position: top center;  }
#intro .slogan_part2 { animation: intro_in_part2 13s infinite; -webkit-animation-fill-mode:forwards; animation-fill-mode: forwards; animation-timing-function:linear; background-position: bottom center; }
#intro .companyWard { display: block; position: absolute; right: 125px; top: 50px; text-align: right; width: 400px; height: 40px; font-size: 22px; color : rgba(255, 255, 255, 0.25); line-height: 40px; z-index: 4;  }

@-webkit-keyframes intro_in_part1 { 0% { opacity: 0; transform: scale(0.9) } 10% { opacity: 1; } 47% { transform: scale(1); opacity: 1; } 51% { opacity: 0;} 100% { opacity: 0; } }
@keyframes intro_in_part1 { 0% { opacity: 0; transform: scale(0.9) } 10% { opacity: 1; } 47% { transform: scale(1); opacity: 1; } 51% { opacity: 0;} 100% { opacity: 0; } }

@-webkit-keyframes intro_in_part2 { 0% { opacity: 0; } 49% { transform: scale(0.9); opacity: 0; } 52% { opacity: 1; } 96% { opacity: 1; } 100% { transform: scale(1); opacity: 0;} }
@keyframes intro_in_part2 { 0% { opacity: 0; } 49% { transform: scale(0.9); opacity: 0; } 52% { opacity: 1; } 96% { opacity: 1; } 100% { transform: scale(1); opacity: 0;} }


@-webkit-keyframes intro_cover { 0% { opacity: 0; } 100% { opacity: .5; } }
@keyframes intro_cover { 0% { opacity: 0; } 100% { opacity: .5; } }

@-webkit-keyframes intro_blue { 0% { opacity: 1; } 100% { opacity: .65; } }
@keyframes intro_blue { 0% { opacity: 1; } 100% { opacity: .65; } }




/* 경험했어 */
#experience {}
#experience article { display: block; width: 100%; text-align: left; }
#experience article ul { width: 640px; margin: 0 auto; text-align: left; }
#experience article ul li { display: block; position: relative; width: 100%;  box-sizing: border-box; border-bottom: 2px solid rgba(6, 55, 142, 0.35); padding-bottom: 40px; margin-bottom: 30px;  }
#experience article ul li:first-child { text-align: center; }
#experience article ul li:last-child { border-bottom: 0 }
#experience article ul li .relative:after {content: ""; width: 100%; height: 2px; background: rgba(6, 55, 142, 0.2);}
#experience article ul li div { }
#experience article ul li .ex_count { width:40px; height: 30px; font-size: 26px; line-height: 30px; position: absolute; right: 20px; bottom: 20px; text-align: center; color: rgba(255, 255, 255, 0.25) }
#experience article ul li .ex_image.whiteBg .ex_count {color: rgba(6, 55, 142, 0.25)}
#experience article ul li .ex_client { width: 100%; font-size: 24px; margin-top: 20px; text-transform: uppercase; }
#experience article ul li .ex_tit { width: 100%; font-size: 32px; font-weight: bold; margin-top: 10px; text-transform: uppercase; }
#experience article ul li .ex_brief { width: 100%; font-size: 24px; line-height: 180%; word-wrap: normal; word-break: keep-all; margin-top: 14px;}
#experience article ul li .ex_image { display: block; background-size: auto 100%; width: 640px; height: 410px; background-position: center center; background-repeat: no-repeat; overflow: hidden; border-radius: 4px;}
#experience article ul li .ex_image .relative { box-sizing: border-box; position: relative; width: 100%; height: 100%;}
#experience article ul li .ex_award { position: absolute; right: 10px; top: 440px; width: 60px; height: 75px; background-size: 60px 75px !important; background-repeat: no-repeat;}
#experience article ul:after {content: ""; display: block; width: 640px; height: 4px; background: rgba(6, 55, 142, 1); border-radius: 2px; margin: 0 auto;}

#experience article ul li#thepodsix .ex_award { width: 140px; background-position: 0 0, 60px 0; }

#experience article ul li#exNum_start { background:url(/m/img/oddenstar.png) no-repeat center 45px; padding-top: 170px; background-size: 150px 100px; }
#experience article ul li#exNum_start .ex_start_tit { font-size: 34px; font-weight: bold; }
#experience article ul li#exNum_start .ex_start_cmnt1 { font-size: 26px; margin-top: 18px; }
#experience article ul li#exNum_start .ex_start_cmnt2 { font-size: 22px; margin-top: 30px; }
#experience article ul li#exNum_start span  { display: block;}
#experience article ul li#exNum_start .ex_count { display: none;}


/* 프로젝트별 어워드, 이미지 */
#experience article ul li#gcd_logo .ex_image { background-image: url(/m/img/experience/gcd_1200.jpg);}
#experience article ul li#gcd_logo .ex_award { display: none;}

#experience article ul li#luxrobo_shop .ex_image { background-image: url(/m/img/experience/luxrobo_shop.jpg);}
#experience article ul li#luxrobo_shop .ex_award { display: none;}

#experience article ul li#luxrobo .ex_image { background-image: url(/m/img/experience/luxrobo.jpg);}
#experience article ul li#luxrobo .ex_award { display: none;}

#experience article ul li#cafe_selene .ex_image { background-image: url(/m/img/experience/cafe_selene.jpg);}
#experience article ul li#cafe_selene .ex_award { display: none;}

#experience article ul li#bb_logo_re .ex_image { background-image: url(/m/img/experience/bb_logo_re.jpg);}
#experience article ul li#bb_logo_re .ex_award { display: none;}

#experience article ul li#bb_names .ex_image { background-image: url(/m/img/experience/bb_names.jpg);}
#experience article ul li#bb_names .ex_award { display: none;}

#experience article ul li#jwpharm .ex_image { background-image: url(/m/img/experience/jwpharm.jpg);}
#experience article ul li#jwpharm .ex_award { display: none;}

#experience article ul li#bebridge .ex_image { background-image: url(/m/img/experience/bebridge.jpg);}
#experience article ul li#bebridge .ex_award { display: none;}

#experience article ul li#planetleathers .ex_image { background-image: url(/m/img/experience/planetleathers.jpg);}
#experience article ul li#planetleathers .ex_award { display: none;}

#experience article ul li#orchestrafarmers .ex_image { background-image: url(/m/img/experience/orchestrafarmers.jpg);}
#experience article ul li#orchestrafarmers .ex_award { background: url(/m/img/experience/award_contest.png)}

#experience article ul li#golfandparty .ex_image { background-image: url(/m/img/experience/golfandparty.jpg);}
#experience article ul li#golfandparty .ex_award { background: url(/m/img/experience/award_contest.png)}

#experience article ul li#samsung_card .ex_image { background-image: url(/m/img/experience/samsung_card.jpg);}
#experience article ul li#samsung_card .ex_award { display: none;}

#experience article ul li#ny_b2b .ex_image { background-image: url(/m/img/experience/ny_b2b.jpg);}
#experience article ul li#ny_b2b .ex_award { display: none;}

#experience article ul li#iammother .ex_image { background-image: url(/m/img/experience/iammother.jpg);}
#experience article ul li#iammother .ex_award { display: none;}

#experience article ul li#milk100 .ex_image { background-image: url(/m/img/experience/milk100.jpg);}
#experience article ul li#milk100 .ex_award { background: url(/m/img/experience/award_web_kiffa.png)}

#experience article ul li#khawah .ex_image { background-image: url(/m/img/experience/khawah.jpg);}
#experience article ul li#khawah .ex_award { display: none;}

#experience article ul li#ny_themixer .ex_image { background-image: url(/m/img/experience/ny_themixer.jpg);}
#experience article ul li#ny_themixer .ex_award { display: none;}

#experience article ul li#thepodsix .ex_image { background-image: url(/m/img/experience/thepodsix.jpg);}
#experience article ul li#thepodsix .ex_award { background: url(/m/img/experience/award_web_kiffa.png) top left no-repeat, url(/m/img/experience/award_app_kiffa.png) top right no-repeat; }
 
#experience article ul li#fcafe .ex_image { background-image: url(/m/img/experience/fcafe.jpg);}
#experience article ul li#fcafe .ex_award { display: none;}

#experience article ul li#looka .ex_image { background-image: url(/m/img/experience/looka.jpg);}
#experience article ul li#looka .ex_award { background: url(/m/img/experience/award_web_kiffa.png)}

#experience article ul li#red_blood .ex_image { background-image: url(/m/img/experience/red_blood.jpg);}
#experience article ul li#red_blood .ex_award {display: none; }

#experience article ul li#ssangyoung .ex_image { background-image: url(/m/img/experience/ssangyoung.jpg);}
#experience article ul li#ssangyoung .ex_award { display: none;}

#experience article ul li#huyndai_mt .ex_image { background-image: url(/m/img/experience/huyndai_mt.jpg);}
#experience article ul li#huyndai_mt .ex_award { display: none;}

#experience article ul li#hyundai_sns .ex_image { background-image: url(/m/img/experience/hyundai_sns.jpg);}
#experience article ul li#hyundai_sns .ex_award { display: none;}

#experience article ul li#mhjc .ex_image { background-image: url(/m/img/experience/mhjc.jpg);}
#experience article ul li#mhjc .ex_award {display: none;}

#experience article ul li#ray .ex_image { background-image: url(/m/img/experience/ray.jpg);}
#experience article ul li#ray .ex_award { display: none;}

#experience article ul li#grandeur .ex_image { background-image: url(/m/img/experience/grandeur.jpg);}
#experience article ul li#grandeur .ex_award { display: none;}

#experience article ul li#quantum .ex_image { background-image: url(/m/img/experience/quantum.jpg);}
#experience article ul li#quantum .ex_award { display: none;}

#experience article ul li#kids .ex_image { background-image: url(/m/img/experience/kids.jpg);}
#experience article ul li#kids .ex_award { display: none;}

#experience article ul li#huyndai_card_com .ex_image { background-image: url(/m/img/experience/huyndai_card_com.jpg);}
#experience article ul li#huyndai_card_com .ex_award { display: none;}

#experience article ul li#shinhan_ch .ex_image { background-image: url(/m/img/experience/shinhan_ch.jpg);}
#experience article ul li#shinhan_ch .ex_award { display: none;}

#experience article ul li#granage .ex_image { background-image: url(/m/img/experience/granage.jpg);}
#experience article ul li#granage .ex_award { display: none;}

#experience article ul li#crusade .ex_image { background-image: url(/m/img/experience/crusade.jpg);}
#experience article ul li#crusade .ex_award { display: none;}

#experience article ul li#gojiam .ex_image { background-image: url(/m/img/experience/gojiam.jpg);}
#experience article ul li#gojiam .ex_award { display: none; }

#experience article ul li#shinhan_card .ex_image { background-image: url(/m/img/experience/shinhan_card.jpg);}
#experience article ul li#shinhan_card .ex_award { background: url(/m/img/experience/award_web_kiffa.png)}

#experience article ul li#bc .ex_image { background-image: url(/m/img/experience/bc.jpg);}
#experience article ul li#bc .ex_award { background: url(/m/img/experience/award_web_kiffa.png)}

#experience article ul li#kia .ex_image { background-image: url(/m/img/experience/kia.jpg);}
#experience article ul li#kia .ex_award { background: url(/m/img/experience/award_nyf.png)}


#experience article ul li#exNum_start .ex_count:after { content: "" !important; }
#experience article ul li:nth-last-of-type(1) .ex_count:after  { content: "1"; }
#experience article ul li:nth-last-of-type(2) .ex_count:after  { content: "2"; }
#experience article ul li:nth-last-of-type(3) .ex_count:after  { content: "3"; }
#experience article ul li:nth-last-of-type(4) .ex_count:after  { content: "4"; }
#experience article ul li:nth-last-of-type(5) .ex_count:after  { content: "5"; }
#experience article ul li:nth-last-of-type(6) .ex_count:after  { content: "6"; }
#experience article ul li:nth-last-of-type(7) .ex_count:after  { content: "7"; }
#experience article ul li:nth-last-of-type(8) .ex_count:after  { content: "8"; }
#experience article ul li:nth-last-of-type(9) .ex_count:after  { content: "9"; }
#experience article ul li:nth-last-of-type(10) .ex_count:after  { content: "10"; }
#experience article ul li:nth-last-of-type(11) .ex_count:after  { content: "11"; }
#experience article ul li:nth-last-of-type(12) .ex_count:after  { content: "12"; }
#experience article ul li:nth-last-of-type(13) .ex_count:after  { content: "13"; }
#experience article ul li:nth-last-of-type(14) .ex_count:after  { content: "14"; }
#experience article ul li:nth-last-of-type(15) .ex_count:after  { content: "15"; }
#experience article ul li:nth-last-of-type(16) .ex_count:after  { content: "16"; }
#experience article ul li:nth-last-of-type(17) .ex_count:after  { content: "17"; }
#experience article ul li:nth-last-of-type(18) .ex_count:after  { content: "18"; }
#experience article ul li:nth-last-of-type(19) .ex_count:after  { content: "19"; }
#experience article ul li:nth-last-of-type(20) .ex_count:after  { content: "20"; }
#experience article ul li:nth-last-of-type(21) .ex_count:after  { content: "21"; }
#experience article ul li:nth-last-of-type(22) .ex_count:after  { content: "22"; }
#experience article ul li:nth-last-of-type(23) .ex_count:after  { content: "23"; }
#experience article ul li:nth-last-of-type(24) .ex_count:after  { content: "24"; }
#experience article ul li:nth-last-of-type(25) .ex_count:after  { content: "25"; }
#experience article ul li:nth-last-of-type(26) .ex_count:after  { content: "26"; }
#experience article ul li:nth-last-of-type(27) .ex_count:after  { content: "27"; }
#experience article ul li:nth-last-of-type(28) .ex_count:after  { content: "28"; }
#experience article ul li:nth-last-of-type(29) .ex_count:after  { content: "29"; }
#experience article ul li:nth-last-of-type(30) .ex_count:after  { content: "30"; }
#experience article ul li:nth-last-of-type(31) .ex_count:after  { content: "31"; }
#experience article ul li:nth-last-of-type(32) .ex_count:after  { content: "32"; }
#experience article ul li:nth-last-of-type(33) .ex_count:after  { content: "33"; }
#experience article ul li:nth-last-of-type(34) .ex_count:after  { content: "34"; }
#experience article ul li:nth-last-of-type(35) .ex_count:after  { content: "35"; }
#experience article ul li:nth-last-of-type(36) .ex_count:after  { content: "36"; }
#experience article ul li:nth-last-of-type(37) .ex_count:after  { content: "37"; }
#experience article ul li:nth-last-of-type(38) .ex_count:after  { content: "38"; }
#experience article ul li:nth-last-of-type(39) .ex_count:after  { content: "39"; }
#experience article ul li:nth-last-of-type(40) .ex_count:after  { content: "40"; }


/* 우리같이 */
#aboutus { }
.atc-01, .atc-02, .atc-03 { width: 100%; display: block; }
#aboutus article { text-align: center; font-size: 16px; padding-top: 90px; }
#aboutus article .paragraph_box { margin-top: 90px; font-size: 24px !important; line-height: 200%; letter-spacing: -2px;}
#aboutus article h1 { display: block; font-size: 32px; font-weight: bold; padding: 50px 0;}
#aboutus .atc-01 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,edf0f4+50,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #edf0f4 50%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#edf0f4 50%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#edf0f4 50%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#aboutus .bgDepth_2{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,edf0f4+50,ffffff+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #edf0f4 80%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#edf0f4 80%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#edf0f4 80%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
#aboutus .atc-01 > .relative {background-image: url(/m/img/atc_01_bg_img.png), url(/m/img/atc_01_bg_img_2.png), url(/m/img/atc_01_bg_img_3.png);
background-position: 0% 15%, 0% 55%, 0% 98%  ; background-repeat: no-repeat; background-size: 100%;	}
#aboutus .bgDepth_1 {background-image: url(/m/img/atc_01_bg_img_4.png); background-position: 0% 80%; background-repeat: no-repeat; background-size: 100%;}
#aboutus .atc-01 h2 { display: inline-block; width: 540px; height: 50px; background-image: url(/m/img/atc_tit_all.png); background-size: 540px; background-position: top center; margin: 15px auto;}
#aboutus .atc-01 h2.paraTit_02 { background-position: center center; }
#aboutus .atc-01 h2.paraTit_03 { background-position: center bottom; }

#aboutus .odden_Dictionary { width: 100%; text-align: center; margin-top: 50px;  }
#aboutus .odden_Dictionary strong { font-size: 22px; position: relative; display:block; height: 24px; line-height: 24px; letter-spacing: 1px;  }
#aboutus .odden_Dictionary strong span { font-size: 8px; font-weight: normal !important; position: absolute; width: 10px; height: 10px; right: -12px; top: 3px; line-height: 10px; }
#aboutus .odden_Dictionary em { display: block; font-size: 16px; letter-spacing: 1px; line-height: 20px; }
#aboutus .odden_Dictionary em span { display: block; color: rgba(06, 39, 117, 0.35); font-size: 14px; line-height: 20px; height: 20px; }


#aboutus .icon-sequence { width: 100%; height: 100px; margin: -25px 0 15px 0; text-align: center;}
#aboutus .pixtogram_icon { display: inline-block; width: 100px; height: 100px; margin-right: 15px; background: url(/m/img/odden_job_iconSet.png) no-repeat; background-size: 100px; }
#aboutus .pixtogram_icon:last-child { margin-right: 0; }
#aboutus .pixtogram_icon.i-01 { background-position: 0 0; }
#aboutus .pixtogram_icon.i-02 { background-position: 0 -100px; }
#aboutus .pixtogram_icon.i-03 { background-position: 0 -200px; }
#aboutus .pixtogram_icon.i-04 { background-position: 0 -300px; }
#aboutus .pixtogram_icon.i-05 { background-position: 0 -400px; }
#aboutus .pixtogram_icon.i-06 { background-position: 0 -500px; }
#aboutus .pixtogram_icon.i-07 { background-position: 0 -600px; }
#aboutus .pixtogram_icon.i-08 { background-position: 0 -700px; }
#aboutus .pixtogram_icon.i-09 { background-position: 0 -800px; }
#aboutus .pixtogram_icon.i-10 { background-position: 0 -900px; }

#aboutus .para_mini { margin-bottom: 40px;}
#aboutus .para_mini:last-child { padding-bottom: 60px;}

.bgDepth_2:after {content: ""; display: block; width: 640px; height: 4px; background: rgba(6, 55, 142, 1); border-radius: 2px; margin: 0 auto;}



/* 만나보자 */
#contactus { width: 720px; height: 100%; background-image: url(/m/img/bg_contactus.jpg); background-size: auto 100%; background-position: top left; overflow: hidden; color: #FFF; padding: 0 80px; box-sizing: border-box;}
#contactus a { color: #FFF;}
#contactus header { position: absolute; left: 0; top: 0; z-index: 99}
#contactus header h1 { display: none; color: #FFF;}
#contactus header h2 { display: block; width: 520px; height: 160px; position: absolute; left: 80px; top: 160px; background-image: url(/m/img/helloStranger.png); background-size: 100% 100%; background-position: top left;}
#contactus .btn_box span:nth-child(4) {width: 55px; background: rgba(255, 255, 255, 1);}
#contactus header:after { display: none;}

#contactus nav { display: block; position: relative; width: 560px; padding: 400px 0 0 0; color: #FFF; margin: 0 auto;}
#contactus nav ul { display: block; width: 100%; height: 100%; position: relative;}
/*#contactus nav ul:after {content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, .08); border-radius: 1px; }*/
#contactus nav ul li { display: block; width: 100%; position: relative; height: 50px; padding:25px 0; }
/*#contactus nav ul li:after {content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, .08); border-radius: 1px; }*/
#contactus nav ul li button,
#contactus nav ul li a { display: block; width: 100%; height: 50px; font-size: 28px; color: #FFF; line-height: 50px; text-indent: 75px; text-align: left; background: url(/m/img/iconSet_contact.png) no-repeat; background-size: 50px; }

#contactus nav ul li .map-view { background-position: 0 0; }
#contactus nav ul li .project-inquiry { background-position: 0 -50px; }
#contactus nav ul li .join-inquiry { background-position: 0 -100px; }
#contactus nav ul li .download-file { background-position: 0 -150px; }

#contactus article { width: 100%; height: 100%; box-sizing: border-box; padding: 170px 80px 0; position: absolute; left: 720px; top: 0;}

#contactus .backBtn { display: block; width: 100px; height: 100px; position: absolute; left: 50px; top: 40px; background-image: url(/m/img/white_arr.png); background-size: 40px 20px; background-position: center center; background-repeat: no-repeat; }

#contactus article .area_line { width: 100%; height: 2px; background: rgba(255, 255, 255, .15); border-radius: 1px; margin: 40px 0;   }
#contactus article h1 { font-size: 36px; line-height: 30px; margin-bottom: 15px; font-weight: bold;}
#contactus article h2 { font-weight: bold;}
#contactus article p { font-size: 22px; line-height: 200%; letter-spacing: -1px; }
#contactus article p.text01 { margin-bottom: 20px;}
#contactus article p.text01 .location_view { display: inline-block; position: relative; width: 150px; font-size: 22px; height: 60px; color: #FFF !important; text-align: right; }
#contactus article p.text01 .location_view .arrow_icon {display: inline-block; width: 27px; height: 16px; margin-left: 10px; background-image: url(/m/img/arr_icon.png); background-size: 27px 16px; background-position: center center; background-repeat: no-repeat; }
#contactus article p strong { font-weight: bold;}

#contactus article dl dt { font-size: 20px !important; line-height: 200%; opacity: .6; }
#contactus article dl dt strong { font-weight: normal !important; }
#contactus article dl dd { font-size: 22px !important; line-height: 150%; margin-bottom: 15px; letter-spacing: -2px; }

#contactus .contents_on { display: block;   animation: depth1_motion_on .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease;}

#contactus .contents_out { display: block;   animation: depth1_motion_out .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease;}

#contactus .nav_out { display: block;   animation: depth0_motion_out .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease;}

#contactus .nav_in { display: block;   animation: depth0_motion_in .25s 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease;}

#location_contents,
#project_contents { left: 720px}

@-webkit-keyframes depth1_motion_on { 0% { left:720px; opacity: 0; } 100% { left:0; opacity: 1; }}
@keyframes depth1_motion_on {  0% { left:720px; opacity: 0; } 100% { left:0; opacity: 1; }}

@-webkit-keyframes depth1_motion_out { 0% { left:0; opacity: 1; } 100% { left:720px }}
@keyframes depth1_motion_out {  0% { left:0; opacity: 1; } 100% { left:720px; opacity: 0; }}

@-webkit-keyframes depth0_motion_out { 0% { left:0; opacity: 1; } 100% { left:-720px}}
@keyframes depth0_motion_out {  0% { left:0; opacity: 1; } 100% { left:-720px; opacity: 0; }}

@-webkit-keyframes depth0_motion_in { 0% { left:-720px; opacity: 0; } 100% { left:0; opacity: 1; }}
@keyframes depth0_motion_in {  0% { left:-720px; opacity: 0; } 100% { left:0; opacity: 1; }}


#map_wrap { position: fixed; width: 720px; height: 100%; z-index: 200; left: 100%; top: 0; opacity: 0;}
#map_wrap #map { width: 100%; height: 100%;}
#back_04 { background-color: rgba(6, 55, 142, 0.9); z-index: 201; }