@charset "utf-8";

/* reset */
* {box-sizing:border-box}
body {overflow-y:auto; position:relative; line-height:1.5; font-size:16px; font-family:Arial, AppleGothic, Verdana, sans-serif; color:#333;word-break: keep-all;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, address {margin:0; padding:0;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
pre {margin:0; padding:0; word-wrap:break-word; white-space:pre-line}
table {border:0; border-collapse:collapse; border-spacing:0; width:100%; table-layout: fixed;}
fieldset, img {border:0;vertical-align:top}
ul, li {list-style:none}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; line-height:1em}
a {text-decoration:none; cursor:pointer;color:inherit;}
body {position:relative}
em {font-style:normal}
legend, hr, caption {display:none}

/* skip menu */
.skip{display:relative;}
.skip a{display:block;width:100%;position:absolute;top:-50px;left:0;line-height:50px;background:#333;color:#fff;text-align:center;font-size:16px;font-weight:700;}
.skip a:focus, .skip a:active{top:0;z-index:999;}

/* common elements */
.clr:after{content:"";display:block;clear:both;}
.fl_right{float:right;}
.fl_left{float:left;}
.scrollx{overflow-x:scroll;}

input[type="text"], input[type="password"], textarea{height:40px;width:100%;border-radius:3px;border:1px solid #e3ebf6;font-size:16px;color:#4c5365;padding-left:10px;box-sizing:border-box;transition:all 0.3s;}
select::-ms-expand , input[type="text"]::-ms-clear, input[type="password"]::-ms-reveal{display:none;}
select{height:40px;width:100%;border-radius:3px;border:1px solid #e3ebf6;font-size:16px;color:#4c5365;padding-left:10px;box-sizing:border-box;transition:all 0.3s;appearance: none;-webkit-appearance: none;-moz-appearance: none;position:relative;background:#fff url(../images/selectArrow.png)no-repeat 96% center;}
input[type="text"]:focus, select:focus, input[type="password"]:focus, textarea:focus{color: #303e67;background-color: #fff;border:1px solid rgba(23,97,253,0.5) !important;outline: 0;-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
input[type="text"]:disabled{background:#f6f9fc;}
select:disabled{background:#f6f9fc url(../../images/os/contents/selectArrow.png)no-repeat 98% center;}
input::placeholder{color:#656d9a;}

label.label{display:inline-block;margin-right:20px;position:relative;padding-left:21px;cursor:pointer;color:#4c5365;line-height:38px;}
label.label input{position:absolute;z-index:-1;opacity:0;}
.mark{position:absolute;top:50%;margin-top:-7px;left:0;height:16px;width:16px;background:#fff;border:1px solid #d3d9e7;box-sizing:border-box;}
.radio .mark{border-radius:50%;}
label.label:hover input ~ .mark, label.label input:focus ~ .mark{border:1px solid rgba(23,97,253,0.5);-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
label.label input:checked ~ .mark{background:#1761fd;border:1px solid #1761fd;}
label.labell:hover input:not([disabled]):checked ~ .mark, label.label input:checked:focus ~ .mark{border:1px solid rgba(23,97,253,0.5);-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
label.label input:disabled ~ .mark{background:#e6e6e6;opacity:0.6;pointer-events:none;}
.mark:after{content:'';position:absolute;display:none;}
label.label input:checked ~ .mark:after{display:block;}
.mark.on:after{display:block;}
.mark.on{background: #1761fd;border: 1px solid #1761fd;}
.checkbox .mark:after{left:5px;top:2px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.checkbox input:disabled ~ .mark:after{border-color:#1761fd;}
.radio .mark:after{left:3px;top:3px;height:8px;width:8px;border-radius:50%;background:#fff;}
.radio input:disabled ~ .mark:after{background:#1761fd;}

/* 
 <label class="label checkbox">First checkbox
    <input type="checkbox" checked="checked">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Second checkbox
    <input type="checkbox">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Disabled
    <input type="checkbox" disabled="disabled">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Disabled &amp; checked
    <input type="checkbox" disabled="disabled" checked="checked">
    <div class="mark"></div>
  </label>

  <label class="label radio">First radio
    <input type="radio" name="radio" checked="checked">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Second radio
    <input type="radio" name="radio">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Disabled
    <input type="radio" name="radio2" disabled="disabled">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Disabled &amp; checked
    <input type="radio" name="radio2" disabled="disabled" checked="checked">
    <div class="mark"></div>
  </label>
 */

/* width */
.wd100{width:100% !important;}
.wd90{width:90% !important;}
.wd80{width:80% !important;}
.wd70{width:70% !important;}
.wd60{width:60% !important;}
.wd50{width:50% !important;}
.wd40{width:40% !important;}
.wd30{width:30% !important;}
.wd25{width:25% !important;}
.wd20{width:20% !important;}
.wd15{width:15% !important;}
.wd10{width:10% !important;}

.wd_50{width:50px !important;}
.wd_100{width:100px !important;}
.wd_200{width:200px !important;}
.wd_300{width:300px !important;}
.wd_400{width:400px !important;}
.wd_500{width:500px !important;}

/* align */
.t_c{text-align:center !important;}
.t_l{text-align:left !important;}
.t_r{text-align:right !important;}

/* background */
.bg_basic{background:#1761fd;} a.bg_basic:hover{background:#1054e4;}
.bg_gray{background:#616a7d;} a.bg_gray:hover{background:#4d5567;}
.bg_blue{background:#1761fd;} a.bg_basic:hover{background:#1054e4;}
.bg_green{background:#02b86c;}
.bg_red{background:#f5325c !important;} a.bg_red:hover{background:#e4254e !important;}

/* font color */
.txt_white{color:#fff !important;}
.txt_red{color:#f32f5e !important;}
.txt_basic{color:#1761fd !important;}
.txt_blue{color:#1761fd;}
.txt_black{color:#000;}
.txt_gray{color:#888;}

.txt_b{font-weight:700;}

/* margin */
.mg0{margin:0 !important;}
.mg10{margin:10px;}
.mg0auto{margin:0 auto;}
.mgt0{margin-top:0 !important;}
.mgt5{margin-top:5px;}
.mgt10{margin-top:10px !important;}
.mgt20{margin-top:20px;}
.mgt30{margin-top:30px;}
.mgt40{margin-top:40px;}
.mgt50{margin-top:50px;}
.mgt100{margin-top:100px !important;}
.mgb0{margin-bottom:0 !important;}
.mgb10{margin-bottom:10px;}
.mgb20{margin-bottom:20px;}
.mgb30{margin-bottom:30px;}
.mgb40{margin-bottom:40px;}
.mgb50{margin-bottom:50px;}
.mgb100{margin-bottom:100px;}
.mgl0{margin-left:0 !important;}
.mgl10{margin-left:10px !important;}
.mgl20{margin-left:20px;}
.mgl30{margin-left:30px;}
.mgl40{margin-left:40px;}
.mgl50{margin-left:50px;}
.mgl100{margin-left:100px;}
.mgr0{margin-right:0 !important;}
.mgr5{margin-right:5px;}
.mgr10{margin-right:10px;}
.mgr20{margin-right:20px;}
.mgr30{margin-right:30px;}
.mgr40{margin-right:40px;}
.mgr50{margin-right:50px;}
.mgr100{margin-right:100px;}

/* padding */
.pd0{padding:0 !important;}
.pd0_10{padding:0 10px !important;}
.pd10{padding:10px !important;}
.pd20{padding:20px;}
.pdt0{padding-top:0 !important;}
.pdt10{padding-top:10px;}
.pdt20{padding-top:20px;}
.pdt30{padding-top:30px;}
.pdt40{padding-top:40px;}
.pdt50{padding-top:50px;}
.pdt100{padding-top:100px;}
.pdb0{padding-bottom:0 !important;}
.pdb10{padding-bottom:10px;}
.pdb20{padding-bottom:20px;}
.pdb30{padding-bottom:30px;}
.pdb40{padding-bottom:40px;}
.pdb50{padding-bottom:50px;}
.pdb100{padding-bottom:100px;}
.pdl0{padding-left:0 !important;}
.pdl10{padding-left:10px;}
.pdl20{padding-left:20px;}
.pdl30{padding-left:30px;}
.pdl40{padding-left:40px;}
.pdl50{padding-left:50px;}
.pdl100{padding-left:100px;}
.pdr0{padding-right:0;}
.pdr10{padding-right:10px;}
.pdr20{padding-right:20px;}
.pdr30{padding-right:30px;}
.pdr40{padding-right:40px;}
.pdr50{padding-right:50px;}
.pdr100{padding-right:100px;}

/* border */
.bd0{border:0 !important;}
.bdb0{border-bottom:0 !important;}
.bdall{border:1px solid #e3ebf6;}

/* display */
.disIn{display:inline;}
.disIb{display:inline-block !important;}
.disBl{display:block;}
.posR{position:relative;}

/* #wrapper{min-width:1400px;overflow-x:auto;} */

/* header */
.web_header {width:100%;}
.web_header h1{margin:20px auto;text-align:center;}
.gnbWrap{background:#363636;}
.gnbWrap>ul{width:1100px;margin:0 auto;display:flex;align-items: center;justify-content: center;gap:50px;height:50px;}
.gnbWrap>ul> li{position:relative;}
.gnbWrap>ul> li > a{display:block;color:#fff;position:relative;line-height:50px;}
.gnbWrap>ul ul{width: max-content;position:absolute;top:50px;left:50%;background:#f2f2f2;padding:20px 30px;transform: translateX(-50%);display:none;z-index:99;}
.gnbWrap>ul > li:hover ul{display:block;}
.gnbWrap>ul ul a{transition:all 0.3s;margin:3px 0;display:block;text-align:center;}
.gnbWrap>ul ul a:hover{color:#1fab00;}

/* footer */
.footer{position: relative;width: 100%;background-color: #eee;padding: 50px;text-align:center;}
.footer ul{display:flex;justify-content: center;margin:20px 0;gap:40px;}
.footer .ftCont{width:1100px;margin:0 auto;font-size:14px;}
.footer .ftCont span{display:inline-block;margin:0 10px;color:#888;}
.footer .ftCont .copy{margin-top:10px;color:#aaa;}

/* main - slide */
.mainContWrap{height:750px;background:url(../img/mainBg.jpg)no-repeat 50% 0%;}
.mainContWrap .txtWrap{width:1100px;margin:0 auto;display:flex;flex-direction: column;justify-content: center;height:100%;padding-left:600px;}
.mainContWrap .txtWrap h2{color:#4c770c;font-size:68px;margin-bottom:10px;}
.mainContWrap .txtWrap p{font-size:18px;color:#666;}


/* main - video */
.mainYoutube{width:100%;max-width:1400px;padding-bottom:44%;margin:80px auto;position:relative;overflow:hidden}
.mainYoutube iframe,.mainYoutube object,.mainYoutube embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;max-height: 788px;}
.mainYoutube img{position:absolute;left:0;top:0;cursor: pointer;width:100%;}

/* sub Contents */
.subContWrap{position:relative;width:1100px;margin:50px auto;display:flex;justify-content: space-between;}
.subMenu{width:250px;}
.subMenu ul{margin-top:30px;border-top:1px solid #ddd;}
.subMenu li{border-bottom:1px solid #ddd;padding:15px 5px;}
.subMenu a{color:#000;font-weight:600;}
.subCont{width:750px;}
.subTop{display:flex;justify-content: space-between;border-bottom:1px solid #ddd;align-items: center;margin-bottom:50px;height:58px;}
.subTop .subTit{font-size:28px;color:#000;font-weight:600;}
.subCont .navi{display:flex;align-items: center;gap:10px;justify-content: flex-end;}
.subCont .navi li{line-height:1;display:flex;align-items: center;font-size:14px;color:#888;}
.subCont .navi li:first-child svg{margin-right:5px;}
.subMap h2{color:#0177bd;font-size:20px;font-weight:500;margin-bottom:10px;}
.subMap p{color:#000;}
.subMap span{display:block;margin:20px 0;font-size:14px;color:#555;}
.subCont img{max-width:100%;}

.bizWrap h2{font-size:28px;color:#000;font-weight:600;}
.bizWrap dl{margin-top:50px;}
.bizWrap dt{font-size:20px;font-weight:600;margin-bottom:5px;}


@media all and (max-width: 1200px) {
	.gnbWrap>ul{width:100%;padding:0 50px;}
	.footer .ftCont{width:100%;padding:0 50px;}
	.subContWrap{flex-direction: column;margin:0 auto;width:100%;}
	.subContWrap .subMenu{width:100%;display:flex;align-items: center;background:#f2f2f2;padding:40px 50px;gap:50px;justify-content: center}
	.subMenu ul{display:flex;border-top:0;margin-top:0;gap:30px;}
	.subMenu li{border-bottom:0;padding:0;}
	.subContWrap .subCont{width:100%;padding:50px;}
	.subCont .imgWrap{text-align:center;}
	.subCont .imgWrap img{max-width:100%;}
	.mainContWrap .txtWrap{width:100%;padding-left:50%;}
}

@media all and (max-width: 767px) {
	.mainContWrap{height:350px;background-size: cover;}
	.mainContWrap .txtWrap{padding-bottom:50px;}
	.mainContWrap .txtWrap h2{font-size:24px;}
	.mainContWrap .txtWrap p{font-size:14px;}
	.gnbWrap>ul> li:hover ul{display:none;}
	.subContWrap .subMenu{padding:20px 15px;}
	.subContWrap .subMenu img{display:none;}
	.subMenu ul{flex-wrap: wrap;gap:0;justify-content: center;}
	.subMenu a{font-size:14px;display:block;margin:2.5px 7.5px;}
	.subContWrap .subCont{padding:15px;}
	.subTop {height:auto;flex-wrap: wrap;padding-bottom:10px;gap:5px;}
	.subTop .subTit{font-size:20px;}
	.subCont .navi{gap:2.5px;}
	.subCont .navi li{font-size:12px;}
	.imgWrap iframe{width:100%;max-height:350px;}
	.footer ul{gap:20px;font-size:14px;}
	.footer .ftCont{padding:0;font-size:13px;}
	.bizWrap{padding:15px;}
	.bizWrap h2{font-size:24px;}
	.bizWrap dl{margin-top:20px;}
	.bizWrap dt{font-size:16px;}
	.bizWrap dd{font-size:14px;}
}