@charset "utf-8";
/*공통 css 및 css초기화 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0 auto; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-decoration: none; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

/*reset end*/


/* PC버전 시작  */
	.p_img{display:inline-block;}
	.m_img{ display:none;}
	.hidden {display: none;}
	header { background-color: rgba(255, 255, 255, 0); position: absolute; width: 100%; z-index: 999; overflow: hidden;}
	section { width: 100%; overflow: hidden;}
	.wrap { width: 1200px; overflow: hidden;}
	.wrap::after { content: ""; display: block; clear: both;}
	
	
	/*    헤더 Util 및 GNB    */
	.m_visual{display:none;}
	.hamburger{display: none;}
	header .close{display:none;}

	header .top_util { text-align: right; margin: 20px 45px 20px 0px; float: right;}
	header .top_util li { display: inline-block; font-size: .8em; margin: 0 8px;}

	header .wrap h1 { float: left; margin-top: 15px;}
	header .wrap h1 img:last-child{ display: none;}
	header .wrap .nav { float: right; width: 800px; margin: 15px; color: #fff; text-shadow: 1px 1px 7px #000;} /*GNB 전체 사이즈*/
	
	header .wrap a {color: #fff; /*text-shadow: 1px 1px 7px #000;*/}
	header .wrap .nav li { float: left; width: 113px; text-align: center; margin: 0 10px;} /*메뉴 각자 사이즈*/

	header .wrap .nav li:hover ul{ display: block;}
	header .wrap .nav li ul.sub::after{content:""; display: block; clear: both;}
	header .wrap .nav li ul.sub { position: relative; display: none; padding-top: 10px; font-size: .9em; }
	header .wrap .nav li ul.sub li { clear: left; margin: 12px 0;}
	header .wrap .nav li ul.sub li a{ transition : all .4s;}
	header .wrap .nav li ul.sub li:hover a{ color:#EDEDED;}


	

	
	/*    공통 섹션    */
	section .contents { width: 100%; height: auto; text-align: center; padding: 100px 0 100px 0; position: relative; margin: 0 auto;}
	section .contents_left { width: 100%; height: auto; text-align: left; padding: 100px 0 200px 0; position: relative; margin: 0 auto;}
	section .contents .title { font-weight: bold; font-size: 3em; color: #8a2136; margin: 0px 0px 20px;}
	section .contents p {margin-bottom: 50px;}
	section .contents_left p { margin: 20px 0; line-height: 20px; color: #999; font-size: .9em; }
	section .contents p span { color: #771919; font-size: 1.2em; font-weight: bold;}
	section .contents_left p span { color: #771919; font-size: 1.3em; font-weight: bold; line-height: 26px;}
	
	/*    섹션1 - 동영상영역    */
	section .h100 {height: 100px;}
	section #video_section { width: 100%; overflow: hidden;}
	section  #video_section .visual_main_text { position: absolute; width: 100%; top: 35%; left: 0%; color: #fff; text-align: center; font-size: 5em;  text-shadow: 1px 1px 17px #000;}
	section  #video_section .visual_main_text h2{font-size: 1.1em; margin-bottom: 30px; font-weight: bolder;}
	section  #video_section .visual_main_text p {font-size: 0.7em;}
	section  #video_section .visual_main_text .visual_text01 div {margin-top: 30px;}
	section  #video_section .visual_main_text .visual_text01 div p {font-size: .3em;padding: 5px 0;}
	
	/*    섹션2 -  G-TELP KOREA 영역 (4개박스 )    */
	section .contents_left .quick_icons .box_container {width: 100%;margin-top: 30px;}
	section .contents_left .quick_icons .box_container div.box{ transition: background-size 0.5s ease 0s, contrast .5s, saturate .5s; -ms-transition :background-size 0.5s, contrast .5s, saturate .5s;  background-size:100%;}
	section .contents_left .quick_icons .box_container::after { content: ""; display: block; clear: both;}
	section .contents_left .quick_icons .box_container .box { width: 780px; height: 520px; float: left; position: relative; background-color:aqua; cursor: pointer; overflow: hidden;}
	section .contents_left .quick_icons .box_container .box:hover{background-size: 110%;filter:contrast(1.2) saturate(1.1);}
	section .contents_left .quick_icons .box_container .box:nth-child(2n-1) { top: 100px; transition: top .5s, background-size 0.5s ease .1s;}
	section .contents_left .quick_icons .box_container .box01 {background: url(http://introduce.g-telp.co.kr/images/box01.jpg) no-repeat center center;}
	section .contents_left .quick_icons .box_container .box02 {background: url(http://introduce.g-telp.co.kr/images/box02.jpg) no-repeat center center;}
	section .contents_left .quick_icons .box_container .box03 {background: url(http://introduce.g-telp.co.kr/images/box03.jpg) no-repeat center center;}
	section .contents_left .quick_icons .box_container .box04 {background: url(http://introduce.g-telp.co.kr/images/box04.jpg) no-repeat center center;}
	section .contents_left .quick_icons .box_container .box .box_text { padding: 50px; color: white; text-shadow: 1px 1px 10px #333;}
	section .contents_left .quick_icons .box_container .box .box_text h2 { font-size: 3em; margin-bottom: 20px; font-weight: bold;}
	section .contents_left .quick_icons .box_container .box .box_text h2 span{font-size:.7em;}
	section .contents_left .quick_icons .box_container .box .box_text span {font-size: 1.5em;}


	.pc_swiper{ display: block;}
	.m_swiper{ display: none;}

	.box_group{ width: auto; margin: 0 100px; cursor: pointer;}
	.box_group .s_box{ float: left; position: relative; width:calc(25% - 20px); margin: 0 10px;  }
	.box_group .s_box::after{content:""; clear: both;}
	.box_group .s_box img{width:100%;}
	.box_group .s_box .bottom{ position: absolute; opacity: 0; transition: opacity .3s ease-in-out;}
	.box_group .s_box:hover .bottom{opacity:1;}

	@media all and (min-width:1200px) and (max-width:1600px) {
		.box_group{ width: auto; margin: 0 30px;}
		.box_group .s_box{ float: left; width:calc(25% - 20px); margin: 0 10px;  }
	}
	@media all and (min-width:800px) and (max-width:1200px) {
		.box_group{ width: auto; margin: 0 40px;}
		.box_group .s_box{ float: left; width:calc(50% - 20px); margin: 10px 10px;  }
	}
	@media all and (max-width : 800px){
		.pc_swiper{ display: none;}
		.m_swiper{ display: block;}
		.box_group{ width: auto; margin: 0 40px;}
		.box_group .s_box{ float: left; width:calc(100% - 20px); margin: 10px 10px; transform:scale(1.3); }
		.swiper-button-prev, .swiper-button-next { transform:scale(0.5);}
		.swiper-container {padding:50px 0 100px 0;}
		.swiper-button-prev, .swiper-button-next {top:44%;}
		.box_group .s_box{box-shadow:none;}
	}


	
	/*    섹션3 - Field of Business 영역    */

	section .business .title { font-weight: bold; font-size: 4em; color: #fff; margin: 0px 0px 40px;}
	section .business p span {color: #fff; font-weight: normal;}
	section .business .eng {color: #eee;}
	section .business .prev {cursor: pointer;float: left;}
	section .business .next {cursor: pointer;}
	section .business { background: url("../images/img_contest.jpg"); background-attachment: fixed; background-position: center;}
	section .business .slide_container { width: 4681px; padding: 10px; overflow: hidden;}
	section .business .slide_container .slide { position: relative; float: left; width: 409px; height: 346px; margin: 10px 40px 10px 0; text-align: center; cursor: pointer;}
	section .business .slide_container .slide img { width: 100%; position: absolute; left: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity .4s ease-in;}
	section .business .slide_container .slide img.picture:hover {opacity: 0;}
	section .business .slide_btn{text-align: center;}
	section .business .slide_btn .btn_group::after{ content: ""; display: block; clear: both;}
	section .business .slide_btn .btn_group{ position: absolute; left: calc(50% - 35px); margin-top: 20px;}
	section .business .slide_btn .btn_group li{ float: left; width: 10px; height: 10px; margin-right: 3px; border-radius: 7px; border: 1px #eee solid;}
	section .business .slide_btn .btn_group li.active{background-color: #fff;}

	/*    섹션4 - 국제공인시험 지텔프 (조직도 tree)    */
	section .contents:nth-of-type(7) {background: url(http://introduce.g-telp.co.kr/images/c_bg4.jpg) center no-repeat;}
	section .tree {background: url(http://introduce.g-telp.co.kr/images/tree_bg.jpg);}

	
	/*    섹션5 - 오시는길 Map    */
	section .map .wrap p strong {color: #8a2136;}
	section .map .wrap p span {color: #8a2136;}
	section .map iframe{  border:1px #ccc solid; width: 1200px; height: 632px;}
	
	/*    푸터 - Footer    */
	footer .footer_left {float: left;}
	footer {padding:0 0 40px; background-color:rgb(139, 32, 54); color: #fff; font-size:14px;}
	footer .policy{ background-color:#78182c; width:auto; margin: 0 auto; padding: 20px; margin-bottom: 30px;}

	footer .policy ul li{  display: inline-block; margin-left: 10px; border-left: 1px #fff solid; padding-left: 10px; }
	footer .policy ul li:last-child{border-right: 1px #fff solid; padding-right: 10px;}
	footer .policy ul li a{ color:white;}footer .policy ul li a{ color:white; transition: all 1s;}
	footer .left { float: left; width: 80%;}
	footer .left div:last-child { margin-top: 20px;line-height: 18px;}
	
	footer .right {float: right;}
	footer .right .sns { text-align: right; padding: 0 0 20px 0;}
	footer .right .sns li { display: inline-block; margin: 0 2px;}
	footer .right .sns li a img { width: 28px; height: 28px;}
	
	footer .family_site p { display: inline-block; line-height: 24px;}
	footer .family_site .option_btn { float: right; height: 30px;}
	footer .copy{ clear: both; padding-top:10px; border-top: 1px #d8d8d8 solid; }
/*   PC css 끝    */

/*   미디어쿼리존 시작   */

/*      큰 태블릿용-1  1600px ~ 1200px     */
@media all and (min-width:1200px) and (max-width:1600px) {
	
	.wrap{width:1100px;}

	/* 지텔프 코리아 */
	section .contents_left .quick_icons .box_container .box { width: 550px; height: 367px; float: left; position: relative; background-color: aqua; cursor: pointer; overflow: hidden;}
	section .contents_left .quick_icons .box_container .box:nth-child(2n-1) {top: 0px;}
	section .contents_left .quick_icons .box_container .box .box_text{font-size: .8em; padding: 30px;}
	/*Field of */
	section .business .slide_container .slide { width: 309px; height: 306px; margin: 10px 40px 10px 0;}
	section .business .title{ font-size:3.5em;}
	/* 조직도 */
	section .tree img{width:100%;}
	/* 푸터 */
	footer{padding: 0px 0 30px 0;}
	footer .left { float: left; width: 66%;}
}

/*     작은 태블릿용-2  1200px ~ 800px     */
@media all and (min-width:800px) and (max-width:1200px) {
	
	.m_video{display:block;}
	.m_visual{display:none;}

	header{ position: fixed; transition: left .5s; left: -120%; top: 0; width: calc(100% - 50px); height: 100%; background-color:#fff; box-shadow: border-box; z-index: 102;}
	header .wrap h1 img:first-child{ display: none;}
	header .wrap h1 img:last-child{ display: block;}
	.on{ display: block; left: 0%;}
	header .close{ display: block; position: absolute; width: 50px; right: 20px; top: 15px; color:transparent; height: 50px; cursor: pointer;}
	header .close::before{ content: ""; position: absolute; width: 1px; height: 40px; right: 20px; top: 5px; background-color:#000; transform: rotate(45deg);}
	header .close::after{ content: ""; position: absolute; width: 1px; height: 40px; right: 20px; top: 5px; background-color:#000; transform: rotate(-45deg);}
	 .dim{ display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color:rgba(0,0,0,0.6); z-index: 100;}
	.hamburger{ position: absolute; display: block; color: transparent; width: 30px; height: 20px; border-top: 2px #fff solid; border-bottom: 2px #fff solid; top: 30px; left: 30px; z-index: 101; cursor: pointer;}
	.hamburger::before{ position: absolute; top: 9px; content: ""; width: 30px; height: 2px; background-color: #fff;}
	
	/*    헤더 Util 및 GNB    */
	.wrap { width: 90%; overflow: hidden;}
	.wrap::after { content: ""; display: block; clear: both;}
	header .wrap .top_util{ float: none; text-align: left; position: absolute; bottom:0; right: 0; color:#000;}
	header .top_util li { display: inline-block; font-size: .8em; margin: 0 3px; border: 1px #eee solid; border-radius: 7px; background-color: #8a2136; padding: 10px;}
	header .wrap .top_util li a{color:#fff;}
	header .wrap h1{ float: none; text-align: center;}
	header .wrap .nav{ text-shadow:none; float: none; width: auto; margin: 0; padding: 10px;}
	header .wrap .nav li{ float: none; width: inherit; text-align: left; margin: 30px 0; border-bottom: 2px #eee solid; padding-bottom: 20px;}
	header .wrap .nav li>a{ font-weight:bold; color:black;}
	header .wrap .nav .sub li{border:none;}
	header .wrap .sub li>a{ font-weight:normal; color:#8a2136;}
	
	header .wrap .nav li ul.sub a li { color:black;  text-align: left; font-weight: normal; list-style:circle; margin-left: 20px;}
	
	
	
	section { width: 100%; overflow: hidden;}
	
	/* 섹션2 */
	section .contents_left .quick_icons .box_container .box { width: 100%; margin: 0 auto; height: 367px; float: left; position: relative; background-color: aqua; cursor: pointer; overflow: hidden;}
	section .contents_left .quick_icons .box_container .box:nth-child(2n-1) {top: 0px;}
	section .contents_left .quick_icons .box_container .box .box_text{font-size: .9em;}
	
	/*Field of */
	section .business .slide_container .slide { width: 290px; height: 245px; }
	section .business .title{ font-size:3em;}
	
	/* 조직도 */
	section .tree img{ width:100%; }
	
	/* 푸터 */
	footer{padding: 0 0 20px 0;}
	footer .left { float: left; width: 62%;}
}

/*      모바일용  800미만    */
@media all and (max-width:800px) {
	
	.p_img{display:none;}
	.m_img{ display:inline-block; width: 100%;}
	.wrap{width:100%;}
	.m_video{display:none;}
	.m_visual{display:block;}
	header{ position: fixed; transition: left .5s; left: -120%; top: 0; width: calc(100% - 50px); height: 100%; background-color:#fff; box-shadow: border-box; z-index: 102;}
	header .wrap h1 img:first-child{ display: none;}
	header .wrap h1 img:last-child{ display: block;}
	.on{ display: block; left: 0%; overflow: auto;}
	header .close{ display: block; position: absolute; width: 50px; right: 10px; top: 10px; color:transparent; height: 50px; cursor: pointer;}
	header .close::before{ content: ""; position: absolute; width: 1px; height: 20px; right: 20px; top: 20px; background-color:#000; transform: rotate(45deg);}
	header .close::after{ content: ""; position: absolute; width: 1px; height: 20px; right: 20px; top: 20px; background-color:#000; transform: rotate(-45deg);}
	 .dim{ display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color:rgba(0,0,0,0.6); z-index: 100;}
	.hamburger{ position: absolute; display: block; color: transparent; width: 30px; height: 20px; border-top: 2px #fff solid; border-bottom: 2px #fff solid; top: 30px; left: 30px; z-index: 101; cursor: pointer;}
	.hamburger::before{ position: absolute; top: 9px; content: ""; width: 30px; height: 2px; background-color: #fff;}
	section { width: 100%; overflow: hidden;}
	section .contents{   padding: 50px 0 50px 0;}
	
	.wrap { width: 90%; overflow: hidden;}
	header .wrap .top_util{ float: none; text-align: left; position: absolute; bottom:0; right: 0; color:#000;}
	header .top_util li { display: inline-block; font-size: .8em; margin:3px; border: 1px #eee solid; border-radius: 7px; background-color: #8a2136; padding: 10px;}
	header .wrap .top_util li a{color:#fff;}
	header .wrap h1{ float: none; text-align: center;}
	
	header .wrap .nav{ text-shadow:none; float: none; width: auto; margin: 0; padding: 10px;}
	
	header .wrap .nav li{ float: none; width: inherit; text-align: left; margin: 20px 0; border-bottom: 2px #eee solid; padding-bottom: 20px;}
	header .wrap .nav li>a{ font-weight:bold; color:black;}
	header .wrap .sub li>a{ font-weight:normal; color:#8a2136;}
	header .wrap .nav .sub li{border:none;}
	header .wrap .nav li ul.sub a li { color:black;  text-align: left; font-weight: normal; list-style:circle; margin-left: 20px;}
	.wrap::after { content: ""; display: block; clear: both;}
	
	
	/*    헤더 Util 및 GNB    */
	header .top_util {color:#000;}

	/*    공통 섹션    */
	section .contents { width: 100%; height: auto; text-align: center; position: relative; font-family: "KoPub돋움체 Bold", "KoPub돋움체 Light", "KoPub돋움체 Medium";}
	section .contents_left { width: 100%; height: auto; text-align: left; position: relative; font-family: "KoPub돋움체 Bold", "KoPub돋움체 Light", "KoPub돋움체 Medium"; padding: 50px 0;}
	section .contents .title{font-size: 1.5em;}
	section .contents_left p { margin: 10px 0; line-height: 15px; color: #999; font-size: .6em;}
	section .contents p span { color: #771919; font-size: 1em; font-weight: bold;}
	section .contents_left p span {font-size: 1.5em; font-weight: bold;}
	
	/*    섹션1 - 동영상영역    */
	section #video_section { width: 100%; overflow: hidden;}
	section  #video_section .visual_main_text { position: absolute; width: 100%; top: 22%; left: 0; color: #fff; text-align: center; font-size: 3.5em;  text-shadow: 1px 1px 17px #000;}
	section  #video_section .visual_main_text h2{font-size: .9em; margin-bottom: 20px; font-weight: bolder;}
	section  #video_section .visual_main_text p { font-size: 0.5em;}
	
	/*    섹션2 -  G-TELP KOREA 영역 (4개박스 )    */
	section .contents_left .quick_icons h2 img{ width: 100%;}
	section .contents_left .quick_icons .box_container { width: 100%; margin-top: 30px;}
	section .contents_left .quick_icons .box_container::after { content: ""; display: block; clear: both;}
	section .contents_left .quick_icons .box_container .box .box_text { padding: 20px 0px 50px 15px; color: white; text-shadow: 1px 1px 5px #333; margin-bottom: 50px;}
	section .contents_left .quick_icons .box_container .box .box_text h2 { font-size: 1.2em; margin-bottom: 10px; font-weight: bold;}
	section .contents_left .quick_icons .box_container .box .box_text span {font-size: .8em;}
	section .contents_left .quick_icons .box_container .box {width: 100%; height: auto; float: left; position: relative; background-color: aqua; cursor: pointer; overflow: hidden; background-size:cover;}
	section .contents_left .quick_icons .box_container .box:nth-child(2n-1) {top: 0px;}
	section .contents_left .quick_icons .box_container .box01 {background: url(http://introduce.g-telp.co.kr/images/box01.jpg) no-repeat center center; background-size:100%;}
	section .contents_left .quick_icons .box_container .box02 {background: url(http://introduce.g-telp.co.kr/images/box02.jpg) no-repeat center center; background-size:100%;}
	section .contents_left .quick_icons .box_container .box03 {background: url(http://introduce.g-telp.co.kr/images/box03.jpg) no-repeat center center; background-size:100%;}
	section .contents_left .quick_icons .box_container .box04 {background: url(http://introduce.g-telp.co.kr/images/box04.jpg) no-repeat center center; background-size:100%;}

	/*    섹션3 - Field of Business 영역    */
	section .business .slide_container .slide { width: 200px; height: 169px; }
	section .business {background: url("../images/mobile/img_contest_m.jpg");}
	section .business .title{ font-size:2em;  margin: 0px 0px 20px;}

	/*    섹션4 - 국제공인시험 지텔프 (조직도 tree)    */
	section .contents:nth-of-type(7) {background: url(http://introduce.g-telp.co.kr/images/c_bg4.jpg) center no-repeat;}
	section .tree {background: url(http://introduce.g-telp.co.kr/images/mobile/tree_bg_m.jpg);}
	section .tree img{width:100%;}
	section .tree .wrap img:first-child{ display: none;}
	section .tree .wrap img:last-child{ display: block; width: 100%;}
	
	/*    섹션5 - 오시는길 Map    */
	section .map .wrap p strong {color: #8a2136;}
	section .map .wrap p span {color: #8a2136;}
	section .map iframe{ width: 90%; height: 332px; border:1px #ccc solid}
	
	/*    푸터 - Footer    */
	footer { padding: 20px 0 30px 0; color: #fff; text-align: center; font-size:12px;}
	footer .policy { display: none;}
	footer .left { float: none; width: 100%;}
	footer .left div:last-child { margin-top: 10px; line-height: normal;}
	footer .right {float: none;}
	footer .right .sns { text-align: center; padding: 10px 0;}
	footer .right .sns li { display: inline-block; margin: 0 2px;}
	footer .family_site p { display: inline-block; line-height: 24px;}
	footer .family_site .option_btn { float: none; height: 30px; margin: 10px 0;}	
	
}