@charset "utf-8";

/* 서브페이지 기본 세팅 s */
.contents * {line-height:140%}

ol.basic { margin-top:20px;}
ol.basic > li {list-style-type:decimal; margin-left:17px;  border-bottom: 1px dashed #ddd;  padding:7px 0 7px 10px;}
ol.basic > li > ul { margin-top:5px; color:#000; margin-bottom:5px;}
ol.basic > li > ul li {  padding:0 0 0 10px;}
.finish { margin-top:70px; margin-bottom:120px;}


ul.basic {margin-top: 15px;}
ul.basic li{padding-left: 10px; position: relative; margin-bottom: 5px; line-height: 150%; word-break: keep-all;}
ul.basic li:last-child {margin-bottom: 0;}
ul.basic li:before {width: 2px; height: 2px; position: absolute; background-color: #333; content: ""; top: 11px; left: 0;}

h3, .h3 { word-break: keep-all; margin-top:35px; color:#005383; font-size:26px; font-weight: 400; vertical-align: middle; letter-spacing: -1px; position: relative; padding-left: 34px; line-height: 140%;}
h3::before, .h3::before { content:''; display: inline-block; width:22px; height:22px;  background:url("/resources/img/sub/h3_ico.png") center no-repeat; vertical-align: middle; position: absolute; left:0; top:8px;}
h4, .h4 { word-break: keep-all; margin-top:25px;  font-size:20px; font-weight: 500;line-height: 140%;}
.c0 { margin-top: 0;}
.h3box { position: relative; margin-top:55px;}
.h3box h3, .h3box h4 { display: inline-block; margin-top: 0;}
.h3box::after {clear: both;  content: ''; display: block;}
p.basic { margin-top: 10px;}
p.basic.c0 {margin-top: 0;}
.c_blue {color: #206cc5;}

select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
button {/* width: 100%; height: 100%; */ background: none; border: none; cursor: pointer;}

table.basic thead th {background-color: #fafafa; font-weight: 400;}
table.basic tbody th {background-color: #fafafa;}
table.basic tbody th.th {background-color: #fafafa; font-weight: 400;}
table.basic tbody td.th {background-color: #fafafa; font-weight: 400;}
table.basic tbody td {line-height: 150%; font-size: 14px; transform: skew(-0.03deg);}

table.basic {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; table-layout: fixed;font-weight: 300; min-width: 925px; border-top: 2px solid #206cc5;}
table.basic th, table.basic td {border-top: 1px solid #eee; border-right: 1px solid #eee; padding: 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: keep-all; white-space: normal;}
table.basic td:last-child {border-right: none;}
table.basic img {width: 100%;}

table.basic2 thead th {background-color: #206cc5; color: #fff; font-weight: 400;}
table.basic2 thead th.th {background-color: #206cc5; color: #fff;}
table.basic2 tbody th{background-color: #fafafa; font-weight: 400; border-color:#ddd}
table.basic2 tbody td.th {background-color: #206cc5; font-weight: 400; color: #fff; border-color:#3d88d6}
table.basic2 tbody td {line-height: 150%; transform: skew(-0.03deg); }

table.basic2 {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; table-layout: fixed; font-weight: 300; border-left: 1px solid #eee; border-right: 1px solid #eee;}
table.basic2 th {border-top: 1px solid #3d88d6; border-right: 1px solid #3d88d6; padding: 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: keep-all; white-space: normal;}
table.basic2 td {border-top: 1px solid #eee; border-right: 1px solid #eee; padding: 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: keep-all; white-space: normal;}
table.basic2 td:last-child {border-right: none;}
table.basic2 img {width: 100%;}
table.keepall th, table.keepall td { word-break:keep-all;}



/* flicking */
.f_wrapper { border-radius:10px; width:100%; margin-top: 40px;}
.f_wrapper .f_wrapper_inner {overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;}
.f_wrapper .touch { display:none; background:url("/resources/img/common/ico_flicking.png") left 3px top -2px no-repeat; height:27px; background-size:contain; padding:0 0 0 36px; line-height:27px; margin-bottom:10px;}
.f_scroller {display:block; height:100%; padding:0; width:100%; text-align:left;}
.f_wrapper .list_table,.f_wrapper .colum_table { margin-top:20px;}

.flicking {min-width: 900px !important;}

.line_dot { border-bottom: 1px dotted #ddd; display: block; margin: 20px 0 10px;}

.c_box { word-break: keep-all; margin-top:20px; width:100%; height: 100%; padding:20px 30px; box-sizing: border-box; border:3px solid #ddd; position: relative;} 



/* 서브페이지 기본 세팅 e */

#container.sub {overflow: hidden; position: relative;}


.sub_vis {width: 100%; height: 410px; position: relative; background: url("/resources/img/sub/sub_vis01.png") no-repeat center/cover;}
.sub_vis02 {background: url("/resources/img/sub/sub_vis02.png")no-repeat center;}
.sub_vis03 {background: url("/resources/img/sub/sub_vis03.jpg")no-repeat center;}
.sub_vis04 {background: url("/resources/img/sub/sub_vis04.jpg")no-repeat center;}

.sub_vis h2 {color: #fff;position: absolute;bottom: 150px;left: 50%;transform: translateX(-50%);text-align: left;width: 100%;max-width: 1400px;font-family: 'Oswald';}
.sub_vis h2 .en_tit {font-weight: 600; font-size: 104px; position: relative;}
.sub_vis h2 .en_tit::before {position: absolute; content: ""; width: 35px; height: 35px; right: -40px; top: 10px; background: url("/resources/img/sub/sub_ment.png") no-repeat center;}
/*.sub_vis h2 .tit {font-size: 32px; font-weight: 600; margin-top: 14px;letter-spacing: 7px; display:block;}*/





.lnb {height:80px; z-index:1; position: absolute; left:50%; transform: translateX(-50%); bottom: 0; font-size: 17px; box-sizing: border-box;width: 100%; margin: 0 auto; max-width: 1400px; font-family: 'Oswald', 'NanumSquare'}
.lnb div {float: left;}
.lnb .home {width: 85px; height: 100%; display: table; position: relative;}
.lnb .home::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 50vw;height: 80px;background: #fff;}
.lnb .home a {display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; color: #206cc5; font-size: 20px; font-weight: 600;}
.lnb .depth1_name {min-width:130px; display: table; height: 100%;  box-sizing: border-box; position: relative;}
.lnb .depth1_name::before {position: absolute; content: ""; width: 4px; height: 4px; border-radius: 100%; background: #fff; right: -2px; top: 50%; transform: translateY(-50%);}
.lnb .depth1_name span {color: #fff; font-size: 20px; display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%; box-sizing: border-box; font-weight: 500;}
.lnb .lnb_menu { display: inline-block;  box-sizing: border-box; max-width: 240px; width: 100%; position: relative; z-index: 1; vertical-align: middle;}
.lnb .lnb_menu .lnb_title {padding-left: 30px; height: 80px; line-height: 3.8; display: block; font-size: 20px;  /*lnb 가리기*//*cursor: pointer;*/ color: #fff;}
.lnb .lnb_menu ul { border-top: none; border-bottom: none;box-sizing: border-box; width:100%; position: absolute; left:0; /*lnb 가리기*/visibility: hidden;  display: none !important;}
.lnb .lnb_menu li {  box-sizing: border-box; }
.lnb .lnb_menu li a {font-size: 15px;transition: .3s ease;color: #206cc5;box-sizing: border-box;display: block;padding: 20px 20px;width: 100%;border: 1px solid #ddd;border-top: 0;background: #fff;}
.lnb .lnb_menu li a:hover, .lnb .lnb_menu li.on a {background-color: #206cc5; color: #fff;}
.lnb .lnb_menu li a span { }
.lnb .lnb_menu li.on a span {vertical-align: middle; display: table-cell; transform: skew(-0.03deg);}

.lnb .lnb_menu .more_btn {width: 18px; height: 10px; background: url("/resources/img/sub/lnb_arw.png") no-repeat; position: absolute; top: 50%; right: 10px; text-indent: -99999px; transform: translateY(-50%); cursor: pointer; transition: all .3s ease-in-out; z-index: -1;  /*lnb 가리기*/display: none;}
.lnb_menu .more_btn.more_add { transform: translateY(-50%) rotate(-180deg); top: 45%;}

.sub .contents {padding: 100px 0 150px;}
.sub .c_box > ul.basic {margin-top: 0;}
.sub_title {margin-bottom: 75px; text-align: center; }
.sub_title > p {display: inline-block;color: #206cc5; font-family: 'Oswald'; font-size: 35px; border-bottom: 2px solid #206cc5; font-weight: 600;}
/*tech s*/
.sub .en_ti {font-size: 22px; font-weight: 600; font-family: 'Oswald'; color: #206cc5;}
.sub .center_ti {text-align: center; font-size: 20px; font-weight: 600; position: relative;}
.sub .center_ti::before {content: ""; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 19px; height: 2px; background: #206cc5;}
.tech .sec1 {margin-bottom: 120px;}
.tech .sec1 .txt_wrap {width: 42%; display: inline-block; margin-top: 30px;} 
.tech .sec1 .kr_ti {font-size: 45px;margin: 45px 0 75px; line-height: 120%;}
.tech .sec1 .img_wrap {width: 57%; display: inline-block; float: right;}
.tech .sec2 .img_wrap {margin: 110px 0 85px; height: 224px; text-align: center;}
.tech .sec2 .img_wrap img {width: 100%; max-width: 1225px;}
.tech .sec3 {margin-top: 85px; padding: 85px 0 150px; background: #f9f9f9;}
.tech .sec3 .title {font-size: 35px; color: #206cc5; font-weight: 600;  font-family: 'Oswald'; display: inline-block;}
.tech .sec3 .title span {border-bottom: 2px solid #206cc5;    height: 44px;
    display: inline-block;}
.tech .sec3 .ico_wrap {width: 78%; display: inline-block; float: right;}
.tech .ico_box {margin-top: 60px;}
.tech .ico_box:first-child {margin-top: 0;}
.tech .ico_box::after {clear: both;  content: ''; display: block;}
.tech .ico_box .ico {width: 80px; height: 80px; margin-right: 36px; background:#206cc5 url("/resources/img/sub/tech_ico.png") 14px 18px no-repeat; border-radius: 20px;display: inline-block; float: left;}
.tech .ico_box .ico2 {background-position: 14px -84px;}
.tech .ico_box .ico3 {background-position: 14px -183px;}
.tech .ico_box .ico4 {background-position: 14px -284px;}
.tech .ico_box .ico5 {background-position: 14px -383px;}
.tech .ico_box .txt_box {width: calc(100% - 116px); display: inline-block;}
.tech .ico_box .ti {font-family: 'Oswald', 'NanumSquare'; font-size: 22px; font-weight: 600; color: #206cc5; margin-bottom: 12px;}
.tech .ico_box .tx {color: #999; font-weight: 300; font-size: 17px;}

/*tech e*/

/*prd s*/

.sub .prd.contents {padding-bottom: 0;}
.prd .sec1 {margin-bottom: 80px;}
.prd .sec1 .txt_wrap {width: 42%; display: inline-block; margin-top: 20px;} 
.prd .sec1 .kr_ti {font-size: 45px;margin: 45px 0 75px; line-height: 120%;}
.prd .sec1 .img_wrap {width: 57%; display: inline-block; float: right;}
.prd .sec2 .c_box {margin-top: 0;}
.prd .sec3 {margin-top: 85px; padding: 85px 0 150px; background: #f9f9f9;}
.prd .sec3 .ico_box {display: inline-block;width: calc(25% - 60px);float: left;padding-left: 70px;position: relative;margin: 0 30px;box-sizing: border-box;}
.prd .sec3 .ico_box .num {font-size: 64px; font-family: 'Oswald'; font-weight: 600; color: #bbb; position: absolute; left: 0; top: 0;}
.prd .sec3 .ico_box .box .ico {width: 185px;height: 185px;margin: 0 auto;background: #206cc5 url("/resources/img/sub/prd_ico01.png") center no-repeat; border-radius: 20px;margin-bottom: 20px;}
.prd .sec3 .ico_box .box .ico2 {background-image: url("/resources/img/sub/prd_ico02.png");}
.prd .sec3 .ico_box .box .ico3 {background-image: url("/resources/img/sub/prd_ico03.png");}
.prd .sec3 .ico_box .box .ico4 { background-image: url("/resources/img/sub/prd_ico04.png");}
.prd .sec3 .ico_box .box .txt {text-align: center;}
/*prd e*/

/*what s*/
.what .sec1 {background: url("/resources/img/sub/what_bg.png") center/cover no-repeat;}
.what .con {width: 28.57%; margin-left: 7.14%; border: 2px solid #206cc5; box-sizing: border-box; padding: 20px; display: inline-block; transition: all .2s ease-in-out; float: left; background-position: center;}
.what .con:first-child {margin-left: 0;}
.what .con:first-child {margin-right: 0;}
.what .con .up {border-bottom: 2px solid #206cc5;margin: 30px 0 7%;color: #206cc5;position: relative;transition: all .2s ease-in-out; padding-bottom: 7%;}
.what .con .up .ico {position: absolute; width: 43px; height: 49px; background: url("/resources/img/sub/what_ico1_b.png") center/cover no-repeat; transition: all .2s ease-in-out; right: 0; top: 0;}
.what .con2 .up .ico {width: 50px; height: 30px; background-image: url("/resources/img/sub/what_ico2_b.png");}
.what .con3 .up .ico {width: 50px; height: 42px; background-image: url("/resources/img/sub/what_ico3_b.png");}

.what .con .up .e_ti {font-size: 22px; font-weight: 600; font-family: 'Oswald';}
.what .con .up .kr_ti {font-size: 45px;}
.what .con .desc {color: #206cc5;height: 8em; }

.what .con:hover {margin-top: -50px; background: #206cc5 url("/resources/img/sub/what01.jpg") center/cover no-repeat; box-shadow: #000;box-shadow: 20px 20px 5px -5px rgb(0 0 0 / 17%);}
.what .con2:hover {background-image: url("/resources/img/sub/what02.jpg");}
.what .con3:hover {background-image: url("/resources/img/sub/what03.jpg");}
.what .con:hover .up {border-color: #fff; color: #fff;}
.what .con1:hover .up .ico {background-image: url("/resources/img/sub/what_ico1_w.png");}
.what .con2:hover .up .ico {background-image: url("/resources/img/sub/what_ico2_w.png");}
.what .con3:hover .up .ico {background-image: url("/resources/img/sub/what_ico3_w.png");}
.what .con:hover .desc {color: #fff;}
/*what e*/
/*loca s*/
.loca .sec1 {margin-bottom: 70px;}
.loca .sec1 .txt_wrap {width: calc(100% - 220px); display: inline-block; } 
.loca .sec1 .en_ti {color: #206cc5 ;}
.loca .sec1 .kr_ti {font-size: 45px;margin: 45px 0 50px; line-height: 120%;}
.loca .sec1 .img_wrap {width: 220px; display: inline-block; float: right;}
.loca .map {height: 490px; box-sizing: border-box; border: 1px solid #ddd; margin-bottom: 50px;}
.loca .map iframe {width: 100%; height: 100%;}
.loca .info_wrap .info {width: 48.8%;  display: inline-block; float: left;}
.loca .info_wrap .info2 {margin-left: 2.4%;}
.loca .info_wrap .info3 {width: 100%; margin-top: 20px;}
.loca .info_wrap .info .ti {color: #fff; font-family: 'Oswald'; font-size: 22px; background: #206cc5; display: inline-block; float: left; text-align: center;}
.loca .info_wrap .info .ti > span {width: 178px; }
.loca .info_wrap .info .tx {font-size: 20px; background: #f2f2f2; display: inline-block; float: left; width: calc(100% - 178px); padding-left: 22px; box-sizing: border-box;}
.loca .info_wrap .info > p {display: table;}
.loca .info_wrap .info > p > span {display: table-cell; vertical-align: middle; height: 48px;}
/*loca e*/
/*faq s*/
/*자주 묻는 질문*/
.faq .sec1 .c_box {margin: 0 0 30px;}
.faq .faq_wrap {border-top: 2px solid #206cc5; box-sizing: border-box; border-bottom: 1px solid #d2d2d2;}
.faq .faq_wrap .faq_box:first-child {border-top: none;}
.faq .faq_wrap .faq_box {border-top: 1px solid #d2d2d2; box-sizing: border-box;}
.faq .faq_wrap .faq_q {min-height: 50px; background: #fff; display: table; cursor: pointer; width:100%;}
.faq .sec {margin-top: 30px;}
.faq .faq_ti {font-size: 22px; font-weight: 600; color: #206cc5; margin-bottom: 10px;}
.faq .faq_wrap .ico {width: 50px; min-height: 50px; height: 100%; background: #206cc5; display: table-cell; color: #fff; text-align: center; vertical-align: middle; box-sizing: border-box; font-family: 'Oswald'; font-weight: 600; font-size: 18px;}
.faq .faq_wrap .con {height: 100%; width: calc(100% - 50px); vertical-align: middle; padding: 10px 15px; display: table-cell;}
.faq .faq_wrap .faq_a {box-sizing: border-box; float: left; width: 100%; background: #fff; display: table; display: none; border-top: 1px solid #d2d2d2;}
.faq .faq_wrap .faq_a .ico {background: #f9f9f9; color: #206cc5;}
.faq .faq_wrap .faq_a .con {padding: 20px 15px;}
.faq .con > ol.basic > li > ul > li {color: #777;}


/*faq e*/
/*new s*/
.news_box {width: 32%; margin-right: 2%; display: inline-block;  float: left; margin-bottom: 4%;}
.news_box:nth-child(3n) {margin-right: 0%;}
.news_box .img {overflow: hidden; position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border-radius: 20px; z-index: 0; background: #e9e9e9;}
.news_box .img::after {position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.3); width: 100%; height: 100%; opacity: 0; transition: all .2s ease; z-index: 1;}
.news_box:hover .img::after {opacity: 1;}
.news_box .img img {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); transition: all .2s ease;}
.news_box .img img.wide {height: auto; width: 100%;}
.news_box .img img.tall {width: auto; height: 100%;}
.news_box .txt {margin-top: 20px;}
.news_box .txt .ti {text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden; transition: all .2s ease; font-size: 20px; font-weight: 400; letter-spacing: -1px;}
.news_box .txt .date {margin-top: 5px; font-size: 16px; color: #999;}

.news_box:hover .txt .ti {color: #206cc5;}
.news_box:hover .img img {transform: translateY(-50%) translateX(-50%) scale(1.1);}
/*new e*/
/*new view s*/
.view .view_wrap .con_wrap {padding-bottom: 40px; border-bottom: 1px solid #ccc; margin-bottom: 40px;}
.view .view_wrap .con_wrap > * {margin: 25px 0;}
.view .view_wrap .con_wrap > *:first-child {margin-top: 0;}
.view .view_wrap .con_wrap img {max-width: 100%;}
.view .view_wrap .title_box {margin-bottom: 40px;padding-bottom: 15px;display: table;width: 100%;border-bottom: 1px solid #206cc5;}
.view .view_wrap .title_box .title {display: table-cell;width: calc(100% - 150px);font-size: 22px;font-weight: 600;}
.view .view_wrap .title_box .date {display: table-cell;text-align: right; width: 150px; font-family: 'Oswald';color: #888;font-weight: 100;font-size: 15px;vertical-align: middle;height: 100%;}
.view .btn_wrap {text-align: center;}
.view .btn_wrap .btn {display: inline-block;width: 130px;height: 50px;line-height: 49px; font-size: 17px;border: 1px solid #ccc;font-weight: 400; padding-right: 15px; background: url("/resources/img/common/list_btn_b.png") center right 30px no-repeat;transition: all .2s ease-in-out;box-sizing: border-box;}
.view .btn_wrap .btn:hover {color: #fff; background-color: #206cc5;background-image:  url("/resources/img/common/list_btn_w.png"); border-color: #206cc5;}
/*new view e*/
/*partners s*/
.pr_box {width: 18.4%;margin:0 2% 2% 0;display: inline-block;float: left;padding: 2% 0.5%;box-sizing: border-box; border: 1px solid #ddd;text-align: center; transition: all .2s ease-in-out; position: relative; overflow: hidden;}
.pr_box:hover {transform: translateY(-10px);}
.pr_box:nth-child(5n) {margin-right: 0;}
.pr_box:before {top: 0;}
.pr_box:after {bottom: 0;}
.pr_box:hover > *:before, .pr_box:hover > *:after {transform: translate3d(0, 0, 0);}
.pr_box:hover:before, .pr_box:hover:after {transform: translate3d(0, 0, 0);}
.pr_box:before {left: 0;}
.pr_box:after {right: 0;}
.pr_box > *:before, .pr_box > *:after {content: "";position: absolute;left: 0;z-index: 9;height: 1px;width: 100%;background-color: #206cc5;}
.pr_box > *:before {top: 0;transform: translate3d(-105%, 0, 0); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.pr_box > *:after {bottom: 0;transform: translate3d(105%, 0, 0); transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.pr_box:before, .pr_box:after { content: ""; position: absolute; top: 0; z-index: 9; height: 100%; width: 1px; background-color: #206cc5;}
.pr_box:before { left: 0; transform: translate3d(0, 105%, 0);  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.pr_box:after { right: 0; transform: translate3d(0, -105%, 0);  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);}
.pr_box .pr_logo {width: 170px;height: 58px;margin: 0 auto;position: relative;}
.pr_box .pr_logo img {width: 100%; position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.pr_box .pr_name {margin-top: 20px; font-size: 14px;}
/*partners e*/
/*touch s*/
.touch .sub_title {display: none;}
.touch .tab_box {text-align: center; display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex;   display: flex;  align-items: center; justify-content: center;  margin-top: 40px;}
.touch .tab_box a {display: inline-block; height: 50px;  border: 1px solid #ddd; text-align: center; line-height: 50px; box-sizing: border-box; width: 25%; margin-left: -1px; transition: all .2s ease-in-out;}
.touch .tab_box a.on, .touch .tab_box a:hover { background-color: #206cc5;  color: #fff;  border: 1px solid #206cc5;  z-index: 1;}
.touch .sec .img_wrap {text-align: center; margin-top: 50px;}
.touch .btn_wrap {background: linear-gradient(90deg, rgba(46,76,109,1) 0%, rgba(39,133,158,1) 50%, rgba(32,117,206,1) 100%); margin-top: 12%; text-align: right;}
.touch .btn_wrap .inner {padding: 7% 0; box-sizing: border-box;}
.touch .btn_wrap .info {float: right; text-align: center; min-width: 335px;}
.touch .btn_wrap .w_ti {color: #fff; margin-bottom: 20px; font-size: 32px; font-weight: 600;}
.touch .btn_wrap .w_ti > span {display: block;font-size: 20px; font-weight: 300;}
.touch .sec .btn_wrap .prd { width: 55%;height: 130%; background: url("/resources/img/sub/case_prd.png") center/contain no-repeat; position: absolute; bottom: 10%;}
.touch .sec2 .btn_wrap .prd {background-image: url("/resources/img/sub/case_prd11.png");}
.touch.wallet .sec .btn_wrap .prd {background-image: url("/resources/img/sub/wallet_prd.png");}
.touch.wallet2 .sec .btn_wrap .prd {background-image: url("/resources/img/sub/wallet_2nd_prd.png");}
/*pay_m Add*/
.touch.paym .sec .btn_wrap .prd {background-image: url("/resources/img/sub/touch_paym_prd.png");}
/*pay_m Add*/
.touch .btn_wrap .link {padding: 20px 80px; border: 1px solid #fff; transition: all .3s ease-in-out; display: inline-block;}
.touch .btn_wrap .link span {color: #fff; position: relative; transition: all .3s ease-in-out;}
.touch .btn_wrap .link span::before {position: absolute; content: ""; width: 16px; height: 16px; background: url("/resources/img/sub/ico_short.png") center/contain no-repeat; top: 50%; right: 0; transform: translateY(-50%); opacity: 0;transition: all .3s ease-in-out;}
.touch .btn_wrap .link:hover {padding-right: 110px;}
.touch .btn_wrap .link:hover span::before {opacity: 1; right: -30px;}

/*touch e*/
/*who s*/
.sub .contents.who {padding-bottom: 0;}
.who .sec1 .img_bg {background: url("/resources/img/sub/who_bg.jpg") center/cover no-repeat;padding: 150px 0;background-attachment: fixed;}
.who .sec1 .w_ti {color: #fff; font-size: 48px;text-transform: uppercase;}
.who .sec2 {background: url("/resources/img/sub/what_bg.png") center center/cover no-repeat;padding: 120px 0 150px;}
.who .center_ti {font-weight: 400; line-height: 160%;}
.who .center_ti::before {top: -15px; bottom: auto;}
/*who e*/

@media screen and (max-width:1300px){
    /*prd s*/
    .prd .sec3 .ico_box { padding-left: 60px; margin: 0 10px; width: calc(25% - 20px);}
    .prd .sec3 .ico_box .num {    font-size: 50px;}
    .prd .sec3 .ico_box .box .ico {width: 160px;height: 160px; }

    /*prd e*/

}

@media screen and (max-width:1200px){
    .what .con {width: 32%; margin-left: 2%;}
    .loca .sec1 .kr_ti {font-size: 42px;    margin: 30px 0;}
    .loca .sec1 .txt_wrap {width: calc(100% - 180px);}
    .loca .sec1 .img_wrap {width: 180px;}
    .loca .sec1 .img_wrap > img {width: 100%;}
}
@media screen and (max-width:1100px){
    /*tech s*/
    .tech .sec1 .txt_wrap {width: 50%; margin-top: 20px;}
    .tech .sec1 .img_wrap {width: 50%;}
    /*tech e*/
    /*prd s*/
    .prd .sec1 .txt_wrap {width: 50%; margin-top: 20px;}
    .prd .sec1 .img_wrap {width: 50%;}

    /*prd e*/
}
@media screen and (max-width:1024px){
    body {font-size:15px;}
    .sub .contents {padding: 70px 0 80px;}
    
    .lnb {height: 65px;}
    .lnb .home::before {height: 65px;}
    .lnb .home a {font-size: 17px;}
    .lnb .depth1_name span {font-size: 17px;}
    .lnb .lnb_menu .lnb_title {height: 65px; line-height: 3.5; font-size: 17px;}
    
    .sub_title {margin-bottom: 60px;}
    
    /*tech s*/
    .tech .sec1 {margin-bottom: 60px;}
    .tech .sec1 .txt_wrap {width: 100%;}
    .sub .en_ti {font-size: 17px;}
    .tech .sec1 .kr_ti {font-size: 28px; margin: 20px 0 0;}
    .tech .sec1 .kr_ti .pc_block {display: inline-block;}
    .tech .sec1 .desc {font-size: 15px;}
    .tech .sec1 .img_wrap {width: 100%; margin: 30px 0 0;}
    .tech .sec1 .img_wrap img {width: 100%;}
    .sub .center_ti {margin-bottom: 50px;}
    .tech .sec2 .img_wrap {margin: 0 0 40px; height: auto;}
    .tech .sec3 {margin-top: 40px; padding: 40px 0 80px;}
    .tech .sec3 .title {width: 100%; display: block; float: none; margin-bottom: 40px; font-size: 25px;}
    .tech .sec3 .title span {height: 32px;}
    .tech .sec3 .ico_wrap {width: 100%;}
    .tech .ico_box .txt_box {width: calc(100% - 86px);}
    .tech .ico_box .ico {width: 65px; height: 65px; margin-right: 15px; background-position: 7px 10px; }
    .tech .ico_box .ico2 {background-position: 7px -91px;}
    .tech .ico_box .ico3 {background-position: 7px -190px;}
    .tech .ico_box .ico4 {background-position: 7px -291px;}
    .tech .ico_box .ico5 {background-position: 7px -391px;}
    /*tech e*/
    /*prd s*/
    .prd .sec1 {margin-bottom: 60px;}
    .prd .sec1 .txt_wrap {width: 100%;}
    .prd .sec1 .kr_ti {font-size: 28px; margin: 20px 0 35px;}
    .prd .sec1 .desc {font-size: 15px;}
    .prd .sec1 .img_wrap {width: 100%; margin: 0;}
    .prd .sec1 .img_wrap img {width: 100%;}
    .prd .sec3 {margin-top: 40px; padding: 40px 0 80px;}

    .prd .sec3 .ico_box { padding-left: 36px; margin: 0 calc(12.5% - 78px); width: 156px;}
    .prd .sec3 .ico_box .box .ico {width: 120px; height: 120px;    background-size: 60%;}
    .prd .sec3 .ico_box .box .ico2 {background-size: 73%;}
    .prd .sec3 .ico_box .box .ico3 {background-size: 48%;}
    .prd .sec3 .ico_box .box .ico4 {background-size: 56%;}
    .prd .sec3 .ico_box .num {font-size: 30px;}
    /*prd e*/
    .what .con .up {margin: 20px 0 10%;}
    .what .con .up .e_ti {font-size: 18px;}
    .what .con .up .kr_ti {font-size: 35px;}
    .what .con .desc {height: 10.5em;}
    .what .con {padding: 15px;}
    .what .con:hover {margin-top: -20px;}
    
    .loca .sec1 {position: relative;}
    .loca .sec1 .txt_wrap {width: 100%;}
    .loca .sec1 .img_wrap {top: 0; right: 0; position: absolute;}
    .loca .sec1 .kr_ti {font-size: 35px; margin: 20px 0;}
    .loca .sec1 { margin-bottom: 60px;}
    .loca .map {height: 380px;}
    .loca .info_wrap .info .tx { font-size: 17px;}
    .loca .info_wrap .info .ti {    font-size: 20px;}
    .loca .info_wrap .info .ti > span {    width: 128px;}
    .loca .info_wrap .info .tx {width: calc(100% - 128px);}

    
    .news_box {width: 49%; margin-right: 2%;}
    .news_box:nth-child(3n) {margin-right: 2%;}
    .news_box:nth-child(2n) {margin-right: 0;}
    
    
    .pr_box {width: 23.5%; margin:0 2% 2% 0;}
    .pr_box:nth-child(5n) {margin-right: 2%;}
    .pr_box:nth-child(4n) {margin-right: 0;}
    .pr_box .pr_logo {width: 150px;}
    
    .who .sec1 .img_bg {padding: 100px 0;}
    .who .sec1 .w_ti {font-size: 38px;}
    .who .sec2 {padding: 100px 0 130px;}
    .who .center_ti {font-size: 17px;}
}

@media screen and (max-width:900px){
        /* flicking */
.f_wrapper .touch { display:block; }
.f_scroller { width:900px; padding:4px}
        

}

@media screen and (max-width:768px){
.lnb { border:none; border-top:1px solid rgba(255,255,255,.2);}
.lnb .home { display:none;}
.lnb .depth1_name {display:none;}
.lnb .lnb_menu {min-width:100%; width:100%; border-right:none;}

.sub_vis {height: 360px;}
.sub_vis h2 {bottom: 110px; padding-left: 60px;}
.sub_vis h2 .en_tit {    font-size: 68px;}
    
h3, .h3 {font-size: 22px;}
h4, .h4 {font-size: 19px;}
.c_box {    padding: 10px;}
    
    
    .sub_title > p {font-size: 25px;}
/*tech s*/
.tech .ico_box .tx {display: block;}

/*tech e*/
    .prd .sec3 .ico_box {margin: 0 calc(25% - 78px);}
    .prd .sec3 .ico_box .box .ico {margin-bottom: 10px;}
    .prd .sec3 .ico_box .box .txt {height: 2.8em; margin-bottom: 20px;}

    .what .con {width: 100%; padding: 20px; margin-left: 0; margin-bottom: 30px; float: none;}
    .what .con:hover {box-shadow:none; margin-top: 0;}
    .what .con:last-child {margin-bottom: 0;}
    .what .con .up {    margin: 20px 0;
    padding-bottom: 20px;}
    .what .con .desc {height: auto;}
    
    .loca .sec1 .kr_ti {font-size: 28px;}
    .loca .info_wrap .info {width: 100%;}
    .loca .info_wrap .info2 {margin-left: 0; margin-top: 20px;}
    .loca .info_wrap .info .ti {font-size: 17px;}
    .loca .info_wrap .info .ti > span {    width: 78px;}
    .loca .info_wrap .info .tx {    width: calc(100% - 78px);font-size: 15px; padding:0 10px;}
    
    .news_box .txt .ti {font-size: 17px;}
    .news_box .txt .date {    font-size: 14px;}
    
    
    .view .view_wrap .title_box {display: block; padding-bottom: 15px; margin-bottom: 30px;}
    .view .view_wrap .title_box .title {width: 100%; display: block; text-align: center; margin-bottom: 5px; font-size: 20px;}
    .view .view_wrap .title_box .date{display: block; width: 100%;  text-align: center; font-size: 14px;}
    .view .view_wrap .con_wrap{padding-bottom: 30px; margin-bottom: 30px;}
    .view .view_wrap .con_wrap > * {margin: 15px 0;}
    .view .btn_wrap .btn {width: 100px; height: 45px; line-height: 43px; font-size: 17px; background-position: top 14px right 20px; background-size: 13%; padding-right: 13px;}
    
    
    .pr_box {width: 49%; margin:0 2% 2% 0;padding: 15px;}
    .pr_box:hover {transform: translateY(0);}
    .pr_box:nth-child(2n) {margin-right: 0;}
    .pr_box .pr_logo {width: 150px;}
    .pr_box .pr_name {    margin-top: 8px;}
    
    .touch .tab_box a {width: 50%;}
    .touch .sec .img_wrap img {width: 100%;}
    .touch .btn_wrap {margin-top: 14%;}
    .touch .btn_wrap .inner{ padding: 9% 0 5%;}
    .touch .sec .btn_wrap .prd { width: 100%; position: relative; height: 200px;  margin-top: -21%;}
    .touch .btn_wrap .info {float: none; min-width: auto;}
    .touch .btn_wrap .w_ti {text-align: center; margin-top: 20px;}
    .touch .btn_wrap .link {display: block; width: 100%; box-sizing: border-box; padding: 20px; text-align: center; margin-top: 20px;}
    .touch .btn_wrap .link:hover {padding: 20px;}
    .touch .btn_wrap .link:hover span {padding-right: 20px;}
    .touch .btn_wrap .link:hover span::before {right: -15px;}
    
    
    /*who s*/
.who .sec1 .img_bg {padding: 60px 0; background-attachment: inherit; background-position: center bottom;}
.who .sec1 .w_ti {font-size: 28px;}
.who .sec2 {padding: 70px 0 80px;}
.who .center_ti {text-align: left; }
/*who e*/
    
}



@media screen and (max-width:500px){

    .sub_vis h2 {padding-left: 30px;}
    .sub_vis h2 .en_tit {font-size: 60px;}
    .lnb .lnb_menu .lnb_title {padding-left: 15px;}
    
    .prd .sec3 .ico_box .box .ico {width: 110px; height: 110px;}
    .prd .sec3 .ico_box {padding-left: 26px; margin: 0 calc(25% - 68px); width: 136px;}
    .prd .sec3 .ico_box .num {font-size: 20px;}
    .prd .sec3 .ico_box .box .txt {font-size: 13px;}
    
    .loca .sec1 .img_wrap {width: 100px;}
    .loca .info_wrap .info { position: relative;}
    .loca .info_wrap .info > p > span { display: inline-block;height: 100%;  padding: 13px 0;}
    .loca .info_wrap .info .tx {float: right;}
    .loca .info_wrap .info .ti {position: absolute; height: 100%;  display: table;}
    .loca .info_wrap .info .ti > span {    width: 78px; display: table-cell; vertical-align: middle; height: 100%; padding: 0;}
    
    
    .news_box {width: 100%; margin-right: 0;}
    .news_box .txt {margin-top: 10px;}
    .news_box {    margin-bottom: 7%}
    
    .pr_box .pr_logo { width: 110px;}
    .pr_box .pr_name {margin-top: 5px;}
    
    .touch .tab_box {display: block;}
    .touch .tab_box a {width: 100%; display: block;}
}