@charset "utf-8";

@font-face {
    font-family: "YiSunShinDotum";
    src: url("YiSunShinDotum.woff") format('woff');
}

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300");
/* font-family:'Open Sans', sans-serif; */

@font-face { 
  font-family: 'GmarketSansLight'; 
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}
@font-face { 
  font-family: 'GmarketSansMedium'; 
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}
@font-face { 
  font-family: 'GmarketSansBold'; 
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
} 

/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#222;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* mobile */
@media all and (max-width:768px) {
  body {font-size:13px;}
}







/* select 스타일 */
select {
    -webkit-appearance:menulist;
    box-sizing:border-box;
    align-items:center;
    white-space:pre;
    -webkit-rtl-ordering:logical;
    color: black;
    background-color:white;
    cursor:default;
    border-width:1px;
    border-style:solid;
    border-color:initial;
    border-image:initial;
}

select.sel {
    display:inline-block; 
    width:100%;
    border:solid 1px #3b4da1; 
    border-radius:2px;
    outline-style:none; 
    vertical-align:middle;
    padding:0 30px 0 10px; 
    height:45px; 
    line-height:45px; 
    color:#3a3a3a; font-size:16px; font-weight:400;
    background-color:#fff;
    background-image:url("./dept01/img/sel_arr.png");
    background-size: 15px auto;
    background-repeat:no-repeat;    
    background-position-x:90%;
    background-position-y:50%;
    background-position:right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
}
select::-ms-expand {display:none;}​
select::-webkit-expand {display:none;}​
select::-moz-expand {display:none;}​
select::-o-expand {display:none;}

/* mobile */
@media all and (max-width:768px) {
    select.sel {font-size:13px; height:35px; line-height:35px;}
}






/* float */
.clear {}
.clear:after {clear:both; content:""; display:block;}
.fl {float:left;}
.fr {float:right;}







/** #### header #### **/
.header {position: relative; padding:0 40px; height:100px;}
.header .logo {
    position: absolute; top:50%; left:40px; transform:translateY(-50%); font-size:0
}
.header .logo a {display:block; line-height:1;}
.header .logo:after {display:block; clear:both; content:"";}
.header .logo img {height:47px; width:208px;}


.header .dep_detail {position:absolute; width:210px; right:40px; top:50%; transform:translateY(-50%);}
.header .dep_detail .sel {width:100%;}

/* mobile */
@media all and (max-width:768px) {
    .header {padding:0 15px; height:50px;}
    .header .logo {left:15px;}
    .header .logo img {height:30px; width:133px;}
    .header .dep_detail {right:15px; width:170px;}
}




/** vs **/
.vs {position:relative; height:350px; background:url("./intro_vs.jpg") no-repeat center;}

