@charset "utf-8";

/*float*/
.clear_after:after {content:""; display:block; clear:both;}
.left {float:left;}
.right {float:right;}
.ta_l {text-align:left;}
.center {text-align:center;}
.ta_r {text-align:right;}
.inner {width:1200px; margin:0 auto; margin-bottom: 50px;}
.clear_both {clear:both;}
/*margin*/
.mg0{margin:0;}

.mb0{margin-bottom:0px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb3{margin-bottom:3px;}
.mb4{margin-bottom:4px;}
.mb5{margin-bottom:5px;}
.mb6{margin-bottom:6px;}
.mb7{margin-bottom:7px;}
.mb8{margin-bottom:8px;}
.mb9{margin-bottom:9px;}
.mb10{margin-bottom:10px;}
.mb11{margin-bottom:11px;}
.mb12{margin-bottom:12px;}
.mb13{margin-bottom:13px;}
.mb14{margin-bottom:14px;}
.mb15{margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mb17{margin-bottom:17px;}
.mb18{margin-bottom:18px;}
.mb19{margin-bottom:19px;}
.mb20{margin-bottom:20px;}
.mb21{margin-bottom:21px;}
.mb22{margin-bottom:22px;}
.mb23{margin-bottom:23px;}
.mb24{margin-bottom:24px;}
.mb25{margin-bottom:25px;}
.mb26{margin-bottom:26px;}
.mb27{margin-bottom:27px;}
.mb28{margin-bottom:28px;}
.mb29{margin-bottom:29px;}
.mb30{margin-bottom:30px;}
.mb31{margin-bottom:31px;}
.mb32{margin-bottom:32px;}
.mb33{margin-bottom:33px;}
.mb34{margin-bottom:34px;}
.mb35{margin-bottom:35px;}
.mb36{margin-bottom:36px;}
.mb37{margin-bottom:37px;}
.mb38{margin-bottom:38px;}
.mb39{margin-bottom:39px;}
.mb40{margin-bottom:40px;}
.mb45{margin-bottom:45px;}
.mb50{margin-bottom:50px;}
.mb53{margin-bottom:53px;}
.mb55{margin-bottom:55px;}
.mb60{margin-bottom:60px;}
.mb65{margin-bottom:65px;}
.mb70{margin-bottom:70px;}
.mb75{margin-bottom:75px;}
.mb80{margin-bottom:80px;}
.mb85{margin-bottom:85px;}
.mb90{margin-bottom:90px;}
.mb95{margin-bottom:95px;}
.mb100{margin-bottom:100px;}

.mr0{margin-right:0;}
.mr6{margin-right:6px;}
.mr7{margin-right:7px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr15{margin-right:15px;}

.mt0{margin-top:0px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt18{margin-top:18px;}
.mt20{margin-top:20px;}
.mt25{margin-top:25px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt100{margin-top:100px;}
.mt200{margin-top:200px;}


.ml50{margin-left:50px;}
.ml30{margin-left:30px;}
.ml28{margin-left:28px;}
.ml20{margin-left:20px;}
.ml19{margin-left:19px;}
.ml18{margin-left:18px;}
.ml11{margin-left:11px;}
.ml10{margin-left:10px;}
.ml9{margin-left:9px;}
.ml7{margin-left:7px;}
.ml5{margin-left:5px;}
.ml2{margin-left:2px;}
.ml1{margin-left:1px;}

.pd0{padding:0;}

.text_sm {font-size:14px;}

/*display*/
.none{display:none;}
.table{display:table;}
.cell{display:table-cell;}
.row{display:table-row;}

/*font*/
.fc_blue{color:#04a6ec;}
.fc_red{color:#fb2704;}
.fc_666{color:#666666;}

.fs_13{font-size:13px;}
.bold{font-weight:700;}
.mid{font-weight:600;}




/***************************** layout *************************************/

/*body*/
#wrap{width:100%;}
#header,
#container,
#footer{width:100%; height:auto;}


/*header*/
#header {position:absolute; top:10px; z-index:500;}
#header .top_slide {float:left; width:36%; height:30px; background-color:rgba(255,255,255,.2); overflow:hidden; border-radius:100px;}
#header .top_slide .rolling{position:relative; width:270px; width:100%; height:auto;}
#header .top_slide .rolling li{width:100%; height:30px; padding:0 20px;}
#header .top_slide .rolling li a{display:block; font-weight:300; font-size:14px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal; word-wrap:break-word; word-break:break-all; overflow:hidden; line-height:30px; color:#fff;}

#header .header_top {margin-bottom:10px;}
#header .header_bar{height:50px; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.2);}
#header .logo {float:left; width:18%; }
#header .logo a {display:block; width:180px;}
#header .logo a img {display:block; width:80%;}

#header .gnb {float:right; width:70%; text-align:right;}
#header .gnb ul > li {display:inline-block; height:50px; font-weight:600; padding-left:4%; margin-right:-5px;}
#header .gnb ul > li > button {position:relative; color:#000; display:block; width:100%; font-weight:600; height:100%; background-color:transparent;}
#header .gnb ul > li > button:hover {color:#0fb7ff;}
#header .gnb ul > li > button:after {content:""; display:block; width:100%; height:4px; background-color:#0fb7ff; position:absolute; top:46px; opacity:0;}
#header .gnb ul > li > button:hover:after {opacity:1;}
#header .gnb ul > li:last-child {margin-right:0;}
#header .gnb .header_mypage {background-color:#666; margin-left:3%;}
#header .gnb .header_aniss {background-color:#0fb7ff;}
#header .gnb .header_mypage,
#header .gnb .header_aniss {width:14%; text-align:center; padding-left:0;}
#header .gnb .header_mypage > button,
#header .gnb .header_aniss > button {color:#fff;}
#header .gnb .header_mypage:hover {background-color:#525252;}
#header .gnb .header_aniss:hover {background-color:#0f97ff;}
#header .gnb .header_mypage > button:hover,
#header .gnb .header_aniss > button:hover {color:#fff;}
#header .gnb .header_mypage > button:after,
#header .gnb .header_aniss > button:after {display:none;}

#header .gnb ul > li:hover > .gnb_sub {display:block;}
#header .gnb .gnb_sub {position:fixed; width:1200px; height:240px; left:50%; top:100px; margin-left:-600px; text-align:left; background-color:#fff; background-repeat:no-repeat; background-position:left center; display:none;}
#header .gnb .gnb_sub li a {color:#000; font-weight:600;}
#header .gnb .gnb_sub:before {content:""; display:block; position:fixed; width:1200px; height:5px; left:50%; top:100px; margin-left:-600px; background:url(../images/common/bg_shadow.png) repeat-x 0 0;}
#header .gnb .gnb_sub:after {content:""; clear:both; display:block;}
#header .gnb .gnb_sub .gnb_intro {float:left; width:34%; margin:20px 0 0 3%}
#header .gnb .gnb_sub .gnb_intro p {padding:0 0 15px 46%; font-size:20px; /*border-bottom:1px solid #222;*/}
#header .gnb .gnb_sub .gnb_intro span {display:block; margin:15px 0 0 46%; font-size:14px; font-weight:400; color:#666;}

#header .gnb .gnb_sub ul {float:right; width:56.5%; margin-top:50px;}
#header .gnb .gnb_sub ul:after {content:""; clear:both; display:block;}
#header .gnb .gnb_sub ul li {float:left; margin:0 12% 20px 0;}
#header .gnb .gnb_sub ul li a {display:block; transition:.2s;}
#header .gnb .gnb_sub ul li a:hover {transform:translateY(-1px); color:#0fb7ff;}

#header .gnb .gnb_solution {background-image:url(../images/common/bg_sub_solution.jpg);}
#header .gnb .gnb_program {background-image:url(../images/common/bg_sub_solution.jpg);}
#header .gnb .gnb_portfolio {background-image:url(../images/common/bg_sub_solution.jpg);}
#header .gnb .gnb_cs {background-image:url(../images/common/bg_sub_solution.jpg);}
#header .gnb .gnb_mypage {background-image:url(../images/common/bg_sub_solution.jpg);}
#header .gnb .gnb_company {background-image:url(../images/common/bg_sub_solution.jpg);}

#header .btn_m_login,
#header .btn_gnb {display:none;}

#header .header_account {position:absolute; top:0; left:44%; width:300px; margin-left:400px; text-align:right;}
#header .header_account a {display:inline-block; height:18px; color:#fff; line-height:1.2; font-size:14px;}
#header .header_account .header_join {margin-left:4%; padding:0 0 0 4%; border-left:1px solid #eee;}

#header.on {position:fixed; top:0; width:100%; background-color:#fff; box-shadow:0 0 5px rgba(0,0,0,.2);}
#header.on .header_top,
#header.on .header_account {display:none;}
#header.on .header_bar {box-shadow:none;}
#header.on .gnb .gnb_sub {top:50px; border:1px solid #e5e5e5; border-top:none;}
#header.on .gnb .gnb_sub:before {top:50px;}

/*footer*/
footer{width:100%;background-color:#2c3549; padding-top:20px; padding-bottom: 20px;}
footer .top{padding-bottom:20px; border-bottom:1px solid #4b5364;}
footer .top .left img{width:210px;}
footer .top .right .sns{display:inline-block; width:50px; height:50px; margin:0 10px; text-indent:-9999px;}
footer .top .right .sns a{display:block; height:50px;}
footer .top .right .sns.facebook{background:url("../images/common/footer_icon01.png")no-repeat center center;}
footer .top .right .sns.insta{background:url("../images/common/footer_icon02.png")no-repeat center center;}
footer .bottom{margin-top:50px; padding-bottom:40px;}
footer .bottom dl{width:170px; float:left;}
footer .bottom dl dt{font-size:14px; font-weight:400; color:#fff; margin-bottom:20px;}
footer .bottom dl dd a{font-size:14px; color:#bbb; font-weight:300;}
footer .bottom .other{float:left; width:180px; height:185px; border-left:1px solid #4b5364;}
footer .bottom .other ul li{padding:5px 30px;}
footer .bottom .other ul li a{font-size:13px; font-weight:400; color:#fff;}
footer .copy{color:#5b5b5c; font-size:0.688em; letter-spacing:-.5px;}
footer address{padding:15px; margin-top:10px; border-top:0px solid #565d6d; font-size:14px; color:#fff; font-weight:200; letter-spacing:1px;}
footer address p{font-size:0.750em; font-weight:400;}




/***************************** common elements *************************************/

/*button*/
button {border:none; box-sizing:border-box;}

.btn_navy{background-color:#2c3549; color:#fff; padding:5px 10px; border:1px solid #2c3549;}
.btn_navy2{background-color:#fff; color:#2c3549; padding:5px 10px; border:1px solid #2c3549;}
.btn_sky{background-color:#04a6ec; color:#fff; padding:5px 10px; border:1px solid #04a6ec;}
.btn_sky2{background-color:#fff; color:#04a6ec; padding:5px 10px; border:1px solid #04a6ec;}
.btn_gray{background-color:#454545; color:#fff; padding:5px 10px; border:1px solid #454545;}
.btn_white{background-color:transparent; color:#fff; padding:5px 10px; border:2px solid #fff; min-width:130px; transition:.3s ease .1s;}
.btn_white:hover {background:#fff; color:#000; font-weight:600;}

.btn_t1 {min-width:140px; height:40px; padding:1px 20px 0; font-size:0.938em; font-weight:400;}
.btn_t1:hover {transform:translateY(-2px); transition:.2s ease .1s;}
.btn_t2 {display:inline-block; font-size:14px; width:90px; height:30px; line-height:28px; border-radius:3px;}
.btn_t3 {min-width:100px; height:36px; padding:0 20px; font-size:14px;} 
.btn_t4 {font-size:0.750em; width:36px; height:22px; border-radius:3px; color:#888; border:1px solid #ccc; background-color:#fafafa; box-sizing:border-box; padding-bottom:5px;} 
.btn_t4.btn_t4_2 {width:auto; padding:0 5px} 
.btn_t5 {width:70px; height:30px; background:#f7f7f7; color:#666; border:1px solid #999; font-size:14px;}
.btn_sd {box-shadow:0 2px 3px 0 rgba(0,0,0,0.25);}
.btn_big {width:285px;}
.btn_large {width:320px; height:54px; border-radius:4px; font-size:18px;}

.btn_icon_search span {padding-right:22px; background:url(../images/sub/icon_search_w.svg) no-repeat right center; background-size:15px;}
.btn_icon_location span {padding-right:22px; background:url(../images/sub/icon_location_b.svg) no-repeat right 2px; background-size:14px;}

.btn_c1,a.btn_c1 {background-color:#0fb7ff; border:1px solid #07a9ee; color:#fff;}
.btn_c2,a.btn_c2 {background:transparent; border:2px solid #0fb7ff; color:#07a9ee; font-weight:600;}
.btn_c3,a.btn_c3 {background:#08a0c0; border:1px solid #038eab; color:#fff;}
.btn_c4,a.btn_c4 {background:#2c3549; color:#fff;}
.btn_c5,a.btn_c5 {background:#fff; border:2px solid #2c3549; color:#2c3549; font-weight:600;}

.btns_left {text-align:left; margin:20px 0;}
.btns_left button {margin-left:5px;}
.btns_left button:first-child {margin-left:0;}

.btns_right {text-align:right; margin:20px 0;}
.btns_right button {margin-left:5px;}
.btns_right button:first-child {margin-left:0;}

.btns_center {text-align:center; margin:40px 0;}
.btns_center button {margin-left:5px;}
.btns_center button:first-child {margin-left:0;}


/*title*/
.title {text-align:center; margin-bottom:50px;}
.title h2 {font-size:34px; font-weight:300; color:#04a6ec; position:relative;}
.title h2 em {font-weight:400; vertical-align:inherit;}
.title p {position:relative; max-width:600px; margin:0 auto; padding-top:32px;}
.title p:before {content:""; position:absolute; width:30px; height:1px; background:#aaa; top:0; left:50%; margin:12px 0 0 -15px;}

.title.title_b {margin-bottom:30px;}
.title.title_b h2,
.title.title_b em {color:#2c3549; letter-spacing:3px;}
.title.title_b h2 {position:relative; padding-bottom:20px;}
.title.title_b h2:before{content:""; position:absolute; width:30px; height:1px; background:#aaa; bottom:0; left:50%; margin:0 0 0 -15px;}
.title.title_b p:before{display:none;}
.title.title_check h2 {display:inline-block; position:relative; color:#000; font-size:28px; padding-left:30px;}
.title.title_check h2:before {content:""; display:block; position:absolute; width:20px; height:16px; left:0; top:10px; background:url("../images/main/main_icon12.gif")no-repeat 0 0; background-size:100%;}

.title1 {text-align:center;}
.title1 p{color:#666; font-size:17px;}
.title1 p:after {content:""; display:block; width:32px; height:1px; background-color:#0fb7ff; margin:14px auto 8px;}
.title1 h2{font-size:32px; font-weight:300; color:#0fb7ff;}
.title1 h2 span{vertical-align:top; font-weight:400;}

.title1.title1_d p {color:#000;}
.title1.title1_d p:after {background-color:#0870c0;}
.title1.title1_d h2 {color:#0870c0;}
.title1.title1_oppe p:after {display:none;} 
.title1.title1_oppe h2:after {content:""; display:block; width:32px; height:1px; background-color:#0fb7ff; margin:8px auto 14px;} 

.title1.title1_white h2,
.title1.title1_white p {color:#fff;}
.title1.title1_white h2:after,
.title1.title1_white p:after {background-color:#fff;}

.title2 h2 {color:#4d4d4d; font-size:2.125em; font-weight:300;position:relative; padding-bottom:10px;}

.title3 h2 {font-size:28px; font-weight:500; color:#2c3549;}
.title3 p {margin-top:10px;}

.title4:before {content:""; position:absolute; display:inline-block; width:4px; height:24px; background-color:#d50d0d; left:0; top:5px;}
.title4 {position:relative; padding-left:12px; font-size:22px; font-weight:600; margin:50px 0 10px;}

.sub_tit {text-align:center; color:#333;}
.sub_tit h2:before {content:''; position:absolute; width:200px; border-top:1px solid #000; bottom:11px; left:50%; margin-left:-100px;}
.sub_tit h2:after {content:''; position:absolute; width:20px; height:20px; background-color:#fff; border:1px solid #000; bottom:0; left:50%; margin-left:-10px;-ms-transform:rotate(45deg);  -webkit-transform:rotate(45deg);   transform:rotate(45deg);}
.sub_tit h2 {position:relative; font-size:30px; padding-bottom:40px; color:#333; font-weight:400;}
.sub_tit p {margin-top:30px; font-size:15px; color:#666;}

.sub_tit1 {padding-left:14px; margin:40px 0 5px 5px; background:url(../images/sub/bullet_arrow.png) no-repeat left 8px; font-weight:600; font-size:17px;}
.sub_tit1.sub_tit1_nm {margin-top:0;}
.sub_tit1 + .sub_tit1_desc {margin-left:15px; display:block; color:#666; margin-bottom:10px; font-size:14px; line-height:1.4;}
.sub_tit1 span {color:#666; display:inline-block; vertical-align:top; font-size:16px; font-weight:400; margin-left:10px;}
.sub_tit2 {font-weight:600; font-size:17px; margin:40px 0 5px 0;}
.sub_tit3 {width:200px; height:42px; padding-top:8px; text-align:center; background-color:#2d354a; color:#fff; font-size:17px; border-radius:5px 5px 0 0;}

.sub_tit4 {font-size:16px; font-weight:400; margin-bottom:10px;}
.sub_tit4 span {vertical-align:top; font-weight:600; color:#0fb7ff;}

.sub_tit5 {position:relative; margin:20px 0 10px; padding-top:8px; font-size:18px; font-weight:600; text-align: center;}
.sub_tit5:before {content:""; display:block; position:absolute; width:34px; height:1px; left:0; top:0; /*background-color:#f92828;*/}



/*input*/
.select1 {width:96%; max-width:150px; height:40px; border-radius:4px; border-color:#ddd; padding-left:5px;}
.input01 {padding:5px 10px; border:1px solid #ddd; border-radius:3px; height:35px; font-size:0.938em; color:#333;}

/*checkbox*/
.checkbox {position:absolute; width:0; height:0; -webkit-appearance:none; border:none; opacity:0;}
.checkbox + label {position:relative; padding-left:23px; width:auto; margin-right:10px;}
.checkbox + label:before {content:""; display:block; position:absolute; left:0; top:3px; width:15px; height:15px; border:1px solid #04a6ec; border-radius:3px; z-index:1; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.checkbox:checked + label:before {-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); border-radius:0; height:8px; border-color:#04a6ec; border-width:2px; border-top-style:none; border-right-style:none;}

/*radio*/
.radio {width:0; height:0; opacity:0; position:absolute;}
.radio + label {position:relative; display:inline-block; width:auto; margin-right:20px; float:none; line-height:1; padding-left:0; font-size:15px;}
.radio + label:before {content:""; display:inline-block; width:16px; height:16px; background-color:#f2f2f2; border-radius:100%; border:1px solid #ccc; vertical-align:bottom; margin:0 5px 0 0;}
.radio:checked + label:after {content:""; display:block; width:10px; height:10px; border-radius:100%; background-color:#0fb7ff; position:absolute; left:4px; top:4px;}

/*size*/
.size_f{width:100%;}


/***************************** common style *************************************/

.open {padding:100px 0;}
.open_box .open_item {position:relative; float:left; width:22%; margin:40px 4% 0 0;}
.open_box .open_item:nth-child(4n){margin-right:0;}
.open_box .open_item .image {height:400px; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,.2);}
.open_box .open_item .image img {display:block; width:100%;}
.open_box .cont .before {margin-top:15px;}
.open_box .cont .before .fc_red {color:#f50e2c; font-size:14px; border-bottom:1px solid #ccc; padding:0 5px 5px;}
.open_box .cont .before .fc_red span {font-size:14px; letter-spacing:-.7px; padding-top:0; color:#999; font-weight:600;}
.open_box .cont .before .title {color:#333; font-size:14px; font-weight:500; letter-spacing:-.5px; margin-top:5px; padding:0 5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:normal; word-wrap:break-word; word-break:break-all; overflow:hidden; max-height:76px;}
.open_box .open_item .hover {position:absolute; left:0; top:0; width:100%; height:400px; background:rgba(0,0,0,.5); color:#fff; text-align:center; padding-top:70px; transition:.4s ease .1s; opacity:0;}
.open_box .open_item .hover img {margin:20px auto;}
.open_box .open_item .hover .p1 {font-size:14px;}
.open_box .open_item .hover .p2 {width:94%; margin:0 auto; line-height:1.4; font-size:14px; font-weight:300; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; white-space:normal; word-wrap:break-word; word-break:break-all; overflow:hidden; max-height:76px;}
.open_box .open_item .hover .p2 + .p2 {margin-top:10px;}
.open_box .open_item .hover .p4 {margin-top:20px; font-size:14px; font-weight:300;}
.open_box .open_item:hover .hover {opacity:1;}

.open_box .open_desc {padding:5px; background-color:#fff; border:1px solid #ccc; text-align: center;}
.open_box .open_desc p {font-size:15px; font-weight:600; color:#222; line-height:1.2;}
.open_box .open_desc span {font-size:13px; font-weight:600; color:#999; line-height:1.2;}
.open_box .open_item .image.cropped {height:200px; box-shadow:none; border:1px solid #ccc; border-bottom:none;}
.open_box .open_item .image.cropped ~ .hover {height:200px; padding-top:10px;}
.open_box .open_item .image.cropped ~ .hover img {width:25px; margin:10px auto;}
.open_box .open_item .image.cropped ~ .hover .p1 {display:none;}
.open_box .open_item .image.cropped ~ .hover .p2 {line-height:1.2; font-size:14px; margin:8px 0;}
.open_box .open_item .image.cropped ~ .hover .p4 {margin-top:10px; font-size:13px; font-weight:300; line-height:1.4;}

.program2 {width:100%; padding:30px 0 60px; position:relative; border-bottom:1px solid #ececec;}
.program2 .process{width:1200px; margin:70px auto 0;}
.program2 .process ul li{position:relative; width:25%; height:210px; float:left;}
.program2 .process ul li .top{display:block; vertical-align:middle; height:120px;}
.program2 .process ul li .bottom{height:90px; padding:10px;}
.program2 .process ul li .bottom h3{font-size:18px; font-weight:500; color:#2c3549;}
.program2 .process ul li .bottom p{font-size:14px; color:#666; line-height:1.5;letter-spacing:-.9px; }
.program2 .process ul li .bottom {border-top:2px dashed #e5e5e5; }
.program2 .process ul li:nth-child(4) .bottom,
.program2 .process ul li:nth-child(5) .top {border-right:2px dashed #e5e5e5;} 
.program2 .process ul li:nth-child(8) .bottom,
.program2 .process ul li:nth-child(9) .top {border-left:2px dashed #e5e5e5;} 
.program2 .process ul li:after {content:""; position:absolute; display:block; width:10px; height:10px; right:0; top:115px; border:2px solid #0fb7ff; border-left:none; border-bottom:none; transform:rotate(45deg); z-index:1;}
.program2 .process ul li:before {content:""; position:absolute; display:block; width:5px; height:5px; border-radius:100px; background-color:#0fb7ff; top:116px; left:50%; margin-left:-6px; border:2px solid #fff; box-shadow:0 0 0 2px #0fb7ff;}

.program2 .process ul li:nth-child(5):after,
.program2 .process ul li:nth-child(6):after,
.program2 .process ul li:nth-child(7):after,
.program2 .process ul li:nth-child(8):after {border:2px solid #0fb7ff; border-right:none; border-top:none; right:auto; left:0;}

.program2 .process ul li:nth-child(5),
.program2 .process ul li:nth-child(6),
.program2 .process ul li:nth-child(7),
.program2 .process ul li:nth-child(8) {float:right;}





/*tablet*/
@media only screen and (max-width:1200px) {
    
    /*common*/
    .inner {width:96%; margin:0 auto;}
    
    /*header*/
    #header .gnb .gnb_sub {width:96%; left:2%; margin:0; background-position:-20px 0;}
    #header .gnb .gnb_sub .gnb_intro {width:32%; margin:20px 0 0 5%}
    #header .gnb .gnb_sub ul {width:59%;}    
    #header .header_account {left:auto; right:2%; width:140px;} 
    #header.on .inner {width:100%;}
    #header.on .gnb .gnb_sub {width:100%; left:0;}
    #header.on .gnb .gnb_sub ul {width:57%;}
    
    /*footer*/
    footer .bottom dl {width:14%;}
    footer .bottom .other {width:16%;}
    footer .bottom .other ul li {padding:0 0 20px 10%;}
    
    /*titles*/
    .title1 h2 {font-size:26px;} 
	.title1 p {font-size:14px;}
	.title1 p:after {margin-top:10px;}
	.title1 .sub_title {font-size:14px;}
	    
	/*common style*/   
	.open {padding:60px 0;}    
    .open_box .open_item .image,
    .open_box .open_item .hover {height:360px;}
    
    .program2 .process{width:96%; margin:50px auto 0;}
	.program2 .process ul li .top img {height:90px; margin-top:10px;}
	.program2 .process ul li .bottom p {font-size:12px;}
	.program2 .process ul li .bottom p br {display:none;}
    
     
} 

/*Mobile*/ 
@media only screen and (max-width:1080px) {
    
    /*layout*/
    #header {top:10px;}
    #header .header_top .top_slide {display:none;}
    #header .logo {padding-top:11px; width:24%;}
    #header .logo a {width:160px;}
    #header .btn_gnb {float:right; display:block; width:80px; height:50px; background-color:#0fb7ff;}
    #header .btn_gnb span {display:block; color:#fff; font-size:15px; line-height:1; letter-spacing:1.2px;}
    #header .btn_m_login {display:block; float:right; width:80px; height:50px; background-color:#666; padding-top:17px; text-align:center; font-size:15px; line-height:1; letter-spacing:1.2px; color:#fff;}
    
    #header .gnb {position:fixed; top:70px; right:-100%; width:50%; height:100%; text-align:left; background-color:#fff; transition:.5s ease .1s;}
    #header .gnb ul > li {display:block; padding-left:0; margin-right:0; height:auto;}
    #header .gnb ul > li > button {padding:12px 0 12px 30px; border-bottom:1px solid #d5d5d5; background:url(../images/common/icon_dropdown.svg) no-repeat 94% center #fff; background-size:12px; color:#000; font-size:15px; text-align:left;}
    #header .gnb ul > li.on > button {border-left:4px solid #0fb7ff;}
    #header .gnb ul > li > button:hover {border-bottom:1px solid #d5d5d5; color:#000;}
    #header .gnb ul > li > button:after {display:none;}
    #header .gnb .header_mypage, 
    #header .gnb .header_aniss {width:100%; background-color:transparent; text-align:left; padding-left:0;}
    #header .gnb .header_mypage {margin-left:0;}
    #header .gnb .header_mypage > button, 
    #header .gnb .header_aniss > button {border-bottom:1px solid #d5d5d5; color:#000;}
    #header .gnb .header_mypage > button:hover, 
    #header .gnb .header_aniss > button:hover {border-bottom:1px solid #d5d5d5; color:#000;}
    
    #header .gnb .gnb_sub {position:static; display:block; background-image:none; height:auto; background-color:#e5e5e5; width:100%; display:none;}
    #header .gnb .gnb_sub:before {display:none;}
    #header .gnb .gnb_sub .gnb_intro {display:none;}
    #header .gnb .gnb_sub ul {float:none; width:100%; margin:0;}
    #header .gnb .gnb_sub ul li {float:none; display:block; margin:0;}
    #header .gnb .gnb_sub ul li a {width:100%; padding:12px 0 12px 34px; border-bottom:1px solid #d5d5d5; font-size:15px;}
    #header .gnb .gnb_sub ul li a:hover {transform:none; color:#000; background-color:#ccc;}
    
    #header .btn_gnb.gnb_on ~ .gnb {right:2%;}
    #header .btn_gnb.gnb_on ~ .gnb:before {content:""; display:block; position:fixed; width:50%; height:5px; right:2%; top:70px; background:url(../images/common/bg_shadow.png) repeat-x 0 0; z-index:50;}
    #header .btn_gnb.gnb_on:after {content:""; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.6); position:fixed; left:0; top:0; z-index:-1;}
    #header.on .btn_gnb.gnb_on ~ .gnb,
    #header.on .btn_gnb.gnb_on ~ .gnb:before {top:50px; right:0; transition:.5s ease .1s;}
    #header.on .gnb:before {top:50px; right:0;}
    #header.on .gnb {top:50px;}
    #header.on .gnb .gnb_sub ul {width:100%;}
    
    #header .gnb .gnb_sub {display:none;}
    #header .gnb ul > li:hover .gnb_sub {display:none;}
    #header .gnb ul > li.active .gnb_sub {display:block;}
    #header .gnb ul > li.active > button {background-image:url(../images/common/icon_dropdown-up.svg); border-left:4px solid #0fb7ff; color:#0fb7ff; padding-left:26px;}
    
    
    #header .header_account:after {content:""; clear:both; display:block;}
    #header .header_account {position:static; margin-left:0; width:100%; text-align:center; border-bottom:1px solid #d5d5d5;} 
    #header .header_account .header_login,
    #header .header_account .header_join{display:block; float:left; height:40px; margin:0; padding:13px 0 0 0; color:#000; font-size:13px; color:#555; font-weight:600;}
    #header .header_account .header_join {border-left-color:#d5d5d5; width:30%;}
    #header .header_account .header_login {width:70%;}
    
    #header.on .header_account {display:block;}
    
    
    /*title*/
    .sub_tit1 span {display:block; margin-left:0;}
    .sub_tit1 + .sub_tit1_desc br {display:none;}
        
    /*common style*/    
    .open_box .open_item {width:23.5%; margin:30px 2% 0 0;}
    .open_box .open_item:nth-child(4n){margin-right:0;}
    
    .program2 .process ul li {width:33.3%;} 
    .program2 .process ul li:nth-child(3n) {width:33.4%;} 
	.program2 .process ul li .top img {height:70px; margin-top:25px;}
	.program2 .process ul li .bottom h3 {margin:2px 0; font-size:14px; font-weight:600;}
	.program2 .process ul li .bottom p {font-size:12px;}

	.program2 .process ul li:nth-child(4):after {border:2px solid #0fb7ff; border-right:none; border-top:none; left:0;}
	.program2 .process ul li:nth-child(7):after,
	.program2 .process ul li:nth-child(8):after,
	.program2 .process ul li:nth-child(9):after {border:2px solid #0fb7ff; border-left:none; border-bottom:none; left:auto; right:0;}
	.program2 .process ul li:nth-child(10):after,
	.program2 .process ul li:nth-child(11):after,
	.program2 .process ul li:nth-child(12):after {border:2px solid #0fb7ff; border-right:none; border-top:none; left:0;}
	
	.program2 .process ul li:nth-child(7),
	.program2 .process ul li:nth-child(8) {float:left;}
	.program2 .process ul li:nth-child(4),
	.program2 .process ul li:nth-child(5),
	.program2 .process ul li:nth-child(9),
	.program2 .process ul li:nth-child(10),
	.program2 .process ul li:nth-child(11) {float:right;} 
	
	.program2 .process ul li:nth-child(9) .bottom, 
	.program2 .process ul li:nth-child(3) .bottom, 
	.program2 .process ul li:nth-child(10) .top,
	.program2 .process ul li:nth-child(4) .top {border-right:2px dashed #e5e5e5;} 
	.program2 .process ul li:nth-child(7) .top,
	.program2 .process ul li:nth-child(6) .bottom {border-left:2px dashed #e5e5e5;}

	.program2 .process ul li:nth-child(8) .bottom,
	.program2 .process ul li:nth-child(9) .top {border-left:none;} 
	.program2 .process ul li:nth-child(4) .bottom,
	.program2 .process ul li:nth-child(5) .top {border-right:none;} 
    
}


@media only screen and (max-width:768px) {
    
    /*layout*/
    #header {top:0;}
    #header .header_top {margin:0;}
    #header .inner {width:100%;}
    #header .gnb {width:70%; top:50px;}
    #header .btn_gnb {width:70px;}
    #header .btn_gnb span {font-size:14px;}
    #header .btn_gnb.gnb_on ~ .gnb {top:50px; right:0;}
    #header .btn_gnb.gnb_on ~ .gnb:before {width:70%; top:50px; right:0}
    #header .logo {padding-top:5px;}
    #header .logo a {width:140px; padding-left:2%;}

    footer {position:relative; padding-top:20px;}
    footer .top .left img {width:180px;}
    footer .bottom {margin-top:0; padding-bottom:10px;}
    footer .bottom dl {width:33.3%; text-align:center; height:155px;}
    footer .bottom dl dt {margin:20px 0 0;}
    footer .bottom dl dd a {font-size:12px;}
    footer .bottom .other {position:absolute; right:4%; top:26px; width:38%; height:auto; float:none; border:none; text-align:right;}
    footer .bottom .other ul li {display:inline-block; padding-bottom:0;}
    footer address {font-size:12px;}
    
	/*buttons*/
    .btn_large {width:260px; height:48px; font-size:16px;}

	/*title*/
	.title {margin-bottom:40px;}
    .title h2 {font-size:26px; line-height:1.3;}
    .title p {font-size:14px; padding-top:28px;}
    
    .title.title_check h2 {font-size:20px; padding-left:20px;}
    .title.title_check h2:before {top:5px; width:15px; height:12px;}
    
    .title3 h2 {font-size:20px;}
    .title3 p {margin-top:5px; font-size:14px;} 

	.sub_tit h2 {font-size:24px; padding-bottom:28px;}
	.sub_tit p {font-size:13px; margin-top:20px;}
	.sub_tit p br {display:none;}
    
       
	/*common style*/    
    .open {padding:40px 0;}  
    .open_box .open_item {width:49%; margin:30px 2% 0 0;}
    .open_box .open_item:nth-child(4n){margin-right:2%;}
    .open_box .open_item:nth-child(2n){margin-right:0;}
    .open_box .open_item .image.cropped ~ .hover {height:160px; padding-top:0;}
    .open_box .open_item .image.cropped ~ .hover {height:160px;}
    .open_box .open_item .image.cropped ~ .hover .p4 {margin-top:0px;}
    
    .open_box .open_item .hover {padding-top:40px;}
    .open_box .open_item .image, .open_box .open_item .hover {height:300px;}
    
    
    
    
    
}


@media only screen and (max-width:480px) {
    
    /*layout*/
    #header .btn_m_login {display:none;}
    footer .top .left img {width:120px;}
    
  
    .open_box .open_item .hover {padding-top:30px;}
    .open_box .open_item .image, .open_box .open_item .hover {height:260px;}
    .open_box .cont .before .fc_red span {float:none; display:block;}
    
    .program2 .process ul li {height:150px;}
	.program2 .process ul li .top {height:80px; margin-top:0;}
	.program2 .process ul li .top img {width:60px; height:auto; margin-top:0;}
	.program2 .process ul li .bottom p {display:none;}
	.program2 .process ul li .bottom {height:150px;}
	.program2 .process ul li:before {top:75px;}
	.program2 .process ul li:after {top:75px; width:8px; height:8px;} 
    
    
}