@charset "utf-8";

label, input, select{vertical-align:middle;}
body{font-size:14px; font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, "돋움",Gulim, "굴림", Verdana, Tahoma, AppleGothic, sans-serif; color:#333; letter-spacing:0; }
input, textarea, select{ font-family:'Noto Sans KR', sans-serif !important; }
input[type="checkbox"]{ border:1px solid #ddd;}


/*
font-family: 'Montserrat', sans-serif;
*/


.m_show2 {display: none!important;}


/* header */
#header {padding: 0 15px; background-color: #fff; border-bottom: 1px solid #dddddd; box-sizing: border-box; position: fixed; box-sizing: border-box; top: 0px; left: 0px; z-index: 10000; width: 100%;}
#header .h_inner {max-width: 1800px; width: 100%; margin: 0 auto; box-sizing: border-box; height: 99px; position: relative; padding: 0 262px;}
#header .logo {width: 104px; height: 72px; background: url(../images/common/logo.png) no-repeat center; display: block; position: absolute; left: 0px; top: 10px; font-size: 0px;}

#header .right_box {position: absolute; right: 0px; top: 35px; font-size: 0px;}
#header .right_box .sns {display: inline-block; vertical-align: middle;}
#header .right_box .sns li {display: inline-block; vertical-align: middle; margin-right: 12px;}
#header .right_box .sns li:last-child {margin-right: 0px;}
#header .right_box .sns li a {display: block; width: 24px; height: 24px; box-sizing: border-box; cursor: pointer;}
#header .right_box .sns li.youtube a {background: url(../images/icon/youtube.png) no-repeat center;}
#header .right_box .sns li.facebook a {background: url(../images/icon/facebook.png) no-repeat center;}
#header .right_box .sns li.instagram a {background: url(../images/icon/instagram.png) no-repeat center;}
#header .right_box .member {vertical-align: middle; display: inline-block; margin-left: 36px;}
#header .right_box .member li {display: inline-block; vertical-align: middle; position: relative; padding-right: 22px;}
#header .right_box .member li:last-child {padding-right: 0px;}
#header .right_box .member li::before {content: ''; width: 1px; height: 10px; background-color: #dddddd; position: absolute; right: 10px; top: 50%; margin-top: -5px;}
#header .right_box .member li:last-child::before {display: none;}
#header .right_box .member li a {font-size: 14px; color: #999999; letter-spacing: -0.05em; word-break: keep-all; display: inline-block; line-height: 24px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; cursor: pointer;}



/* footer */
#footer {background-color: #1e1d22; padding: 100px 0 97px;}
#footer .f_inner {max-width: 1416px; width: calc(100% - 30px); margin: 0 auto; box-sizing: border-box; position: relative; box-sizing: border-box; padding: 0 216px 0 183px;}
#footer .logo {position: absolute; left: 0px; top: 0px;}
#footer .link {font-size: 0px; margin-bottom: 30px;}
#footer .link li {display: inline-block; vertical-align: middle; position: relative; padding-right: 42px;}
#footer .link li::before {content: ''; width: 1px; height: 12px; position: absolute; right: 21px; top: 50%; margin-top: -6px; background-color: #666666;}
#footer .link li:last-child {padding-right: 0;}
#footer .link li:last-child::before {display: none;}
#footer .link li a {font-size: 17px; color: #ffffff; letter-spacing: -0.05em; word-break: keep-all; display: inline-block; line-height: 28px;}
#footer .info {font-size: 0px; margin-bottom: 17px;}
#footer .info li {display: inline-block; vertical-align: middle; font-size: 15px; color: #999999; line-height: 30px; letter-spacing: -0.05em; word-break: keep-all; margin-right: 21px;}
#footer .info li:last-child {margin-right: 0;}
#footer .info li span {color: #555555; display: inline-block; margin-right: 8px;}
#footer .btm_txt {font-size: 13px; color: #666666; letter-spacing: -0.05em; word-break: keep-all;}
#footer .site {position: absolute; right: 0px; top: 0px; width: 200px;}
#footer .site .on_txt {padding: 0 19px; background-color: #222222; cursor: pointer;}
#footer .site .on_txt span {display: block; line-height: 56px; font-size: 15px; color: #ffffff; font-family: 'Montserrat', sans-serif; position: relative;}
#footer .site .on_txt span::before {content: ''; width: 9px; height: 9px; background: url(../images/icon/more.png) no-repeat center; position: absolute; right: 0px; top: 50%; margin-top: -4px;}
#footer .site ul {position: absolute; width: 100%; bottom: 100%; box-sizing: border-box; z-index: 1; border: 1px solid #dddddd; background-color: #fff; display: none;}
#footer .site ul li {padding: 0 19px 3px;}
#footer .site ul li:first-child {padding-top: 14px;}
#footer .site ul li:last-child {padding-bottom: 9px;}
#footer .site ul li a {font-size: 15px; color: #999999; letter-spacing: -0.05em; word-break: keep-all; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; display: inline-block; line-height: 25px;}

#footer .top_btn {position: absolute; right: 0px; top: 86px; width: 64px; height: 64px; background-color: #234682; border-radius: 50%; text-align: center; display:flex; justify-content:center; align-items:center; table-layout:fixed; cursor: pointer;}
#footer .top_btn span {position: relative; display: block; width: 100%; font-size: 12px; color: #ffffff; font-family: 'Montserrat', sans-serif; padding-top: 21px;}
#footer .top_btn span::before {content: ''; width: 8px; height: 16px; background: url(../images/icon/top.png) no-repeat center top; position: absolute; top: 0px; left: 50%; margin-left: -4px;}



/* s_visual */
#s_visual {position: relative; box-sizing: border-box; z-index: 50; padding-top: 100px;}
#s_visual .slogan { display:table; width:100%; table-layout:fixed; height: 320px; box-sizing:border-box; z-index: 1; overflow: hidden;}
#s_visual .slogan > .title_box{ display:table-cell; vertical-align:middle; position: relative; padding: 0 20px;}
#s_visual .slogan .title_box > .bg_img {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; transform: scale(1.2);}
#s_visual .slogan .title_box > .bg_img.on {transform: scale(1);}
#s_visual .slogan > .title_box .title {display:block; font-size: 52px; color: #ffffff; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all; text-align: center; position: relative;}
#s_visual.s_visual_01 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_01.jpg') no-repeat center; background-size:cover;}
#s_visual.s_visual_02 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_02.jpg') no-repeat center; background-size:cover;}
#s_visual.s_visual_03 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_03.jpg') no-repeat center; background-size:cover;}
#s_visual.s_visual_04 .slogan .title_box > .bg_img { background:url('../images/sub/sub_v_03.jpg') no-repeat center; background-size:cover;}

/* 전자상거래 표준약관 */
.yg{font-size:14px; line-height:24px; word-break:keep-all}
.yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;}
.yg h3{margin-top:40px; margin-bottom:5px; font-size:18px; font-weight:700; color:#444;}
.yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;}
.yg p{margin:5px 0;}

.fly_w{margin-top:10px; background:#f2f2f2; box-sizing:border-box; padding:20px;}
.fly_w > li:first-child{margin-top:0;}
.fly_w > li > ul{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ul > li{padding:0; margin:0;}
.fly_w > li > ul > li:before{display:none;}
.fly_w > li > ol{margin-top:0; padding:0 0 0 15px; background:none;}
.fly_w > li > ol > li{padding:0; margin:0;}
.fly_w > li > ol > li:before{display:none;}

ul.fly_w > li{position:relative; padding-left:10px; margin-top:5px; color:#777;}
ul.fly_w > li:before{content:'-'; position:absolute; top:0; left:0;}
ol.fly_w > li{position:relative; margin-top:5px; color:#777;}

.yg_table{overflow:hidden; margin-top:15px;}
.yg_table div{float:right; width:calc(50% - 10px);}
.yg_table div:first-child{float:left;}
.yg_table div > strong{display:block; text-align:center; background:#333; color:#fff; font-size:15px; font-weight:500; padding:15px 0;}
.yg_table div table{width:100%; box-sizing:border-box;}
.yg_table div table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;}
.yg_table div table tbody th{text-align:center; border-bottom:1px solid #ddd; color:#333; padding:10px 0; font-weight:500; background:#f9f9f9}
.yg_table div table tbody td{border-bottom:1px solid #ddd; padding:5px 20px; border-left:1px solid #ddd;}

#privacy_box select { padding-left:10px; margin-top: 20px; width: 320px; height: 40px; font-size: 14px; border-color: #bbb;}

/* PC */
@media all and (min-width:1025px){
    .pc_show{ display:block !important;}
    .pc_i_show{ display:inline-block !important;}
    .m_show{ display:none !important;}
    .m_i_show{ display:none !important;}
    
    
    /* header */
    #header .menu_box {display: block!important;}
    #header .menu_box .dep1_wrap {text-align: center; font-size: 0px;}
    #header .menu_box .dep1 {display: inline-block; vertical-align: top; padding: 0 50px;}
    #header .menu_box .dep1 > a {display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 100px; font-size: 20px; color: #111111; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; cursor: pointer;}
    #header .menu_box .dep1 > a span {position: relative; display: inline-block; line-height: 29px;}
    #header .menu_box .dep1 > a span::before {content: ''; width: 0%; height: 2px; background-color: #059c4a; position: absolute; left: 50%; bottom: 0px; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #header .menu_box .dep1:hover > a span::before {width: 100%;}
    #header .menu_box .dep1.on > a span::before {width: 100%;}
    #header .menu_box .dep2_wrap {position: fixed; top: 100px; left: 0; width: 100%; background-color: #234682; text-align: center; font-size: 0px; display: none;}
    #header .menu_box .dep2_wrap.on {z-index: 1;}
    #header .menu_box .dep2_wrap > li {display: inline-block; padding: 0 20px;}
    #header .menu_box .dep2_wrap > li > a {display: inline-block; font-size: 18px; color: #ffffff; letter-spacing: -0.05em; height: 80px; display:flex; justify-content:center; align-items:center; table-layout:fixed; cursor: pointer;}
    #header .menu_box .dep2_wrap > li > a span {display: inline-block; position: relative; line-height: 25px;}
    #header .menu_box .dep2_wrap > li > a span::before {content: ''; width: 0%; height: 1px; background-color: #fff; position: absolute; bottom: 0px; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #header .menu_box .dep2_wrap > li > a:hover span::before {width: 100%;}
    #header .menu_box .dep2_wrap > li > a span.plus {padding-right: 6px;}
    #header .menu_box .dep2_wrap > li > a span sup {position: absolute; right: 0px; top: -3px;}
   
    #header .right_box .member li a:hover {color: #234682;}
    
    
    
    /* footer */
    #footer .site .on_txt span::before {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #footer .site:hover .on_txt span::before {transform: rotate(180deg);}
    #footer .link li a:hover {text-decoration: underline;}
    #footer .site ul li a:hover {text-decoration: underline;}
    #footer .top_btn span::before  {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #footer .top_btn:hover span::before  {background-position: center bottom;}
    


    /* s_visual */
    #s_visual .tab_box {border-bottom: 1px solid #dddddd; text-align: center;}
    #s_visual .tab_box .dep2_wrap {font-size: 0px; display: block!important; padding: 0!important;}
    #s_visual .tab_box .dep2_wrap > li {display: inline-block; margin-right: 50px;}
    #s_visual .tab_box .dep2_wrap > li:last-child {margin-right: 0;}
    #s_visual .tab_box .dep2_wrap > li > a {font-size: 17px; color: #666666; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; display: block; line-height: 79px; position: relative;}
    #s_visual .tab_box .dep2_wrap > li > a::before {content: ''; width: 0%; height: 2px; background-color: #234682; position: absolute; bottom: 0px; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #s_visual .tab_box .dep2_wrap > li > a:hover::before {width: 100%;}
    #s_visual .tab_box .dep2_wrap > li > a sup {position: relative; line-height: 10px; top: 3px;}
    #s_visual .tab_box .dep2_wrap > li.on > a {color: #234682;}
    #s_visual .tab_box .dep2_wrap > li.on > a::before {width: 100%;}
}

@media all and (max-width:1200px){
    #header .h_inner {padding: 0 262px 0 124px; -webkit-transition: padding 0.3s; -moz-transition: padding 0.3s; transition: padding 0.3s;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){	
	.pc_show{ display:none !important;}
	.pc_i_show{ display:none !important;}
	.m_show{ display:block !important;}
	.m_i_show{ display:inline-block !important;}

    
    /* header */
    #header .h_inner {height: 49px; padding: 0;}
    #header .logo {width: 111px; height: 32px; background: url(../images/common/logo_m.png) no-repeat center; background-size: 111px 32px; top: 9px;}

    #header .menu_btn {position: absolute; z-index: 10; width: 24px; height: 20px; right: 0px; top: 15px;}
    #header .menu_btn span {width: 100%; position: absolute; height: 2px; background-color: #111111; left: 0px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #header .menu_btn span:nth-child(1) {top: 0px;}
    #header .menu_btn.on span:nth-child(1) {top: 50%; margin-top: -1px; transform: rotate(135deg);}
    #header .menu_btn span:nth-child(2) {top: 9px;}
    #header .menu_btn.on span:nth-child(2) {opacity: 0;}
    #header .menu_btn span:nth-child(3) {bottom: 0px;}
    #header .menu_btn.on span:nth-child(3) {bottom: auto; top: 50%; margin-top: -1px; transform: rotate(-135deg);}
    
    #header .menu_box {position: fixed; width: 100%; height: calc(100% - 50px); top: 50px; left: 0; background-color: #fff; overflow-y: auto; text-align: center; padding: 39px 0; box-sizing: border-box; display: none;}
    #header .menu_box .dep1 > a {display: block; line-height: 60px; font-size: 20px; color: #111111; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all;}
    #header .menu_box .dep1 > a span {display: inline-block; line-height: 30px; position: relative;}
    #header .menu_box .dep1 > a span::before {content: ''; width: 0%; height: 2px; background-color: #059c4a; position: absolute; bottom: 0px; left: 50%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%);}
    #header .menu_box .dep1 > a.on span::before {width: 100%;}
    #header .menu_box .dep2_wrap {padding: 9px 0 11px; display: none;}
    #header .menu_box .dep2_wrap > li {background-color: #234682; padding-bottom: 16px;}
    #header .menu_box .dep2_wrap > li:first-child {padding-top: 35px;}
    #header .menu_box .dep2_wrap > li:last-child {padding-bottom: 36px;}
    #header .menu_box .dep2_wrap > li > a {display: inline-block; font-size: 16px; color: #ffffff; letter-spacing: -0.05em; line-height: 25px;}
    #header .menu_box .dep2_wrap > li > a span.plus {position: relative; padding-right: 6px;}
    #header .menu_box .dep2_wrap > li > a span.plus sup {position: absolute; right: 0px; top: -4px;}
    
    #header .right_box {position: relative; right: auto; top: auto; margin-top: 40px;}
    /*#header .right_box .sns {display: block;}*/
    #header .right_box .sns {display: none;}
    #header .right_box .sns li {margin-right: 14px;}
    #header .right_box .sns li a {width: 20px; height: 20px; background-size: 21px auto!important;}
    #header .right_box .member {display: block; margin-left: 0; margin-top: 33px;}
    #header .right_box .member li {padding-right: 22px;}
    #header .right_box .member li::before {right: 10px;}
    #header .right_box .member li a {font-size: 12px; line-height: 20px;}
    


    /* footer */
    #footer {padding: 60px 0;}
    #footer .f_inner {padding: 0 186px 0 153px;}
    #footer .logo {width: 97px;}
    #footer .link {margin-bottom: 21px;}
    #footer .link li {padding-right: 32px;}
    #footer .link li::before {right: 16px; height: 10px; margin-top: -5px;}
    #footer .link li a {font-size: 13px; line-height: 16px;}
    #footer .info {margin-bottom: 0px;}
    #footer .info li {font-size: 12px; line-height: 20px; margin-bottom: 8px;}
    #footer .info li span {margin-right: 13px;}
    #footer .btm_txt {font-size: 11px; line-height: 19px; padding-top: 7px;}
    #footer .site {width: 170px;}
    #footer .site .on_txt {padding: 0 21px;}
    #footer .site .on_txt span {line-height: 40px; font-size: 12px;}
    #footer .site ul li {padding: 0 21px 3px;}
    #footer .site ul li:first-child {padding-right: 8px;}
    #footer .site ul li:last-child {padding-right: 6px;}
    #footer .site ul li a {font-size: 11px; line-height: 20px;}
    #footer .top_btn {width: 50px; height: 50px; top: 68px;}
    #footer .top_btn span {font-size: 12px; padding-top: 15px;}
    #footer .top_btn span::before {width: 6px; margin-left: -3px; height: 12px; background-size: 6px auto;}
    
    
    
    /* s_visual */
    #s_visual {padding-top: 50px;}
    #s_visual .slogan {height: 200px;}
    #s_visual .slogan > .title_box .title {font-size: 30px; line-height: 43px;}
    
    #s_visual .tab_box {position: relative;}
    #s_visual .tab_box sup {position: relative; line-height: 10px; top: 2px; right: -1px;}
    #s_visual .tab_box .on_txt {padding: 0 15px; border-bottom: 1px solid #dddddd; font-size: 13px; color: #666666; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; height: 50px; display:flex!important; justify-content:left; align-items:center; table-layout:fixed; position: relative; cursor: pointer;}
    #s_visual .tab_box .on_txt::before {content: ''; width: 12px; height: 8px; background: url(../images/icon/arrow2.png) no-repeat center; position: absolute; right: 15px; top: 50%; margin-top: -4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
    #s_visual .tab_box .on_txt.on::before {transform: rotate(180deg);}
    #s_visual .tab_box .dep2_wrap {font-size: 0px; background-color: #234682; padding: 0 15px; position: absolute; top: 50px; left: 0px; box-sizing: border-box; z-index: 1; width: 100%; display: none;}
    #s_visual .tab_box .dep2_wrap > li {padding-bottom: 7px;}
    #s_visual .tab_box .dep2_wrap > li:first-child {padding-top: 20px;}
    #s_visual .tab_box .dep2_wrap > li:last-child {padding-bottom: 21px;}
    #s_visual .tab_box .dep2_wrap > li > a {font-size: 13px; color: #ffffff; font-weight: 500; display: inline-block; line-height: 25px;}

    /* 전자상거래 표준약관 */
	.yg{font-size:12px; line-height:18px;}
	.yg h2{margin-top:50px; font-size:18px;}
	.yg h3{margin-top:20px; margin-bottom:5px; font-size:15px;}
	.yg h4{margin-top:10px; margin-bottom:5px; font-size:14px;}
	.yg p{margin:5px 0;}

	.fly_w{margin-top:5px; padding:10px;}
	.fly_w > li > ul{padding:0 0 0 5px;}
	.fly_w > li > ol{padding:0 0 0 5px;}

	ul.fly_w > li{padding-left:10px; margin-top:3px;}
	ol.fly_w > li{margin-top:3px;}

	.yg_table{margin-top:10px;}
	.yg_table div{width:100%; margin-top:10px;}
	.yg_table div:first-child{margin-top:0;}
	.yg_table div > strong{font-size:12px; padding:8px 0;}
	.yg_table div table{ table-layout:fixed; }
	.yg_table div table thead th{padding:5px 0;}
	.yg_table div table tbody th{padding:5px 0;}
	.yg_table div table tbody td{padding:0 10px}
	#privacy_box select { margin-top: 15px; width: 300px; height: 30px; font-size: 12px; }
}

/* 모바일 */
@media all and (max-width:768px){
    .m_show2 {display: block!important;}
    .pc_show2 {display: none!important;}
    
    
    /* footer */
    #footer .f_inner {padding: 0;}
    #footer .logo {position: relative; top: auto; left: auto; display: block; margin: 0 auto 30px;}
    #footer .link {text-align: center;}
    #footer .info li {display: block; margin-right: 0px; position: relative; padding-left: 45px; min-height: 20px;}
    #footer .info li span {position: absolute; left: 0px; top: 0px;}
    #footer .site {width: 200px; right: auto; top: auto; position: relative; margin-top: 35px;}
    #footer .top_btn {top: auto; bottom: -5px;}
    
    
    
    /* s_visual */
    #s_visual.s_visual_01 .slogan .title_box > .bg_img {background: url('../images/sub/sub_v_01_m.jpg') no-repeat center; background-size: cover;}
    #s_visual.s_visual_02 .slogan .title_box > .bg_img {background: url('../images/sub/sub_v_02_m.jpg') no-repeat center; background-size: cover;}
    #s_visual.s_visual_03 .slogan .title_box > .bg_img {background: url('../images/sub/sub_v_03_m.jpg') no-repeat center; background-size: cover;}
}