.vs .indiv {
    position:absolute; top:50%; left:13%; transform:translateY(-50%);
    font-family:"YiSunShinDotum" !important;
}
.vs .indiv span {font-size:24px; color:#242424; font-family:"YiSunShinDotum" !important;}
.vs .indiv h2 {margin:10px 0 15px; font-size:60px; color:#0e2a77; font-family:"YiSunShinDotum" !important; font-weight:bold; line-height:1.4;}
.vs .indiv p {font-size:26px; color:rgba(42,42,42,.6); font-family:"YiSunShinDotum" !important;}




/* mobile */
@media all and (max-width:768px) {
    .vs {background-size:cover; height:250px;}
    .vs .indiv {left:8%;}
    .vs .indiv span {font-size:16px;}
    .vs .indiv h2 {margin:10px 0 15px; font-size:28px;}
    .vs .indiv p {font-size:18px}



}





/** ceo_intro_wrap **/
.ceo_intro_wrap {position:relative;}
.ceo_intro_wrap .cdiv {padding:0 150px 100px;}
.ceo_intro_wrap .cdiv > h2 {padding:100px 0 80px; text-align:center; font-size:40px; color:#272727; font-weight:bold;}
.ceo_intro_wrap .cdiv.c1 {background:#fff;}
.ceo_intro_wrap .cdiv.c1 > .clear {display:table; width:100%;}
.ceo_intro_wrap .cdiv.c1 > .clear .fl {display:table-cell; float:none; vertical-align:top;}
.ceo_intro_wrap .cdiv.c1 > .clear .fl:last-child {padding-left:2%;}
.ceo_intro_wrap .cdiv.c1 > .clear .sec1 {font-family:"YiSunShinDotum" !important; font-size:32px; color:rgba(48,48,48,.7); line-height:1.2;}
.ceo_intro_wrap .cdiv.c1 > .clear .sec1 span {font-family:"YiSunShinDotum" !important; color:rgba(48,48,48,1); font-weight:bold;}
.ceo_intro_wrap .cdiv.c1 > .clear .sec2 {margin-top:40px; font-size:20px; color:#4f4f4f; line-height:1.4;}
.ceo_intro_wrap .cdiv.c1 > .clear .sec3 {}
.ceo_intro_wrap .cdiv.c1 > .clear .sec3 p {
  font-size:24px; color:#4f4f4f; line-height:1.4; 
}
.ceo_intro_wrap .cdiv.c1 > .clear .sec3 strong {
  display:block;
  margin-top:40px;
  text-align:right;
  font-size:26px;
  font-weight:bold;
}

.ceo_intro_wrap .cdiv.c2 {background:#fff;}
.ceo_intro_wrap .cdiv.c2 .mov {position:relative; width:440px; margin:0 auto; font-size:0; background:#3e3e3e;}
.ceo_intro_wrap .cdiv.c2 .mov video {border:0; padding:0; width:100%;}

.resp-container {}

.ceo_intro_wrap .bx-controls a {display:none !important; position:absolute; top:50%; transform:translateY(-50%);}
.ceo_intro_wrap .bx-controls a.bx-prev,
.ceo_intro_wrap .bx-controls a.bx-next {
  display:block;
  width:60px;
  height:60px;
  position: absolute;
  font-size:0;
  top:50%;
  transform:translateY(-50%);
  z-index: 2;
}
.ceo_intro_wrap .bx-controls a.bx-prev {
  left:40px;
  background:rgba(170,170,170,.5) url("./prev.png") no-repeat center;
}
.ceo_intro_wrap .bx-controls a.bx-next {
  right:40px;
  background:rgba(170,170,170,.5) url("./next.png") no-repeat center;
}



/* mobile */
@media all and (max-width:768px) {
    .ceo_intro_wrap {padding:0 0px;}
    .ceo_intro_wrap .cdiv {padding:0 15px 50px}
    .ceo_intro_wrap .cdiv > h2 {padding:50px 0 40px; font-size:20px;}
    .ceo_intro_wrap .cdiv.c1 > .clear .fl {float:left; width:100%;}
    .ceo_intro_wrap .cdiv.c1 > .clear .fl:first-child {text-align:center;}
    .ceo_intro_wrap .cdiv.c1 > .clear .fl img {max-width:100%;}
    .ceo_intro_wrap .cdiv.c1 > .clear .fl:last-child {padding-left:0; padding-top:30px;}
    .ceo_intro_wrap .cdiv.c1 > .clear .sec1 {font-size:16px;}
    .ceo_intro_wrap .cdiv.c1 > .clear .sec2 {margin-top:20px; font-size:13px;}

    .ceo_intro_wrap .cdiv.c2 .mov {width:80%;}
    
    .ceo_intro_wrap .bx-controls a.bx-prev,
    .ceo_intro_wrap .bx-controls a.bx-next {width:30px; height:30px; background-size:auto 18px !important;}
    .ceo_intro_wrap .bx-controls a.bx-prev {left:15px;}
    .ceo_intro_wrap .bx-controls a.bx-next {right:15px;}
}




.link {padding:80px 0 80px; background:#e8ecf2}
.link ul {font-size:0; text-align:center;}
.link ul li {
    display:inline-block; margin:20px 3.125%; border:solid 5px #ebbe09; border-radius:25px; background:#f8f1a7; text-align:center; overflow:hidden;
    -webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);
    box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);
}
.link ul li a {display:block; min-height:100%; padding:20px 30px;}
.link ul li a h2 {font-family: 'GmarketSansBold'; font-size:24px; color:#2e2e2e;}
.link ul li a p {font-family: 'GmarketSansLight'; font-size:24px; font-weight:300; line-height:1;}
.link ul li.dp1 {border:solid 5px #53a0e3; background:#ebf5ff;}
.link ul li.dp2 {border:solid 5px #e383b0; background:#f7ecf4;}

/* mobile */
@media all and (max-width:768px) {
    .link {padding:40px 15px 40px;}
    .link ul li {margin:20px 0; width:100%;}
    .link ul li a h2 {font-size:18px;}
    .link ul li a p {font-size:18px;}
}